@v-miniapp/ui-react 1.0.41 → 1.0.47

package/dist-storybook/assets/switch.stories-DMBBwZef.js

@@ -0,0 +1,250 @@
+import{j as e,r as c}from"./iframe-CLEfhyJc.js";import{S as s}from"./switch-BziC1t_8.js";import{B as y}from"./button-GtWXUngt.js";import{t as n}from"./store-D2RudmNr.js";import{T as b,S as w,M as u,P as v,a as S}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./classname-DoNrELT0.js";import"./index-DRIh_SUo.js";import"./index-B-Ksafg0.js";import"./icon-TJ3FHxUI.js";import"./colors-_6nFGM3e.js";import"./typography-DoV67nnS.js";import"./index-CaMbLGUB.js";const k=()=>{const t=`
+## ${n("common.table.title")}
+| ${n("common.table.name")} | ${n("common.table.type")} | ${n("common.table.required")} | ${n("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`checked\` | \`boolean\` | ${n("common.table.no")} | ${n("components.switch.argTypes.checkedDescription")} |
+| \`onChange\` | \`(checked: boolean) => void\` | ${n("common.table.no")} | ${n("components.switch.argTypes.onChangeDescription")} |
+| \`disabled\` | \`boolean\` | ${n("common.table.no")} | ${n("components.switch.argTypes.disabledDescription")} |
+| \`theme\` | \`'brand' | 'inverse'\` | ${n("common.table.no")} | ${n("components.switch.argTypes.themeDescription")} |
+| \`className\` | \`string\` | ${n("common.table.no")} | ${n("components.switch.argTypes.classNameDescription")} |
+| \`...props\` | \`ComponentProps<'input'>\` | ${n("common.table.no")} | ${n("components.switch.argTypes.propsDescription")} |
+`;return e.jsxs(e.Fragment,{children:[e.jsx(b,{}),e.jsx(w,{}),e.jsx(u,{children:n("components.switch.description")}),e.jsx(v,{}),e.jsx(u,{children:t}),e.jsx(S,{})]})},A={title:"Components/Switch",component:s,parameters:{layout:"padded",docs:{page:k}},tags:["autodocs"],argTypes:{checked:{control:"boolean",description:n("components.switch.argTypes.checkedDescription"),table:{type:{summary:"boolean"}}},onChange:{action:"changed",description:n("components.switch.argTypes.onChangeDescription"),table:{type:{summary:"(checked: boolean) => void"}}},disabled:{control:"boolean",description:n("components.switch.argTypes.disabledDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}},theme:{control:"select",options:["default","inverse"],description:n("components.switch.argTypes.themeDescription"),table:{type:{summary:"ISwitchTheme"},defaultValue:{summary:"default"}}},className:{description:n("components.switch.argTypes.classNameDescription"),table:{type:{summary:"string"}}}}},l={args:{}},r={name:n("components.switch.stories.states.name"),render:()=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(s,{checked:!1}),e.jsx("span",{children:n("components.switch.states.off")})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(s,{checked:!0}),e.jsx("span",{children:n("components.switch.states.on")})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(s,{checked:!0,disabled:!0}),e.jsx("span",{children:n("components.switch.states.onDisabled")})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(s,{checked:!1,disabled:!0}),e.jsx("span",{children:n("components.switch.states.offDisabled")})]})]})},p={name:n("components.switch.stories.controlled.name"),render:()=>{const[t,a]=c.useState(!1);return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(s,{checked:t,onChange:a}),e.jsx("span",{children:n("components.switch.stories.controlled.notificationLabel",{status:t?n("components.switch.states.on").toLowerCase():n("components.switch.states.off").toLowerCase()})})]}),e.jsx(y,{onClick:()=>a(!t),children:n("components.switch.stories.controlled.toggleButton")})]})}},d={name:n("components.switch.stories.themes.name"),render:()=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(s,{checked:!0}),e.jsx("span",{children:n("components.switch.stories.themes.brand")})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(s,{theme:"inverse",checked:!0}),e.jsx("span",{children:n("components.switch.stories.themes.inverse")})]})]})},m={name:n("components.switch.stories.withLabels.name"),render:()=>{const[t,a]=c.useState(!1),[i,o]=c.useState(!0),[g,f]=c.useState(!1);return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"12px",cursor:"pointer"},children:[e.jsx(s,{checked:t,onChange:a}),e.jsx("span",{children:n("components.switch.stories.withLabels.notifications")})]}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"12px",cursor:"pointer"},children:[e.jsx(s,{checked:i,onChange:o}),e.jsx("span",{children:n("components.switch.stories.withLabels.darkMode")})]}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"12px",cursor:"pointer"},children:[e.jsx(s,{checked:g,onChange:f}),e.jsx("span",{children:n("components.switch.stories.withLabels.autoSave")})]})]})}},h={name:n("components.switch.stories.completeExample.name"),render:()=>{const[t,a]=c.useState({notifications:!1,darkMode:!0,autoSave:!1,publicProfile:!0}),i=(o,g)=>{a({...t,[o]:g})};return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:[e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"12px"},children:n("components.switch.stories.completeExample.settingsTitle")}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"12px",cursor:"pointer"},children:[e.jsx(s,{checked:t.notifications,onChange:o=>i("notifications",o)}),e.jsx("span",{children:n("components.switch.stories.completeExample.pushNotifications")})]}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"12px",cursor:"pointer"},children:[e.jsx(s,{checked:t.darkMode,onChange:o=>i("darkMode",o)}),e.jsx("span",{children:n("components.switch.stories.completeExample.darkMode")})]}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"12px",cursor:"pointer"},children:[e.jsx(s,{checked:t.autoSave,onChange:o=>i("autoSave",o)}),e.jsx("span",{children:n("components.switch.stories.completeExample.autoSave")})]}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"12px",cursor:"not-allowed",opacity:.6},children:[e.jsx(s,{checked:t.publicProfile,onChange:o=>i("publicProfile",o),disabled:!0}),e.jsx("span",{children:n("components.switch.stories.completeExample.publicProfile")})]})]})]}),e.jsxs("div",{style:{padding:"12px",backgroundColor:"#f5f5f5",borderRadius:"4px"},children:[e.jsx("p",{style:{fontSize:"14px",margin:0},children:e.jsxs("strong",{children:[n("components.switch.stories.completeExample.currentSettings"),":"]})}),e.jsx("pre",{style:{fontSize:"12px",marginTop:"8px"},children:JSON.stringify(t,null,2)})]})]})}},x={name:n("components.switch.stories.interactive.name"),args:{checked:!1,disabled:!1,theme:"brand"}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...l.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  name: t('components.switch.stories.states.name'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: '12px'
+    }}>
+        <Switch checked={false} />
+        <span>{t('components.switch.states.off')}</span>
+      </div>
+      <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: '12px'
+    }}>
+        <Switch checked />
+        <span>{t('components.switch.states.on')}</span>
+      </div>
+      <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: '12px'
+    }}>
+        <Switch checked disabled />
+        <span>{t('components.switch.states.onDisabled')}</span>
+      </div>
+      <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: '12px'
+    }}>
+        <Switch checked={false} disabled />
+        <span>{t('components.switch.states.offDisabled')}</span>
+      </div>
+    </div>
+}`,...r.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  name: t('components.switch.stories.controlled.name'),
+  render: () => {
+    const [enabled, setEnabled] = useState(false);
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }}>
+        <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px'
+      }}>
+          <Switch checked={enabled} onChange={setEnabled} />
+          <span>
+            {t('components.switch.stories.controlled.notificationLabel', {
+            status: enabled ? t('components.switch.states.on').toLowerCase() : t('components.switch.states.off').toLowerCase()
+          })}
+          </span>
+        </div>
+        <Button onClick={() => setEnabled(!enabled)}>
+          {t('components.switch.stories.controlled.toggleButton')}
+        </Button>
+      </div>;
+  }
+}`,...p.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  name: t('components.switch.stories.themes.name'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: '12px'
+    }}>
+        <Switch checked />
+        <span>{t('components.switch.stories.themes.brand')}</span>
+      </div>
+      <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: '12px'
+    }}>
+        <Switch theme="inverse" checked />
+        <span>{t('components.switch.stories.themes.inverse')}</span>
+      </div>
+    </div>
+}`,...d.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  name: t('components.switch.stories.withLabels.name'),
+  render: () => {
+    const [notifications, setNotifications] = useState(false);
+    const [darkMode, setDarkMode] = useState(true);
+    const [autoSave, setAutoSave] = useState(false);
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }}>
+        <label style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        cursor: 'pointer'
+      }}>
+          <Switch checked={notifications} onChange={setNotifications} />
+          <span>{t('components.switch.stories.withLabels.notifications')}</span>
+        </label>
+        <label style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        cursor: 'pointer'
+      }}>
+          <Switch checked={darkMode} onChange={setDarkMode} />
+          <span>{t('components.switch.stories.withLabels.darkMode')}</span>
+        </label>
+        <label style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        cursor: 'pointer'
+      }}>
+          <Switch checked={autoSave} onChange={setAutoSave} />
+          <span>{t('components.switch.stories.withLabels.autoSave')}</span>
+        </label>
+      </div>;
+  }
+}`,...m.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  name: t('components.switch.stories.completeExample.name'),
+  render: () => {
+    const [settings, setSettings] = useState({
+      notifications: false,
+      darkMode: true,
+      autoSave: false,
+      publicProfile: true
+    });
+    const updateSetting = (key: keyof typeof settings, value: boolean) => {
+      setSettings({
+        ...settings,
+        [key]: value
+      });
+    };
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '24px'
+    }}>
+        <div>
+          <h3 style={{
+          marginBottom: '12px'
+        }}>
+            {t('components.switch.stories.completeExample.settingsTitle')}
+          </h3>
+          <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '16px'
+        }}>
+            <label style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            cursor: 'pointer'
+          }}>
+              <Switch checked={settings.notifications} onChange={checked => updateSetting('notifications', checked)} />
+              <span>
+                {t('components.switch.stories.completeExample.pushNotifications')}
+              </span>
+            </label>
+            <label style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            cursor: 'pointer'
+          }}>
+              <Switch checked={settings.darkMode} onChange={checked => updateSetting('darkMode', checked)} />
+              <span>
+                {t('components.switch.stories.completeExample.darkMode')}
+              </span>
+            </label>
+            <label style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            cursor: 'pointer'
+          }}>
+              <Switch checked={settings.autoSave} onChange={checked => updateSetting('autoSave', checked)} />
+              <span>
+                {t('components.switch.stories.completeExample.autoSave')}
+              </span>
+            </label>
+            <label style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            cursor: 'not-allowed',
+            opacity: 0.6
+          }}>
+              <Switch checked={settings.publicProfile} onChange={checked => updateSetting('publicProfile', checked)} disabled />
+              <span>
+                {t('components.switch.stories.completeExample.publicProfile')}
+              </span>
+            </label>
+          </div>
+        </div>
+        <div style={{
+        padding: '12px',
+        backgroundColor: '#f5f5f5',
+        borderRadius: '4px'
+      }}>
+          <p style={{
+          fontSize: '14px',
+          margin: 0
+        }}>
+            <strong>
+              {t('components.switch.stories.completeExample.currentSettings')}:
+            </strong>
+          </p>
+          <pre style={{
+          fontSize: '12px',
+          marginTop: '8px'
+        }}>
+            {JSON.stringify(settings, null, 2)}
+          </pre>
+        </div>
+      </div>;
+  }
+}`,...h.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  name: t('components.switch.stories.interactive.name'),
+  args: {
+    checked: false,
+    disabled: false,
+    theme: 'brand'
+  }
+}`,...x.parameters?.docs?.source}}};const O=["Default","States","Controlled","Themes","WithLabels","CompleteExample","Interactive"];export{h as CompleteExample,p as Controlled,l as Default,x as Interactive,r as States,d as Themes,m as WithLabels,O as __namedExportsOrder,A as default};

