@ryuzaki13/react-foundation-ui 1.0.8 → 1.0.12

package/storybook-static/assets/DropdownMenu-B97Ad5Dg.js

@@ -0,0 +1 @@
+import{c as e,i as t}from"./preload-helper-B45gAKPr.js";import{C as n}from"./iframe-SfMJGCsn.js";import{t as r}from"./react-dom-CncQzc_h.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{a,i as o}from"./utils-CReRlw17.js";import{a as s,f as c,h as l,p as u,r as d,u as f}from"./floating-ui.react-BR04wkLx.js";import{a as p,c as m,i as h,n as g,o as _,t as v}from"./error-RVOk7zpw.js";import{n as y,t as b}from"./ui.module-DS2qtZts.js";import{n as x,r as S,t as C}from"./react-BWN-5oQj.js";function w(e,t){if(e){if(typeof e==`function`){e(t);return}e.current=t}}function T(e,t){return n=>{e?.(n),!n.defaultPrevented&&t(n)}}function E(e,t){return n=>{e?.(n),!n.defaultPrevented&&t(n)}}var D=t((()=>{}));function O(){let e=(0,k.useContext)(A);if(!e)throw g({hookName:`useMenuContext`,providerName:`MenuRoot`});return e}var k,A,j=t((()=>{k=e(n(),1),v(),A=(0,k.createContext)(null)})),M,N,ee=t((()=>{M=e(n(),1),D(),j(),N=({children:e})=>{let{mode:t,open:n,registerTriggerElement:r,onTriggerContextMenu:i,onTriggerKeyDown:a}=O();if(t!==`contextmenu`)throw Error(`ContextMenu.Trigger must be used within <ContextMenu>`);return(0,M.cloneElement)(e,{ref:t=>{let n=e.props.ref;w(n,t),r(t)},"aria-haspopup":`menu`,"aria-expanded":n,onContextMenu:T(e.props.onContextMenu,i),onKeyDown:E(e.props.onKeyDown,a)})},N.__docgenInfo={description:``,methods:[],displayName:`ContextMenuTrigger`,props:{children:{required:!0,tsType:{name:`ReactReactElement`,raw:`React.ReactElement<React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }>`,elements:[{name:`intersection`,raw:`React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }`,elements:[{name:`ReactHTMLAttributes`,raw:`React.HTMLAttributes<HTMLElement>`,elements:[{name:`HTMLElement`}]},{name:`signature`,type:`object`,raw:`{ ref?: React.Ref<HTMLElement> }`,signature:{properties:[{key:`ref`,value:{name:`ReactRef`,raw:`React.Ref<HTMLElement>`,elements:[{name:`HTMLElement`}],required:!1}}]}}]}]},description:``}}}})),te,ne,re,ie,ae,oe,se,ce,le,ue,de,fe,pe,me,P,F,I=t((()=>{te=`nPfxbm`,ne=`T8GF31`,re=`XM9raj`,ie=`JY0XKk`,ae=`Jj7pGe`,oe=`o7v3XA`,se=`f9wo9l`,ce=`_9IPwGF`,le=`CAmmlz`,ue=`_5KEBWR`,de=`L28onY`,fe=`Pg-1Y3`,pe=`ObIrS2`,me=`_0jf5vt`,P=`zKwsQF`,F={menuPanel:te,menuScroller:ne,menuItem:re,menuItemIcon:ie,menuItemText:ae,menuItemHotKey:oe,radialPanel:se,radialRing:ce,radialCenterButton:le,radialCenterButtonText:ue,radialItems:de,radialItemSlot:fe,radialItem:pe,radialItemIcon:me,radialItemText:P}})),L,he,R,z,ge=t((()=>{L=e(n(),1),p(),o(),C(),he=e(r(),1),I(),j(),R=i(),z=({children:e,className:t,closeOnOutside:n=!0,closeOnEscape:r=!0,disableOutsideClick:i=!1,restoreFocus:o=!0})=>{let{open:s,floatingStyles:c,floatingRef:l,triggerRef:u,setFloating:d,closeMenu:f}=O(),p=(0,L.useCallback)(()=>{let e=l.current;return e?Array.from(e.querySelectorAll(`[data-menu-item="true"]:not([data-disabled="true"])`)):[]},[l]);m({active:s,initialFocus:e=>p()[0]??e,restoreFocus:o,restoreFocusTarget:()=>u.current,containerRef:l}),h({active:s,enabled:r,onDismiss:f,containerRef:l});let g=(0,L.useCallback)(()=>{!s||i||n&&f()},[s,i,n,f]);_([l,u],g);let v=(0,L.useCallback)(e=>{let t=p();if(t.length===0)return;let n=document.activeElement,r=n?t.indexOf(n):-1;if(e.key===`ArrowDown`){e.preventDefault(),t[r>=0?(r+1)%t.length:0]?.focus();return}if(e.key===`ArrowUp`){e.preventDefault(),t[r>=0?(r-1+t.length)%t.length:t.length-1]?.focus();return}if(e.key===`Home`){e.preventDefault(),t[0]?.focus();return}e.key===`End`&&(e.preventDefault(),t[t.length-1]?.focus())},[p]);return typeof document>`u`?null:(0,he.createPortal)((0,R.jsx)(S,{children:s&&(0,R.jsx)(x.div,{ref:d,style:c,role:`menu`,tabIndex:-1,className:a(F.menuPanel,t),onKeyDown:v,initial:{opacity:0,scale:.96,y:-2},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.96,y:-2},transition:{duration:.14,ease:`easeOut`},children:(0,R.jsx)(`div`,{className:a(F.menuScroller,`scrollable`),children:typeof e==`function`?e({closeMenu:f}):e})})}),document.body)}})),_e,B,ve=t((()=>{n(),o(),b(),_e=i(),B=({children:e,className:t})=>(0,_e.jsx)(`div`,{className:a(y.uiPopupGroupLabel,t),children:e}),B.__docgenInfo={description:``,methods:[],displayName:`MenuGroupLabel`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},className:{required:!1,tsType:{name:`string`},description:``}}}})),ye,V,H,be=t((()=>{ye=e(n(),1),o(),b(),I(),j(),V=i(),H=({children:e,icon:t,hotKey:n,className:r,disabled:i,href:o,target:s,rel:c,closeOnSelect:l=!0,onSelect:u})=>{let{closeMenu:d}=O(),f=(0,ye.useCallback)(e=>{if(i){e.preventDefault(),e.stopPropagation();return}u?.(e),!e.defaultPrevented&&l&&d()},[i,u,l,d]),p=a(y.uiPopupOption,F.menuItem,r);return o?(0,V.jsxs)(`a`,{href:o,target:s,rel:c,role:`menuitem`,tabIndex:-1,"aria-disabled":i,"data-menu-item":`true`,"data-disabled":i?`true`:void 0,"data-ui":`context-menu-item`,"data-action":`select-context-menu-item`,className:p,onClick:f,children:[t&&(0,V.jsx)(`span`,{className:a(y.uiPopupOptionIcon,F.menuItemIcon),children:t}),(0,V.jsx)(`span`,{className:a(y.uiOptionText,F.menuItemText),children:e}),n&&(0,V.jsx)(`kbd`,{className:a(y.keyboard,F.menuItemHotKey),children:n})]}):(0,V.jsxs)(`button`,{type:`button`,role:`menuitem`,tabIndex:-1,disabled:i,"data-menu-item":`true`,"data-disabled":i?`true`:void 0,"data-ui":`context-menu-item`,"data-action":`select-context-menu-item`,className:p,onClick:f,children:[t&&(0,V.jsx)(`span`,{className:a(y.uiPopupOptionIcon,F.menuItemIcon),children:t}),(0,V.jsx)(`span`,{className:a(y.uiOptionText,F.menuItemText),children:e}),n&&(0,V.jsx)(`kbd`,{className:a(y.keyboard,F.menuItemHotKey),children:n})]})},H.__docgenInfo={description:``,methods:[],displayName:`MenuItem`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},icon:{required:!1,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},hotKey:{required:!1,tsType:{name:`string`},description:``},className:{required:!1,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},href:{required:!1,tsType:{name:`string`},description:``},target:{required:!1,tsType:{name:`string`},description:``},rel:{required:!1,tsType:{name:`string`},description:``},closeOnSelect:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`true`,computed:!1}},onSelect:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: React.MouseEvent<HTMLElement>) => void`,signature:{arguments:[{type:{name:`ReactMouseEvent`,raw:`React.MouseEvent<HTMLElement>`,elements:[{name:`HTMLElement`}]},name:`event`}],return:{name:`void`}}},description:``}}}}));function xe(e){return{x:e.clientX,y:e.clientY}}function Se(e){return{x:e.left+e.width/2,y:e.top+e.height/2}}function Ce(e,t){return{contextElement:t??void 0,getBoundingClientRect:()=>({x:e.x,y:e.y,top:e.y,left:e.x,bottom:e.y,right:e.x,width:0,height:0,toJSON:()=>{}})}}function we(e){return{open:!0,source:e.source,anchor:e.anchor}}function U(e){return!e.open&&e.anchor===null?e:{open:!1,source:null,anchor:null}}var Te,Ee=t((()=>{Te={open:!1,source:null,anchor:null}})),W,De,G,Oe=t((()=>{W=e(n(),1),d(),Ee(),j(),De=i(),G=({children:e,mode:t,placement:n=t===`click`?`bottom-start`:`right-start`,open:r,defaultOpen:i,onOpenChange:a})=>{let[o,d]=(0,W.useState)(Te),[p,m]=(0,W.useState)(i??!1),h=r!==void 0,g=h?r:p,_=(0,W.useRef)(null),{refs:v,floatingStyles:y,update:b}=s({placement:n,strategy:t===`contextmenu`?`fixed`:`absolute`,transform:!1,middleware:[c(6),f({padding:8}),u({padding:8})],whileElementsMounted:l}),x=(0,W.useCallback)(e=>{h||m(e),a?.(e),e||d(e=>U(e))},[h,a]),S=(0,W.useCallback)(()=>{x(!1)},[x]);(0,W.useEffect)(()=>{g||d(e=>U(e))},[g]);let C=(0,W.useCallback)((e,t)=>{v.setReference(e),d(we({source:t,anchor:{type:`element`,element:e}})),x(!0)},[v,x]),w=(0,W.useCallback)((e,t,n)=>{v.setReference(Ce(e,n)),d(we({source:t,anchor:{type:`point`,point:e,contextElement:n}})),x(!0),b()},[v,x,b]),T=(0,W.useCallback)(e=>{_.current=e,t===`click`&&v.setReference(e)},[t,v]),E=(0,W.useCallback)(e=>{if(t!==`click`)return;let n=e.currentTarget;if(g&&o.anchor?.type===`element`&&o.anchor.element===n){S();return}C(n,`click`)},[t,g,o.anchor,S,C]),D=(0,W.useCallback)(e=>{if(t!==`contextmenu`)return;e.preventDefault();let n=e.currentTarget,r=xe(e);w(r,`contextmenu`,n)},[t,w]),O=(0,W.useCallback)(e=>{if(!(e.key===`ContextMenu`||e.shiftKey&&e.key===`F10`))return;e.preventDefault();let n=e.currentTarget;if(t===`click`){C(n,`keyboard`);return}let r=Se(n.getBoundingClientRect());w(r,`keyboard`,n)},[t,C,w]),k=g&&o.anchor!==null,j=(0,W.useMemo)(()=>o.anchor?o.anchor.type===`point`?o.anchor.point:Se(o.anchor.element.getBoundingClientRect()):null,[o.anchor]),M=(0,W.useMemo)(()=>({mode:t,open:k,openSource:o.source,anchorPoint:j,floatingStyles:y,floatingRef:v.floating,triggerRef:_,setFloating:v.setFloating,registerTriggerElement:T,onTriggerClick:E,onTriggerContextMenu:D,onTriggerKeyDown:O,closeMenu:S}),[t,k,o.source,j,y,v.floating,v.setFloating,T,E,D,O,S]);return(0,De.jsx)(A.Provider,{value:M,children:e})},G.__docgenInfo={description:``,methods:[],displayName:`MenuRoot`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},mode:{required:!0,tsType:{name:`union`,raw:`"click" | "contextmenu"`,elements:[{name:`literal`,value:`"click"`},{name:`literal`,value:`"contextmenu"`}]},description:``},placement:{required:!1,tsType:{name:`Placement`},description:``,defaultValue:{value:`mode === "click" ? "bottom-start" : "right-start"`,computed:!1}},open:{required:!1,tsType:{name:`boolean`},description:``},defaultOpen:{required:!1,tsType:{name:`boolean`},description:``},onOpenChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(open: boolean) => void`,signature:{arguments:[{type:{name:`boolean`},name:`open`}],return:{name:`void`}}},description:``}}}})),ke,K,Ae=t((()=>{n(),o(),b(),ke=i(),K=({className:e})=>(0,ke.jsx)(`div`,{role:`separator`,className:a(y.uiPopupOptionSeparator,e)}),K.__docgenInfo={description:``,methods:[],displayName:`MenuSeparator`,props:{className:{required:!1,tsType:{name:`string`},description:``}}}}));function je(e,t,n){return n<t?t:Math.min(Math.max(e,t),n)}var q,Me,J,Ne,Pe=t((()=>{q=e(n(),1),p(),o(),C(),Me=e(r(),1),I(),j(),J=i(),Ne=({children:e,className:t,closeOnOutside:n=!0,closeOnEscape:r=!0,disableOutsideClick:i=!1,restoreFocus:o=!0,radius:s=76,itemSize:c=64,closeLabel:l=`Закрыть`})=>{let{open:u,anchorPoint:d,floatingRef:f,triggerRef:p,setFloating:g,closeMenu:v}=O(),y=typeof e==`function`?e({closeMenu:v}):e,b=(0,q.useMemo)(()=>q.Children.toArray(y),[y]),C=b.length,w=s*2+c,T=(0,q.useMemo)(()=>{if(typeof window>`u`||!d)return null;let e=w/2+8;return{x:je(d.x,e,window.innerWidth-e),y:je(d.y,e,window.innerHeight-e)}},[d,w]),E=(0,q.useCallback)(()=>{let e=f.current;return e?Array.from(e.querySelectorAll(`[data-menu-item="true"]:not([data-disabled="true"])`)):[]},[f]);m({active:u,initialFocus:e=>E()[0]??e,restoreFocus:o,restoreFocusTarget:()=>p.current,containerRef:f}),(0,q.useEffect)(()=>{if(!u||!d)return;let e=0;return e=window.requestAnimationFrame(()=>{(E()[0]??f.current)?.focus()}),()=>window.cancelAnimationFrame(e)},[u,d,E,f]),h({active:u,enabled:r,onDismiss:v,containerRef:f});let D=(0,q.useCallback)(()=>{!u||i||n&&v()},[u,i,n,v]);_([f,p],D);let k=(0,q.useCallback)(e=>{let t=E();if(t.length===0)return;let n=document.activeElement,r=n?t.indexOf(n):-1;if(e.key===`ArrowRight`||e.key===`ArrowDown`){e.preventDefault(),t[r>=0?(r+1)%t.length:0]?.focus();return}if(e.key===`ArrowLeft`||e.key===`ArrowUp`){e.preventDefault(),t[r>=0?(r-1+t.length)%t.length:t.length-1]?.focus();return}if(e.key===`Home`){e.preventDefault(),t[0]?.focus();return}e.key===`End`&&(e.preventDefault(),t[t.length-1]?.focus())},[E]);return typeof document>`u`?null:(0,Me.createPortal)((0,J.jsx)(S,{children:u&&T&&(0,J.jsxs)(x.div,{ref:g,style:{"--radial-panel-size":`${w}px`,"--radial-radius":`${s}px`,"--radial-item-size":`${c}px`,left:T.x-w/2,top:T.y-w/2,transformOrigin:`center`},role:`menu`,tabIndex:-1,className:a(F.radialPanel,t),onKeyDown:k,initial:{opacity:0,scale:.78},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.78},transition:{duration:.16,ease:`easeOut`},children:[(0,J.jsx)(`div`,{className:F.radialRing,"aria-hidden":`true`}),(0,J.jsx)(`button`,{type:`button`,role:`menuitem`,className:F.radialCenterButton,"aria-label":l,"data-menu-item":`true`,"data-radial-close":`true`,onClick:v,children:(0,J.jsx)(`span`,{className:F.radialCenterButtonText,children:l})}),(0,J.jsx)(`div`,{className:F.radialItems,children:b.map((e,t)=>{let n=C>0?-90+360/C*t:-90;return(0,J.jsx)(`div`,{className:F.radialItemSlot,style:{"--radial-item-angle":`${n}deg`},children:e},t)})})]})}),document.body)}})),Fe,Y,X,Ie=t((()=>{Fe=e(n(),1),o(),I(),j(),Y=i(),X=({children:e,icon:t,className:n,disabled:r,closeOnSelect:i=!0,onSelect:o})=>{let{closeMenu:s}=O(),c=(0,Fe.useCallback)(e=>{if(r){e.preventDefault(),e.stopPropagation();return}o?.(e),!e.defaultPrevented&&i&&s()},[r,o,i,s]);return(0,Y.jsxs)(`button`,{type:`button`,role:`menuitem`,tabIndex:-1,disabled:r,"aria-disabled":r,"data-menu-item":`true`,"data-disabled":r?`true`:void 0,"data-ui":`radial-menu-item`,"data-action":`select-radial-menu-item`,className:a(F.radialItem,n),onClick:c,children:[t&&(0,Y.jsx)(`span`,{className:F.radialItemIcon,children:t}),(0,Y.jsx)(`span`,{className:F.radialItemText,children:e})]})},X.__docgenInfo={description:``,methods:[],displayName:`RadialMenuItem`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},icon:{required:!1,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},className:{required:!1,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},closeOnSelect:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`true`,computed:!1}},onSelect:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: React.MouseEvent<HTMLButtonElement>) => void`,signature:{arguments:[{type:{name:`ReactMouseEvent`,raw:`React.MouseEvent<HTMLButtonElement>`,elements:[{name:`HTMLButtonElement`}]},name:`event`}],return:{name:`void`}}},description:``}}}})),Le,Z,Re,ze=t((()=>{n(),ee(),ge(),ve(),be(),Oe(),Ae(),Pe(),Ie(),Le=i(),Z=({children:e,placement:t,open:n,defaultOpen:r,onOpenChange:i})=>(0,Le.jsx)(G,{mode:`contextmenu`,placement:t,open:n,defaultOpen:r,onOpenChange:i,children:e}),Re=Object.assign(Z,{Trigger:N,Content:z,RadialContent:Ne,Item:H,RadialItem:X,Separator:K,GroupLabel:B}),Z.__docgenInfo={description:``,methods:[],displayName:`ContextMenuRoot`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},placement:{required:!1,tsType:{name:`Placement`},description:``},open:{required:!1,tsType:{name:`boolean`},description:``},defaultOpen:{required:!1,tsType:{name:`boolean`},description:``},onOpenChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(open: boolean) => void`,signature:{arguments:[{type:{name:`boolean`},name:`open`}],return:{name:`void`}}},description:``}}}})),Be,Q,Ve=t((()=>{Be=e(n(),1),D(),j(),Q=({children:e})=>{let{mode:t,open:n,registerTriggerElement:r,onTriggerClick:i,onTriggerKeyDown:a}=O();if(t!==`click`)throw Error(`DropdownMenu.Trigger must be used within <DropdownMenu>`);return(0,Be.cloneElement)(e,{ref:t=>{let n=e.props.ref;w(n,t),r(t)},"aria-haspopup":`menu`,"aria-expanded":n,onClick:T(e.props.onClick,i),onKeyDown:E(e.props.onKeyDown,a)})},Q.__docgenInfo={description:``,methods:[],displayName:`DropdownMenuTrigger`,props:{children:{required:!0,tsType:{name:`ReactReactElement`,raw:`React.ReactElement<React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }>`,elements:[{name:`intersection`,raw:`React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }`,elements:[{name:`ReactHTMLAttributes`,raw:`React.HTMLAttributes<HTMLElement>`,elements:[{name:`HTMLElement`}]},{name:`signature`,type:`object`,raw:`{ ref?: React.Ref<HTMLElement> }`,signature:{properties:[{key:`ref`,value:{name:`ReactRef`,raw:`React.Ref<HTMLElement>`,elements:[{name:`HTMLElement`}],required:!1}}]}}]}]},description:``}}}})),He,$,Ue,We=t((()=>{n(),Ve(),ge(),ve(),be(),Oe(),Ae(),He=i(),$=({children:e,placement:t,open:n,defaultOpen:r,onOpenChange:i})=>(0,He.jsx)(G,{mode:`click`,placement:t,open:n,defaultOpen:r,onOpenChange:i,children:e}),Ue=Object.assign($,{Trigger:Q,Content:z,Item:H,Separator:K,GroupLabel:B}),$.__docgenInfo={description:``,methods:[],displayName:`DropdownMenuRoot`,props:{children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},placement:{required:!1,tsType:{name:`Placement`},description:``},open:{required:!1,tsType:{name:`boolean`},description:``},defaultOpen:{required:!1,tsType:{name:`boolean`},description:``},onOpenChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(open: boolean) => void`,signature:{arguments:[{type:{name:`boolean`},name:`open`}],return:{name:`void`}}},description:``}}}}));export{ze as i,We as n,Re as r,Ue as t};

