@brightspot/ui 1.0.1-0 → 1.0.1-2

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

@@ -1,8 +0,0 @@
-"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[544],{"./src/stories/Badge.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Badge_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Badge_stories={title:"Components/Badge",component:"btu-badge",tags:["autodocs"],parameters:{docs:{subtitle:"btu-badge"},controls:{expanded:!0}},render:args=>(({color="gray",affordance,size="sm",label})=>{let dot=!1,icon=!1;return"dot"===affordance?dot=!0:"icon"===affordance&&(icon=!0),lit.qy`
-    <div
-      class=${["btu-badge",`btu-badge-${size}`,`btu-badge-${color}`,dot?"before:size-2 before:rounded-lg before:bg-[currentColor]":"",icon?"before:btu-icon before:btu-icon-xs before:btu-icon-salad":""].join(" ")}
-    >
-      ${label}
-    </div>
-  `})(args),argTypes:{color:{control:{type:"select"},options:["black","white","primary","teal","gray","purple","rose","error","warning","success"]},affordance:{control:{type:"select"},options:["dot","icon"],description:"Display a design affordance next to the label"},size:{control:{type:"select"},options:["sm","md","lg"]}},args:{color:"purple",affordance:"dot",size:"sm",label:"Badge"}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
-//# sourceMappingURL=stories-Badge-stories.52b61cf3.iframe.bundle.js.map

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

@@ -1 +0,0 @@
-{"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

@@ -1,9 +0,0 @@
-"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[791],{"./src/stories/Button.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Button_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Button_stories={title:"Components/Button",component:"btu-button",tags:["autodocs"],parameters:{docs:{subtitle:"btu-button"},controls:{expanded:!0}},render:args=>(({color="primary",pressed,fill,contained,outlined,size="sm",label})=>{const depressed=pressed?"btu-button-pressed":"",filled=fill?"btu-button-fill":"btu-button-fill-none",container=contained?"":"btu-button-container-none",outline=outlined?"btu-button-outline":"";return lit.qy`
-    <button
-      type="button"
-      class=${["btu-button",`btu-button-${color}`,`btu-button-${size}`,filled,container,outline,depressed].join(" ")}
-    >
-      ${label}
-    </button>
-  `})(args),argTypes:{size:{control:{type:"select"},options:["sm","md","lg","xl","2xl"]},color:{control:{type:"select"},options:["black","white","primary","teal","gray","purple","rose","error","warning","success"]},pressed:{control:{type:"boolean"},description:"Is the button pressed?"},fill:{control:{type:"boolean"},description:"Is the button filled?"},contained:{control:{type:"boolean"},description:"Does the button have a container?"},outlined:{control:{type:"boolean"},description:"Is the button outlined?"}},args:{color:"primary",label:"Button",pressed:!1,fill:!0,contained:!0,outlined:!1,size:"md"}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
-//# sourceMappingURL=stories-Button-stories.777d0529.iframe.bundle.js.map

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

@@ -1 +0,0 @@
-{"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.927fecc8.iframe.bundle.js

@@ -1,31 +0,0 @@
-"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[471],{"./src/stories/Colors.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Error:()=>Error,Gray:()=>Gray,Primary:()=>Primary,Success:()=>Success,Warning:()=>Warning,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Colors_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Colors_stories={title:"Design System/Colors",component:"btu-theme",tags:["autodocs"],parameters:{controls:{exclude:["palette"]},docs:{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'."}},render:args=>(args=>lit.qy`
-    <div class="my-10">
-      <div
-        class="not-prose grid grid-cols-[auto_minmax(0,_1fr)] items-center gap-4"
-      >
-        <div class="z-9 sticky top-28 bg-white lg:top-14 dark:bg-gray-950">
-          &nbsp;
-        </div>
-        <div
-          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"
-        >
-          <div>25</div>
-          <div>50</div>
-          <div>100</div>
-          <div>200</div>
-          <div>300</div>
-          <div>400</div>
-          <div>500</div>
-          <div>600</div>
-          <div>700</div>
-          <div>800</div>
-          <div>900</div>
-        </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>`)}
-        </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.927fecc8.iframe.bundle.js.map

package/dist/storybook/stories-Colors-stories.927fecc8.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"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-Heading-stories.b41961f8.iframe.bundle.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[123],{"./src/stories/Heading.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Heading_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Heading_stories={title:"Components/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"btu-heading"},controls:{expanded:!0}},render:args=>(({size})=>lit.qy` <div class=${[`btu-heading-${size}`].join(" ")}>Heading</div> `)(args),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);

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

@@ -1,8 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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-Loader-stories.cd5e8fb5.iframe.bundle.js

@@ -1,6 +0,0 @@
-"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[894],{"./src/stories/Loader.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Loader_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Loader_stories={title:"Components/Loader",component:"btu-loader",tags:["autodocs"],parameters:{docs:{subtitle:'To avoid changing the markup, btu-loaders work by assigning the "--tw-content" property of a pseudo element the SVG data as a URI for it\'s background image. Loaders come with light & dark styles and are extrinsically sized. If you need to reference the default loader size for your container, you can do so with: var(--Loader-size)'},controls:{expanded:!0}},render:args=>lit.qy`
-    <div
-      class=${["before:btu-loader","before:size-[--Loader-size]"].join(" ")}
-    ></div>
-  `,argTypes:{},args:{}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
-//# sourceMappingURL=stories-Loader-stories.cd5e8fb5.iframe.bundle.js.map

package/dist/storybook/stories-Loader-stories.cd5e8fb5.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories-Loader-stories.cd5e8fb5.iframe.bundle.js","mappings":";;AAKA;;ACSA","sources":["webpack://@brightspot/ui/./src/stories/Loader.ts","webpack://@brightspot/ui/./src/stories/Loader.stories.ts"],"sourcesContent":["import { html } from 'lit'\n\nexport const Loader = () => {\n  return html`\n    <div\n      class=${[`before:btu-loader`, 'before:size-[--Loader-size]'].join(' ')}\n    ></div>\n  `\n}\n","import type { Meta, StoryObj } from '@storybook/web-components'\nimport { Loader } from './Loader'\n\nconst meta: Meta = {\n  title: 'Components/Loader',\n  component: 'btu-loader',\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      subtitle: `To avoid changing the markup, btu-loaders work by assigning the \"--tw-content\" property of a pseudo element the SVG data as a URI for it's background image. Loaders come with light & dark styles and are extrinsically sized. If you need to reference the default loader size for your container, you can do so with: var(--Loader-size)`,\n    },\n    controls: { expanded: true },\n  },\n  render: (args) => Loader(),\n  argTypes: {},\n  args: {},\n}\nexport default meta\n\ntype Story = StoryObj\nexport const Default: Story = {\n  args: {},\n}\n"],"names":[],"sourceRoot":""}

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

@@ -1,16 +0,0 @@
-"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
-            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>
-  `})(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.ddf1e99b.iframe.bundle.js.map

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

@@ -1 +0,0 @@
-{"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":""}