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

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

@@ -0,0 +1,421 @@
+Shows the full value only when it is actually truncated, so a reader who can already see the text is not given a tooltip that repeats it. It finds the truncating element itself, so wrap the content rather than pointing it at a node.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `force-tooltip` | `boolean \| undefined` | no | `false` |  |
+| `positioning` | `complex` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.OverflowTooltipContent` — `OverflowTooltipContentProps` in the declaration bundle.
+- `WallarmDS.OverflowTooltipTrigger` — `OverflowTooltipTriggerProps` in the declaration bundle.
+
+## Stories
+
+### AutoDetection
+
+A single truncated line. The tooltip appears only when the text is cut — resize the frame and
+it stops offering one.
+
+Source: OverflowTooltip/OverflowTooltip.stories.tsx#AutoDetection
+
+### MultiLineAutoDetection
+
+The same with `line-clamp`, where truncation happens at the block rather than the line.
+
+Source: OverflowTooltip/OverflowTooltip.stories.tsx#MultiLineAutoDetection
+
+### NestedElements
+
+The truncating element is somewhere inside the children, which is the usual case — it is
+found rather than declared.
+
+Source: OverflowTooltip/OverflowTooltip.stories.tsx#NestedElements
+
+### CustomTooltipContent
+
+Overriding the content, for when the full value needs formatting the truncated one does not
+have.
+
+Source: OverflowTooltip/OverflowTooltip.stories.tsx#CustomTooltipContent
+
+### ForceTooltip
+
+Forcing it on regardless of truncation. Reach for a plain `Tooltip` instead if the answer is
+always yes — this prop exists for the case that switches.
+
+Source: OverflowTooltip/OverflowTooltip.stories.tsx#ForceTooltip
+
+### DifferentSides
+
+Placement around the trigger. In a table, keep it off the side the reader is scanning.
+
+Source: OverflowTooltip/OverflowTooltip.stories.tsx#DifferentSides
+
+### DynamicContent
+
+Content that changes after mount. The measurement is re-taken rather than cached from first
+render, so text that grows past its box gains a tooltip without being remounted.
+
+Source: OverflowTooltip/OverflowTooltip.stories.tsx#DynamicContent
+
+## Story sources
+
+### OverflowTooltip/OverflowTooltip.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Button } from '../Button';
+import {
+  OverflowTooltip,
+  OverflowTooltipContent,
+  type OverflowTooltipProps,
+  OverflowTooltipTrigger,
+} from './index';
+
+const DESCRIPTION = [
+  'Shows the full value only when it is actually truncated, so a reader who can already see the text is not given a tooltip that repeats it.',
+  'It finds the truncating element itself, so wrap the content rather than pointing it at a node.',
+].join(' ');
+
+const meta = {
+  title: 'Overlay/OverflowTooltip',
+  component: OverflowTooltip,
+  subcomponents: { OverflowTooltipTrigger, OverflowTooltipContent },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof OverflowTooltip>;
+
+export default meta;
+
+/**
+ * A single truncated line. The tooltip appears only when the text is cut — resize the frame and
+ * it stops offering one.
+ */
+export const AutoDetection: StoryFn<OverflowTooltipProps> = () => {
+  return (
+    <div className='font-sans flex flex-col gap-16 w-300'>
+      <div>
+        <p className='sb-annotation mb-8'>short — no tooltip</p>
+        <OverflowTooltip>
+          <OverflowTooltipTrigger>
+            <div className='truncate'>Short text</div>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>
+            This won't show because text isn't overflowing
+          </OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+
+      <div>
+        <p className='sb-annotation mb-8'>long — tooltip</p>
+        <OverflowTooltip>
+          <OverflowTooltipTrigger>
+            <div className='truncate'>
+              This is a very long text that will be truncated and automatically show a tooltip when
+              hovered
+            </div>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>
+            This is a very long text that will be truncated and automatically show a tooltip when
+            hovered
+          </OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * The same with `line-clamp`, where truncation happens at the block rather than the line.
+ */
+export const MultiLineAutoDetection: StoryFn<OverflowTooltipProps> = () => {
+  const longText =
+    'This is a very long text that demonstrates multi-line truncation. It keeps going and going to show how the component handles text that exceeds multiple lines. The tooltip will appear when you hover over the truncated content. And it continues even more to ensure we have enough content for demonstration purposes.';
+
+  return (
+    <div className='font-sans flex flex-col gap-16 w-300'>
+      <div>
+        <p className='sb-annotation mb-8'>line-clamp-2</p>
+        <OverflowTooltip>
+          <OverflowTooltipTrigger>
+            <div className='line-clamp-2'>{longText}</div>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>{longText}</OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+
+      <div>
+        <p className='sb-annotation mb-8'>line-clamp-3</p>
+        <OverflowTooltip>
+          <OverflowTooltipTrigger>
+            <div className='line-clamp-3'>{longText}</div>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>{longText}</OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+
+      <div>
+        <p className='sb-annotation mb-8'>line-clamp-4</p>
+        <OverflowTooltip>
+          <OverflowTooltipTrigger>
+            <div className='line-clamp-4'>{longText}</div>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>{longText}</OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * The truncating element is somewhere inside the children, which is the usual case — it is
+ * found rather than declared.
+ */
+export const NestedElements: StoryFn<OverflowTooltipProps> = () => {
+  return (
+    <div className='font-sans flex flex-col gap-16 w-300'>
+      <div>
+        <p className='sb-annotation mb-8'>one level deep</p>
+        <OverflowTooltip>
+          <OverflowTooltipTrigger>
+            <div className='border p-4'>
+              <h3 className='font-bold mb-2'>Card Title</h3>
+              <p className='truncate'>
+                This is a nested element with truncate that will be automatically detected for
+                overflow
+              </p>
+            </div>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>
+            This is a nested element with truncate that will be automatically detected for overflow
+          </OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+
+      <div>
+        <p className='sb-annotation mb-8'>several, each truncating</p>
+        <OverflowTooltip>
+          <OverflowTooltipTrigger>
+            <div className='border p-4'>
+              <h3 className='font-bold mb-2 truncate'>
+                This is a very long title that might be truncated
+              </h3>
+              <p className='line-clamp-2'>
+                And this is a description that can span multiple lines but will be clamped to just
+                two lines. The component will detect if either of these elements overflow.
+              </p>
+            </div>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>
+            <div>
+              <strong>Title:</strong> This is a very long title that might be truncated
+              <br />
+              <strong>Description:</strong> And this is a description that can span multiple lines
+              but will be clamped to just two lines. The component will detect if either of these
+              elements overflow.
+            </div>
+          </OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Overriding the content, for when the full value needs formatting the truncated one does not
+ * have.
+ */
+export const CustomTooltipContent: StoryFn<OverflowTooltipProps> = () => {
+  return (
+    <div className='font-sans flex flex-col gap-16 w-300'>
+      <div>
+        <p className='sb-annotation mb-8'>rich content</p>
+        <OverflowTooltip>
+          <OverflowTooltipTrigger>
+            <div className='truncate'>
+              /api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh
+            </div>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>
+            <div className='flex flex-col gap-2'>
+              <div className='font-medium text-sm'>API Endpoint</div>
+              <code className='rounded-6 bg-component-kbi-tooltip-bg px-4 py-2 font-mono text-text-primary-alt text-xs'>
+                /api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh
+              </code>
+              <div className='text-xs text-text-secondary-alt'>
+                Method: POST
+                <br />
+                Auth: Bearer Token
+              </div>
+            </div>
+          </OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+
+      <div>
+        <p className='sb-annotation mb-8'>table-like content</p>
+        <OverflowTooltip>
+          <OverflowTooltipTrigger>
+            <div className='truncate'>
+              user@example.com - Administrator - Last login: 2024-01-15
+            </div>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>
+            <div className='grid grid-cols-2 gap-2 text-sm'>
+              <span className='font-medium'>Email:</span>
+              <span>user@example.com</span>
+              <span className='font-medium'>Role:</span>
+              <span>Administrator</span>
+              <span className='font-medium'>Last Login:</span>
+              <span>2024-01-15</span>
+            </div>
+          </OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Forcing it on regardless of truncation. Reach for a plain `Tooltip` instead if the answer is
+ * always yes — this prop exists for the case that switches.
+ */
+export const ForceTooltip: StoryFn<OverflowTooltipProps> = () => {
+  return (
+    <div className='font-sans flex flex-col gap-16 w-300'>
+      <div>
+        <p className='sb-annotation mb-8'>forced, nothing truncated</p>
+        <OverflowTooltip forceTooltip>
+          <OverflowTooltipTrigger>
+            <div className='truncate w-fit'>Short text</div>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>
+            This tooltip is forced to show even though the text isn't truncated
+          </OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+
+      <div>
+        <p className='sb-annotation mb-8'>forced, with extra detail</p>
+        <OverflowTooltip forceTooltip>
+          <OverflowTooltipTrigger>
+            <Button variant='outline' color='neutral'>
+              Click for info
+            </Button>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>
+            <div className='flex flex-col gap-2'>
+              <strong>Additional Information</strong>
+              <span className='text-sm'>
+                This tooltip provides extra context even when the trigger element doesn't have
+                overflow.
+              </span>
+            </div>
+          </OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Placement around the trigger. In a table, keep it off the side the reader is scanning.
+ */
+export const DifferentSides: StoryFn<OverflowTooltipProps> = () => {
+  const text = 'This is a text that will be truncated and show tooltips on different sides';
+
+  return (
+    <div className='font-sans flex flex-col gap-32 w-300 py-32'>
+      <div>
+        <p className='sb-annotation mb-8'>top — the default</p>
+        <OverflowTooltip positioning={{ placement: 'top' }}>
+          <OverflowTooltipTrigger>
+            <div className='truncate'>{text}</div>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>{text}</OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+
+      <div>
+        <p className='sb-annotation mb-8'>bottom</p>
+        <OverflowTooltip positioning={{ placement: 'bottom' }}>
+          <OverflowTooltipTrigger>
+            <div className='truncate'>{text}</div>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>{text}</OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+
+      <div>
+        <p className='sb-annotation mb-8'>left</p>
+        <OverflowTooltip positioning={{ placement: 'left' }}>
+          <OverflowTooltipTrigger>
+            <div className='truncate'>{text}</div>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>{text}</OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+
+      <div>
+        <p className='sb-annotation mb-8'>right</p>
+        <OverflowTooltip positioning={{ placement: 'right' }}>
+          <OverflowTooltipTrigger>
+            <div className='truncate'>{text}</div>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>{text}</OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Content that changes after mount. The measurement is re-taken rather than cached from first
+ * render, so text that grows past its box gains a tooltip without being remounted.
+ */
+export const DynamicContent: StoryFn<OverflowTooltipProps> = () => {
+  const [text, setText] = useState('Click the button to change this text');
+
+  return (
+    <div className='font-sans flex flex-col gap-16 w-300'>
+      <div>
+        <OverflowTooltip>
+          <OverflowTooltipTrigger>
+            <div className='truncate'>{text}</div>
+          </OverflowTooltipTrigger>
+          <OverflowTooltipContent>{text}</OverflowTooltipContent>
+        </OverflowTooltip>
+      </div>
+
+      <Button
+        variant='outline'
+        color='neutral'
+        onClick={() => {
+          const texts = [
+            'Short text',
+            'This is a medium length text that might overflow',
+            'This is a very long text that will definitely overflow and show a tooltip when you hover over it',
+            'Another short one',
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+          ];
+          setText(texts[Math.floor(Math.random() * texts.length)] ?? 'Short text');
+        }}
+      >
+        Change Text
+      </Button>
+    </div>
+  );
+};
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Overlay" 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/OverflowTooltip/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let o,r;/**
+ * 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,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,h=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,u=(e,t,n,o)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let r of d(t))m.call(e,r)||r===n||c(e,r,{get:()=>t[r],enumerable:!(o=s(t,r))||o.enumerable});return e},p={},f={$dispatcherGuard:()=>$,$makeReadOnly:()=>k,$reset:()=>C,$structuralCheck:()=>j,c:()=>N,clearRenderCounterRegistry:()=>M,renderCounterRegistry:()=>O,useRenderCounter:()=>A};for(var y in f)c(p,y,{get:f[y],enumerable:!0});e.exports=u(c({},"__esModule",{value:!0}),p);var v=(r=null!=(o=n("C"))?i(h(o)):{},u(o&&o.__esModule?r:c(r,"default",{value:o,enumerable:!0}),o)),{useRef:w,useEffect:b,isValidElement:g}=v,_=null!=(l=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:v.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,x=Symbol.for("react.memo_cache_sentinel"),N="function"==typeof(null==(a=v.__COMPILER_RUNTIME)?void 0:a.c)?v.__COMPILER_RUNTIME.c:function(e){return v.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=x;return t[x]=!0,t},[])},S={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{S[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 T=null;function E(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}S.useMemoCache=e=>{if(null!=T)return T.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var R=[];function $(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(R.push(t),1===R.length&&(T=t),t===S)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.");E(S)}else if(1===e){let e=R.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===R.length&&(T=null),E(e)}else if(2===e)R.push(t),E(T);else if(3===e){let e=R.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");E(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function C(e){for(let t=0;t<e.length;t++)e[t]=x}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var O=new Map;function M(){for(let e of O.values())e.forEach(e=>{e.count=0})}function A(e){let t=w(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let n,o={count:0};null==(n=O.get(e))&&(n=new Set,O.set(e,n)),n.add(o),t.current=o}return()=>{var n;let o;null!==t.current&&(n=t.current,null!=(o=O.get(e))&&o.delete(n))}})}var D=new Set;function j(e,t,n,o,r,l){function a(e,t,a,i){let c=`${o}:${l} [${r}] ${n}${a} changed from ${e} to ${t} at depth ${i}`;D.has(c)||(D.add(c),console.error(c))}!function e(t,n,o,r){if(!(r>2)){if(t!==n)if(typeof t!=typeof n)a(`type ${typeof t}`,`type ${typeof n}`,o,r);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(n);if(null===t&&null!==n)a("null",`type ${typeof n}`,o,r);else if(null===n)a(`type ${typeof t}`,"null",o,r);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)a(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,o,r);else for(let[l,i]of t)n.has(l)?e(i,n.get(l),`${o}.get(${l})`,r+1):a(`Map instance with key ${l}`,`Map instance without key ${l}`,o,r);else a("Map instance","other value",o,r);else if(n instanceof Map)a("other value","Map instance",o,r);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)a(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,o,r);else for(let e of n)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,o,r);else a("Set instance","other value",o,r);else if(n instanceof Set)a("other value","Set instance",o,r);else if(l||i)if(l!==i)a(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,o,r);else if(t.length!==n.length)a(`array with length ${t.length}`,`array with length ${n.length}`,o,r);else for(let l=0;l<t.length;l++)e(t[l],n[l],`${o}[${l}]`,r+1);else if(g(t)||g(n))g(t)!==g(n)?a(`type ${g(t)?"React element":"object"}`,`type ${g(n)?"React element":"object"}`,o,r):t.type!==n.type?a(`React element of type ${t.type}`,`React element of type ${n.type}`,o,r):e(t.props,n.props,`[props of ${o}]`,r+1);else{for(let e in n)e in t||a(`object without key ${e}`,`object with key ${e}`,o,r);for(let l in t)l in n?e(t[l],n[l],`${o}.${l}`,r+1):a(`object with key ${l}`,`object without key ${l}`,o,r)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&a(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,o,r):t!==n&&a(t,n,o,r)}}}(e,t,"",0)}},p(e,t,n){let o=new WeakMap,r=new WeakMap;function l(e,t,n){let l=t,a=n;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 t=l,n=o.get(e);n||(n=new WeakMap,o.set(e,n));let r=n.get(t);r||((r=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,r)),l=r}if("string"==typeof l&&"boolean"==typeof a.inert&&((a={...a}).inert?a.inert="":delete a.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in a&&(a={...a,[t]:a[e]},delete a[e]);return"string"==typeof l&&null!=a.ref&&(l=function(e,t){let n=r.get(e);n||(n=new Map,r.set(e,n));let o=n.get(t);if(o)return o;let l=e.forwardRef((n,o)=>{let r=e.useRef(null);if(!r.current||r.current.original!==o){let e;r.current={original:o,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof o){let n=o(t);e="function"==typeof n?n:void 0}else o&&(o.current=t)}}}return e.createElement(t,{...n,ref:r.current.callback})});return l.displayName=`CanvasHost(${t})`,n.set(t,l),l}(e,l)),{type:l,props:a}}function a(e){let t=(t,n,o)=>{let r=l(e,t,n??{});return e.createElement(r.type,void 0===o?r.props:{...r.props,key:o})};return{jsx:t,jsxs:(t,n,o)=>{let r=l(e,t,n??{}),{children:a,...i}=r.props;return e.createElement(r.type,void 0===o?i:{...i,key:o},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,n,...o)=>{let r=l(e,t,n??{});return e.createElement(r.type,r.props,...o)},cloneElement:(t,n,...o)=>{let r=e.cloneElement(t,n??void 0,...o),a=r.ref,i=l(e,r.type,{...r.props,ref:a});return i.type===r.type&&"string"!=typeof r.type?r:e.createElement(i.type,{...i.props,key:r.key})}}}n.d(t,{MA:()=>a,YJ:()=>i})},C(e,t,n){n.r(t);let o=(0,n("p").YJ)(window.React),{Children:r,Component:l,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:h,act:m,cloneElement:u,createContext:p,createElement:f,createFactory:y,createRef:v,forwardRef:w,isValidElement:b,lazy:g,memo:_,startTransition:x,unstable_act:N,useCallback:S,useContext:T,useDebugValue:E,useDeferredValue:R,useEffect:$,useId:C,useImperativeHandle:k,useInsertionEffect:O,useLayoutEffect:M,useMemo:A,useReducer:D,useRef:j,useState:I,useSyncExternalStore:P,useTransition:L,version:z,use:W}=o;n.d(t,{},{Children:r,Component:l,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:h,act:m,cloneElement:u,createContext:p,createElement:f,createFactory:y,createRef:v,default:o,forwardRef:w,isValidElement:b,lazy:g,memo:_,startTransition:x,unstable_act:N,use:W,useCallback:S,useContext:T,useDebugValue:E,useDeferredValue:R,useEffect:$,useId:C,useImperativeHandle:k,useInsertionEffect:O,useLayoutEffect:M,useMemo:A,useReducer:D,useRef:j,useState:I,useSyncExternalStore:P,useTransition:L,version:z})}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var l=t[o]={exports:{}};return e[o](l,l.exports,n),l.exports}n.d=(e,t,o)=>{var r=(t,o)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,[o]:t[r]})};r(t,"get"),r(o,"value")},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:o,Fragment:r}=(0,n("p").MA)(window.React);var l=n("vD"),a=n("C");let i=window.WallarmDS.Button,c=window.WallarmDS.OverflowTooltip,s=window.WallarmDS.OverflowTooltipContent,d=window.WallarmDS.OverflowTooltipTrigger,h={title:"Overlay/OverflowTooltip",component:c,subcomponents:{OverflowTooltipTrigger:d,OverflowTooltipContent:s},parameters:{layout:"centered",docs:{description:{component:"Shows the full value only when it is actually truncated, so a reader who can already see the text is not given a tooltip that repeats it. It finds the truncating element itself, so wrap the content rather than pointing it at a node."}}}},m=[{name:"AutoDetection",story:()=>{let n,o,r,a,i=(0,l.c)(4);return i[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("p",{className:"sb-annotation mb-8",children:"short — no tooltip"}),i[0]=n):n=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(o=t("div",{children:[n,t(c,{children:[e(d,{children:e("div",{className:"truncate",children:"Short text"})}),e(s,{children:"This won't show because text isn't overflowing"})]})]}),r=e("p",{className:"sb-annotation mb-8",children:"long — tooltip"}),i[1]=o,i[2]=r):(o=i[1],r=i[2]),i[3]===Symbol.for("react.memo_cache_sentinel")?(a=t("div",{className:"font-sans flex flex-col gap-16 w-300",children:[o,t("div",{children:[r,t(c,{children:[e(d,{children:e("div",{className:"truncate",children:"This is a very long text that will be truncated and automatically show a tooltip when hovered"})}),e(s,{children:"This is a very long text that will be truncated and automatically show a tooltip when hovered"})]})]})]}),i[3]=a):a=i[3],a},meta:h},{name:"MultiLineAutoDetection",story:()=>{let n,o,r,a,i,h,m=(0,l.c)(6);return m[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("p",{className:"sb-annotation mb-8",children:"line-clamp-2"}),m[0]=n):n=m[0],m[1]===Symbol.for("react.memo_cache_sentinel")?(o=t("div",{children:[n,t(c,{children:[e(d,{children:e("div",{className:"line-clamp-2",children:"This is a very long text that demonstrates multi-line truncation. It keeps going and going to show how the component handles text that exceeds multiple lines. The tooltip will appear when you hover over the truncated content. And it continues even more to ensure we have enough content for demonstration purposes."})}),e(s,{children:"This is a very long text that demonstrates multi-line truncation. It keeps going and going to show how the component handles text that exceeds multiple lines. The tooltip will appear when you hover over the truncated content. And it continues even more to ensure we have enough content for demonstration purposes."})]})]}),r=e("p",{className:"sb-annotation mb-8",children:"line-clamp-3"}),m[1]=o,m[2]=r):(o=m[1],r=m[2]),m[3]===Symbol.for("react.memo_cache_sentinel")?(a=t("div",{children:[r,t(c,{children:[e(d,{children:e("div",{className:"line-clamp-3",children:"This is a very long text that demonstrates multi-line truncation. It keeps going and going to show how the component handles text that exceeds multiple lines. The tooltip will appear when you hover over the truncated content. And it continues even more to ensure we have enough content for demonstration purposes."})}),e(s,{children:"This is a very long text that demonstrates multi-line truncation. It keeps going and going to show how the component handles text that exceeds multiple lines. The tooltip will appear when you hover over the truncated content. And it continues even more to ensure we have enough content for demonstration purposes."})]})]}),i=e("p",{className:"sb-annotation mb-8",children:"line-clamp-4"}),m[3]=a,m[4]=i):(a=m[3],i=m[4]),m[5]===Symbol.for("react.memo_cache_sentinel")?(h=t("div",{className:"font-sans flex flex-col gap-16 w-300",children:[o,a,t("div",{children:[i,t(c,{children:[e(d,{children:e("div",{className:"line-clamp-4",children:"This is a very long text that demonstrates multi-line truncation. It keeps going and going to show how the component handles text that exceeds multiple lines. The tooltip will appear when you hover over the truncated content. And it continues even more to ensure we have enough content for demonstration purposes."})}),e(s,{children:"This is a very long text that demonstrates multi-line truncation. It keeps going and going to show how the component handles text that exceeds multiple lines. The tooltip will appear when you hover over the truncated content. And it continues even more to ensure we have enough content for demonstration purposes."})]})]})]}),m[5]=h):h=m[5],h},meta:h},{name:"NestedElements",story:()=>{let n,o,r,a,i,h,m=(0,l.c)(6);return m[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("p",{className:"sb-annotation mb-8",children:"one level deep"}),m[0]=n):n=m[0],m[1]===Symbol.for("react.memo_cache_sentinel")?(o=t("div",{children:[n,t(c,{children:[e(d,{children:t("div",{className:"border p-4",children:[e("h3",{className:"font-bold mb-2",children:"Card Title"}),e("p",{className:"truncate",children:"This is a nested element with truncate that will be automatically detected for overflow"})]})}),e(s,{children:"This is a nested element with truncate that will be automatically detected for overflow"})]})]}),r=e("p",{className:"sb-annotation mb-8",children:"several, each truncating"}),m[1]=o,m[2]=r):(o=m[1],r=m[2]),m[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(d,{children:t("div",{className:"border p-4",children:[e("h3",{className:"font-bold mb-2 truncate",children:"This is a very long title that might be truncated"}),e("p",{className:"line-clamp-2",children:"And this is a description that can span multiple lines but will be clamped to just two lines. The component will detect if either of these elements overflow."})]})}),m[3]=a):a=m[3],m[4]===Symbol.for("react.memo_cache_sentinel")?(i=e("strong",{children:"Title:"}),m[4]=i):i=m[4],m[5]===Symbol.for("react.memo_cache_sentinel")?(h=t("div",{className:"font-sans flex flex-col gap-16 w-300",children:[o,t("div",{children:[r,t(c,{children:[a,e(s,{children:t("div",{children:[i," This is a very long title that might be truncated",e("br",{}),e("strong",{children:"Description:"})," And this is a description that can span multiple lines but will be clamped to just two lines. The component will detect if either of these elements overflow."]})})]})]})]}),m[5]=h):h=m[5],h},meta:h},{name:"CustomTooltipContent",story:()=>{let n,o,r,a,i,h,m,u,p=(0,l.c)(8);return p[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("p",{className:"sb-annotation mb-8",children:"rich content"}),p[0]=n):n=p[0],p[1]===Symbol.for("react.memo_cache_sentinel")?(o=e(d,{children:e("div",{className:"truncate",children:"/api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh"})}),p[1]=o):o=p[1],p[2]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"font-medium text-sm",children:"API Endpoint"}),a=e("code",{className:"rounded-6 bg-component-kbi-tooltip-bg px-4 py-2 font-mono text-text-primary-alt text-xs",children:"/api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh"}),p[2]=r,p[3]=a):(r=p[2],a=p[3]),p[4]===Symbol.for("react.memo_cache_sentinel")?(i=t("div",{children:[n,t(c,{children:[o,e(s,{children:t("div",{className:"flex flex-col gap-2",children:[r,a,t("div",{className:"text-xs text-text-secondary-alt",children:["Method: POST",e("br",{}),"Auth: Bearer Token"]})]})})]})]}),h=e("p",{className:"sb-annotation mb-8",children:"table-like content"}),p[4]=i,p[5]=h):(i=p[4],h=p[5]),p[6]===Symbol.for("react.memo_cache_sentinel")?(m=e(d,{children:e("div",{className:"truncate",children:"user@example.com - Administrator - Last login: 2024-01-15"})}),p[6]=m):m=p[6],p[7]===Symbol.for("react.memo_cache_sentinel")?(u=t("div",{className:"font-sans flex flex-col gap-16 w-300",children:[i,t("div",{children:[h,t(c,{children:[m,e(s,{children:t("div",{className:"grid grid-cols-2 gap-2 text-sm",children:[e("span",{className:"font-medium",children:"Email:"}),e("span",{children:"user@example.com"}),e("span",{className:"font-medium",children:"Role:"}),e("span",{children:"Administrator"}),e("span",{className:"font-medium",children:"Last Login:"}),e("span",{children:"2024-01-15"})]})})]})]})]}),p[7]=u):u=p[7],u},meta:h},{name:"ForceTooltip",story:()=>{let n,o,r,a,h,m=(0,l.c)(5);return m[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("p",{className:"sb-annotation mb-8",children:"forced, nothing truncated"}),m[0]=n):n=m[0],m[1]===Symbol.for("react.memo_cache_sentinel")?(o=t("div",{children:[n,t(c,{forceTooltip:!0,children:[e(d,{children:e("div",{className:"truncate w-fit",children:"Short text"})}),e(s,{children:"This tooltip is forced to show even though the text isn't truncated"})]})]}),r=e("p",{className:"sb-annotation mb-8",children:"forced, with extra detail"}),m[1]=o,m[2]=r):(o=m[1],r=m[2]),m[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(d,{children:e(i,{variant:"outline",color:"neutral",children:"Click for info"})}),m[3]=a):a=m[3],m[4]===Symbol.for("react.memo_cache_sentinel")?(h=t("div",{className:"font-sans flex flex-col gap-16 w-300",children:[o,t("div",{children:[r,t(c,{forceTooltip:!0,children:[a,e(s,{children:t("div",{className:"flex flex-col gap-2",children:[e("strong",{children:"Additional Information"}),e("span",{className:"text-sm",children:"This tooltip provides extra context even when the trigger element doesn't have overflow."})]})})]})]})]}),m[4]=h):h=m[4],h},meta:h},{name:"DifferentSides",story:()=>{let n,o,r,a,i,h,m,u,p,f,y,v,w=(0,l.c)(12);return w[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("p",{className:"sb-annotation mb-8",children:"top — the default"}),w[0]=n):n=w[0],w[1]===Symbol.for("react.memo_cache_sentinel")?(o={placement:"top"},w[1]=o):o=w[1],w[2]===Symbol.for("react.memo_cache_sentinel")?(r=t("div",{children:[n,t(c,{positioning:o,children:[e(d,{children:e("div",{className:"truncate",children:"This is a text that will be truncated and show tooltips on different sides"})}),e(s,{children:"This is a text that will be truncated and show tooltips on different sides"})]})]}),a=e("p",{className:"sb-annotation mb-8",children:"bottom"}),w[2]=r,w[3]=a):(r=w[2],a=w[3]),w[4]===Symbol.for("react.memo_cache_sentinel")?(i={placement:"bottom"},w[4]=i):i=w[4],w[5]===Symbol.for("react.memo_cache_sentinel")?(h=t("div",{children:[a,t(c,{positioning:i,children:[e(d,{children:e("div",{className:"truncate",children:"This is a text that will be truncated and show tooltips on different sides"})}),e(s,{children:"This is a text that will be truncated and show tooltips on different sides"})]})]}),m=e("p",{className:"sb-annotation mb-8",children:"left"}),w[5]=h,w[6]=m):(h=w[5],m=w[6]),w[7]===Symbol.for("react.memo_cache_sentinel")?(u={placement:"left"},w[7]=u):u=w[7],w[8]===Symbol.for("react.memo_cache_sentinel")?(p=t("div",{children:[m,t(c,{positioning:u,children:[e(d,{children:e("div",{className:"truncate",children:"This is a text that will be truncated and show tooltips on different sides"})}),e(s,{children:"This is a text that will be truncated and show tooltips on different sides"})]})]}),f=e("p",{className:"sb-annotation mb-8",children:"right"}),w[8]=p,w[9]=f):(p=w[8],f=w[9]),w[10]===Symbol.for("react.memo_cache_sentinel")?(y={placement:"right"},w[10]=y):y=w[10],w[11]===Symbol.for("react.memo_cache_sentinel")?(v=t("div",{className:"font-sans flex flex-col gap-32 w-300 py-32",children:[r,h,p,t("div",{children:[f,t(c,{positioning:y,children:[e(d,{children:e("div",{className:"truncate",children:"This is a text that will be truncated and show tooltips on different sides"})}),e(s,{children:"This is a text that will be truncated and show tooltips on different sides"})]})]})]}),w[11]=v):v=w[11],v},meta:h},{name:"DynamicContent",story:()=>{let n,o,r,h=(0,l.c)(5),[m,u]=(0,a.useState)("Click the button to change this text");return h[0]!==m?(n=e("div",{children:t(c,{children:[e(d,{children:e("div",{className:"truncate",children:m})}),e(s,{children:m})]})}),h[0]=m,h[1]=n):n=h[1],h[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(i,{variant:"outline",color:"neutral",onClick:()=>{let e=["Short text","This is a medium length text that might overflow","This is a very long text that will definitely overflow and show a tooltip when you hover over it","Another short one","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"];u(e[Math.floor(Math.random()*e.length)]??"Short text")},children:"Change Text"}),h[2]=o):o=h[2],h[3]!==n?(r=t("div",{className:"font-sans flex flex-col gap-16 w-300",children:[n,o]}),h[3]=n,h[4]=r):r=h[4],r},meta:h}];function u({entry:e}){let{story:t,meta:n}=e,o={...n.args,...t.args},r="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,l=()=>a.default.createElement(r,o),i={args:o,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,i)}return a.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},a.default.createElement("h2",{className:"text-sm mb-12"},e.name),a.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(a.default.createElement(window.WallarmDS.Root,null,m.map((e,t)=>a.default.createElement(u,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,95 @@
+The house scrim — a fixed, dimmed, lightly blurred layer that mutes the page behind an elevated surface. `Dialog`, `Drawer` and `Tour` render it for you, so reach for those; a popover, tooltip or dropdown is non-modal and takes no scrim at all. It is presentation only: no focus trap, no click-to-dismiss, no scroll lock, and no `className`.
+
+## 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 | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Basic
+
+The scrim over a page of text, which is the whole of what it does. Its fade keys off a `data-state` the parent sets, so on its own it just sits there — the behaviour comes from the headless backdrop you wrap it in.
+
+Source: Overlay/Overlay.stories.tsx#Basic
+
+## Story sources
+
+### Overlay/Overlay.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Text } from '../Text';
+import { Overlay } from './Overlay';
+
+const DESCRIPTION = [
+  'The house scrim — a fixed, dimmed, lightly blurred layer that mutes the page behind an elevated surface.',
+  '`Dialog`, `Drawer` and `Tour` render it for you, so reach for those; a popover, tooltip or dropdown is non-modal and takes no scrim at all.',
+  'It is presentation only: no focus trap, no click-to-dismiss, no scroll lock, and no `className`.',
+].join(' ');
+
+const meta = {
+  title: 'Primitives/Overlay',
+  component: Overlay,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+
+  decorators: [
+    Story => (
+      <div className='p-24'>
+        <Text>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+          been the industry's standard dummy text ever since the 1500s, when an unknown printer took
+          a galley of type and scrambled it to make a type specimen book. It has survived not only
+          five centuries, but also the leap into electronic typesetting, remaining essentially
+          unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+          Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+          PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established
+          fact that a reader will be distracted by the readable content of a page when looking at
+          its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
+          distribution of letters, as opposed to using 'Content here, content here', making it look
+          like readable English. Many desktop publishing packages and web page editors now use Lorem
+          Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web
+          sites still in their infancy. Various versions have evolved over the years, sometimes by
+          accident, sometimes on purpose (injected humour and the like). Where does it come from?
+          Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece
+          of classical Latin literature from 45 BC, making it over 2000 years old. Richard
+          McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the
+          more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the
+          cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum
+          comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
+          of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of
+          ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum
+          dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum
+          used since the 1500s is reproduced below for those interested. Sections 1.10.32 and
+          1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact
+          original form, accompanied by English versions from the 1914 translation by H. Rackham.
+        </Text>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Overlay>;
+
+export default meta;
+
+/** The scrim over a page of text, which is the whole of what it does. Its fade keys off a `data-state` the parent sets, so on its own it just sits there — the behaviour comes from the headless backdrop you wrap it in. */
+export const Basic: StoryFn<typeof meta> = () => <Overlay />;
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Primitives" 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/Overlay/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,o;/**
+ * 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 a,l,i=Object.create,s=Object.defineProperty,c=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,d=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of u(t))f.call(e,o)||o===r||s(e,o,{get:()=>t[o],enumerable:!(n=c(t,o))||n.enumerable});return e},m={},y={$dispatcherGuard:()=>N,$makeReadOnly:()=>O,$reset:()=>M,$structuralCheck:()=>j,c:()=>$,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>I,useRenderCounter:()=>L};for(var h in y)s(m,h,{get:y[h],enumerable:!0});e.exports=d(s({},"__esModule",{value:!0}),m);var g=(o=null!=(n=r("C"))?i(p(n)):{},d(n&&n.__esModule?o:s(o,"default",{value:n,enumerable:!0}),n)),{useRef:b,useEffect:v,isValidElement:w}=g,E=null!=(a=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,R=Symbol.for("react.memo_cache_sentinel"),$="function"==typeof(null==(l=g.__COMPILER_RUNTIME)?void 0:l.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=R;return t[R]=!0,t},[])},k={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{k[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 _=null;function C(e){return E.ReactCurrentDispatcher.current=e,E.ReactCurrentDispatcher.current}k.useMemoCache=e=>{if(null!=_)return _.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var S=[];function N(e){let t=E.ReactCurrentDispatcher.current;if(0===e){if(S.push(t),1===S.length&&(_=t),t===k)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.");C(k)}else if(1===e){let e=S.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===S.length&&(_=null),C(e)}else if(2===e)S.push(t),C(_);else if(3===e){let e=S.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");C(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function M(e){for(let t=0;t<e.length;t++)e[t]=R}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var I=new Map;function x(){for(let e of I.values())e.forEach(e=>{e.count=0})}function L(e){let t=b(null);null!=t.current&&(t.current.count+=1),v(()=>{if(null==t.current){let r,n={count:0};null==(r=I.get(e))&&(r=new Set,I.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=I.get(e))&&n.delete(r))}})}var T=new Set;function j(e,t,r,n,o,a){function l(e,t,l,i){let s=`${n}:${a} [${o}] ${r}${l} changed from ${e} to ${t} at depth ${i}`;T.has(s)||(T.add(s),console.error(s))}!function e(t,r,n,o){if(!(o>2)){if(t!==r)if(typeof t!=typeof r)l(`type ${typeof t}`,`type ${typeof r}`,n,o);else if("object"==typeof t){let a=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)l("null",`type ${typeof r}`,n,o);else if(null===r)l(`type ${typeof t}`,"null",n,o);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)l(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,o);else for(let[a,i]of t)r.has(a)?e(i,r.get(a),`${n}.get(${a})`,o+1):l(`Map instance with key ${a}`,`Map instance without key ${a}`,n,o);else l("Map instance","other value",n,o);else if(r instanceof Map)l("other value","Map instance",n,o);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)l(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,o);else for(let e of r)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,n,o);else l("Set instance","other value",n,o);else if(r instanceof Set)l("other value","Set instance",n,o);else if(a||i)if(a!==i)l(`type ${a?"array":"object"}`,`type ${i?"array":"object"}`,n,o);else if(t.length!==r.length)l(`array with length ${t.length}`,`array with length ${r.length}`,n,o);else for(let a=0;a<t.length;a++)e(t[a],r[a],`${n}[${a}]`,o+1);else if(w(t)||w(r))w(t)!==w(r)?l(`type ${w(t)?"React element":"object"}`,`type ${w(r)?"React element":"object"}`,n,o):t.type!==r.type?l(`React element of type ${t.type}`,`React element of type ${r.type}`,n,o):e(t.props,r.props,`[props of ${n}]`,o+1);else{for(let e in r)e in t||l(`object without key ${e}`,`object with key ${e}`,n,o);for(let a in t)a in r?e(t[a],r[a],`${n}.${a}`,o+1):l(`object with key ${a}`,`object without key ${a}`,n,o)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,o):t!==r&&l(t,r,n,o)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,o=new WeakMap;function a(e,t,r){let a=t,l=r;if("object"==typeof a&&null!==a&&"$$typeof"in a&&a.$$typeof===Symbol.for("react.context")&&"Provider"in a&&(a=a.Provider),"function"==typeof a&&null!=l.ref&&!a.prototype?.isReactComponent){let t=a,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let o=r.get(t);o||((o=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,o)),a=o}if("string"==typeof a&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof a)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in l&&(l={...l,[t]:l[e]},delete l[e]);return"string"==typeof a&&null!=l.ref&&(a=function(e,t){let r=o.get(e);r||(r=new Map,o.set(e,r));let n=r.get(t);if(n)return n;let a=e.forwardRef((r,n)=>{let o=e.useRef(null);if(!o.current||o.current.original!==n){let e;o.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:o.current.callback})});return a.displayName=`CanvasHost(${t})`,r.set(t,a),a}(e,a)),{type:a,props:l}}function l(e){let t=(t,r,n)=>{let o=a(e,t,r??{});return e.createElement(o.type,void 0===n?o.props:{...o.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let o=a(e,t,r??{}),{children:l,...i}=o.props;return e.createElement(o.type,void 0===n?i:{...i,key:n},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let o=a(e,t,r??{});return e.createElement(o.type,o.props,...n)},cloneElement:(t,r,...n)=>{let o=e.cloneElement(t,r??void 0,...n),l=o.ref,i=a(e,o.type,{...o.props,ref:l});return i.type===o.type&&"string"!=typeof o.type?o:e.createElement(i.type,{...i.props,key:o.key})}}}r.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:o,Component:a,Fragment:l,Profiler:i,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:f,cloneElement:d,createContext:m,createElement:y,createFactory:h,createRef:g,forwardRef:b,isValidElement:v,lazy:w,memo:E,startTransition:R,unstable_act:$,useCallback:k,useContext:_,useDebugValue:C,useDeferredValue:S,useEffect:N,useId:M,useImperativeHandle:O,useInsertionEffect:I,useLayoutEffect:x,useMemo:L,useReducer:T,useRef:j,useState:D,useSyncExternalStore:P,useTransition:A,version:z,use:W}=n;r.d(t,{},{Children:o,Component:a,Fragment:l,Profiler:i,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:f,cloneElement:d,createContext:m,createElement:y,createFactory:h,createRef:g,default:n,forwardRef:b,isValidElement:v,lazy:w,memo:E,startTransition:R,unstable_act:$,use:W,useCallback:k,useContext:_,useDebugValue:C,useDeferredValue:S,useEffect:N,useId:M,useImperativeHandle:O,useInsertionEffect:I,useLayoutEffect:x,useMemo:L,useReducer:T,useRef:j,useState:D,useSyncExternalStore:P,useTransition:A,version:z})}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t,n)=>{var o=(t,n)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,[n]:t[o]})};o(t,"get"),o(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:o}=(0,r("p").MA)(window.React);var a=r("vD");let l=window.WallarmDS.Text,i=window.WallarmDS.Overlay;var s=r("C");let c=[{name:"Basic",story:()=>{let t,r=(0,a.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(i,{}),r[0]=t):t=r[0],t},meta:{title:"Primitives/Overlay",component:i,parameters:{layout:"fullscreen",docs:{description:{component:"The house scrim — a fixed, dimmed, lightly blurred layer that mutes the page behind an elevated surface. `Dialog`, `Drawer` and `Tour` render it for you, so reach for those; a popover, tooltip or dropdown is non-modal and takes no scrim at all. It is presentation only: no focus trap, no click-to-dismiss, no scroll lock, and no `className`."}}},decorators:[r=>t("div",{className:"p-24",children:[e(l,{children:'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.'}),e(r,{})]})]}}];function u({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},o="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,a=()=>s.default.createElement(o,n),l={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=a;a=()=>e(t,l)}return s.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},s.default.createElement("h2",{className:"text-sm mb-12"},e.name),s.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(s.default.createElement(window.WallarmDS.Root,null,c.map((e,t)=>s.default.createElement(u,{key:t,entry:e})))),t}}})();