@bspk/ui 1.1.21 → 1.1.22

package/dist/RadioGroup.d.ts

@@ -1,5 +1,6 @@
 import { ToggleOptionProps } from './ToggleOption';
 import { ElementProps, CommonProps } from './';
+import './radio-group.scss';
 export type RadioGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
 export type RadioGroupProps = CommonProps<'name'> & {
     /**
@@ -25,8 +26,8 @@ export type RadioGroupProps = CommonProps<'name'> & {
      *
      * @example
      *     [
-     *         { value: '1', label: 'Option 1', description: 'Description here' },
-     *         { value: '2', label: 'Option 2' },
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Option 2', description: 'Description here' },
      *         { value: '3', label: 'Option 3' },
      *     ];
      *
@@ -35,18 +36,49 @@ export type RadioGroupProps = CommonProps<'name'> & {
      */
     options: RadioGroupOption[];
     /**
-     * The size of the radio group labels.
+     * The label of the radio group.
      *
-     * @default base
+     * @required
+     */
+    label: string;
+    /**
+     * Shows the RadioGroup label. When label isn't showing it is used as the aria-label prop.
+     *
+     * @default true
      */
-    size?: 'base' | 'large' | 'small';
+    showLabel?: boolean;
 };
 /**
  * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
  *
+ * @example
+ *     import { useState } from 'react';
+ *     import { RadioGroup } from '@bspk/ui/RadioGroup';
+ *
+ *     export function Example() {
+ *         const [selectedOption, setSelectedOption] = useState<string>('1');
+ *
+ *         return (
+ *             <RadioGroup
+ *                 name="Example name"
+ *                 onChange={(nextValue) => setSelectedOption(nextValue)}
+ *                 options={[
+ *                     {
+ *                         value: '1',
+ *                         label: 'Option 1',
+ *                         description: 'Description here',
+ *                     },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedOption}
+ *             />
+ *         );
+ *     }
+ *
  * @name RadioGroup
  */
