@brightspot/ui 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/storybook/sb-manager/runtime.js

@@ -27,14 +27,14 @@ var ze = (e, t, o) => (o = e != null ? Nd(Hd(e)) : {}, zd(
 ));
 
 // ../node_modules/prop-types/lib/ReactPropTypesSecret.js
-var ya = Ee((gw, ga) => {
+var ya = Ee((yw, ga) => {
   "use strict";
   var jd = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
   ga.exports = jd;
 });
 
 // ../node_modules/prop-types/factoryWithThrowingShims.js
-var Sa = Ee((yw, xa) => {
+var Sa = Ee((bw, xa) => {
   "use strict";
   var Vd = ya();
   function ba() {
@@ -87,13 +87,13 @@ Read more at http://fb.me/use-check-prop-types"
 });
 
 // ../node_modules/prop-types/index.js
-var pn = Ee((Sw, Ia) => {
+var pn = Ee((Iw, Ia) => {
   Ia.exports = Sa()();
-  var vw, xw;
+  var xw, Sw;
 });
 
 // ../node_modules/react-fast-compare/index.js
-var _a = Ee((Iw, Ea) => {
+var _a = Ee((Ew, Ea) => {
   var Kd = typeof Element < "u", $d = typeof Map == "function", Ud = typeof Set == "function", Gd = typeof ArrayBuffer == "function" && !!ArrayBuffer.
   isView;
   function jo(e, t) {
@@ -157,7 +157,7 @@ var _a = Ee((Iw, Ea) => {
 });
 
 // ../node_modules/invariant/browser.js
-var Ta = Ee((_w, wa) => {
+var Ta = Ee((ww, wa) => {
   "use strict";
   var Yd = /* @__PURE__ */ a(function(e, t, o, i, n, r, l, u) {
     if (!e) {
@@ -181,7 +181,7 @@ var Ta = Ee((_w, wa) => {
 });
 
 // ../node_modules/shallowequal/index.js
-var ka = Ee((Tw, Ca) => {
+var ka = Ee((Cw, Ca) => {
   Ca.exports = /* @__PURE__ */ a(function(t, o, i, n) {
     var r = i ? i.call(n, t, o) : void 0;
     if (r !== void 0)
@@ -579,7 +579,7 @@ var Kn = Ee((cr) => {
 });
 
 // ../node_modules/fast-decode-uri-component/index.js
-var Pl = Ee((ZO, Ol) => {
+var Pl = Ee((JO, Ol) => {
   "use strict";
   var Cl = 12, Am = 0, $n = [
     // The first part of the table maps bytes to character to a transition.
@@ -1121,7 +1121,7 @@ var Rl = Ee((Ze) => {
 });
 
 // ../node_modules/toggle-selection/index.js
-var jl = Ee((IP, Wl) => {
+var jl = Ee((EP, Wl) => {
   Wl.exports = function() {
     var e = document.getSelection();
     if (!e.rangeCount)
@@ -1148,7 +1148,7 @@ var jl = Ee((IP, Wl) => {
 });
 
 // ../node_modules/copy-to-clipboard/index.js
-var $l = Ee((EP, Kl) => {
+var $l = Ee((_P, Kl) => {
   "use strict";
   var qm = jl(), Vl = {
     "text/plain": "Text",
@@ -1300,7 +1300,7 @@ context"), Ar = Symbol.for("react.forward_ref"), Dr = Symbol.for("react.suspense
 });
 
 // ../node_modules/downshift/node_modules/react-is/index.js
-var Yc = Ee((tR, Gc) => {
+var Yc = Ee((oR, Gc) => {
   "use strict";
   Gc.exports = Uc();
 });
@@ -1918,50 +1918,50 @@ PullRequestIcon: KS, QuestionIcon: $S, RSSIcon: US, RedirectIcon: GS, ReduxIcon:
 RewindIcon: JS, RulerIcon: eI, SaveIcon: tI, SearchIcon: No, ShareAltIcon: at, ShareIcon: oI, ShieldIcon: rI, SideBySideIcon: nI, SidebarAltIcon: Ro,
 SidebarAltToggleIcon: iI, SidebarIcon: sI, SidebarToggleIcon: aI, SpeakerIcon: lI, StackedIcon: uI, StarHollowIcon: cI, StarIcon: pI, StatusFailIcon: Ns,
 StatusIcon: dI, StatusPassIcon: Rs, StatusWarnIcon: Fs, StickerIcon: fI, StopAltHollowIcon: mI, StopAltIcon: Hs, StopIcon: hI, StorybookIcon: Bs,
-StructureIcon: gI, SubtractIcon: yI, SunIcon: bI, SupportIcon: vI, SwitchAltIcon: xI, SyncIcon: mt, TabletIcon: SI, ThumbsUpIcon: II, TimeIcon: zs,
-TimerIcon: EI, TransferIcon: _I, TrashIcon: Ws, TwitterIcon: wI, TypeIcon: TI, UbuntuIcon: CI, UndoIcon: kI, UnfoldIcon: OI, UnlockIcon: PI,
-UnpinIcon: AI, UploadIcon: DI, UserAddIcon: MI, UserAltIcon: LI, UserIcon: NI, UsersIcon: RI, VSCodeIcon: FI, VerifiedIcon: HI, VideoIcon: BI,
-WandIcon: js, WatchIcon: zI, WindowsIcon: WI, WrenchIcon: jI, XIcon: VI, YoutubeIcon: KI, ZoomIcon: Vs, ZoomOutIcon: Ks, ZoomResetIcon: $s, iconList: $I } = __STORYBOOK_ICONS__;
+StructureIcon: gI, SubtractIcon: yI, SunIcon: bI, SupportIcon: vI, SweepIcon: xI, SwitchAltIcon: SI, SyncIcon: mt, TabletIcon: II, ThumbsUpIcon: EI,
+TimeIcon: zs, TimerIcon: _I, TransferIcon: wI, TrashIcon: Ws, TwitterIcon: TI, TypeIcon: CI, UbuntuIcon: kI, UndoIcon: OI, UnfoldIcon: PI, UnlockIcon: AI,
+UnpinIcon: DI, UploadIcon: MI, UserAddIcon: LI, UserAltIcon: NI, UserIcon: RI, UsersIcon: FI, VSCodeIcon: HI, VerifiedIcon: BI, VideoIcon: zI,
+WandIcon: js, WatchIcon: WI, WindowsIcon: jI, WrenchIcon: VI, XIcon: KI, YoutubeIcon: $I, ZoomIcon: Vs, ZoomOutIcon: Ks, ZoomResetIcon: $s, iconList: UI } = __STORYBOOK_ICONS__;
 
 // global-externals:@storybook/theming
-var GI = __STORYBOOK_THEMING__, { CacheProvider: YI, ClassNames: qI, Global: QI, ThemeProvider: XI, background: ZI, color: Us, convert: JI, create: eE,
-createCache: tE, createGlobal: oE, createReset: rE, css: nE, darken: iE, ensure: sE, ignoreSsrWarning: aE, isPropValid: lE, jsx: uE, keyframes: cE,
-lighten: pE, styled: dE, themes: fE, typography: mE, useTheme: hE, withTheme: gE } = __STORYBOOK_THEMING__;
+var YI = __STORYBOOK_THEMING__, { CacheProvider: qI, ClassNames: QI, Global: XI, ThemeProvider: ZI, background: JI, color: Us, convert: eE, create: tE,
+createCache: oE, createGlobal: rE, createReset: nE, css: iE, darken: sE, ensure: aE, ignoreSsrWarning: lE, isPropValid: uE, jsx: cE, keyframes: pE,
+lighten: dE, styled: fE, themes: mE, typography: hE, useTheme: gE, withTheme: yE } = __STORYBOOK_THEMING__;
 
 // global-externals:@storybook/core/core-events
-var bE = __STORYBOOK_CORE_EVENTS__, { ARGTYPES_INFO_REQUEST: Gs, ARGTYPES_INFO_RESPONSE: Ys, CHANNEL_CREATED: qs, CHANNEL_WS_DISCONNECT: Qs,
-CONFIG_ERROR: vE, CREATE_NEW_STORYFILE_REQUEST: Xs, CREATE_NEW_STORYFILE_RESPONSE: Zs, CURRENT_STORY_WAS_SET: xE, DOCS_PREPARED: SE, DOCS_RENDERED: IE,
-FILE_COMPONENT_SEARCH_REQUEST: Js, FILE_COMPONENT_SEARCH_RESPONSE: Fo, FORCE_REMOUNT: sn, FORCE_RE_RENDER: EE, GLOBALS_UPDATED: _E, NAVIGATE_URL: wE,
-PLAY_FUNCTION_THREW_EXCEPTION: TE, PRELOAD_ENTRIES: St, PREVIEW_BUILDER_PROGRESS: ea, PREVIEW_KEYDOWN: CE, REGISTER_SUBSCRIPTION: kE, REQUEST_WHATS_NEW_DATA: OE,
-RESET_STORY_ARGS: PE, RESULT_WHATS_NEW_DATA: AE, SAVE_STORY_REQUEST: ta, SAVE_STORY_RESPONSE: oa, SELECT_STORY: DE, SET_CONFIG: ME, SET_CURRENT_STORY: ra,
-SET_FILTER: LE, SET_GLOBALS: NE, SET_INDEX: RE, SET_STORIES: FE, SET_WHATS_NEW_CACHE: HE, SHARED_STATE_CHANGED: BE, SHARED_STATE_SET: zE, STORIES_COLLAPSE_ALL: io,
-STORIES_EXPAND_ALL: an, STORY_ARGS_UPDATED: WE, STORY_CHANGED: jE, STORY_ERRORED: VE, STORY_FINISHED: KE, STORY_INDEX_INVALIDATED: $E, STORY_MISSING: UE,
-STORY_PREPARED: GE, STORY_RENDERED: YE, STORY_RENDER_PHASE_CHANGED: qE, STORY_SPECIFIED: QE, STORY_THREW_EXCEPTION: XE, STORY_UNCHANGED: ZE,
-TELEMETRY_ERROR: JE, TESTING_MODULE_CANCEL_TEST_RUN_REQUEST: e_, TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE: t_, TESTING_MODULE_CRASH_REPORT: ln,
-TESTING_MODULE_PROGRESS_REPORT: un, TESTING_MODULE_RUN_ALL_REQUEST: o_, TESTING_MODULE_RUN_REQUEST: r_, TOGGLE_WHATS_NEW_NOTIFICATIONS: n_, UNHANDLED_ERRORS_WHILE_PLAYING: i_,
-UPDATE_GLOBALS: s_, UPDATE_QUERY_PARAMS: a_, UPDATE_STORY_ARGS: l_ } = __STORYBOOK_CORE_EVENTS__;
+var vE = __STORYBOOK_CORE_EVENTS__, { ARGTYPES_INFO_REQUEST: Gs, ARGTYPES_INFO_RESPONSE: Ys, CHANNEL_CREATED: qs, CHANNEL_WS_DISCONNECT: Qs,
+CONFIG_ERROR: xE, CREATE_NEW_STORYFILE_REQUEST: Xs, CREATE_NEW_STORYFILE_RESPONSE: Zs, CURRENT_STORY_WAS_SET: SE, DOCS_PREPARED: IE, DOCS_RENDERED: EE,
+FILE_COMPONENT_SEARCH_REQUEST: Js, FILE_COMPONENT_SEARCH_RESPONSE: Fo, FORCE_REMOUNT: sn, FORCE_RE_RENDER: _E, GLOBALS_UPDATED: wE, NAVIGATE_URL: TE,
+PLAY_FUNCTION_THREW_EXCEPTION: CE, PRELOAD_ENTRIES: St, PREVIEW_BUILDER_PROGRESS: ea, PREVIEW_KEYDOWN: kE, REGISTER_SUBSCRIPTION: OE, REQUEST_WHATS_NEW_DATA: PE,
+RESET_STORY_ARGS: AE, RESULT_WHATS_NEW_DATA: DE, SAVE_STORY_REQUEST: ta, SAVE_STORY_RESPONSE: oa, SELECT_STORY: ME, SET_CONFIG: LE, SET_CURRENT_STORY: ra,
+SET_FILTER: NE, SET_GLOBALS: RE, SET_INDEX: FE, SET_STORIES: HE, SET_WHATS_NEW_CACHE: BE, SHARED_STATE_CHANGED: zE, SHARED_STATE_SET: WE, STORIES_COLLAPSE_ALL: io,
+STORIES_EXPAND_ALL: an, STORY_ARGS_UPDATED: jE, STORY_CHANGED: VE, STORY_ERRORED: KE, STORY_FINISHED: $E, STORY_INDEX_INVALIDATED: UE, STORY_MISSING: GE,
+STORY_PREPARED: YE, STORY_RENDERED: qE, STORY_RENDER_PHASE_CHANGED: QE, STORY_SPECIFIED: XE, STORY_THREW_EXCEPTION: ZE, STORY_UNCHANGED: JE,
+TELEMETRY_ERROR: e_, TESTING_MODULE_CANCEL_TEST_RUN_REQUEST: t_, TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE: o_, TESTING_MODULE_CRASH_REPORT: ln,
+TESTING_MODULE_PROGRESS_REPORT: un, TESTING_MODULE_RUN_ALL_REQUEST: r_, TESTING_MODULE_RUN_REQUEST: n_, TOGGLE_WHATS_NEW_NOTIFICATIONS: i_, UNHANDLED_ERRORS_WHILE_PLAYING: s_,
+UPDATE_GLOBALS: a_, UPDATE_QUERY_PARAMS: l_, UPDATE_STORY_ARGS: u_ } = __STORYBOOK_CORE_EVENTS__;
 
 // global-externals:@storybook/core/manager-api
-var c_ = __STORYBOOK_API__, { ActiveTabs: p_, Consumer: he, ManagerContext: d_, Provider: na, RequestResponseError: f_, addons: Ye, combineParameters: m_,
-controlOrMetaKey: h_, controlOrMetaSymbol: g_, eventMatchesShortcut: y_, eventToShortcut: ia, experimental_MockUniversalStore: b_, experimental_UniversalStore: v_,
-experimental_requestResponse: Ho, experimental_useUniversalStore: x_, isMacLike: S_, isShortcutTaken: I_, keyToSymbol: E_, merge: Bo, mockChannel: __,
-optionOrAltSymbol: w_, shortcutMatchesShortcut: sa, shortcutToHumanString: qe, types: ve, useAddonState: T_, useArgTypes: C_, useArgs: k_, useChannel: aa,
-useGlobalTypes: O_, useGlobals: P_, useParameter: A_, useSharedState: D_, useStoryPrepared: M_, useStorybookApi: oe, useStorybookState: Pe } = __STORYBOOK_API__;
+var p_ = __STORYBOOK_API__, { ActiveTabs: d_, Consumer: he, ManagerContext: f_, Provider: na, RequestResponseError: m_, addons: Ye, combineParameters: h_,
+controlOrMetaKey: g_, controlOrMetaSymbol: y_, eventMatchesShortcut: b_, eventToShortcut: ia, experimental_MockUniversalStore: v_, experimental_UniversalStore: x_,
+experimental_requestResponse: Ho, experimental_useUniversalStore: S_, isMacLike: I_, isShortcutTaken: E_, keyToSymbol: __, merge: Bo, mockChannel: w_,
+optionOrAltSymbol: T_, shortcutMatchesShortcut: sa, shortcutToHumanString: qe, types: ve, useAddonState: C_, useArgTypes: k_, useArgs: O_, useChannel: aa,
+useGlobalTypes: P_, useGlobals: A_, useParameter: D_, useSharedState: M_, useStoryPrepared: L_, useStorybookApi: oe, useStorybookState: Pe } = __STORYBOOK_API__;
 
 // global-externals:react-dom/client
-var N_ = __REACT_DOM_CLIENT__, { createRoot: la, hydrateRoot: R_ } = __REACT_DOM_CLIENT__;
+var R_ = __REACT_DOM_CLIENT__, { createRoot: la, hydrateRoot: F_ } = __REACT_DOM_CLIENT__;
 
 // global-externals:@storybook/core/router
-var H_ = __STORYBOOK_ROUTER__, { BaseLocationProvider: B_, DEEPLY_EQUAL: z_, Link: zo, Location: Wo, LocationProvider: ua, Match: ca, Route: so,
-buildArgsParam: W_, deepDiff: j_, getMatch: V_, parsePath: K_, queryFromLocation: $_, stringifyQuery: U_, useNavigate: pa } = __STORYBOOK_ROUTER__;
+var B_ = __STORYBOOK_ROUTER__, { BaseLocationProvider: z_, DEEPLY_EQUAL: W_, Link: zo, Location: Wo, LocationProvider: ua, Match: ca, Route: so,
+buildArgsParam: j_, deepDiff: V_, getMatch: K_, parsePath: $_, queryFromLocation: U_, stringifyQuery: G_, useNavigate: pa } = __STORYBOOK_ROUTER__;
 
 // global-externals:@storybook/core/theming
-var Y_ = __STORYBOOK_THEMING__, { CacheProvider: q_, ClassNames: Q_, Global: Ut, ThemeProvider: cn, background: X_, color: Z_, convert: J_, create: ew,
-createCache: tw, createGlobal: da, createReset: ow, css: rw, darken: nw, ensure: fa, ignoreSsrWarning: iw, isPropValid: sw, jsx: aw, keyframes: It,
-lighten: lw, styled: x, themes: uw, typography: cw, useTheme: Ae, withTheme: ma } = __STORYBOOK_THEMING__;
+var q_ = __STORYBOOK_THEMING__, { CacheProvider: Q_, ClassNames: X_, Global: Ut, ThemeProvider: cn, background: Z_, color: J_, convert: ew, create: tw,
+createCache: ow, createGlobal: da, createReset: rw, css: nw, darken: iw, ensure: fa, ignoreSsrWarning: sw, isPropValid: aw, jsx: lw, keyframes: It,
+lighten: uw, styled: x, themes: cw, typography: pw, useTheme: Ae, withTheme: ma } = __STORYBOOK_THEMING__;
 
 // global-externals:@storybook/core/manager-errors
-var dw = __STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__, { Category: fw, ProviderDoesNotExtendBaseProviderError: ha, UncaughtManagerError: mw } = __STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__;
+var fw = __STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__, { Category: mw, ProviderDoesNotExtendBaseProviderError: ha, UncaughtManagerError: hw } = __STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__;
 
 // ../node_modules/react-helmet-async/lib/index.module.js
 var ne = ze(pn()), Na = ze(_a()), gn = ze(Ta()), Ra = ze(ka());
@@ -2401,13 +2401,13 @@ var za = jt({
 }, "LayoutProvider"), ge = /* @__PURE__ */ a(() => ko(za), "useLayout");
 
 // global-externals:@storybook/core/components
-var zw = __STORYBOOK_COMPONENTS__, { A: Ww, ActionBar: jw, AddonPanel: Vw, Badge: Go, Bar: Kw, Blockquote: $w, Button: me, ClipboardCode: Uw,
-Code: Gw, DL: Yw, Div: qw, DocumentWrapper: Qw, EmptyTabContent: ja, ErrorFormatter: Va, FlexBar: Xw, Form: Yo, H1: Zw, H2: Jw, H3: eT, H4: tT,
-H5: oT, H6: rT, HR: nT, IconButton: te, IconButtonSkeleton: iT, Icons: Ka, Img: sT, LI: aT, Link: Me, ListItem: uf, Loader: qo, Modal: Et, OL: lT,
-P: uT, Placeholder: cT, Pre: pT, ProgressSpinner: $a, ResetWrapper: dT, ScrollArea: Qo, Separator: qt, Spaced: lt, Span: fT, StorybookIcon: mT,
-StorybookLogo: Xo, Symbols: hT, SyntaxHighlighter: gT, TT: yT, TabBar: Zo, TabButton: Jo, TabWrapper: bT, Table: vT, Tabs: Ua, TabsState: xT,
-TooltipLinkList: gt, TooltipMessage: ST, TooltipNote: Xe, UL: IT, WithTooltip: be, WithTooltipPure: ET, Zoom: Ga, codeCommon: _T, components: wT,
-createCopyToClipboardFunction: TT, getStoryHref: Qt, icons: CT, interleaveSeparators: kT, nameSpaceClassNames: OT, resetComponents: PT, withReset: AT } = __STORYBOOK_COMPONENTS__;
+var Ww = __STORYBOOK_COMPONENTS__, { A: jw, ActionBar: Vw, AddonPanel: Kw, Badge: Go, Bar: $w, Blockquote: Uw, Button: me, ClipboardCode: Gw,
+Code: Yw, DL: qw, Div: Qw, DocumentWrapper: Xw, EmptyTabContent: ja, ErrorFormatter: Va, FlexBar: Zw, Form: Yo, H1: Jw, H2: eT, H3: tT, H4: oT,
+H5: rT, H6: nT, HR: iT, IconButton: te, IconButtonSkeleton: sT, Icons: Ka, Img: aT, LI: lT, Link: Me, ListItem: uf, Loader: qo, Modal: Et, OL: uT,
+P: cT, Placeholder: pT, Pre: dT, ProgressSpinner: $a, ResetWrapper: fT, ScrollArea: Qo, Separator: qt, Spaced: lt, Span: mT, StorybookIcon: hT,
+StorybookLogo: Xo, Symbols: gT, SyntaxHighlighter: yT, TT: bT, TabBar: Zo, TabButton: Jo, TabWrapper: vT, Table: xT, Tabs: Ua, TabsState: ST,
+TooltipLinkList: gt, TooltipMessage: IT, TooltipNote: Xe, UL: ET, WithTooltip: be, WithTooltipPure: _T, Zoom: Ga, codeCommon: wT, components: TT,
+createCopyToClipboardFunction: CT, getStoryHref: Qt, icons: kT, interleaveSeparators: OT, nameSpaceClassNames: PT, resetComponents: AT, withReset: DT } = __STORYBOOK_COMPONENTS__;
 
 // ../node_modules/@babel/runtime/helpers/esm/extends.js
 function G() {
@@ -3054,7 +3054,7 @@ var Lf = It({
     }
   },
   /* @__PURE__ */ s.createElement(Ao, { size: 12 })
-), "DismissNotificationItem"), SC = x.div({
+), "DismissNotificationItem"), IC = x.div({
   height: 48
 }), Vf = /* @__PURE__ */ a(({
   notification: { content: e, duration: t, link: o, onClear: i, onClick: n, id: r, icon: l },
@@ -3148,8 +3148,8 @@ function ke(e, t) {
 a(ke, "_objectWithoutPropertiesLoose");
 
 // global-externals:react-dom
-var fo = __REACT_DOM__, { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: WC, createPortal: jC, createRoot: VC, findDOMNode: KC, flushSync: mo,
-hydrate: $C, hydrateRoot: UC, render: GC, unmountComponentAtNode: YC, unstable_batchedUpdates: qC, unstable_renderSubtreeIntoContainer: QC, version: XC } = __REACT_DOM__;
+var fo = __REACT_DOM__, { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: jC, createPortal: VC, createRoot: KC, findDOMNode: $C, flushSync: mo,
+hydrate: UC, hydrateRoot: GC, render: YC, unmountComponentAtNode: qC, unstable_batchedUpdates: QC, unstable_renderSubtreeIntoContainer: XC, version: ZC } = __REACT_DOM__;
 
 // ../node_modules/react-transition-group/esm/config.js
 var Dn = {
@@ -3919,7 +3919,7 @@ t.rightPanelWidth && e.panelPosition === t.panelPosition, "layoutStateIsEqual"),
 );
 
 // global-externals:@storybook/core/types
-var ak = __STORYBOOK_TYPES__, { Addon_TypesEnum: Te } = __STORYBOOK_TYPES__;
+var lk = __STORYBOOK_TYPES__, { Addon_TypesEnum: Te } = __STORYBOOK_TYPES__;
 
 // src/core-events/index.ts
 var xl = /* @__PURE__ */ ((B) => (B.CHANNEL_WS_DISCONNECT = "channelWSDisconnect", B.CHANNEL_CREATED = "channelCreated", B.CONFIG_ERROR = "c\
@@ -3943,68 +3943,68 @@ rashReport", B.TESTING_MODULE_PROGRESS_REPORT = "testingModuleProgressReport", B
 "testingModuleRunAllRequest", B.TESTING_MODULE_CANCEL_TEST_RUN_REQUEST = "testingModuleCancelTestRunRequest", B.TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE =
 "testingModuleCancelTestRunResponse", B))(xl || {});
 var {
-  CHANNEL_WS_DISCONNECT: uk,
-  CHANNEL_CREATED: ck,
-  CONFIG_ERROR: pk,
-  CREATE_NEW_STORYFILE_REQUEST: dk,
-  CREATE_NEW_STORYFILE_RESPONSE: fk,
-  CURRENT_STORY_WAS_SET: mk,
-  DOCS_PREPARED: hk,
-  DOCS_RENDERED: gk,
-  FILE_COMPONENT_SEARCH_REQUEST: yk,
-  FILE_COMPONENT_SEARCH_RESPONSE: bk,
-  FORCE_RE_RENDER: vk,
-  FORCE_REMOUNT: xk,
-  GLOBALS_UPDATED: Sk,
-  NAVIGATE_URL: Ik,
-  PLAY_FUNCTION_THREW_EXCEPTION: Ek,
-  UNHANDLED_ERRORS_WHILE_PLAYING: _k,
-  PRELOAD_ENTRIES: wk,
-  PREVIEW_BUILDER_PROGRESS: Tk,
-  PREVIEW_KEYDOWN: Ck,
-  REGISTER_SUBSCRIPTION: kk,
-  RESET_STORY_ARGS: Ok,
-  SELECT_STORY: Pk,
-  SET_CONFIG: Ak,
-  SET_CURRENT_STORY: Dk,
-  SET_FILTER: Mk,
-  SET_GLOBALS: Lk,
-  SET_INDEX: Nk,
-  SET_STORIES: Rk,
-  SHARED_STATE_CHANGED: Fk,
-  SHARED_STATE_SET: Hk,
-  STORIES_COLLAPSE_ALL: Bk,
-  STORIES_EXPAND_ALL: zk,
-  STORY_ARGS_UPDATED: Wk,
-  STORY_CHANGED: jk,
-  STORY_ERRORED: Vk,
-  STORY_INDEX_INVALIDATED: Kk,
-  STORY_MISSING: $k,
+  CHANNEL_WS_DISCONNECT: ck,
+  CHANNEL_CREATED: pk,
+  CONFIG_ERROR: dk,
+  CREATE_NEW_STORYFILE_REQUEST: fk,
+  CREATE_NEW_STORYFILE_RESPONSE: mk,
+  CURRENT_STORY_WAS_SET: hk,
+  DOCS_PREPARED: gk,
+  DOCS_RENDERED: yk,
+  FILE_COMPONENT_SEARCH_REQUEST: bk,
+  FILE_COMPONENT_SEARCH_RESPONSE: vk,
+  FORCE_RE_RENDER: xk,
+  FORCE_REMOUNT: Sk,
+  GLOBALS_UPDATED: Ik,
+  NAVIGATE_URL: Ek,
+  PLAY_FUNCTION_THREW_EXCEPTION: _k,
+  UNHANDLED_ERRORS_WHILE_PLAYING: wk,
+  PRELOAD_ENTRIES: Tk,
+  PREVIEW_BUILDER_PROGRESS: Ck,
+  PREVIEW_KEYDOWN: kk,
+  REGISTER_SUBSCRIPTION: Ok,
+  RESET_STORY_ARGS: Pk,
+  SELECT_STORY: Ak,
+  SET_CONFIG: Dk,
+  SET_CURRENT_STORY: Mk,
+  SET_FILTER: Lk,
+  SET_GLOBALS: Nk,
+  SET_INDEX: Rk,
+  SET_STORIES: Fk,
+  SHARED_STATE_CHANGED: Hk,
+  SHARED_STATE_SET: Bk,
+  STORIES_COLLAPSE_ALL: zk,
+  STORIES_EXPAND_ALL: Wk,
+  STORY_ARGS_UPDATED: jk,
+  STORY_CHANGED: Vk,
+  STORY_ERRORED: Kk,
+  STORY_INDEX_INVALIDATED: $k,
+  STORY_MISSING: Uk,
   STORY_PREPARED: Sl,
-  STORY_RENDER_PHASE_CHANGED: Uk,
-  STORY_RENDERED: Gk,
-  STORY_FINISHED: Yk,
-  STORY_SPECIFIED: qk,
-  STORY_THREW_EXCEPTION: Qk,
-  STORY_UNCHANGED: Xk,
-  UPDATE_GLOBALS: Zk,
-  UPDATE_QUERY_PARAMS: Jk,
-  UPDATE_STORY_ARGS: eO,
-  REQUEST_WHATS_NEW_DATA: tO,
-  RESULT_WHATS_NEW_DATA: oO,
-  SET_WHATS_NEW_CACHE: rO,
-  TOGGLE_WHATS_NEW_NOTIFICATIONS: nO,
-  TELEMETRY_ERROR: iO,
-  SAVE_STORY_REQUEST: sO,
-  SAVE_STORY_RESPONSE: aO,
-  ARGTYPES_INFO_REQUEST: lO,
-  ARGTYPES_INFO_RESPONSE: uO,
-  TESTING_MODULE_CRASH_REPORT: cO,
-  TESTING_MODULE_PROGRESS_REPORT: pO,
-  TESTING_MODULE_RUN_REQUEST: dO,
-  TESTING_MODULE_RUN_ALL_REQUEST: fO,
-  TESTING_MODULE_CANCEL_TEST_RUN_REQUEST: mO,
-  TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE: hO
+  STORY_RENDER_PHASE_CHANGED: Gk,
+  STORY_RENDERED: Yk,
+  STORY_FINISHED: qk,
+  STORY_SPECIFIED: Qk,
+  STORY_THREW_EXCEPTION: Xk,
+  STORY_UNCHANGED: Zk,
+  UPDATE_GLOBALS: Jk,
+  UPDATE_QUERY_PARAMS: eO,
+  UPDATE_STORY_ARGS: tO,
+  REQUEST_WHATS_NEW_DATA: oO,
+  RESULT_WHATS_NEW_DATA: rO,
+  SET_WHATS_NEW_CACHE: nO,
+  TOGGLE_WHATS_NEW_NOTIFICATIONS: iO,
+  TELEMETRY_ERROR: sO,
+  SAVE_STORY_REQUEST: aO,
+  SAVE_STORY_RESPONSE: lO,
+  ARGTYPES_INFO_REQUEST: uO,
+  ARGTYPES_INFO_RESPONSE: cO,
+  TESTING_MODULE_CRASH_REPORT: pO,
+  TESTING_MODULE_PROGRESS_REPORT: dO,
+  TESTING_MODULE_RUN_REQUEST: fO,
+  TESTING_MODULE_RUN_ALL_REQUEST: mO,
+  TESTING_MODULE_CANCEL_TEST_RUN_REQUEST: hO,
+  TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE: gO
 } = xl;
 
 // src/manager/components/panel/Panel.tsx
@@ -4539,11 +4539,11 @@ var ou = x.main({
     height: "100%"
   },
   ({ show: e }) => ({ display: e ? "grid" : "none" })
-), cA = x(zo)({
+), pA = x(zo)({
   color: "inherit",
   textDecoration: "inherit",
   display: "inline-block"
-}), pA = x.span({
+}), dA = x.span({
   // Hides full screen icon at mobile breakpoint defined in app.js
   "@media (max-width: 599px)": {
     display: "none"
@@ -6159,7 +6159,7 @@ var Dt = /* @__PURE__ */ a((e, t = !1) => {
 (e) => e.replaceAll(/(\s|-|_)/gi, ""), "removeNoiseFromName"), Zu = /* @__PURE__ */ a((e, t) => Uu(e) === Uu(t), "isStoryHoistable");
 
 // global-externals:@storybook/core/client-logger
-var pM = __STORYBOOK_CLIENT_LOGGER__, { deprecate: dM, logger: Ju, once: fM, pretty: mM } = __STORYBOOK_CLIENT_LOGGER__;
+var dM = __STORYBOOK_CLIENT_LOGGER__, { deprecate: fM, logger: Ju, once: mM, pretty: hM } = __STORYBOOK_CLIENT_LOGGER__;
 
 // src/manager/components/sidebar/Loader.tsx
 var ec = [0, 0, 1, 1, 2, 3, 3, 3, 1, 1, 1, 2, 2, 2, 3], eg = x.div(
@@ -8926,7 +8926,7 @@ function xy(e) {
   return o;
 }
 a(xy, "getItemIndexByCharacterKey");
-var dR = Ft(Ft({}, Dp), { items: q.default.array.isRequired, isItemDisabled: q.default.func }), Sy = Ft(Ft({}, Eo), { isItemDisabled: /* @__PURE__ */ a(
+var fR = Ft(Ft({}, Dp), { items: q.default.array.isRequired, isItemDisabled: q.default.func }), Sy = Ft(Ft({}, Eo), { isItemDisabled: /* @__PURE__ */ a(
 function() {
   return !1;
 }, "isItemDisabled") }), Iy = Fe, Wr = 0, fi = 1, mi = 2, $r = 3, hi = 4, gi = 5, yi = 6, bi = 7, vi = 8, xi = 9, Si = 10, Ur = 11, Lp = 12,
@@ -9322,7 +9322,7 @@ function ky(e) {
   });
 }
 a(ky, "getInitialState$1");
-var fR = G({}, Dp, {
+var mR = G({}, Dp, {
   items: q.default.array.isRequired,
   isItemDisabled: q.default.func,
   inputValue: q.default.string,
@@ -9725,7 +9725,7 @@ function Hy(e, t) {
   return e.selectedItems === t.selectedItems && e.activeIndex === t.activeIndex;
 }
 a(Hy, "isStateEqual");
-var mR = {
+var hR = {
   stateReducer: zr.stateReducer,
   itemToKey: zr.itemToKey,
   environment: zr.environment,

package/dist/storybook/stories-Badge-stories.52b61cf3.iframe.bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories-Badge-stories.52b61cf3.iframe.bundle.js","mappings":";;AA0BA;;AAQA;;AAEA","sources":["webpack://@brightspot/ui/./src/stories/Badge.ts"],"sourcesContent":["import { html } from 'lit'\nimport type { ThemeColors } from '../tailwind-plugin-theme'\n\nexport interface BadgeProps {\n  color?: ThemeColors\n  affordance?: 'dot' | 'icon'\n  size?: 'sm' | 'md' | 'lg'\n  label: string\n}\n\nexport const Badge = ({\n  color = 'gray',\n  affordance,\n  size = 'sm',\n  label,\n}: BadgeProps) => {\n  let dot = false\n  let icon = false\n  if (affordance === 'dot') {\n    dot = true\n  } else if (affordance === 'icon') {\n    icon = true\n  }\n\n  return html`\n    <div\n      class=${[\n        'btu-badge',\n        `btu-badge-${size}`,\n        `btu-badge-${color}`,\n        dot ? 'before:size-2 before:rounded-lg before:bg-[currentColor]' : '',\n        icon ? 'before:btu-icon before:btu-icon-xs before:btu-icon-salad' : '',\n      ].join(' ')}\n    >\n      ${label}\n    </div>\n  `\n}\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"stories-Badge-stories.52b61cf3.iframe.bundle.js","mappings":";;AA0BA;;AAQA;;ACNA","sources":["webpack://@brightspot/ui/./src/stories/Badge.ts","webpack://@brightspot/ui/./src/stories/Badge.stories.ts"],"sourcesContent":["import { html } from 'lit'\nimport type { ThemeColors } from '../tailwind-plugin-theme'\n\nexport interface BadgeProps {\n  color?: ThemeColors\n  affordance?: 'dot' | 'icon'\n  size?: 'sm' | 'md' | 'lg'\n  label: string\n}\n\nexport const Badge = ({\n  color = 'gray',\n  affordance,\n  size = 'sm',\n  label,\n}: BadgeProps) => {\n  let dot = false\n  let icon = false\n  if (affordance === 'dot') {\n    dot = true\n  } else if (affordance === 'icon') {\n    icon = true\n  }\n\n  return html`\n    <div\n      class=${[\n        'btu-badge',\n        `btu-badge-${size}`,\n        `btu-badge-${color}`,\n        dot ? 'before:size-2 before:rounded-lg before:bg-[currentColor]' : '',\n        icon ? 'before:btu-icon before:btu-icon-xs before:btu-icon-salad' : '',\n      ].join(' ')}\n    >\n      ${label}\n    </div>\n  `\n}\n","import type { Meta, StoryObj } from '@storybook/web-components'\nimport type { BadgeProps } from './Badge'\nimport { Badge } from './Badge'\nimport { ThemeColors } from '../tailwind-plugin-theme'\n\nconst colorOptions: readonly ThemeColors[] = [\n  'black',\n  'white',\n  'primary',\n  'teal',\n  'gray',\n  'purple',\n  'rose',\n  'error',\n  'warning',\n  'success',\n] as const\n\nconst meta: Meta<BadgeProps> = {\n  title: 'Components/Badge',\n  component: 'btu-badge',\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      subtitle: `btu-badge`,\n    },\n    controls: { expanded: true },\n  },\n  render: (args) => Badge(args),\n  argTypes: {\n    color: {\n      control: { type: 'select' },\n      options: colorOptions,\n    },\n    affordance: {\n      control: { type: 'select' },\n      options: ['dot', 'icon'],\n      description: 'Display a design affordance next to the label',\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n  },\n  args: {\n    color: 'purple',\n    affordance: 'dot',\n    size: 'sm',\n    label: 'Badge',\n  },\n}\nexport default meta\n\ntype Story = StoryObj<BadgeProps>\nexport const Default: Story = {\n  args: {},\n}\n"],"names":[],"sourceRoot":""}

package/dist/storybook/stories-Button-stories.777d0529.iframe.bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories-Button-stories.777d0529.iframe.bundle.js","mappings":";;;AAmCA;;AAUA;;AAEA","sources":["webpack://@brightspot/ui/./src/stories/Button.ts"],"sourcesContent":["import { html } from 'lit'\nimport type { ThemeColors } from '../tailwind-plugin-theme'\n\nexport interface ButtonProps {\n  color?: ThemeColors\n  /** Is the button depressed or not? */\n  pressed?: boolean\n  /** Should the button have a background? */\n  fill?: boolean\n  /** Should the button have a container? */\n  contained?: boolean\n  /** Should the button be outlined? */\n  outlined?: boolean\n  /** How large should the button be? */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n  label: string\n}\n\nexport const Button = ({\n  color = 'primary',\n  pressed,\n  fill,\n  contained,\n  outlined,\n  size = 'sm',\n  label,\n}: ButtonProps) => {\n  const depressed = pressed ? 'btu-button-pressed' : ''\n  const filled = fill ? 'btu-button-fill' : 'btu-button-fill-none'\n  const container = contained ? '' : 'btu-button-container-none'\n  const outline = outlined ? 'btu-button-outline' : ''\n\n  return html`\n    <button\n      type=\"button\"\n      class=${[\n        'btu-button',\n        `btu-button-${color}`,\n        `btu-button-${size}`,\n        filled,\n        container,\n        outline,\n        depressed,\n      ].join(' ')}\n    >\n      ${label}\n    </button>\n  `\n}\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"stories-Button-stories.777d0529.iframe.bundle.js","mappings":";;;AAmCA;;AAUA;;ACjBA","sources":["webpack://@brightspot/ui/./src/stories/Button.ts","webpack://@brightspot/ui/./src/stories/Button.stories.ts"],"sourcesContent":["import { html } from 'lit'\nimport type { ThemeColors } from '../tailwind-plugin-theme'\n\nexport interface ButtonProps {\n  color?: ThemeColors\n  /** Is the button depressed or not? */\n  pressed?: boolean\n  /** Should the button have a background? */\n  fill?: boolean\n  /** Should the button have a container? */\n  contained?: boolean\n  /** Should the button be outlined? */\n  outlined?: boolean\n  /** How large should the button be? */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n  label: string\n}\n\nexport const Button = ({\n  color = 'primary',\n  pressed,\n  fill,\n  contained,\n  outlined,\n  size = 'sm',\n  label,\n}: ButtonProps) => {\n  const depressed = pressed ? 'btu-button-pressed' : ''\n  const filled = fill ? 'btu-button-fill' : 'btu-button-fill-none'\n  const container = contained ? '' : 'btu-button-container-none'\n  const outline = outlined ? 'btu-button-outline' : ''\n\n  return html`\n    <button\n      type=\"button\"\n      class=${[\n        'btu-button',\n        `btu-button-${color}`,\n        `btu-button-${size}`,\n        filled,\n        container,\n        outline,\n        depressed,\n      ].join(' ')}\n    >\n      ${label}\n    </button>\n  `\n}\n","import type { Meta, StoryObj } from '@storybook/web-components'\nimport type { ButtonProps } from './Button'\nimport { Button } from './Button'\nimport { ThemeColors } from '../tailwind-plugin-theme'\n\nconst colorOptions: readonly ThemeColors[] = [\n  'black',\n  'white',\n  'primary',\n  'teal',\n  'gray',\n  'purple',\n  'rose',\n  'error',\n  'warning',\n  'success',\n] as const\n\nconst meta: Meta<ButtonProps> = {\n  title: 'Components/Button',\n  component: 'btu-button',\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      subtitle: `btu-button`,\n    },\n    controls: { expanded: true },\n  },\n  render: (args) => Button(args),\n  argTypes: {\n    size: {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg', 'xl', '2xl'],\n    },\n    color: {\n      control: { type: 'select' },\n      options: colorOptions,\n    },\n    pressed: {\n      control: { type: 'boolean' },\n      description: 'Is the button pressed?',\n    },\n    fill: {\n      control: { type: 'boolean' },\n      description: 'Is the button filled?',\n    },\n    contained: {\n      control: { type: 'boolean' },\n      description: 'Does the button have a container?',\n    },\n    outlined: {\n      control: { type: 'boolean' },\n      description: 'Is the button outlined?',\n    },\n  },\n  args: {\n    color: 'primary',\n    label: 'Button',\n    pressed: false,\n    fill: true,\n    contained: true,\n    outlined: false,\n    size: 'md',\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<ButtonProps>\nexport const Default: Story = {\n  args: {},\n}\n"],"names":[],"sourceRoot":""}

package/dist/storybook/{stories-Colors-stories.324d20d0.iframe.bundle.js → stories-Colors-stories.927fecc8.iframe.bundle.js}

@@ -23,9 +23,9 @@
         </div>
         <div></div>
         <div class="grid h-10 grid-cols-11 gap-1.5 sm:gap-4">
-          ${args.palette?.map((color=>lit.qy`<div class="${color} size-full"></div>`))}
+          ${args.palette?.map(color=>lit.qy`<div class="${color} size-full"></div>`)}
         </div>
       </div>
     </div>
   `)(args)},Primary={parameters:{docs:{description:{story:"Used for primary call to actions, visual UI elements, active and clicked states, and focused containers."}}},args:{palette:["bg-primary-25","bg-primary-50","bg-primary-100","bg-primary-200","bg-primary-300","bg-primary-400","bg-primary-500","bg-primary-600","bg-primary-700","bg-primary-800","bg-primary-900"]}},Success={parameters:{docs:{description:{story:"Success colors communicate a positive action, postive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green."}}},args:{palette:["bg-success-25","bg-success-50","bg-success-100","bg-success-200","bg-success-300","bg-success-400","bg-success-500","bg-success-600","bg-success-700","bg-success-800","bg-success-900"]}},Warning={parameters:{docs:{description:{story:'Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users\' attention.'}}},args:{palette:["bg-warning-25","bg-warning-50","bg-warning-100","bg-warning-200","bg-warning-300","bg-warning-400","bg-warning-500","bg-warning-600","bg-warning-700","bg-warning-800","bg-warning-900"]}},Error={parameters:{docs:{description:{story:'Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as deleting or archiving an object.'}}},args:{palette:["bg-error-25","bg-error-50","bg-error-100","bg-error-200","bg-error-300","bg-error-400","bg-error-500","bg-error-600","bg-error-700","bg-error-800","bg-error-900"]}},Gray={parameters:{docs:{description:{story:"Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray."}}},args:{palette:["bg-gray-25","bg-gray-50","bg-gray-100","bg-gray-200","bg-gray-300","bg-gray-400","bg-gray-500","bg-gray-600","bg-gray-700","bg-gray-800","bg-gray-900"]}},__namedExportsOrder=["Primary","Success","Warning","Error","Gray"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  parameters: {\n    docs: {\n      description: {\n        story: 'Used for primary call to actions, visual UI elements, active and clicked states, and focused containers.'\n      }\n    }\n  },\n  args: {\n    palette: ['bg-primary-25', 'bg-primary-50', 'bg-primary-100', 'bg-primary-200', 'bg-primary-300', 'bg-primary-400', 'bg-primary-500', 'bg-primary-600', 'bg-primary-700', 'bg-primary-800', 'bg-primary-900']\n  }\n}",...Primary.parameters?.docs?.source}}},Success.parameters={...Success.parameters,docs:{...Success.parameters?.docs,source:{originalSource:"{\n  parameters: {\n    docs: {\n      description: {\n        story: \"Success colors communicate a positive action, postive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.\"\n      }\n    }\n  },\n  args: {\n    palette: ['bg-success-25', 'bg-success-50', 'bg-success-100', 'bg-success-200', 'bg-success-300', 'bg-success-400', 'bg-success-500', 'bg-success-600', 'bg-success-700', 'bg-success-800', 'bg-success-900']\n  }\n}",...Success.parameters?.docs?.source}}},Warning.parameters={...Warning.parameters,docs:{...Warning.parameters?.docs,source:{originalSource:"{\n  parameters: {\n    docs: {\n      description: {\n        story: 'Warning colors can communicate that an action is potentially destructive or \"on-hold\". These colors are commonly used in confirmations to grab the users\\' attention.'\n      }\n    }\n  },\n  args: {\n    palette: ['bg-warning-25', 'bg-warning-50', 'bg-warning-100', 'bg-warning-200', 'bg-warning-300', 'bg-warning-400', 'bg-warning-500', 'bg-warning-600', 'bg-warning-700', 'bg-warning-800', 'bg-warning-900']\n  }\n}",...Warning.parameters?.docs?.source}}},Error.parameters={...Error.parameters,docs:{...Error.parameters?.docs,source:{originalSource:"{\n  parameters: {\n    docs: {\n      description: {\n        story: 'Error colors are used across error states and in \"destructive\" actions. They communicate a destructive/negative action, such as deleting or archiving an object.'\n      }\n    }\n  },\n  args: {\n    palette: ['bg-error-25', 'bg-error-50', 'bg-error-100', 'bg-error-200', 'bg-error-300', 'bg-error-400', 'bg-error-500', 'bg-error-600', 'bg-error-700', 'bg-error-800', 'bg-error-900']\n  }\n}",...Error.parameters?.docs?.source}}},Gray.parameters={...Gray.parameters,docs:{...Gray.parameters?.docs,source:{originalSource:"{\n  parameters: {\n    docs: {\n      description: {\n        story: 'Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.'\n      }\n    }\n  },\n  args: {\n    palette: ['bg-gray-25', 'bg-gray-50', 'bg-gray-100', 'bg-gray-200', 'bg-gray-300', 'bg-gray-400', 'bg-gray-500', 'bg-gray-600', 'bg-gray-700', 'bg-gray-800', 'bg-gray-900']\n  }\n}",...Gray.parameters?.docs?.source}}}}}]);
-//# sourceMappingURL=stories-Colors-stories.324d20d0.iframe.bundle.js.map
+//# sourceMappingURL=stories-Colors-stories.927fecc8.iframe.bundle.js.map

package/dist/storybook/{stories-Colors-stories.324d20d0.iframe.bundle.js.map → stories-Colors-stories.927fecc8.iframe.bundle.js.map}

@@ -1 +1 @@
-{"version":3,"file":"stories-Colors-stories.324d20d0.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BA;;;;ACdA","sources":["webpack://@brightspot/ui/./src/stories/Colors.ts","webpack://@brightspot/ui/./src/stories/Colors.stories.ts"],"sourcesContent":["import { html } from 'lit'\n\nexport const Colors = (args: ColorProps) => {\n  return html`\n    <div class=\"my-10\">\n      <div\n        class=\"not-prose grid grid-cols-[auto_minmax(0,_1fr)] items-center gap-4\"\n      >\n        <div class=\"z-9 sticky top-28 bg-white lg:top-14 dark:bg-gray-950\">\n          &nbsp;\n        </div>\n        <div\n          class=\"z-9 top-28 col-start-2 grid grid-cols-11 justify-items-center gap-1.5 bg-white font-medium text-gray-950 *:rotate-180 *:[writing-mode:vertical-lr] max-sm:py-1 sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb] lg:top-14 dark:bg-gray-950 dark:text-white\"\n        >\n          <div>25</div>\n          <div>50</div>\n          <div>100</div>\n          <div>200</div>\n          <div>300</div>\n          <div>400</div>\n          <div>500</div>\n          <div>600</div>\n          <div>700</div>\n          <div>800</div>\n          <div>900</div>\n        </div>\n        <div></div>\n        <div class=\"grid h-10 grid-cols-11 gap-1.5 sm:gap-4\">\n          ${args.palette?.map(\n            (color) => html`<div class=\"${color} size-full\"></div>`,\n          )}\n        </div>\n      </div>\n    </div>\n  `\n}\n\nexport interface ColorProps {\n  palette?: Array<\n    | 'bg-primary-25'\n    | 'bg-primary-50'\n    | 'bg-primary-100'\n    | 'bg-primary-200'\n    | 'bg-primary-300'\n    | 'bg-primary-400'\n    | 'bg-primary-500'\n    | 'bg-primary-600'\n    | 'bg-primary-700'\n    | 'bg-primary-800'\n    | 'bg-primary-900'\n    | 'bg-success-25'\n    | 'bg-success-50'\n    | 'bg-success-100'\n    | 'bg-success-200'\n    | 'bg-success-300'\n    | 'bg-success-400'\n    | 'bg-success-500'\n    | 'bg-success-600'\n    | 'bg-success-700'\n    | 'bg-success-800'\n    | 'bg-success-900'\n    | 'bg-warning-25'\n    | 'bg-warning-50'\n    | 'bg-warning-100'\n    | 'bg-warning-200'\n    | 'bg-warning-300'\n    | 'bg-warning-400'\n    | 'bg-warning-500'\n    | 'bg-warning-600'\n    | 'bg-warning-700'\n    | 'bg-warning-800'\n    | 'bg-warning-900'\n    | 'bg-error-25'\n    | 'bg-error-50'\n    | 'bg-error-100'\n    | 'bg-error-200'\n    | 'bg-error-300'\n    | 'bg-error-400'\n    | 'bg-error-500'\n    | 'bg-error-600'\n    | 'bg-error-700'\n    | 'bg-error-800'\n    | 'bg-error-900'\n    | 'bg-gray-25'\n    | 'bg-gray-50'\n    | 'bg-gray-100'\n    | 'bg-gray-200'\n    | 'bg-gray-300'\n    | 'bg-gray-400'\n    | 'bg-gray-500'\n    | 'bg-gray-600'\n    | 'bg-gray-700'\n    | 'bg-gray-800'\n    | 'bg-gray-900'\n  >\n}\n","import type { Meta, StoryObj } from '@storybook/web-components'\nimport { Colors } from './Colors'\nimport type { ColorProps } from './Colors'\n\nconst meta: Meta<ColorProps> = {\n  title: 'Design System/Colors',\n  component: 'btu-theme',\n  tags: ['autodocs'],\n  parameters: {\n    controls: { exclude: ['palette'] },\n    docs: {\n      subtitle: `We've replaced the default Tailwind colors with our own palette to match the design vocabulary. Specifically replacing 'blue' with 'primary', 'green' with 'success', 'yellow' with 'warning', and 'red' with 'error'. For example, instead of 'bg-blue-400', use 'bg-primary-400'.`,\n    },\n  },\n  render: (args) => Colors(args),\n}\n\nexport default meta\n\ntype Story = StoryObj<ColorProps>\n\nexport const Primary: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Used for primary call to actions, visual UI elements, active and clicked states, and focused containers.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-primary-25',\n      'bg-primary-50',\n      'bg-primary-100',\n      'bg-primary-200',\n      'bg-primary-300',\n      'bg-primary-400',\n      'bg-primary-500',\n      'bg-primary-600',\n      'bg-primary-700',\n      'bg-primary-800',\n      'bg-primary-900',\n    ],\n  },\n}\nexport const Success: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Success colors communicate a positive action, postive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.\",\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-success-25',\n      'bg-success-50',\n      'bg-success-100',\n      'bg-success-200',\n      'bg-success-300',\n      'bg-success-400',\n      'bg-success-500',\n      'bg-success-600',\n      'bg-success-700',\n      'bg-success-800',\n      'bg-success-900',\n    ],\n  },\n}\nexport const Warning: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Warning colors can communicate that an action is potentially destructive or \"on-hold\". These colors are commonly used in confirmations to grab the users\\' attention.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-warning-25',\n      'bg-warning-50',\n      'bg-warning-100',\n      'bg-warning-200',\n      'bg-warning-300',\n      'bg-warning-400',\n      'bg-warning-500',\n      'bg-warning-600',\n      'bg-warning-700',\n      'bg-warning-800',\n      'bg-warning-900',\n    ],\n  },\n}\nexport const Error: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Error colors are used across error states and in \"destructive\" actions. They communicate a destructive/negative action, such as deleting or archiving an object.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-error-25',\n      'bg-error-50',\n      'bg-error-100',\n      'bg-error-200',\n      'bg-error-300',\n      'bg-error-400',\n      'bg-error-500',\n      'bg-error-600',\n      'bg-error-700',\n      'bg-error-800',\n      'bg-error-900',\n    ],\n  },\n}\nexport const Gray: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-gray-25',\n      'bg-gray-50',\n      'bg-gray-100',\n      'bg-gray-200',\n      'bg-gray-300',\n      'bg-gray-400',\n      'bg-gray-500',\n      'bg-gray-600',\n      'bg-gray-700',\n      'bg-gray-800',\n      'bg-gray-900',\n    ],\n  },\n}\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"stories-Colors-stories.927fecc8.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BA;;;;ACdA","sources":["webpack://@brightspot/ui/./src/stories/Colors.ts","webpack://@brightspot/ui/./src/stories/Colors.stories.ts"],"sourcesContent":["import { html } from 'lit'\n\nexport const Colors = (args: ColorProps) => {\n  return html`\n    <div class=\"my-10\">\n      <div\n        class=\"not-prose grid grid-cols-[auto_minmax(0,_1fr)] items-center gap-4\"\n      >\n        <div class=\"z-9 sticky top-28 bg-white lg:top-14 dark:bg-gray-950\">\n          &nbsp;\n        </div>\n        <div\n          class=\"z-9 top-28 col-start-2 grid grid-cols-11 justify-items-center gap-1.5 bg-white font-medium text-gray-950 *:rotate-180 *:[writing-mode:vertical-lr] max-sm:py-1 sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb] lg:top-14 dark:bg-gray-950 dark:text-white\"\n        >\n          <div>25</div>\n          <div>50</div>\n          <div>100</div>\n          <div>200</div>\n          <div>300</div>\n          <div>400</div>\n          <div>500</div>\n          <div>600</div>\n          <div>700</div>\n          <div>800</div>\n          <div>900</div>\n        </div>\n        <div></div>\n        <div class=\"grid h-10 grid-cols-11 gap-1.5 sm:gap-4\">\n          ${args.palette?.map(\n            (color) => html`<div class=\"${color} size-full\"></div>`,\n          )}\n        </div>\n      </div>\n    </div>\n  `\n}\n\nexport interface ColorProps {\n  palette?: Array<\n    | 'bg-primary-25'\n    | 'bg-primary-50'\n    | 'bg-primary-100'\n    | 'bg-primary-200'\n    | 'bg-primary-300'\n    | 'bg-primary-400'\n    | 'bg-primary-500'\n    | 'bg-primary-600'\n    | 'bg-primary-700'\n    | 'bg-primary-800'\n    | 'bg-primary-900'\n    | 'bg-success-25'\n    | 'bg-success-50'\n    | 'bg-success-100'\n    | 'bg-success-200'\n    | 'bg-success-300'\n    | 'bg-success-400'\n    | 'bg-success-500'\n    | 'bg-success-600'\n    | 'bg-success-700'\n    | 'bg-success-800'\n    | 'bg-success-900'\n    | 'bg-warning-25'\n    | 'bg-warning-50'\n    | 'bg-warning-100'\n    | 'bg-warning-200'\n    | 'bg-warning-300'\n    | 'bg-warning-400'\n    | 'bg-warning-500'\n    | 'bg-warning-600'\n    | 'bg-warning-700'\n    | 'bg-warning-800'\n    | 'bg-warning-900'\n    | 'bg-error-25'\n    | 'bg-error-50'\n    | 'bg-error-100'\n    | 'bg-error-200'\n    | 'bg-error-300'\n    | 'bg-error-400'\n    | 'bg-error-500'\n    | 'bg-error-600'\n    | 'bg-error-700'\n    | 'bg-error-800'\n    | 'bg-error-900'\n    | 'bg-gray-25'\n    | 'bg-gray-50'\n    | 'bg-gray-100'\n    | 'bg-gray-200'\n    | 'bg-gray-300'\n    | 'bg-gray-400'\n    | 'bg-gray-500'\n    | 'bg-gray-600'\n    | 'bg-gray-700'\n    | 'bg-gray-800'\n    | 'bg-gray-900'\n  >\n}\n","import type { Meta, StoryObj } from '@storybook/web-components'\nimport { Colors } from './Colors'\nimport type { ColorProps } from './Colors'\n\nconst meta: Meta<ColorProps> = {\n  title: 'Design System/Colors',\n  component: 'btu-theme',\n  tags: ['autodocs'],\n  parameters: {\n    controls: { exclude: ['palette'] },\n    docs: {\n      subtitle: `We've replaced the default Tailwind colors with our own palette to match the design vocabulary. Specifically replacing 'blue' with 'primary', 'green' with 'success', 'yellow' with 'warning', and 'red' with 'error'. For example, instead of 'bg-blue-400', use 'bg-primary-400'.`,\n    },\n  },\n  render: (args) => Colors(args),\n}\n\nexport default meta\n\ntype Story = StoryObj<ColorProps>\n\nexport const Primary: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Used for primary call to actions, visual UI elements, active and clicked states, and focused containers.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-primary-25',\n      'bg-primary-50',\n      'bg-primary-100',\n      'bg-primary-200',\n      'bg-primary-300',\n      'bg-primary-400',\n      'bg-primary-500',\n      'bg-primary-600',\n      'bg-primary-700',\n      'bg-primary-800',\n      'bg-primary-900',\n    ],\n  },\n}\nexport const Success: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Success colors communicate a positive action, postive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.\",\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-success-25',\n      'bg-success-50',\n      'bg-success-100',\n      'bg-success-200',\n      'bg-success-300',\n      'bg-success-400',\n      'bg-success-500',\n      'bg-success-600',\n      'bg-success-700',\n      'bg-success-800',\n      'bg-success-900',\n    ],\n  },\n}\nexport const Warning: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Warning colors can communicate that an action is potentially destructive or \"on-hold\". These colors are commonly used in confirmations to grab the users\\' attention.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-warning-25',\n      'bg-warning-50',\n      'bg-warning-100',\n      'bg-warning-200',\n      'bg-warning-300',\n      'bg-warning-400',\n      'bg-warning-500',\n      'bg-warning-600',\n      'bg-warning-700',\n      'bg-warning-800',\n      'bg-warning-900',\n    ],\n  },\n}\nexport const Error: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Error colors are used across error states and in \"destructive\" actions. They communicate a destructive/negative action, such as deleting or archiving an object.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-error-25',\n      'bg-error-50',\n      'bg-error-100',\n      'bg-error-200',\n      'bg-error-300',\n      'bg-error-400',\n      'bg-error-500',\n      'bg-error-600',\n      'bg-error-700',\n      'bg-error-800',\n      'bg-error-900',\n    ],\n  },\n}\nexport const Gray: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-gray-25',\n      'bg-gray-50',\n      'bg-gray-100',\n      'bg-gray-200',\n      'bg-gray-300',\n      'bg-gray-400',\n      'bg-gray-500',\n      'bg-gray-600',\n      'bg-gray-700',\n      'bg-gray-800',\n      'bg-gray-900',\n    ],\n  },\n}\n"],"names":[],"sourceRoot":""}

package/dist/storybook/stories-Icon-stories.f2eb249f.iframe.bundle.js

@@ -0,0 +1,8 @@
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[840],{"./src/stories/Icon.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Icon_stories});var lit=__webpack_require__("./node_modules/lit/index.js"),info=__webpack_require__("./node_modules/lucide-static/font/info.json"),lucide_static=__webpack_require__("./node_modules/lucide-static/dist/esm/lucide-static.js");const symbols=/[\r\n%#()<>?[\\\]^`{|}]/g;function getIcon(iconName){try{const kebabName=iconName.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),pascalName=function kebabToPascal(str){return str.split("-").map(word=>word.charAt(0).toUpperCase()+word.slice(1)).join("")}(kebabName);if(lucide_static[pascalName]){const encodedSvg=function encodeSVG(data){return(data=(data=(data=data.replace(/"/g,"'")).replace(/>\s{1,}</g,"><")).replace(/\s{2,}/g," ")).replace(symbols,encodeURIComponent)}(function addNameSpaceXML(data){return data.indexOf("http://www.w3.org/2000/svg")<0&&(data=data.replace(/<svg/g,"<svg xmlns='http://www.w3.org/2000/svg'")),data}(lucide_static[pascalName]));return{compat:info[kebabName]?.encodedCode||"",iconSvg:encodedSvg}}}catch(e){console.error("Error loading Lucide icon ${iconName}:",e)}}const Icon_stories={title:"Components/Icon",component:"btu-icon",tags:["autodocs"],parameters:{docs:{subtitle:"We use Lucide Icons: https://lucide.dev/icons/. All strokes in these icons have been converted to single vectors so color overrides are respected within variants. We recommend attaching icon classes to before/after pseudo-elements, like so: `before:btu-icon before:btu-icon-smile`."},controls:{expanded:!0}},render:args=>(({name,size="md"})=>{let data,kebabName,icon="";return name?(data=getIcon(name),kebabName=name.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()):icon="before:btu-icon-smile",lit.qy`
+    <div
+      style=${`--compat-icon:'${info[kebabName]?.encodedCode||""}';\n      --Icon-svg: url("data:image/svg+xml,${data?.iconSvg||""}");\n      --compat-icon-via-mask: url("data:image/svg+xml,${data?.iconSvg}");`}
+      data-icon=${name?`${name}`:""}
+      class=${["before:btu-icon",`before:btu-icon-${size}`,icon].join(" ")}
+    ></div>
+  `})(args),argTypes:{size:{control:{type:"select"},description:"Icon size. Works with arbitrary values like: `before:btu-icon-[10.5rem]`",options:["xs","sm","md","lg","xl"]},name:{control:{type:"text"},description:"Name of the icon to display. Try names like `waves`, `salad`, or `star`."}},args:{size:"xl"}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
+//# sourceMappingURL=stories-Icon-stories.f2eb249f.iframe.bundle.js.map

package/dist/storybook/stories-Icon-stories.f2eb249f.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-Icon-stories.f2eb249f.iframe.bundle.js","mappings":";;AA6BA;AAGA;AACA;;ACpBA","sources":["webpack://@brightspot/ui/./src/stories/Icon.ts","webpack://@brightspot/ui/./src/stories/Icon.stories.ts"],"sourcesContent":["import { html } from 'lit'\nimport icons from 'lucide-static/font/info.json'\nimport { getIcon } from '../LucideDynamicLoader'\n\nexport interface IconProps {\n  name?: string\n  /** How large should the icon be?\n      before:btu-icon-xs\n      before:btu-icon-sm\n      before:btu-icon-md\n      before:btu-icon-lg\n      before:btu-icon-xl\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n}\n\nexport const Icon = ({ name, size = 'md' }: IconProps) => {\n  let data\n  let kebabName\n  let icon = ''\n  if (!name) {\n    icon = 'before:btu-icon-smile'\n  } else {\n    data = getIcon(name)\n    kebabName = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n  }\n\n  return html`\n    <div\n      style=${`--compat-icon:'${icons[kebabName as keyof typeof icons]?.encodedCode || ''}';\n      --Icon-svg: url(\"data:image/svg+xml,${data?.iconSvg || ''}\");\n      --compat-icon-via-mask: url(\"data:image/svg+xml,${data?.iconSvg}\");`}\n      data-icon=${name ? `${name}` : ''}\n      class=${['before:btu-icon', `before:btu-icon-${size}`, icon].join(' ')}\n    ></div>\n  `\n}\n","import type { Meta, StoryObj } from '@storybook/web-components'\nimport { Icon, IconProps } from './Icon'\n\nconst meta: Meta<IconProps> = {\n  title: 'Components/Icon',\n  component: 'btu-icon',\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      subtitle: `We use Lucide Icons: https://lucide.dev/icons/. All strokes in these icons have been converted to single vectors so color overrides are respected within variants. We recommend attaching icon classes to before/after pseudo-elements, like so: \\`before:btu-icon before:btu-icon-smile\\`.`,\n    },\n    controls: { expanded: true },\n  },\n  render: (args) => Icon(args),\n  argTypes: {\n    size: {\n      control: { type: 'select' },\n      description:\n        'Icon size. Works with arbitrary values like: `before:btu-icon-[10.5rem]`',\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\n    },\n    name: {\n      control: { type: 'text' },\n      description:\n        'Name of the icon to display. Try names like `waves`, `salad`, or `star`.',\n    },\n  },\n  args: {\n    size: 'xl',\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<IconProps>\nexport const Default: Story = {\n  args: {},\n}\n"],"names":[],"sourceRoot":""}

package/dist/storybook/{stories-ScrollShadow-stories.252ec9e7.iframe.bundle.js → stories-ScrollShadow-stories.ddf1e99b.iframe.bundle.js}

@@ -1,16 +1,16 @@
-"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[264],{"./src/stories/ScrollShadow.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>ScrollShadow_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const ScrollShadow_stories={title:"Components/ScrollShadow",component:"btu-scrollshadow",tags:["autodocs"],parameters:{docs:{subtitle:"This plugin adds shadows to the edges of a scrollable container once the content overflows. The shadows use our gray color palette. You can choose which shade of gray you want. The scroll container must not already use before & after pseudo elements. But, if you need to use before/after modifiers on the container, make sure you also manually set the content property to the `--whitespace` variable. This is a workaround for TWCSS automatically adding a content property to the before/after pseudo-elements, which overrides the `--whitespace` variable by default. Note: this currently only supports x-axis scrolling."},controls:{expanded:!0}},render:args=>(({theme="btu-scrollshadow-25"})=>{const items=new Array(100).fill(0).map(((_,i)=>`Item ${i+1}`));return lit.qy`
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[264],{"./src/stories/ScrollShadow.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>ScrollShadow_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const ScrollShadow_stories={title:"Components/ScrollShadow",component:"btu-scrollshadow",tags:["autodocs"],parameters:{docs:{subtitle:"This plugin adds shadows to the edges of a scrollable container once the content overflows. The shadows use our gray color palette. You can choose which shade of gray you want. The scroll container must not already use before & after pseudo elements. But, if you need to use before/after modifiers on the container, make sure you also manually set the content property to the `--whitespace` variable. This is a workaround for TWCSS automatically adding a content property to the before/after pseudo-elements, which overrides the `--whitespace` variable by default. Note: this currently only supports x-axis scrolling."},controls:{expanded:!0}},render:args=>(({theme="btu-scrollshadow-25"})=>{const items=new Array(100).fill(0).map((_,i)=>`Item ${i+1}`);return lit.qy`
     <style>
       :root {
         --can-scroll:   ;
       }
     </style>
     <div class=${["flex","gap-2","bg-gray-500",theme].join(" ")}>
-      ${items.map(((i,idx)=>lit.qy`<div
+      ${items.map((i,idx)=>lit.qy`<div
             class="text-md flex aspect-square h-[100px] items-center justify-center"
             style="background:oklch(80% 50% ${Math.floor(710*Math.random())+10});"
           >
             ${i}
-          </div>`))}
+          </div>`)}
     </div>
   `})(args),argTypes:{theme:{control:{type:"select"},description:"Choose a shade of gray for the scroll shadow. 25 is almost white, and 900 is almost black.",options:["btu-scrollshadow-25","btu-scrollshadow-50","btu-scrollshadow-100","btu-scrollshadow-200","btu-scrollshadow-300","btu-scrollshadow-400","btu-scrollshadow-500","btu-scrollshadow-600","btu-scrollshadow-700","btu-scrollshadow-800","btu-scrollshadow-900"]}},args:{}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
-//# sourceMappingURL=stories-ScrollShadow-stories.252ec9e7.iframe.bundle.js.map
+//# sourceMappingURL=stories-ScrollShadow-stories.ddf1e99b.iframe.bundle.js.map

package/dist/storybook/stories-ScrollShadow-stories.ddf1e99b.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-ScrollShadow-stories.ddf1e99b.iframe.bundle.js","mappings":";;;;;;AA4BA;AACA;;AAIA;;AAIA;;;ACtBA","sources":["webpack://@brightspot/ui/./src/stories/ScrollShadow.ts","webpack://@brightspot/ui/./src/stories/ScrollShadow.stories.ts"],"sourcesContent":["import { html } from 'lit'\n\nexport interface ScrollShadowProps {\n  theme?:\n    | 'btu-scrollshadow-25'\n    | 'btu-scrollshadow-50'\n    | 'btu-scrollshadow-100'\n    | 'btu-scrollshadow-200'\n    | 'btu-scrollshadow-300'\n    | 'btu-scrollshadow-400'\n    | 'btu-scrollshadow-500'\n    | 'btu-scrollshadow-600'\n    | 'btu-scrollshadow-700'\n    | 'btu-scrollshadow-800'\n    | 'btu-scrollshadow-900'\n}\n\nexport const ScrollShadow = ({\n  theme = 'btu-scrollshadow-25',\n}: ScrollShadowProps) => {\n  const items = new Array(100).fill(0).map((_, i) => `Item ${i + 1}`)\n\n  return html`\n    <style>\n      :root {\n        --can-scroll:   ;\n      }\n    </style>\n    <div class=${['flex', 'gap-2', 'bg-gray-500', theme].join(' ')}>\n      ${items.map(\n        (i, idx) =>\n          html`<div\n            class=\"text-md flex aspect-square h-[100px] items-center justify-center\"\n            style=\"background:oklch(80% 50% ${Math.floor(\n              Math.random() * (720 - 10),\n            ) + 10});\"\n          >\n            ${i}\n          </div>`,\n      )}\n    </div>\n  `\n}\n","import type { Meta, StoryObj } from '@storybook/web-components'\nimport { ScrollShadow } from './ScrollShadow'\nimport type { ScrollShadowProps } from './ScrollShadow'\n\nconst meta: Meta<ScrollShadowProps> = {\n  title: 'Components/ScrollShadow',\n  component: 'btu-scrollshadow',\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      subtitle:\n        'This plugin adds shadows to the edges of a scrollable container once the content overflows. The shadows use our gray color palette. You can choose which shade of gray you want. The scroll container must not already use before & after pseudo elements. But, if you need to use before/after modifiers on the container, make sure you also manually set the content property to the `--whitespace` variable. This is a workaround for TWCSS automatically adding a content property to the before/after pseudo-elements, which overrides the `--whitespace` variable by default. Note: this currently only supports x-axis scrolling.',\n    },\n    controls: { expanded: true },\n  },\n  render: (args) => ScrollShadow(args),\n  argTypes: {\n    theme: {\n      control: { type: 'select' },\n      description:\n        'Choose a shade of gray for the scroll shadow. 25 is almost white, and 900 is almost black.',\n      options: [\n        'btu-scrollshadow-25',\n        'btu-scrollshadow-50',\n        'btu-scrollshadow-100',\n        'btu-scrollshadow-200',\n        'btu-scrollshadow-300',\n        'btu-scrollshadow-400',\n        'btu-scrollshadow-500',\n        'btu-scrollshadow-600',\n        'btu-scrollshadow-700',\n        'btu-scrollshadow-800',\n        'btu-scrollshadow-900',\n      ],\n    },\n  },\n  args: {},\n}\nexport default meta\n\ntype Story = StoryObj<ScrollShadowProps>\nexport const Default: Story = {\n  args: {},\n}\n"],"names":[],"sourceRoot":""}