@v-miniapp/ui-react 1.0.60 → 1.0.71

package/dist-storybook/assets/date-field.stories-5Tlzdpvr.js

@@ -0,0 +1,129 @@
+import{r as i,j as t}from"./iframe-Crg_lbde.js";import{T as ae,S as le,a as W,P as se,b as ne}from"./blocks-CB7UwFa4.js";import{c as M,g as k}from"./classname-Bl5epEs-.js";import{d as q}from"./date-DWIyMGld.js";import{D as re}from"./date-picker-DeB43YU4.js";import{S as L,a as B,b as E}from"./sheet-body-2dWL2AE5.js";import{S as K}from"./sheet-footer-DuPhbVOb.js";import{B as U}from"./button-BLW8SOpg.js";import{C as G}from"./calendar-ySr-9cXG.js";import{u as J}from"./index-hDlmuyu2.js";import{g as Q,I as Z}from"./input-wrapper-Gd3QJKqj.js";import{S as j}from"./skeleton-BVLpHxKT.js";import{t as e}from"./store-BwIebEt6.js";import{o as O}from"./omit-CRXr8Lio.js";import{I as ie}from"./icon-Cc9W858e.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CdnALcTP.js";import"./embla-carousel-react.esm-DOEAp-w3.js";import"./typography-CMIMyivt.js";import"./colors-_6nFGM3e.js";import"./app.store-BJVKVv1J.js";import"./react-DO0-owxu.js";import"./index-B-Ksafg0.js";import"./label-zfqCJTGJ.js";const de=k("date-field-input"),P=i.forwardRef((n,c)=>{const{value:a,onChange:o,onCompleted:r,defaultValue:p,...b}=n,f=a!==void 0,[D,m]=i.useState(()=>a?C(a):n.defaultValue?C(n.defaultValue):""),l=i.useRef(null),d=i.useRef("");return i.useImperativeHandle(c,()=>l.current),i.useEffect(()=>{a!==void 0&&m(C(a))},[a?.getTime()]),t.jsx("input",{inputMode:"numeric",...b,className:M(de,n.className),value:D,onChange:u=>{let h=u.target.selectionEnd||0;const F=z(u.target.value),s=d.current.length>u.target.value.length;if(d.current=F,s||[2,3,5,6].includes(h)&&(h+=1),m(F),setTimeout(()=>{u.target.setSelectionRange(h,h)}),F.length===10){const g=H(F);g&&r?.(g,h)}},onBlur:u=>{const h=z(u.target.value),F=H(h);f?(m(a?C(a):""),d.current="",o?.(F)):q(F).isValid()?(m(C(F)),o?.(F)):(m(""),d.current="",a!==null&&o?.(null)),n.onBlur?.(u)},ref:l})}),z=n=>{const c=n.replace(/\D/g,""),a=c.slice(0,2),o=c.slice(2,4),r=c.slice(4,8);let p="";return a&&(p+=a+(a.length===2?"/":"")),o&&(p+=o+(o.length===2?"/":"")),r&&(p+=r),p},C=n=>n?q(n).format("DD/MM/YYYY"):"",H=n=>{if(!n||n.length!==10)return null;const[c,a,o]=n.split("/");try{return new Date(parseInt(o),parseInt(a)-1,parseInt(c))}catch{return null}};P.__docgenInfo={description:"",methods:[],displayName:"Input"};const _=({title:n,confirmButton:c,open:a,onCancel:o,value:r,defaultValue:p,onSelect:b,...f})=>{const D=r!==void 0,[m,l]=i.useState(r||p||new Date),d=i.useCallback(()=>{D&&m.getTime()!==r?.getTime()&&l(r||new Date)},[D,m,r]);return i.useEffect(()=>{r===null&&l(new Date),r&&l(r)},[r?.getTime()]),t.jsxs(L,{open:a,children:[t.jsx(B,{title:n,closeIcon:!0,onCloseClick:()=>{o?.(),d()}}),t.jsx(E,{children:a&&t.jsx(re,{...f,value:m,onChange:l})}),t.jsx(K,{children:t.jsx(U,{size:"large",children:"Xác nhận",theme:"neutral",...c,onClick:()=>{b?.(m),d()}})})]})};_.__docgenInfo={description:"",methods:[],displayName:"DatePickerSheet"};const Y=k("calendar-sheet"),ee=({title:n,confirmButton:c,open:a,onCancel:o,value:r,defaultValue:p,onSelect:b,className:f,...D})=>{const m=r!==void 0,[l,d]=i.useState(r||p||null),u=i.useCallback(()=>{m&&l?.getTime()!==r?.getTime()&&d(r||null)},[m,l,r]);return i.useEffect(()=>{r===null&&d(null),r&&d(r)},[r?.getTime()]),t.jsxs(L,{open:a,className:M(Y,f),children:[t.jsx(B,{title:n,closeIcon:!0,onCloseClick:()=>{o?.(),u()}}),t.jsx(E,{className:`${Y}__body`,children:a&&t.jsx(G,{type:"single",...D,onChange:d,value:l})}),t.jsx(K,{children:t.jsx(U,{size:"large",children:"Xác nhận",theme:"neutral",...c,disabled:!l,onClick:()=>{l&&(b?.(l),u())}})})]})};ee.__docgenInfo={description:"",methods:[],displayName:"CalendarSingleSheet"};const T=k("date-field"),x=i.forwardRef((n,c)=>{const{wrapper:a,props:o}=Q(n),{picker:r="date-picker",onChange:p,value:b,defaultValue:f,pickerProps:D}=o,[m,l]=i.useState(o.autoFocus),[d,u]=J(o,{trigger:"onChange",valuePropName:"value",defaultValuePropName:"defaultValue",defaultValue:null}),h=i.useRef(null),[F,s]=i.useState(!1);return i.useImperativeHandle(c,()=>({focus:()=>h.current?.focus?.(),blur:()=>h.current?.blur?.()})),t.jsxs(t.Fragment,{children:[t.jsx(Z,{trailingIcon:{name:"calendar",color:"alias-object-secondary"},onTrailingIconClick:g=>{g.stopPropagation(),s(!0)},...a,className:a.className,isFocus:m,onClick:()=>h.current?.focus(),loadingNode:o.loading&&t.jsxs("div",{className:`${T}__loading`,children:[t.jsxs("div",{className:`${T}__loading__left`,children:[t.jsx(j,{width:40,height:13,shape:"pill"}),t.jsx(j,{width:128,height:13,shape:"pill"})]}),t.jsx(j,{width:40,height:13,shape:"pill"})]}),children:t.jsx(P,{...o,value:d,onChange:u,disabled:a.disabled,onFocus:g=>{l(!0),o.onFocus?.(g)},onBlur:g=>{l(!1),o.onBlur?.(g)},ref:h,className:M(T,o.inputClassName)})}),r==="date-picker"&&t.jsx(_,{open:F,value:d,onSelect:g=>{s(!1),u(g)},onCancel:()=>s(!1),title:a.label?.text,...D}),r==="calendar"&&t.jsx(ee,{open:F,value:d,onSelect:g=>{s(!1),u(g)},onCancel:()=>s(!1),title:a.label?.text,...D})]})});x.__docgenInfo={description:"",methods:[{name:"focus",docblock:null,modifiers:[],params:[],returns:null},{name:"blur",docblock:null,modifiers:[],params:[],returns:null}],displayName:"DateField"};const X=k("calendar-sheet"),te=({className:n,title:c,confirmButton:a,open:o,onCancel:r,value:p,defaultValue:b,onSelect:f,...D})=>{const m=p!==void 0,[l,d]=i.useState(p||b||[null,null]),u=i.useCallback(()=>{m&&d(p||[null,null])},[m,p]);return i.useEffect(()=>{p===null&&d([null,null]),p&&d(p)},[p]),t.jsxs(L,{open:o,className:M(X,n),children:[t.jsx(B,{title:c,closeIcon:!0,onCloseClick:()=>{r?.(),u()}}),t.jsx(E,{className:`${X}__body`,children:o&&t.jsx(G,{type:"range",...D,value:l,onPick:d})}),t.jsx(K,{children:t.jsx(U,{size:"large",children:"Xác nhận",theme:"neutral",...a,disabled:!l||l[0]===null||l[1]===null,onClick:()=>{f?.(l),u()}})})]})};te.__docgenInfo={description:"",methods:[],displayName:"CalendarRangeSheet"};const A=k("date-field-range"),y=i.forwardRef((n,c)=>{const{wrapper:a,props:o}=Q(n),{picker:r="date-picker",pickerProps:p}=o,[b,f]=i.useState(-1),[D,m]=i.useState(o.autoFocus),[l,d]=J(o,{trigger:"onChange",valuePropName:"value",defaultValuePropName:"defaultValue",defaultValue:{from:null,to:null}}),u=i.useRef(null),h=i.useRef(null),F=()=>{D||(l?.from?h.current?.focus?.():u.current?.focus?.())};return i.useImperativeHandle(c,()=>({focus:F,blur:()=>{u.current?.blur?.(),h.current?.blur?.()}})),t.jsxs(t.Fragment,{children:[t.jsx(Z,{trailingIcon:{name:"calendar",color:"alias-object-secondary"},onTrailingIconClick:s=>{s.stopPropagation(),f(0)},...a,className:a.className,isFocus:D,onClick:()=>F(),loadingNode:o.loading&&t.jsxs("div",{className:`${A}__loading`,children:[t.jsx(j,{width:128,height:13,shape:"pill"}),t.jsx(j,{width:128,height:13,shape:"pill"})]}),children:t.jsxs("div",{className:A,children:[t.jsx(P,{...O(o,["value","onChange","defaultValue"]),placeholder:o.placeholder?.from,value:l?.from,onChange:s=>d({...l,from:s}),onCompleted:(s,g)=>{g<10||(h.current?.focus?.(),h.current?.setSelectionRange(0,0))},disabled:a.disabled,onKeyDown:s=>{const g=s.key==="ArrowRight";u.current?.selectionStart===10&&g&&(h.current?.focus(),h.current?.setSelectionRange(0,0)),o.onKeyDown?.(s)},onFocus:s=>{m(!0),o.onFocus?.(s)},onBlur:s=>{m(!1),o.onBlur?.(s)},ref:u,className:o.inputClassName}),t.jsx(ie,{name:"arrow-right",color:a.error?"alias-support-negative":a.success?"alias-support-positive":"alias-object-secondary",size:16}),t.jsx(P,{...O(o,["value","onChange","defaultValue"]),placeholder:o.placeholder?.to,value:l?.to,onChange:s=>d({...l,to:s}),disabled:a.disabled,onKeyDown:s=>{const g=s.key==="Delete",oe=s.key==="ArrowLeft";h.current?.selectionStart===0&&(g||oe)&&u.current?.focus(),o.onKeyDown?.(s)},onFocus:s=>{m(!0),o.onFocus?.(s)},onBlur:s=>{m(!1),o.onBlur?.(s)},ref:h,className:o.inputClassName})]})}),r==="date-picker"&&t.jsxs(t.Fragment,{children:[t.jsx(_,{open:b===0,value:l?.from,onSelect:s=>{f(1),d({...l,from:s})},onCancel:()=>f(-1),title:t.jsxs(t.Fragment,{children:[a.label?.text," từ ngày"]}),...p?.[0]}),t.jsx(_,{open:b===1,value:l?.to,onSelect:s=>{f(-1),d({...l,to:s})},min:l?.from,onCancel:()=>f(-1),title:t.jsxs(t.Fragment,{children:[a.label?.text," đến ngày"]}),...p?.[1]})]}),r==="calendar"&&t.jsx(te,{open:b===0,value:[l?.from||null,l?.to||null],onSelect:s=>{f(-1),d({from:s[0],to:s[1]})},onCancel:()=>f(-1),title:t.jsx(t.Fragment,{children:a.label?.text}),...p})]})});y.__docgenInfo={description:"",methods:[{name:"focus",docblock:null,modifiers:[],params:[],returns:null},{name:"blur",docblock:null,modifiers:[],params:[],returns:null}],displayName:"DateFieldRange"};const ce=()=>{const n=`
+## ${e("common.table.title")}
+
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`value\` | \`Date | null\` | ${e("common.table.no")} | ${e("components.dateField.valueDescription")} |
+| \`onChange\` | \`(value: Date | null) => void\` | ${e("common.table.no")} | ${e("components.dateField.onChangeDescription")} |
+| \`picker\` | \`boolean | IDatePickerSheetProps\` | ${e("common.table.no")} | ${e("components.dateField.pickerDescription")} |
+| \`loading\` | \`boolean\` | ${e("common.table.no")} | ${e("components.dateField.loadingDescription")} |
+| \`label\` | \`ILabelProps\` | ${e("common.table.no")} | ${e("components.dateField.labelDescription")} |
+| \`placeholder\` | \`string\` | ${e("common.table.no")} | ${e("components.dateField.placeholderDescription")} |
+| \`shape\` | \`'rounded' | 'pill'\` | ${e("common.table.no")} | ${e("components.dateField.shapeDescription")} |
+| \`disabled\` | \`boolean\` | ${e("common.table.no")} | ${e("components.dateField.disabledDescription")} |
+| \`error\` | \`boolean\` | ${e("common.table.no")} | ${e("components.dateField.errorDescription")} |
+| \`errorMessage\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.dateField.errorMessageDescription")} |
+| \`success\` | \`boolean\` | ${e("common.table.no")} | ${e("components.dateField.successDescription")} |
+| \`successMessage\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.dateField.successMessageDescription")} |
+| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.dateField.classNameDescription")} |
+| \`...props\` | \`ComponentPropsWithRef<'div'>\` | ${e("common.table.no")} | ${e("components.dateField.propsDescription")} |
+  `;return t.jsxs(t.Fragment,{children:[t.jsx(ae,{}),t.jsx(le,{}),t.jsx(W,{children:e("components.dateField.description")}),t.jsx(se,{}),t.jsx(W,{children:n}),t.jsx(ne,{})]})},Me={title:"Components/DateField",component:x,parameters:{layout:"padded",docs:{page:ce}},tags:["autodocs"],argTypes:{value:{control:"date",description:e("components.dateField.valueDescription"),table:{type:{summary:"Date | null"}}},onChange:{action:"changed",description:e("components.dateField.onChangeDescription"),table:{type:{summary:"(value: Date | null) => void"}}},picker:{control:"boolean",description:e("components.dateField.pickerDescription"),table:{type:{summary:"boolean | IDatePickerSheetProps"},defaultValue:{summary:"true"}}},loading:{control:"boolean",description:e("components.dateField.loadingDescription"),table:{type:{summary:"boolean"}}},placeholder:{control:"text",description:e("components.dateField.placeholderDescription"),table:{type:{summary:"string"}}},shape:{control:"select",options:["rounded","pill"],description:e("components.dateField.shapeDescription"),table:{type:{summary:'"rounded" | "pill"'},defaultValue:{summary:"rounded"}}},disabled:{control:"boolean",description:e("components.dateField.disabledDescription"),table:{type:{summary:"boolean"}}},error:{control:"boolean",description:e("components.dateField.errorDescription"),table:{type:{summary:"boolean"}}},errorMessage:{control:"text",description:e("components.dateField.errorMessageDescription"),table:{type:{summary:"ReactNode"}}},success:{control:"boolean",description:e("components.dateField.successDescription"),table:{type:{summary:"boolean"}}},successMessage:{control:"text",description:e("components.dateField.successMessageDescription"),table:{type:{summary:"ReactNode"}}},className:{control:"text",description:e("components.dateField.classNameDescription"),table:{type:{summary:"string"}}}}},N={storyName:e("components.dateField.stories.default.title"),args:{defaultValue:new Date,picker:"calendar",placeholder:e("components.dateField.stories.default.placeholder")}},S={storyName:e("components.dateField.stories.controlled.title"),render:()=>{const[n,c]=i.useState(new Date);return t.jsx(x,{value:n,picker:"calendar",onChange:c,placeholder:e("components.dateField.stories.default.placeholder")})}},w={storyName:e("components.dateField.stories.withLabel.title"),args:{label:{text:e("components.dateField.stories.withLabel.label")},placeholder:e("components.dateField.stories.withLabel.placeholder")}},V={storyName:e("components.dateField.stories.withoutPicker.title"),args:{picker:!1,placeholder:e("components.dateField.stories.withoutPicker.placeholder")}},$={storyName:e("components.dateField.stories.states.title"),render:()=>t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsx(x,{placeholder:e("components.dateField.stories.default.placeholder")}),t.jsx(x,{value:new Date}),t.jsx(x,{disabled:!0,placeholder:e("components.dateField.disabledDescription")}),t.jsx(x,{error:!0,errorMessage:e("components.dateField.stories.states.errorMessage"),placeholder:e("components.dateField.stories.default.placeholder")}),t.jsx(x,{loading:!0,placeholder:e("components.dateField.stories.states.loading")})]})},R={storyName:e("components.dateField.stories.shapes.title"),render:()=>t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsx(x,{shape:"rounded",placeholder:e("components.dateField.stories.shapes.rounded")}),t.jsx(x,{shape:"pill",placeholder:e("components.dateField.stories.shapes.pill")})]})},v={storyName:e("components.dateField.stories.rangeDateField.title"),render:()=>{const[n,c]=i.useState({from:new Date("2025-01-01"),to:new Date("2025-01-10")});return t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsx(y,{label:{text:e("components.dateField.stories.rangeDateField.datePickerControlled.label")},placeholder:{from:e("components.dateField.stories.rangeDateField.placeholder.from"),to:e("components.dateField.stories.rangeDateField.placeholder.to")},value:n,onChange:c}),t.jsx(y,{label:{text:e("components.dateField.stories.rangeDateField.calendarControlled.label")},placeholder:{from:e("components.dateField.stories.rangeDateField.placeholder.from"),to:e("components.dateField.stories.rangeDateField.placeholder.to")},value:n,onChange:c,picker:"calendar"}),t.jsx(y,{label:{text:e("components.dateField.stories.rangeDateField.inputControlled.label")},placeholder:{from:e("components.dateField.stories.rangeDateField.placeholder.from"),to:e("components.dateField.stories.rangeDateField.placeholder.to")},value:n,onChange:c,picker:!1}),t.jsx(y,{label:{text:e("components.dateField.stories.rangeDateField.datePickerUncontrolled.label")},placeholder:{from:e("components.dateField.stories.rangeDateField.placeholder.from"),to:e("components.dateField.stories.rangeDateField.placeholder.to")},defaultValue:n}),t.jsx(y,{label:{text:e("components.dateField.stories.rangeDateField.calendarUncontrolled.label")},placeholder:{from:e("components.dateField.stories.rangeDateField.placeholder.from"),to:e("components.dateField.stories.rangeDateField.placeholder.to")},defaultValue:n,picker:"calendar"}),t.jsx(y,{label:{text:e("components.dateField.stories.rangeDateField.inputUncontrolled.label")},placeholder:{from:e("components.dateField.stories.rangeDateField.placeholder.from"),to:e("components.dateField.stories.rangeDateField.placeholder.to")},defaultValue:n,picker:!1})]})}},I={storyName:e("components.dateField.stories.interactive.title"),args:{placeholder:e("components.dateField.stories.default.placeholder")}};N.parameters={...N.parameters,docs:{...N.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.default.title'),
+  args: {
+    defaultValue: new Date(),
+    picker: 'calendar',
+    placeholder: t('components.dateField.stories.default.placeholder')
+  }
+}`,...N.parameters?.docs?.source}}};S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.controlled.title'),
+  render: () => {
+    const [date, setDate] = useState<Date | null>(new Date());
+    return <DateField value={date} picker="calendar" onChange={setDate} placeholder={t('components.dateField.stories.default.placeholder')} />;
+  }
+}`,...S.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.withLabel.title'),
+  args: {
+    label: {
+      text: t('components.dateField.stories.withLabel.label')
+    },
+    placeholder: t('components.dateField.stories.withLabel.placeholder')
+  }
+}`,...w.parameters?.docs?.source}}};V.parameters={...V.parameters,docs:{...V.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.withoutPicker.title'),
+  args: {
+    picker: false,
+    placeholder: t('components.dateField.stories.withoutPicker.placeholder')
+  }
+}`,...V.parameters?.docs?.source}}};$.parameters={...$.parameters,docs:{...$.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.states.title'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <DateField placeholder={t('components.dateField.stories.default.placeholder')} />
+      <DateField value={new Date()} />
+      <DateField disabled placeholder={t('components.dateField.disabledDescription')} />
+      <DateField error errorMessage={t('components.dateField.stories.states.errorMessage')} placeholder={t('components.dateField.stories.default.placeholder')} />
+      <DateField loading placeholder={t('components.dateField.stories.states.loading')} />
+    </div>
+}`,...$.parameters?.docs?.source}}};R.parameters={...R.parameters,docs:{...R.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.shapes.title'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <DateField shape="rounded" placeholder={t('components.dateField.stories.shapes.rounded')} />
+      <DateField shape="pill" placeholder={t('components.dateField.stories.shapes.pill')} />
+    </div>
+}`,...R.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.rangeDateField.title'),
+  render: () => {
+    const [range, setRange] = useState<IDateFieldRangeValue>({
+      from: new Date('2025-01-01'),
+      to: new Date('2025-01-10')
+    });
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }}>
+        <DateFieldRangeComponent label={{
+        text: t('components.dateField.stories.rangeDateField.datePickerControlled.label')
+      }} placeholder={{
+        from: t('components.dateField.stories.rangeDateField.placeholder.from'),
+        to: t('components.dateField.stories.rangeDateField.placeholder.to')
+      }} value={range} onChange={setRange} />
+        <DateFieldRangeComponent label={{
+        text: t('components.dateField.stories.rangeDateField.calendarControlled.label')
+      }} placeholder={{
+        from: t('components.dateField.stories.rangeDateField.placeholder.from'),
+        to: t('components.dateField.stories.rangeDateField.placeholder.to')
+      }} value={range} onChange={setRange} picker="calendar" />
+
+        <DateFieldRangeComponent label={{
+        text: t('components.dateField.stories.rangeDateField.inputControlled.label')
+      }} placeholder={{
+        from: t('components.dateField.stories.rangeDateField.placeholder.from'),
+        to: t('components.dateField.stories.rangeDateField.placeholder.to')
+      }} value={range} onChange={setRange} picker={false} />
+
+        <DateFieldRangeComponent label={{
+        text: t('components.dateField.stories.rangeDateField.datePickerUncontrolled.label')
+      }} placeholder={{
+        from: t('components.dateField.stories.rangeDateField.placeholder.from'),
+        to: t('components.dateField.stories.rangeDateField.placeholder.to')
+      }} defaultValue={range} />
+
+        <DateFieldRangeComponent label={{
+        text: t('components.dateField.stories.rangeDateField.calendarUncontrolled.label')
+      }} placeholder={{
+        from: t('components.dateField.stories.rangeDateField.placeholder.from'),
+        to: t('components.dateField.stories.rangeDateField.placeholder.to')
+      }} defaultValue={range} picker="calendar" />
+
+        <DateFieldRangeComponent label={{
+        text: t('components.dateField.stories.rangeDateField.inputUncontrolled.label')
+      }} placeholder={{
+        from: t('components.dateField.stories.rangeDateField.placeholder.from'),
+        to: t('components.dateField.stories.rangeDateField.placeholder.to')
+      }} defaultValue={range} picker={false} />
+      </div>;
+  }
+}`,...v.parameters?.docs?.source}}};I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dateField.stories.interactive.title'),
+  args: {
+    placeholder: t('components.dateField.stories.default.placeholder')
+  }
+}`,...I.parameters?.docs?.source}}};const Te=["Default","Controlled","WithLabel","WithoutPicker","States","Shapes","DateFieldRange","Interactive"];export{S as Controlled,v as DateFieldRange,N as Default,I as Interactive,R as Shapes,$ as States,w as WithLabel,V as WithoutPicker,Te as __namedExportsOrder,Me as default};

