fixes

.storybook/preview-head.html

@@ -28,16 +28,36 @@
     background-color: var(--fui-color-surface-base);
   }
   .sbdocs.sbdocs-content {
-    max-width: 650px;
+    max-width: 600px;
     outline: 10px solid rgba(130, 130, 130, 0.2);
-    border-radius: 8px;
+    border-radius: 4px;
     outline-offset: 20px;
   }
 
-  .sbdocs-title::before {
+  [data-theme="dark"] h1.sbdocs-title.sb-unstyled {
+    font-size: 23px;
+    color: #9a78ff;
+  }
+
+  [data-theme="light"] h1.sbdocs-title.sb-unstyled {
+    font-size: 23px;
+    color: #7955e4;
+  }
+
+  [data-theme="light"] .sbdocs-title::before {
     content: url('data:image/svg+xml,<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.4802 10.3736C10.9879 10.8813 11.811 10.8813 12.3187 10.3736L16.1371 6.55523C16.6448 6.04754 16.6448 5.22443 16.1371 4.71675L12.4601 1.03979C11.8744 0.454006 10.9246 0.454006 10.3388 1.03979L6.66187 4.71675C6.15419 5.22443 6.15419 6.04754 6.66187 6.55523L10.4802 10.3736ZM5.95477 16.7376C5.44709 17.2453 4.62398 17.2453 4.1163 16.7376L0.43934 13.0607C-0.146447 12.4749 -0.146447 11.5251 0.43934 10.9393L4.11629 7.26238C4.62398 6.7547 5.44709 6.7547 5.95477 7.26238L9.77315 11.0808C10.2808 11.5884 10.2808 12.4115 9.77315 12.9192L5.95477 16.7376ZM16.8442 16.7376C17.3519 17.2453 18.175 17.2453 18.6827 16.7376L22.3596 13.0607C22.9454 12.4749 22.9454 11.5251 22.3596 10.9393L18.6827 7.26238C18.175 6.7547 17.3519 6.7547 16.8442 7.26238L13.0258 11.0808C12.5182 11.5884 12.5182 12.4116 13.0258 12.9192L16.8442 16.7376ZM10.3388 22.9602C10.9246 23.546 11.8744 23.546 12.4602 22.9602L16.1371 19.2833C16.6448 18.7756 16.6448 17.9525 16.1371 17.4448L12.3187 13.6264C11.8111 13.1187 10.9879 13.1187 10.4803 13.6264L6.66189 17.4448C6.1542 17.9525 6.1542 18.7756 6.66189 19.2833L10.3388 22.9602Z" fill="%23714CE0"/></svg>');
+  }
+
+  [data-theme="dark"] .sbdocs-title::before {
+    content: url('');
+  }
+
+  .sbdocs-title::before {
     display: block;
     position: relative;
+    fill: red;
+    top: 4px;
+    left: 0;
     float: left;
     margin-right: 8px;
   }

src/components/fui-badge/fui-badge.stories.tsx

@@ -12,6 +12,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2461-2893'
+    },
+    docs: {
+      description: {
+        component: 'Assist people to quickly grasp information, status & classification. Provide feedback, and establish trust and security.'
+      }
     }
   },
   argTypes: {

src/components/fui-button/fui-button.stories.tsx

@@ -12,6 +12,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2422-37274'
+    },
+    docs: {
+      description: {
+        component: "These button styles are well-known, user-friendly, and feature a distinct visual hierarchy that doesn't rely solely on color. Show people how significant actions are by setting: primary, secondary or tertiary hierarchy. You might also need varying button sizes, depending on the interface's complexity. Use actionType to provide feedback about the outcome of actions."
+      }
     }
   },
   argTypes: {

src/components/fui-checkbox/fui-checkbox.stories.tsx

@@ -11,6 +11,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2461-15311'
+    },
+    docs: {
+      description: {
+        component: 'Checkboxes allow people to select multiple options or toggle a single choice. For single selections, consider radio buttons or drop-downs. Note that checkboxes require a submission step, while switches offer real-time interaction.'
+      }
     }
   },
   argTypes: {

src/components/fui-empty/fui-empty.stories.tsx

@@ -12,6 +12,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2464-16262'
+    },
+    docs: {
+      description: {
+        component: 'Guide people in the absence of content, reducing confusion, encouraging actions, reinforcing branding, and offering friendly tips or tutorials to help people navigate new situations or create content when no data is available.'
+      }
     }
   },
   argTypes: {

src/components/fui-modal/fui-modal.stories.tsx

@@ -16,6 +16,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2465-46880'
+    },
+    docs: {
+      description: {
+        component: 'Present content in a distinct, focused mode, keeping people from interacting with the main view until they intentionally dismiss the modal. Modals can help people to: Receive critical information and, if necessary, act on it. Provide options to confirm or modify their most recent action. Perform a distinct, narrowly scoped task without losing track of their previous context. Focus on a complex task.'
+      }
     }
   },
   argTypes: {

src/components/fui-notification/fui-notification.stories.tsx

@@ -11,6 +11,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2511-14321&mode=design&t=jq0JgMhh6dwhuYIm-4'
+    },
+    docs: {
+      description: {
+        component: 'Confirm actions, update people about timely events and provide status updates for processes. When providing an action, opt for non-destructive actions and clear distinctions for destructive ones. The information in notifications is valuable but not critical, aiming for quick and concise updates that people can grasp at a glance.'
+      }
     }
   },
   tags: ['autodocs'],

