@bspk/ui 1.3.8 → 1.3.9

package/dist/components/Slider/SliderExample.js

@@ -16,19 +16,20 @@ export const SliderExample = {
     },
     presets: [
         {
-            label: 'Basic Slider',
+            label: 'Formatted Number',
             propState: {
-                label: 'Basic option',
-                min: 20,
-                max: 80,
-                step: 1,
-                value: 30,
+                label: 'Price option',
+                min: 0,
+                max: 100,
+                step: 5,
+                value: 50,
                 formatNumber: (num) => `$${num}`,
-                name: 'basic-slider',
+                name: 'formatted-number-slider',
             },
         },
         {
             label: 'Range Slider',
+            designPattern: 'A control element that allows customers to select a value or adjust a setting by moving the handle along a horizontal track.',
             propState: {
                 label: 'Range option',
                 min: 0,
@@ -42,21 +43,42 @@ export const SliderExample = {
             },
         },
         {
-            label: 'Undefined Value',
+            label: 'Continuous Slider',
+            designPattern: 'Continuous sliders allow users to select a value along a subjective range.',
             propState: {
-                label: 'undefined',
-                min: 50,
-                max: 150,
+                label: 'What is the purpose of life?',
+                min: 0,
+                max: 100,
+                value: 42,
                 step: 1,
-                value: null,
-                formatNumber: (num, context) => {
-                    if (context === 'max')
-                        return `${num}% Passing`;
-                    return `${num}%`;
-                },
-                name: 'undefined-slider',
+                formatNumber: (num) => num.toFixed(0),
+                name: 'continuous-slider',
+                marks: false,
+            },
+        },
+        {
+            label: 'Discrete Slider',
+            designPattern: 'Discrete sliders can be adjusted to a specific value by referencing its value indicator. You can generate a mark for each step with marks={true}.',
+            propState: {
+                label: 'Discrete option',
+                min: 0,
+                max: 100,
+                step: 10,
+                value: 40,
+                formatNumber: (num) => num.toString(),
+                name: 'discrete-slider',
+                marks: true,
             },
         },
     ],
+    defaultState: {
+        label: 'Basic option',
+        min: 20,
+        max: 80,
+        step: 1,
+        value: 30,
+        formatNumber: (num) => `$${num}`,
+        name: 'basic-slider',
+    },
 };
 //# sourceMappingURL=SliderExample.js.map

package/dist/components/Slider/SliderExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderExample.js","sourceRoot":"","sources":["../../../src/components/Slider/SliderExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKjC,MAAM,CAAC,MAAM,aAAa,GAA6D;IACnF,qCAAqC;IACrC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,UAAU,GAAG,CAAC,WAAmD,EAAE,EAAE;YACvE,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC;gBACjD,CAAC,CAAC,WAAW,CAAC,KAAK;gBACnB,CAAC,CAAC,OAAO,WAAW,CAAC,KAAK,KAAK,QAAQ;oBACrC,CAAC,CAAC,WAAW,CAAC,KAAK;oBACnB,CAAC,CAAC,CAAC,CAAC;YAEV,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;YAEjD,OAAO,KAAC,SAAS,OAAK,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAC5E,CAAC,CAAC;QAEF,OAAO,KAAC,UAAU,OAAK,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,GAAI,CAAC;IAC3G,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,cAAc;YACrB,SAAS,EAAE;gBACP,KAAK,EAAE,cAAc;gBACrB,GAAG,EAAE,EAAE;gBACP,GAAG,EAAE,EAAE;gBACP,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,EAAE;gBACT,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,GAAG,EAAE;gBAChC,IAAI,EAAE,cAAc;aACvB;SACJ;QACD;YACI,KAAK,EAAE,cAAc;YACrB,SAAS,EAAE;gBACP,KAAK,EAAE,cAAc;gBACrB,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;gBACf,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE;oBAClB,OAAO,GAAG,GAAG,GAAG,CAAC;gBACrB,CAAC;gBACD,IAAI,EAAE,cAAc;aACvB;SACJ;QACD;YACI,KAAK,EAAE,iBAAiB;YACxB,SAAS,EAAE;gBACP,KAAK,EAAE,WAAW;gBAClB,GAAG,EAAE,EAAE;gBACP,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,IAAmC;gBAC1C,YAAY,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE;oBAC3B,IAAI,OAAO,KAAK,KAAK;wBAAE,OAAO,GAAG,GAAG,WAAW,CAAC;oBAChD,OAAO,GAAG,GAAG,GAAG,CAAC;gBACrB,CAAC;gBACD,IAAI,EAAE,kBAAkB;aAC3B;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"SliderExample.js","sourceRoot":"","sources":["../../../src/components/Slider/SliderExample.tsx"],"names":[],"mappings":"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"}