package/dist-storybook/assets/date-picker-DeB43YU4.js

@@ -0,0 +1 @@
+import{r as n,j as p}from"./iframe-Crg_lbde.js";import{u as Y}from"./index-hDlmuyu2.js";import{o as ae}from"./omit-CRXr8Lio.js";import{g as se,c as A}from"./classname-Bl5epEs-.js";import{u as ne}from"./embla-carousel-react.esm-DOEAp-w3.js";import{T as oe}from"./typography-CMIMyivt.js";import{d as E}from"./date-DWIyMGld.js";const F=se("date-picker"),re={CIRCLE_DEGREES:360,WHEEL_ITEM_SIZE:24,WHEEL_ITEM_COUNT:80,WHEEL_ITEMS_IN_VIEW:4},T=`${F}-item`,{CIRCLE_DEGREES:$,WHEEL_ITEM_COUNT:U,WHEEL_ITEMS_IN_VIEW:le,WHEEL_ITEM_SIZE:q}=re,L=$/U,ce=L*le,Z=Math.round(q/2/Math.tan(Math.PI/U)),R=(e,o)=>Math.abs(e-o)<ce,ie=(e,o,a,r,s)=>{const f=e.slideNodes()[o],l=e.scrollProgress()*s,i=e.scrollSnapList()[o]*s,t=i+s,u=i-s;let O=!1,d=o*-L;if(R(l,i)&&(O=!0),R(l,u)&&(O=!0,d=-$+(r-o)*L),R(l,t)&&(O=!0,d=-(s%$)-o*L),O){const c=Math.abs(l-i)<L/2;f.style.opacity=c?"1":"0.25",f.style.transform=`translateY(-${o*100}%) rotateX(${d}deg) translateZ(${Z}px)`}else f.style.opacity="0",f.style.transform="none"},ue=(e,o)=>{e.containerNode().style.transform=`translateZ(${Z}px) rotateX(${o}deg)`},k=e=>{const{className:o,items:a,activeIndex:r=0,renderLabel:s,onChange:f}=e,l=!0,[i,t]=ne({loop:l,axis:"y",dragFree:!0,containScroll:!1,watchSlides:!1,startIndex:r}),u=a.length,O=n.useRef(null),d=u*L,c=0,g=n.useCallback(h=>{if(!h)return;const{translate:y,slideLooper:I}=h.internalEngine();y.clear(),y.toggleActive(!1),I.loopPoints.forEach(({translate:M})=>{M.clear(),M.toggleActive(!1)})},[]),C=n.useCallback(h=>{const I=(u*L-c)*h.scrollProgress();ue(h,I),h.slideNodes().forEach((M,D)=>{ie(h,D,l,u,d)})},[u,c,d,l]);return n.useEffect(()=>{if(!t)return;t.on("pointerUp",y=>{const{scrollTo:I,target:M,location:D}=y.internalEngine(),j=M.get()-D.get(),H=Math.abs(j)<q/2.5?10:.1,x=j*H;I.distance(x,!0)}),t.on("scroll",C),t.on("reInit",y=>{g(y),C(y)}),g(t),C(t);const h=()=>{f&&f(t.selectedScrollSnap())};return t.on("select",h),()=>{t.off("select",h)}},[t,g,C,f]),p.jsx("div",{className:A(T,o),children:p.jsx("div",{className:`${T}__scene`,ref:O,children:p.jsx("div",{className:`${T}__viewport`,ref:i,children:p.jsx("div",{className:`${T}__container`,children:a.map(h=>p.jsx("div",{className:`${T}__slide`,children:p.jsx(oe,{size:"base",weight:"600",children:s?.(h)||h})},h))})})})})};k.__docgenInfo={description:"",methods:[],displayName:"DatePickerItem"};const de=e=>{const{type:o,value:a,max:r,min:s,hasHour:f,renderLabels:l}=e;let i,t,u;switch(o){case"day":{u=l?.days||ge,i=r&&E(r).startOf("month").valueOf()===E(a).startOf("month").valueOf()?r.getDate():void 0,t=s&&E(s).startOf("month").valueOf()===E(a).startOf("month").valueOf()?s.getDate():void 0;break}case"month":{u=l?.months||(f?ye:he),i=r&&E(r).startOf("year").valueOf()===E(a).startOf("year").valueOf()?r.getMonth():void 0,t=s&&E(s).startOf("year").valueOf()===E(a).startOf("year").valueOf()?s.getMonth():void 0;break}case"year":{u=l?.years||ve,i=r?r.getFullYear():void 0,t=s?s.getFullYear():void 0;break}case"hour":{u=l?.hours||me,i=r&&E(r).startOf("day").valueOf()===E(a).startOf("day").valueOf()?r.getHours():void 0,t=s&&E(s).startOf("day").valueOf()===E(a).startOf("day").valueOf()?s.getHours():void 0;break}case"minute":{u=l?.minutes||fe,i=r&&E(r).startOf("hour").valueOf()===E(a).startOf("hour").valueOf()?r.getMinutes():void 0,t=s&&E(s).startOf("hour").valueOf()===E(a).startOf("hour").valueOf()?s.getMinutes():void 0;break}case"dayOfWeek":{u=l?.dayOfWeeks||Ee;break}}return{renderLabel:u,max:i,min:t}},W=(e,o,a)=>Array.from({length:Math.floor((o-e+1)/a)},(r,s)=>e+s*a),w=(e,o)=>{let a=0;for(;a<e.length;a++){if(e[a]===o)return a;if(e[a]>o)return Math.max(a,0)}return a-1},me=e=>e.toString().padStart(2,"0"),fe=e=>e.toString().padStart(2,"0"),ge=e=>e.toString().padStart(2,"0"),he=e=>"tháng "+(e+1).toString().padStart(2,"0"),ye=e=>"thg "+(e+1).toString().padStart(2,"0"),ve=e=>e.toString().padStart(4,"0"),Ee=e=>["chủ nhật","thứ 2","thứ 3","thứ 4","thứ 5","thứ 6","thứ 7"][e%7],B=({className:e,hour:o,day:a,month:r,year:s,minutesProps:f,hoursProps:l,daysProps:i,monthsProps:t,yearsProps:u,dayOfWeeksProps:O,...d})=>{const[c,g]=Y(d,{trigger:"onChange",valuePropName:"value",defaultValue:{years:new Date().getFullYear(),minutes:new Date().getMinutes(),hours:new Date().getHours(),days:new Date().getDate(),months:new Date().getMonth(),dayOfWeeks:new Date().getDay()}});let C=!1;a=a||o&&(r||s),r=r||(o||a)&&s,a&&!o&&!r&&!s&&(C=!0,a=!1);const h=o,y=n.useMemo(()=>W(0,59,f?.step||1),[f?.step]),I=n.useMemo(()=>w(y,c.minutes),[y,c.minutes]),M=n.useCallback(v=>{g(m=>({...m,minutes:y[v%y.length]}))},[y,g]),D=n.useMemo(()=>W(0,23,l?.step||1),[l?.step]),j=n.useMemo(()=>w(D,c.hours),[D,c.hours]),H=n.useCallback(v=>{g(m=>({...m,hours:D[v%D.length]}))},[D,g]),x=n.useMemo(()=>{const v=new Date(c.years,c.months+1,0).getDate();return W(1,v,i?.step||1)},[i?.step,c.months,c.years]),G=n.useMemo(()=>w(x,c.days),[x,c.days]),X=n.useCallback(v=>{g(m=>({...m,days:x[v%x.length],dayOfWeeks:new Date(m.years,m.months,x[v%x.length]).getDay()}))},[x,g]),b=n.useMemo(()=>W(0,11,t?.step||1),[t?.step]),z=n.useMemo(()=>w(b,c.months),[b,c.months]),J=n.useCallback(v=>{g(m=>({...m,months:b[v%b.length],dayOfWeeks:new Date(m.years,b[v%b.length],m.days).getDay()}))},[b,g]),_=n.useMemo(()=>W(1900,2300,u?.step||1),[u?.step]),K=n.useMemo(()=>w(_,c.years),[_,c.years]),Q=n.useCallback(v=>{g(m=>({...m,years:_[v%_.length],dayOfWeeks:new Date(_[v%_.length],m.months,m.days).getDay()}))},[_,g]),S=n.useMemo(()=>W(0,59,O?.step||1),[O?.step]),P=n.useMemo(()=>w(S,c.dayOfWeeks),[S,c.dayOfWeeks]),ee=n.useCallback(v=>{g(m=>{const N=new Date(m.years,m.months,m.days),V=S[v%S.length],te=N.getDay()-V;return N.setDate(N.getDate()-te),{...m,years:N.getFullYear(),months:N.getMonth(),days:N.getDate(),dayOfWeeks:V}})},[S,g]);return p.jsxs("div",{className:A(`${F}-base`,e),children:[a&&p.jsx(k,{items:x,activeIndex:G,onChange:X,renderLabel:i.renderLabel,min:i.min,max:i.max},x.length),r&&p.jsx(k,{items:b,activeIndex:z,onChange:J,renderLabel:t.renderLabel,min:t.min,max:t.max}),s&&p.jsx(k,{items:_,activeIndex:K,onChange:Q,renderLabel:u.renderLabel,min:u.min,max:u.max}),C&&p.jsx(k,{items:S,activeIndex:P,onChange:ee,renderLabel:O.renderLabel,min:O.min,max:O.max}),o&&p.jsx(k,{items:D,activeIndex:j,onChange:H,renderLabel:l.renderLabel,min:l.min,max:l.max}),h&&p.jsx(k,{items:y,activeIndex:I,onChange:M,renderLabel:f.renderLabel,min:f.min,max:f.max})]})};B.__docgenInfo={description:"",methods:[],displayName:"DatePickerBase"};const Me=({min:e,max:o,renderLabels:a,year:r=!0,month:s=!0,day:f=!0,hour:l=!1,...i})=>{const[t,u]=Y(i,{trigger:"onChange",valuePropName:"value",defaultValue:new Date}),O=n.useMemo(()=>({years:t.getFullYear(),months:t.getMonth(),days:t.getDate(),dayOfWeeks:t.getDay(),hours:t.getHours(),minutes:t.getMinutes()}),[t]),d=n.useCallback(M=>de({type:M,value:t,max:o,min:e,hasHour:l,renderLabels:a}),[t,o,e,l,a]),c=n.useMemo(()=>d("year"),[d]),g=n.useMemo(()=>d("month"),[d]),C=n.useMemo(()=>d("day"),[d]),h=n.useMemo(()=>d("hour"),[d]),y=n.useMemo(()=>d("minute"),[d]),I=n.useMemo(()=>d("dayOfWeek"),[d]);return p.jsx(B,{...ae(i,["value","onChange"]),year:r,month:s,day:f,hour:l,yearsProps:c,monthsProps:g,daysProps:C,hoursProps:h,minutesProps:y,dayOfWeeksProps:I,value:O,onChange:M=>{u(new Date(M.years,M.months,M.days,M.hours,M.minutes))}})};Me.__docgenInfo={description:"",methods:[],displayName:"DatePicker",props:{year:{defaultValue:{value:"true",computed:!1},required:!1},month:{defaultValue:{value:"true",computed:!1},required:!1},day:{defaultValue:{value:"true",computed:!1},required:!1},hour:{defaultValue:{value:"false",computed:!1},required:!1}}};export{Me as D};

