@bspk/ui 1.1.21 → 1.1.23

package/dist/Chip.js

@@ -4,6 +4,17 @@ styleAdd(`[data-bspk=chip]{display:flex;flex-direction:column;justify-content:ce
 /**
  * Dynamically generated options that are suggested to the user as responses or prompts.
  *
+ * @example
+ *     import { Chip } from '@bspk/ui/Chip';
+ *
+ *     function Example() {
+ *         return (
+ *             <Chip variant="filter" onClick={() => console.log('Chip clicked!')}>
+ *                 Example Chip
+ *             </Chip>
+ *         );
+ *     }
+ *
  * @name Chip
  */
 function Chip({ children = '', wrap = false, variant = 'filter', flat = false, disabled = false, selected = false, onClick, style: styleProp, }) {

package/dist/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../src/Chip.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AA6CrB;;;;GAIG;AACH,SAAS,IAAI,CAAC,EACV,QAAQ,GAAG,EAAE,EACb,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,KAAK,EAAE,SAAS,GACR;IACR,IAAI,eAAe,GAAG,EAAE,CAAC;IAEzB,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;QACvB,eAAe,GAAG;YACd,OAAO;YACP,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,CAAC;SACd,CAAC;IACN,CAAC;IAED,OAAO,CACH,4BACc,MAAM,mBACD,QAAQ,IAAI,SAAS,eACzB,IAAI,IAAI,SAAS,mBACb,QAAQ,IAAI,SAAS,kBACtB,OAAO,eACV,IAAI,IAAI,SAAS,EAC5B,KAAK,EAAE,SAAS,KACZ,eAAe,YAElB,QAAQ,GACN,CACV,CAAC;AACN,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../src/Chip.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AA6CrB;;;;;;;;;;;;;;;GAeG;AACH,SAAS,IAAI,CAAC,EACV,QAAQ,GAAG,EAAE,EACb,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,KAAK,EAAE,SAAS,GACR;IACR,IAAI,eAAe,GAAG,EAAE,CAAC;IAEzB,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;QACvB,eAAe,GAAG;YACd,OAAO;YACP,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,CAAC;SACd,CAAC;IACN,CAAC;IAED,OAAO,CACH,4BACc,MAAM,mBACD,QAAQ,IAAI,SAAS,eACzB,IAAI,IAAI,SAAS,mBACb,QAAQ,IAAI,SAAS,kBACtB,OAAO,eACV,IAAI,IAAI,SAAS,EAC5B,KAAK,EAAE,SAAS,KACZ,eAAe,YAElB,QAAQ,GACN,CACV,CAAC;AACN,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/Dialog.d.ts

@@ -36,6 +36,25 @@ export type DialogProps = CommonProps<'id'> & {
  * Dialogs display important information that users need to acknowledge. They appear over the interface and block
  * further interactions until an action is selected.
  *
+ * @example
+ *     import { Dialog } from '@bspk/ui/Dialog';
+ *     import { Button } from '@bspk/ui/Button';
+ *
+ *     function Example() {
+ *         const [open, setOpen] = React.useState(false);
+ *
+ *         return (
+ *             <>
+ *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
+ *                 <Dialog open={open} onClose={() => setOpen(false)}>
+ *                     <h1>Dialog Title</h1>
+ *                     <p>This is the content of the dialog.</p>
+ *                     <button onClick={() => setOpen(false)}>Close</button>
+ *                 </Dialog>
+ *             </>
+ *         );
+ *     }
+ *
  * @name Dialog
  */
 declare function Dialog({ children, innerRef, onClose, open, placement, hideScrim, id: idProp, ...containerProps }: ElementProps<DialogProps, 'div'>): false | import("react/jsx-runtime").JSX.Element;

package/dist/Dialog.js

@@ -10,6 +10,25 @@ import { useOutsideClick } from './hooks/useOutsideClick';
  * Dialogs display important information that users need to acknowledge. They appear over the interface and block
  * further interactions until an action is selected.
  *
+ * @example
+ *     import { Dialog } from '@bspk/ui/Dialog';
+ *     import { Button } from '@bspk/ui/Button';
+ *
+ *     function Example() {
+ *         const [open, setOpen] = React.useState(false);
+ *
+ *         return (
+ *             <>
+ *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
+ *                 <Dialog open={open} onClose={() => setOpen(false)}>
+ *                     <h1>Dialog Title</h1>
+ *                     <p>This is the content of the dialog.</p>
+ *                     <button onClick={() => setOpen(false)}>Close</button>
+ *                 </Dialog>
+ *             </>
+ *         );
+ *     }
+ *
  * @name Dialog
  */
 function Dialog({ 

package/dist/Dialog.js.map

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

package/dist/Divider.d.ts

@@ -34,6 +34,19 @@ export type DividerProps = {
  *
  * Vertical thin lines that separates grouped content or other visual elements within a container.
  *
+ * @example
+ *     import { Divider } from '@bspk/ui/Divider';
+ *
+ *     function Example() {
+ *         return (
+ *             <div>
+ *                 <p>Content above the divider</p>
+ *                 <Divider orientation="horizontal" />
+ *                 <p>Content below the divider</p>
+ *             </div>
+ *         );
+ *     }
+ *
  * @name Divider
  */
 declare function Divider({ padding, orientation, thickness, inset, ...props }: ElementProps<DividerProps, 'div'>): import("react/jsx-runtime").JSX.Element;

package/dist/Divider.js

@@ -13,6 +13,19 @@ const insetToVariable = (insetProp) => {
  *
  * Vertical thin lines that separates grouped content or other visual elements within a container.
  *
+ * @example
+ *     import { Divider } from '@bspk/ui/Divider';
+ *
+ *     function Example() {
+ *         return (
+ *             <div>
+ *                 <p>Content above the divider</p>
+ *                 <Divider orientation="horizontal" />
+ *                 <p>Content below the divider</p>
+ *             </div>
+ *         );
+ *     }
+ *
  * @name Divider
  */
 function Divider({ padding = true, orientation = 'horizontal', thickness = 'light', inset = 0, ...props }) {

package/dist/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../src/Divider.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,CAAC;AAgCxB,MAAM,eAAe,GAAG,CAAC,SAA0B,EAAE,EAAE;IACnD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAC;IACnF,OAAO,wBAAwB,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,SAAS,OAAO,CAAC,EACb,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACH,iBACQ,KAAK,sBACS,WAAW,eACnB,SAAS,uBACA,CAAC,OAAO,IAAI,SAAS,sBACtB,WAAW,oBACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EACD;YACI,GAAG,KAAK,CAAC,KAAK;YACd,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;SACb,GAE9B,CACL,CAAC;AACN,CAAC;AAED,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;AAE7B,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../src/Divider.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,CAAC;AAgCxB,MAAM,eAAe,GAAG,CAAC,SAA0B,EAAE,EAAE;IACnD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAC;IACnF,OAAO,wBAAwB,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,OAAO,CAAC,EACb,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACH,iBACQ,KAAK,sBACS,WAAW,eACnB,SAAS,uBACA,CAAC,OAAO,IAAI,SAAS,sBACtB,WAAW,oBACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EACD;YACI,GAAG,KAAK,CAAC,KAAK;YACd,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;SACb,GAE9B,CACL,CAAC;AACN,CAAC;AAED,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;AAE7B,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/Dropdown.d.ts

@@ -60,6 +60,36 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
 /**
  * A field element that allows users to select one option from a list of available choices. *
  *
+ * @example
+ *     import { Dropdown } from '@bspk/ui/Dropdown';
+ *
+ *     export function Example() {
+ *         const [selected, setSelected] = React.useState<string[]>([]);
+ *         return (
+ *             <Dropdown
+ *                 aria-label="Select an option"
+ *                 itemCount={5}
+ *                 name="example-dropdown"
+ *                 onChange={setSelected}
+ *                 options={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                     { value: '4', label: 'Option 4' },
+ *                     { value: '5', label: 'Option 5' },
+ *                     { value: '6', label: 'Option 6' },
+ *                     { value: '7', label: 'Option 7' },
+ *                     { value: '8', label: 'Option 8' },
+ *                     { value: '9', label: 'Option 9' },
+ *                     { value: '10', label: 'Option 10' },
+ *                 ]}
+ *                 placeholder="Select an option"
+ *                 size="medium"
+ *                 value={selected}
+ *             />
+ *         );
+ *     }
+ *
  * @name Dropdown
  */
 declare function Dropdown({ options, value: selected, onChange, 'aria-label': ariaLabel, placeholder, size, itemCount, disabled, id: propId, invalid, errorMessage, readOnly, placement, name, isMulti, renderListItem, style: styleProp, selectAll, }: DropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/Dropdown.js

@@ -10,6 +10,36 @@ import { useId } from './hooks/useId';
 /**
  * A field element that allows users to select one option from a list of available choices. *
  *
+ * @example
+ *     import { Dropdown } from '@bspk/ui/Dropdown';
+ *
+ *     export function Example() {
+ *         const [selected, setSelected] = React.useState<string[]>([]);
+ *         return (
+ *             <Dropdown
+ *                 aria-label="Select an option"
+ *                 itemCount={5}
+ *                 name="example-dropdown"
+ *                 onChange={setSelected}
+ *                 options={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                     { value: '4', label: 'Option 4' },
+ *                     { value: '5', label: 'Option 5' },
+ *                     { value: '6', label: 'Option 6' },
+ *                     { value: '7', label: 'Option 7' },
+ *                     { value: '8', label: 'Option 8' },
+ *                     { value: '9', label: 'Option 9' },
+ *                     { value: '10', label: 'Option 10' },
+ *                 ]}
+ *                 placeholder="Select an option"
+ *                 size="medium"
+ *                 value={selected}
+ *             />
+ *         );
+ *     }
+ *
  * @name Dropdown
  */
 function Dropdown({ options = [], value: selected, onChange, 'aria-label': ariaLabel, placeholder = 'Select...', size = 'medium', itemCount = 5, disabled, id: propId, invalid, errorMessage, readOnly, placement = 'bottom', name, isMulti, renderListItem, style: styleProp, selectAll, }) {

package/dist/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../src/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAiEtC;;;;GAIG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,QAAQ,EACf,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,WAAW,GAAG,WAAW,EACzB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,CAAC,EACb,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,IAAI,EACJ,OAAO,EACP,cAAc,EACd,KAAK,EAAE,SAAS,EAChB,SAAS,GACG;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC;QAC3D,SAAS;QACT,YAAY,EAAE;YACV,QAAQ;YACR,OAAO;YACP,QAAQ;YACR,YAAY;SACf;KACJ,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,OAAO;QACzB,CAAC,CAAC,GAAG,QAAQ,EAAE,MAAM,IAAI,CAAC,UAAU,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,WAAW;QAChF,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;IAE5D,OAAO,CACH,8BACI,gBAAO,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,QAAQ,GAAG,EAC3D,gCACgB,SAAS,eACX,UAAU,gBACR,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,kBAC5B,OAAO,IAAI,SAAS,eACvB,IAAI,EACf,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,SAAS,KACZ,YAAY,aAEhB,KAAC,QAAQ,wBAAkB,EAAE,EAAC,KAAK,EAAE,aAAa,IAAI,WAAW,EAAE,QAAQ,SAAG,EAC9E,2CACI,KAAC,eAAe,KAAG,GAChB,IACF,EACT,KAAC,MAAM,cACH,KAAC,IAAI,2BAED,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;wBACtB,KAAK,EAAE,cAAc,EAAE,CAAC;wBACxB,IAAI,CAAC,OAAO;4BAAE,SAAS,EAAE,CAAC;wBAC1B,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;oBACrB,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,QAAQ,KACpB,SAAS,GACf,GACG,IACV,CACN,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../src/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAiEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,QAAQ,EACf,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,WAAW,GAAG,WAAW,EACzB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,CAAC,EACb,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,IAAI,EACJ,OAAO,EACP,cAAc,EACd,KAAK,EAAE,SAAS,EAChB,SAAS,GACG;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC;QAC3D,SAAS;QACT,YAAY,EAAE;YACV,QAAQ;YACR,OAAO;YACP,QAAQ;YACR,YAAY;SACf;KACJ,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,OAAO;QACzB,CAAC,CAAC,GAAG,QAAQ,EAAE,MAAM,IAAI,CAAC,UAAU,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,WAAW;QAChF,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;IAE5D,OAAO,CACH,8BACI,gBAAO,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,QAAQ,GAAG,EAC3D,gCACgB,SAAS,eACX,UAAU,gBACR,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,kBAC5B,OAAO,IAAI,SAAS,eACvB,IAAI,EACf,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,SAAS,KACZ,YAAY,aAEhB,KAAC,QAAQ,wBAAkB,EAAE,EAAC,KAAK,EAAE,aAAa,IAAI,WAAW,EAAE,QAAQ,SAAG,EAC9E,2CACI,KAAC,eAAe,KAAG,GAChB,IACF,EACT,KAAC,MAAM,cACH,KAAC,IAAI,2BAED,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;wBACtB,KAAK,EAAE,cAAc,EAAE,CAAC;wBACxB,IAAI,CAAC,OAAO;4BAAE,SAAS,EAAE,CAAC;wBAC1B,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;oBACrB,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,QAAQ,KACpB,SAAS,GACf,GACG,IACV,CACN,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/DropdownField.d.ts

@@ -6,6 +6,28 @@ export type DropdownFieldProps = Pick<DropdownProps, 'disabled' | 'itemCount' |
  *
  * This component takes properties from the FormField and Dropdown components.
  *
+ * @example
+ *     import { DropdownField } from '@bspk/ui/DropdownField';
+ *
+ *     export function Example() {
+ *         const [state, setState] = React.useState(['option1']);
+ *         return (
+ *             <DropdownField
+ *                 controlId="Example controlId"
+ *                 label="Example label"
+ *                 name="Example name"
+ *                 onChange={(nextValue) => setState(nextValue)}
+ *                 options={[
+ *                     { label: 'Option 1', value: 'option1' },
+ *                     { label: 'Option 2', value: 'option2' },
+ *                     { label: 'Option 3', value: 'option3' },
+ *                 ]}
+ *                 placeholder="Select one..."
+ *                 value={state}
+ *             />
+ *         );
+ *     }
+ *
  * @name DropdownField
  */
 declare function DropdownField({ label, errorMessage: errorMessageProp, helperText, controlId: id, labelTrailing, required, ...dropdownProps }: DropdownFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/DropdownField.js

@@ -6,6 +6,28 @@ import { FormField } from './FormField';
  *
  * This component takes properties from the FormField and Dropdown components.
  *
+ * @example
+ *     import { DropdownField } from '@bspk/ui/DropdownField';
+ *
+ *     export function Example() {
+ *         const [state, setState] = React.useState(['option1']);
+ *         return (
+ *             <DropdownField
+ *                 controlId="Example controlId"
+ *                 label="Example label"
+ *                 name="Example name"
+ *                 onChange={(nextValue) => setState(nextValue)}
+ *                 options={[
+ *                     { label: 'Option 1', value: 'option1' },
+ *                     { label: 'Option 2', value: 'option2' },
+ *                     { label: 'Option 3', value: 'option3' },
+ *                 ]}
+ *                 placeholder="Select one..."
+ *                 value={state}
+ *             />
+ *         );
+ *     }
+ *
  * @name DropdownField
  */
 function DropdownField({ label, errorMessage: errorMessageProp, helperText, controlId: id, labelTrailing, required, ...dropdownProps }) {

package/dist/DropdownField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownField.js","sourceRoot":"","sources":["../src/DropdownField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AAiBxD;;;;;;GAMG;AACH,SAAS,aAAa,CAAC,EACnB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EAAE,EAAE,EACb,aAAa,EACb,QAAQ,EACR,GAAG,aAAa,EACC;IACjB,MAAM,YAAY,GAAG,CAAC,CAAC,aAAa,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,IAAI,gBAAgB,CAAC,IAAI,SAAS,CAAC;IAE3G,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,EAAE,eACH,gBAAgB,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,QAAQ,OAAK,aAAa,KAAM,UAAU,gBAAc,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,YAAY,GAAI,CACtG,GACO,CACf,CAAC;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"DropdownField.js","sourceRoot":"","sources":["../src/DropdownField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AAiBxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,SAAS,aAAa,CAAC,EACnB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EAAE,EAAE,EACb,aAAa,EACb,QAAQ,EACR,GAAG,aAAa,EACC;IACjB,MAAM,YAAY,GAAG,CAAC,CAAC,aAAa,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,IAAI,gBAAgB,CAAC,IAAI,SAAS,CAAC;IAE3G,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,EAAE,eACH,gBAAgB,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,QAAQ,OAAK,aAAa,KAAM,UAAU,gBAAc,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,YAAY,GAAI,CACtG,GACO,CACf,CAAC;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/EmptyState.d.ts

@@ -31,6 +31,17 @@ export type EmptyStateProps = {
 /**
  * A design pattern component that indicates to users that system has no content to display.
  *
+ * @example
+ *     import { EmptyState } from '@bspk/ui/EmptyState';
+ *
+ *     export function Example() {
+ *         return (
+ *             <EmptyState body="Example body" header="Example header">
+ *                 Example EmptyState
+ *             </EmptyState>
+ *         );
+ *     }
+ *
  * @name EmptyState
  */
 declare function EmptyState({ children, header, body, callToAction, bodyAlign }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/EmptyState.js

@@ -5,6 +5,17 @@ import { Txt } from './Txt';
 /**
  * A design pattern component that indicates to users that system has no content to display.
  *
+ * @example
+ *     import { EmptyState } from '@bspk/ui/EmptyState';
+ *
+ *     export function Example() {
+ *         return (
+ *             <EmptyState body="Example body" header="Example header">
+ *                 Example EmptyState
+ *             </EmptyState>
+ *         );
+ *     }
+ *
  * @name EmptyState
  */
 function EmptyState({ children, header, body, callToAction, bodyAlign = 'center' }) {

package/dist/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../src/EmptyState.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAiC5B;;;;GAIG;AACH,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,GAAG,QAAQ,EAAmB;IAC/F,OAAO,CACH,MAAC,MAAM,IACH,KAAK,EAAC,QAAQ,EACd,MAAM,qBACI,aAAa,EACvB,KAAK,EAAE;YACH,MAAM,EAAE,0BAA0B;YAClC,QAAQ,EAAE,OAAO;SACpB,aAEA,QAAQ,EACT,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,QAAC,GAAG,EAAC,GAAG,aACjC,KAAC,GAAG,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,YAAY,YAChC,MAAM,GACL,EACN,KAAC,GAAG,IAAC,EAAE,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,OAAO,EAAC,WAAW,YAC3D,IAAI,GACH,IACD,EACR,YAAY,IAAI,CACb,KAAC,MAAM,IACH,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAE,YAAY,CAAC,IAAI,IAAI,QAAQ,EACnC,OAAO,EAAC,SAAS,GACnB,CACL,IACI,CACZ,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../src/EmptyState.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAiC5B;;;;;;;;;;;;;;;GAeG;AACH,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,GAAG,QAAQ,EAAmB;IAC/F,OAAO,CACH,MAAC,MAAM,IACH,KAAK,EAAC,QAAQ,EACd,MAAM,qBACI,aAAa,EACvB,KAAK,EAAE;YACH,MAAM,EAAE,0BAA0B;YAClC,QAAQ,EAAE,OAAO;SACpB,aAEA,QAAQ,EACT,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,QAAC,GAAG,EAAC,GAAG,aACjC,KAAC,GAAG,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,YAAY,YAChC,MAAM,GACL,EACN,KAAC,GAAG,IAAC,EAAE,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,OAAO,EAAC,WAAW,YAC3D,IAAI,GACH,IACD,EACR,YAAY,IAAI,CACb,KAAC,MAAM,IACH,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAE,YAAY,CAAC,IAAI,IAAI,QAAQ,EACnC,OAAO,EAAC,SAAS,GACnB,CACL,IACI,CACZ,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/Fab.d.ts

@@ -33,6 +33,14 @@ export type FabProps<As extends ElementType = 'button'> = Pick<ButtonProps<As>,
  * A button that highlights a primary action that is elevated above the body content of a page; normally fixed to the
  * bottom right of a screen.
  *
+ * @example
+ *     import { SvgBolt } from '@bspk/icons/Bolt';
+ *     import { Fab } from '@bspk/ui/Fab';
+ *
+ *     export function Example() {
+ *         return <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />;
+ *     }
+ *
  * @name Fab
  */
 declare function Fab<As extends ElementType = 'button'>({ size, variant, showLabel: showLabelProp, as, placement, container, label, icon, toolTip, ...otherProps }: ElementProps<FabProps<As>, As>): import("react/jsx-runtime").JSX.Element;

package/dist/Fab.js

@@ -8,6 +8,14 @@ import { useErrorLogger } from './utils/errors';
  * A button that highlights a primary action that is elevated above the body content of a page; normally fixed to the
  * bottom right of a screen.
  *
+ * @example
+ *     import { SvgBolt } from '@bspk/icons/Bolt';
+ *     import { Fab } from '@bspk/ui/Fab';
+ *
+ *     export function Example() {
+ *         return <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />;
+ *     }
+ *
  * @name Fab
  */
 function Fab({ size = 'small', variant = 'primary', showLabel: showLabelProp = true, as, placement = 'bottom-right', container = 'local', label, icon, toolTip, ...otherProps }) {

package/dist/Fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fab.js","sourceRoot":"","sources":["../src/Fab.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,CAAC;AAIpB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAqChD;;;;;GAKG;AACH,SAAS,GAAG,CAAoC,EAC5C,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,SAAS,EACnB,SAAS,EAAE,aAAa,GAAG,IAAI,EAC/B,EAAE,EACF,SAAS,GAAG,cAAc,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,GAAG,UAAU,EACgB;IAC7B,6CAA6C;IAC7C,MAAM,SAAS,GAAG,aAAa,KAAK,KAAK,IAAI,IAAI,CAAC;IAElD,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,sDAAsD,CAAC,CAAC;IAE/F,MAAM,EAAE,GAAgB,EAAE,IAAI,QAAQ,CAAC;IAEvC,MAAM,MAAM,GAAG,CACX,MAAC,EAAE,OACK,UAAU,gBACF,KAAK,eACP,KAAK,oBACC,SAAS,oBACT,SAAS,gBACb,SAAS,IAAI,SAAS,eACvB,IAAI,kBACD,OAAO,aAEpB,CAAC,CAAC,IAAI,IAAI,gDAAqB,IAAI,GAAQ,EAC3C,CAAC,SAAS,IAAI,iDAAsB,KAAK,GAAQ,IACjD,CACR,CAAC;IAEF,OAAO,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAC,KAAK,YAC5C,MAAM,GACD,CACb,CAAC,CAAC,CAAC,CACA,MAAM,CACT,CAAC;AACN,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Fab.js","sourceRoot":"","sources":["../src/Fab.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,CAAC;AAIpB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAqChD;;;;;;;;;;;;;GAaG;AACH,SAAS,GAAG,CAAoC,EAC5C,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,SAAS,EACnB,SAAS,EAAE,aAAa,GAAG,IAAI,EAC/B,EAAE,EACF,SAAS,GAAG,cAAc,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,GAAG,UAAU,EACgB;IAC7B,6CAA6C;IAC7C,MAAM,SAAS,GAAG,aAAa,KAAK,KAAK,IAAI,IAAI,CAAC;IAElD,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,sDAAsD,CAAC,CAAC;IAE/F,MAAM,EAAE,GAAgB,EAAE,IAAI,QAAQ,CAAC;IAEvC,MAAM,MAAM,GAAG,CACX,MAAC,EAAE,OACK,UAAU,gBACF,KAAK,eACP,KAAK,oBACC,SAAS,oBACT,SAAS,gBACb,SAAS,IAAI,SAAS,eACvB,IAAI,kBACD,OAAO,aAEpB,CAAC,CAAC,IAAI,IAAI,gDAAqB,IAAI,GAAQ,EAC3C,CAAC,SAAS,IAAI,iDAAsB,KAAK,GAAQ,IACjD,CACR,CAAC;IAEF,OAAO,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAC,KAAK,YAC5C,MAAM,GACD,CACb,CAAC,CAAC,CAAC,CACA,MAAM,CACT,CAAC;AACN,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/FormField.d.ts

@@ -39,6 +39,31 @@ export type FormFieldProps = CommonProps<'required'> & InvalidPropsLibrary & {
  *
  * Children may be one of the following: TextInput, Dropdown, DatePicker, or TimePicker.
  *
+ * @example
+ *     import { TextInput } from '@bspk/ui/TextInput';
+ *     import { FormField } from '@bspk/ui/FormField';
+ *
+ *     export function Example() {
+ *         const [state, setState] = React.useState<string | undefined>(undefined);
+ *         return (
+ *             <FormField controlId="Example controlId" label="Example label">
+ *                 {(fieldProps) => {
+ *                     return (
+ *                         <TextInput
+ *                             aria-label="example aria-label"
+ *                             name="example-text"
+ *                             onChange={(next) => {
+ *                                 setState(next);
+ *                             }}
+ *                             value={state}
+ *                             {...fieldProps}
+ *                         />
+ *                     );
+ *                 }}
+ *             </FormField>
+ *         );
+ *     }
+ *
  * @name FormField
  */
 declare function FormField({ label, invalid, errorMessage, helperText, children, labelTrailing, controlId, required, }: FormFieldProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/FormField.js

@@ -9,6 +9,31 @@ import { Txt } from './Txt';
  *
  * Children may be one of the following: TextInput, Dropdown, DatePicker, or TimePicker.
  *
+ * @example
+ *     import { TextInput } from '@bspk/ui/TextInput';
+ *     import { FormField } from '@bspk/ui/FormField';
+ *
+ *     export function Example() {
+ *         const [state, setState] = React.useState<string | undefined>(undefined);
+ *         return (
+ *             <FormField controlId="Example controlId" label="Example label">
+ *                 {(fieldProps) => {
+ *                     return (
+ *                         <TextInput
+ *                             aria-label="example aria-label"
+ *                             name="example-text"
+ *                             onChange={(next) => {
+ *                                 setState(next);
+ *                             }}
+ *                             value={state}
+ *                             {...fieldProps}
+ *                         />
+ *                     );
+ *                 }}
+ *             </FormField>
+ *         );
+ *     }
+ *
  * @name FormField
  */
 function FormField({ label, invalid, errorMessage, helperText, children, labelTrailing, controlId, required, }) {

package/dist/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../src/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAyC5B;;;;;;GAMG;AACH,SAAS,SAAS,CAAC,EACf,KAAK,EACL,OAAO,EACP,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,aAAa,EACb,SAAS,EACT,QAAQ,GACK;IACb,MAAM,cAAc,GAAG,YAAY,IAAI,GAAG,SAAS,gBAAgB,CAAC;IACpE,MAAM,YAAY,GAAG,UAAU,IAAI,GAAG,SAAS,cAAc,CAAC;IAE9D,IAAI,OAAO,QAAQ,KAAK,UAAU;QAAE,OAAO,IAAI,CAAC;IAEhD,OAAO,CACH,4BAAe,YAAY,kBAAe,OAAO,IAAI,SAAS,aAC1D,MAAC,MAAM,IAAC,EAAE,EAAC,QAAQ,aACf,iBAAO,OAAO,EAAE,SAAS,aACrB,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,YAChC,KAAK,GACJ,EACL,QAAQ,IAAI,CACT,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,YAAY,YAC9B,aAAa,GACZ,CACT,IACG,EACP,aAAa,IACT,EACR,QAAQ,CAAC;gBACN,OAAO,EAAE,CAAC,CAAC,YAAY;gBACvB,kBAAkB,EAAE,YAAY;gBAChC,mBAAmB,EAAE,cAAc;aACtC,CAAC,EACD,YAAY,IAAI,CACb,KAAC,WAAW,IAAC,EAAE,EAAE,cAAc,EAAE,OAAO,EAAC,OAAO,YAC3C,YAAY,GACH,CACjB,EACA,UAAU,IAAI,CACX,KAAC,GAAG,IAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAC,YAAY,YACtC,UAAU,GACT,CACT,IACC,CACT,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../src/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAyC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,SAAS,SAAS,CAAC,EACf,KAAK,EACL,OAAO,EACP,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,aAAa,EACb,SAAS,EACT,QAAQ,GACK;IACb,MAAM,cAAc,GAAG,YAAY,IAAI,GAAG,SAAS,gBAAgB,CAAC;IACpE,MAAM,YAAY,GAAG,UAAU,IAAI,GAAG,SAAS,cAAc,CAAC;IAE9D,IAAI,OAAO,QAAQ,KAAK,UAAU;QAAE,OAAO,IAAI,CAAC;IAEhD,OAAO,CACH,4BAAe,YAAY,kBAAe,OAAO,IAAI,SAAS,aAC1D,MAAC,MAAM,IAAC,EAAE,EAAC,QAAQ,aACf,iBAAO,OAAO,EAAE,SAAS,aACrB,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,YAChC,KAAK,GACJ,EACL,QAAQ,IAAI,CACT,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,YAAY,YAC9B,aAAa,GACZ,CACT,IACG,EACP,aAAa,IACT,EACR,QAAQ,CAAC;gBACN,OAAO,EAAE,CAAC,CAAC,YAAY;gBACvB,kBAAkB,EAAE,YAAY;gBAChC,mBAAmB,EAAE,cAAc;aACtC,CAAC,EACD,YAAY,IAAI,CACb,KAAC,WAAW,IAAC,EAAE,EAAE,cAAc,EAAE,OAAO,EAAC,OAAO,YAC3C,YAAY,GACH,CACjB,EACA,UAAU,IAAI,CACX,KAAC,GAAG,IAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAC,YAAY,YACtC,UAAU,GACT,CACT,IACC,CACT,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/Img.d.ts

@@ -16,6 +16,13 @@ export type ImgProps = {
 /**
  * The Img component is used to display images on the page.
  *
+ * @example
+ *     import { Img } from '@bspk/ui/Img';
+ *
+ *     export function Example() {
+ *         return <Img alt="Example alt" src="Example src" />;
+ *     }
+ *
  * @name Img
  */
 declare function Img({ alt, ...props }: ElementProps<ImgProps, 'img'>): import("react/jsx-runtime").JSX.Element;

package/dist/Img.js

@@ -2,6 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * The Img component is used to display images on the page.
  *
+ * @example
+ *     import { Img } from '@bspk/ui/Img';
+ *
+ *     export function Example() {
+ *         return <Img alt="Example alt" src="Example src" />;
+ *     }
+ *
  * @name Img
  */
 function Img({ alt, ...props }) {

package/dist/Img.js.map

@@ -1 +1 @@
-{"version":3,"file":"Img.js","sourceRoot":"","sources":["../src/Img.tsx"],"names":[],"mappings":";AAiBA;;;;GAIG;AACH,SAAS,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAiC;IACzD,OAAO,iBAAS,KAAK,EAAE,GAAG,EAAE,GAAG,eAAY,KAAK,GAAG,CAAC;AACxD,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Img.js","sourceRoot":"","sources":["../src/Img.tsx"],"names":[],"mappings":";AAiBA;;;;;;;;;;;GAWG;AACH,SAAS,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAiC;IACzD,OAAO,iBAAS,KAAK,EAAE,GAAG,EAAE,GAAG,eAAY,KAAK,GAAG,CAAC;AACxD,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/InlineAlert.d.ts

@@ -21,6 +21,13 @@ export type InlineAlertProps = {
  * Inline alerts provide contextual feedback messages for typical user actions with a handful of available and flexible
  * alert messages.
  *
+ * @example
+ *     import { InlineAlert } from '@bspk/ui/InlineAlert';
+ *
+ *     export function Example() {
+ *         return <InlineAlert variant="informational">Example informational inline alert</InlineAlert>;
+ *     }
+ *
  * @name InlineAlert
  */
 declare function InlineAlert({ children, variant, id }: InlineAlertProps): import("react/jsx-runtime").JSX.Element;

package/dist/InlineAlert.js

@@ -9,6 +9,13 @@ import { Txt } from './Txt';
  * Inline alerts provide contextual feedback messages for typical user actions with a handful of available and flexible
  * alert messages.
  *
+ * @example
+ *     import { InlineAlert } from '@bspk/ui/InlineAlert';
+ *
+ *     export function Example() {
+ *         return <InlineAlert variant="informational">Example informational inline alert</InlineAlert>;
+ *     }
+ *
  * @name InlineAlert
  */
 function InlineAlert({ children, variant = 'informational', id }) {

package/dist/InlineAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.js","sourceRoot":"","sources":["../src/InlineAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,qBAAqB,CAAC;AAG7B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAsB5B;;;;;GAKG;AACH,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,eAAe,EAAE,EAAE,EAAoB;IAC9E,OAAO,CACH,4BAAe,cAAc,kBAAe,OAAO,EAAE,EAAE,EAAE,EAAE,aACtD,YAAY,CAAC,OAAO,CAAC,EACtB,KAAC,GAAG,IAAC,OAAO,EAAC,YAAY,YAAE,QAAQ,GAAO,IACxC,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,+CAA+C;AAC/C,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,CAC5B,eAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,aACnE,eACI,CAAC,EAAC,spCAAspC,EACxpC,IAAI,EAAC,cAAc,GACrB,EACF,eACI,CAAC,EAAC,mUAAmU,6BAEvU,EACF,eACI,CAAC,EAAC,yUAAyU,6BAE7U,IACA,CACT,CAAC;AAEF,MAAM,YAAY,GAAoC;IAClD,KAAK,EAAE,KAAC,YAAY,KAAG;IACvB,aAAa,EAAE,KAAC,WAAW,KAAG;IAC9B,OAAO,EAAE,KAAC,kBAAkB,KAAG;IAC/B,OAAO,EAAE,KAAC,iBAAiB,KAAG;CACjC,CAAC"}
+{"version":3,"file":"InlineAlert.js","sourceRoot":"","sources":["../src/InlineAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,qBAAqB,CAAC;AAG7B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAsB5B;;;;;;;;;;;;GAYG;AACH,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,eAAe,EAAE,EAAE,EAAoB;IAC9E,OAAO,CACH,4BAAe,cAAc,kBAAe,OAAO,EAAE,EAAE,EAAE,EAAE,aACtD,YAAY,CAAC,OAAO,CAAC,EACtB,KAAC,GAAG,IAAC,OAAO,EAAC,YAAY,YAAE,QAAQ,GAAO,IACxC,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,+CAA+C;AAC/C,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,CAC5B,eAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,aACnE,eACI,CAAC,EAAC,spCAAspC,EACxpC,IAAI,EAAC,cAAc,GACrB,EACF,eACI,CAAC,EAAC,mUAAmU,6BAEvU,EACF,eACI,CAAC,EAAC,yUAAyU,6BAE7U,IACA,CACT,CAAC;AAEF,MAAM,YAAY,GAAoC;IAClD,KAAK,EAAE,KAAC,YAAY,KAAG;IACvB,aAAa,EAAE,KAAC,WAAW,KAAG;IAC9B,OAAO,EAAE,KAAC,kBAAkB,KAAG;IAC/B,OAAO,EAAE,KAAC,iBAAiB,KAAG;CACjC,CAAC"}

package/dist/Layout.d.ts

@@ -38,6 +38,13 @@ export type LayoutProps<As extends ElementType = 'div'> = {
 /**
  * Utility component used within other components for layout purposes.
  *
+ * @example
+ *     import { Layout } from '@bspk/ui/Layout';
+ *
+ *     export function Example() {
+ *         return <Layout>Low effort example</Layout>;
+ *     }
+ *
  * @name Layout
  */
 declare function Layout<As extends ElementType = 'div'>({ children, column, gap, style, as, align, justify, ...props }: ElementProps<LayoutProps<As>, As>): import("react/jsx-runtime").JSX.Element;

package/dist/Layout.js

@@ -2,6 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Utility component used within other components for layout purposes.
  *
+ * @example
+ *     import { Layout } from '@bspk/ui/Layout';
+ *
+ *     export function Example() {
+ *         return <Layout>Low effort example</Layout>;
+ *     }
+ *
  * @name Layout
  */
 function Layout({ children, column, gap = '16', style, as, align = 'flex-start', justify = 'flex-start', ...props }) {

package/dist/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":";AAwCA;;;;GAIG;AACH,SAAS,MAAM,CAAiC,EAC5C,QAAQ,EACR,MAAM,EACN,GAAG,GAAG,IAAI,EACV,KAAK,EACL,EAAE,EACF,KAAK,GAAG,YAAY,EACpB,OAAO,GAAG,YAAY,EACtB,GAAG,KAAK,EACwB;IAChC,MAAM,EAAE,GAAgB,EAAE,IAAI,KAAK,CAAC;IAEpC,MAAM,UAAU,GAAG,KAAK,IAAI,YAAY,CAAC;IACzC,MAAM,cAAc,GAAG,OAAO,IAAI,YAAY,CAAC;IAE/C,OAAO,CACH,KAAC,EAAE,OACK,KAAK,eACC,QAAQ,EAClB,KAAK,EAAE;YACH,GAAG,KAAK;YACR,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;YACxC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI;YAC5B,UAAU;YACV,cAAc;SACjB,YAEA,QAAQ,GACR,CACR,CAAC;AACN,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":";AAwCA;;;;;;;;;;;GAWG;AACH,SAAS,MAAM,CAAiC,EAC5C,QAAQ,EACR,MAAM,EACN,GAAG,GAAG,IAAI,EACV,KAAK,EACL,EAAE,EACF,KAAK,GAAG,YAAY,EACpB,OAAO,GAAG,YAAY,EACtB,GAAG,KAAK,EACwB;IAChC,MAAM,EAAE,GAAgB,EAAE,IAAI,KAAK,CAAC;IAEpC,MAAM,UAAU,GAAG,KAAK,IAAI,YAAY,CAAC;IACzC,MAAM,cAAc,GAAG,OAAO,IAAI,YAAY,CAAC;IAE/C,OAAO,CACH,KAAC,EAAE,OACK,KAAK,eACC,QAAQ,EAClB,KAAK,EAAE;YACH,GAAG,KAAK;YACR,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;YACxC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI;YAC5B,UAAU;YACV,cAAc;SACjB,YAEA,QAAQ,GACR,CACR,CAAC;AACN,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/Link.d.ts

@@ -1,7 +1,7 @@
 import './link.scss';
 import { AnchorHTMLAttributes } from 'react';
-import { CommonPropsLibrary } from '.';
-export type LinkProps = Pick<AnchorHTMLAttributes<unknown>, 'target'> & Pick<CommonPropsLibrary, 'disabled'> & {
+import { CommonPropsLibrary, ElementProps } from '.';
+export type LinkProps = Pick<CommonPropsLibrary, 'disabled'> & {
     /**
      * The label of the link.
      *
@@ -10,7 +10,12 @@ export type LinkProps = Pick<AnchorHTMLAttributes<unknown>, 'target'> & Pick<Com
     label: string;
     /** The variant of the link. Controls the icon that is displayed and link target. */
     trailingIcon?: 'chevron' | 'external' | 'link';
-    /** The [href](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#href) of the link. */
+    /**
+     * The [href](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#href) of the link.
+     *
+     * @example
+     *     https://bspk.dev
+     */
     href: AnchorHTMLAttributes<unknown>['href'];
     /**
      * The size of the link.
@@ -25,13 +30,29 @@ export type LinkProps = Pick<AnchorHTMLAttributes<unknown>, 'target'> & Pick<Com
      * @default default
      */
     variant?: 'default' | 'subtle-inverse' | 'subtle';
+    /**
+     * The [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#target) of the link. If the
+     * `trailingIcon` is set to `external`, this will default to `_blank`.
+     *
+     * @default _self
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top';
 };
 /**
  * This is the standalone link component. Inline links can use the native `a` element.
  *
+ * @example
+ *     import { Link } from '@bspk/ui/Link';
+ *
+ *     export function Example() {
+ *         return <Link href="https://bspk.dev" label="Example label" trailingIcon="external" />;
+ *     }
+ *
  * @name Link
  */
-declare function Link({ label, trailingIcon, size, variant, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+declare function Link({ label, trailingIcon, size, variant, target, ...props }: ElementProps<LinkProps, 'a'>): import("react/jsx-runtime").JSX.Element;
 declare namespace Link {
     var bspkName: string;
 }