package/storybook-static/assets/DropdownMenu-BgzIzwzM.css

@@ -0,0 +1 @@
+.nPfxbm{--menu-max-height:min(22em, calc(100dvh - var(--space-xl)));--menu-min-width:13em;--menu-max-width:min(22em, calc(100dvw - var(--space-xl)));min-width:var(--menu-min-width);max-width:var(--menu-max-width);padding:var(--space-xs);background-color:var(--surface-0);border:var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:var(--z-dropdown);outline:none}.T8GF31{max-height:var(--menu-max-height);overflow:auto}.XM9raj{gap:var(--space-sm)}.JY0XKk{justify-content:center;align-items:center;display:inline-flex}.Jj7pGe{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.o7v3XA{font-size:var(--font-size-sm)}.f9wo9l{width:var(--radial-panel-size);height:var(--radial-panel-size);z-index:var(--z-context-menu,var(--z-dropdown));pointer-events:none;outline:none;position:fixed}._9IPwGF{inset:calc(var(--radial-item-size) / 2);border:var(--border);background:radial-gradient(circle, color-mix(in srgb, var(--surface-0) 96%, transparent) 0 36%, transparent 37%), color-mix(in srgb, var(--surface-0) 88%, transparent);box-shadow:var(--shadow-md);pointer-events:none;border-radius:50%;position:absolute}.CAmmlz{width:calc(var(--radial-item-size) * .72);height:calc(var(--radial-item-size) * .72);padding:var(--space-xs);border:var(--border);background-color:var(--surface-0);color:var(--content-0);box-shadow:var(--shadow-sm);pointer-events:auto;transition:background-color var(--transition-fast) ease, border-color var(--transition-fast) ease, color var(--transition-fast) ease, transform var(--transition-fast) ease;border-radius:50%;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.CAmmlz:focus{background-color:var(--surface-1);border-color:var(--border-1)}.CAmmlz:focus-visible{background-color:var(--surface-accent);color:var(--content-accent);cursor:pointer;transform:translate(-50%,-50%)scale(1.06)}@media (any-hover:hover){.CAmmlz:hover{background-color:var(--surface-accent);color:var(--content-accent);cursor:pointer;transform:translate(-50%,-50%)scale(1.06)}}@media (any-hover:none){.CAmmlz:active{background-color:var(--surface-accent);color:var(--content-accent);cursor:pointer;transform:translate(-50%,-50%)scale(1.06)}}._5KEBWR{text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:var(--font-size-sm);line-height:1.1;overflow:hidden}.L28onY{pointer-events:none;position:absolute;inset:0}.Pg-1Y3{width:var(--radial-item-size);height:var(--radial-item-size);transform:rotate(var(--radial-item-angle)) translate(var(--radial-radius)) rotate(calc(var(--radial-item-angle) * -1)) translate(-50%, -50%);pointer-events:none;position:absolute;top:50%;left:50%}.ObIrS2{width:100%;height:100%;padding:var(--space-xs);border:var(--border);background-color:var(--surface-0);color:var(--content-0);box-shadow:var(--shadow-sm);pointer-events:auto;transition:background-color var(--transition-fast) ease, border-color var(--transition-fast) ease, color var(--transition-fast) ease, transform var(--transition-fast) ease;border-radius:50%;grid-template-rows:1fr auto;place-items:center;gap:.15rem;display:grid}.ObIrS2:focus{background-color:var(--surface-1);border-color:var(--border-1)}.ObIrS2:disabled,.ObIrS2[aria-disabled=true]{cursor:default;color:var(--content-2);opacity:.52;pointer-events:none}.ObIrS2:focus-visible{background-color:var(--surface-accent);color:var(--content-accent);cursor:pointer;transform:scale(1.06)}@media (any-hover:hover){.ObIrS2:hover{background-color:var(--surface-accent);color:var(--content-accent);cursor:pointer;transform:scale(1.06)}}@media (any-hover:none){.ObIrS2:active{background-color:var(--surface-accent);color:var(--content-accent);cursor:pointer;transform:scale(1.06)}}._0jf5vt{min-width:var(--space-md);min-height:var(--space-md);justify-content:center;align-items:center;display:inline-flex}._0jf5vt>svg{width:var(--space-md);height:var(--space-md)}.zKwsQF{text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:var(--font-size-sm);overflow:hidden}

package/storybook-static/assets/ExpandableActionPanel-D7q9two4.css

@@ -0,0 +1 @@
+.sj-rIq{justify-content:flex-end;align-items:center;gap:var(--space-sm);min-width:var(--control-height);max-width:100%;display:flex;overflow:hidden}._3anR7j{flex:auto;min-width:0;max-width:100%;overflow:hidden}.gMRIsT{width:100%;min-width:0}.f5Pv1e{align-items:center;gap:var(--space-sm);width:100%;min-width:0;display:flex}.q7eZzv{color:var(--content-0)}.maUL24{flex:0 auto}

package/storybook-static/assets/ExpandableActionPanel.stories-k-eTxMyV.js

@@ -0,0 +1,20 @@
+import{c as e,i as t}from"./preload-helper-B45gAKPr.js";import{C as n}from"./iframe-SfMJGCsn.js";import{t as r}from"./jsx-runtime-BBQGix-2.js";import{a as i,i as a}from"./utils-CReRlw17.js";import{Q as o,et as s,g as c,m as l,t as u,ut as d,v as f}from"./lucide-react-CK2oyDtF.js";import{t as p}from"./Button-BUkCW8Zg.js";import{t as m}from"./CheckBox-DTSi8Yok.js";import{t as h}from"./button-Bl3Hu8CS.js";import{a as g}from"./Input-B7DWcGCL.js";import{t as _}from"./input-Be5K9_B7.js";import{t as v}from"./Select-DYVS7SCZ.js";import{t as y}from"./select-BPvMbVDe.js";import{t as b}from"./check-box-BrnNQnSi.js";import{o as x,t as S}from"./misc-CPvLzCFJ.js";var C,w,T,E,D,O,k,A=t((()=>{C=`sj-rIq`,w=`_3anR7j`,T=`gMRIsT`,E=`f5Pv1e`,D=`q7eZzv`,O=`maUL24`,k={expandableActionPanel:C,content:w,contentScroller:T,labeledPanel:E,label:D,labeledActionPanel:O}}));function j({children:e,className:t,contentClassName:n,toggleClassName:r,open:a,defaultOpen:c=!1,disabled:l,onOpenChange:u,expandLabel:d=`Раскрыть панель действий влево`,collapseLabel:f=`Свернуть панель действий`,panelLabel:m=`Действия панели`,itemSelector:h,scrollPadding:g,smoothScroll:_}){let[v,y]=(0,M.useState)(c),b=(0,M.useId)(),S=a!==void 0,C=S?a:v,w=(0,M.useCallback)(e=>{let t=typeof e==`function`?e(C):e;S||y(t),u?.(t)},[S,u,C]),T=()=>w(e=>!e),E=C?o:s;return(0,N.jsxs)(`div`,{className:i(k.expandableActionPanel,t),"data-ui":`expandable-action-panel`,"data-open":C?``:void 0,children:[(0,N.jsx)(p,{className:r,icon:(0,N.jsx)(E,{}),title:C?f:d,disabled:l,variant:`neutralOutline`,"aria-expanded":C,"aria-controls":b,"data-ui":`expandable-action-panel-toggle`,"data-action":C?`collapse-action-panel`:`expand-action-panel`,onClick:T}),C&&(0,N.jsx)(`div`,{id:b,role:`group`,"aria-label":m,className:i(k.content,n),children:(0,N.jsx)(x,{className:k.contentScroller,itemSelector:h,scrollPadding:g,smooth:_,children:e})})]})}var M,N,P=t((()=>{M=e(n(),1),a(),u(),h(),S(),A(),N=r(),j.__docgenInfo={description:`Горизонтальная раскрывающаяся панель действий.
+Не знает о внешнем layout и может использоваться рядом с любым содержимым.`,methods:[],displayName:`ExpandableActionPanel`,props:{className:{required:!1,tsType:{name:`string`},description:``},contentClassName:{required:!1,tsType:{name:`string`},description:``},toggleClassName:{required:!1,tsType:{name:`string`},description:``},open:{required:!1,tsType:{name:`boolean`},description:``},defaultOpen:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`false`,computed:!1}},disabled:{required:!1,tsType:{name:`boolean`},description:``},onOpenChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(open: boolean) => void`,signature:{arguments:[{type:{name:`boolean`},name:`open`}],return:{name:`void`}}},description:``},expandLabel:{required:!1,tsType:{name:`string`},description:``,defaultValue:{value:`"Раскрыть панель действий влево"`,computed:!1}},collapseLabel:{required:!1,tsType:{name:`string`},description:``,defaultValue:{value:`"Свернуть панель действий"`,computed:!1}},panelLabel:{required:!1,tsType:{name:`string`},description:``,defaultValue:{value:`"Действия панели"`,computed:!1}},itemSelector:{required:!1,tsType:{name:`string`},description:``},scrollPadding:{required:!1,tsType:{name:`number`},description:``},smoothScroll:{required:!1,tsType:{name:`boolean`},description:``}},composes:[`PropsWithChildren`]}}));function F({label:e,className:t,labelClassName:n,labelStyle:r,labelMinWidth:a=`12em`,panelClassName:o,open:s,defaultOpen:c,...l}){let u={...r,minWidth:a},d=typeof e==`string`?e:void 0;return(0,I.jsxs)(`div`,{className:i(k.labeledPanel,t),"data-ui":`labeled-expandable-action-panel`,children:[(0,I.jsx)(`div`,{className:i(`flexEllipsis`,k.label,n),style:u,title:d,children:e}),(0,I.jsx)(j,{...l,open:s,defaultOpen:c,className:i(k.labeledActionPanel,o)})]})}var I,L=t((()=>{n(),a(),P(),A(),I=r(),F.__docgenInfo={description:"Раскрывающаяся панель действий с левым текстом, который сжимается через `flexEllipsis`.",methods:[],displayName:`LabeledExpandableActionPanel`,props:{label:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},className:{required:!1,tsType:{name:`string`},description:``},labelClassName:{required:!1,tsType:{name:`string`},description:``},labelStyle:{required:!1,tsType:{name:`ReactCSSProperties`,raw:`React.CSSProperties`},description:``},labelMinWidth:{required:!1,tsType:{name:`ReactCSSProperties["minWidth"]`,raw:`React.CSSProperties["minWidth"]`},description:``,defaultValue:{value:`"12em"`,computed:!1}},panelClassName:{required:!1,tsType:{name:`string`},description:``}},composes:[`Omit`]}}));function R(){let[e,t]=(0,z.useState)(``),[n,r]=(0,z.useState)(!1),[i,a]=(0,z.useState)(`Все`);return(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(`div`,{style:{width:`calc(14em + var(--width-add))`},children:(0,B.jsx)(g,{placeholder:`Поиск`,value:e,onChange:t,endAdornment:(0,B.jsx)(c,{})})}),(0,B.jsx)(`div`,{style:{width:`calc(12em + var(--width-add))`},children:(0,B.jsx)(v,{placeholder:`Статус`,options:U,value:i,onChange:a,getOptionKey:e=>e,getOptionLabel:e=>e})}),(0,B.jsx)(m,{placeholder:`Только мои`,value:n,onChange:r,noWrap:!0}),(0,B.jsx)(p,{icon:(0,B.jsx)(f,{}),title:`Обновить`}),(0,B.jsx)(p,{icon:(0,B.jsx)(l,{}),title:`Настроить`}),(0,B.jsx)(p,{icon:(0,B.jsx)(d,{}),tone:`success`,appearance:`solid`,children:`Применить`})]})}var z,B,V,H,U,W,G,K;t((()=>{z=e(n(),1),u(),h(),b(),_(),y(),P(),L(),B=r(),{fn:V}=__STORYBOOK_MODULE_TEST__,H={title:`Shared/UI/ExpandableActionPanel`,component:F,args:{label:`Длинное название строки с результатами расчёта и параметрами отбора`,labelMinWidth:`18em`,defaultOpen:!1,onOpenChange:V()},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Текст или ReactNode слева от панели.`,control:`text`},labelMinWidth:{description:"Минимальная ширина `flexEllipsis`-текста.",control:`text`},defaultOpen:{description:`Начальное состояние раскрытия в uncontrolled-режиме.`,control:`boolean`},open:{description:`Контролируемое состояние раскрытия.`,control:`boolean`},onOpenChange:{description:`Вызывается при раскрытии или сворачивании панели.`,control:!1}}},U=[`Все`,`Активные`,`Архив`],W={render:e=>(0,B.jsx)(`div`,{style:{width:`min(100%, 920px)`},children:(0,B.jsx)(F,{...e,children:(0,B.jsx)(R,{})})})},G={render:()=>(0,B.jsx)(`div`,{style:{width:`min(100%, 720px)`,display:`flex`,justifyContent:`flex-end`},children:(0,B.jsx)(j,{defaultOpen:!0,children:(0,B.jsx)(R,{})})})},W.parameters={...W.parameters,docs:{...W.parameters?.docs,source:{originalSource:`{
+  render: args => <div style={{
+    width: "min(100%, 920px)"
+  }}>
+            <LabeledExpandableActionPanel {...args}>
+                <DemoControls />
+            </LabeledExpandableActionPanel>
+        </div>
+}`,...W.parameters?.docs?.source}}},G.parameters={...G.parameters,docs:{...G.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    width: "min(100%, 720px)",
+    display: "flex",
+    justifyContent: "flex-end"
+  }}>
+            <ExpandableActionPanel defaultOpen>
+                <DemoControls />
+            </ExpandableActionPanel>
+        </div>
+}`,...G.parameters?.docs?.source}}},K=[`Labeled`,`BasePanel`]}))();export{G as BasePanel,W as Labeled,K as __namedExportsOrder,H as default};

package/storybook-static/assets/Flex-BQkqAqL5.js

@@ -0,0 +1,61 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-CwEU-ME1.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DnKFgFHy.js";import{AlignItems as p,BasicColumn as m,BasicRow as h,Directions as g,FlexItems as _,Gaps as v,InlineFlex as y,JustifyContent as b,Predefined as x,RealWorld as S,Wrapping as C,n as w,t as T}from"./Flex.stories-C1VO9Ct3.js";function E(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)(a,{of:T,parameters:{docs:{toc:!0}}}),`
+`,(0,O.jsx)(c,{children:`Flex`}),`
+`,(0,O.jsx)(i,{children:`Набор flex-layout примитивов для строк, колонок и быстрых компоновок интерфейса`}),`
+`,(0,O.jsx)(o.p,{children:`Flex уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
+Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента.`}),`
+`,(0,O.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,O.jsx)(u,{}),`
+`,(0,O.jsx)(n,{of:h}),`
+`,(0,O.jsx)(o.pre,{children:(0,O.jsx)(o.code,{className:`language-tsx`,children:`import { Flex } from "@/shared/ui";
+
+export function Example() {
+	return (
+		<Flex.Container gap="md" align="center">
+			<Flex.Item>Фильтры</Flex.Item>
+			<Flex.Item>Действия</Flex.Item>
+		</Flex.Container>
+	);
+}
+`})}),`
+`,(0,O.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,O.jsxs)(o.ul,{children:[`
+`,(0,O.jsx)(o.li,{children:`Начните с базового сценария ниже, а затем проверьте в stories те состояния, которые реально используются в вашем экране.`}),`
+`]}),`
+`,(0,O.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,O.jsx)(o.h3,{id:`базовый-row-сценарий-flex-раскладки`,children:`Базовый row-сценарий flex-раскладки`}),`
+`,(0,O.jsx)(o.p,{children:`Базовый row-сценарий flex-раскладки.`}),`
+`,(0,O.jsx)(l,{of:h}),`
+`,(0,O.jsx)(o.h3,{id:`базовый-column-сценарий-flex-раскладки`,children:`Базовый column-сценарий flex-раскладки`}),`
+`,(0,O.jsx)(o.p,{children:`Базовый column-сценарий flex-раскладки.`}),`
+`,(0,O.jsx)(l,{of:m}),`
+`,(0,O.jsx)(o.h3,{id:`сравнение-доступных-направлений-раскладки`,children:`Сравнение доступных направлений раскладки`}),`
+`,(0,O.jsx)(o.p,{children:`Сравнение доступных направлений раскладки.`}),`
+`,(0,O.jsx)(l,{of:g}),`
+`,(0,O.jsx)(o.h3,{id:`выравнивание-элементов-по-главной-оси`,children:`Выравнивание элементов по главной оси`}),`
+`,(0,O.jsx)(o.p,{children:`Выравнивание элементов по главной оси.`}),`
+`,(0,O.jsx)(l,{of:b}),`
+`,(0,O.jsx)(o.h3,{id:`выравнивание-по-поперечной-оси`,children:`Выравнивание по поперечной оси`}),`
+`,(0,O.jsx)(o.p,{children:`Выравнивание по поперечной оси.`}),`
+`,(0,O.jsx)(l,{of:p}),`
+`,(0,O.jsx)(o.h3,{id:`поведение-при-переносе-элементов`,children:`Поведение при переносе элементов`}),`
+`,(0,O.jsx)(o.p,{children:`Поведение при переносе элементов.`}),`
+`,(0,O.jsx)(l,{of:C}),`
+`,(0,O.jsx)(o.h3,{id:`сравнение-интервалов-между-элементами`,children:`Сравнение интервалов между элементами`}),`
+`,(0,O.jsx)(o.p,{children:`Сравнение интервалов между элементами.`}),`
+`,(0,O.jsx)(l,{of:v}),`
+`,(0,O.jsx)(o.h3,{id:`настройка-поведения-отдельных-flex-элементов`,children:`Настройка поведения отдельных flex-элементов`}),`
+`,(0,O.jsx)(o.p,{children:`Настройка поведения отдельных flex-элементов.`}),`
+`,(0,O.jsx)(l,{of:_}),`
+`,(0,O.jsx)(o.h3,{id:`использование-готовых-преднастроенных-вариантов`,children:`Использование готовых преднастроенных вариантов`}),`
+`,(0,O.jsx)(o.p,{children:`Использование готовых преднастроенных вариантов.`}),`
+`,(0,O.jsx)(l,{of:x}),`
+`,(0,O.jsx)(o.h3,{id:`режим-inline-flex-в-составе-потока`,children:`Режим inline-flex в составе потока`}),`
+`,(0,O.jsx)(o.p,{children:`Режим inline-flex в составе потока.`}),`
+`,(0,O.jsx)(l,{of:y}),`
+`,(0,O.jsx)(o.h3,{id:`прикладной-пример-использования-в-интерфейсе`,children:`Прикладной пример использования в интерфейсе`}),`
+`,(0,O.jsx)(o.p,{children:`Прикладной пример использования в интерфейсе.`}),`
+`,(0,O.jsx)(l,{of:S}),`
+`,(0,O.jsx)(o.h2,{id:`api`,children:`API`}),`
+`,(0,O.jsx)(s,{of:T}),`
+`,(0,O.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,O.jsx)(r,{includePrimary:!1})]})}function D(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,O.jsx)(n,{...e,children:(0,O.jsx)(E,{...e})}):E(e)}var O;e((()=>{O=d(),f(),o(),w()}))();export{D as default};

package/storybook-static/assets/Flex-C_VnI9xY.js

@@ -0,0 +1,3 @@
+import{c as e,i as t}from"./preload-helper-B45gAKPr.js";import{C as n}from"./iframe-SfMJGCsn.js";import{t as r}from"./jsx-runtime-BBQGix-2.js";import{n as i,r as a,t as ee}from"./media-Djn0SUaN.js";var o,s,c,te,ne,re,ie,ae,oe,se,ce,le,ue,l,u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,de,fe,pe,me,he,ge,_e,ve,ye,be,xe,Se,Ce,we,Te,G,Ee=t((()=>{o=`ZNPIAt`,s=`FOfB6f`,c=`S3zmDT`,te=`ZFdq8E`,ne=`VAzJwr`,re=`-U1mun`,ie=`_4ZMtr-`,ae=`SKOoTV`,oe=`sSe6vs`,se=`_3K-dKm`,ce=`-Pfy-z`,le=`beSYgR`,ue=`Ewhv1G`,l=`JXvBB6`,u=`hN3T0k`,d=`KKCJ5o`,f=`MnX1Le`,p=`Hom9eH`,m=`Oujm4J`,h=`_2ttx6l`,g=`QEwI8b`,_=`_7GQOS7`,v=`_2IOpAA`,y=`fZOYKH`,b=`_01H9Wl`,x=`GiMq3P`,S=`tfwckC`,C=`_9tNYb7`,w=`PoehYn`,T=`D9yh46`,E=`B5WUhS`,D=`KfUmo4`,O=`m-8JGj`,k=`zFcs1z`,A=`_0wKkFA`,j=`VQY6wh`,M=`csJmh7`,N=`_-8r3Oj`,P=`sCELJe`,F=`NrH1WE`,I=`IIgbrj`,L=`alT7CJ`,R=`TBFK23`,z=`JR1URZ`,B=`i1imd3`,V=`IVZ-ii`,H=`zhghPS`,U=`-A4gJM`,W=`_3Q-lT-`,de=`YSg8P9`,fe=`RMXnTk`,pe=`YyYE7z`,me=`LD3bM5`,he=`HpcoTp`,ge=`E7ItD3`,_e=`v0JFEC`,ve=`pmMEmH`,ye=`qevFHG`,be=`OTPY33`,xe=`AjRxTP`,Se=`_1YaZWf`,Ce=`H-DHBq`,we=`JzIGGJ`,Te=`aqYTBq`,G={container:o,inline:s,row:c,column:te,rowReverse:ne,columnReverse:re,wrap:ie,nowrap:ae,wrapReverse:oe,alignStart:se,alignCenter:ce,alignEnd:le,alignStretch:ue,alignBaseline:l,justifyStart:u,justifyCenter:d,justifyEnd:f,justifyStretch:p,justifyBetween:m,justifyAround:h,justifyEvenly:g,alignContentStart:_,alignContentCenter:v,alignContentEnd:y,alignContentStretch:b,alignContentBetween:x,alignContentAround:S,alignContentEvenly:C,gapNone:w,gapRowXs:T,gapRowSm:E,gapRowMd:D,gapRowLg:O,gapRowXl:k,gapColumnXs:A,gapColumnSm:j,gapColumnMd:M,gapColumnLg:N,gapColumnXl:P,gapXs:F,gapSm:I,gapMd:L,gapLg:R,gapXl:z,item:B,grow:V,grow0:H,shrink:U,shrink0:W,basis0:de,basisAuto:fe,flex0:pe,flex1:me,alignSelfStart:he,alignSelfCenter:ge,alignSelfEnd:_e,alignSelfStretch:ve,alignSelfBaseline:ye,justifySelfCenter:be,justifySelfEnd:xe,justifySelfStretch:Se,center:Ce,columnCenter:we,centerBetween:Te}})),K,De,Oe,ke,q=t((()=>{K=e(n(),1),Ee(),De=e=>(0,K.useMemo)(()=>{let t=[G.container];return e.inline&&t.push(G.inline),e.row?t.push(G.row):e.column?t.push(G.column):e.rowReverse?t.push(G.rowReverse):e.columnReverse&&t.push(G.columnReverse),e.wrap?t.push(G.wrap):e.nowrap?t.push(G.nowrap):e.wrapReverse&&t.push(G.wrapReverse),e.align&&t.push(G[`align${e.align.charAt(0).toUpperCase()+e.align.slice(1)}`]),e.justify&&t.push(G[`justify${e.justify.charAt(0).toUpperCase()+e.justify.slice(1)}`]),e.alignContent&&t.push(G[`alignContent${e.alignContent.charAt(0).toUpperCase()+e.alignContent.slice(1)}`]),e.gap===`none`?t.push(G.gapNone):e.gap&&t.push(G[`gap${e.gap.charAt(0).toUpperCase()+e.gap.slice(1)}`]),e.gapRow&&t.push(G[`gapRow${e.gapRow.charAt(0).toUpperCase()+e.gapRow.slice(1)}`]),e.gapColumn&&t.push(G[`gapColumn${e.gapColumn.charAt(0).toUpperCase()+e.gapColumn.slice(1)}`]),t.filter(Boolean).join(` `)},[e]),Oe=e=>(0,K.useMemo)(()=>{let t=[G.item];return e.flex0&&t.push(G.flex0),e.flex1&&t.push(G.flex1),!e.flex0&&!e.flex1&&(e.grow?t.push(G.grow):t.push(G.grow0),e.shrink===!1?t.push(G.shrink0):t.push(G.shrink),e.basis===`0`?t.push(G.basis0):e.basis===`auto`&&t.push(G.basisAuto)),e.alignSelf&&t.push(G[`alignSelf${e.alignSelf.charAt(0).toUpperCase()+e.alignSelf.slice(1)}`]),e.justifySelf&&t.push(G[`justifySelf${e.justifySelf.charAt(0).toUpperCase()+e.justifySelf.slice(1)}`]),t.filter(Boolean).join(` `)},[e]),ke=e=>G[e]})),J,Ae,Y,X=t((()=>{J=e(n(),1),a(),q(),Ae=[`inline`,`row`,`column`,`rowReverse`,`columnReverse`,`wrap`,`nowrap`,`wrapReverse`,`align`,`justify`,`alignContent`,`gap`,`gapRow`,`gapColumn`],Y=(0,J.forwardRef)(({children:e,className:t=``,as:n,style:r,...a},o)=>{let{activeBreakpoint:s}=ee(),c=[De((0,J.useMemo)(()=>i(a,s,Ae),[a,s])),t].filter(Boolean).join(` `);return(0,J.createElement)(n||`div`,{ref:o,className:c,style:r},e)}),Y.displayName=`FlexContainer`,Y.__docgenInfo={description:``,methods:[],displayName:`FlexContainer`,props:{inline:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:"Тип display `flex | inline-flex`"},row:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Направление flex-контейнера`},column:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:``},rowReverse:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:``},columnReverse:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:``},wrap:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Перенос элементов`},nowrap:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:``},wrapReverse:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:``},align:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch" | "baseline"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`},{name:`literal`,value:`"baseline"`}]}],raw:`ResponsiveValue<FlexAlign>`},description:`Выравнивание по поперечной оси`},justify:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`},{name:`literal`,value:`"between"`},{name:`literal`,value:`"around"`},{name:`literal`,value:`"evenly"`}]}],raw:`ResponsiveValue<FlexJustify>`},description:`Выравнивание по главной оси`},alignContent:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`},{name:`literal`,value:`"between"`},{name:`literal`,value:`"around"`},{name:`literal`,value:`"evenly"`}]}],raw:`ResponsiveValue<FlexJustify>`},description:`Выравнивание контента`},gap:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"none" | "xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"none"`},{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]}],raw:`ResponsiveValue<FlexGap>`},description:`Gap`},gapRow:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`Exclude`,elements:[{name:`union`,raw:`"none" | "xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"none"`},{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},{name:`literal`,value:`"none"`}],raw:`Exclude<FlexGap, "none">`}],raw:`ResponsiveValue<Exclude<FlexGap, "none">>`},description:`Row gap`},gapColumn:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`Exclude`,elements:[{name:`union`,raw:`"none" | "xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"none"`},{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},{name:`literal`,value:`"none"`}],raw:`Exclude<FlexGap, "none">`}],raw:`ResponsiveValue<Exclude<FlexGap, "none">>`},description:`Column gap`},children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:`Дочерние элементы`},className:{required:!1,tsType:{name:`string`},description:`CSS класс`,defaultValue:{value:`""`,computed:!1}},as:{required:!1,tsType:{name:`JSX.IntrinsicElements`},description:`HTML тег`},style:{required:!1,tsType:{name:`CSSProperties`},description:`Inline styles`}}}})),Z,je,Q,Me=t((()=>{Z=e(n(),1),a(),q(),je=[`flex0`,`flex1`,`grow`,`shrink`,`basis`,`alignSelf`,`justifySelf`],Q=(0,Z.forwardRef)(({children:e,className:t=``,as:n,style:r,...a},o)=>{let{activeBreakpoint:s}=ee(),c=[Oe((0,Z.useMemo)(()=>i(a,s,je),[a,s])),t].filter(Boolean).join(` `);return(0,Z.createElement)(n||`div`,{ref:o,className:c,style:r},e)}),Q.displayName=`FlexItem`,Q.__docgenInfo={description:``,methods:[],displayName:`FlexItem`,props:{grow:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Способность расти
+@default false = 0`},shrink:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Способность сжиматься
+@default true = 1`},flex0:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Использовать составной класс flex0`},flex1:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`boolean`}],raw:`ResponsiveValue<boolean>`},description:`Использовать составной класс flex1`},basis:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"0" | "auto"`,elements:[{name:`literal`,value:`"0"`},{name:`literal`,value:`"auto"`}]}],raw:`ResponsiveValue<FlexBasis>`},description:`Базовый размер`},alignSelf:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch" | "baseline"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`},{name:`literal`,value:`"baseline"`}]}],raw:`ResponsiveValue<FlexAlign>`},description:`Выравнивание отдельного элемента`},justifySelf:{required:!1,tsType:{name:`ResponsiveValue`,elements:[{name:`Exclude`,elements:[{name:`union`,raw:`"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly"`,elements:[{name:`literal`,value:`"start"`},{name:`literal`,value:`"center"`},{name:`literal`,value:`"end"`},{name:`literal`,value:`"stretch"`},{name:`literal`,value:`"between"`},{name:`literal`,value:`"around"`},{name:`literal`,value:`"evenly"`}]},{name:`union`,raw:`"between" | "around" | "evenly"`,elements:[{name:`literal`,value:`"between"`},{name:`literal`,value:`"around"`},{name:`literal`,value:`"evenly"`}]}],raw:`Exclude<FlexJustify, "between" | "around" | "evenly">`}],raw:`ResponsiveValue<Exclude<FlexJustify, "between" | "around" | "evenly">>`},description:`Justify-self для grid-like выравнивания`},children:{required:!1,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:`Дочерние элементы`},className:{required:!1,tsType:{name:`string`},description:`CSS класс`,defaultValue:{value:`""`,computed:!1}},as:{required:!1,tsType:{name:`JSX.IntrinsicElements`},description:`HTML тег`},style:{required:!1,tsType:{name:`CSSProperties`},description:`Inline styles`}}}})),Ne,Pe,$,Fe=t((()=>{Ne=e(n(),1),X(),q(),Pe=r(),$=(0,Ne.forwardRef)(({variant:e,children:t,className:n=``,...r},i)=>(0,Pe.jsx)(Y,{ref:i,className:[ke(e??``),n].filter(Boolean).join(` `),...r,children:t})),$.displayName=`PredefinedFlex`,$.__docgenInfo={description:``,methods:[],displayName:`PredefinedFlex`,props:{variant:{required:!1,tsType:{name:`union`,raw:`"center" | "centerBetween" | "columnCenter"`,elements:[{name:`literal`,value:`"center"`},{name:`literal`,value:`"centerBetween"`},{name:`literal`,value:`"columnCenter"`}]},description:``},className:{defaultValue:{value:`""`,computed:!1},required:!1}},composes:[`Omit`]}})),Ie,Le=t((()=>{X(),Me(),Fe(),Ie={Container:Y,Item:Q,Predefined:$}}));export{Me as a,Q as i,Le as n,Y as o,Fe as r,X as s,Ie as t};