-declare function RadioGroup({ onChange, options, name, value: groupValue, size, ...props }: ElementProps<RadioGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroup({ onChange, options, name, value: groupValue, label: groupLabel, showLabel, ...props }: ElementProps<RadioGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 declare namespace RadioGroup {
     var bspkName: string;
 }

package/dist/RadioGroup.js

@@ -1,15 +1,44 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
 import { Radio } from './Radio';
 import { ToggleOption } from './ToggleOption';
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=radio-group]{display:flex;flex-direction:column;gap:var(--spacing-sizing-01)}`);;
 /**
  * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
  *
+ * @example
+ *     import { useState } from 'react';
+ *     import { RadioGroup } from '@bspk/ui/RadioGroup';
+ *
+ *     export function Example() {
+ *         const [selectedOption, setSelectedOption] = useState<string>('1');
+ *
+ *         return (
+ *             <RadioGroup
+ *                 name="Example name"
+ *                 onChange={(nextValue) => setSelectedOption(nextValue)}
+ *                 options={[
+ *                     {
+ *                         value: '1',
+ *                         label: 'Option 1',
+ *                         description: 'Description here',
+ *                     },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedOption}
+ *             />
+ *         );
+ *     }
+ *
  * @name RadioGroup
  */
-function RadioGroup({ onChange, options = [], name, value: groupValue, size = 'base', ...props }) {
-    return (_jsx("div", { ...props, "data-bspk": "radio-group", role: "radiogroup", style: { display: 'contents' }, children: options.map(({ label, description, value }, index) => {
-            return (_jsx(ToggleOption, { description: description, label: label, size: size, children: _jsx(Radio, { "aria-label": label, checked: groupValue === value, name: name, onChange: (checked) => checked && onChange(value), value: value }) }, `toggle-option-${value || index}`));
-        }) }));
+function RadioGroup({ onChange, options = [], name, value: groupValue, label: groupLabel, showLabel = true, ...props }) {
+    const id = `radio-group-${useId()}`;
+    return (_jsxs("div", { ...props, "aria-label": !showLabel ? groupLabel : undefined, "aria-labelledby": showLabel ? `${id}-label` : undefined, "data-bspk": "radio-group", id: id, role: "group", children: [showLabel && _jsx("label", { id: `${id}-label`, children: groupLabel }), _jsx("div", { role: "radiogroup", children: options.map(({ label, description, value }, index) => {
+                    return (_jsx(ToggleOption, { description: description, label: label, children: _jsx(Radio, { "aria-label": label, checked: groupValue === value, name: name, onChange: (checked) => checked && onChange(value), value: value }) }, `toggle-option-${value || index}`));
+                }) })] }));
 }
 RadioGroup.bspkName = 'RadioGroup';
 export { RadioGroup };

package/dist/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../src/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA+CjE;;;;GAIG;AACH,SAAS,UAAU,CAAC,EAChB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,IAAI,GAAG,MAAM,EACb,GAAG,KAAK,EAC2B;IACnC,OAAO,CACH,iBAAS,KAAK,eAAY,aAAa,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,YACnF,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;YAClD,OAAO,CACH,KAAC,YAAY,IACT,WAAW,EAAE,WAAW,EAExB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,YAEV,KAAC,KAAK,kBACU,KAAK,EACjB,OAAO,EAAE,UAAU,KAAK,KAAK,EAC7B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,EACjD,KAAK,EAAE,KAAK,GACd,IAVG,iBAAiB,KAAK,IAAI,KAAK,EAAE,CAW3B,CAClB,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../src/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAIjE,OAAO,oBAAoB,CAAC;AAmD5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,SAAS,UAAU,CAAC,EAChB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,UAAU,EACjB,SAAS,GAAG,IAAI,EAChB,GAAG,KAAK,EAC2B;IACnC,MAAM,EAAE,GAAG,eAAe,KAAK,EAAE,EAAE,CAAC;IAEpC,OAAO,CACH,kBACQ,KAAK,gBACG,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,qBAC9B,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,eAC5C,aAAa,EACvB,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,aAEX,SAAS,IAAI,gBAAO,EAAE,EAAE,GAAG,EAAE,QAAQ,YAAG,UAAU,GAAS,EAC5D,cAAK,IAAI,EAAC,YAAY,YACjB,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;oBAClD,OAAO,CACH,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAA0C,KAAK,EAAE,KAAK,YACxF,KAAC,KAAK,kBACU,KAAK,EACjB,OAAO,EAAE,UAAU,KAAK,KAAK,EAC7B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,EACjD,KAAK,EAAE,KAAK,GACd,IAPuC,iBAAiB,KAAK,IAAI,KAAK,EAAE,CAQ/D,CAClB,CAAC;gBACN,CAAC,CAAC,GACA,IACJ,CACT,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/RadioOption.d.ts

@@ -13,9 +13,11 @@ export type RadioOptionProps = InvalidPropsLibrary & Pick<RadioProps, 'checked'
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
  *
+ * If only a radio button is needed, consider using the `Radio` component directly.
+ *
  * @name RadioOption
  */
-declare function RadioOption({ label, description, ...checkboxProps }: RadioOptionProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioOption({ label: labelProp, description, ...checkboxProps }: RadioOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
 declare namespace RadioOption {
     var bspkName: string;
 }

package/dist/RadioOption.js

@@ -4,10 +4,13 @@ import { ToggleOption } from './ToggleOption';
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
  *
+ * If only a radio button is needed, consider using the `Radio` component directly.
+ *
  * @name RadioOption
  */
-function RadioOption({ label, description, ...checkboxProps }) {
-    return (_jsx(ToggleOption, { "data-bspk": "radio-option", description: description, label: label, children: _jsx(Radio, { ...checkboxProps, "aria-label": label }) }));
+function RadioOption({ label: labelProp, description, ...checkboxProps }) {
+    const label = labelProp || description;
+    return (label && (_jsx(ToggleOption, { "data-bspk": "radio-option", description: description, label: label, children: _jsx(Radio, { ...checkboxProps, "aria-label": label }) })));
 }
 RadioOption.bspkName = 'RadioOption';
 export { RadioOption };

package/dist/RadioOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioOption.js","sourceRoot":"","sources":["../src/RadioOption.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,KAAK,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAejE;;;;GAIG;AACH,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,aAAa,EAAoB;IAC3E,OAAO,CACH,KAAC,YAAY,iBAAW,cAAc,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YACzE,KAAC,KAAK,OAAK,aAAa,gBAAc,KAAK,GAAI,GACpC,CAClB,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"RadioOption.js","sourceRoot":"","sources":["../src/RadioOption.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,KAAK,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAejE;;;;;;GAMG;AACH,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,aAAa,EAAoB;IACtF,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBAAW,cAAc,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YACzE,KAAC,KAAK,OAAK,aAAa,gBAAc,KAAK,GAAI,GACpC,CAClB,CACJ,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/SearchBar.d.ts

@@ -56,6 +56,40 @@ export type SearchBarProps<T extends MenuItem = MenuItem> = Pick<MenuProps<T>, '
 /**
  * Component description coming soon.
  *
+ * @example
+ *     import { useState } from 'react';
+ *     import { SearchBar } from '@bspk/ui/SearchBar';
+ *
+ *     export function Example() {
+ *         const [searchText, setSearchText] = useState<string>('');
+ *
+ *         const handleItemSelect = (item) =>
+ *             console.log('Selected item:', item);
+ *
+ *         return (
+ *             <SearchBar
+ *                 aria-label="Example aria-label"
+ *                 items={[
+ *                     { value: '1', label: 'Apple Pie' },
+ *                     { value: '2', label: 'Banana Split' },
+ *                     { value: '3', label: 'Cherry Tart' },
+ *                     { value: '4', label: 'Dragonfruit Sorbet' },
+ *                     { value: '5', label: 'Elderberry Jam' },
+ *                     { value: '6', label: 'Fig Newton' },
+ *                     { value: '7', label: 'Grape Soda' },
+ *                     { value: '8', label: 'Honeydew Smoothie' },
+ *                     { value: '9', label: 'Ice Cream Sandwich' },
+ *                     { value: '10', label: 'Jackfruit Pudding' },
+ *                 ]}
+ *                 name="Example name"
+ *                 placeholder="Search"
+ *                 value={searchText}
+ *                 onChange={setSearchText}
+ *                 onSelect={handleItemSelect}
+ *             />
+ *         );
+ *     }
+ *
  * @name SearchBar
  */
 declare function SearchBar({ itemCount, items, noResultsMessage, placeholder, 'aria-label': ariaLabel, id: idProp, inputRef, name, size, onSelect, value, onChange, showMenu, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/SearchBar.js

@@ -12,6 +12,40 @@ import { useId } from './hooks/useId';
 /**
  * Component description coming soon.
  *
+ * @example
+ *     import { useState } from 'react';
+ *     import { SearchBar } from '@bspk/ui/SearchBar';
+ *
+ *     export function Example() {
+ *         const [searchText, setSearchText] = useState<string>('');
+ *
+ *         const handleItemSelect = (item) =>
+ *             console.log('Selected item:', item);
+ *
+ *         return (
+ *             <SearchBar
+ *                 aria-label="Example aria-label"
+ *                 items={[
+ *                     { value: '1', label: 'Apple Pie' },
+ *                     { value: '2', label: 'Banana Split' },
+ *                     { value: '3', label: 'Cherry Tart' },
+ *                     { value: '4', label: 'Dragonfruit Sorbet' },
+ *                     { value: '5', label: 'Elderberry Jam' },
+ *                     { value: '6', label: 'Fig Newton' },
+ *                     { value: '7', label: 'Grape Soda' },
+ *                     { value: '8', label: 'Honeydew Smoothie' },
+ *                     { value: '9', label: 'Ice Cream Sandwich' },
+ *                     { value: '10', label: 'Jackfruit Pudding' },
+ *                 ]}
+ *                 name="Example name"
+ *                 placeholder="Search"
+ *                 value={searchText}
+ *                 onChange={setSearchText}
+ *                 onSelect={handleItemSelect}
+ *             />
+ *         );
+ *     }
+ *
  * @name SearchBar
  */
 function SearchBar({ itemCount, items, noResultsMessage, placeholder = 'Search', 'aria-label': ariaLabel, id: idProp, inputRef, name, size = 'medium', onSelect, value, onChange, showMenu = true, }) {

package/dist/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../src/SearchBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../src/SearchBar.tsx"],"names":[],"mappings":"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"}

package/dist/SegmentedControl.d.ts

@@ -2,18 +2,23 @@ import './segmented-control.scss';
 import { ElementProps } from './';
 export type SegmentedControlOption = {
     /**
-     * The label of the option. This is the text that will be displayed on the option.
+     * The label of the option. This is the text that will be displayed on the
+     * option.
      *
      * @required
      */
     label: string;
     /**
-     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+     * Determines if the element is
+     * [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
      *
      * @default false
      */
     disabled?: boolean;
-    /** The value of the option. If not provided, the label will be used as the value. */
+    /**
+     * The value of the option. If not provided, the label will be used as the
+     * value.
+     */
     value?: string;
     /**
      * The the icon to display before the label.
@@ -30,7 +35,8 @@ export type SegmentedControlOption = {
 };
 export type SegmentedControlProps = {
     /**
-     * The options to display. Each option has a label and an optional leading icon.
+     * The options to display. Each option has a label and an optional leading
+     * icon.
      *
      * @example
      *     [
@@ -65,15 +71,16 @@ export type SegmentedControlProps = {
      */
     size?: 'medium' | 'small';
     /**
-     * The width of the options. If set to 'fill', the options will fill the width of the container. If set to 'hug',
-     * the options will be as wide as their content.
+     * The width of the options. If set to 'fill', the options will fill the
+     * width of the container. If set to 'hug', the options will be as wide as
+     * their content.
      *
      * @default hug
      */
     width?: 'fill' | 'hug';
     /**
-     * Determines if the labels of the options should be displayed. If icons are not provided for every option this is
-     * ignored and labels are shown.
+     * Determines if the labels of the options should be displayed. If icons are
+     * not provided for every option this is ignored and labels are shown.
      *
      * @default true
      */
@@ -82,6 +89,26 @@ export type SegmentedControlProps = {
 /**
  * Navigation tool that organizes content across different screens and views.
  *
+ * @example
+ *     import { useState } from 'react';
+ *     import { SegmentedControl } from '@bspk/ui/SegmentedControl';
+ *
+ *     export function Example() {
+ *         const [selectedOption, setSelectedOption] = useState<string>();
+ *
+ *         return (
+ *             <SegmentedControl
+ *                 onChange={setSelectedOption}
+ *                 options={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedOption}
+ *             />
+ *         );
+ *     }
+ *
  * @name SegmentedControl
  */
 declare function SegmentedControl({ onChange, value, size, options: optionsProp, width, showLabels: showLabelsProp, ...containerProps }: ElementProps<SegmentedControlProps, 'div'>): import("react/jsx-runtime").JSX.Element;

package/dist/SegmentedControl.js

@@ -7,15 +7,37 @@ import { useOptionIconsInvalid } from './hooks/useOptionIconsInvalid';
 /**
  * Navigation tool that organizes content across different screens and views.
  *
+ * @example
+ *     import { useState } from 'react';
+ *     import { SegmentedControl } from '@bspk/ui/SegmentedControl';
+ *
+ *     export function Example() {
+ *         const [selectedOption, setSelectedOption] = useState<string>();
+ *
+ *         return (
+ *             <SegmentedControl
+ *                 onChange={setSelectedOption}
+ *                 options={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedOption}
+ *             />
+ *         );
+ *     }
+ *
  * @name SegmentedControl
  */
 function SegmentedControl({ onChange, value, size = 'medium', options: optionsProp, width = 'hug', showLabels: showLabelsProp = true, ...containerProps }) {
     const options = Array.isArray(optionsProp) ? optionsProp : [];
     useOptionIconsInvalid(options);
-    const hideLabels = showLabelsProp === false && options.every((item) => item.icon && item.label);
+    const hideLabels = showLabelsProp === false &&
+        options.every((item) => item.icon && item.label);
     return (_jsx("div", { ...containerProps, "data-bspk": "segmented-control", "data-size": size, "data-width": width, children: options.map((item, index) => {
             const isActive = item.value === value;
-            return (_jsx(Fragment, { children: _jsx(Tooltip, { disabled: !hideLabels, label: item.label, placement: "top", children: _jsx("button", { "aria-label": item.label, "data-first": index === 0 || undefined, "data-last": index === options.length - 1 || undefined, "data-selected": isActive || undefined, disabled: item.disabled || undefined, onClick: () => onChange(item.value || item.label), children: _jsx("span", { "data-outer": true, children: _jsxs("span", { "data-inner": true, children: [(isActive && item.iconActive) || item.icon, !hideLabels && item.label] }) }) }) }) }, item.value));
+            return (_jsx(Fragment, { children: _jsx(Tooltip, { disabled: !hideLabels, label: item.label, placement: "top", children: _jsx("button", { "aria-label": item.label, "data-first": index === 0 || undefined, "data-last": index === options.length - 1 || undefined, "data-selected": isActive || undefined, disabled: item.disabled || undefined, onClick: () => onChange(item.value || item.label), children: _jsx("span", { "data-outer": true, children: _jsxs("span", { "data-inner": true, children: [(isActive && item.iconActive) ||
+                                        item.icon, !hideLabels && item.label] }) }) }) }) }, item.value));
         }) }));
 }
 SegmentedControl.bspkName = 'SegmentedControl';

package/dist/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAqFtE;;;;GAIG;AACH,SAAS,gBAAgB,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EAAE,WAAW,EACpB,KAAK,GAAG,KAAK,EACb,UAAU,EAAE,cAAc,GAAG,IAAI,EACjC,GAAG,cAAc,EACwB;IACzC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAE/B,MAAM,UAAU,GAAG,cAAc,KAAK,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAEhG,OAAO,CACH,iBAAS,cAAc,eAAY,mBAAmB,eAAY,IAAI,gBAAc,KAAK,YACpF,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;YACtC,OAAO,CACH,KAAC,QAAQ,cACL,KAAC,OAAO,IAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAC,KAAK,YAC9D,+BACgB,IAAI,CAAC,KAAK,gBACV,KAAK,KAAK,CAAC,IAAI,SAAS,eACzB,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,mBACrC,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,YAEjD,6CACI,+CACK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,IAAI,EAC1C,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IACvB,GACJ,GACF,GACH,IAjBC,IAAI,CAAC,KAAK,CAkBd,CACd,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,gBAAgB,CAAC,QAAQ,GAAG,kBAAkB,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AA4FtE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,SAAS,gBAAgB,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EAAE,WAAW,EACpB,KAAK,GAAG,KAAK,EACb,UAAU,EAAE,cAAc,GAAG,IAAI,EACjC,GAAG,cAAc,EACwB;IACzC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAE/B,MAAM,UAAU,GACZ,cAAc,KAAK,KAAK;QACxB,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAErD,OAAO,CACH,iBACQ,cAAc,eACR,mBAAmB,eAClB,IAAI,gBACH,KAAK,YAEhB,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;YACtC,OAAO,CACH,KAAC,QAAQ,cACL,KAAC,OAAO,IACJ,QAAQ,EAAE,CAAC,UAAU,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAC,KAAK,YAEf,+BACgB,IAAI,CAAC,KAAK,gBACV,KAAK,KAAK,CAAC,IAAI,SAAS,eAEhC,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,mBAE9B,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,GAAG,EAAE,CACV,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,YAGtC,6CACI,+CACK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC;wCAC1B,IAAI,CAAC,IAAI,EACZ,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IACvB,GACJ,GACF,GACH,IA1BC,IAAI,CAAC,KAAK,CA2Bd,CACd,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,gBAAgB,CAAC,QAAQ,GAAG,kBAAkB,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/Skeleton.d.ts

@@ -40,7 +40,9 @@ export type SkeletonProps = {
  * displayed on the screen.
  *
  * @example
- *     function Example() {
+ *     import { Skeleton } from '@bspk/ui/skeleton';
+ *
+ *     function Example(item: { title: string; src: string } | null) {
  *         return item ? (
  *             <img
  *                 style={{

package/dist/Skeleton.js

@@ -14,7 +14,9 @@ styleAdd(`[data-bspk=skeleton]{/*!
  * displayed on the screen.
  *
  * @example
- *     function Example() {
+ *     import { Skeleton } from '@bspk/ui/skeleton';
+ *
+ *     function Example(item: { title: string; src: string } | null) {
  *         return item ? (
  *             <img
  *                 style={{

package/dist/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../src/Skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AAsCzB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,SAAS,QAAQ,CAAC,EACd,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,GAAG,EACZ,SAAS,EACT,WAAW,EAAE,QAAQ,EACrB,OAAO,GAAG,aAAa,GACX;IACZ,OAAO,CACH,2BACc,UAAU,kBACN,OAAO,EACrB,KAAK,EACD;YACI,UAAU,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;YAC/D,eAAe,EAAE,SAAS,QAAQ,QAAQ;YAC1C,eAAe,EAAE,cAAc,QAAQ,yBAAyB,QAAQ,SAAS;YACjF,SAAS,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK;SAC7C,YAGrB,OAAO,KAAK,MAAM;YACf,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,mCAAoB,KAAK,CAAI,CAAC,GAC1F,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../src/Skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AAsCzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,SAAS,QAAQ,CAAC,EACd,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,GAAG,EACZ,SAAS,EACT,WAAW,EAAE,QAAQ,EACrB,OAAO,GAAG,aAAa,GACX;IACZ,OAAO,CACH,2BACc,UAAU,kBACN,OAAO,EACrB,KAAK,EACD;YACI,UAAU,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;YAC/D,eAAe,EAAE,SAAS,QAAQ,QAAQ;YAC1C,eAAe,EAAE,cAAc,QAAQ,yBAAyB,QAAQ,SAAS;YACjF,SAAS,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK;SAC7C,YAGrB,OAAO,KAAK,MAAM;YACf,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,mCAAoB,KAAK,CAAI,CAAC,GAC1F,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/Switch.d.ts

@@ -19,7 +19,24 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'valu
 /**
  * A control element that allows users to toggle between two states, typically representing on/off and inherits
  * immediate reaction in each state. This is the base element and if used directly you must wrap it with a label. This
- * will more often be used in the SwitchOption or SwitchGroup component.
+ * will more often be used in the SwitchOption component.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { Switch } from '@bspk/ui/Switch';
+ *
+ *     export function Example() {
+ *         const [isChecked, setIsChecked] = useState<boolean>(false);
+ *
+ *         return (
+ *             <Switch
+ *                 aria-label="Example aria-label"
+ *                 name="Example name"
+ *                 onChange={setIsChecked}
+ *                 checked={isChecked}
+ *             />
+ *         );
+ *     }
  *
  * @element
  *

package/dist/Switch.js

@@ -4,7 +4,24 @@ styleAdd(`[data-bspk=switch]{--track-width: var(--spacing-sizing-09);--toggle-wi
 /**
  * A control element that allows users to toggle between two states, typically representing on/off and inherits
  * immediate reaction in each state. This is the base element and if used directly you must wrap it with a label. This
- * will more often be used in the SwitchOption or SwitchGroup component.
+ * will more often be used in the SwitchOption component.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { Switch } from '@bspk/ui/Switch';
+ *
+ *     export function Example() {
+ *         const [isChecked, setIsChecked] = useState<boolean>(false);
+ *
+ *         return (
+ *             <Switch
+ *                 aria-label="Example aria-label"
+ *                 name="Example name"
+ *                 onChange={setIsChecked}
+ *                 checked={isChecked}
+ *             />
+ *         );
+ *     }
  *
  * @element
  *

package/dist/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AAqBvB;;;;;;;;GAQG;AACH,SAAS,MAAM,CAAC,KAAkB;IAC9B,MAAM;IACF,EAAE;IACF,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,GAAG,UAAU,EAChB,GAAG,KAAK,CAAC;IAEV,OAAO,CACH,6BAAgB,QAAQ,aACpB,mBACQ,UAAU,mBACC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,IAAI,EAAC,UAAU,GACjB,EACF,qCAAoB,IACjB,CACV,CAAC;AACN,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AAqBvB;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAS,MAAM,CAAC,KAAkB;IAC9B,MAAM;IACF,EAAE;IACF,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,GAAG,UAAU,EAChB,GAAG,KAAK,CAAC;IAEV,OAAO,CACH,6BAAgB,QAAQ,aACpB,mBACQ,UAAU,mBACC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,IAAI,EAAC,UAAU,GACjB,EACF,qCAAoB,IACjB,CACV,CAAC;AACN,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/SwitchOption.d.ts

@@ -1,12 +1,14 @@
 import { SwitchProps } from './Switch';
 import { ToggleOptionProps } from './ToggleOption';
-export type SwitchOptionProps = Omit<SwitchProps, 'aria-label'> & Pick<ToggleOptionProps, 'description' | 'label' | 'size'>;
+export type SwitchOptionProps = Omit<SwitchProps, 'aria-label'> & Pick<ToggleOptionProps, 'description' | 'label'>;
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
  *
+ * If only a switch is needed, consider using the `Switch` component directly.
+ *
  * @name SwitchOption
  */
-declare function SwitchOption({ label, description, size, ...checkboxProps }: SwitchOptionProps): import("react/jsx-runtime").JSX.Element;
+declare function SwitchOption({ label: labelProp, description, ...checkboxProps }: SwitchOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
 declare namespace SwitchOption {
     var bspkName: string;
 }

package/dist/SwitchOption.js

@@ -4,10 +4,13 @@ import { ToggleOption } from './ToggleOption';
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
  *
+ * If only a switch is needed, consider using the `Switch` component directly.
+ *
  * @name SwitchOption
  */
-function SwitchOption({ label, description, size, ...checkboxProps }) {
-    return (_jsx(ToggleOption, { "data-bspk": "switch-option", description: description, label: label, size: size, children: _jsx(Switch, { ...checkboxProps, "aria-label": label }) }));
+function SwitchOption({ label: labelProp, description, ...checkboxProps }) {
+    const label = labelProp || description;
+    return (label && (_jsx(ToggleOption, { "data-bspk": "switch-option", description: description, label: label, children: _jsx(Switch, { ...checkboxProps, "aria-label": label }) })));
 }
 SwitchOption.bspkName = 'SwitchOption';
 export { SwitchOption };

package/dist/SwitchOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchOption.js","sourceRoot":"","sources":["../src/SwitchOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,MAAM,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAKjE;;;;GAIG;AACH,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,aAAa,EAAqB;IACnF,OAAO,CACH,KAAC,YAAY,iBAAW,eAAe,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,YACtF,KAAC,MAAM,OAAK,aAAa,gBAAc,KAAK,GAAI,GACrC,CAClB,CAAC;AACN,CAAC;AAED,YAAY,CAAC,QAAQ,GAAG,cAAc,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"SwitchOption.js","sourceRoot":"","sources":["../src/SwitchOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,MAAM,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAIjE;;;;;;GAMG;AACH,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,aAAa,EAAqB;IACxF,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IAEvC,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBAAW,eAAe,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YAC1E,KAAC,MAAM,OAAK,aAAa,gBAAc,KAAK,GAAI,GACrC,CAClB,CACJ,CAAC;AACN,CAAC;AAED,YAAY,CAAC,QAAQ,GAAG,cAAc,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/TabGroup.d.ts

@@ -10,7 +10,8 @@ export type TabGroupOption = {
      */
     label: string;
     /**
-     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+     * Determines if the element is
+     * [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
      *
      * @default false
      */
@@ -73,15 +74,15 @@ export type TabGroupProps = {
      */
     size?: TabGroupSize;
     /**
-     * When 'fill' the options will fill the width of the container. When 'hug', the options will be as wide as their
-     * content.
+     * When 'fill' the options will fill the width of the container. When 'hug',
+     * the options will be as wide as their content.
      *
      * @default hug
      */
     width?: 'fill' | 'hug';
     /**
-     * When width is 'hug' this determines if the trailing underline should be showing. When width is 'fill' this
-     * property isn't applicable.
+     * When width is 'hug' this determines if the trailing underline should be
+     * showing. When width is 'fill' this property isn't applicable.
      *
      * @default false
      */
@@ -90,6 +91,26 @@ export type TabGroupProps = {
 /**
  * Navigation tool that organizes content across different screens and views.
  *
+ * @example
+ *     import { useState } from 'react';
+ *     import { TabGroup } from '@bspk/ui/TabGroup';
+ *
+ *     export function Example() {
+ *         const [selectedTab, setSelectedTab] = useState<string>();
+ *
+ *         return (
+ *             <TabGroup
+ *                 onChange={setSelectedTab}
+ *                 options={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedTab}
+ *             />
+ *         );
+ *     }
+ *
  * @name TabGroup
  */
 declare function TabGroup({ onChange: onTabChange, value, size, options: optionsProp, width, showTrail, ...containerProps }: ElementProps<TabGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;

package/dist/TabGroup.js

@@ -11,6 +11,26 @@ const TAB_BADGE_SIZES = {
 /**
  * Navigation tool that organizes content across different screens and views.
  *
+ * @example
+ *     import { useState } from 'react';
+ *     import { TabGroup } from '@bspk/ui/TabGroup';
+ *
+ *     export function Example() {
+ *         const [selectedTab, setSelectedTab] = useState<string>();
+ *
+ *         return (
+ *             <TabGroup
+ *                 onChange={setSelectedTab}
+ *                 options={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedTab}
+ *             />
+ *         );
+ *     }
+ *
  * @name TabGroup
  */
 function TabGroup({ 

package/dist/TabGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabGroup.js","sourceRoot":"","sources":["../src/TabGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAG1B,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAMtE,MAAM,eAAe,GAA6C;IAC9D,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;CACnB,CAAC;AAyFF;;;;GAIG;AACH,SAAS,QAAQ,CAAC;AACd,EAAE;AACF,QAAQ,EAAE,WAAW,EACrB,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EAAE,WAAW,EACpB,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,KAAK,EACjB,GAAG,cAAc,EACgB;IACjC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAE/B,OAAO,CACH,iBACQ,cAAc,eACR,WAAW,qBACJ,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,SAAS,eAClD,IAAI,gBACH,KAAK,YAEhB,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE;YAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;YAEtC,OAAO,CACH,gCACiB,QAAQ,IAAI,SAAS,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EAEpC,OAAO,EAAE,GAAG,EAAE;oBACV,WAAW,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;gBACrD,CAAC,YAED,2BACK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,IAAI,EAC1C,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAC1C,KAAC,KAAK,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC,GAAI,CAC5D,IACE,IAXF,IAAI,CAAC,KAAK,CAYV,CACZ,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"TabGroup.js","sourceRoot":"","sources":["../src/TabGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAG1B,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAMtE,MAAM,eAAe,GAA6C;IAC9D,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;CACnB,CAAC;AA0FF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,SAAS,QAAQ,CAAC;AACd,EAAE;AACF,QAAQ,EAAE,WAAW,EACrB,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EAAE,WAAW,EACpB,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,KAAK,EACjB,GAAG,cAAc,EACgB;IACjC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAE/B,OAAO,CACH,iBACQ,cAAc,eACR,WAAW,qBACJ,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,SAAS,eAClD,IAAI,gBACH,KAAK,YAEhB,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE;YAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;YAEtC,OAAO,CACH,gCACiB,QAAQ,IAAI,SAAS,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EAEpC,OAAO,EAAE,GAAG,EAAE;oBACV,WAAW,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;gBACrD,CAAC,YAED,2BACK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,IAAI,EAC1C,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAC1C,KAAC,KAAK,IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC,GAC7B,CACL,IACE,IAdF,IAAI,CAAC,KAAK,CAeV,CACZ,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}