package/dist-storybook/assets/tab-bar-DZ3oOU50.js

@@ -0,0 +1,31 @@
+import{r as a,j as i}from"./iframe-CLEfhyJc.js";import{c as $,g as S}from"./classname-DoNrELT0.js";import{r as G}from"./icon-TJ3FHxUI.js";import{T as F}from"./typography-DoV67nnS.js";import{a as H,B as W}from"./badge-Cc9u7jBX.js";import{u as J}from"./index-DRIh_SUo.js";const p=S("tab-bar__item"),B=a.forwardRef(({className:u,id:r,active:w,icon:m,name:I,badge:n,onItemClick:f,...k},v)=>{const o=()=>{if(!m)return null;const t=i.jsx("span",{className:`${p}__icon`,children:G(m)});return n?i.jsxs(H,{children:[t,i.jsx(W,{...n===!0?{}:n})]}):t},h=()=>{const t=i.jsx(F,{component:"span",size:"base",className:`${p}__label`,children:I});return!n||m?t:i.jsxs("div",{className:`${p}__label-with-badge`,children:[t,i.jsx(W,{...n===!0?{}:n})]})};return i.jsxs("div",{ref:v,className:$(p,{[`${p}--active`]:w},u),onClick:()=>f?.(),...k,children:[o(),h()]})});B.__docgenInfo={description:"",methods:[],displayName:"TabBarItem",props:{id:{required:!0,tsType:{name:"string"},description:""},icon:{required:!1,tsType:{name:"union",raw:"IIconProps | ReactNode",elements:[{name:"intersection",raw:"Destination & Omit<Origin, keyof Destination>",elements:[{name:"intersection",raw:`{
+  size?: number | string
+  color?: IColor
+  animation?: IIconAnimation
+} & ({ name: IIconName; type?: 'outline' | 'fill' } | { children: ReactNode })`,elements:[{name:"signature",type:"object",raw:`{
+  size?: number | string
+  color?: IColor
+  animation?: IIconAnimation
+}`,signature:{properties:[{key:"size",value:{name:"union",raw:"number | string",elements:[{name:"number"},{name:"string"}],required:!1}},{key:"color",value:{name:"union",raw:"IThemeColor | (string & {})",elements:[{name:"union",raw:"keyof typeof themeColors",elements:[{name:"literal",value:"'alias-background'"},{name:"literal",value:"'alias-background-brand'"},{name:"literal",value:"'alias-background-brand-disabled'"},{name:"literal",value:"'alias-background-brand-strong'"},{name:"literal",value:"'alias-background-brand-subtle'"},{name:"literal",value:"'alias-background-disabled'"},{name:"literal",value:"'alias-background-disabled-inverse'"},{name:"literal",value:"'alias-background-grid-pattern'"},{name:"literal",value:"'alias-background-inverse'"},{name:"literal",value:"'alias-background-nav-box'"},{name:"literal",value:"'alias-background-nav-box-inverse'"},{name:"literal",value:"'alias-border-brand'"},{name:"literal",value:"'alias-border-disabled'"},{name:"literal",value:"'alias-border-disabled-inverse'"},{name:"literal",value:"'alias-border-inverse'"},{name:"literal",value:"'alias-border-on-brand'"},{name:"literal",value:"'alias-border-overlay'"},{name:"literal",value:"'alias-border-strong-01'"},{name:"literal",value:"'alias-border-strong-02'"},{name:"literal",value:"'alias-border-subtle-00'"},{name:"literal",value:"'alias-border-subtle-01'"},{name:"literal",value:"'alias-border-subtle-02'"},{name:"literal",value:"'alias-border-subtle-selected-01'"},{name:"literal",value:"'alias-border-subtle-selected-02'"},{name:"literal",value:"'alias-custom-brand'"},{name:"literal",value:"'alias-custom-brand-disabled'"},{name:"literal",value:"'alias-custom-brand-strong'"},{name:"literal",value:"'alias-custom-brand-subtle'"},{name:"literal",value:"'alias-layer-01'"},{name:"literal",value:"'alias-layer-02'"},{name:"literal",value:"'alias-layer-accent-01'"},{name:"literal",value:"'alias-layer-accent-02'"},{name:"literal",value:"'alias-layer-accent-hover-01'"},{name:"literal",value:"'alias-layer-accent-hover-02'"},{name:"literal",value:"'alias-layer-hover-01'"},{name:"literal",value:"'alias-layer-hover-02'"},{name:"literal",value:"'alias-layer-overlay'"},{name:"literal",value:"'alias-layer-overlay-inverse'"},{name:"literal",value:"'alias-link-inverse'"},{name:"literal",value:"'alias-link-inverse-hover'"},{name:"literal",value:"'alias-link-inverse-visited'"},{name:"literal",value:"'alias-link-primary'"},{name:"literal",value:"'alias-link-primary-hover'"},{name:"literal",value:"'alias-link-secondary'"},{name:"literal",value:"'alias-link-visited'"},{name:"literal",value:"'alias-object-brand'"},{name:"literal",value:"'alias-object-disabled'"},{name:"literal",value:"'alias-object-disabled-inverse'"},{name:"literal",value:"'alias-object-helper'"},{name:"literal",value:"'alias-object-interactive'"},{name:"literal",value:"'alias-object-on-brand'"},{name:"literal",value:"'alias-object-on-color-dark'"},{name:"literal",value:"'alias-object-on-color-light'"},{name:"literal",value:"'alias-object-placeholder'"},{name:"literal",value:"'alias-object-primary'"},{name:"literal",value:"'alias-object-primary-inverse'"},{name:"literal",value:"'alias-object-secondary'"},{name:"literal",value:"'alias-overlay'"},{name:"literal",value:"'alias-overlay-subtle'"},{name:"literal",value:"'alias-picker-view-overlay'"},{name:"literal",value:"'alias-skeleton-background'"},{name:"literal",value:"'alias-skeleton-background-inverse'"},{name:"literal",value:"'alias-skeleton-element'"},{name:"literal",value:"'alias-skeleton-element-inverse'"},{name:"literal",value:"'alias-support-highlight'"},{name:"literal",value:"'alias-support-info'"},{name:"literal",value:"'alias-support-info-inverse'"},{name:"literal",value:"'alias-support-info-subtle'"},{name:"literal",value:"'alias-support-negative'"},{name:"literal",value:"'alias-support-negative-inverse'"},{name:"literal",value:"'alias-support-negative-subtle'"},{name:"literal",value:"'alias-support-positive'"},{name:"literal",value:"'alias-support-positive-inverse'"},{name:"literal",value:"'alias-support-positive-subtle'"},{name:"literal",value:"'alias-support-warning'"},{name:"literal",value:"'alias-support-warning-inverse'"},{name:"literal",value:"'alias-support-warning-subtle'"},{name:"literal",value:"'alias-switch-off'"},{name:"literal",value:"'alias-transparent'"},{name:"literal",value:"'global-amber-amber-05'"},{name:"literal",value:"'global-amber-amber-10'"},{name:"literal",value:"'global-amber-amber-20'"},{name:"literal",value:"'global-amber-amber-30'"},{name:"literal",value:"'global-amber-amber-40'"},{name:"literal",value:"'global-amber-amber-50'"},{name:"literal",value:"'global-amber-amber-60'"},{name:"literal",value:"'global-amber-amber-70'"},{name:"literal",value:"'global-amber-amber-80'"},{name:"literal",value:"'global-amber-amber-90'"},{name:"literal",value:"'global-amber-amber-95'"},{name:"literal",value:"'global-basic-black'"},{name:"literal",value:"'global-basic-black-20'"},{name:"literal",value:"'global-basic-black-5'"},{name:"literal",value:"'global-basic-white'"},{name:"literal",value:"'global-basic-white-0'"},{name:"literal",value:"'global-basic-white-15'"},{name:"literal",value:"'global-basic-white-25'"},{name:"literal",value:"'global-basic-white-30'"},{name:"literal",value:"'global-basic-white-5'"},{name:"literal",value:"'global-basic-white-50'"},{name:"literal",value:"'global-basic-white-80'"},{name:"literal",value:"'global-blue-blue-05'"},{name:"literal",value:"'global-blue-blue-10'"},{name:"literal",value:"'global-blue-blue-20'"},{name:"literal",value:"'global-blue-blue-30'"},{name:"literal",value:"'global-blue-blue-40'"},{name:"literal",value:"'global-blue-blue-40-15'"},{name:"literal",value:"'global-blue-blue-40-25'"},{name:"literal",value:"'global-blue-blue-50'"},{name:"literal",value:"'global-blue-blue-60'"},{name:"literal",value:"'global-blue-blue-60-15'"},{name:"literal",value:"'global-blue-blue-60-25'"},{name:"literal",value:"'global-blue-blue-70'"},{name:"literal",value:"'global-blue-blue-80'"},{name:"literal",value:"'global-blue-blue-90'"},{name:"literal",value:"'global-blue-blue-95'"},{name:"literal",value:"'global-cyan-cyan-05'"},{name:"literal",value:"'global-cyan-cyan-10'"},{name:"literal",value:"'global-cyan-cyan-20'"},{name:"literal",value:"'global-cyan-cyan-30'"},{name:"literal",value:"'global-cyan-cyan-40'"},{name:"literal",value:"'global-cyan-cyan-50'"},{name:"literal",value:"'global-cyan-cyan-60'"},{name:"literal",value:"'global-cyan-cyan-70'"},{name:"literal",value:"'global-cyan-cyan-80'"},{name:"literal",value:"'global-cyan-cyan-90'"},{name:"literal",value:"'global-cyan-cyan-95'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-05'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-10'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-20'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-30'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-40'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-50'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-60'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-70'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-80'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-90'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-95'"},{name:"literal",value:"'global-emerald-emerald-05'"},{name:"literal",value:"'global-emerald-emerald-10'"},{name:"literal",value:"'global-emerald-emerald-20'"},{name:"literal",value:"'global-emerald-emerald-30'"},{name:"literal",value:"'global-emerald-emerald-40'"},{name:"literal",value:"'global-emerald-emerald-50'"},{name:"literal",value:"'global-emerald-emerald-60'"},{name:"literal",value:"'global-emerald-emerald-70'"},{name:"literal",value:"'global-emerald-emerald-80'"},{name:"literal",value:"'global-emerald-emerald-90'"},{name:"literal",value:"'global-emerald-emerald-95'"},{name:"literal",value:"'global-fuchsia-fuchsia-05'"},{name:"literal",value:"'global-fuchsia-fuchsia-10'"},{name:"literal",value:"'global-fuchsia-fuchsia-20'"},{name:"literal",value:"'global-fuchsia-fuchsia-30'"},{name:"literal",value:"'global-fuchsia-fuchsia-40'"},{name:"literal",value:"'global-fuchsia-fuchsia-50'"},{name:"literal",value:"'global-fuchsia-fuchsia-60'"},{name:"literal",value:"'global-fuchsia-fuchsia-70'"},{name:"literal",value:"'global-fuchsia-fuchsia-80'"},{name:"literal",value:"'global-fuchsia-fuchsia-90'"},{name:"literal",value:"'global-fuchsia-fuchsia-95'"},{name:"literal",value:"'global-gray-gray-05'"},{name:"literal",value:"'global-gray-gray-10'"},{name:"literal",value:"'global-gray-gray-20'"},{name:"literal",value:"'global-gray-gray-30'"},{name:"literal",value:"'global-gray-gray-40'"},{name:"literal",value:"'global-gray-gray-50'"},{name:"literal",value:"'global-gray-gray-60'"},{name:"literal",value:"'global-gray-gray-70'"},{name:"literal",value:"'global-gray-gray-80'"},{name:"literal",value:"'global-gray-gray-90'"},{name:"literal",value:"'global-gray-gray-95'"},{name:"literal",value:"'global-green-green-05'"},{name:"literal",value:"'global-green-green-10'"},{name:"literal",value:"'global-green-green-20'"},{name:"literal",value:"'global-green-green-30'"},{name:"literal",value:"'global-green-green-40'"},{name:"literal",value:"'global-green-green-50'"},{name:"literal",value:"'global-green-green-60'"},{name:"literal",value:"'global-green-green-70'"},{name:"literal",value:"'global-green-green-80'"},{name:"literal",value:"'global-green-green-90'"},{name:"literal",value:"'global-green-green-95'"},{name:"literal",value:"'global-indigo-indigo-05'"},{name:"literal",value:"'global-indigo-indigo-10'"},{name:"literal",value:"'global-indigo-indigo-20'"},{name:"literal",value:"'global-indigo-indigo-30'"},{name:"literal",value:"'global-indigo-indigo-40'"},{name:"literal",value:"'global-indigo-indigo-50'"},{name:"literal",value:"'global-indigo-indigo-60'"},{name:"literal",value:"'global-indigo-indigo-70'"},{name:"literal",value:"'global-indigo-indigo-80'"},{name:"literal",value:"'global-indigo-indigo-90'"},{name:"literal",value:"'global-indigo-indigo-95'"},{name:"literal",value:"'global-lime-lime-05'"},{name:"literal",value:"'global-lime-lime-10'"},{name:"literal",value:"'global-lime-lime-20'"},{name:"literal",value:"'global-lime-lime-30'"},{name:"literal",value:"'global-lime-lime-40'"},{name:"literal",value:"'global-lime-lime-50'"},{name:"literal",value:"'global-lime-lime-60'"},{name:"literal",value:"'global-lime-lime-70'"},{name:"literal",value:"'global-lime-lime-80'"},{name:"literal",value:"'global-lime-lime-90'"},{name:"literal",value:"'global-lime-lime-95'"},{name:"literal",value:"'global-neutral-neutral-05'"},{name:"literal",value:"'global-neutral-neutral-05-5'"},{name:"literal",value:"'global-neutral-neutral-05-50'"},{name:"literal",value:"'global-neutral-neutral-10'"},{name:"literal",value:"'global-neutral-neutral-20'"},{name:"literal",value:"'global-neutral-neutral-20-30'"},{name:"literal",value:"'global-neutral-neutral-30'"},{name:"literal",value:"'global-neutral-neutral-40'"},{name:"literal",value:"'global-neutral-neutral-50'"},{name:"literal",value:"'global-neutral-neutral-50-15'"},{name:"literal",value:"'global-neutral-neutral-50-20'"},{name:"literal",value:"'global-neutral-neutral-50-30'"},{name:"literal",value:"'global-neutral-neutral-50-50'"},{name:"literal",value:"'global-neutral-neutral-60'"},{name:"literal",value:"'global-neutral-neutral-70'"},{name:"literal",value:"'global-neutral-neutral-80'"},{name:"literal",value:"'global-neutral-neutral-90'"},{name:"literal",value:"'global-neutral-neutral-95'"},{name:"literal",value:"'global-neutral-neutral-95-0'"},{name:"literal",value:"'global-neutral-neutral-95-15'"},{name:"literal",value:"'global-neutral-neutral-95-25'"},{name:"literal",value:"'global-neutral-neutral-95-5'"},{name:"literal",value:"'global-neutral-neutral-95-50'"},{name:"literal",value:"'global-neutral-neutral-95-65'"},{name:"literal",value:"'global-orange-orange-05'"},{name:"literal",value:"'global-orange-orange-10'"},{name:"literal",value:"'global-orange-orange-20'"},{name:"literal",value:"'global-orange-orange-30'"},{name:"literal",value:"'global-orange-orange-40'"},{name:"literal",value:"'global-orange-orange-50'"},{name:"literal",value:"'global-orange-orange-60'"},{name:"literal",value:"'global-orange-orange-70'"},{name:"literal",value:"'global-orange-orange-80'"},{name:"literal",value:"'global-orange-orange-90'"},{name:"literal",value:"'global-orange-orange-95'"},{name:"literal",value:"'global-pink-pink-05'"},{name:"literal",value:"'global-pink-pink-10'"},{name:"literal",value:"'global-pink-pink-20'"},{name:"literal",value:"'global-pink-pink-30'"},{name:"literal",value:"'global-pink-pink-40'"},{name:"literal",value:"'global-pink-pink-50'"},{name:"literal",value:"'global-pink-pink-60'"},{name:"literal",value:"'global-pink-pink-70'"},{name:"literal",value:"'global-pink-pink-80'"},{name:"literal",value:"'global-pink-pink-90'"},{name:"literal",value:"'global-pink-pink-95'"},{name:"literal",value:"'global-purple-purple-05'"},{name:"literal",value:"'global-purple-purple-10'"},{name:"literal",value:"'global-purple-purple-20'"},{name:"literal",value:"'global-purple-purple-30'"},{name:"literal",value:"'global-purple-purple-40'"},{name:"literal",value:"'global-purple-purple-50'"},{name:"literal",value:"'global-purple-purple-60'"},{name:"literal",value:"'global-purple-purple-70'"},{name:"literal",value:"'global-purple-purple-80'"},{name:"literal",value:"'global-purple-purple-90'"},{name:"literal",value:"'global-purple-purple-95'"},{name:"literal",value:"'global-red-red-05'"},{name:"literal",value:"'global-red-red-10'"},{name:"literal",value:"'global-red-red-20'"},{name:"literal",value:"'global-red-red-30'"},{name:"literal",value:"'global-red-red-40'"},{name:"literal",value:"'global-red-red-50'"},{name:"literal",value:"'global-red-red-50-15'"},{name:"literal",value:"'global-red-red-50-25'"},{name:"literal",value:"'global-red-red-60'"},{name:"literal",value:"'global-red-red-60-15'"},{name:"literal",value:"'global-red-red-60-25'"},{name:"literal",value:"'global-red-red-70'"},{name:"literal",value:"'global-red-red-80'"},{name:"literal",value:"'global-red-red-90'"},{name:"literal",value:"'global-red-red-95'"},{name:"literal",value:"'global-rose-rose-05'"},{name:"literal",value:"'global-rose-rose-10'"},{name:"literal",value:"'global-rose-rose-20'"},{name:"literal",value:"'global-rose-rose-30'"},{name:"literal",value:"'global-rose-rose-40'"},{name:"literal",value:"'global-rose-rose-50'"},{name:"literal",value:"'global-rose-rose-60'"},{name:"literal",value:"'global-rose-rose-70'"},{name:"literal",value:"'global-rose-rose-80'"},{name:"literal",value:"'global-rose-rose-90'"},{name:"literal",value:"'global-rose-rose-95'"},{name:"literal",value:"'global-sky-sky-05'"},{name:"literal",value:"'global-sky-sky-10'"},{name:"literal",value:"'global-sky-sky-20'"},{name:"literal",value:"'global-sky-sky-30'"},{name:"literal",value:"'global-sky-sky-40'"},{name:"literal",value:"'global-sky-sky-50'"},{name:"literal",value:"'global-sky-sky-60'"},{name:"literal",value:"'global-sky-sky-70'"},{name:"literal",value:"'global-sky-sky-80'"},{name:"literal",value:"'global-sky-sky-90'"},{name:"literal",value:"'global-sky-sky-95'"},{name:"literal",value:"'global-slate-slate-05'"},{name:"literal",value:"'global-slate-slate-10'"},{name:"literal",value:"'global-slate-slate-20'"},{name:"literal",value:"'global-slate-slate-30'"},{name:"literal",value:"'global-slate-slate-40'"},{name:"literal",value:"'global-slate-slate-50'"},{name:"literal",value:"'global-slate-slate-60'"},{name:"literal",value:"'global-slate-slate-70'"},{name:"literal",value:"'global-slate-slate-80'"},{name:"literal",value:"'global-slate-slate-90'"},{name:"literal",value:"'global-slate-slate-95'"},{name:"literal",value:"'global-stone-stone-05'"},{name:"literal",value:"'global-stone-stone-10'"},{name:"literal",value:"'global-stone-stone-20'"},{name:"literal",value:"'global-stone-stone-30'"},{name:"literal",value:"'global-stone-stone-40'"},{name:"literal",value:"'global-stone-stone-50'"},{name:"literal",value:"'global-stone-stone-60'"},{name:"literal",value:"'global-stone-stone-70'"},{name:"literal",value:"'global-stone-stone-80'"},{name:"literal",value:"'global-stone-stone-90'"},{name:"literal",value:"'global-stone-stone-95'"},{name:"literal",value:"'global-teal-teal-05'"},{name:"literal",value:"'global-teal-teal-10'"},{name:"literal",value:"'global-teal-teal-20'"},{name:"literal",value:"'global-teal-teal-30'"},{name:"literal",value:"'global-teal-teal-40'"},{name:"literal",value:"'global-teal-teal-50'"},{name:"literal",value:"'global-teal-teal-60'"},{name:"literal",value:"'global-teal-teal-70'"},{name:"literal",value:"'global-teal-teal-80'"},{name:"literal",value:"'global-teal-teal-90'"},{name:"literal",value:"'global-teal-teal-95'"},{name:"literal",value:"'global-violet-violet-05'"},{name:"literal",value:"'global-violet-violet-10'"},{name:"literal",value:"'global-violet-violet-20'"},{name:"literal",value:"'global-violet-violet-30'"},{name:"literal",value:"'global-violet-violet-40'"},{name:"literal",value:"'global-violet-violet-50'"},{name:"literal",value:"'global-violet-violet-60'"},{name:"literal",value:"'global-violet-violet-70'"},{name:"literal",value:"'global-violet-violet-80'"},{name:"literal",value:"'global-violet-violet-90'"},{name:"literal",value:"'global-violet-violet-95'"},{name:"literal",value:"'global-yellow-yellow-05'"},{name:"literal",value:"'global-yellow-yellow-10'"},{name:"literal",value:"'global-yellow-yellow-20'"},{name:"literal",value:"'global-yellow-yellow-30'"},{name:"literal",value:"'global-yellow-yellow-40'"},{name:"literal",value:"'global-yellow-yellow-40-15'"},{name:"literal",value:"'global-yellow-yellow-40-25'"},{name:"literal",value:"'global-yellow-yellow-50'"},{name:"literal",value:"'global-yellow-yellow-60'"},{name:"literal",value:"'global-yellow-yellow-70'"},{name:"literal",value:"'global-yellow-yellow-80'"},{name:"literal",value:"'global-yellow-yellow-90'"},{name:"literal",value:"'global-yellow-yellow-95'"},{name:"literal",value:"'global-zinc-zinc-05'"},{name:"literal",value:"'global-zinc-zinc-10'"},{name:"literal",value:"'global-zinc-zinc-20'"},{name:"literal",value:"'global-zinc-zinc-30'"},{name:"literal",value:"'global-zinc-zinc-40'"},{name:"literal",value:"'global-zinc-zinc-50'"},{name:"literal",value:"'global-zinc-zinc-60'"},{name:"literal",value:"'global-zinc-zinc-70'"},{name:"literal",value:"'global-zinc-zinc-80'"},{name:"literal",value:"'global-zinc-zinc-90'"},{name:"literal",value:"'global-zinc-zinc-95'"}]},{name:"unknown"}],required:!1}},{key:"animation",value:{name:"union",raw:"'spin' | 'ping' | 'pulse' | 'bounce'",elements:[{name:"literal",value:"'spin'"},{name:"literal",value:"'ping'"},{name:"literal",value:"'pulse'"},{name:"literal",value:"'bounce'"}],required:!1}}]}},{name:"unknown"}]},{name:"Omit",elements:[{name:"Omit",elements:[{name:"intersection",raw:`React.ComponentProps<'svg'> & {
+  title?: string
+  titleId?: string
+  desc?: string
+  descId?: string
+}`,elements:[{name:"ReactComponentProps",raw:"React.ComponentProps<'svg'>",elements:[{name:"literal",value:"'svg'"}]},{name:"signature",type:"object",raw:`{
+  title?: string
+  titleId?: string
+  desc?: string
+  descId?: string
+}`,signature:{properties:[{key:"title",value:{name:"string",required:!1}},{key:"titleId",value:{name:"string",required:!1}},{key:"desc",value:{name:"string",required:!1}},{key:"descId",value:{name:"string",required:!1}}]}}]},{name:"union",raw:"'name' | 'type' | 'children'",elements:[{name:"literal",value:"'name'"},{name:"literal",value:"'type'"},{name:"literal",value:"'children'"}]}],raw:"Omit<ISVGComponentProps, 'name' | 'type' | 'children'>"},{name:"intersection",raw:`{
+  size?: number | string
+  color?: IColor
+  animation?: IIconAnimation
+} & ({ name: IIconName; type?: 'outline' | 'fill' } | { children: ReactNode })`,elements:[{name:"signature",type:"object",raw:`{
+  size?: number | string
+  color?: IColor
+  animation?: IIconAnimation
+}`,signature:{properties:[{key:"size",value:{name:"union",raw:"number | string",elements:[{name:"number"},{name:"string"}],required:!1}},{key:"color",value:{name:"union",raw:"IThemeColor | (string & {})",elements:[{name:"union",raw:"keyof typeof themeColors",elements:[{name:"literal",value:"'alias-background'"},{name:"literal",value:"'alias-background-brand'"},{name:"literal",value:"'alias-background-brand-disabled'"},{name:"literal",value:"'alias-background-brand-strong'"},{name:"literal",value:"'alias-background-brand-subtle'"},{name:"literal",value:"'alias-background-disabled'"},{name:"literal",value:"'alias-background-disabled-inverse'"},{name:"literal",value:"'alias-background-grid-pattern'"},{name:"literal",value:"'alias-background-inverse'"},{name:"literal",value:"'alias-background-nav-box'"},{name:"literal",value:"'alias-background-nav-box-inverse'"},{name:"literal",value:"'alias-border-brand'"},{name:"literal",value:"'alias-border-disabled'"},{name:"literal",value:"'alias-border-disabled-inverse'"},{name:"literal",value:"'alias-border-inverse'"},{name:"literal",value:"'alias-border-on-brand'"},{name:"literal",value:"'alias-border-overlay'"},{name:"literal",value:"'alias-border-strong-01'"},{name:"literal",value:"'alias-border-strong-02'"},{name:"literal",value:"'alias-border-subtle-00'"},{name:"literal",value:"'alias-border-subtle-01'"},{name:"literal",value:"'alias-border-subtle-02'"},{name:"literal",value:"'alias-border-subtle-selected-01'"},{name:"literal",value:"'alias-border-subtle-selected-02'"},{name:"literal",value:"'alias-custom-brand'"},{name:"literal",value:"'alias-custom-brand-disabled'"},{name:"literal",value:"'alias-custom-brand-strong'"},{name:"literal",value:"'alias-custom-brand-subtle'"},{name:"literal",value:"'alias-layer-01'"},{name:"literal",value:"'alias-layer-02'"},{name:"literal",value:"'alias-layer-accent-01'"},{name:"literal",value:"'alias-layer-accent-02'"},{name:"literal",value:"'alias-layer-accent-hover-01'"},{name:"literal",value:"'alias-layer-accent-hover-02'"},{name:"literal",value:"'alias-layer-hover-01'"},{name:"literal",value:"'alias-layer-hover-02'"},{name:"literal",value:"'alias-layer-overlay'"},{name:"literal",value:"'alias-layer-overlay-inverse'"},{name:"literal",value:"'alias-link-inverse'"},{name:"literal",value:"'alias-link-inverse-hover'"},{name:"literal",value:"'alias-link-inverse-visited'"},{name:"literal",value:"'alias-link-primary'"},{name:"literal",value:"'alias-link-primary-hover'"},{name:"literal",value:"'alias-link-secondary'"},{name:"literal",value:"'alias-link-visited'"},{name:"literal",value:"'alias-object-brand'"},{name:"literal",value:"'alias-object-disabled'"},{name:"literal",value:"'alias-object-disabled-inverse'"},{name:"literal",value:"'alias-object-helper'"},{name:"literal",value:"'alias-object-interactive'"},{name:"literal",value:"'alias-object-on-brand'"},{name:"literal",value:"'alias-object-on-color-dark'"},{name:"literal",value:"'alias-object-on-color-light'"},{name:"literal",value:"'alias-object-placeholder'"},{name:"literal",value:"'alias-object-primary'"},{name:"literal",value:"'alias-object-primary-inverse'"},{name:"literal",value:"'alias-object-secondary'"},{name:"literal",value:"'alias-overlay'"},{name:"literal",value:"'alias-overlay-subtle'"},{name:"literal",value:"'alias-picker-view-overlay'"},{name:"literal",value:"'alias-skeleton-background'"},{name:"literal",value:"'alias-skeleton-background-inverse'"},{name:"literal",value:"'alias-skeleton-element'"},{name:"literal",value:"'alias-skeleton-element-inverse'"},{name:"literal",value:"'alias-support-highlight'"},{name:"literal",value:"'alias-support-info'"},{name:"literal",value:"'alias-support-info-inverse'"},{name:"literal",value:"'alias-support-info-subtle'"},{name:"literal",value:"'alias-support-negative'"},{name:"literal",value:"'alias-support-negative-inverse'"},{name:"literal",value:"'alias-support-negative-subtle'"},{name:"literal",value:"'alias-support-positive'"},{name:"literal",value:"'alias-support-positive-inverse'"},{name:"literal",value:"'alias-support-positive-subtle'"},{name:"literal",value:"'alias-support-warning'"},{name:"literal",value:"'alias-support-warning-inverse'"},{name:"literal",value:"'alias-support-warning-subtle'"},{name:"literal",value:"'alias-switch-off'"},{name:"literal",value:"'alias-transparent'"},{name:"literal",value:"'global-amber-amber-05'"},{name:"literal",value:"'global-amber-amber-10'"},{name:"literal",value:"'global-amber-amber-20'"},{name:"literal",value:"'global-amber-amber-30'"},{name:"literal",value:"'global-amber-amber-40'"},{name:"literal",value:"'global-amber-amber-50'"},{name:"literal",value:"'global-amber-amber-60'"},{name:"literal",value:"'global-amber-amber-70'"},{name:"literal",value:"'global-amber-amber-80'"},{name:"literal",value:"'global-amber-amber-90'"},{name:"literal",value:"'global-amber-amber-95'"},{name:"literal",value:"'global-basic-black'"},{name:"literal",value:"'global-basic-black-20'"},{name:"literal",value:"'global-basic-black-5'"},{name:"literal",value:"'global-basic-white'"},{name:"literal",value:"'global-basic-white-0'"},{name:"literal",value:"'global-basic-white-15'"},{name:"literal",value:"'global-basic-white-25'"},{name:"literal",value:"'global-basic-white-30'"},{name:"literal",value:"'global-basic-white-5'"},{name:"literal",value:"'global-basic-white-50'"},{name:"literal",value:"'global-basic-white-80'"},{name:"literal",value:"'global-blue-blue-05'"},{name:"literal",value:"'global-blue-blue-10'"},{name:"literal",value:"'global-blue-blue-20'"},{name:"literal",value:"'global-blue-blue-30'"},{name:"literal",value:"'global-blue-blue-40'"},{name:"literal",value:"'global-blue-blue-40-15'"},{name:"literal",value:"'global-blue-blue-40-25'"},{name:"literal",value:"'global-blue-blue-50'"},{name:"literal",value:"'global-blue-blue-60'"},{name:"literal",value:"'global-blue-blue-60-15'"},{name:"literal",value:"'global-blue-blue-60-25'"},{name:"literal",value:"'global-blue-blue-70'"},{name:"literal",value:"'global-blue-blue-80'"},{name:"literal",value:"'global-blue-blue-90'"},{name:"literal",value:"'global-blue-blue-95'"},{name:"literal",value:"'global-cyan-cyan-05'"},{name:"literal",value:"'global-cyan-cyan-10'"},{name:"literal",value:"'global-cyan-cyan-20'"},{name:"literal",value:"'global-cyan-cyan-30'"},{name:"literal",value:"'global-cyan-cyan-40'"},{name:"literal",value:"'global-cyan-cyan-50'"},{name:"literal",value:"'global-cyan-cyan-60'"},{name:"literal",value:"'global-cyan-cyan-70'"},{name:"literal",value:"'global-cyan-cyan-80'"},{name:"literal",value:"'global-cyan-cyan-90'"},{name:"literal",value:"'global-cyan-cyan-95'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-05'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-10'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-20'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-30'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-40'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-50'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-60'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-70'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-80'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-90'"},{name:"literal",value:"'global-dynamic-red-dynamic-red-95'"},{name:"literal",value:"'global-emerald-emerald-05'"},{name:"literal",value:"'global-emerald-emerald-10'"},{name:"literal",value:"'global-emerald-emerald-20'"},{name:"literal",value:"'global-emerald-emerald-30'"},{name:"literal",value:"'global-emerald-emerald-40'"},{name:"literal",value:"'global-emerald-emerald-50'"},{name:"literal",value:"'global-emerald-emerald-60'"},{name:"literal",value:"'global-emerald-emerald-70'"},{name:"literal",value:"'global-emerald-emerald-80'"},{name:"literal",value:"'global-emerald-emerald-90'"},{name:"literal",value:"'global-emerald-emerald-95'"},{name:"literal",value:"'global-fuchsia-fuchsia-05'"},{name:"literal",value:"'global-fuchsia-fuchsia-10'"},{name:"literal",value:"'global-fuchsia-fuchsia-20'"},{name:"literal",value:"'global-fuchsia-fuchsia-30'"},{name:"literal",value:"'global-fuchsia-fuchsia-40'"},{name:"literal",value:"'global-fuchsia-fuchsia-50'"},{name:"literal",value:"'global-fuchsia-fuchsia-60'"},{name:"literal",value:"'global-fuchsia-fuchsia-70'"},{name:"literal",value:"'global-fuchsia-fuchsia-80'"},{name:"literal",value:"'global-fuchsia-fuchsia-90'"},{name:"literal",value:"'global-fuchsia-fuchsia-95'"},{name:"literal",value:"'global-gray-gray-05'"},{name:"literal",value:"'global-gray-gray-10'"},{name:"literal",value:"'global-gray-gray-20'"},{name:"literal",value:"'global-gray-gray-30'"},{name:"literal",value:"'global-gray-gray-40'"},{name:"literal",value:"'global-gray-gray-50'"},{name:"literal",value:"'global-gray-gray-60'"},{name:"literal",value:"'global-gray-gray-70'"},{name:"literal",value:"'global-gray-gray-80'"},{name:"literal",value:"'global-gray-gray-90'"},{name:"literal",value:"'global-gray-gray-95'"},{name:"literal",value:"'global-green-green-05'"},{name:"literal",value:"'global-green-green-10'"},{name:"literal",value:"'global-green-green-20'"},{name:"literal",value:"'global-green-green-30'"},{name:"literal",value:"'global-green-green-40'"},{name:"literal",value:"'global-green-green-50'"},{name:"literal",value:"'global-green-green-60'"},{name:"literal",value:"'global-green-green-70'"},{name:"literal",value:"'global-green-green-80'"},{name:"literal",value:"'global-green-green-90'"},{name:"literal",value:"'global-green-green-95'"},{name:"literal",value:"'global-indigo-indigo-05'"},{name:"literal",value:"'global-indigo-indigo-10'"},{name:"literal",value:"'global-indigo-indigo-20'"},{name:"literal",value:"'global-indigo-indigo-30'"},{name:"literal",value:"'global-indigo-indigo-40'"},{name:"literal",value:"'global-indigo-indigo-50'"},{name:"literal",value:"'global-indigo-indigo-60'"},{name:"literal",value:"'global-indigo-indigo-70'"},{name:"literal",value:"'global-indigo-indigo-80'"},{name:"literal",value:"'global-indigo-indigo-90'"},{name:"literal",value:"'global-indigo-indigo-95'"},{name:"literal",value:"'global-lime-lime-05'"},{name:"literal",value:"'global-lime-lime-10'"},{name:"literal",value:"'global-lime-lime-20'"},{name:"literal",value:"'global-lime-lime-30'"},{name:"literal",value:"'global-lime-lime-40'"},{name:"literal",value:"'global-lime-lime-50'"},{name:"literal",value:"'global-lime-lime-60'"},{name:"literal",value:"'global-lime-lime-70'"},{name:"literal",value:"'global-lime-lime-80'"},{name:"literal",value:"'global-lime-lime-90'"},{name:"literal",value:"'global-lime-lime-95'"},{name:"literal",value:"'global-neutral-neutral-05'"},{name:"literal",value:"'global-neutral-neutral-05-5'"},{name:"literal",value:"'global-neutral-neutral-05-50'"},{name:"literal",value:"'global-neutral-neutral-10'"},{name:"literal",value:"'global-neutral-neutral-20'"},{name:"literal",value:"'global-neutral-neutral-20-30'"},{name:"literal",value:"'global-neutral-neutral-30'"},{name:"literal",value:"'global-neutral-neutral-40'"},{name:"literal",value:"'global-neutral-neutral-50'"},{name:"literal",value:"'global-neutral-neutral-50-15'"},{name:"literal",value:"'global-neutral-neutral-50-20'"},{name:"literal",value:"'global-neutral-neutral-50-30'"},{name:"literal",value:"'global-neutral-neutral-50-50'"},{name:"literal",value:"'global-neutral-neutral-60'"},{name:"literal",value:"'global-neutral-neutral-70'"},{name:"literal",value:"'global-neutral-neutral-80'"},{name:"literal",value:"'global-neutral-neutral-90'"},{name:"literal",value:"'global-neutral-neutral-95'"},{name:"literal",value:"'global-neutral-neutral-95-0'"},{name:"literal",value:"'global-neutral-neutral-95-15'"},{name:"literal",value:"'global-neutral-neutral-95-25'"},{name:"literal",value:"'global-neutral-neutral-95-5'"},{name:"literal",value:"'global-neutral-neutral-95-50'"},{name:"literal",value:"'global-neutral-neutral-95-65'"},{name:"literal",value:"'global-orange-orange-05'"},{name:"literal",value:"'global-orange-orange-10'"},{name:"literal",value:"'global-orange-orange-20'"},{name:"literal",value:"'global-orange-orange-30'"},{name:"literal",value:"'global-orange-orange-40'"},{name:"literal",value:"'global-orange-orange-50'"},{name:"literal",value:"'global-orange-orange-60'"},{name:"literal",value:"'global-orange-orange-70'"},{name:"literal",value:"'global-orange-orange-80'"},{name:"literal",value:"'global-orange-orange-90'"},{name:"literal",value:"'global-orange-orange-95'"},{name:"literal",value:"'global-pink-pink-05'"},{name:"literal",value:"'global-pink-pink-10'"},{name:"literal",value:"'global-pink-pink-20'"},{name:"literal",value:"'global-pink-pink-30'"},{name:"literal",value:"'global-pink-pink-40'"},{name:"literal",value:"'global-pink-pink-50'"},{name:"literal",value:"'global-pink-pink-60'"},{name:"literal",value:"'global-pink-pink-70'"},{name:"literal",value:"'global-pink-pink-80'"},{name:"literal",value:"'global-pink-pink-90'"},{name:"literal",value:"'global-pink-pink-95'"},{name:"literal",value:"'global-purple-purple-05'"},{name:"literal",value:"'global-purple-purple-10'"},{name:"literal",value:"'global-purple-purple-20'"},{name:"literal",value:"'global-purple-purple-30'"},{name:"literal",value:"'global-purple-purple-40'"},{name:"literal",value:"'global-purple-purple-50'"},{name:"literal",value:"'global-purple-purple-60'"},{name:"literal",value:"'global-purple-purple-70'"},{name:"literal",value:"'global-purple-purple-80'"},{name:"literal",value:"'global-purple-purple-90'"},{name:"literal",value:"'global-purple-purple-95'"},{name:"literal",value:"'global-red-red-05'"},{name:"literal",value:"'global-red-red-10'"},{name:"literal",value:"'global-red-red-20'"},{name:"literal",value:"'global-red-red-30'"},{name:"literal",value:"'global-red-red-40'"},{name:"literal",value:"'global-red-red-50'"},{name:"literal",value:"'global-red-red-50-15'"},{name:"literal",value:"'global-red-red-50-25'"},{name:"literal",value:"'global-red-red-60'"},{name:"literal",value:"'global-red-red-60-15'"},{name:"literal",value:"'global-red-red-60-25'"},{name:"literal",value:"'global-red-red-70'"},{name:"literal",value:"'global-red-red-80'"},{name:"literal",value:"'global-red-red-90'"},{name:"literal",value:"'global-red-red-95'"},{name:"literal",value:"'global-rose-rose-05'"},{name:"literal",value:"'global-rose-rose-10'"},{name:"literal",value:"'global-rose-rose-20'"},{name:"literal",value:"'global-rose-rose-30'"},{name:"literal",value:"'global-rose-rose-40'"},{name:"literal",value:"'global-rose-rose-50'"},{name:"literal",value:"'global-rose-rose-60'"},{name:"literal",value:"'global-rose-rose-70'"},{name:"literal",value:"'global-rose-rose-80'"},{name:"literal",value:"'global-rose-rose-90'"},{name:"literal",value:"'global-rose-rose-95'"},{name:"literal",value:"'global-sky-sky-05'"},{name:"literal",value:"'global-sky-sky-10'"},{name:"literal",value:"'global-sky-sky-20'"},{name:"literal",value:"'global-sky-sky-30'"},{name:"literal",value:"'global-sky-sky-40'"},{name:"literal",value:"'global-sky-sky-50'"},{name:"literal",value:"'global-sky-sky-60'"},{name:"literal",value:"'global-sky-sky-70'"},{name:"literal",value:"'global-sky-sky-80'"},{name:"literal",value:"'global-sky-sky-90'"},{name:"literal",value:"'global-sky-sky-95'"},{name:"literal",value:"'global-slate-slate-05'"},{name:"literal",value:"'global-slate-slate-10'"},{name:"literal",value:"'global-slate-slate-20'"},{name:"literal",value:"'global-slate-slate-30'"},{name:"literal",value:"'global-slate-slate-40'"},{name:"literal",value:"'global-slate-slate-50'"},{name:"literal",value:"'global-slate-slate-60'"},{name:"literal",value:"'global-slate-slate-70'"},{name:"literal",value:"'global-slate-slate-80'"},{name:"literal",value:"'global-slate-slate-90'"},{name:"literal",value:"'global-slate-slate-95'"},{name:"literal",value:"'global-stone-stone-05'"},{name:"literal",value:"'global-stone-stone-10'"},{name:"literal",value:"'global-stone-stone-20'"},{name:"literal",value:"'global-stone-stone-30'"},{name:"literal",value:"'global-stone-stone-40'"},{name:"literal",value:"'global-stone-stone-50'"},{name:"literal",value:"'global-stone-stone-60'"},{name:"literal",value:"'global-stone-stone-70'"},{name:"literal",value:"'global-stone-stone-80'"},{name:"literal",value:"'global-stone-stone-90'"},{name:"literal",value:"'global-stone-stone-95'"},{name:"literal",value:"'global-teal-teal-05'"},{name:"literal",value:"'global-teal-teal-10'"},{name:"literal",value:"'global-teal-teal-20'"},{name:"literal",value:"'global-teal-teal-30'"},{name:"literal",value:"'global-teal-teal-40'"},{name:"literal",value:"'global-teal-teal-50'"},{name:"literal",value:"'global-teal-teal-60'"},{name:"literal",value:"'global-teal-teal-70'"},{name:"literal",value:"'global-teal-teal-80'"},{name:"literal",value:"'global-teal-teal-90'"},{name:"literal",value:"'global-teal-teal-95'"},{name:"literal",value:"'global-violet-violet-05'"},{name:"literal",value:"'global-violet-violet-10'"},{name:"literal",value:"'global-violet-violet-20'"},{name:"literal",value:"'global-violet-violet-30'"},{name:"literal",value:"'global-violet-violet-40'"},{name:"literal",value:"'global-violet-violet-50'"},{name:"literal",value:"'global-violet-violet-60'"},{name:"literal",value:"'global-violet-violet-70'"},{name:"literal",value:"'global-violet-violet-80'"},{name:"literal",value:"'global-violet-violet-90'"},{name:"literal",value:"'global-violet-violet-95'"},{name:"literal",value:"'global-yellow-yellow-05'"},{name:"literal",value:"'global-yellow-yellow-10'"},{name:"literal",value:"'global-yellow-yellow-20'"},{name:"literal",value:"'global-yellow-yellow-30'"},{name:"literal",value:"'global-yellow-yellow-40'"},{name:"literal",value:"'global-yellow-yellow-40-15'"},{name:"literal",value:"'global-yellow-yellow-40-25'"},{name:"literal",value:"'global-yellow-yellow-50'"},{name:"literal",value:"'global-yellow-yellow-60'"},{name:"literal",value:"'global-yellow-yellow-70'"},{name:"literal",value:"'global-yellow-yellow-80'"},{name:"literal",value:"'global-yellow-yellow-90'"},{name:"literal",value:"'global-yellow-yellow-95'"},{name:"literal",value:"'global-zinc-zinc-05'"},{name:"literal",value:"'global-zinc-zinc-10'"},{name:"literal",value:"'global-zinc-zinc-20'"},{name:"literal",value:"'global-zinc-zinc-30'"},{name:"literal",value:"'global-zinc-zinc-40'"},{name:"literal",value:"'global-zinc-zinc-50'"},{name:"literal",value:"'global-zinc-zinc-60'"},{name:"literal",value:"'global-zinc-zinc-70'"},{name:"literal",value:"'global-zinc-zinc-80'"},{name:"literal",value:"'global-zinc-zinc-90'"},{name:"literal",value:"'global-zinc-zinc-95'"}]},{name:"unknown"}],required:!1}},{key:"animation",value:{name:"union",raw:"'spin' | 'ping' | 'pulse' | 'bounce'",elements:[{name:"literal",value:"'spin'"},{name:"literal",value:"'ping'"},{name:"literal",value:"'pulse'"},{name:"literal",value:"'bounce'"}],required:!1}}]}},{name:"unknown"}]}],raw:"Omit<Origin, keyof Destination>"}]},{name:"ReactNode"}]},description:""},name:{required:!1,tsType:{name:"ReactNode"},description:""},badge:{required:!1,tsType:{name:"union",raw:"IBadgeProps | boolean",elements:[{name:"intersection",raw:"Destination & Omit<Origin, keyof Destination>",elements:[{name:"signature",type:"object",raw:`{
+  outline?: boolean
+}`,signature:{properties:[{key:"outline",value:{name:"boolean",required:!1}}]}},{name:"Omit",elements:[{name:"ComponentProps",elements:[{name:"literal",value:"'div'"}],raw:"ComponentProps<'div'>"},{name:"signature",type:"object",raw:`{
+  outline?: boolean
+}`,signature:{properties:[{key:"outline",value:{name:"boolean",required:!1}}]}}],raw:"Omit<Origin, keyof Destination>"}]},{name:"boolean"}]},description:""},active:{required:!1,tsType:{name:"boolean"},description:""},className:{required:!1,tsType:{name:"string"},description:""},onItemClick:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},style:{required:!1,tsType:{name:"CSSProperties"},description:""}}};const P=S("tab-bar"),K=u=>{const[r,w]=J(u,{trigger:"onItemClick",valuePropName:"activeId",defaultValuePropName:"defaultActiveId"}),{items:m,className:I,tabWidth:n}=u,f=!u.theme||u.theme==="default"?"brand":u.theme,k=a.useRef(m);k.current=m;const v=a.useRef(null),o=a.useRef(new Map),h=a.useRef(!0),[t,z]=a.useState({left:0,width:0}),c=a.useCallback(()=>{if(!r||!v.current){z({left:0,width:0});return}const l=o.current.get(r);if(!l){z({left:0,width:0});return}const e=l.offsetLeft,b=l.offsetWidth;z({left:e,width:b})},[r]),j=a.useCallback((l="smooth")=>{const e=k.current;if(!r||!v.current)return;const b=o.current.get(r);if(!b)return;const d=v.current,x=d.clientWidth,E=d.scrollLeft,C=b.offsetLeft,D=b.offsetWidth,M=C+D,V=E,_=E+x,O=C>=V&&M<=_,y=e.findIndex(g=>g.id===r),T=y===e.length-1;if(O&&!T&&y>=0){const g=e[y+1]?.id,s=g?o.current.get(g):null;if(s){const N=s.offsetLeft,R=s.offsetWidth,q=N+R*.5;if(q<=_)return;const L=q-x;d.scrollTo({left:Math.max(0,L),behavior:l});return}}if(!O){if(!T&&y>=0){const g=e[y+1]?.id,s=g?o.current.get(g):null;if(s){const N=s.offsetLeft,R=s.offsetWidth,L=N+R*.5-x;d.scrollTo({left:Math.max(0,L),behavior:l});return}}d.scrollTo({left:Math.max(0,C),behavior:l});return}},[r]);a.useLayoutEffect(()=>{c()},[c,n]),a.useEffect(()=>{if(!r)return;const l=setTimeout(()=>{h.current?(j("instant"),h.current=!1):j("smooth")},100);return()=>clearTimeout(l)},[j,r]),a.useEffect(()=>{const l=()=>{c()};return window.addEventListener("resize",l),()=>window.removeEventListener("resize",l)},[c]),a.useEffect(()=>{const l=v.current;if(!l)return;const e=()=>{c()};return l.addEventListener("scroll",e,{passive:!0}),()=>l.removeEventListener("scroll",e)},[c]);const A=(l,e)=>{e?o.current.set(l,e):o.current.delete(l)};return i.jsxs("div",{ref:v,className:$(P,I,{[`${P}--theme-${f}`]:f}),children:[t.width>0&&i.jsx("div",{className:`${P}__indicator`,style:{left:`${t.left}px`,width:`${t.width}px`}}),m.map((l,e)=>i.jsx(B,{ref:b=>A(l.id,b),onItemClick:()=>w(l,e),active:l.id===r,style:n?{width:n,minWidth:n}:{},...l},l.id))]})};K.__docgenInfo={description:"",methods:[],displayName:"TabBar"};export{K as T};