package/storybook-static/assets/Flex-IXK2se1Y.css

@@ -0,0 +1 @@
+.ZNPIAt{display:flex}.ZNPIAt.FOfB6f{vertical-align:middle;display:inline-flex}.ZNPIAt.S3zmDT{flex-direction:row}.ZNPIAt.ZFdq8E{flex-direction:column}.ZNPIAt.VAzJwr{flex-direction:row-reverse}.ZNPIAt.-U1mun{flex-direction:column-reverse}.ZNPIAt._4ZMtr-{flex-wrap:wrap}.ZNPIAt.SKOoTV{flex-wrap:nowrap}.ZNPIAt.sSe6vs{flex-wrap:wrap-reverse}.ZNPIAt._3K-dKm{align-items:start}.ZNPIAt.-Pfy-z{align-items:center}.ZNPIAt.beSYgR{align-items:end}.ZNPIAt.Ewhv1G{align-items:stretch}.ZNPIAt.JXvBB6{align-items:baseline}.ZNPIAt.hN3T0k{justify-content:start}.ZNPIAt.KKCJ5o{justify-content:center}.ZNPIAt.MnX1Le{justify-content:end}.ZNPIAt.Hom9eH{justify-content:stretch}.ZNPIAt.Oujm4J{justify-content:space-between}.ZNPIAt._2ttx6l{justify-content:space-around}.ZNPIAt.QEwI8b{justify-content:space-evenly}.ZNPIAt._7GQOS7{align-content:start}.ZNPIAt._2IOpAA{align-content:center}.ZNPIAt.fZOYKH{align-content:end}.ZNPIAt._01H9Wl{align-content:stretch}.ZNPIAt.GiMq3P{align-content:space-between}.ZNPIAt.tfwckC{align-content:space-around}.ZNPIAt._9tNYb7{align-content:space-evenly}.ZNPIAt.PoehYn{gap:unset}.ZNPIAt.D9yh46{row-gap:var(--space-xs)}.ZNPIAt.B5WUhS{row-gap:var(--space-sm)}.ZNPIAt.KfUmo4{row-gap:var(--space-md)}.ZNPIAt.m-8JGj{row-gap:var(--space-lg)}.ZNPIAt.zFcs1z{row-gap:var(--space-xl)}.ZNPIAt._0wKkFA{column-gap:var(--space-xs)}.ZNPIAt.VQY6wh{column-gap:var(--space-sm)}.ZNPIAt.csJmh7{column-gap:var(--space-md)}.ZNPIAt._-8r3Oj{column-gap:var(--space-lg)}.ZNPIAt.sCELJe{column-gap:var(--space-xl)}.ZNPIAt.NrH1WE{row-gap:var(--space-xs);column-gap:var(--space-xs)}.ZNPIAt.IIgbrj{row-gap:var(--space-sm);column-gap:var(--space-sm)}.ZNPIAt.alT7CJ{row-gap:var(--space-md);column-gap:var(--space-md)}.ZNPIAt.TBFK23{row-gap:var(--space-lg);column-gap:var(--space-lg)}.ZNPIAt.JR1URZ{row-gap:var(--space-xl);column-gap:var(--space-xl)}.i1imd3.IVZ-ii{flex-grow:1}.i1imd3.zhghPS{flex-grow:0}.i1imd3.-A4gJM{flex-shrink:1}.i1imd3._3Q-lT-{flex-shrink:0}.i1imd3.YSg8P9{flex-basis:0}.i1imd3.RMXnTk{flex-basis:auto}.i1imd3.YyYE7z{flex:none}.i1imd3.LD3bM5{flex:auto}.i1imd3.HpcoTp{align-self:start}.i1imd3.E7ItD3{align-self:center}.i1imd3.v0JFEC{align-self:end}.i1imd3.pmMEmH{align-self:stretch}.i1imd3.qevFHG{align-self:baseline}.i1imd3.OTPY33{justify-self:center}.i1imd3.AjRxTP{justify-self:end}.i1imd3._1YaZWf{justify-self:stretch}.H-DHBq,.JzIGGJ{justify-content:center;align-items:center;display:flex}.aqYTBq{justify-content:space-between;align-items:center;display:flex}.JzIGGJ{flex-direction:column;height:100%}

