import{x as a}from"./iframe-CMPv_g6-.js";import"./preload-helper-PPVm8Dsz.js";const b=c=>{const r=[...c.palette?.entries()??[]];return r.length>0&&r[0][1].includes("-gradient")?a`
      <div class="my-10 flex flex-wrap gap-4">
        ${r.map(([e,d])=>a`
            <div class="w-[200px] overflow-clip rounded-lg bg-white shadow-md">
              <div class="${d} h-[120px] w-full"></div>
              <div class="p-3">
                <h3 class="text-sm font-semibold capitalize text-black">${e}</h3>
                <p class="text-xs text-gray-600">${e} gradient</p>
              </div>
            </div>
          `)}
      </div>
    `:a`
    <div class="my-10 flex flex-wrap gap-2">
      ${r.map(([e,d])=>a`
          <div class="flex flex-col overflow-clip rounded-lg shadow-md">
            <div class="${d} size-16"></div>
            <div class="grid h-7 place-items-center bg-white">
              <div class="text-[10px] font-semibold text-gray-700">${e}</div>
            </div>
          </div>
        `)}
    </div>
  `},m={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:c=>b(c)},s={parameters:{docs:{description:{story:"Used for primary call to actions, visual UI elements, active and clicked states, and focused containers."}}},args:{palette:new Map([["25","bg-primary-25"],["50","bg-primary-50"],["100","bg-primary-100"],["200","bg-primary-200"],["300","bg-primary-300"],["400","bg-primary-400"],["500","bg-primary-500"],["600","bg-primary-600"],["700","bg-primary-700"],["800","bg-primary-800"],["900","bg-primary-900"]])}},t={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:new Map([["25","bg-success-25"],["50","bg-success-50"],["100","bg-success-100"],["200","bg-success-200"],["300","bg-success-300"],["400","bg-success-400"],["500","bg-success-500"],["600","bg-success-600"],["700","bg-success-700"],["800","bg-success-800"],["900","bg-success-900"]])}},o={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:new Map([["25","bg-warning-25"],["50","bg-warning-50"],["100","bg-warning-100"],["200","bg-warning-200"],["300","bg-warning-300"],["400","bg-warning-400"],["500","bg-warning-500"],["600","bg-warning-600"],["700","bg-warning-700"],["800","bg-warning-800"],["900","bg-warning-900"]])}},n={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:new Map([["25","bg-error-25"],["50","bg-error-50"],["100","bg-error-100"],["200","bg-error-200"],["300","bg-error-300"],["400","bg-error-400"],["500","bg-error-500"],["600","bg-error-600"],["700","bg-error-700"],["800","bg-error-800"],["900","bg-error-900"]])}},i={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:new Map([["25","bg-gray-25"],["50","bg-gray-50"],["100","bg-gray-100"],["200","bg-gray-200"],["300","bg-gray-300"],["400","bg-gray-400"],["500","bg-gray-500"],["600","bg-gray-600"],["700","bg-gray-700"],["800","bg-gray-800"],["900","bg-gray-900"]])}},g={args:{palette:new Map([["ai","bg-ai-gradient"],["error","bg-error-gradient"],["gray","bg-gray-gradient"],["primary","bg-primary-gradient"],["purple","bg-purple-gradient"],["rose","bg-rose-gradient"],["success","bg-success-gradient"],["teal","bg-teal-gradient"],["warning","bg-warning-gradient"]])}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: 'Used for primary call to actions, visual UI elements, active and clicked states, and focused containers.'
      }
    }
  },
  args: {
    palette: new Map([['25', 'bg-primary-25'], ['50', 'bg-primary-50'], ['100', 'bg-primary-100'], ['200', 'bg-primary-200'], ['300', 'bg-primary-300'], ['400', 'bg-primary-400'], ['500', 'bg-primary-500'], ['600', 'bg-primary-600'], ['700', 'bg-primary-700'], ['800', 'bg-primary-800'], ['900', 'bg-primary-900']])
  }
}`,...s.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
  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: new Map([['25', 'bg-success-25'], ['50', 'bg-success-50'], ['100', 'bg-success-100'], ['200', 'bg-success-200'], ['300', 'bg-success-300'], ['400', 'bg-success-400'], ['500', 'bg-success-500'], ['600', 'bg-success-600'], ['700', 'bg-success-700'], ['800', 'bg-success-800'], ['900', 'bg-success-900']])
  }
}`,...t.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
  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: new Map([['25', 'bg-warning-25'], ['50', 'bg-warning-50'], ['100', 'bg-warning-100'], ['200', 'bg-warning-200'], ['300', 'bg-warning-300'], ['400', 'bg-warning-400'], ['500', 'bg-warning-500'], ['600', 'bg-warning-600'], ['700', 'bg-warning-700'], ['800', 'bg-warning-800'], ['900', 'bg-warning-900']])
  }
}`,...o.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
  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: new Map([['25', 'bg-error-25'], ['50', 'bg-error-50'], ['100', 'bg-error-100'], ['200', 'bg-error-200'], ['300', 'bg-error-300'], ['400', 'bg-error-400'], ['500', 'bg-error-500'], ['600', 'bg-error-600'], ['700', 'bg-error-700'], ['800', 'bg-error-800'], ['900', 'bg-error-900']])
  }
}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  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: new Map([['25', 'bg-gray-25'], ['50', 'bg-gray-50'], ['100', 'bg-gray-100'], ['200', 'bg-gray-200'], ['300', 'bg-gray-300'], ['400', 'bg-gray-400'], ['500', 'bg-gray-500'], ['600', 'bg-gray-600'], ['700', 'bg-gray-700'], ['800', 'bg-gray-800'], ['900', 'bg-gray-900']])
  }
}`,...i.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
  args: {
    palette: new Map([['ai', 'bg-ai-gradient'], ['error', 'bg-error-gradient'], ['gray', 'bg-gray-gradient'], ['primary', 'bg-primary-gradient'], ['purple', 'bg-purple-gradient'], ['rose', 'bg-rose-gradient'], ['success', 'bg-success-gradient'], ['teal', 'bg-teal-gradient'], ['warning', 'bg-warning-gradient']])
  }
}`,...g.parameters?.docs?.source}}};const y=["Primary","Success","Warning","Error","Gray","Gradients"];export{n as Error,g as Gradients,i as Gray,s as Primary,t as Success,o as Warning,y as __namedExportsOrder,m as default};
