@bspk/ui 1.1.21 → 1.1.23

package/dist/StylesProviderColdwellBanker.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import '@bspk/styles/coldwell-banker.css';
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
+styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{text-decoration:none;color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{text-decoration:underline;color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:active{text-decoration:underline}a[data-subtle][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{text-decoration:none;color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:active{text-decoration:underline}a[data-subtle-inverse][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
 /**
  * Utility to provide the Coldwell Banker styles to the application.
  *

package/dist/StylesProviderCorcoran.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import '@bspk/styles/corcoran.css';
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
+styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{text-decoration:none;color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{text-decoration:underline;color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:active{text-decoration:underline}a[data-subtle][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{text-decoration:none;color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:active{text-decoration:underline}a[data-subtle-inverse][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
 /**
  * Utility to provide the Corcoran styles to the application.
  *

package/dist/StylesProviderDenaliBoss.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import '@bspk/styles/denali-boss.css';
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
+styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{text-decoration:none;color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{text-decoration:underline;color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:active{text-decoration:underline}a[data-subtle][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{text-decoration:none;color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:active{text-decoration:underline}a[data-subtle-inverse][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
 /**
  * Utility to provide the Denali Boss styles to the application.
  *

package/dist/StylesProviderEra.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import '@bspk/styles/era.css';
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
+styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{text-decoration:none;color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{text-decoration:underline;color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:active{text-decoration:underline}a[data-subtle][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{text-decoration:none;color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:active{text-decoration:underline}a[data-subtle-inverse][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
 /**
  * Utility to provide the ERA styles to the application.
  *

package/dist/StylesProviderSothebys.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import '@bspk/styles/sothebys.css';
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
+styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{text-decoration:none;color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{text-decoration:underline;color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:active{text-decoration:underline}a[data-subtle][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{text-decoration:none;color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:active{text-decoration:underline}a[data-subtle-inverse][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
 /**
  * Utility to provide the Sotheby's styles to the application.
  *

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"}

package/dist/Tag.d.ts

@@ -47,7 +47,19 @@ export type TagProps<As extends ElementType = 'span'> = {
     wrap?: boolean;
 };
 /**
- * A non-interactive visual indicators to draw attention or categorization of a component.
+ * A non-interactive visual indicators to draw attention or categorization of a
+ * component.
+ *
+ * @example
+ *     import { Tag } from '@bspk/ui/Tag';
+ *
+ *     export function Example() {
+ *         return (
+ *             <Tag variant="flat" color="primary">
+ *                 Example Tag
+ *             </Tag>
+ *         );
+ *     }
  *
  * @name Tag
  */

package/dist/Tag.js

@@ -2,7 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styleAdd } from './utils/styleAdd';
 styleAdd(`[data-bspk=tag]{display:flex;flex-direction:column;justify-content:center;width:fit-content;position:relative;padding:0 var(--spacing-sizing-03);border-radius:var(--radius-small);color:var(--foreground) !important;background:var(--background);font:unset;text-decoration:unset;white-space:nowrap;pointer-events:none}[data-bspk=tag][data-wrap]{height:auto}[data-bspk=tag][data-variant=pill]{border-radius:var(--radius-circular)}[data-bspk=tag][data-variant=corner-wrap]{border-bottom-right-radius:0}[data-bspk=tag][data-size=small]{font:var(--labels-small);height:var(--spacing-sizing-08)}[data-bspk=tag][data-size=x-small]{font:var(--labels-x-small);height:var(--spacing-sizing-06)}[data-bspk=tag][data-color=white]{box-shadow:var(--drop-shadow-south)}[data-bspk=tag] [data-triangle]{position:absolute;bottom:-12px;right:0;width:0;height:0;border-style:solid;border-width:12px 12px 0 0;border-color:var(--foreground) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);transform:rotate(0deg)}`);;
 /**
- * A non-interactive visual indicators to draw attention or categorization of a component.
+ * A non-interactive visual indicators to draw attention or categorization of a
+ * component.
+ *
+ * @example
+ *     import { Tag } from '@bspk/ui/Tag';
+ *
+ *     export function Example() {
+ *         return (
+ *             <Tag variant="flat" color="primary">
+ *                 Example Tag
+ *             </Tag>
+ *         );
+ *     }
  *
  * @name Tag
  */

package/dist/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../src/Tag.tsx"],"names":[],"mappings":";AAKA,OAAO,YAAY,CAAC;AA+CpB;;;;GAIG;AACH,SAAS,GAAG,CAAkC,EAC1C,QAAQ,EACR,EAAE,EACF,KAAK,GAAG,OAAO,EACf,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,MAAM,EAChB,IAAI,EACJ,GAAG,KAAK,EACqB;IAC7B,MAAM,EAAE,GAAgB,EAAE,IAAI,MAAM,CAAC;IAErC,OAAO,CACH,MAAC,EAAE,OACK,KAAK,eACC,KAAK,gBACH,KAAK,eACN,IAAI,kBACD,OAAO,eACV,IAAI,IAAI,SAAS,aAE3B,QAAQ,EACR,OAAO,KAAK,aAAa,IAAI,sCAAqB,IAClD,CACR,CAAC;AACN,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../src/Tag.tsx"],"names":[],"mappings":";AAKA,OAAO,YAAY,CAAC;AA+CpB;;;;;;;;;;;;;;;;GAgBG;AACH,SAAS,GAAG,CAAkC,EAC1C,QAAQ,EACR,EAAE,EACF,KAAK,GAAG,OAAO,EACf,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,MAAM,EAChB,IAAI,EACJ,GAAG,KAAK,EACqB;IAC7B,MAAM,EAAE,GAAgB,EAAE,IAAI,MAAM,CAAC;IAErC,OAAO,CACH,MAAC,EAAE,OACK,KAAK,eACC,KAAK,gBACH,KAAK,eACN,IAAI,kBACD,OAAO,eACV,IAAI,IAAI,SAAS,aAE3B,QAAQ,EACR,OAAO,KAAK,aAAa,IAAI,sCAAqB,IAClD,CACR,CAAC;AACN,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/TextField.d.ts

@@ -1,12 +1,31 @@
 import { FormFieldProps } from './FormField';
 import { TextInputProps } from './TextInput';
 import { InvalidPropsLibrary } from '.';
-export type TextFieldProps = InvalidPropsLibrary & Pick<TextInputProps, 'autoComplete' | 'disabled' | 'inputRef' | 'leading' | 'name' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'size' | 'trailing' | 'type' | 'value'> & Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing'>;
+export type TextFieldProps = InvalidPropsLibrary & Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing'> & Pick<TextInputProps, 'autoComplete' | 'disabled' | 'inputRef' | 'leading' | 'name' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'size' | 'trailing' | 'type' | 'value'>;
 /**
- * A text input that allows users to enter text, numbers or symbols in a singular line.
+ * A text input that allows users to enter text, numbers or symbols in a
+ * singular line.
  *
  * This component takes properties from the FormField and TextInput components.
  *
+ * @example
+ *     import { useState } from 'react';
+ *     import { TextField } from '@bspk/ui/TextField';
+ *
+ *     export function Example() {
+ *         const [value, setValue] = useState<string>('');
+ *
+ *         return (
+ *             <TextField
+ *                 controlId="Example controlId"
+ *                 label="Example label"
+ *                 name="Example name"
+ *                 onChange={setValue}
+ *                 value={value}
+ *             />
+ *         );
+ *     }
+ *
  * @name TextField
  */
 declare function TextField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, ...inputProps }: TextFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/TextField.js

@@ -2,14 +2,34 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { FormField } from './FormField';
 import { TextInput } from './TextInput';
 /**
- * A text input that allows users to enter text, numbers or symbols in a singular line.
+ * A text input that allows users to enter text, numbers or symbols in a
+ * singular line.
  *
  * This component takes properties from the FormField and TextInput components.
  *
+ * @example
+ *     import { useState } from 'react';
+ *     import { TextField } from '@bspk/ui/TextField';
+ *
+ *     export function Example() {
+ *         const [value, setValue] = useState<string>('');
+ *
+ *         return (
+ *             <TextField
+ *                 controlId="Example controlId"
+ *                 label="Example label"
+ *                 name="Example name"
+ *                 onChange={setValue}
+ *                 value={value}
+ *             />
+ *         );
+ *     }
+ *
  * @name TextField
  */
 function TextField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, ...inputProps }) {
-    const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) || undefined;
+    const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) ||
+        undefined;
     return (_jsx(FormField, { controlId: controlId, "data-bspk": "text-field", errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(TextInput, { ...inputProps, ...fieldProps, "aria-label": label, id: controlId, required: required })) }));
 }
 TextField.bspkName = 'TextField';