package/dist/components/Snackbar/Manager.d.ts

@@ -0,0 +1,29 @@
+import { SnackbarProps } from './Snackbar';
+import { BspkIcon } from '-/types/common';
+export type SendSnackbarProps = Omit<SnackbarProps, 'icon' | 'innerRef' | 'onClose'> & {
+    onClose?: SnackbarProps['onClose'];
+    icon?: BspkIcon;
+};
+export type SnackbarManagerProps = {
+    /**
+     * Default timeout for snackbars sent via the manager (in milliseconds).
+     *
+     * @default 5000
+     */
+    defaultTimeout?: number;
+};
+/**
+ * SnackbarManager is a single use component that listens for snackbar events and displays them to the user.
+ *
+ * We use a custom event to communicate between components and this manager.
+ *
+ * We don't store the snackbar props in React.Context to avoid unnecessary re-renders of all components that consume the
+ * context. :)
+ *
+ * @name SnackbarManager
+ *
+ * @phase UXReview
+ */
+export declare function SnackbarManager({ defaultTimeout }: SnackbarManagerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const sendSnackbar: (props: SendSnackbarProps | string) => void;
+export declare const clearSnackbar: () => void;

package/dist/components/Snackbar/Manager.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgIcon } from '@bspk/icons/SvgIcon';
+import { useState } from 'react';
+import { Snackbar } from './Snackbar';
+import { createCustomEvent } from '../../utils/createCustomEvent';
+const CLEAR_EVENT = 'bspk-snackbar-clear';
+const SnackbarEvent = createCustomEvent('bspk-snackbar-event');
+/**
+ * SnackbarManager is a single use component that listens for snackbar events and displays them to the user.
+ *
+ * We use a custom event to communicate between components and this manager.
+ *
+ * We don't store the snackbar props in React.Context to avoid unnecessary re-renders of all components that consume the
+ * context. :)
+ *
+ * @name SnackbarManager
+ *
+ * @phase UXReview
+ */
+export function SnackbarManager({ defaultTimeout = 5000 }) {
+    const [snackbarProps, setSnackbarProps] = useState();
+    const { useEventListener } = SnackbarEvent;
+    useEventListener((detail) => {
+        if (detail === CLEAR_EVENT || !detail)
+            return setSnackbarProps(undefined);
+        setSnackbarProps(typeof detail === 'string' ? { text: detail, timeout: defaultTimeout } : detail);
+    });
+    return snackbarProps ? (_jsx(Snackbar, { ...snackbarProps, icon: snackbarProps.icon ? _jsx(SvgIcon, { name: snackbarProps.icon }) : undefined, onClose: () => {
+            setSnackbarProps(undefined);
+            snackbarProps?.onClose?.();
+        }, open: true })) : null;
+}
+export const sendSnackbar = (props) => SnackbarEvent.send(props);
+export const clearSnackbar = () => SnackbarEvent.send(CLEAR_EVENT);
+//# sourceMappingURL=Manager.js.map