package/storybook-static/assets/Flex.stories-C1VO9Ct3.js

@@ -0,0 +1,300 @@
+import{a as e,i as t}from"./preload-helper-B45gAKPr.js";import{C as n}from"./iframe-SfMJGCsn.js";import{t as r}from"./jsx-runtime-BBQGix-2.js";import{n as i,t as a}from"./Flex-C_VnI9xY.js";var o=e({AlignItems:()=>g,BasicColumn:()=>p,BasicRow:()=>f,Directions:()=>m,FlexItems:()=>y,Gaps:()=>v,InlineFlex:()=>x,JustifyContent:()=>h,Predefined:()=>b,RealWorld:()=>S,Wrapping:()=>_,__namedExportsOrder:()=>C,default:()=>d}),s,c,l,u,d,f,p,m,h,g,_,v,y,b,x,S,C,w=t((()=>{n(),i(),s=r(),c={container:{border:`2px dashed var(--border-0)`,padding:`2em`,marginBlock:`1em`},item:{padding:`16px`,textAlign:`center`,fontWeight:`bold`,color:`white`,minHeight:`5em`,minWidth:`10em`,display:`flex`,alignItems:`center`,justifyContent:`center`},itemColors:[`#ff6b6b`,`#4ecdc4`,`#45b7d1`,`#96ceb4`,`#feca57`,`#ff9ff3`]},l=e=>c.itemColors[e%c.itemColors.length],u=({children:e,index:t=0})=>(0,s.jsx)(a.Item,{style:{...c.item,backgroundColor:l(t)},children:e}),d={title:`Shared/Layout/Flex`,component:a.Container,parameters:{layout:`padded`}},f={render:e=>(0,s.jsx)(a.Container,{...e,style:c.container}),args:{children:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(u,{index:0,children:`Item 1`}),(0,s.jsx)(u,{index:1,children:`Item 2`}),(0,s.jsx)(u,{index:2,children:`Item 3`})]}),row:!0}},p={render:e=>(0,s.jsx)(a.Container,{...e,style:c.container}),args:{children:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(u,{index:0,children:`Header`}),(0,s.jsx)(u,{index:1,children:`Content`}),(0,s.jsx)(u,{index:2,children:`Footer`})]}),column:!0}},m={render:()=>(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h3`,{children:`Row (default)`}),(0,s.jsxs)(a.Container,{row:!0,style:c.container,children:[(0,s.jsx)(u,{index:0,children:`1`}),(0,s.jsx)(u,{index:1,children:`2`}),(0,s.jsx)(u,{index:2,children:`3`})]}),(0,s.jsx)(`h3`,{children:`Row Reverse`}),(0,s.jsxs)(a.Container,{rowReverse:!0,style:c.container,children:[(0,s.jsx)(u,{index:0,children:`1`}),(0,s.jsx)(u,{index:1,children:`2`}),(0,s.jsx)(u,{index:2,children:`3`})]}),(0,s.jsx)(`h3`,{children:`Column`}),(0,s.jsxs)(a.Container,{column:!0,style:c.container,children:[(0,s.jsx)(u,{index:0,children:`1`}),(0,s.jsx)(u,{index:1,children:`2`}),(0,s.jsx)(u,{index:2,children:`3`})]}),(0,s.jsx)(`h3`,{children:`Column Reverse`}),(0,s.jsxs)(a.Container,{columnReverse:!0,style:c.container,children:[(0,s.jsx)(u,{index:0,children:`1`}),(0,s.jsx)(u,{index:1,children:`2`}),(0,s.jsx)(u,{index:2,children:`3`})]})]}),args:{children:void 0}},h={render:()=>(0,s.jsx)(`div`,{children:[`start`,`center`,`end`,`between`,`around`,`evenly`].map(e=>(0,s.jsxs)(`div`,{children:[(0,s.jsxs)(`h3`,{children:[`Justify: `,e]}),(0,s.jsxs)(a.Container,{row:!0,justify:e,style:c.container,children:[(0,s.jsx)(u,{index:0,children:`Item 1`}),(0,s.jsx)(u,{index:1,children:`Item 2`}),(0,s.jsx)(u,{index:2,children:`Item 3`})]})]},e))}),args:{children:void 0}},g={render:()=>(0,s.jsx)(`div`,{children:[`start`,`center`,`end`,`stretch`,`baseline`].map(e=>(0,s.jsxs)(`div`,{children:[(0,s.jsxs)(`h3`,{children:[`Align: `,e]}),(0,s.jsxs)(a.Container,{row:!0,align:e,style:{...c.container,height:`120px`},children:[(0,s.jsx)(u,{index:0,children:(0,s.jsx)(`div`,{children:`Short`})}),(0,s.jsx)(u,{index:1,children:(0,s.jsx)(`div`,{style:{padding:`40px`},children:`Tall`})}),(0,s.jsx)(u,{index:2,children:(0,s.jsx)(`div`,{style:{padding:`24px`},children:`Medium`})})]})]},e))}),args:{children:void 0}},_={render:()=>(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h3`,{children:`No Wrap (default)`}),(0,s.jsx)(a.Container,{row:!0,nowrap:!0,style:c.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,s.jsxs)(u,{index:e,children:[`Item `,e]},e))}),(0,s.jsx)(`h3`,{children:`Wrap`}),(0,s.jsx)(a.Container,{row:!0,wrap:!0,style:c.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,s.jsxs)(u,{index:e,children:[`Item `,e]},e))}),(0,s.jsx)(`h3`,{children:`Wrap Reverse`}),(0,s.jsx)(a.Container,{row:!0,wrapReverse:!0,style:c.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,s.jsxs)(u,{index:e,children:[`Item `,e]},e))})]}),args:{children:void 0}},v={render:()=>(0,s.jsxs)(`div`,{children:[[`xs`,`sm`,`md`,`lg`,`xl`].map(e=>(0,s.jsxs)(`div`,{children:[(0,s.jsxs)(`h3`,{children:[`Gap: `,e]}),(0,s.jsx)(a.Container,{row:!0,wrap:!0,gap:e,style:c.container,children:[1,2,3,4,5,6].map(e=>(0,s.jsxs)(u,{index:e,children:[`Item `,e]},e))})]},e)),(0,s.jsx)(`h3`,{children:`Different Row and Column Gaps`}),(0,s.jsx)(a.Container,{row:!0,wrap:!0,gapRow:`lg`,gapColumn:`sm`,style:c.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,s.jsxs)(u,{index:e,children:[`Item `,e]},e))})]}),args:{children:void 0}},y={render:()=>(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h3`,{children:`Grow Properties`}),(0,s.jsxs)(a.Container,{row:!0,style:c.container,children:[(0,s.jsx)(u,{index:0,children:`Default`}),(0,s.jsx)(a.Item,{grow:!0,children:(0,s.jsx)(`div`,{style:{...c.item,backgroundColor:l(1)},children:`Grow`})}),(0,s.jsx)(u,{index:2,children:`Default`})]}),(0,s.jsx)(`h3`,{children:`Shrink Properties`}),(0,s.jsxs)(a.Container,{row:!0,style:{...c.container,width:`300px`},children:[(0,s.jsx)(a.Item,{shrink:!1,children:(0,s.jsx)(`div`,{style:{...c.item,backgroundColor:l(0),width:`150px`},children:`No Shrink`})}),(0,s.jsx)(a.Item,{children:(0,s.jsx)(`div`,{style:{...c.item,backgroundColor:l(1),width:`150px`},children:`Shrink (default)`})})]}),(0,s.jsx)(`h3`,{children:`Composite Classes`}),(0,s.jsxs)(a.Container,{row:!0,style:c.container,children:[(0,s.jsx)(a.Item,{flex0:!0,children:(0,s.jsx)(`div`,{style:{...c.item,backgroundColor:l(0)},children:`flex0`})}),(0,s.jsx)(a.Item,{flex1:!0,children:(0,s.jsx)(`div`,{style:{...c.item,backgroundColor:l(1)},children:`flex1`})}),(0,s.jsx)(a.Item,{flex0:!0,children:(0,s.jsx)(`div`,{style:{...c.item,backgroundColor:l(2)},children:`flex0`})})]})]}),args:{children:void 0}},b={render:()=>(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h3`,{children:`Center`}),(0,s.jsx)(a.Predefined,{variant:`center`,style:{...c.container,height:`100px`},children:(0,s.jsx)(u,{index:0,children:`Centered Content`})}),(0,s.jsx)(`h3`,{children:`Center Between`}),(0,s.jsxs)(a.Predefined,{variant:`centerBetween`,style:c.container,children:[(0,s.jsx)(u,{index:0,children:`Left`}),(0,s.jsx)(u,{index:1,children:`Right`})]})]}),args:{children:void 0}},x={render:()=>(0,s.jsxs)(`div`,{children:[(0,s.jsxs)(`p`,{children:[`This is text with`,(0,s.jsxs)(a.Container,{inline:!0,align:`center`,gap:`sm`,style:{margin:`0 8px`},children:[(0,s.jsx)(u,{index:0,children:`inline`}),(0,s.jsx)(u,{index:1,children:`flex`})]}),`elements inside.`]}),(0,s.jsxs)(`p`,{children:[`Another example with`,(0,s.jsxs)(a.Container,{inline:!0,column:!0,gap:`xs`,style:{margin:`0 8px`},children:[(0,s.jsx)(u,{index:2,children:`vertical`}),(0,s.jsx)(u,{index:3,children:`inline`})]}),`flex.`]})]}),args:{children:void 0}},S={render:()=>(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h3`,{children:`Navigation Bar`}),(0,s.jsxs)(a.Predefined,{variant:`centerBetween`,style:c.container,children:[(0,s.jsxs)(a.Container,{row:!0,align:`center`,gap:`md`,children:[(0,s.jsx)(u,{index:0,children:`Logo`}),(0,s.jsx)(u,{index:1,children:`Home`}),(0,s.jsx)(u,{index:2,children:`About`}),(0,s.jsx)(u,{index:3,children:`Contact`})]}),(0,s.jsx)(u,{index:4,children:`Login`})]}),(0,s.jsx)(`h3`,{children:`Card Layout`}),(0,s.jsx)(a.Container,{row:!0,wrap:!0,gap:`lg`,style:c.container,children:[1,2,3,4].map(e=>(0,s.jsx)(a.Item,{flex1:!0,style:{minWidth:`200px`},children:(0,s.jsxs)(`div`,{style:{border:`1px solid #ddd`,borderRadius:`8px`,padding:`16px`,textAlign:`center`,backgroundColor:l(e)},children:[(0,s.jsxs)(`h4`,{children:[`Card `,e]}),(0,s.jsx)(`p`,{children:`Card content goes here`})]})},e))}),(0,s.jsx)(`h3`,{children:`Form Layout`}),(0,s.jsxs)(a.Container,{column:!0,gap:`md`,style:c.container,children:[(0,s.jsxs)(a.Container,{row:!0,gap:`md`,children:[(0,s.jsx)(a.Item,{flex1:!0,children:(0,s.jsx)(u,{index:0,children:`First Name`})}),(0,s.jsx)(a.Item,{flex1:!0,children:(0,s.jsx)(u,{index:1,children:`Last Name`})})]}),(0,s.jsx)(u,{index:2,children:`Email`}),(0,s.jsx)(u,{index:3,children:`Message`})]})]}),args:{children:void 0}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  render: args => <Flex.Container {...args} style={demoStyles.container} />,
+  args: {
+    children: <>
+                <DemoItem index={0}>Item 1</DemoItem>
+                <DemoItem index={1}>Item 2</DemoItem>
+                <DemoItem index={2}>Item 3</DemoItem>
+            </>,
+    row: true
+  }
+}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  render: args => <Flex.Container {...args} style={demoStyles.container} />,
+  args: {
+    children: <>
+                <DemoItem index={0}>Header</DemoItem>
+                <DemoItem index={1}>Content</DemoItem>
+                <DemoItem index={2}>Footer</DemoItem>
+            </>,
+    column: true
+  }
+}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>Row (default)</h3>
+            <Flex.Container row style={demoStyles.container}>
+                <DemoItem index={0}>1</DemoItem>
+                <DemoItem index={1}>2</DemoItem>
+                <DemoItem index={2}>3</DemoItem>
+            </Flex.Container>
+
+            <h3>Row Reverse</h3>
+            <Flex.Container rowReverse style={demoStyles.container}>
+                <DemoItem index={0}>1</DemoItem>
+                <DemoItem index={1}>2</DemoItem>
+                <DemoItem index={2}>3</DemoItem>
+            </Flex.Container>
+
+            <h3>Column</h3>
+            <Flex.Container column style={demoStyles.container}>
+                <DemoItem index={0}>1</DemoItem>
+                <DemoItem index={1}>2</DemoItem>
+                <DemoItem index={2}>3</DemoItem>
+            </Flex.Container>
+
+            <h3>Column Reverse</h3>
+            <Flex.Container columnReverse style={demoStyles.container}>
+                <DemoItem index={0}>1</DemoItem>
+                <DemoItem index={1}>2</DemoItem>
+                <DemoItem index={2}>3</DemoItem>
+            </Flex.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            {(["start", "center", "end", "between", "around", "evenly"] as const).map(justify => <div key={justify}>
+                    <h3>Justify: {justify}</h3>
+                    <Flex.Container row justify={justify} style={demoStyles.container}>
+                        <DemoItem index={0}>Item 1</DemoItem>
+                        <DemoItem index={1}>Item 2</DemoItem>
+                        <DemoItem index={2}>Item 3</DemoItem>
+                    </Flex.Container>
+                </div>)}
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            {(["start", "center", "end", "stretch", "baseline"] as const).map(align => <div key={align}>
+                    <h3>Align: {align}</h3>
+                    <Flex.Container row align={align} style={{
+        ...demoStyles.container,
+        height: "120px"
+      }}>
+                        <DemoItem index={0}>
+                            <div>Short</div>
+                        </DemoItem>
+                        <DemoItem index={1}>
+                            <div style={{
+            padding: "40px"
+          }}>Tall</div>
+                        </DemoItem>
+                        <DemoItem index={2}>
+                            <div style={{
+            padding: "24px"
+          }}>Medium</div>
+                        </DemoItem>
+                    </Flex.Container>
+                </div>)}
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>No Wrap (default)</h3>
+            <Flex.Container row nowrap style={demoStyles.container}>
+                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(i => <DemoItem key={i} index={i}>
+                        Item {i}
+                    </DemoItem>)}
+            </Flex.Container>
+
+            <h3>Wrap</h3>
+            <Flex.Container row wrap style={demoStyles.container}>
+                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(i => <DemoItem key={i} index={i}>
+                        Item {i}
+                    </DemoItem>)}
+            </Flex.Container>
+
+            <h3>Wrap Reverse</h3>
+            <Flex.Container row wrapReverse style={demoStyles.container}>
+                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(i => <DemoItem key={i} index={i}>
+                        Item {i}
+                    </DemoItem>)}
+            </Flex.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            {(["xs", "sm", "md", "lg", "xl"] as const).map(gap => <div key={gap}>
+                    <h3>Gap: {gap}</h3>
+                    <Flex.Container row wrap gap={gap} style={demoStyles.container}>
+                        {[1, 2, 3, 4, 5, 6].map(i => <DemoItem key={i} index={i}>
+                                Item {i}
+                            </DemoItem>)}
+                    </Flex.Container>
+                </div>)}
+
+            <h3>Different Row and Column Gaps</h3>
+            <Flex.Container row wrap gapRow="lg" gapColumn="sm" style={demoStyles.container}>
+                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(i => <DemoItem key={i} index={i}>
+                        Item {i}
+                    </DemoItem>)}
+            </Flex.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>Grow Properties</h3>
+            <Flex.Container row style={demoStyles.container}>
+                <DemoItem index={0}>Default</DemoItem>
+                <Flex.Item grow>
+                    <div style={{
+          ...demoStyles.item,
+          backgroundColor: getItemColor(1)
+        }}>Grow</div>
+                </Flex.Item>
+                <DemoItem index={2}>Default</DemoItem>
+            </Flex.Container>
+
+            <h3>Shrink Properties</h3>
+            <Flex.Container row style={{
+      ...demoStyles.container,
+      width: "300px"
+    }}>
+                <Flex.Item shrink={false}>
+                    <div style={{
+          ...demoStyles.item,
+          backgroundColor: getItemColor(0),
+          width: "150px"
+        }}>
+                        No Shrink
+                    </div>
+                </Flex.Item>
+                <Flex.Item>
+                    <div style={{
+          ...demoStyles.item,
+          backgroundColor: getItemColor(1),
+          width: "150px"
+        }}>
+                        Shrink (default)
+                    </div>
+                </Flex.Item>
+            </Flex.Container>
+
+            <h3>Composite Classes</h3>
+            <Flex.Container row style={demoStyles.container}>
+                <Flex.Item flex0>
+                    <div style={{
+          ...demoStyles.item,
+          backgroundColor: getItemColor(0)
+        }}>flex0</div>
+                </Flex.Item>
+                <Flex.Item flex1>
+                    <div style={{
+          ...demoStyles.item,
+          backgroundColor: getItemColor(1)
+        }}>flex1</div>
+                </Flex.Item>
+                <Flex.Item flex0>
+                    <div style={{
+          ...demoStyles.item,
+          backgroundColor: getItemColor(2)
+        }}>flex0</div>
+                </Flex.Item>
+            </Flex.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>Center</h3>
+            <Flex.Predefined variant="center" style={{
+      ...demoStyles.container,
+      height: "100px"
+    }}>
+                <DemoItem index={0}>Centered Content</DemoItem>
+            </Flex.Predefined>
+
+            <h3>Center Between</h3>
+            <Flex.Predefined variant="centerBetween" style={demoStyles.container}>
+                <DemoItem index={0}>Left</DemoItem>
+                <DemoItem index={1}>Right</DemoItem>
+            </Flex.Predefined>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <p>
+                This is text with
+                <Flex.Container inline align="center" gap="sm" style={{
+        margin: "0 8px"
+      }}>
+                    <DemoItem index={0}>inline</DemoItem>
+                    <DemoItem index={1}>flex</DemoItem>
+                </Flex.Container>
+                elements inside.
+            </p>
+
+            <p>
+                Another example with
+                <Flex.Container inline column gap="xs" style={{
+        margin: "0 8px"
+      }}>
+                    <DemoItem index={2}>vertical</DemoItem>
+                    <DemoItem index={3}>inline</DemoItem>
+                </Flex.Container>
+                flex.
+            </p>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+  render: () => <div>
+            <h3>Navigation Bar</h3>
+            <Flex.Predefined variant="centerBetween" style={demoStyles.container}>
+                <Flex.Container row align="center" gap="md">
+                    <DemoItem index={0}>Logo</DemoItem>
+                    <DemoItem index={1}>Home</DemoItem>
+                    <DemoItem index={2}>About</DemoItem>
+                    <DemoItem index={3}>Contact</DemoItem>
+                </Flex.Container>
+                <DemoItem index={4}>Login</DemoItem>
+            </Flex.Predefined>
+
+            <h3>Card Layout</h3>
+            <Flex.Container row wrap gap="lg" style={demoStyles.container}>
+                {[1, 2, 3, 4].map(i => <Flex.Item key={i} flex1 style={{
+        minWidth: "200px"
+      }}>
+                        <div style={{
+          border: "1px solid #ddd",
+          borderRadius: "8px",
+          padding: "16px",
+          textAlign: "center",
+          backgroundColor: getItemColor(i)
+        }}>
+                            <h4>Card {i}</h4>
+                            <p>Card content goes here</p>
+                        </div>
+                    </Flex.Item>)}
+            </Flex.Container>
+
+            <h3>Form Layout</h3>
+            <Flex.Container column gap="md" style={demoStyles.container}>
+                <Flex.Container row gap="md">
+                    <Flex.Item flex1>
+                        <DemoItem index={0}>First Name</DemoItem>
+                    </Flex.Item>
+                    <Flex.Item flex1>
+                        <DemoItem index={1}>Last Name</DemoItem>
+                    </Flex.Item>
+                </Flex.Container>
+                <DemoItem index={2}>Email</DemoItem>
+                <DemoItem index={3}>Message</DemoItem>
+            </Flex.Container>
+        </div>,
+  args: {
+    children: undefined
+  }
+}`,...S.parameters?.docs?.source}}},C=[`BasicRow`,`BasicColumn`,`Directions`,`JustifyContent`,`AlignItems`,`Wrapping`,`Gaps`,`FlexItems`,`Predefined`,`InlineFlex`,`RealWorld`]}));w();export{g as AlignItems,p as BasicColumn,f as BasicRow,m as Directions,y as FlexItems,v as Gaps,x as InlineFlex,h as JustifyContent,b as Predefined,S as RealWorld,_ as Wrapping,C as __namedExportsOrder,d as default,w as n,o as t};

package/storybook-static/assets/Grid-Dr3BuEgd.js

@@ -0,0 +1,61 @@
+import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-CwEU-ME1.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DnKFgFHy.js";import{Alignment as p,AutoFlow as m,BasicGrid as h,ComplexTemplates as g,Gaps as _,GridAreas as v,InlineGrid as y,ItemPlacement as b,PredefinedVariants as x,RealWorld as S,Responsive as C,n as w,t as T}from"./Grid.stories-6WUp6Tof.js";function E(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)(a,{of:T,parameters:{docs:{toc:!0}}}),`
+`,(0,O.jsx)(c,{children:`Grid`}),`
+`,(0,O.jsx)(i,{children:`Композиция для построения grid-раскладок с управлением колонками, строками и позиционированием элементов`}),`
+`,(0,O.jsx)(o.p,{children:`Grid уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
+Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента.`}),`
+`,(0,O.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
+`,(0,O.jsx)(u,{}),`
+`,(0,O.jsx)(n,{of:h}),`
+`,(0,O.jsx)(o.pre,{children:(0,O.jsx)(o.code,{className:`language-tsx`,children:`import { Grid } from "@/shared/ui";
+
+export function Example() {
+	return (
+		<Grid.Container templateColumns="repeat(2, minmax(0, 1fr))" gap="md">
+			<Grid.Item>Левая колонка</Grid.Item>
+			<Grid.Item>Правая колонка</Grid.Item>
+		</Grid.Container>
+	);
+}
+`})}),`
+`,(0,O.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
+`,(0,O.jsxs)(o.ul,{children:[`
+`,(0,O.jsx)(o.li,{children:`Начните с базового сценария ниже, а затем проверьте в stories те состояния, которые реально используются в вашем экране.`}),`
+`]}),`
+`,(0,O.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
+`,(0,O.jsx)(o.h3,{id:`минимальный-пример-построения-grid-раскладки`,children:`Минимальный пример построения grid-раскладки`}),`
+`,(0,O.jsx)(o.p,{children:`Минимальный пример построения grid-раскладки.`}),`
+`,(0,O.jsx)(l,{of:h}),`
+`,(0,O.jsx)(o.h3,{id:`автоматическое-размещение-элементов-в-сетке`,children:`Автоматическое размещение элементов в сетке`}),`
+`,(0,O.jsx)(o.p,{children:`Автоматическое размещение элементов в сетке.`}),`
+`,(0,O.jsx)(l,{of:m}),`
+`,(0,O.jsx)(o.h3,{id:`выравнивание-содержимого-и-элементов-контейнера`,children:`Выравнивание содержимого и элементов контейнера`}),`
+`,(0,O.jsx)(o.p,{children:`Выравнивание содержимого и элементов контейнера.`}),`
+`,(0,O.jsx)(l,{of:p}),`
+`,(0,O.jsx)(o.h3,{id:`сравнение-интервалов-между-элементами`,children:`Сравнение интервалов между элементами`}),`
+`,(0,O.jsx)(o.p,{children:`Сравнение интервалов между элементами.`}),`
+`,(0,O.jsx)(l,{of:_}),`
+`,(0,O.jsx)(o.h3,{id:`применение-готовых-grid-вариантов`,children:`Применение готовых grid-вариантов`}),`
+`,(0,O.jsx)(o.p,{children:`Применение готовых grid-вариантов.`}),`
+`,(0,O.jsx)(l,{of:x}),`
+`,(0,O.jsx)(o.h3,{id:`использование-сложных-шаблонов-строк-и-колонок`,children:`Использование сложных шаблонов строк и колонок`}),`
+`,(0,O.jsx)(o.p,{children:`Использование сложных шаблонов строк и колонок.`}),`
+`,(0,O.jsx)(l,{of:g}),`
+`,(0,O.jsx)(o.h3,{id:`работа-с-именованными-областями-раскладки`,children:`Работа с именованными областями раскладки`}),`
+`,(0,O.jsx)(o.p,{children:`Работа с именованными областями раскладки.`}),`
+`,(0,O.jsx)(l,{of:v}),`
+`,(0,O.jsx)(o.h3,{id:`ручное-позиционирование-отдельных-элементов`,children:`Ручное позиционирование отдельных элементов`}),`
+`,(0,O.jsx)(o.p,{children:`Ручное позиционирование отдельных элементов.`}),`
+`,(0,O.jsx)(l,{of:b}),`
+`,(0,O.jsx)(o.h3,{id:`режим-inline-grid-в-потоке-документа`,children:`Режим inline-grid в потоке документа`}),`
+`,(0,O.jsx)(o.p,{children:`Режим inline-grid в потоке документа.`}),`
+`,(0,O.jsx)(l,{of:y}),`
+`,(0,O.jsx)(o.h3,{id:`прикладной-пример-использования-в-интерфейсе`,children:`Прикладной пример использования в интерфейсе`}),`
+`,(0,O.jsx)(o.p,{children:`Прикладной пример использования в интерфейсе.`}),`
+`,(0,O.jsx)(l,{of:S}),`
+`,(0,O.jsx)(o.h3,{id:`адаптация-раскладки-под-ширину-контейнера`,children:`Адаптация раскладки под ширину контейнера`}),`
+`,(0,O.jsx)(o.p,{children:`Адаптация раскладки под ширину контейнера.`}),`
+`,(0,O.jsx)(l,{of:C}),`
+`,(0,O.jsx)(o.h2,{id:`api`,children:`API`}),`
+`,(0,O.jsx)(s,{of:T}),`
+`,(0,O.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
+`,(0,O.jsx)(r,{includePrimary:!1})]})}function D(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,O.jsx)(n,{...e,children:(0,O.jsx)(E,{...e})}):E(e)}var O;e((()=>{O=d(),f(),o(),w()}))();export{D as default};

package/storybook-static/assets/Grid-K9R_IHaw.css

@@ -0,0 +1 @@
+._5Z2YQF{display:grid}._5Z2YQF.gAEXju{vertical-align:middle;display:inline-grid}._5Z2YQF.KdmGbk{grid-auto-flow:row}._5Z2YQF.uOpH1m{grid-auto-flow:column}._5Z2YQF.EOUgpE{grid-auto-flow:dense}._5Z2YQF.PoMD0P{gap:unset}._5Z2YQF.FBebhA{row-gap:var(--space-xs)}._5Z2YQF.rwvhfS{row-gap:var(--space-sm)}._5Z2YQF.ZIsGgj{row-gap:var(--space-md)}._5Z2YQF.lbAie9{row-gap:var(--space-lg)}._5Z2YQF.ylmmN3{row-gap:var(--space-xl)}._5Z2YQF.Fg86QU{column-gap:var(--space-xs)}._5Z2YQF._3qWtbZ{column-gap:var(--space-sm)}._5Z2YQF.gIXZ8P{column-gap:var(--space-md)}._5Z2YQF.xXxHZM{column-gap:var(--space-lg)}._5Z2YQF.zRgpft{column-gap:var(--space-xl)}._5Z2YQF.Fb1W2U{row-gap:var(--space-xs);column-gap:var(--space-xs)}._5Z2YQF._2EojT9{row-gap:var(--space-sm);column-gap:var(--space-sm)}._5Z2YQF.gYCGa5{row-gap:var(--space-md);column-gap:var(--space-md)}._5Z2YQF.JN0CZr{row-gap:var(--space-lg);column-gap:var(--space-lg)}._5Z2YQF._2QvtUb{row-gap:var(--space-xl);column-gap:var(--space-xl)}._5Z2YQF._1kRriS{align-items:start}._5Z2YQF.ocLWZU{align-items:center}._5Z2YQF.TS1qri{align-items:end}._5Z2YQF.FXfvI7{align-items:stretch}._5Z2YQF.biKmzi{align-items:baseline}._5Z2YQF._4-sIS7{justify-items:start}._5Z2YQF.lbdoyi{justify-items:center}._5Z2YQF.WvAC9I{justify-items:end}._5Z2YQF.LN4Ak-{justify-items:stretch}._5Z2YQF.XC0FuJ{align-content:start}._5Z2YQF._6b9wZI{align-content:center}._5Z2YQF.KevE4M{align-content:end}._5Z2YQF.Sn-je4{align-content:stretch}._5Z2YQF.Wnx9iF{align-content:space-between}._5Z2YQF.RAoqm2{align-content:space-around}._5Z2YQF.nUjbmv{align-content:space-evenly}._5Z2YQF.TjTsA7{justify-content:start}._5Z2YQF.VdpzYk{justify-content:center}._5Z2YQF.peszxb{justify-content:end}._5Z2YQF.E98bqx{justify-content:stretch}._5Z2YQF.CdaBbu{justify-content:space-between}._5Z2YQF.leVL0N{justify-content:space-around}._5Z2YQF._6mOZVj{justify-content:space-evenly}.XHgjM3.wtrn5A{grid-area:auto}.XHgjM3.LkIh-N{align-self:start}.XHgjM3.Vhdvpo{align-self:center}.XHgjM3.cyg2du{align-self:end}.XHgjM3.Ptd1ad{align-self:stretch}.XHgjM3.Z22Yty{align-self:baseline}.XHgjM3.gycEgN{justify-self:start}.XHgjM3.s69iy2{justify-self:center}.XHgjM3.pKEJ9k{justify-self:end}.XHgjM3.qWkZVw{justify-self:stretch}.gUbUDY{grid-auto-rows:1fr}.S0HulN{grid-template-columns:auto 1fr;grid-auto-rows:auto}.K2fFKT{grid-template-columns:100%;grid-auto-rows:auto 1fr}