src/components/fui-option-group/fui-option-group.stories.tsx

@@ -11,6 +11,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2574-19579&mode=design&t=jq0JgMhh6dwhuYIm-4'
+    },
+    docs: {
+      description: {
+        component: 'Embed this component within other components such as Popover or Select to showcase a configurable grouped list of list items or options. Each option can be individually configured, and the grouping allows for versatile customization.'
+      }
     }
   },
   argTypes: {

src/components/fui-popover/fui-popover.stories.tsx

@@ -15,6 +15,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=3079-28605&mode=dev'
+    },
+    docs: {
+      description: {
+        component: 'Help people conveniently access functionality or info. Popover is a modular element that appears above other content when triggered. Should ideally not obstruct the element that triggered them or essential content. Including a Close button is recommended for clarity, but a Popover often closes by clicking outside or selecting an item within. Should not be obscured by other elements, except for alerts. Avoid making a Popover too big.'
+      }
     }
   },
   argTypes: {

src/components/fui-radio/fui-radio.stories.tsx

@@ -11,6 +11,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2511-73454&mode=design&t=jq0JgMhh6dwhuYIm-4'
+    },
+    docs: {
+      description: {
+        component: 'Radio groups are best for selecting a single option from a short list, while Selects are less efficient due to multiple interactions and hidden options. Radio buttons are preferable for lists of around ten or fewer options, as they require just one quick interaction and ensure all choices are visible and easily comparable. If there isn’t enough space, try a a select instead.'
+      }
     }
   },
   argTypes: {

src/components/fui-select/fui-select.stories.tsx

@@ -12,6 +12,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2574-19579&mode=design&t=jq0JgMhh6dwhuYIm-4'
+    },
+    docs: {
+      description: {
+        component: 'Help people choose single or multiple values from a set of options. Consider select when you have 5 or more options. As an alternative, radio buttons or checkboxes can make the interface cleaner and more accessible.'
+      }
     }
   },
   argTypes: {

src/components/fui-status-message/fui-status-message.stories.tsx

@@ -10,6 +10,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2511-43025&mode=design&t=jq0JgMhh6dwhuYIm-4'
+    },
+    docs: {
+      description: {
+        component: 'Offer inline feedback for one of three status types. It is most effective in compact spaces, alongside form controls, or within inline text.'
+      }
     }
   },
   argTypes: {

src/components/fui-stepper/fui-stepper.stories.tsx

@@ -11,6 +11,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2511-80120&mode=design&t=jq0JgMhh6dwhuYIm-4'
+    },
+    docs: {
+      description: {
+        component: 'Help people make small numeric changes by pressing buttons or typing numbers. The input is also editable for larger value changes since people can directly edit the input field.'
+      }
     }
   },
   argTypes: {

src/components/fui-switch/fui-switch.stories.tsx

@@ -11,6 +11,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2540-39847&mode=design&t=jq0JgMhh6dwhuYIm-4'
+    },
+    docs: {
+      description: {
+        component: 'Help people choose between two opposing values. Use for options with immediate effects with clear identification through context or labels if needed. Switch has more visual weight than a checkbox, so it looks better when it controls more functionality, so avoid employing it for minor settings.'
+      }
     }
   },
   argTypes: {

src/components/fui-text-input/fui-text-input.stories.tsx

@@ -12,6 +12,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2547-68586&mode=design&t=jq0JgMhh6dwhuYIm-4'
+    },
+    docs: {
+      description: {
+        component: 'Request a small amount of textual information from people, such as a name or an email address. Display a label above the text field to help communicate its purpose. To the extent possible, match the size of a text field to the quantity of anticipated text. Use status to validate fields when it makes sense.'
+      }
     }
   },
   argTypes: {

src/components/fui-toggle/fui-toggle.stories.tsx

@@ -12,6 +12,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2541-41544&mode=design&t=jq0JgMhh6dwhuYIm-4'
+    },
+    docs: {
+      description: {
+        component: 'Help people navigate between mutually exclusive panes of content in the same view or toggle between two or more configurations.'
+      }
     }
   },
   argTypes: {

src/components/fui-tooltip/fui-tooltip.stories.tsx

@@ -13,6 +13,11 @@ const meta = {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2542-48551&mode=design&t=jq0JgMhh6dwhuYIm-4'
+    },
+    docs: {
+      description: {
+        component: 'Offer concise feedback to inform people about the outcomes of actions or provide brief information about interface components when their cursor interacts with them. Prioritize the specific control, use action-oriented language, and keep the messages brief. Tooltips visually stand out by using contrasting colors with the theme interface.'
+      }
     }
   },
   argTypes: {