package/dist/components/Snackbar/Manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Manager.js","sourceRoot":"","sources":["../../../src/components/Snackbar/Manager.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAiB,QAAQ,EAAE,MAAM,YAAY,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,WAAW,GAAG,qBAA8B,CAAC;AAiBnD,MAAM,aAAa,GAAG,iBAAiB,CAAkD,qBAAqB,CAAC,CAAC;AAEhH;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,cAAc,GAAG,IAAI,EAAwB;IAC3E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAiC,CAAC;IACpF,MAAM,EAAE,gBAAgB,EAAE,GAAG,aAAa,CAAC;IAE3C,gBAAgB,CAAC,CAAC,MAAM,EAAE,EAAE;QACxB,IAAI,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM;YAAE,OAAO,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAE1E,gBAAgB,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACtG,CAAC,CAAC,CAAC;IAEH,OAAO,aAAa,CAAC,CAAC,CAAC,CACnB,KAAC,QAAQ,OACD,aAAa,EACjB,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,aAAa,CAAC,IAAgB,GAAI,CAAC,CAAC,CAAC,SAAS,EACxF,OAAO,EAAE,GAAG,EAAE;YACV,gBAAgB,CAAC,SAAS,CAAC,CAAC;YAC5B,aAAa,EAAE,OAAO,EAAE,EAAE,CAAC;QAC/B,CAAC,EACD,IAAI,EAAE,IAAI,GACZ,CACL,CAAC,CAAC,CAAC,IAAI,CAAC;AACb,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAiC,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAE7F,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC"}

package/dist/components/Snackbar/Snackbar.d.ts