package/dist/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AAuBxD;;;;;;GAMG;AACH,SAAS,SAAS,CAAC,EACf,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,GAAG,UAAU,EACA;IACb,MAAM,YAAY,GAAG,CAAC,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,gBAAgB,CAAC,IAAI,SAAS,CAAC;IAErG,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,YAAY,EACtB,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,SAAS,OAAK,UAAU,KAAM,UAAU,gBAAc,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACtG,GACO,CACf,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AA2BxD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAS,SAAS,CAAC,EACf,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,GAAG,UAAU,EACA;IACb,MAAM,YAAY,GACd,CAAC,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,gBAAgB,CAAC;QAClE,SAAS,CAAC;IAEd,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,YAAY,EACtB,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,SAAS,OACF,UAAU,KACV,UAAU,gBACF,KAAK,EACjB,EAAE,EAAE,SAAS,EACb,QAAQ,EAAE,QAAQ,GACpB,CACL,GACO,CACf,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/TextInput.d.ts

@@ -31,7 +31,8 @@ export type TextInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'nam
      */
     type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
     /**
-     * Specifies if user agent has any permission to provide automated assistance in filling out form field values.
+     * Specifies if user agent has any permission to provide automated
+     * assistance in filling out form field values.
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
      *
      * @default off
@@ -39,8 +40,26 @@ export type TextInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'nam
     autoComplete?: HTMLInputAutoCompleteAttribute;
 };
 /**
- * A text input that allows users to enter text, numbers or symbols in a singular line. This is the base element and is
- * not intended to be used directly. Use the TextField component.
+ * A text input that allows users to enter text, numbers or symbols in a
+ * singular line. This is the base element and is not intended to be used
+ * directly. Use the TextField component.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { TextInput } from '@bspk/ui/TextInput';
+ *
+ *     export function Example() {
+ *         const [value, setValue] = useState<string>('');
+ *
+ *         return (
+ *             <TextInput
+ *                 aria-label="Example aria-label"
+ *                 name="Example name"
+ *                 onChange={setValue}
+ *                 value={value}
+ *             />
+ *         );
+ *     }
  *
  * @element
  *

package/dist/TextInput.js

@@ -10,8 +10,26 @@ export const DEFAULT = {
     autoComplete: 'off',
 };
 /**
- * A text input that allows users to enter text, numbers or symbols in a singular line. This is the base element and is
- * not intended to be used directly. Use the TextField component.
+ * A text input that allows users to enter text, numbers or symbols in a
+ * singular line. This is the base element and is not intended to be used
+ * directly. Use the TextField component.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { TextInput } from '@bspk/ui/TextInput';
+ *
+ *     export function Example() {
+ *         const [value, setValue] = useState<string>('');
+ *
+ *         return (
+ *             <TextInput
+ *                 aria-label="Example aria-label"
+ *                 name="Example name"
+ *                 onChange={setValue}
+ *                 value={value}
+ *             />
+ *         );
+ *     }
  *
  * @element
  *

package/dist/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../src/TextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,MAA4D;IAClE,YAAY,EAAE,KAAK;CACb,CAAC;AAqCX;;;;;;;GAOG;AACH,SAAS,SAAS,CAAC,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EACP,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,OAAO,CAAC,YAAY,EACnC,YAAY,EACZ,YAAY,EACZ,GAAG,UAAU,EACqB;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,OAAO,GAAG,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,WAAW,CAAC;IAEtD,OAAO,CACH,4BACc,YAAY,mBACP,QAAQ,IAAI,SAAS,gBACxB,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,SAAS,kBACnC,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,mBACrB,QAAQ,IAAI,SAAS,eACzB,IAAI,EACf,GAAG,EAAE,YAAY,KACb,UAAU,aAEb,OAAO,IAAI,+CAAoB,OAAO,GAAQ,EAC/C,qCACuB,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,gBACtB,SAAS,EACrB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAChB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;gBACxC,CAAC,EACD,WAAW,EAAE,WAAW,IAAI,GAAG,EAC/B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACd,EACD,QAAQ,IAAI,gDAAqB,QAAQ,GAAQ,EAClD,+BAAmB,OAAO,sBAAY,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,YAC7D,KAAC,SAAS,KAAG,GACR,IACP,CACT,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../src/TextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAQ/C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,MAA4D;IAClE,YAAY,EAAE,KAAK;CACb,CAAC;AA6CX;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAS,SAAS,CAAC,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EACP,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,OAAO,CAAC,YAAY,EACnC,YAAY,EACZ,YAAY,EACZ,GAAG,UAAU,EACqB;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,OAAO,GAAG,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,WAAW,CAAC;IAEtD,OAAO,CACH,4BACc,YAAY,mBACP,QAAQ,IAAI,SAAS,gBACxB,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,SAAS,kBACnC,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,mBACrB,QAAQ,IAAI,SAAS,eACzB,IAAI,EACf,GAAG,EAAE,YAAY,KACb,UAAU,aAEb,OAAO,IAAI,+CAAoB,OAAO,GAAQ,EAC/C,qCACuB,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,gBACtB,SAAS,EACrB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAChB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;gBACxC,CAAC,EACD,WAAW,EAAE,WAAW,IAAI,GAAG,EAC/B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACd,EACD,QAAQ,IAAI,gDAAqB,QAAQ,GAAQ,EAClD,+BAAmB,OAAO,sBAAY,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,YAC7D,KAAC,SAAS,KAAG,GACR,IACP,CACT,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/Textarea.d.ts

@@ -55,11 +55,30 @@ export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'read
     maxRows?: number;
 };
 /**
- * A component that allows users to input large amounts of text that could span multiple lines.
+ * A component that allows users to input large amounts of text that could span
+ * multiple lines.
  *
- * This component gives you a textarea HTML element that automatically adjusts its height to match the length of the
- * content within maximum and minimum rows. A character counter when a maxLength is set to show the number of characters
- * remaining below the limit.
+ * This component gives you a textarea HTML element that automatically adjusts
+ * its height to match the length of the content within maximum and minimum
+ * rows. A character counter when a maxLength is set to show the number of
+ * characters remaining below the limit.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { Textarea } from '@bspk/ui/Textarea';
+ *
+ *     export function Example() {
+ *         const [value, setValue] = useState<string>('');
+ *
+ *         return (
+ *             <Textarea
+ *                 aria-label="Example aria-label"
+ *                 name="Example name"
+ *                 onChange={setValue}
+ *                 value={value}
+ *             />
+ *         );
+ *     }
  *
  * @element
  *