package/dist-storybook/assets/tab-bar.stories-Bp9w6nc3.js

@@ -0,0 +1,136 @@
+import{j as t,r as o}from"./iframe-CLEfhyJc.js";import{T as i}from"./tab-bar-DZ3oOU50.js";import{t as e}from"./store-D2RudmNr.js";import{T as x,S as g,M as v,P as y,a as T}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./classname-DoNrELT0.js";import"./icon-TJ3FHxUI.js";import"./colors-_6nFGM3e.js";import"./typography-DoV67nnS.js";import"./badge-Cc9u7jBX.js";import"./index-DRIh_SUo.js";import"./index-B-Ksafg0.js";import"./index-CaMbLGUB.js";const f=()=>{const n=`
+## ${e("common.table.title")}
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`items\` | \`ITabBarItem[]\` | ${e("common.table.yes")} | ${e("components.tabBar.argTypes.itemsDescription")} |
+| \`activeId\` | \`string\` | ${e("common.table.no")} | ${e("components.tabBar.argTypes.activeIdDescription")} |
+| \`defaultActiveId\` | \`string\` | ${e("common.table.no")} | ${e("components.tabBar.argTypes.defaultActiveIdDescription")} |
+| \`theme\` | \`'default' | 'brand' | 'neutral'\` | ${e("common.table.no")} | ${e("components.tabBar.argTypes.themeDescription")} |
+| \`onItemClick\` | \`(item: ITabBarItem, index: number) => void\` | ${e("common.table.no")} | ${e("components.tabBar.argTypes.onItemClickDescription")} |
+| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.tabBar.argTypes.classNameDescription")} |
+| \`...props\` | \`ComponentPropsWithRef<'div'>\` | ${e("common.table.no")} | ${e("components.tabBar.argTypes.propsDescription")} |
+`;return t.jsxs(t.Fragment,{children:[t.jsx(x,{}),t.jsx(g,{}),t.jsx(v,{children:e("components.tabBar.description")}),t.jsx(y,{}),t.jsx(v,{children:n}),t.jsx(T,{})]})},M={title:"Components/TabBar",component:i,parameters:{layout:"padded",docs:{page:f}},tags:["autodocs"],argTypes:{items:{control:!1,description:e("components.tabBar.argTypes.itemsDescription"),table:{type:{summary:"ITabBarItem[]"}}},activeId:{control:"text",description:e("components.tabBar.argTypes.activeIdDescription"),table:{type:{summary:"string"}}},defaultActiveId:{control:"text",description:e("components.tabBar.argTypes.defaultActiveIdDescription"),table:{type:{summary:"string"}}},theme:{control:"select",options:["default","brand","neutral"],description:e("components.tabBar.argTypes.themeDescription"),table:{type:{summary:'"default" | "brand" | "neutral"'},defaultValue:{summary:"default"}}},onItemClick:{action:"item-clicked",description:e("components.tabBar.argTypes.onItemClickDescription"),table:{type:{summary:"(item: ITabBarItem, index: number) => void"}}},className:{description:e("components.tabBar.argTypes.classNameDescription"),table:{type:{summary:"string"}}}}},m=[{id:"1",name:e("components.tabBar.stories.items.home"),icon:{name:"placeholder"}},{id:"2",name:e("components.tabBar.stories.items.search"),icon:{name:"placeholder"}},{id:"3",name:e("components.tabBar.stories.items.profile"),icon:{name:"placeholder"}}],c={render:()=>{const[n,a]=o.useState("1");return t.jsx(i,{items:m,activeId:n,onItemClick:s=>a(s.id)})}},d={name:e("components.tabBar.stories.withIcons.name"),render:()=>{const[n,a]=o.useState("1");return t.jsx(i,{items:[{id:"1",name:e("components.tabBar.stories.items.home"),icon:{name:"placeholder"}},{id:"2",name:e("components.tabBar.stories.items.search"),icon:{name:"placeholder"}},{id:"3",name:e("components.tabBar.stories.items.profile"),icon:{name:"placeholder"}}],activeId:n,onItemClick:s=>a(s.id)})}},p={name:e("components.tabBar.stories.withBadges.name"),render:()=>{const[n,a]=o.useState("1");return t.jsx(i,{items:[{id:"1",name:e("components.tabBar.stories.items.home"),icon:{name:"placeholder"},badge:{children:3}},{id:"2",name:e("components.tabBar.stories.items.messages"),icon:{name:"placeholder"},badge:!0},{id:"3",name:e("components.tabBar.stories.items.profile"),icon:{name:"placeholder"}}],activeId:n,onItemClick:s=>a(s.id)})}},l={name:e("components.tabBar.stories.textOnly.name"),render:()=>{const[n,a]=o.useState("1");return t.jsx(i,{items:[{id:"1",name:e("components.tabBar.stories.items.tab1")},{id:"2",name:e("components.tabBar.stories.items.tab2")},{id:"3",name:e("components.tabBar.stories.items.tab3")}],activeId:n,onItemClick:s=>a(s.id)})}},b={name:e("components.tabBar.stories.themes.name"),render:()=>{const[n,a]=o.useState("1"),[s,u]=o.useState("1"),[h,B]=o.useState("1");return t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:[t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:e("components.tabBar.stories.themes.defaultTheme")}),t.jsx(i,{items:m,activeId:n,onItemClick:r=>a(r.id)})]}),t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:e("components.tabBar.stories.themes.brandTheme")}),t.jsx(i,{theme:"brand",items:m,activeId:s,onItemClick:r=>u(r.id)})]}),t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:e("components.tabBar.stories.themes.neutralTheme")}),t.jsx(i,{theme:"neutral",items:m,activeId:h,onItemClick:r=>B(r.id)})]})]})}},I={name:e("components.tabBar.stories.interactive.name"),render:()=>{const[n,a]=o.useState("1");return t.jsxs("div",{children:[t.jsx(i,{items:m,activeId:n,onItemClick:s=>a(s.id)}),t.jsx("p",{style:{marginTop:"16px"},children:e("components.tabBar.stories.interactive.activeTab",{id:n})})]})}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [activeId, setActiveId] = useState('1');
+    return <TabBar items={items} activeId={activeId} onItemClick={item => setActiveId(item.id)} />;
+  }
+}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  name: t('components.tabBar.stories.withIcons.name'),
+  render: () => {
+    const [activeId, setActiveId] = useState('1');
+    return <TabBar items={[{
+      id: '1',
+      name: t('components.tabBar.stories.items.home'),
+      icon: {
+        name: 'placeholder'
+      }
+    }, {
+      id: '2',
+      name: t('components.tabBar.stories.items.search'),
+      icon: {
+        name: 'placeholder'
+      }
+    }, {
+      id: '3',
+      name: t('components.tabBar.stories.items.profile'),
+      icon: {
+        name: 'placeholder'
+      }
+    }]} activeId={activeId} onItemClick={item => setActiveId(item.id)} />;
+  }
+}`,...d.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  name: t('components.tabBar.stories.withBadges.name'),
+  render: () => {
+    const [activeId, setActiveId] = useState('1');
+    return <TabBar items={[{
+      id: '1',
+      name: t('components.tabBar.stories.items.home'),
+      icon: {
+        name: 'placeholder'
+      },
+      badge: {
+        children: 3
+      }
+    }, {
+      id: '2',
+      name: t('components.tabBar.stories.items.messages'),
+      icon: {
+        name: 'placeholder'
+      },
+      badge: true
+    }, {
+      id: '3',
+      name: t('components.tabBar.stories.items.profile'),
+      icon: {
+        name: 'placeholder'
+      }
+    }]} activeId={activeId} onItemClick={item => setActiveId(item.id)} />;
+  }
+}`,...p.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  name: t('components.tabBar.stories.textOnly.name'),
+  render: () => {
+    const [activeId, setActiveId] = useState('1');
+    return <TabBar items={[{
+      id: '1',
+      name: t('components.tabBar.stories.items.tab1')
+    }, {
+      id: '2',
+      name: t('components.tabBar.stories.items.tab2')
+    }, {
+      id: '3',
+      name: t('components.tabBar.stories.items.tab3')
+    }]} activeId={activeId} onItemClick={item => setActiveId(item.id)} />;
+  }
+}`,...l.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  name: t('components.tabBar.stories.themes.name'),
+  render: () => {
+    const [activeId1, setActiveId1] = useState('1');
+    const [activeId2, setActiveId2] = useState('1');
+    const [activeId3, setActiveId3] = useState('1');
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '24px'
+    }}>
+        <div>
+          <h3 style={{
+          marginBottom: '12px'
+        }}>
+            {t('components.tabBar.stories.themes.defaultTheme')}
+          </h3>
+          <TabBar items={items} activeId={activeId1} onItemClick={item => setActiveId1(item.id)} />
+        </div>
+        <div>
+          <h3 style={{
+          marginBottom: '12px'
+        }}>
+            {t('components.tabBar.stories.themes.brandTheme')}
+          </h3>
+          <TabBar theme="brand" items={items} activeId={activeId2} onItemClick={item => setActiveId2(item.id)} />
+        </div>
+        <div>
+          <h3 style={{
+          marginBottom: '12px'
+        }}>
+            {t('components.tabBar.stories.themes.neutralTheme')}
+          </h3>
+          <TabBar theme="neutral" items={items} activeId={activeId3} onItemClick={item => setActiveId3(item.id)} />
+        </div>
+      </div>;
+  }
+}`,...b.parameters?.docs?.source}}};I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
+  name: t('components.tabBar.stories.interactive.name'),
+  render: () => {
+    const [activeId, setActiveId] = useState('1');
+    return <div>
+        <TabBar items={items} activeId={activeId} onItemClick={item => setActiveId(item.id)} />
+        <p style={{
+        marginTop: '16px'
+      }}>
+          {t('components.tabBar.stories.interactive.activeTab', {
+          id: activeId
+        })}
+        </p>
+      </div>;
+  }
+}`,...I.parameters?.docs?.source}}};const R=["Default","WithIcons","WithBadges","TextOnly","Themes","Interactive"];export{c as Default,I as Interactive,l as TextOnly,b as Themes,p as WithBadges,d as WithIcons,R as __namedExportsOrder,M as default};

package/dist-storybook/assets/text-area-CAmJ2yms.js

@@ -0,0 +1 @@
+import{r,j as s}from"./iframe-CLEfhyJc.js";import{c as i,g as h}from"./classname-DoNrELT0.js";import{g as f,I as x}from"./input-wrapper-D_9hAdHZ.js";import{T as N}from"./typography-DoV67nnS.js";import{u as b}from"./index-DRIh_SUo.js";import{S as c}from"./skeleton-Dn8rwbgX.js";const o=h("text-area"),_=r.forwardRef((m,p)=>{const{wrapper:l,props:e}=f(m),[g,n]=r.useState(e.autoFocus),t=r.useRef(null),[u,d]=b(e,{trigger:"onChange",valuePropName:"value"});return r.useImperativeHandle(p,()=>({focus:()=>t.current?.focus?.(),blur:()=>t.current?.blur?.()})),s.jsx(x,{...l,className:i(o,l.className),align:"start",isFocus:g,onClick:()=>t.current?.focus(),bottomInput:e.maxLength?s.jsxs(N,{size:"x-small",weight:400,color:"alias-object-secondary",className:`${o}__count`,children:["(",u?.length||0,"/",e.maxLength,")"]}):null,loadingNode:e.loading&&s.jsxs("div",{className:`${o}__loading`,children:[s.jsx(c,{width:128,height:12,shape:"pill"}),s.jsx(c,{width:40,height:12,shape:"pill"})]}),children:s.jsx("textarea",{rows:3,...e,maxLength:e.maxLength,value:u,onChange:a=>d?.(a.target.value),disabled:l.disabled,onFocus:a=>{n(!0),e.onFocus?.(a)},onBlur:a=>{n(!1),e.onBlur?.(a)},ref:t,className:i(`${o}__input`,{[`${o}__input--auto-height`]:e.autoHeight},e.inputClassName)})})});_.__docgenInfo={description:"",methods:[{name:"focus",docblock:null,modifiers:[],params:[],returns:null},{name:"blur",docblock:null,modifiers:[],params:[],returns:null}],displayName:"TextArea"};export{_ as T};