@wallarm-org/claude-design 0.0.0-stage → 4.8.0

package/dist/project/components/Flex/README.md

@@ -0,0 +1,225 @@
+A flex container with the properties as props — `direction`, `justify`, `align`, `wrap`, plus `basis` fractions and `grow` / `shrink` for how the children size themselves. Reach for `Stack`, or `HStack` / `VStack`, when all you want is a spaced list in one direction: `Stack` carries a default gap where `Flex` has none. `Flex` takes no `className`, so everything goes through props.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `direction` | `"row" \| "column" \| "row-reverse" \| "column-reverse"` | no | `row` |  |
+| `align` | `"start" \| "center" \| "end" \| "stretch" \| "baseline"` | no | `stretch` |  |
+| `inline` | `boolean` | no | `false` |  |
+| `grow` | `boolean` | no | — |  |
+| `full-width` | `boolean` | no | — |  |
+| `wrap` | `"wrap" \| "nowrap" \| "reverse"` | no | `nowrap` |  |
+| `justify` | `"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"` | no | `start` |  |
+| `gap` | `"1" \| "2" \| "4" \| "6" \| "8" \| "12" \| "16" \| "20" \| "24" \| "28" \| "32" \| "36" \| "40" \| "44" \| "48" \| "56" \| "64" \| "80" \| "96" \| "112" \| "128" \| "144"` | no | — |  |
+| `shrink` | `boolean` | no | — |  |
+| `basis` | `"auto" \| "full" \| "1/2" \| "1/3" \| "2/3" \| "1/4" \| "2/4" \| "3/4" \| "1/5" \| "2/5" \| "3/5" \| "4/5" \| "1/6" \| "2/6" \| "3/6" \| "4/6" \| "5/6" \| "1/12" \| "2/12" \| "3/12" \| "4/12" \| "5/12" \| "6/12" \| "7/12" \| "8/12" \| "9/12" \| "10/12" \| "11/12" \| "0"` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+| `as-child` | `boolean \| undefined` | no | `false` |  |
+
+## Stories
+
+### Basic
+
+A row of three, which is the default direction. There is no gap until you ask for one.
+
+Source: Flex/Flex.stories.tsx#Basic
+
+### Direction
+
+`row`, `column` and `row-reverse`. Reverse changes the paint order without touching the DOM order, so it moves the visual sequence away from the tab order — use it sparingly.
+
+Source: Flex/Flex.stories.tsx#Direction
+
+### Alignment
+
+`justify` distributes along the main axis, and needs `fullWidth` (or a sized parent) to have any room to distribute in.
+
+Source: Flex/Flex.stories.tsx#Alignment
+
+### Wrap
+
+`wrap` lets the row break onto more lines once it runs out of width, which is what keeps a long row of chips or tags from overflowing.
+
+Source: Flex/Flex.stories.tsx#Wrap
+
+### GrowShrink
+
+How the children behave when the space does not fit: growing to fill it, or shrinking to survive it. `basis` is the third lever, for a child that should start at a fraction of the row.
+
+Source: Flex/Flex.stories.tsx#GrowShrink
+
+## Story sources
+
+### Flex/Flex.stories.tsx
+
+```tsx
+import type { FC, PropsWithChildren } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { cn } from '../../utils/cn';
+import { VStack } from '../Stack';
+import { Flex } from './Flex';
+
+const Box: FC<PropsWithChildren<{ className?: string }>> = ({ children, className }) => (
+  <div
+    className={cn(
+      'flex h-40 py-4 px-8 items-center justify-center rounded-6 border border-border-info bg-bg-light-info font-mono text-xs text-text-info',
+      className,
+    )}
+  >
+    {children}
+  </div>
+);
+
+const DESCRIPTION = [
+  'A flex container with the properties as props — `direction`, `justify`, `align`, `wrap`, plus `basis` fractions and `grow` / `shrink` for how the children size themselves.',
+  'Reach for `Stack`, or `HStack` / `VStack`, when all you want is a spaced list in one direction: `Stack` carries a default gap where `Flex` has none. `Flex` takes no `className`, so everything goes through props.',
+].join(' ');
+
+const meta = {
+  title: 'Layout/Flex',
+  component: Flex,
+  args: {},
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof Flex>;
+
+export default meta;
+
+/** A row of three, which is the default direction. There is no gap until you ask for one. */
+export const Basic: StoryFn<typeof meta> = ({ ...args }) => (
+  <Flex {...args} gap={4}>
+    <Box>A</Box>
+    <Box>B</Box>
+    <Box>C</Box>
+  </Flex>
+);
+
+/** `row`, `column` and `row-reverse`. Reverse changes the paint order without touching the DOM order, so it moves the visual sequence away from the tab order — use it sparingly. */
+export const Direction: StoryFn<typeof meta> = ({ ...args }) => (
+  <Flex direction='column' gap={8}>
+    <VStack>
+      <p className='sb-annotation'>row — default</p>
+      <Flex {...args} direction='row' gap={2}>
+        <Box className='h-32 py-2 px-4 text-sm'>1</Box>
+        <Box className='h-32 py-2 px-4 text-sm'>2</Box>
+        <Box className='h-32 py-2 px-4 text-sm'>3</Box>
+      </Flex>
+    </VStack>
+
+    <VStack>
+      <p className='sb-annotation'>column</p>
+      <Flex {...args} direction='column' gap={2}>
+        <Box className='h-32 py-2 px-4 text-sm'>1</Box>
+        <Box className='h-32 py-2 px-4 text-sm'>2</Box>
+        <Box className='h-32 py-2 px-4 text-sm'>3</Box>
+      </Flex>
+    </VStack>
+
+    <VStack>
+      <p className='sb-annotation'>row-reverse</p>
+      <Flex {...args} direction='row-reverse' gap={2}>
+        <Box className='h-32 py-2 px-4 text-sm'>1</Box>
+        <Box className='h-32 py-2 px-4 text-sm'>2</Box>
+        <Box className='h-32 py-2 px-4 text-sm'>3</Box>
+      </Flex>
+    </VStack>
+  </Flex>
+);
+
+/** `justify` distributes along the main axis, and needs `fullWidth` (or a sized parent) to have any room to distribute in. */
+export const Alignment: StoryFn<typeof meta> = ({ ...args }) => (
+  <Flex direction='column' gap={8}>
+    <VStack>
+      <p className='sb-annotation'>justify start — default</p>
+      <Flex {...args} justify='start' fullWidth>
+        <Box className='h-16 w-16 text-xs'>A</Box>
+        <Box className='h-16 w-16 text-xs'>B</Box>
+      </Flex>
+    </VStack>
+
+    <VStack>
+      <p className='sb-annotation'>justify center</p>
+      <Flex {...args} justify='center' fullWidth>
+        <Box className='h-16 w-16 text-xs'>A</Box>
+        <Box className='h-16 w-16 text-xs'>B</Box>
+      </Flex>
+    </VStack>
+
+    <VStack>
+      <p className='sb-annotation'>justify between</p>
+      <Flex {...args} justify='between' fullWidth>
+        <Box className='h-16 w-16 text-xs'>A</Box>
+        <Box className='h-16 w-16 text-xs'>B</Box>
+      </Flex>
+    </VStack>
+  </Flex>
+);
+
+/** `wrap` lets the row break onto more lines once it runs out of width, which is what keeps a long row of chips or tags from overflowing. */
+export const Wrap: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack>
+    <p className='sb-annotation'>wrap</p>
+    <Flex {...args} wrap='wrap' gap={2} fullWidth>
+      {new Array(40).fill(null).map((_, index) => {
+        const key = `${index + 1}`;
+
+        return (
+          <Box className='h-20 w-20 text-xs' key={key}>
+            {key}
+          </Box>
+        );
+      })}
+    </Flex>
+  </VStack>
+);
+
+/** How the children behave when the space does not fit: growing to fill it, or shrinking to survive it. `basis` is the third lever, for a child that should start at a fraction of the row. */
+export const GrowShrink: StoryFn<typeof meta> = ({ ...args }) => (
+  <Flex direction='column' gap={8}>
+    <VStack>
+      <p className='sb-annotation'>grow</p>
+      <Flex {...args} fullWidth>
+        <Box className='h-16 flex-1 text-xs'>Flex-1</Box>
+        <Box className='h-16 flex-1 text-xs'>Flex-1</Box>
+        <Box className='h-16 text-xs'>Fixed</Box>
+      </Flex>
+    </VStack>
+
+    <VStack>
+      <p className='sb-annotation'>shrink</p>
+      <Flex {...args} fullWidth>
+        <Box className='h-16 flex-shrink text-xs'>Shrinkable long content</Box>
+        <Box className='h-16 flex-shrink-0 text-xs'>No shrink</Box>
+      </Flex>
+    </VStack>
+  </Flex>
+);
+```
+
+### ../utils/cn.ts
+
+```tsx
+import { type ClassArray, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassArray): string => {
+  return twMerge(clsx(inputs));
+};
+```