@@ -35,7 +35,6 @@ export type SnackbarProps = CommonProps<'id'> & {
      * @required
      */
     onClose: () => void;
-    /** Content to be rendered inside the snack bar provider, the snackbar trigger element. */
     /**
      * Time in milliseconds after which the snackbar will auto dismiss.
      *
@@ -59,24 +58,43 @@ export type SnackbarProps = CommonProps<'id'> & {
     disableFocusTrap?: boolean;
 };
 /**
- * Snackbars are intended to provide feedback about an action. Because of focus trap these will interrupt the customer
- * experience.
+ * Snackbars provide brief feedback about user actions. Because they use a focus trap, they interrupt the user's
+ * workflow and should be used sparingly.
+ *
+ * #### Inline
+ *
+ * Render the Snackbar inside the component that triggers it and control visibility with local state/props. This is
+ * simple and useful for small or isolated components, but can lead to duplicate snackbars or inadvertent render loops
+ * if state is not managed carefully.
+ *
+ * #### Managed
+ *
+ * Use the SnackbarManager together with `sendSnackbar` and `clearSnackbar` to control snackbars globally. This lets any
+ * part of the app trigger snackbars without prop drilling and helps avoid duplicates. and prevents duplicate snackbars
+ * from being shown.
  *
  * @example
  *     import { Snackbar } from '@bspk/ui/Snackbar';
  *     import { Button } from '@bspk/ui/Button';
  *     import { useState } from 'react';
+ *     import { sendSnackbar } from '@bspk/ui/Snackbar/Manager';
  *
- *     function ExampleComponent(props) {
+ *     () => {
  *         const [snackbarOpen, setSnackbarOpen] = useState(false);
  *
  *         return (
  *             <>
+ *                 // -- inline snackbar
  *                 <Button label="Show snackbar" onClick={() => setSnackbarOpen(true)} size="medium" title="Snackbar" />
  *                 <Snackbar text="I am an example." open={snackbarOpen} onClose={() => setSnackbarOpen(false)} />
+ *                 // -- managed snackbar
+ *                 <Button
+ *                     label="Show managed snackbar"
+ *                     onClick={() => sendSnackbar({ text: 'I am a managed snackbar!' })}
+ *                 />
  *             </>
  *         );
- *     }
+ *     };
  *
  * @name Snackbar
  *

package/dist/components/Snackbar/Snackbar.js

@@ -7,24 +7,43 @@ import { Portal } from '../Portal';
 import { Truncated } from '../Truncated';
 import { useId } from '../../hooks/useId';
 /**
- * Snackbars are intended to provide feedback about an action. Because of focus trap these will interrupt the customer
- * experience.
+ * Snackbars provide brief feedback about user actions. Because they use a focus trap, they interrupt the user's
+ * workflow and should be used sparingly.
+ *
+ * #### Inline
+ *
+ * Render the Snackbar inside the component that triggers it and control visibility with local state/props. This is
+ * simple and useful for small or isolated components, but can lead to duplicate snackbars or inadvertent render loops
+ * if state is not managed carefully.
+ *
+ * #### Managed
+ *
+ * Use the SnackbarManager together with `sendSnackbar` and `clearSnackbar` to control snackbars globally. This lets any
+ * part of the app trigger snackbars without prop drilling and helps avoid duplicates. and prevents duplicate snackbars
+ * from being shown.
  *
  * @example
  *     import { Snackbar } from '@bspk/ui/Snackbar';
  *     import { Button } from '@bspk/ui/Button';
  *     import { useState } from 'react';
+ *     import { sendSnackbar } from '@bspk/ui/Snackbar/Manager';
  *
- *     function ExampleComponent(props) {
+ *     () => {
  *         const [snackbarOpen, setSnackbarOpen] = useState(false);
  *
  *         return (
  *             <>
+ *                 // -- inline snackbar
  *                 <Button label="Show snackbar" onClick={() => setSnackbarOpen(true)} size="medium" title="Snackbar" />
  *                 <Snackbar text="I am an example." open={snackbarOpen} onClose={() => setSnackbarOpen(false)} />
+ *                 // -- managed snackbar
+ *                 <Button
+ *                     label="Show managed snackbar"
+ *                     onClick={() => sendSnackbar({ text: 'I am a managed snackbar!' })}
+ *                 />
  *             </>
  *         );
- *     }
+ *     };
  *
  * @name Snackbar
  *

package/dist/components/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AA8DtC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,OAAO,EACP,WAAW,GAAG,IAAI,EAClB,gBAAgB,GAAG,SAAS,EAC5B,IAAI,EACJ,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,gBAAgB,GAAG,KAAK,GACZ;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;YAClB,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC1B,OAAO,EAAE,EAAE,CAAC;YAChB,CAAC,EAAE,OAAO,CAAC,CAAC;YACZ,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7B,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,OAAO,CACH,KAAC,MAAM,cACH,2BAAe,KAAK,eAAW,UAAU,EAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,YAC3D,KAAC,SAAS,IACN,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;oBACd,uBAAuB,EAAE,IAAI;oBAC7B,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;iBACvC,YAED,8CAAoC,IAAI,EAAC,OAAO,aAC5C,2DACK,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAC/B,8BAAmB,IAAI,wCAClB,IAAI,GACF,CACV,EACD,KAAC,SAAS,kCAAa,IAAI,GAAa,IACtC,EACL,WAAW,IAAI,KAAC,MAAM,IAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,UAAU,GAAG,KAT5D,EAAE,CAU5B,GACE,GACV,GACD,CACZ,CAAC;AACN,CAAC"}
+{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AA4DtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,OAAO,EACP,WAAW,GAAG,IAAI,EAClB,gBAAgB,GAAG,SAAS,EAC5B,IAAI,EACJ,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,gBAAgB,GAAG,KAAK,GACZ;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;YAClB,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC1B,OAAO,EAAE,EAAE,CAAC;YAChB,CAAC,EAAE,OAAO,CAAC,CAAC;YACZ,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7B,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,OAAO,CACH,KAAC,MAAM,cACH,2BAAe,KAAK,eAAW,UAAU,EAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,YAC3D,KAAC,SAAS,IACN,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;oBACd,uBAAuB,EAAE,IAAI;oBAC7B,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;iBACvC,YAED,8CAAoC,IAAI,EAAC,OAAO,aAC5C,2DACK,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAC/B,8BAAmB,IAAI,wCAClB,IAAI,GACF,CACV,EACD,KAAC,SAAS,kCAAa,IAAI,GAAa,IACtC,EACL,WAAW,IAAI,KAAC,MAAM,IAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,UAAU,GAAG,KAT5D,EAAE,CAU5B,GACE,GACV,GACD,CACZ,CAAC;AACN,CAAC"}

package/dist/components/Snackbar/SnackbarExample.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { clearSnackbar, sendSnackbar } from './Manager';
 import { Snackbar } from './Snackbar';
 import { Button } from '../Button';
 export const SnackbarExample = {
@@ -6,7 +7,13 @@ export const SnackbarExample = {
     defaultState: {},
     disableProps: [],
     presets: [],
-    render: ({ props, setState }) => (_jsxs(_Fragment, { children: [_jsx(Snackbar, { ...props, onClose: () => setState({ open: false }) }), _jsx(Button, { label: "open snackbar", onClick: () => setState({ open: true }), size: "medium", title: "Snackbar" })] })),
+    render: ({ props, setState }) => {
+        return (_jsxs(_Fragment, { children: [_jsx(Snackbar, { ...props, onClose: () => setState({ open: false }) }), _jsx(Button, { label: "Launch Inline Snackbar", onClick: () => setState({ open: true }), size: "medium", title: "Snackbar" }), _jsx("br", {}), _jsx(Button, { label: "Launch Managed Snackbar", onClick: () => sendSnackbar({
+                        ...props,
+                        text: `Managed: ${props.text}`,
+                        icon: 'icon:icon-name' in props ? props['icon:icon-name'] : undefined,
+                    }) }), _jsx("br", {}), _jsx(Button, { label: "Clear Managed Snackbar", onClick: () => clearSnackbar() })] }));
+    },
     sections: [],
     variants: false,
 };

package/dist/components/Snackbar/SnackbarExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarExample.js","sourceRoot":"","sources":["../../../src/components/Snackbar/SnackbarExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC7B,8BACI,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAI,EACjE,KAAC,MAAM,IAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,UAAU,GAAG,IACzG,CACN;IACD,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,KAAK;CAClB,CAAC"}
+{"version":3,"file":"SnackbarExample.js","sourceRoot":"","sources":["../../../src/components/Snackbar/SnackbarExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC5B,OAAO,CACH,8BACI,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAI,EACjE,KAAC,MAAM,IACH,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EACvC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,UAAU,GAClB,EACF,cAAM,EACN,KAAC,MAAM,IACH,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,GAAG,EAAE,CACV,YAAY,CAAC;wBACT,GAAG,KAAK;wBACR,IAAI,EAAE,YAAY,KAAK,CAAC,IAAI,EAAE;wBAC9B,IAAI,EAAE,gBAAgB,IAAI,KAAK,CAAC,CAAC,CAAE,KAAK,CAAC,gBAAgB,CAAc,CAAC,CAAC,CAAC,SAAS;qBACtF,CAAC,GAER,EACF,cAAM,EACN,KAAC,MAAM,IAAC,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,GAAI,IAC1E,CACN,CAAC;IACN,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,KAAK;CAClB,CAAC"}

package/dist/components/Snackbar/index.d.ts

@@ -1 +1,2 @@
 export * from './Snackbar';
+export * from './Manager';

package/dist/components/Snackbar/index.js

@@ -1,2 +1,3 @@
 export * from './Snackbar';
+export * from './Manager';
 //# sourceMappingURL=index.js.map

package/dist/components/Snackbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Snackbar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Snackbar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC"}

package/dist/components/StylesProviderDemo/StylesProviderDemo.d.ts

@@ -14,9 +14,7 @@ export type StylesProviderDemoProps = {
  * @example
  *     import { StylesProviderDemo } from '@bspk/ui/StylesProviderDemo';
  *
- *     function Example() {
- *         return <StylesProviderDemo brand="anywhere" />;
- *     }
+ *     <StylesProviderDemo brand="anywhere" />;
  *
  * @name StylesProviderDemo
  * @phase Utility

package/dist/components/StylesProviderDemo/StylesProviderDemo.js

@@ -9,9 +9,7 @@ const THEME_CSS = { ...BRANDS_CSS, ...EXAMPLE_CSS };
  * @example
  *     import { StylesProviderDemo } from '@bspk/ui/StylesProviderDemo';
  *
- *     function Example() {
- *         return <StylesProviderDemo brand="anywhere" />;
- *     }
+ *     <StylesProviderDemo brand="anywhere" />;
  *
  * @name StylesProviderDemo
  * @phase Utility

package/dist/components/StylesProviderDemo/StylesProviderDemo.js.map

@@ -1 +1 @@
-{"version":3,"file":"StylesProviderDemo.js","sourceRoot":"","sources":["../../../src/components/StylesProviderDemo/StylesProviderDemo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,SAAS,GAAG,EAAE,GAAG,UAAU,EAAE,GAAG,WAAW,EAAE,CAAC;AAWpD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,GAAG,UAAU,EAA2B;IAC9E,MAAM,YAAY,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;YACxB,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;QAED,YAAY,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC;QAErF,OAAO,GAAG,EAAE;YACR,IAAI,CAAC,YAAY,CAAC,OAAO;gBAAE,OAAO;YAClC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAChD,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,sDAAsD"}
+{"version":3,"file":"StylesProviderDemo.js","sourceRoot":"","sources":["../../../src/components/StylesProviderDemo/StylesProviderDemo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,SAAS,GAAG,EAAE,GAAG,UAAU,EAAE,GAAG,WAAW,EAAE,CAAC;AAWpD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,GAAG,UAAU,EAA2B;IAC9E,MAAM,YAAY,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;YACxB,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;QAED,YAAY,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC;QAErF,OAAO,GAAG,EAAE;YACR,IAAI,CAAC,YAAY,CAAC,OAAO;gBAAE,OAAO;YAClC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAChD,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,sDAAsD"}

package/dist/components/Switch/Switch.d.ts

@@ -27,7 +27,7 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
  *     import { useState } from 'react';
  *     import { Switch } from '@bspk/ui/Switch';
  *
- *     function Example() {
+ *     () => {
  *         const [isChecked, setIsChecked] = useState<boolean>(false);
  *
  *         return (
@@ -38,7 +38,7 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
  *                 checked={isChecked}
  *             />
  *         );
- *     }
+ *     };
  *
  * @element
  *

package/dist/components/Switch/Switch.js

@@ -9,7 +9,7 @@ import './switch.css.js';
  *     import { useState } from 'react';
  *     import { Switch } from '@bspk/ui/Switch';
  *
- *     function Example() {
+ *     () => {
  *         const [isChecked, setIsChecked] = useState<boolean>(false);
  *
  *         return (
@@ -20,7 +20,7 @@ import './switch.css.js';
  *                 checked={isChecked}
  *             />
  *         );
- *     }
+ *     };
  *
  * @element
  *

package/dist/components/TabGroup/TabGroup.d.ts

@@ -18,7 +18,7 @@ export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {
  *     import { useState } from 'react';
  *     import { TabGroup } from '@bspk/ui/TabGroup';
  *
- *     function Example() {
+ *     () => {
  *         const [selectedTab, setSelectedTab] = useState<string>();
  *
  *         return (
@@ -32,7 +32,7 @@ export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {
  *                 value={selectedTab}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name TabGroup
  * @phase UXReview

package/dist/components/TabGroup/TabGroup.js

@@ -8,7 +8,7 @@ import { TabList } from '../TabList';
  *     import { useState } from 'react';
  *     import { TabGroup } from '@bspk/ui/TabGroup';
  *
- *     function Example() {
+ *     () => {
  *         const [selectedTab, setSelectedTab] = useState<string>();
  *
  *         return (
@@ -22,7 +22,7 @@ import { TabList } from '../TabList';
  *                 value={selectedTab}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name TabGroup
  * @phase UXReview

package/dist/components/TabGroup/TabGroupExample.js

@@ -1,9 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SvgCircle } from '@bspk/icons/Circle';
-import { SvgDiamond } from '@bspk/icons/Diamond';
-import { SvgDiamondFill } from '@bspk/icons/DiamondFill';
-import { SvgSquare } from '@bspk/icons/Square';
-import { SvgSquareFill } from '@bspk/icons/SquareFill';
 const PRESET_OPTIONS = [
     {
         value: '1',
@@ -30,16 +24,16 @@ const PRESET_OPTIONS = [
 ];
 const OPTION_ICONS = [
     {
-        icon: _jsx(SvgDiamond, {}),
-        iconSelected: _jsx(SvgDiamondFill, {}),
+        icon: 'Diamond',
+        iconSelected: 'DiamondFill',
     },
     {
-        icon: _jsx(SvgCircle, {}),
+        icon: 'Circle',
         iconSelected: undefined,
     },
     {
-        icon: _jsx(SvgSquare, {}),
-        iconSelected: _jsx(SvgSquareFill, {}),
+        icon: 'Square',
+        iconSelected: 'SquareFill',
     },
 ];
 export const presets = [

package/dist/components/TabGroup/TabGroupExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabGroupExample.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroupExample.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TabGroupExample.js","sourceRoot":"","sources":["../../../src/components/TabGroup/TabGroupExample.tsx"],"names":[],"mappings":"AAGA,MAAM,cAAc,GAA6B;IAC7C;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,KAAK,EAAE,SAAS;KACnB;IACD;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,IAAI;KACjB;IACD;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,KAAK,EAAE,SAAS;KACnB;CACJ,CAAC;AAEF,MAAM,YAAY,GAAG;IACjB;QACI,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,aAAa;KAC9B;IAED;QACI,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,SAAS;KAC1B;IACD;QACI,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,YAAY;KAC7B;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA4B;IAC5C;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,KAAK,EAAE,GAAG;YACV,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;gBAC5C,GAAG,MAAM;gBACT,IAAI,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,IAAI;gBAC9B,YAAY,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,YAAY;aACjD,CAAC,CAAC;YACH,KAAK,EAAE,iBAAiB;SAC3B;KACJ;IACD;QACI,KAAK,EAAE,aAAa;QACpB,SAAS,EAAE;YACP,KAAK,EAAE,GAAG;YACV,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;gBAC5C,GAAG,MAAM;gBACT,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;aACvC,CAAC,CAAC;YACH,KAAK,EAAE,kBAAkB;SAC5B;KACJ;IACD;QACI,KAAK,EAAE,qBAAqB;QAC5B,SAAS,EAAE;YACP,KAAK,EAAE,GAAG;YACV,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;gBAC5C,GAAG,MAAM;gBACT,IAAI,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,IAAI;gBAC9B,YAAY,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,YAAY;gBAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;aACvC,CAAC,CAAC;YACH,KAAK,EAAE,0BAA0B;SACpC;KACJ;IACD;QACI,KAAK,EAAE,gBAAgB;QACvB,SAAS,EAAE;YACP,KAAK,EAAE,GAAG;YACV,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;gBACrC,GAAG,MAAM;gBACT,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,qEAAqE;aAC9F,CAAC,CAAC;YACH,KAAK,EAAE,qBAAqB;SAC/B;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE;QACV,OAAO,EAAE,cAAc;KAC1B;IACD,OAAO;IAEP,QAAQ,EAAE;QACN,SAAS,EAAE;YACP,KAAK,EAAE,KAAK;SACf;KACJ;CACJ,CAAC"}

package/dist/components/TabGroup/tab-group.css

@@ -1,5 +1,6 @@
 ul[data-bspk=tab-group] {
   border-bottom: none;
+  max-width: 100%;
 }
 ul[data-bspk=tab-group] li {
   border: 0;

package/dist/components/TabGroup/tab-group.css.js

@@ -3,6 +3,7 @@
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`ul[data-bspk=tab-group] {
   border-bottom: none;
+  max-width: 100%;
 }
 ul[data-bspk=tab-group] li {
   border: 0;

package/dist/components/TabList/TabList.d.ts

@@ -109,7 +109,7 @@ export type TabListProps<O extends TabOption = TabOption> = {
  *     import { useState } from 'react';
  *     import { TabList } from '@bspk/ui/TabList';
  *
- *     function Example() {
+ *     () => {
  *         const [selectedTab, setSelectedTab] = useState<string>();
  *
  *         return (
@@ -123,7 +123,7 @@ export type TabListProps<O extends TabOption = TabOption> = {
  *                 value={selectedTab}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name TabList
  * @phase Utility

package/dist/components/TabList/TabList.js

@@ -23,7 +23,7 @@ const TAB_BADGE_SIZES = {
  *     import { useState } from 'react';
  *     import { TabList } from '@bspk/ui/TabList';
  *
- *     function Example() {
+ *     () => {
  *         const [selectedTab, setSelectedTab] = useState<string>();
  *
  *         return (
@@ -37,7 +37,7 @@ const TAB_BADGE_SIZES = {
  *                 value={selectedTab}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name TabList
  * @phase Utility

package/dist/components/TabList/tab-list.css

@@ -3,7 +3,6 @@ ul[data-bspk-utility=tab-list] {
   display: flex;
   flex-direction: row;
   list-style: none;
-  width: 100%;
   height: var(--height);
   font: var(--font);
   --icon-size: var(--spacing-sizing-05);

package/dist/components/TabList/tab-list.css.js

@@ -6,7 +6,6 @@ style.appendChild(document.createTextNode(`ul[data-bspk-utility=tab-list] {
   display: flex;
   flex-direction: row;
   list-style: none;
-  width: 100%;
   height: var(--height);
   font: var(--font);
   --icon-size: var(--spacing-sizing-05);

package/dist/components/Table/Table.d.ts

@@ -39,22 +39,59 @@ export type TableProps<R extends TableRow> = {
  * @example
  *     import { Table } from '@bspk/ui/Table';
  *
- *     function Example() {
- *         return (
- *             <Table
- *                 columns={[
- *                     { key: 'state', label: 'State', width: '100px' },
- *                     { key: 'capital', label: 'Capital', width: '1fr' },
- *                 ]}
- *                 data={[
- *                     { state: 'New Jersey', capital: 'Trenton' },
- *                     { state: 'New York', capital: 'Albany' },
- *                     { state: 'California', capital: 'Sacramento' },
- *                 ]}
- *                 title="State Capitals"
- *             />
- *         );
- *     }
+ *     <Table
+ *         columns={[
+ *             { key: 'state', label: 'State', width: '160px' },
+ *             { key: 'capital', label: 'Capital', width: '140px' },
+ *             { key: 'population', label: 'Population', width: '140px' },
+ *             { key: 'nickname', label: 'Nickname', width: '1fr' },
+ *         ]}
+ *         data={[
+ *             {
+ *                 id: 'ca',
+ *                 state: 'California',
+ *                 capital: 'Sacramento',
+ *                 population: '39,512,223',
+ *                 nickname: 'The Golden State',
+ *             },
+ *             {
+ *                 id: 'ny',
+ *                 state: 'New York',
+ *                 capital: 'Albany',
+ *                 population: '19,299,981',
+ *                 nickname: 'The Empire State',
+ *             },
+ *             {
+ *                 id: 'nj',
+ *                 state: 'New Jersey',
+ *                 capital: 'Trenton',
+ *                 population: '8,882,190',
+ *                 nickname: 'The Garden State',
+ *             },
+ *             {
+ *                 id: 'tx',
+ *                 state: 'Texas',
+ *                 capital: 'Austin',
+ *                 population: '29,183,290',
+ *                 nickname: 'The Lone Star State',
+ *             },
+ *             {
+ *                 id: 'hi',
+ *                 state: 'Hawaii',
+ *                 capital: 'Honolulu',
+ *                 population: '1,415,872',
+ *                 nickname: 'The Aloha State',
+ *             },
+ *             {
+ *                 id: 'ak',
+ *                 state: 'Alaska',
+ *                 capital: 'Juneau',
+ *                 population: '731,545',
+ *                 nickname: 'The Last Frontier',
+ *             },
+ *         ]}
+ *         title="U.S. States — Capitals & Quick Facts"
+ *     />;
  *
  * @name Table
  * @phase UXReview