package/dist-storybook/assets/{date-picker.stories-Bahq3f1W.js → date-picker.stories-Shn-MmVG.js}

@@ -1,4 +1,4 @@
-import{j as t,r as y}from"./iframe-C0PGuV5s.js";import{T as D,S as g,M as u,P,a as k}from"./blocks-D4qvS4eZ.js";import{D as l}from"./date-picker--PiU9sOL.js";import{t as e}from"./store-BmYgrUro.js";import"./preload-helper-PPVm8Dsz.js";import"./index-1AHvPexM.js";import"./index-DWjPAWoJ.js";import"./index-B-Ksafg0.js";import"./omit-D04qL5V_.js";import"./_baseClone-4nOrhHpR.js";import"./embla-carousel-react.esm-Pp2OIUrN.js";import"./typography-BcLxefPi.js";import"./colors-_6nFGM3e.js";import"./date-C1W0DfQy.js";const h=()=>{const o=`
+import{r as y,j as t}from"./iframe-Crg_lbde.js";import{T as D,S as g,a as u,P,b as k}from"./blocks-CB7UwFa4.js";import{D as l}from"./date-picker-DeB43YU4.js";import{t as e}from"./store-BwIebEt6.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CdnALcTP.js";import"./index-hDlmuyu2.js";import"./index-B-Ksafg0.js";import"./omit-CRXr8Lio.js";import"./classname-Bl5epEs-.js";import"./embla-carousel-react.esm-DOEAp-w3.js";import"./typography-CMIMyivt.js";import"./colors-_6nFGM3e.js";import"./date-DWIyMGld.js";const h=()=>{const o=`
 ## ${e("common.table.title")}
 
 | ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |

package/dist-storybook/assets/dialog.stories-DeNKN0oJ.js

@@ -0,0 +1,212 @@
+import{j as t,r as i}from"./iframe-Crg_lbde.js";import{i as S,T as R,S as _,a as N,P as A,b as M}from"./blocks-CB7UwFa4.js";import{c as b,g as F}from"./classname-Bl5epEs-.js";import{a as m,j as U,I as q}from"./app.store-BJVKVv1J.js";import{B as n}from"./button-BLW8SOpg.js";import{I as P}from"./image-CB4oeTy-.js";import{T as z}from"./typography-CMIMyivt.js";import{t as e}from"./store-BwIebEt6.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CdnALcTP.js";import"./react-DO0-owxu.js";import"./icon-Cc9W858e.js";import"./colors-_6nFGM3e.js";import"./index-B-Ksafg0.js";const c=F("dialog"),j=i.forwardRef(({topImageUrl:s,top:o,title:l,description:r,children:p,closeAction:T,footer:O,open:w,onBackdropClick:D,onCloseClick:v,overlay:$="default",className:W,...E},I)=>t.jsxs("div",{ref:I,className:b(c,{[`${c}--open`]:w},W),...E,children:[t.jsx("div",{className:b(`${c}__overlay`,{[`${c}__overlay--blur`]:$==="blur"}),onClick:D}),!!T&&t.jsx(n,{className:`${c}__close`,leadingIcon:{name:"xmark"},size:"large",theme:"neutral",type:"outline",shape:"pill",onClick:v}),t.jsxs("div",{className:b(`${c}__box`,!!T&&`${c}__box--close`),children:[s&&t.jsx(P,{src:s,className:`${c}__image`}),o,(!!l||!!r)&&t.jsxs("div",{className:`${c}__title-group`,children:[!!l&&t.jsx(z,{size:"large",weight:600,children:l}),!!r&&t.jsx(z,{size:"base",weight:400,children:r})]}),!!p&&t.jsx("div",{className:`${c}__body`,children:p}),!!O&&t.jsx("div",{className:`${c}__footer`,children:O})]})]})),V=({open:s,...o})=>{const[l,r]=i.useState(s),p=i.useRef(null);return U(()=>{s&&r(s)}),q(()=>{r(!1)}),i.useEffect(()=>{r(s)},[s]),i.useEffect(()=>{l&&p.current&&document.body.appendChild(p.current)},[l]),S.createPortal(t.jsx(j,{ref:p,open:l,...o}),document.body)},G=({open:s,...o})=>{const[l,r]=i.useState(s),p=i.useRef(null);return i.useEffect(()=>()=>{r(!1)},[]),i.useEffect(()=>{r(s)},[s]),i.useEffect(()=>{l&&p.current&&document.body.appendChild(p.current)},[l]),S.createPortal(t.jsx(j,{ref:p,open:l,...o}),document.body)},a=({portal:s=!0,...o})=>s&&m.isUsingApp&&m.isUsingRouter?t.jsx(V,{...o}):s&&(!m.isUsingApp||!m.isUsingRouter)?t.jsx(G,{...o}):t.jsx(j,{...o});a.__docgenInfo={description:"",methods:[],displayName:"Dialog",props:{portal:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};const H=()=>{const s=`
+## ${e("common.table.title")}
+
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`open\` | \`boolean\` | ${e("common.table.no")} | ${e("components.dialog.openDescription")} |
+| \`onBackdropClick\` | \`(e: React.MouseEvent) => void\` | ${e("common.table.no")} | ${e("components.dialog.onBackdropClickDescription")} |
+| \`onCloseClick\` | \`(e: React.MouseEvent) => void\` | ${e("common.table.no")} | ${e("components.dialog.onCloseClickDescription")} |
+| \`title\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.dialog.titleDescription")} |
+| \`description\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.dialog.descriptionDescription")} |
+| \`topImageUrl\` | \`string\` | ${e("common.table.no")} | ${e("components.dialog.topImageUrlDescription")} |
+| \`top\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.dialog.topDescription")} |
+| \`children\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.dialog.childrenDescription")} |
+| \`footer\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.dialog.footerDescription")} |
+| \`closeAction\` | \`boolean\` | ${e("common.table.no")} | ${e("components.dialog.closeActionDescription")} |
+| \`portal\` | \`boolean\` | ${e("common.table.no")} | ${e("components.dialog.portalDescription")} |
+| \`overlay\` | \`'default' | 'blur'\` | ${e("common.table.no")} | ${e("components.dialog.overlayDescription")} |
+| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.dialog.classNameDescription")} |
+| \`...props\` | \`ComponentPropsWithRef<'div'>\` | ${e("common.table.no")} | ${e("components.dialog.propsDescription")} |
+  `;return t.jsxs(t.Fragment,{children:[t.jsx(R,{}),t.jsx(_,{}),t.jsx(N,{children:e("components.dialog.description")}),t.jsx(A,{}),t.jsx(N,{children:s}),t.jsx(M,{})]})},le={title:"Components/Dialog",component:a,parameters:{layout:"fullscreen",docs:{page:H}},tags:["autodocs"],argTypes:{open:{control:"boolean",description:e("components.dialog.argTypes.openDescription"),table:{type:{summary:"boolean"}}},onBackdropClick:{action:"backdrop clicked",description:e("components.dialog.argTypes.onBackdropClickDescription"),table:{type:{summary:"(e: React.MouseEvent) => void"}}},onCloseClick:{action:"close clicked",description:e("components.dialog.argTypes.onCloseClickDescription"),table:{type:{summary:"(e: React.MouseEvent) => void"}}},title:{control:"text",description:e("components.dialog.argTypes.titleDescription"),table:{type:{summary:"ReactNode"}}},description:{control:"text",description:e("components.dialog.argTypes.descriptionDescription"),table:{type:{summary:"ReactNode"}}},topImageUrl:{control:"text",description:e("components.dialog.argTypes.topImageUrlDescription"),table:{type:{summary:"string"}}},top:{control:!1,description:e("components.dialog.argTypes.topDescription"),table:{type:{summary:"ReactNode"}}},children:{control:!1,description:e("components.dialog.argTypes.childrenDescription"),table:{type:{summary:"ReactNode"}}},footer:{control:!1,description:e("components.dialog.argTypes.footerDescription"),table:{type:{summary:"ReactNode"}}},closeAction:{control:"boolean",description:e("components.dialog.argTypes.closeActionDescription"),table:{type:{summary:"boolean"}}},portal:{control:"boolean",description:e("components.dialog.argTypes.portalDescription"),table:{type:{summary:"boolean"}}},overlay:{control:"select",options:["default","blur"],description:e("components.dialog.argTypes.overlayDescription"),table:{type:{summary:"default | blur"}}},className:{control:"text",description:e("components.dialog.argTypes.classNameDescription"),table:{type:{summary:"string"}}}}},d={storyName:e("components.dialog.stories.default.storyName"),render:()=>{const[s,o]=i.useState(!1),[l,r]=i.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.default.buttonText")}),t.jsx(a,{open:l,portal:!0,onBackdropClick:()=>r(!1),title:e("components.dialog.stories.default.title2"),description:e("components.dialog.stories.default.description2"),footer:t.jsx(t.Fragment,{children:t.jsx(n,{size:"large",theme:"neutral",onClick:()=>r(!1),children:e("components.dialog.stories.default.close")})})}),t.jsx(a,{open:s,portal:!0,onBackdropClick:()=>o(!1),title:e("components.dialog.stories.default.title"),description:e("components.dialog.stories.default.description"),footer:t.jsxs(t.Fragment,{children:[t.jsx(n,{size:"large",theme:"neutral",type:"solid-subtle",onClick:()=>o(!1),children:e("components.dialog.stories.default.cancel")}),t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.default.confirm")}),t.jsx(n,{size:"large",theme:"neutral",onClick:()=>r(!0),children:e("components.dialog.stories.default.open2")})]})})]})}},u={storyName:e("components.dialog.stories.titleOnly.storyName"),render:()=>{const[s,o]=i.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.titleOnly.buttonText")}),t.jsx(a,{open:s,onBackdropClick:()=>o(!1),title:e("components.dialog.stories.titleOnly.title"),footer:t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.titleOnly.close")})})]})}},g={storyName:e("components.dialog.stories.withTopImage.storyName"),render:()=>{const[s,o]=i.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.withTopImage.buttonText")}),t.jsx(a,{open:s,onBackdropClick:()=>o(!1),title:e("components.dialog.stories.withTopImage.title"),description:e("components.dialog.stories.withTopImage.description"),topImageUrl:"https://picsum.photos/600/300",footer:t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.withTopImage.close")})})]})}},f={storyName:e("components.dialog.stories.withCloseButton.storyName"),render:()=>{const[s,o]=i.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.withCloseButton.buttonText")}),t.jsx(a,{open:s,closeAction:!0,onBackdropClick:()=>o(!1),onCloseClick:()=>o(!1),title:e("components.dialog.stories.withCloseButton.title"),description:e("components.dialog.stories.withCloseButton.description"),footer:t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.withCloseButton.close")})})]})}},h={storyName:e("components.dialog.stories.withCustomTopContent.storyName"),render:()=>{const[s,o]=i.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.withCustomTopContent.buttonText")}),t.jsx(a,{open:s,onBackdropClick:()=>o(!1),top:t.jsxs("div",{style:{padding:"24px 24px 16px",textAlign:"center"},children:[t.jsx("h3",{style:{margin:0,marginBottom:"8px"},children:e("components.dialog.stories.withCustomTopContent.customTitle")}),t.jsx("p",{style:{margin:0,color:"#666"},children:e("components.dialog.stories.withCustomTopContent.customSubtitle")})]}),title:e("components.dialog.stories.withCustomTopContent.title"),description:e("components.dialog.stories.withCustomTopContent.description"),footer:t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.withCustomTopContent.close")})})]})}},C={storyName:e("components.dialog.stories.footerWithMultipleButtons.storyName"),render:()=>{const[s,o]=i.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.footerWithMultipleButtons.buttonText")}),t.jsx(a,{open:s,onBackdropClick:()=>o(!1),title:e("components.dialog.stories.footerWithMultipleButtons.title"),description:e("components.dialog.stories.footerWithMultipleButtons.description"),footer:t.jsxs(t.Fragment,{children:[t.jsx(n,{size:"large",theme:"neutral",type:"solid-subtle",onClick:()=>o(!1),children:e("components.dialog.stories.footerWithMultipleButtons.cancel")}),t.jsx(n,{size:"large",theme:"neutral",type:"solid",onClick:()=>o(!1),children:e("components.dialog.stories.footerWithMultipleButtons.save")})]})})]})}},x={storyName:e("components.dialog.stories.footerWithStackedButtons.storyName"),render:()=>{const[s,o]=i.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.footerWithStackedButtons.buttonText")}),t.jsx(a,{open:s,onBackdropClick:()=>o(!1),title:e("components.dialog.stories.footerWithStackedButtons.title"),description:e("components.dialog.stories.footerWithStackedButtons.description"),footer:t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:[t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.footerWithStackedButtons.primaryAction")}),t.jsx(n,{size:"large",theme:"neutral",type:"solid-subtle",onClick:()=>o(!1),children:e("components.dialog.stories.footerWithStackedButtons.secondaryAction")})]})})]})}},y={storyName:e("components.dialog.stories.withCustomContent.storyName"),render:()=>{const[s,o]=i.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.withCustomContent.buttonText")}),t.jsx(a,{open:s,onBackdropClick:()=>o(!1),closeAction:!0,onCloseClick:()=>o(!1),title:e("components.dialog.stories.withCustomContent.title"),children:t.jsxs("div",{style:{padding:"16px"},children:[t.jsx("h3",{children:e("components.dialog.stories.withCustomContent.contentTitle")}),t.jsx("p",{children:e("components.dialog.stories.withCustomContent.contentText")})]}),footer:t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.withCustomContent.close")})})]})}},k={storyName:e("components.dialog.stories.completeExample.storyName"),render:()=>{const[s,o]=i.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.completeExample.buttonText")}),t.jsx(a,{open:s,closeAction:!0,onCloseClick:()=>o(!1),onBackdropClick:()=>o(!1),title:e("components.dialog.stories.completeExample.titleText"),description:e("components.dialog.stories.completeExample.descriptionText"),footer:t.jsxs("div",{style:{display:"flex",gap:"8px",justifyContent:"flex-end"},children:[t.jsx(n,{size:"large",theme:"neutral",type:"solid-subtle",onClick:()=>o(!1),children:e("components.dialog.stories.completeExample.cancel")}),t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.completeExample.confirm")})]})})]})}},B={storyName:e("components.dialog.stories.interactive.title"),render:()=>{const[s,o]=i.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!0),children:e("components.dialog.stories.interactive.buttonText")}),t.jsx(a,{open:s,onBackdropClick:()=>o(!1),title:e("components.dialog.stories.interactive.title"),description:e("components.dialog.stories.interactive.descriptionText"),closeAction:!1,footer:t.jsx(n,{size:"large",theme:"neutral",onClick:()=>o(!1),children:e("components.dialog.stories.interactive.close")})})]})}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.default.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [open2, setOpen2] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.default.buttonText')}
+        </Button>
+        <Dialog open={open2} portal onBackdropClick={() => setOpen2(false)} title={t('components.dialog.stories.default.title2')} description={t('components.dialog.stories.default.description2')} footer={<>
+              <Button size="large" theme="neutral" onClick={() => setOpen2(false)}>
+                {t('components.dialog.stories.default.close')}
+              </Button>
+            </>} />
+        <Dialog open={open} portal onBackdropClick={() => setOpen(false)} title={t('components.dialog.stories.default.title')} description={t('components.dialog.stories.default.description')} footer={<>
+              <Button size="large" theme="neutral" type="solid-subtle" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.default.cancel')}
+              </Button>
+              <Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.default.confirm')}
+              </Button>
+              <Button size="large" theme="neutral" onClick={() => setOpen2(true)}>
+                {t('components.dialog.stories.default.open2')}
+              </Button>
+            </>} />
+      </>;
+  }
+}`,...d.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.titleOnly.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.titleOnly.buttonText')}
+        </Button>
+        <Dialog open={open} onBackdropClick={() => setOpen(false)} title={t('components.dialog.stories.titleOnly.title')} footer={<Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+              {t('components.dialog.stories.titleOnly.close')}
+            </Button>} />
+      </>;
+  }
+}`,...u.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.withTopImage.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.withTopImage.buttonText')}
+        </Button>
+        <Dialog open={open} onBackdropClick={() => setOpen(false)} title={t('components.dialog.stories.withTopImage.title')} description={t('components.dialog.stories.withTopImage.description')} topImageUrl="https://picsum.photos/600/300" footer={<Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+              {t('components.dialog.stories.withTopImage.close')}
+            </Button>} />
+      </>;
+  }
+}`,...g.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.withCloseButton.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.withCloseButton.buttonText')}
+        </Button>
+        <Dialog open={open} closeAction onBackdropClick={() => setOpen(false)} onCloseClick={() => setOpen(false)} title={t('components.dialog.stories.withCloseButton.title')} description={t('components.dialog.stories.withCloseButton.description')} footer={<Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+              {t('components.dialog.stories.withCloseButton.close')}
+            </Button>} />
+      </>;
+  }
+}`,...f.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.withCustomTopContent.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.withCustomTopContent.buttonText')}
+        </Button>
+        <Dialog open={open} onBackdropClick={() => setOpen(false)} top={<div style={{
+        padding: '24px 24px 16px',
+        textAlign: 'center'
+      }}>
+              <h3 style={{
+          margin: 0,
+          marginBottom: '8px'
+        }}>
+                {t('components.dialog.stories.withCustomTopContent.customTitle')}
+              </h3>
+              <p style={{
+          margin: 0,
+          color: '#666'
+        }}>
+                {t('components.dialog.stories.withCustomTopContent.customSubtitle')}
+              </p>
+            </div>} title={t('components.dialog.stories.withCustomTopContent.title')} description={t('components.dialog.stories.withCustomTopContent.description')} footer={<Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+              {t('components.dialog.stories.withCustomTopContent.close')}
+            </Button>} />
+      </>;
+  }
+}`,...h.parameters?.docs?.source}}};C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.footerWithMultipleButtons.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.footerWithMultipleButtons.buttonText')}
+        </Button>
+        <Dialog open={open} onBackdropClick={() => setOpen(false)} title={t('components.dialog.stories.footerWithMultipleButtons.title')} description={t('components.dialog.stories.footerWithMultipleButtons.description')} footer={<>
+              <Button size="large" theme="neutral" type="solid-subtle" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.footerWithMultipleButtons.cancel')}
+              </Button>
+              <Button size="large" theme="neutral" type="solid" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.footerWithMultipleButtons.save')}
+              </Button>
+            </>} />
+      </>;
+  }
+}`,...C.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.footerWithStackedButtons.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.footerWithStackedButtons.buttonText')}
+        </Button>
+        <Dialog open={open} onBackdropClick={() => setOpen(false)} title={t('components.dialog.stories.footerWithStackedButtons.title')} description={t('components.dialog.stories.footerWithStackedButtons.description')} footer={<div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px'
+      }}>
+              <Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.footerWithStackedButtons.primaryAction')}
+              </Button>
+              <Button size="large" theme="neutral" type="solid-subtle" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.footerWithStackedButtons.secondaryAction')}
+              </Button>
+            </div>} />
+      </>;
+  }
+}`,...x.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.withCustomContent.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.withCustomContent.buttonText')}
+        </Button>
+        <Dialog open={open} onBackdropClick={() => setOpen(false)} closeAction onCloseClick={() => setOpen(false)} title={t('components.dialog.stories.withCustomContent.title')} children={<div style={{
+        padding: '16px'
+      }}>
+              <h3>
+                {t('components.dialog.stories.withCustomContent.contentTitle')}
+              </h3>
+              <p>
+                {t('components.dialog.stories.withCustomContent.contentText')}
+              </p>
+            </div>} footer={<Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+              {t('components.dialog.stories.withCustomContent.close')}
+            </Button>} />
+      </>;
+  }
+}`,...y.parameters?.docs?.source}}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.completeExample.storyName'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.completeExample.buttonText')}
+        </Button>
+        <Dialog open={open} closeAction onCloseClick={() => setOpen(false)} onBackdropClick={() => setOpen(false)} title={t('components.dialog.stories.completeExample.titleText')} description={t('components.dialog.stories.completeExample.descriptionText')} footer={<div style={{
+        display: 'flex',
+        gap: '8px',
+        justifyContent: 'flex-end'
+      }}>
+              <Button size="large" theme="neutral" type="solid-subtle" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.completeExample.cancel')}
+              </Button>
+              <Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+                {t('components.dialog.stories.completeExample.confirm')}
+              </Button>
+            </div>} />
+      </>;
+  }
+}`,...k.parameters?.docs?.source}}};B.parameters={...B.parameters,docs:{...B.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.dialog.stories.interactive.title'),
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <Button size="large" theme="neutral" onClick={() => setOpen(true)}>
+          {t('components.dialog.stories.interactive.buttonText')}
+        </Button>
+        <Dialog open={open} onBackdropClick={() => setOpen(false)} title={t('components.dialog.stories.interactive.title')} description={t('components.dialog.stories.interactive.descriptionText')} closeAction={false} footer={<Button size="large" theme="neutral" onClick={() => setOpen(false)}>
+              {t('components.dialog.stories.interactive.close')}
+            </Button>} />
+      </>;
+  }
+}`,...B.parameters?.docs?.source}}};const ae=["Default","TitleOnly","WithTopImage","WithCloseButton","WithCustomTopContent","FooterWithMultipleButtons","FooterWithStackedButtons","WithCustomContent","CompleteExample","Interactive"];export{k as CompleteExample,d as Default,C as FooterWithMultipleButtons,x as FooterWithStackedButtons,B as Interactive,u as TitleOnly,f as WithCloseButton,y as WithCustomContent,h as WithCustomTopContent,g as WithTopImage,ae as __namedExportsOrder,le as default};