package/dist/project/components/Flex/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Layout" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>

package/dist/project/components/Flex/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,r,t){let o,n;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var l,a,s=Object.create,i=Object.defineProperty,c=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,u=(e,r,t,o)=>{if(r&&"object"==typeof r||"function"==typeof r)for(let n of d(r))p.call(e,n)||n===t||i(e,n,{get:()=>r[n],enumerable:!(o=c(r,n))||o.enumerable});return e},f={},b={$dispatcherGuard:()=>R,$makeReadOnly:()=>j,$reset:()=>E,$structuralCheck:()=>I,c:()=>_,clearRenderCounterRegistry:()=>O,renderCounterRegistry:()=>C,useRenderCounter:()=>M};for(var h in b)i(f,h,{get:b[h],enumerable:!0});e.exports=u(i({},"__esModule",{value:!0}),f);var g=(n=null!=(o=t("C"))?s(m(o)):{},u(o&&o.__esModule?n:i(n,"default",{value:o,enumerable:!0}),o)),{useRef:y,useEffect:x,isValidElement:w}=g,k=null!=(l=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),_="function"==typeof(null==(a=g.__COMPILER_RUNTIME)?void 0:a.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let r=Array(e);for(let t=0;t<e;t++)r[t]=v;return r[v]=!0,r},[])},N={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{N[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var z=null;function S(e){return k.ReactCurrentDispatcher.current=e,k.ReactCurrentDispatcher.current}N.useMemoCache=e=>{if(null!=z)return z.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var $=[];function R(e){let r=k.ReactCurrentDispatcher.current;if(0===e){if($.push(r),1===$.length&&(z=r),r===N)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");S(N)}else if(1===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===$.length&&(z=null),S(e)}else if(2===e)$.push(r),S(z);else if(3===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");S(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function E(e){for(let r=0;r<e.length;r++)e[r]=v}function j(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var C=new Map;function O(){for(let e of C.values())e.forEach(e=>{e.count=0})}function M(e){let r=y(null);null!=r.current&&(r.current.count+=1),x(()=>{if(null==r.current){let t,o={count:0};null==(t=C.get(e))&&(t=new Set,C.set(e,t)),t.add(o),r.current=o}return()=>{var t;let o;null!==r.current&&(t=r.current,null!=(o=C.get(e))&&o.delete(t))}})}var A=new Set;function I(e,r,t,o,n,l){function a(e,r,a,s){let i=`${o}:${l} [${n}] ${t}${a} changed from ${e} to ${r} at depth ${s}`;A.has(i)||(A.add(i),console.error(i))}!function e(r,t,o,n){if(!(n>2)){if(r!==t)if(typeof r!=typeof t)a(`type ${typeof r}`,`type ${typeof t}`,o,n);else if("object"==typeof r){let l=Array.isArray(r),s=Array.isArray(t);if(null===r&&null!==t)a("null",`type ${typeof t}`,o,n);else if(null===t)a(`type ${typeof r}`,"null",o,n);else if(r instanceof Map)if(t instanceof Map)if(r.size!==t.size)a(`Map instance with size ${r.size}`,`Map instance with size ${t.size}`,o,n);else for(let[l,s]of r)t.has(l)?e(s,t.get(l),`${o}.get(${l})`,n+1):a(`Map instance with key ${l}`,`Map instance without key ${l}`,o,n);else a("Map instance","other value",o,n);else if(t instanceof Map)a("other value","Map instance",o,n);else if(r instanceof Set)if(t instanceof Set)if(r.size!==t.size)a(`Set instance with size ${r.size}`,`Set instance with size ${t.size}`,o,n);else for(let e of t)r.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,o,n);else a("Set instance","other value",o,n);else if(t instanceof Set)a("other value","Set instance",o,n);else if(l||s)if(l!==s)a(`type ${l?"array":"object"}`,`type ${s?"array":"object"}`,o,n);else if(r.length!==t.length)a(`array with length ${r.length}`,`array with length ${t.length}`,o,n);else for(let l=0;l<r.length;l++)e(r[l],t[l],`${o}[${l}]`,n+1);else if(w(r)||w(t))w(r)!==w(t)?a(`type ${w(r)?"React element":"object"}`,`type ${w(t)?"React element":"object"}`,o,n):r.type!==t.type?a(`React element of type ${r.type}`,`React element of type ${t.type}`,o,n):e(r.props,t.props,`[props of ${o}]`,n+1);else{for(let e in t)e in r||a(`object without key ${e}`,`object with key ${e}`,o,n);for(let l in r)l in t?e(r[l],t[l],`${o}.${l}`,n+1):a(`object with key ${l}`,`object without key ${l}`,o,n)}}else{if("function"==typeof r)return;isNaN(r)||isNaN(t)?isNaN(r)!==isNaN(t)&&a(`${isNaN(r)?"NaN":"non-NaN value"}`,`${isNaN(t)?"NaN":"non-NaN value"}`,o,n):r!==t&&a(r,t,o,n)}}}(e,r,"",0)}},p(e,r,t){let o=new WeakMap,n=new WeakMap;function l(e,r,t){let l=r,a=t;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=a.ref&&!l.prototype?.isReactComponent){let r=l,t=o.get(e);t||(t=new WeakMap,o.set(e,t));let n=t.get(r);n||((n=e.forwardRef((e,t)=>r({...e,ref:t}))).displayName=r.displayName??r.name,t.set(r,n)),l=n}if("string"==typeof l&&"boolean"==typeof a.inert&&((a={...a}).inert?a.inert="":delete a.inert),"string"==typeof l)for(let[e,r]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in a&&(a={...a,[r]:a[e]},delete a[e]);return"string"==typeof l&&null!=a.ref&&(l=function(e,r){let t=n.get(e);t||(t=new Map,n.set(e,t));let o=t.get(r);if(o)return o;let l=e.forwardRef((t,o)=>{let n=e.useRef(null);if(!n.current||n.current.original!==o){let e;n.current={original:o,callback:r=>{if(null==r&&e){let r=e;e=void 0,r();return}if("function"==typeof o){let t=o(r);e="function"==typeof t?t:void 0}else o&&(o.current=r)}}}return e.createElement(r,{...t,ref:n.current.callback})});return l.displayName=`CanvasHost(${r})`,t.set(r,l),l}(e,l)),{type:l,props:a}}function a(e){let r=(r,t,o)=>{let n=l(e,r,t??{});return e.createElement(n.type,void 0===o?n.props:{...n.props,key:o})};return{jsx:r,jsxs:(r,t,o)=>{let n=l(e,r,t??{}),{children:a,...s}=n.props;return e.createElement(n.type,void 0===o?s:{...s,key:o},...Array.isArray(a)?a:[a])},jsxDEV:r,Fragment:e.Fragment}}function s(e){return{...e,createElement:(r,t,...o)=>{let n=l(e,r,t??{});return e.createElement(n.type,n.props,...o)},cloneElement:(r,t,...o)=>{let n=e.cloneElement(r,t??void 0,...o),a=n.ref,s=l(e,n.type,{...n.props,ref:a});return s.type===n.type&&"string"!=typeof n.type?n:e.createElement(s.type,{...s.props,key:n.key})}}}t.d(r,{MA:()=>a,YJ:()=>s})},C(e,r,t){t.r(r);let o=(0,t("p").YJ)(window.React),{Children:n,Component:l,Fragment:a,Profiler:s,PureComponent:i,StrictMode:c,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:p,cloneElement:u,createContext:f,createElement:b,createFactory:h,createRef:g,forwardRef:y,isValidElement:x,lazy:w,memo:k,startTransition:v,unstable_act:_,useCallback:N,useContext:z,useDebugValue:S,useDeferredValue:$,useEffect:R,useId:E,useImperativeHandle:j,useInsertionEffect:C,useLayoutEffect:O,useMemo:M,useReducer:A,useRef:I,useState:W,useSyncExternalStore:D,useTransition:T,version:P,use:G}=o;t.d(r,{},{Children:n,Component:l,Fragment:a,Profiler:s,PureComponent:i,StrictMode:c,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:p,cloneElement:u,createContext:f,createElement:b,createFactory:h,createRef:g,default:o,forwardRef:y,isValidElement:x,lazy:w,memo:k,startTransition:v,unstable_act:_,use:G,useCallback:N,useContext:z,useDebugValue:S,useDeferredValue:$,useEffect:R,useId:E,useImperativeHandle:j,useInsertionEffect:C,useLayoutEffect:O,useMemo:M,useReducer:A,useRef:I,useState:W,useSyncExternalStore:D,useTransition:T,version:P})}},r={};function t(o){var n=r[o];if(void 0!==n)return n.exports;var l=r[o]={exports:{}};return e[o](l,l.exports,t),l.exports}t.d=(e,r,o)=>{var n=(r,o)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,[o]:r[n]})};n(r,"get"),n(o,"value")},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let e,r,o,n,l,{jsx:a,jsxs:s,jsxDEV:i,Fragment:c}=(0,t("p").MA)(window.React);var d,m=t("vD");let p=(e=new Map,r=null,t)=>({nextPart:e,validators:r,classGroupId:t}),u=[],f=(e,r,t)=>{if(0==e.length-r)return t.classGroupId;let o=e[r],n=t.nextPart.get(o);if(n){let t=f(e,r+1,n);if(t)return t}let l=t.validators;if(null===l)return;let a=0===r?e.join("-"):e.slice(r).join("-"),s=l.length;for(let e=0;e<s;e++){let r=l[e];if(r.validator(a))return r.classGroupId}},b=(e,r)=>{let t=p();for(let o in e)h(e[o],t,o,r);return t},h=(e,r,t,o)=>{let n=e.length;for(let l=0;l<n;l++)g(e[l],r,t,o)},g=(e,r,t,o)=>{"string"==typeof e?y(e,r,t):"function"==typeof e?x(e,r,t,o):w(e,r,t,o)},y=(e,r,t)=>{(""===e?r:k(r,e)).classGroupId=t},x=(e,r,t,o)=>{v(e)?h(e(o),r,t,o):(null===r.validators&&(r.validators=[]),r.validators.push({classGroupId:t,validator:e}))},w=(e,r,t,o)=>{let n=Object.entries(e),l=n.length;for(let e=0;e<l;e++){let[l,a]=n[e];h(a,k(r,l),t,o)}},k=(e,r)=>{let t=e,o=r.split("-"),n=o.length;for(let e=0;e<n;e++){let r=o[e],n=t.nextPart.get(r);n||(n=p(),t.nextPart.set(r,n)),t=n}return t},v=e=>"isThemeGetter"in e&&!0===e.isThemeGetter,_=[],N=(e,r,t,o,n)=>({modifiers:e,hasImportantModifier:r,baseClassName:t,maybePostfixModifierPosition:o,isExternal:n}),z=/\s+/,S=e=>{let r;if("string"==typeof e)return e;let t="";for(let o=0;o<e.length;o++)e[o]&&(r=S(e[o]))&&(t&&(t+=" "),t+=r);return t},$=[],R=e=>{let r=r=>r[e]||$;return r.isThemeGetter=!0,r.themeKey=e,r},E=/^\[(?:(\w[\w-]*):)?(.+)\]$/i,j=/^\((?:(\w[\w-]*):)?(.+)\)$/i,C=/^\d+(?:\.\d+)?\/\d+(?:\.\d+)?$/,O=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,M=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,A=/^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix|color|light-dark)\(.+\)$/,I=/^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,W=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/,D=e=>C.test(e),T=e=>!!e&&!Number.isNaN(Number(e)),P=e=>!!e&&Number.isInteger(Number(e)),G=e=>e.endsWith("%")&&T(e.slice(0,-1)),L=e=>O.test(e),F=()=>!0,U=e=>M.test(e)&&!A.test(e),V=()=>!1,B=e=>I.test(e),H=e=>W.test(e),Y=e=>!Z(e)&&!en(e),J=e=>e.startsWith("@container")&&("/"===e[10]&&void 0!==e[11]||"s"===e[11]&&void 0!==e[16]&&e.startsWith("-size/",10)||"n"===e[11]&&void 0!==e[18]&&e.startsWith("-normal/",10)),q=e=>ep(e,eh,V),Z=e=>E.test(e),K=e=>ep(e,eg,U),X=e=>ep(e,ey,T),Q=e=>ep(e,ew,F),ee=e=>ep(e,ex,V),er=e=>ep(e,ef,V),et=e=>ep(e,eb,H),eo=e=>ep(e,ek,B),en=e=>j.test(e),el=e=>eu(e,eg),ea=e=>eu(e,ex),es=e=>eu(e,ef),ei=e=>eu(e,eh),ec=e=>eu(e,eb),ed=e=>eu(e,ek,!0),em=e=>eu(e,ew,!0),ep=(e,r,t)=>{let o=E.exec(e);return!!o&&(o[1]?r(o[1]):t(o[2]))},eu=(e,r,t=!1)=>{let o=j.exec(e);return!!o&&(o[1]?r(o[1]):t)},ef=e=>"position"===e||"percentage"===e,eb=e=>"image"===e||"url"===e,eh=e=>"length"===e||"size"===e||"bg-size"===e,eg=e=>"length"===e,ey=e=>"number"===e,ex=e=>"family-name"===e,ew=e=>"number"===e||"weight"===e,ek=e=>"shadow"===e,ev=(d=()=>{let e=R("color"),r=R("font"),t=R("text"),o=R("font-weight"),n=R("tracking"),l=R("leading"),a=R("breakpoint"),s=R("container"),i=R("spacing"),c=R("radius"),d=R("shadow"),m=R("inset-shadow"),p=R("text-shadow"),u=R("drop-shadow"),f=R("blur"),b=R("perspective"),h=R("aspect"),g=R("ease"),y=R("animate"),x=()=>["auto","avoid","all","avoid-page","page","left","right","column"],w=()=>["center","top","bottom","left","right","top-left","left-top","top-right","right-top","bottom-right","right-bottom","bottom-left","left-bottom"],k=()=>[...w(),en,Z],v=()=>["auto","hidden","clip","visible","scroll"],_=()=>["auto","contain","none"],N=()=>[en,Z,i],z=()=>[D,"full","auto",...N()],S=()=>[P,"none","subgrid",en,Z],$=()=>["auto",{span:["full",P,en,Z]},P,en,Z],E=()=>[P,"auto",en,Z],j=()=>["auto","min","max","fr",en,Z],C=()=>["start","end","center","between","around","evenly","stretch","baseline","center-safe","end-safe"],O=()=>["start","end","center","stretch","center-safe","end-safe"],M=()=>["auto",...N()],A=()=>[D,"auto","full","dvw","dvh","lvw","lvh","svw","svh","min","max","fit",...N()],I=()=>[s,D,"screen","full","dvw","lvw","svw","min","max","fit",...N()],W=()=>[D,"screen","full","lh","dvh","lvh","svh","min","max","fit",...N()],U=()=>[e,en,Z],V=()=>[...w(),es,er,{position:[en,Z]}],B=()=>["no-repeat",{repeat:["","x","y","space","round"]}],H=()=>["auto","cover","contain",ei,q,{size:[en,Z]}],ep=()=>[G,el,K],eu=()=>["","none","full",c,en,Z],ef=()=>["",T,el,K],eb=()=>["solid","dashed","dotted","double"],eh=()=>["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"],eg=()=>[T,G,es,er],ey=()=>["","none",f,en,Z],ex=()=>["none",T,en,Z],ew=()=>["none",T,en,Z],ek=()=>[T,en,Z],ev=()=>[D,"full",...N()];return{cacheSize:500,theme:{animate:["spin","ping","pulse","bounce"],aspect:["video"],blur:[L],breakpoint:[L],color:[F],container:[L],"drop-shadow":[L],ease:["in","out","in-out"],font:[Y],"font-weight":["thin","extralight","light","normal","medium","semibold","bold","extrabold","black"],"inset-shadow":[L],leading:["none","tight","snug","normal","relaxed","loose"],perspective:["dramatic","near","normal","midrange","distant","none"],radius:[L],shadow:[L],spacing:["px",T],text:[L],"text-shadow":[L],tracking:["tighter","tight","normal","wide","wider","widest"]},classGroups:{aspect:[{aspect:["auto","square",D,Z,en,h]}],container:["container"],"container-type":[{"@container":["","normal","size",en,Z]}],"container-named":[J],columns:[{columns:[T,"auto",Z,en,s]}],"break-after":[{"break-after":x()}],"break-before":[{"break-before":x()}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"],sr:["sr-only","not-sr-only"],float:[{float:["right","left","none","start","end"]}],clear:[{clear:["left","right","both","none","start","end"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:k()}],overflow:[{overflow:v()}],"overflow-x":[{"overflow-x":v()}],"overflow-y":[{"overflow-y":v()}],overscroll:[{overscroll:_()}],"overscroll-x":[{"overscroll-x":_()}],"overscroll-y":[{"overscroll-y":_()}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:z()}],"inset-x":[{"inset-x":z()}],"inset-y":[{"inset-y":z()}],start:[{"inset-s":z(),start:z()}],end:[{"inset-e":z(),end:z()}],"inset-bs":[{"inset-bs":z()}],"inset-be":[{"inset-be":z()}],top:[{top:z()}],right:[{right:z()}],bottom:[{bottom:z()}],left:[{left:z()}],visibility:["visible","invisible","collapse"],z:[{z:[P,"auto",en,Z]}],basis:[{basis:[D,"full","auto",s,...N()]}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["nowrap","wrap","wrap-reverse"]}],flex:[{flex:[T,D,"auto","initial","none",Z]}],grow:[{grow:["",T,en,Z]}],shrink:[{shrink:["",T,en,Z]}],order:[{order:[P,"first","last","none",en,Z]}],"grid-cols":[{"grid-cols":S()}],"col-start-end":[{col:$()}],"col-start":[{"col-start":E()}],"col-end":[{"col-end":E()}],"grid-rows":[{"grid-rows":S()}],"row-start-end":[{row:$()}],"row-start":[{"row-start":E()}],"row-end":[{"row-end":E()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":j()}],"auto-rows":[{"auto-rows":j()}],gap:[{gap:N()}],"gap-x":[{"gap-x":N()}],"gap-y":[{"gap-y":N()}],"justify-content":[{justify:[...C(),"normal"]}],"justify-items":[{"justify-items":[...O(),"normal"]}],"justify-self":[{"justify-self":["auto",...O()]}],"align-content":[{content:["normal",...C()]}],"align-items":[{items:[...O(),{baseline:["","last"]}]}],"align-self":[{self:["auto",...O(),{baseline:["","last"]}]}],"place-content":[{"place-content":C()}],"place-items":[{"place-items":[...O(),"baseline"]}],"place-self":[{"place-self":["auto",...O()]}],p:[{p:N()}],px:[{px:N()}],py:[{py:N()}],ps:[{ps:N()}],pe:[{pe:N()}],pbs:[{pbs:N()}],pbe:[{pbe:N()}],pt:[{pt:N()}],pr:[{pr:N()}],pb:[{pb:N()}],pl:[{pl:N()}],m:[{m:M()}],mx:[{mx:M()}],my:[{my:M()}],ms:[{ms:M()}],me:[{me:M()}],mbs:[{mbs:M()}],mbe:[{mbe:M()}],mt:[{mt:M()}],mr:[{mr:M()}],mb:[{mb:M()}],ml:[{ml:M()}],"space-x":[{"space-x":N()}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":N()}],"space-y-reverse":["space-y-reverse"],size:[{size:A()}],"inline-size":[{inline:["auto",...I()]}],"min-inline-size":[{"min-inline":["auto",...I()]}],"max-inline-size":[{"max-inline":["none",...I()]}],"block-size":[{block:["auto",...W()]}],"min-block-size":[{"min-block":["auto",...W()]}],"max-block-size":[{"max-block":["none",...W()]}],w:[{w:[s,"screen",...A()]}],"min-w":[{"min-w":[s,"screen","none",...A()]}],"max-w":[{"max-w":[s,"screen","none","prose",{screen:[a]},...A()]}],h:[{h:["screen","lh",...A()]}],"min-h":[{"min-h":["screen","lh","none",...A()]}],"max-h":[{"max-h":["screen","lh","none",...A()]}],"font-size":[{text:["base",t,el,K]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:[o,em,Q]}],"font-stretch":[{"font-stretch":["ultra-condensed","extra-condensed","condensed","semi-condensed","normal","semi-expanded","expanded","extra-expanded","ultra-expanded",G,Z]}],"font-family":[{font:[ea,ee,r]}],"font-features":[{"font-features":[Z]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractions"],tracking:[{tracking:[n,en,Z]}],"line-clamp":[{"line-clamp":[T,"none",en,X]}],leading:[{leading:["none",l,...N()]}],"list-image":[{"list-image":["none",en,Z]}],"list-style-position":[{list:["inside","outside"]}],"list-style-type":[{list:["disc","decimal","none",en,Z]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"placeholder-color":[{placeholder:U()}],"text-color":[{text:U()}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:[...eb(),"wavy"]}],"text-decoration-thickness":[{decoration:[T,"from-font","auto",en,K]}],"text-decoration-color":[{decoration:U()}],"underline-offset":[{"underline-offset":[T,"auto",en,Z]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],"text-wrap":[{text:["wrap","nowrap","balance","pretty"]}],indent:[{indent:N()}],"tab-size":[{tab:[P,en,Z]}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",en,Z]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],wrap:[{wrap:["break-word","anywhere","normal"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",en,Z]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:V()}],"bg-repeat":[{bg:B()}],"bg-size":[{bg:H()}],"bg-image":[{bg:["none",{linear:[{to:["t","tr","r","br","b","bl","l","tl"]},P,en,Z],radial:["",en,Z],conic:["",P,en,Z]},ec,et]}],"bg-color":[{bg:U()}],"gradient-from-pos":[{from:ep()}],"gradient-via-pos":[{via:ep()}],"gradient-to-pos":[{to:ep()}],"gradient-from":[{from:U()}],"gradient-via":[{via:U()}],"gradient-to":[{to:U()}],rounded:[{rounded:eu()}],"rounded-s":[{"rounded-s":eu()}],"rounded-e":[{"rounded-e":eu()}],"rounded-t":[{"rounded-t":eu()}],"rounded-r":[{"rounded-r":eu()}],"rounded-b":[{"rounded-b":eu()}],"rounded-l":[{"rounded-l":eu()}],"rounded-ss":[{"rounded-ss":eu()}],"rounded-se":[{"rounded-se":eu()}],"rounded-ee":[{"rounded-ee":eu()}],"rounded-es":[{"rounded-es":eu()}],"rounded-tl":[{"rounded-tl":eu()}],"rounded-tr":[{"rounded-tr":eu()}],"rounded-br":[{"rounded-br":eu()}],"rounded-bl":[{"rounded-bl":eu()}],"border-w":[{border:ef()}],"border-w-x":[{"border-x":ef()}],"border-w-y":[{"border-y":ef()}],"border-w-s":[{"border-s":ef()}],"border-w-e":[{"border-e":ef()}],"border-w-bs":[{"border-bs":ef()}],"border-w-be":[{"border-be":ef()}],"border-w-t":[{"border-t":ef()}],"border-w-r":[{"border-r":ef()}],"border-w-b":[{"border-b":ef()}],"border-w-l":[{"border-l":ef()}],"divide-x":[{"divide-x":ef()}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":ef()}],"divide-y-reverse":["divide-y-reverse"],"border-style":[{border:[...eb(),"hidden","none"]}],"divide-style":[{divide:[...eb(),"hidden","none"]}],"border-color":[{border:U()}],"border-color-x":[{"border-x":U()}],"border-color-y":[{"border-y":U()}],"border-color-s":[{"border-s":U()}],"border-color-e":[{"border-e":U()}],"border-color-bs":[{"border-bs":U()}],"border-color-be":[{"border-be":U()}],"border-color-t":[{"border-t":U()}],"border-color-r":[{"border-r":U()}],"border-color-b":[{"border-b":U()}],"border-color-l":[{"border-l":U()}],"divide-color":[{divide:U()}],"outline-style":[{outline:[...eb(),"none","hidden"]}],"outline-offset":[{"outline-offset":[T,en,Z]}],"outline-w":[{outline:["",T,el,K]}],"outline-color":[{outline:U()}],shadow:[{shadow:["","inner","none",d,ed,eo]}],"shadow-color":[{shadow:U()}],"inset-shadow":[{"inset-shadow":["none",m,ed,eo]}],"inset-shadow-color":[{"inset-shadow":U()}],"ring-w":[{ring:ef()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:U()}],"ring-offset-w":[{"ring-offset":[T,K]}],"ring-offset-color":[{"ring-offset":U()}],"inset-ring-w":[{"inset-ring":ef()}],"inset-ring-color":[{"inset-ring":U()}],"text-shadow":[{"text-shadow":["none",p,ed,eo]}],"text-shadow-color":[{"text-shadow":U()}],opacity:[{opacity:[T,en,Z]}],"mix-blend":[{"mix-blend":[...eh(),"plus-darker","plus-lighter"]}],"bg-blend":[{"bg-blend":eh()}],"mask-clip":[{"mask-clip":["border","padding","content","fill","stroke","view"]},"mask-no-clip"],"mask-composite":[{mask:["add","subtract","intersect","exclude"]}],"mask-image-linear-pos":[{"mask-linear":[T]}],"mask-image-linear-from-pos":[{"mask-linear-from":eg()}],"mask-image-linear-to-pos":[{"mask-linear-to":eg()}],"mask-image-linear-from-color":[{"mask-linear-from":U()}],"mask-image-linear-to-color":[{"mask-linear-to":U()}],"mask-image-t-from-pos":[{"mask-t-from":eg()}],"mask-image-t-to-pos":[{"mask-t-to":eg()}],"mask-image-t-from-color":[{"mask-t-from":U()}],"mask-image-t-to-color":[{"mask-t-to":U()}],"mask-image-r-from-pos":[{"mask-r-from":eg()}],"mask-image-r-to-pos":[{"mask-r-to":eg()}],"mask-image-r-from-color":[{"mask-r-from":U()}],"mask-image-r-to-color":[{"mask-r-to":U()}],"mask-image-b-from-pos":[{"mask-b-from":eg()}],"mask-image-b-to-pos":[{"mask-b-to":eg()}],"mask-image-b-from-color":[{"mask-b-from":U()}],"mask-image-b-to-color":[{"mask-b-to":U()}],"mask-image-l-from-pos":[{"mask-l-from":eg()}],"mask-image-l-to-pos":[{"mask-l-to":eg()}],"mask-image-l-from-color":[{"mask-l-from":U()}],"mask-image-l-to-color":[{"mask-l-to":U()}],"mask-image-x-from-pos":[{"mask-x-from":eg()}],"mask-image-x-to-pos":[{"mask-x-to":eg()}],"mask-image-x-from-color":[{"mask-x-from":U()}],"mask-image-x-to-color":[{"mask-x-to":U()}],"mask-image-y-from-pos":[{"mask-y-from":eg()}],"mask-image-y-to-pos":[{"mask-y-to":eg()}],"mask-image-y-from-color":[{"mask-y-from":U()}],"mask-image-y-to-color":[{"mask-y-to":U()}],"mask-image-radial":[{"mask-radial":[en,Z]}],"mask-image-radial-from-pos":[{"mask-radial-from":eg()}],"mask-image-radial-to-pos":[{"mask-radial-to":eg()}],"mask-image-radial-from-color":[{"mask-radial-from":U()}],"mask-image-radial-to-color":[{"mask-radial-to":U()}],"mask-image-radial-shape":[{"mask-radial":["circle","ellipse"]}],"mask-image-radial-size":[{"mask-radial":[{closest:["side","corner"],farthest:["side","corner"]}]}],"mask-image-radial-pos":[{"mask-radial-at":w()}],"mask-image-conic-pos":[{"mask-conic":[T]}],"mask-image-conic-from-pos":[{"mask-conic-from":eg()}],"mask-image-conic-to-pos":[{"mask-conic-to":eg()}],"mask-image-conic-from-color":[{"mask-conic-from":U()}],"mask-image-conic-to-color":[{"mask-conic-to":U()}],"mask-mode":[{mask:["alpha","luminance","match"]}],"mask-origin":[{"mask-origin":["border","padding","content","fill","stroke","view"]}],"mask-position":[{mask:V()}],"mask-repeat":[{mask:B()}],"mask-size":[{mask:H()}],"mask-type":[{"mask-type":["alpha","luminance"]}],"mask-image":[{mask:["none",en,Z]}],filter:[{filter:["","none",en,Z]}],blur:[{blur:ey()}],brightness:[{brightness:[T,en,Z]}],contrast:[{contrast:[T,en,Z]}],"drop-shadow":[{"drop-shadow":["","none",u,ed,eo]}],"drop-shadow-color":[{"drop-shadow":U()}],grayscale:[{grayscale:["",T,en,Z]}],"hue-rotate":[{"hue-rotate":[T,en,Z]}],invert:[{invert:["",T,en,Z]}],saturate:[{saturate:[T,en,Z]}],sepia:[{sepia:["",T,en,Z]}],"backdrop-filter":[{"backdrop-filter":["","none",en,Z]}],"backdrop-blur":[{"backdrop-blur":ey()}],"backdrop-brightness":[{"backdrop-brightness":[T,en,Z]}],"backdrop-contrast":[{"backdrop-contrast":[T,en,Z]}],"backdrop-grayscale":[{"backdrop-grayscale":["",T,en,Z]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[T,en,Z]}],"backdrop-invert":[{"backdrop-invert":["",T,en,Z]}],"backdrop-opacity":[{"backdrop-opacity":[T,en,Z]}],"backdrop-saturate":[{"backdrop-saturate":[T,en,Z]}],"backdrop-sepia":[{"backdrop-sepia":["",T,en,Z]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":N()}],"border-spacing-x":[{"border-spacing-x":N()}],"border-spacing-y":[{"border-spacing-y":N()}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["","all","colors","opacity","shadow","transform","none",en,Z]}],"transition-behavior":[{transition:["normal","discrete"]}],duration:[{duration:[T,"initial",en,Z]}],ease:[{ease:["linear","initial",g,en,Z]}],delay:[{delay:[T,en,Z]}],animate:[{animate:["none",y,en,Z]}],backface:[{backface:["hidden","visible"]}],perspective:[{perspective:[b,en,Z]}],"perspective-origin":[{"perspective-origin":k()}],rotate:[{rotate:ex()}],"rotate-x":[{"rotate-x":ex()}],"rotate-y":[{"rotate-y":ex()}],"rotate-z":[{"rotate-z":ex()}],scale:[{scale:ew()}],"scale-x":[{"scale-x":ew()}],"scale-y":[{"scale-y":ew()}],"scale-z":[{"scale-z":ew()}],"scale-3d":["scale-3d"],skew:[{skew:ek()}],"skew-x":[{"skew-x":ek()}],"skew-y":[{"skew-y":ek()}],transform:[{transform:[en,Z,"","none","gpu","cpu"]}],"transform-origin":[{origin:k()}],"transform-style":[{transform:["3d","flat"]}],translate:[{translate:ev()}],"translate-x":[{"translate-x":ev()}],"translate-y":[{"translate-y":ev()}],"translate-z":[{"translate-z":ev()}],"translate-none":["translate-none"],zoom:[{zoom:[P,en,Z]}],accent:[{accent:U()}],appearance:[{appearance:["none","auto"]}],"caret-color":[{caret:U()}],"color-scheme":[{scheme:["normal","dark","light","light-dark","only-dark","only-light"]}],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",en,Z]}],"field-sizing":[{"field-sizing":["fixed","content"]}],"pointer-events":[{"pointer-events":["auto","none"]}],resize:[{resize:["none","","y","x"]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scrollbar-thumb-color":[{"scrollbar-thumb":U()}],"scrollbar-track-color":[{"scrollbar-track":U()}],"scrollbar-gutter":[{"scrollbar-gutter":["auto","stable","both"]}],"scrollbar-w":[{scrollbar:["auto","thin","none"]}],"scroll-m":[{"scroll-m":N()}],"scroll-mx":[{"scroll-mx":N()}],"scroll-my":[{"scroll-my":N()}],"scroll-ms":[{"scroll-ms":N()}],"scroll-me":[{"scroll-me":N()}],"scroll-mbs":[{"scroll-mbs":N()}],"scroll-mbe":[{"scroll-mbe":N()}],"scroll-mt":[{"scroll-mt":N()}],"scroll-mr":[{"scroll-mr":N()}],"scroll-mb":[{"scroll-mb":N()}],"scroll-ml":[{"scroll-ml":N()}],"scroll-p":[{"scroll-p":N()}],"scroll-px":[{"scroll-px":N()}],"scroll-py":[{"scroll-py":N()}],"scroll-ps":[{"scroll-ps":N()}],"scroll-pe":[{"scroll-pe":N()}],"scroll-pbs":[{"scroll-pbs":N()}],"scroll-pbe":[{"scroll-pbe":N()}],"scroll-pt":[{"scroll-pt":N()}],"scroll-pr":[{"scroll-pr":N()}],"scroll-pb":[{"scroll-pb":N()}],"scroll-pl":[{"scroll-pl":N()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","manipulation"]}],"touch-x":[{"touch-pan":["x","left","right"]}],"touch-y":[{"touch-pan":["y","up","down"]}],"touch-pz":["touch-pinch-zoom"],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",en,Z]}],fill:[{fill:["none",...U()]}],"stroke-w":[{stroke:[T,el,K,X]}],stroke:[{stroke:["none",...U()]}],"forced-color-adjust":[{"forced-color-adjust":["auto","none"]}]},conflictingClassGroups:{"container-named":["container-type"],overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","inset-bs","inset-be","start","end","top","right","bottom","left"],"inset-x":["start","end","right","left"],"inset-y":["inset-bs","inset-be","top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pbs","pbe","pt","pr","pb","pl"],px:["ps","pe","pr","pl"],py:["pbs","pbe","pt","pb"],m:["mx","my","ms","me","mbs","mbe","mt","mr","mb","ml"],mx:["ms","me","mr","ml"],my:["mbs","mbe","mt","mb"],size:["w","h"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],"line-clamp":["display","overflow"],rounded:["rounded-s","rounded-e","rounded-t","rounded-r","rounded-b","rounded-l","rounded-ss","rounded-se","rounded-ee","rounded-es","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-x","border-w-y","border-w-s","border-w-e","border-w-bs","border-w-be","border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-s","border-w-e","border-w-r","border-w-l"],"border-w-y":["border-w-bs","border-w-be","border-w-t","border-w-b"],"border-color":["border-color-x","border-color-y","border-color-s","border-color-e","border-color-bs","border-color-be","border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-s","border-color-e","border-color-r","border-color-l"],"border-color-y":["border-color-bs","border-color-be","border-color-t","border-color-b"],translate:["translate-x","translate-y","translate-none"],"translate-none":["translate","translate-x","translate-y","translate-z"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mbs","scroll-mbe","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-ms","scroll-me","scroll-mr","scroll-ml"],"scroll-my":["scroll-mbs","scroll-mbe","scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pbs","scroll-pbe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-ps","scroll-pe","scroll-pr","scroll-pl"],"scroll-py":["scroll-pbs","scroll-pbe","scroll-pt","scroll-pb"],touch:["touch-x","touch-y","touch-pz"],"touch-x":["touch"],"touch-y":["touch"],"touch-pz":["touch"]},conflictingClassGroupModifiers:{"font-size":["leading"]},postfixLookupClassGroups:["container-type"],orderSensitiveModifiers:["*","**","after","backdrop","before","details-content","file","first-letter","first-line","marker","placeholder","selection"]}},l=t=>{let n=r(t);if(n)return n;let l=((e,r)=>{let{parseClassName:t,getClassGroupId:o,getConflictingClassGroupIds:n,sortModifiers:l,postfixLookupClassGroupIds:a}=r,s=[],i=e.trim().split(z),c="";for(let e=i.length-1;e>=0;e-=1){let r,d=i[e],{isExternal:m,modifiers:p,hasImportantModifier:u,baseClassName:f,maybePostfixModifierPosition:b}=t(d);if(m){c=d+(c.length>0?" "+c:c);continue}let h=!!b;if(h){let e=(r=o(f.substring(0,b)))&&a[r]?o(f):void 0;e&&e!==r&&(r=e,h=!1)}else r=o(f);if(!r){if(!h||!(r=o(f))){c=d+(c.length>0?" "+c:c);continue}h=!1}let g=0===p.length?"":1===p.length?p[0]:l(p).join(":"),y=u?g+"!":g,x=y+r;if(s.indexOf(x)>-1)continue;s.push(x);let w=n(r,h);for(let e=0;e<w.length;++e){let r=w[e];s.push(y+r)}c=d+(c.length>0?" "+c:c)}return c})(t,e);return o(t,l),l},n=t=>{var a;let s;return r=(e={cache:(e=>{if(e<1)return{get:()=>void 0,set:()=>{}};let r=0,t=Object.create(null),o=Object.create(null),n=(n,l)=>{t[n]=l,++r>e&&(r=0,o=t,t=Object.create(null))};return{get(e){let r=t[e];return void 0!==r?r:void 0!==(r=o[e])?(n(e,r),r):void 0},set(e,r){e in t?t[e]=r:n(e,r)}}})((a=[].reduce((e,r)=>r(e),d())).cacheSize),parseClassName:(e=>{let{prefix:r,experimentalParseClassName:t}=e,o=e=>{let r,t=[],o=0,n=0,l=0,a=e.length;for(let s=0;s<a;s++){let a=e[s];if(0===o&&0===n){if(":"===a){t.push(e.slice(l,s)),l=s+1;continue}if("/"===a){r=s;continue}}"["===a?o++:"]"===a?o--:"("===a?n++:")"===a&&n--}let s=0===t.length?e:e.slice(l),i=s,c=!1;return s.endsWith("!")?(i=s.slice(0,-1),c=!0):s.startsWith("!")&&(i=s.slice(1),c=!0),N(t,c,i,r&&r>l?r-l:void 0)};if(r){let e=r+":",t=o;o=r=>r.startsWith(e)?t(r.slice(e.length)):N(_,!1,r,void 0,!0)}if(t){let e=o;o=r=>t({className:r,parseClassName:e})}return o})(a),sortModifiers:(s=new Map,a.orderSensitiveModifiers.forEach((e,r)=>{s.set(e,1e6+r)}),e=>{let r=[],t=[];for(let o=0;o<e.length;o++){let n=e[o],l="["===n[0],a=s.has(n);l||a?(t.length>0&&(t.sort(),r.push(...t),t=[]),r.push(n)):t.push(n)}return t.length>0&&(t.sort(),r.push(...t)),r}),postfixLookupClassGroupIds:(e=>{let r=Object.create(null),t=e.postfixLookupClassGroups;if(t)for(let e=0;e<t.length;e++)r[t[e]]=!0;return r})(a),...(e=>{let r=(e=>{let{theme:r,classGroups:t}=e;return b(t,r)})(e),{conflictingClassGroups:t,conflictingClassGroupModifiers:o}=e;return{getClassGroupId:e=>{if(e.startsWith("[")&&e.endsWith("]")){var t;let r,o,n;return -1===(t=e).slice(1,-1).indexOf(":")?void 0:(o=(r=t.slice(1,-1)).indexOf(":"),(n=r.slice(0,o))?"arbitrary.."+n:void 0)}let o=e.split("-"),n=+(""===o[0]&&o.length>1);return f(o,n,r)},getConflictingClassGroupIds:(e,r)=>{if(r){let r=o[e],n=t[e];if(r){if(n){let e=Array(n.length+r.length);for(let r=0;r<n.length;r++)e[r]=n[r];for(let t=0;t<r.length;t++)e[n.length+t]=r[t];return e}return r}return n||u}return t[e]||u}}})(a)}).cache.get,o=e.cache.set,n=l,l(t)},(...e)=>n(((...e)=>{let r,t,o=0,n="";for(;o<e.length;)(r=e[o++])&&(t=S(r))&&(n&&(n+=" "),n+=t);return n})(...e))),e_=window.WallarmDS.VStack,eN=window.WallarmDS.Flex,ez=e=>{let r,t,o=(0,m.c)(5),{children:n,className:l}=e;return o[0]!==l?(r=((...e)=>ev(function(){for(var e,r,t=0,o="",n=arguments.length;t<n;t++)(e=arguments[t])&&(r=function e(r){var t,o,n="";if("string"==typeof r||"number"==typeof r)n+=r;else if("object"==typeof r)if(Array.isArray(r)){var l=r.length;for(t=0;t<l;t++)r[t]&&(o=e(r[t]))&&(n&&(n+=" "),n+=o)}else for(o in r)r[o]&&(n&&(n+=" "),n+=o);return n}(e))&&(o&&(o+=" "),o+=r);return o}(e)))("flex h-40 py-4 px-8 items-center justify-center rounded-6 border border-border-info bg-bg-light-info font-mono text-xs text-text-info",l),o[0]=l,o[1]=r):r=o[1],o[2]!==n||o[3]!==r?(t=a("div",{className:r,children:n}),o[2]=n,o[3]=r,o[4]=t):t=o[4],t},eS={title:"Layout/Flex",component:eN,args:{},parameters:{layout:"padded",docs:{description:{component:"A flex container with the properties as props — `direction`, `justify`, `align`, `wrap`, plus `basis` fractions and `grow` / `shrink` for how the children size themselves. Reach for `Stack`, or `HStack` / `VStack`, when all you want is a spaced list in one direction: `Stack` carries a default gap where `Flex` has none. `Flex` takes no `className`, so everything goes through props."}}}};function e$(e,r){let t=`${r+1}`;return a(ez,{className:"h-20 w-20 text-xs",children:t},t)}var eR=t("C");let eE=[{name:"Basic",story:e=>{let r,t,o,n,l,i=(0,m.c)(7);return i[0]!==e?({...r}=e,i[0]=e,i[1]=r):r=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(t=a(ez,{children:"A"}),o=a(ez,{children:"B"}),n=a(ez,{children:"C"}),i[2]=t,i[3]=o,i[4]=n):(t=i[2],o=i[3],n=i[4]),i[5]!==r?(l=s(eN,{...r,gap:4,children:[t,o,n]}),i[5]=r,i[6]=l):l=i[6],l},meta:eS},{name:"Direction",story:e=>{let r,t,o,n,l,i,c,d,p,u,f,b,h,g,y,x,w,k=(0,m.c)(24);return k[0]!==e?({...r}=e,k[0]=e,k[1]=r):r=k[1],k[2]===Symbol.for("react.memo_cache_sentinel")?(t=a("p",{className:"sb-annotation",children:"row — default"}),k[2]=t):t=k[2],k[3]===Symbol.for("react.memo_cache_sentinel")?(o=a(ez,{className:"h-32 py-2 px-4 text-sm",children:"1"}),n=a(ez,{className:"h-32 py-2 px-4 text-sm",children:"2"}),l=a(ez,{className:"h-32 py-2 px-4 text-sm",children:"3"}),k[3]=o,k[4]=n,k[5]=l):(o=k[3],n=k[4],l=k[5]),k[6]!==r?(i=s(e_,{children:[t,s(eN,{...r,direction:"row",gap:2,children:[o,n,l]})]}),k[6]=r,k[7]=i):i=k[7],k[8]===Symbol.for("react.memo_cache_sentinel")?(c=a("p",{className:"sb-annotation",children:"column"}),k[8]=c):c=k[8],k[9]===Symbol.for("react.memo_cache_sentinel")?(d=a(ez,{className:"h-32 py-2 px-4 text-sm",children:"1"}),p=a(ez,{className:"h-32 py-2 px-4 text-sm",children:"2"}),u=a(ez,{className:"h-32 py-2 px-4 text-sm",children:"3"}),k[9]=d,k[10]=p,k[11]=u):(d=k[9],p=k[10],u=k[11]),k[12]!==r?(f=s(e_,{children:[c,s(eN,{...r,direction:"column",gap:2,children:[d,p,u]})]}),k[12]=r,k[13]=f):f=k[13],k[14]===Symbol.for("react.memo_cache_sentinel")?(b=a("p",{className:"sb-annotation",children:"row-reverse"}),k[14]=b):b=k[14],k[15]===Symbol.for("react.memo_cache_sentinel")?(h=a(ez,{className:"h-32 py-2 px-4 text-sm",children:"1"}),g=a(ez,{className:"h-32 py-2 px-4 text-sm",children:"2"}),y=a(ez,{className:"h-32 py-2 px-4 text-sm",children:"3"}),k[15]=h,k[16]=g,k[17]=y):(h=k[15],g=k[16],y=k[17]),k[18]!==r?(x=s(e_,{children:[b,s(eN,{...r,direction:"row-reverse",gap:2,children:[h,g,y]})]}),k[18]=r,k[19]=x):x=k[19],k[20]!==f||k[21]!==x||k[22]!==i?(w=s(eN,{direction:"column",gap:8,children:[i,f,x]}),k[20]=f,k[21]=x,k[22]=i,k[23]=w):w=k[23],w},meta:eS},{name:"Alignment",story:e=>{let r,t,o,n,l,i,c,d,p,u,f,b,h,g,y=(0,m.c)(21);return y[0]!==e?({...r}=e,y[0]=e,y[1]=r):r=y[1],y[2]===Symbol.for("react.memo_cache_sentinel")?(t=a("p",{className:"sb-annotation",children:"justify start — default"}),y[2]=t):t=y[2],y[3]===Symbol.for("react.memo_cache_sentinel")?(o=a(ez,{className:"h-16 w-16 text-xs",children:"A"}),n=a(ez,{className:"h-16 w-16 text-xs",children:"B"}),y[3]=o,y[4]=n):(o=y[3],n=y[4]),y[5]!==r?(l=s(e_,{children:[t,s(eN,{...r,justify:"start",fullWidth:!0,children:[o,n]})]}),y[5]=r,y[6]=l):l=y[6],y[7]===Symbol.for("react.memo_cache_sentinel")?(i=a("p",{className:"sb-annotation",children:"justify center"}),y[7]=i):i=y[7],y[8]===Symbol.for("react.memo_cache_sentinel")?(c=a(ez,{className:"h-16 w-16 text-xs",children:"A"}),d=a(ez,{className:"h-16 w-16 text-xs",children:"B"}),y[8]=c,y[9]=d):(c=y[8],d=y[9]),y[10]!==r?(p=s(e_,{children:[i,s(eN,{...r,justify:"center",fullWidth:!0,children:[c,d]})]}),y[10]=r,y[11]=p):p=y[11],y[12]===Symbol.for("react.memo_cache_sentinel")?(u=a("p",{className:"sb-annotation",children:"justify between"}),y[12]=u):u=y[12],y[13]===Symbol.for("react.memo_cache_sentinel")?(f=a(ez,{className:"h-16 w-16 text-xs",children:"A"}),b=a(ez,{className:"h-16 w-16 text-xs",children:"B"}),y[13]=f,y[14]=b):(f=y[13],b=y[14]),y[15]!==r?(h=s(e_,{children:[u,s(eN,{...r,justify:"between",fullWidth:!0,children:[f,b]})]}),y[15]=r,y[16]=h):h=y[16],y[17]!==h||y[18]!==l||y[19]!==p?(g=s(eN,{direction:"column",gap:8,children:[l,p,h]}),y[17]=h,y[18]=l,y[19]=p,y[20]=g):g=y[20],g},meta:eS},{name:"Wrap",story:e=>{let r,t,o,n,l=(0,m.c)(6);return l[0]!==e?({...r}=e,l[0]=e,l[1]=r):r=l[1],l[2]===Symbol.for("react.memo_cache_sentinel")?(t=a("p",{className:"sb-annotation",children:"wrap"}),l[2]=t):t=l[2],l[3]===Symbol.for("react.memo_cache_sentinel")?(o=Array(40).fill(null).map(e$),l[3]=o):o=l[3],l[4]!==r?(n=s(e_,{children:[t,a(eN,{...r,wrap:"wrap",gap:2,fullWidth:!0,children:o})]}),l[4]=r,l[5]=n):n=l[5],n},meta:eS},{name:"GrowShrink",story:e=>{let r,t,o,n,l,i,c,d,p,u,f,b=(0,m.c)(16);return b[0]!==e?({...r}=e,b[0]=e,b[1]=r):r=b[1],b[2]===Symbol.for("react.memo_cache_sentinel")?(t=a("p",{className:"sb-annotation",children:"grow"}),b[2]=t):t=b[2],b[3]===Symbol.for("react.memo_cache_sentinel")?(o=a(ez,{className:"h-16 flex-1 text-xs",children:"Flex-1"}),n=a(ez,{className:"h-16 flex-1 text-xs",children:"Flex-1"}),l=a(ez,{className:"h-16 text-xs",children:"Fixed"}),b[3]=o,b[4]=n,b[5]=l):(o=b[3],n=b[4],l=b[5]),b[6]!==r?(i=s(e_,{children:[t,s(eN,{...r,fullWidth:!0,children:[o,n,l]})]}),b[6]=r,b[7]=i):i=b[7],b[8]===Symbol.for("react.memo_cache_sentinel")?(c=a("p",{className:"sb-annotation",children:"shrink"}),b[8]=c):c=b[8],b[9]===Symbol.for("react.memo_cache_sentinel")?(d=a(ez,{className:"h-16 flex-shrink text-xs",children:"Shrinkable long content"}),p=a(ez,{className:"h-16 flex-shrink-0 text-xs",children:"No shrink"}),b[9]=d,b[10]=p):(d=b[9],p=b[10]),b[11]!==r?(u=s(e_,{children:[c,s(eN,{...r,fullWidth:!0,children:[d,p]})]}),b[11]=r,b[12]=u):u=b[12],b[13]!==i||b[14]!==u?(f=s(eN,{direction:"column",gap:8,children:[i,u]}),b[13]=i,b[14]=u,b[15]=f):f=b[15],f},meta:eS}];function ej({entry:e}){let{story:r,meta:t}=e,o={...t.args,...r.args},n="function"==typeof r||r.$$typeof?r:r.render||t.render||t.component,l=()=>eR.default.createElement(n,o),a={args:o,globals:{theme:"light"},parameters:{...t.parameters,...r.parameters},viewMode:"story"};for(let e of[...t.decorators||[],...r.decorators||[]].reverse()){let r=l;l=()=>e(r,a)}return eR.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},eR.default.createElement("h2",{className:"text-sm mb-12"},e.name),eR.default.createElement(l))}window.WallarmPreview={mount(e){let r=window.ReactDOM.createRoot(e);return r.render(eR.default.createElement(window.WallarmDS.Root,null,eE.map((e,r)=>eR.default.createElement(ej,{key:r,entry:e})))),r}}})();