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

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

@@ -0,0 +1,492 @@
+An inline message bound to one part of the screen, which stays until the state changes or the reader dismisses it — reach for `Banner` when the message would still matter on another page, `Toast` for a transient confirmation, and the field’s own error for a single invalid input. `color` carries the meaning and `AlertIcon` takes its icon from it, so the pair is not yours to mix; `primary` is the neutral default for a notice with no status to encode.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `color` | `"primary" \| "destructive" \| "info" \| "warning" \| "success"` | no | `primary` | Color variant of the alert |
+| `min-width` | `number \| undefined` | no | `ALERT_MIN_WIDTH` | Minimum width in pixels (default: 256) |
+| `max-width` | `number \| undefined` | no | `ALERT_MAX_WIDTH` | Maximum width in pixels (default: 980) |
+| `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 | — |  |
+
+## Sub-components
+
+- `WallarmDS.AlertClose` — `AlertCloseProps` in the declaration bundle.
+- `WallarmDS.AlertContent` — `AlertContentProps` in the declaration bundle.
+- `WallarmDS.AlertControls` — `AlertControlsProps` in the declaration bundle.
+- `WallarmDS.AlertDescription` — `AlertDescriptionProps` in the declaration bundle.
+- `WallarmDS.AlertIcon` — `AlertIconProps` in the declaration bundle.
+- `WallarmDS.AlertTitle` — `AlertTitleProps` in the declaration bundle.
+
+## Stories
+
+### AllColors
+
+The five colours with the icon each implies: neutral `primary` for a general notice, then destructive, info, warning and success for real status.
+
+Source: Alert/Alert.stories.tsx#AllColors
+
+### TitleOnly
+
+A title on its own is a complete alert. Add a description only when it says something the title does not.
+
+Source: Alert/Alert.stories.tsx#TitleOnly
+
+### WithCloseButton
+
+`AlertClose` gives the reader a way out — add it where dismissing is reasonable, and leave it off while the condition still holds.
+
+Source: Alert/Alert.stories.tsx#WithCloseButton
+
+### WithControls
+
+`AlertControls` as a direct child of `Alert` puts the actions top-right, which is what a wide alert wants. The buttons are always `secondary` and `small`, neutral or destructive to match the alert, never a solid primary.
+
+Source: Alert/Alert.stories.tsx#WithControls
+
+### WithBottomActions
+
+The same controls nested inside `AlertContent` drop below the text instead, which is what a narrow alert wants. Placement follows the width rather than a rule.
+
+Source: Alert/Alert.stories.tsx#WithBottomActions
+
+### MinMaxWidth
+
+Each row puts the alert in a container that crosses one of its bounds, since
+neither is visible in a container that sits between them. The alert has no width
+of its own: it takes the container's, clamped between 256 and 980px.
+
+Source: Alert/Alert.stories.tsx#MinMaxWidth
+
+### MaxLines
+
+`lineClamp` is opt-in: without it long text wraps freely, and with it the text truncates and the full string moves into a tooltip. Four lines is the usual cap.
+
+Source: Alert/Alert.stories.tsx#MaxLines
+
+### WithCode
+
+An inline `Code` line inside the content, for the error code or the command that failed — the one piece of rich content an alert is built to carry.
+
+Source: Alert/Alert.stories.tsx#WithCode
+
+## Story sources
+
+### Alert/Alert.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Button } from '../Button';
+import { Code } from '../Code';
+import { Alert, type AlertProps } from './Alert';
+import { AlertClose } from './AlertClose';
+import { AlertContent } from './AlertContent';
+import { AlertControls } from './AlertControls';
+import { AlertDescription } from './AlertDescription';
+import { AlertIcon } from './AlertIcon';
+import { AlertTitle } from './AlertTitle';
+
+const DESCRIPTION = [
+  'An inline message bound to one part of the screen, which stays until the state changes or the reader dismisses it — reach for `Banner` when the message would still matter on another page, `Toast` for a transient confirmation, and the field’s own error for a single invalid input.',
+  '`color` carries the meaning and `AlertIcon` takes its icon from it, so the pair is not yours to mix; `primary` is the neutral default for a notice with no status to encode.',
+].join(' ');
+
+const meta = {
+  title: 'Messaging/Alert',
+  component: Alert,
+  subcomponents: {
+    AlertClose,
+    AlertContent,
+    AlertControls,
+    AlertDescription,
+    AlertIcon,
+    AlertTitle,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'destructive', 'info', 'warning', 'success'],
+      description: 'Color variant of the alert',
+    },
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+
+/** The five colours with the icon each implies: neutral `primary` for a general notice, then destructive, info, warning and success for real status. */
+export const AllColors: StoryFn<AlertProps> = () => (
+  <div className='flex flex-col gap-16 w-[600px]'>
+    <Alert color='primary'>
+      <AlertIcon />
+      <AlertContent>
+        <AlertTitle>Primary Alert</AlertTitle>
+        <AlertDescription>This is a neutral alert for general information.</AlertDescription>
+      </AlertContent>
+    </Alert>
+
+    <Alert color='destructive'>
+      <AlertIcon />
+      <AlertContent>
+        <AlertTitle>Destructive Alert</AlertTitle>
+        <AlertDescription>This alert indicates an error or dangerous action.</AlertDescription>
+      </AlertContent>
+    </Alert>
+
+    <Alert color='info'>
+      <AlertIcon />
+      <AlertContent>
+        <AlertTitle>Info Alert</AlertTitle>
+        <AlertDescription>This alert provides informational content to the user.</AlertDescription>
+      </AlertContent>
+    </Alert>
+
+    <Alert color='warning'>
+      <AlertIcon />
+      <AlertContent>
+        <AlertTitle>Warning Alert</AlertTitle>
+        <AlertDescription>This alert warns the user about potential issues.</AlertDescription>
+      </AlertContent>
+    </Alert>
+
+    <Alert color='success'>
+      <AlertIcon />
+      <AlertContent>
+        <AlertTitle>Success Alert</AlertTitle>
+        <AlertDescription>This alert confirms a successful action or operation.</AlertDescription>
+      </AlertContent>
+    </Alert>
+  </div>
+);
+
+/** A title on its own is a complete alert. Add a description only when it says something the title does not. */
+export const TitleOnly: StoryFn<AlertProps> = () => {
+  return (
+    <div className='flex flex-col gap-16 w-[600px]'>
+      <Alert color='primary'>
+        <AlertIcon />
+        <AlertContent>
+          <AlertTitle>Alert with title only</AlertTitle>
+        </AlertContent>
+      </Alert>
+
+      <Alert color='info'>
+        <AlertIcon />
+        <AlertContent>
+          <AlertTitle>Information message without description</AlertTitle>
+        </AlertContent>
+      </Alert>
+    </div>
+  );
+};
+
+/** `AlertClose` gives the reader a way out — add it where dismissing is reasonable, and leave it off while the condition still holds. */
+export const WithCloseButton: StoryFn<AlertProps> = () => {
+  const [showInfo, setShowInfo] = useState(true);
+  const [showWarning, setShowWarning] = useState(true);
+
+  return (
+    <div className='flex flex-col gap-16 w-[600px]'>
+      {showInfo && (
+        <Alert color='info'>
+          <AlertIcon />
+          <AlertContent>
+            <AlertTitle>Dismissable Alert</AlertTitle>
+            <AlertDescription>This alert can be closed by clicking the X button.</AlertDescription>
+          </AlertContent>
+          <AlertClose onClick={() => setShowInfo(false)} />
+        </Alert>
+      )}
+
+      {showWarning && (
+        <Alert color='warning'>
+          <AlertIcon />
+          <AlertContent>
+            <AlertTitle>Warning with close</AlertTitle>
+          </AlertContent>
+          <AlertClose onClick={() => setShowWarning(false)} />
+        </Alert>
+      )}
+    </div>
+  );
+};
+
+/** `AlertControls` as a direct child of `Alert` puts the actions top-right, which is what a wide alert wants. The buttons are always `secondary` and `small`, neutral or destructive to match the alert, never a solid primary. */
+export const WithControls: StoryFn<AlertProps> = () => {
+  return (
+    <div className='flex flex-col gap-16 w-[600px]'>
+      <Alert color='info'>
+        <AlertIcon />
+        <AlertContent>
+          <AlertTitle>Alert with Two Action Buttons</AlertTitle>
+          <AlertDescription>
+            This alert has two action buttons on the right side without a close button.
+          </AlertDescription>
+        </AlertContent>
+        <AlertControls>
+          <Button variant='secondary' color='neutral' size='small'>
+            Learn more
+          </Button>
+          <Button variant='secondary' color='neutral' size='small'>
+            Dismiss
+          </Button>
+        </AlertControls>
+      </Alert>
+
+      <Alert color='info'>
+        <AlertIcon />
+        <AlertContent>
+          <AlertTitle>Alert with Actions and Close</AlertTitle>
+          <AlertDescription>This alert has action buttons and a close button.</AlertDescription>
+        </AlertContent>
+        <AlertControls>
+          <Button variant='secondary' color='neutral' size='small'>
+            Learn more
+          </Button>
+        </AlertControls>
+        <AlertClose />
+      </Alert>
+
+      <Alert color='destructive'>
+        <AlertIcon />
+        <AlertContent>
+          <AlertTitle>Critical Error</AlertTitle>
+          <AlertDescription>An error occurred that requires your attention.</AlertDescription>
+        </AlertContent>
+        <AlertControls>
+          <Button variant='secondary' color='destructive' size='small'>
+            Fix now
+          </Button>
+        </AlertControls>
+        <AlertClose />
+      </Alert>
+    </div>
+  );
+};
+
+/** The same controls nested inside `AlertContent` drop below the text instead, which is what a narrow alert wants. Placement follows the width rather than a rule. */
+export const WithBottomActions: StoryFn<AlertProps> = () => {
+  return (
+    <div className='flex flex-col gap-16 w-[600px]'>
+      <Alert color='info'>
+        <AlertIcon />
+        <AlertContent>
+          <AlertTitle>Alert with Bottom Actions</AlertTitle>
+          <AlertDescription>
+            This alert has action buttons at the bottom of the content area.
+          </AlertDescription>
+          <AlertControls>
+            <Button variant='secondary' color='neutral' size='small'>
+              Primary Action
+            </Button>
+            <Button variant='secondary' color='neutral' size='small'>
+              Secondary
+            </Button>
+          </AlertControls>
+        </AlertContent>
+        <AlertClose />
+      </Alert>
+
+      <Alert color='destructive'>
+        <AlertIcon />
+        <AlertContent>
+          <AlertTitle>Destructive Alert with Actions</AlertTitle>
+          <AlertDescription>
+            This error requires immediate action. Please review and take necessary steps.
+          </AlertDescription>
+          <AlertControls>
+            <Button variant='secondary' color='destructive' size='small'>
+              Delete
+            </Button>
+            <Button variant='secondary' color='neutral' size='small'>
+              Cancel
+            </Button>
+          </AlertControls>
+        </AlertContent>
+      </Alert>
+    </div>
+  );
+};
+
+/**
+ * Each row puts the alert in a container that crosses one of its bounds, since
+ * neither is visible in a container that sits between them. The alert has no width
+ * of its own: it takes the container's, clamped between 256 and 980px.
+ */
+export const MinMaxWidth: StoryFn<AlertProps> = () => {
+  const edge = 'border border-dashed border-border-primary';
+
+  return (
+    <div className='flex flex-col gap-24'>
+      <div>
+        <p className='sb-annotation mb-8'>
+          200px container — holds its 256px minimum and overflows
+        </p>
+        <div className={`w-[200px] ${edge}`}>
+          <Alert color='info'>
+            <AlertIcon />
+            <AlertContent>
+              <AlertTitle>Short</AlertTitle>
+            </AlertContent>
+          </Alert>
+        </div>
+      </div>
+
+      <div>
+        <p className='sb-annotation mb-8'>600px container — fills it</p>
+        <div className={`w-[600px] ${edge}`}>
+          <Alert color='warning'>
+            <AlertIcon />
+            <AlertContent>
+              <AlertTitle>
+                This is a very long alert title that demonstrates the maximum width behavior of the
+                component
+              </AlertTitle>
+              <AlertDescription>
+                This is an extended description that shows how the alert handles longer content, and
+                wraps within whatever width the container gives it.
+              </AlertDescription>
+            </AlertContent>
+            <AlertClose />
+          </Alert>
+        </div>
+      </div>
+
+      <div className='overflow-x-auto'>
+        <p className='sb-annotation mb-8'>1100px container — stops at the 980px ceiling</p>
+        <div className={`w-[1100px] ${edge}`}>
+          <Alert color='primary'>
+            <AlertIcon />
+            <AlertContent>
+              <AlertTitle>
+                Past 980px the alert stops widening and leaves the rest of the container empty
+              </AlertTitle>
+              <AlertDescription>
+                A line of text long enough to reach the ceiling, so the gap on the right is the
+                ceiling rather than the content running out.
+              </AlertDescription>
+            </AlertContent>
+            <AlertClose />
+          </Alert>
+        </div>
+      </div>
+
+      <div>
+        <p className='sb-annotation mb-8'>600px container — maxWidth 500 brings the ceiling down</p>
+        <div className={`w-[600px] ${edge}`}>
+          <Alert color='success' maxWidth={500}>
+            <AlertIcon />
+            <AlertContent>
+              <AlertTitle>
+                This is a very long alert title that demonstrates the custom maximum width behavior
+              </AlertTitle>
+              <AlertDescription>
+                This alert has a custom maxWidth of 500px set via prop.
+              </AlertDescription>
+            </AlertContent>
+            <AlertClose />
+          </Alert>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+MinMaxWidth.parameters = { layout: 'padded' };
+
+/** `lineClamp` is opt-in: without it long text wraps freely, and with it the text truncates and the full string moves into a tooltip. Four lines is the usual cap. */
+export const MaxLines: StoryFn<AlertProps> = () => {
+  const longTitle =
+    'This is a very long title that should be truncated after a certain number of lines. It keeps going and going to demonstrate the line clamp functionality. We need even more text to ensure it exceeds the maximum number of lines allowed.';
+  const longDescription =
+    'This is a very long description that demonstrates the text truncation feature. The description can be quite lengthy and should be limited to a maximum of 4 lines by default. When the text exceeds this limit, it will be truncated with an ellipsis. This behavior ensures that the alert remains compact and does not take up too much vertical space on the page. Additional text is added here to make sure the truncation is visible.';
+
+  return (
+    <div className='flex flex-col gap-16 w-600'>
+      <div>
+        <p className='sb-annotation mb-8'>lineClamp 4</p>
+        <Alert color='info'>
+          <AlertIcon />
+          <AlertContent>
+            <AlertTitle lineClamp={4}>{longTitle}</AlertTitle>
+            <AlertDescription lineClamp={4}>{longDescription}</AlertDescription>
+          </AlertContent>
+        </Alert>
+      </div>
+
+      <div>
+        <p className='sb-annotation mb-8'>lineClamp 2</p>
+        <Alert color='warning'>
+          <AlertIcon />
+          <AlertContent>
+            <AlertTitle lineClamp={2}>{longTitle}</AlertTitle>
+            <AlertDescription lineClamp={2}>{longDescription}</AlertDescription>
+          </AlertContent>
+        </Alert>
+      </div>
+
+      <div>
+        <p className='sb-annotation mb-8'>no clamp</p>
+        <Alert color='success'>
+          <AlertIcon />
+          <AlertContent>
+            <AlertTitle>{longTitle}</AlertTitle>
+            <AlertDescription>{longDescription}</AlertDescription>
+          </AlertContent>
+        </Alert>
+      </div>
+    </div>
+  );
+};
+
+/** An inline `Code` line inside the content, for the error code or the command that failed — the one piece of rich content an alert is built to carry. */
+export const WithCode: StoryFn<AlertProps> = () => (
+  <div className='flex flex-col gap-16 w-700'>
+    <Alert color='destructive'>
+      <AlertIcon />
+      <AlertContent>
+        <AlertTitle>Message goes here</AlertTitle>
+        <AlertDescription>Description goes here</AlertDescription>
+        <div className='pt-8'>
+          <Code size='s' color='destructive'>
+            Optional code output
+          </Code>
+        </div>
+      </AlertContent>
+    </Alert>
+
+    <Alert color='destructive'>
+      <AlertIcon />
+      <AlertContent>
+        <AlertTitle>Syntax Error in Configuration</AlertTitle>
+        <AlertDescription>An error occurred while parsing the configuration file.</AlertDescription>
+
+        <div className='pt-8'>
+          <Code size='s' color='destructive'>
+            Error: Unexpected token at line 42, column 15
+          </Code>
+        </div>
+      </AlertContent>
+      <AlertClose />
+    </Alert>
+  </div>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Messaging" 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/Alert/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 l,a,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,h=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,u=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of m(t))d.call(e,o)||o===r||c(e,o,{get:()=>t[o],enumerable:!(n=s(t,o))||n.enumerable});return e},f={},p={$dispatcherGuard:()=>$,$makeReadOnly:()=>T,$reset:()=>A,$structuralCheck:()=>W,c:()=>x,clearRenderCounterRegistry:()=>M,renderCounterRegistry:()=>k,useRenderCounter:()=>D};for(var y in p)c(f,y,{get:p[y],enumerable:!0});e.exports=u(c({},"__esModule",{value:!0}),f);var b=(o=null!=(n=r("C"))?i(h(n)):{},u(n&&n.__esModule?o:c(o,"default",{value:n,enumerable:!0}),n)),{useRef:_,useEffect:g,isValidElement:v}=b,w=null!=(l=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:b.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,S=Symbol.for("react.memo_cache_sentinel"),x="function"==typeof(null==(a=b.__COMPILER_RUNTIME)?void 0:a.c)?b.__COMPILER_RUNTIME.c:function(e){return b.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=S;return t[S]=!0,t},[])},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 E=null;function C(e){return w.ReactCurrentDispatcher.current=e,w.ReactCurrentDispatcher.current}N.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var R=[];function $(e){let t=w.ReactCurrentDispatcher.current;if(0===e){if(R.push(t),1===R.length&&(E=t),t===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.");C(N)}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&&(E=null),C(e)}else if(2===e)R.push(t),C(E);else if(3===e){let e=R.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 A(e){for(let t=0;t<e.length;t++)e[t]=S}function T(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var k=new Map;function M(){for(let e of k.values())e.forEach(e=>{e.count=0})}function D(e){let t=_(null);null!=t.current&&(t.current.count+=1),g(()=>{if(null==t.current){let r,n={count:0};null==(r=k.get(e))&&(r=new Set,k.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=k.get(e))&&n.delete(r))}})}var O=new Set;function W(e,t,r,n,o,l){function a(e,t,a,i){let c=`${n}:${l} [${o}] ${r}${a} changed from ${e} to ${t} at depth ${i}`;O.has(c)||(O.add(c),console.error(c))}!function e(t,r,n,o){if(!(o>2)){if(t!==r)if(typeof t!=typeof r)a(`type ${typeof t}`,`type ${typeof r}`,n,o);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)a("null",`type ${typeof r}`,n,o);else if(null===r)a(`type ${typeof t}`,"null",n,o);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)a(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,o);else for(let[l,i]of t)r.has(l)?e(i,r.get(l),`${n}.get(${l})`,o+1):a(`Map instance with key ${l}`,`Map instance without key ${l}`,n,o);else a("Map instance","other value",n,o);else if(r instanceof Map)a("other value","Map instance",n,o);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)a(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,o);else for(let e of r)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,n,o);else a("Set instance","other value",n,o);else if(r instanceof Set)a("other value","Set instance",n,o);else if(l||i)if(l!==i)a(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,n,o);else if(t.length!==r.length)a(`array with length ${t.length}`,`array with length ${r.length}`,n,o);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,o+1);else if(v(t)||v(r))v(t)!==v(r)?a(`type ${v(t)?"React element":"object"}`,`type ${v(r)?"React element":"object"}`,n,o):t.type!==r.type?a(`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||a(`object without key ${e}`,`object with key ${e}`,n,o);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,o+1):a(`object with key ${l}`,`object without key ${l}`,n,o)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&a(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,o):t!==r&&a(t,r,n,o)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,o=new WeakMap;function l(e,t,r){let l=t,a=r;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,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)),l=o}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 r=o.get(e);r||(r=new Map,o.set(e,r));let n=r.get(t);if(n)return n;let l=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 l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:a}}function a(e){let t=(t,r,n)=>{let o=l(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=l(e,t,r??{}),{children:a,...i}=o.props;return e.createElement(o.type,void 0===n?i:{...i,key:n},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let o=l(e,t,r??{});return e.createElement(o.type,o.props,...n)},cloneElement:(t,r,...n)=>{let o=e.cloneElement(t,r??void 0,...n),a=o.ref,i=l(e,o.type,{...o.props,ref:a});return i.type===o.type&&"string"!=typeof o.type?o:e.createElement(i.type,{...i.props,key:o.key})}}}r.d(t,{MA:()=>a,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:o,Component:l,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:h,act:d,cloneElement:u,createContext:f,createElement:p,createFactory:y,createRef:b,forwardRef:_,isValidElement:g,lazy:v,memo:w,startTransition:S,unstable_act:x,useCallback:N,useContext:E,useDebugValue:C,useDeferredValue:R,useEffect:$,useId:A,useImperativeHandle:T,useInsertionEffect:k,useLayoutEffect:M,useMemo:D,useReducer:O,useRef:W,useState:I,useSyncExternalStore:j,useTransition:z,version:P,use:L}=n;r.d(t,{},{Children:o,Component:l,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:h,act:d,cloneElement:u,createContext:f,createElement:p,createFactory:y,createRef:b,default:n,forwardRef:_,isValidElement:g,lazy:v,memo:w,startTransition:S,unstable_act:x,use:L,useCallback:N,useContext:E,useDebugValue:C,useDeferredValue:R,useEffect:$,useId:A,useImperativeHandle:T,useInsertionEffect:k,useLayoutEffect:M,useMemo:D,useReducer:O,useRef:W,useState:I,useSyncExternalStore:j,useTransition:z,version:P})}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.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 l=r("vD"),a=r("C");let i=window.WallarmDS.Button,c=window.WallarmDS.Code,s=window.WallarmDS.Alert,m=window.WallarmDS.AlertClose,h=window.WallarmDS.AlertContent,d=window.WallarmDS.AlertControls,u=window.WallarmDS.AlertDescription,f=window.WallarmDS.AlertIcon,p=window.WallarmDS.AlertTitle,y={title:"Messaging/Alert",component:s,subcomponents:{AlertClose:m,AlertContent:h,AlertControls:d,AlertDescription:u,AlertIcon:f,AlertTitle:p},parameters:{layout:"centered",docs:{description:{component:"An inline message bound to one part of the screen, which stays until the state changes or the reader dismisses it — reach for `Banner` when the message would still matter on another page, `Toast` for a transient confirmation, and the field’s own error for a single invalid input. `color` carries the meaning and `AlertIcon` takes its icon from it, so the pair is not yours to mix; `primary` is the neutral default for a notice with no status to encode."}}},argTypes:{color:{control:{type:"select"},options:["primary","destructive","info","warning","success"],description:"Color variant of the alert"}}},b=()=>{let r,n,o,a,i,c,d,y,b,_,g,v,w=(0,l.c)(12);return w[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("p",{className:"sb-annotation mb-8",children:"200px container — holds its 256px minimum and overflows"}),w[0]=r):r=w[0],w[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(f,{}),w[1]=n):n=w[1],w[2]===Symbol.for("react.memo_cache_sentinel")?(o=t("div",{children:[r,e("div",{className:"w-[200px] border border-dashed border-border-primary",children:t(s,{color:"info",children:[n,e(h,{children:e(p,{children:"Short"})})]})})]}),a=e("p",{className:"sb-annotation mb-8",children:"600px container — fills it"}),w[2]=o,w[3]=a):(o=w[2],a=w[3]),w[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(f,{}),w[4]=i):i=w[4],w[5]===Symbol.for("react.memo_cache_sentinel")?(c=t("div",{children:[a,e("div",{className:"w-[600px] border border-dashed border-border-primary",children:t(s,{color:"warning",children:[i,t(h,{children:[e(p,{children:"This is a very long alert title that demonstrates the maximum width behavior of the component"}),e(u,{children:"This is an extended description that shows how the alert handles longer content, and wraps within whatever width the container gives it."})]}),e(m,{})]})})]}),w[5]=c):c=w[5],w[6]===Symbol.for("react.memo_cache_sentinel")?(d=e("p",{className:"sb-annotation mb-8",children:"1100px container — stops at the 980px ceiling"}),w[6]=d):d=w[6],w[7]===Symbol.for("react.memo_cache_sentinel")?(y=e(f,{}),w[7]=y):y=w[7],w[8]===Symbol.for("react.memo_cache_sentinel")?(b=t("div",{className:"overflow-x-auto",children:[d,e("div",{className:"w-[1100px] border border-dashed border-border-primary",children:t(s,{color:"primary",children:[y,t(h,{children:[e(p,{children:"Past 980px the alert stops widening and leaves the rest of the container empty"}),e(u,{children:"A line of text long enough to reach the ceiling, so the gap on the right is the ceiling rather than the content running out."})]}),e(m,{})]})})]}),_=e("p",{className:"sb-annotation mb-8",children:"600px container — maxWidth 500 brings the ceiling down"}),w[8]=b,w[9]=_):(b=w[8],_=w[9]),w[10]===Symbol.for("react.memo_cache_sentinel")?(g=e(f,{}),w[10]=g):g=w[10],w[11]===Symbol.for("react.memo_cache_sentinel")?(v=t("div",{className:"flex flex-col gap-24",children:[o,c,b,t("div",{children:[_,e("div",{className:"w-[600px] border border-dashed border-border-primary",children:t(s,{color:"success",maxWidth:500,children:[g,t(h,{children:[e(p,{children:"This is a very long alert title that demonstrates the custom maximum width behavior"}),e(u,{children:"This alert has a custom maxWidth of 500px set via prop."})]}),e(m,{})]})})]})]}),w[11]=v):v=w[11],v};b.parameters={layout:"padded"};let _=[{name:"AllColors",story:()=>{let r,n,o,a,i,c,m,d,y,b,_=(0,l.c)(10);return _[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(f,{}),_[0]=r):r=_[0],_[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(s,{color:"primary",children:[r,t(h,{children:[e(p,{children:"Primary Alert"}),e(u,{children:"This is a neutral alert for general information."})]})]}),_[1]=n):n=_[1],_[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(f,{}),_[2]=o):o=_[2],_[3]===Symbol.for("react.memo_cache_sentinel")?(a=t(s,{color:"destructive",children:[o,t(h,{children:[e(p,{children:"Destructive Alert"}),e(u,{children:"This alert indicates an error or dangerous action."})]})]}),_[3]=a):a=_[3],_[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(f,{}),_[4]=i):i=_[4],_[5]===Symbol.for("react.memo_cache_sentinel")?(c=t(s,{color:"info",children:[i,t(h,{children:[e(p,{children:"Info Alert"}),e(u,{children:"This alert provides informational content to the user."})]})]}),_[5]=c):c=_[5],_[6]===Symbol.for("react.memo_cache_sentinel")?(m=e(f,{}),_[6]=m):m=_[6],_[7]===Symbol.for("react.memo_cache_sentinel")?(d=t(s,{color:"warning",children:[m,t(h,{children:[e(p,{children:"Warning Alert"}),e(u,{children:"This alert warns the user about potential issues."})]})]}),_[7]=d):d=_[7],_[8]===Symbol.for("react.memo_cache_sentinel")?(y=e(f,{}),_[8]=y):y=_[8],_[9]===Symbol.for("react.memo_cache_sentinel")?(b=t("div",{className:"flex flex-col gap-16 w-[600px]",children:[n,a,c,d,t(s,{color:"success",children:[y,t(h,{children:[e(p,{children:"Success Alert"}),e(u,{children:"This alert confirms a successful action or operation."})]})]})]}),_[9]=b):b=_[9],b},meta:y},{name:"TitleOnly",story:()=>{let r,n,o,a,i=(0,l.c)(4);return i[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(f,{}),i[0]=r):r=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(s,{color:"primary",children:[r,e(h,{children:e(p,{children:"Alert with title only"})})]}),i[1]=n):n=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(f,{}),i[2]=o):o=i[2],i[3]===Symbol.for("react.memo_cache_sentinel")?(a=t("div",{className:"flex flex-col gap-16 w-[600px]",children:[n,t(s,{color:"info",children:[o,e(h,{children:e(p,{children:"Information message without description"})})]})]}),i[3]=a):a=i[3],a},meta:y},{name:"WithCloseButton",story:()=>{let r,n,o,i=(0,l.c)(7),[c,d]=(0,a.useState)(!0),[y,b]=(0,a.useState)(!0);return i[0]!==c?(r=c&&t(s,{color:"info",children:[e(f,{}),t(h,{children:[e(p,{children:"Dismissable Alert"}),e(u,{children:"This alert can be closed by clicking the X button."})]}),e(m,{onClick:()=>d(!1)})]}),i[0]=c,i[1]=r):r=i[1],i[2]!==y?(n=y&&t(s,{color:"warning",children:[e(f,{}),e(h,{children:e(p,{children:"Warning with close"})}),e(m,{onClick:()=>b(!1)})]}),i[2]=y,i[3]=n):n=i[3],i[4]!==r||i[5]!==n?(o=t("div",{className:"flex flex-col gap-16 w-[600px]",children:[r,n]}),i[4]=r,i[5]=n,i[6]=o):o=i[6],o},meta:y},{name:"WithControls",story:()=>{let r,n,o,a,c,y,b,_,g,v=(0,l.c)(9);return v[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(f,{}),v[0]=r):r=v[0],v[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(h,{children:[e(p,{children:"Alert with Two Action Buttons"}),e(u,{children:"This alert has two action buttons on the right side without a close button."})]}),v[1]=n):n=v[1],v[2]===Symbol.for("react.memo_cache_sentinel")?(o=t(s,{color:"info",children:[r,n,t(d,{children:[e(i,{variant:"secondary",color:"neutral",size:"small",children:"Learn more"}),e(i,{variant:"secondary",color:"neutral",size:"small",children:"Dismiss"})]})]}),v[2]=o):o=v[2],v[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(f,{}),v[3]=a):a=v[3],v[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(h,{children:[e(p,{children:"Alert with Actions and Close"}),e(u,{children:"This alert has action buttons and a close button."})]}),v[4]=c):c=v[4],v[5]===Symbol.for("react.memo_cache_sentinel")?(y=t(s,{color:"info",children:[a,c,e(d,{children:e(i,{variant:"secondary",color:"neutral",size:"small",children:"Learn more"})}),e(m,{})]}),v[5]=y):y=v[5],v[6]===Symbol.for("react.memo_cache_sentinel")?(b=e(f,{}),v[6]=b):b=v[6],v[7]===Symbol.for("react.memo_cache_sentinel")?(_=t(h,{children:[e(p,{children:"Critical Error"}),e(u,{children:"An error occurred that requires your attention."})]}),v[7]=_):_=v[7],v[8]===Symbol.for("react.memo_cache_sentinel")?(g=t("div",{className:"flex flex-col gap-16 w-[600px]",children:[o,y,t(s,{color:"destructive",children:[b,_,e(d,{children:e(i,{variant:"secondary",color:"destructive",size:"small",children:"Fix now"})}),e(m,{})]})]}),v[8]=g):g=v[8],g},meta:y},{name:"WithBottomActions",story:()=>{let r,n,o,a,c,y,b,_,g=(0,l.c)(8);return g[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(f,{}),g[0]=r):r=g[0],g[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(p,{children:"Alert with Bottom Actions"}),o=e(u,{children:"This alert has action buttons at the bottom of the content area."}),g[1]=n,g[2]=o):(n=g[1],o=g[2]),g[3]===Symbol.for("react.memo_cache_sentinel")?(a=t(s,{color:"info",children:[r,t(h,{children:[n,o,t(d,{children:[e(i,{variant:"secondary",color:"neutral",size:"small",children:"Primary Action"}),e(i,{variant:"secondary",color:"neutral",size:"small",children:"Secondary"})]})]}),e(m,{})]}),g[3]=a):a=g[3],g[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(f,{}),g[4]=c):c=g[4],g[5]===Symbol.for("react.memo_cache_sentinel")?(y=e(p,{children:"Destructive Alert with Actions"}),b=e(u,{children:"This error requires immediate action. Please review and take necessary steps."}),g[5]=y,g[6]=b):(y=g[5],b=g[6]),g[7]===Symbol.for("react.memo_cache_sentinel")?(_=t("div",{className:"flex flex-col gap-16 w-[600px]",children:[a,t(s,{color:"destructive",children:[c,t(h,{children:[y,b,t(d,{children:[e(i,{variant:"secondary",color:"destructive",size:"small",children:"Delete"}),e(i,{variant:"secondary",color:"neutral",size:"small",children:"Cancel"})]})]})]})]}),g[7]=_):_=g[7],_},meta:y},{name:"MinMaxWidth",story:b,meta:y},{name:"MaxLines",story:()=>{let r,n,o,a,i,c,m,d,y,b=(0,l.c)(9);return b[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("p",{className:"sb-annotation mb-8",children:"lineClamp 4"}),b[0]=r):r=b[0],b[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(f,{}),b[1]=n):n=b[1],b[2]===Symbol.for("react.memo_cache_sentinel")?(o=t("div",{children:[r,t(s,{color:"info",children:[n,t(h,{children:[e(p,{lineClamp:4,children:"This is a very long title that should be truncated after a certain number of lines. It keeps going and going to demonstrate the line clamp functionality. We need even more text to ensure it exceeds the maximum number of lines allowed."}),e(u,{lineClamp:4,children:"This is a very long description that demonstrates the text truncation feature. The description can be quite lengthy and should be limited to a maximum of 4 lines by default. When the text exceeds this limit, it will be truncated with an ellipsis. This behavior ensures that the alert remains compact and does not take up too much vertical space on the page. Additional text is added here to make sure the truncation is visible."})]})]})]}),a=e("p",{className:"sb-annotation mb-8",children:"lineClamp 2"}),b[2]=o,b[3]=a):(o=b[2],a=b[3]),b[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(f,{}),b[4]=i):i=b[4],b[5]===Symbol.for("react.memo_cache_sentinel")?(c=t("div",{children:[a,t(s,{color:"warning",children:[i,t(h,{children:[e(p,{lineClamp:2,children:"This is a very long title that should be truncated after a certain number of lines. It keeps going and going to demonstrate the line clamp functionality. We need even more text to ensure it exceeds the maximum number of lines allowed."}),e(u,{lineClamp:2,children:"This is a very long description that demonstrates the text truncation feature. The description can be quite lengthy and should be limited to a maximum of 4 lines by default. When the text exceeds this limit, it will be truncated with an ellipsis. This behavior ensures that the alert remains compact and does not take up too much vertical space on the page. Additional text is added here to make sure the truncation is visible."})]})]})]}),m=e("p",{className:"sb-annotation mb-8",children:"no clamp"}),b[5]=c,b[6]=m):(c=b[5],m=b[6]),b[7]===Symbol.for("react.memo_cache_sentinel")?(d=e(f,{}),b[7]=d):d=b[7],b[8]===Symbol.for("react.memo_cache_sentinel")?(y=t("div",{className:"flex flex-col gap-16 w-600",children:[o,c,t("div",{children:[m,t(s,{color:"success",children:[d,t(h,{children:[e(p,{children:"This is a very long title that should be truncated after a certain number of lines. It keeps going and going to demonstrate the line clamp functionality. We need even more text to ensure it exceeds the maximum number of lines allowed."}),e(u,{children:"This is a very long description that demonstrates the text truncation feature. The description can be quite lengthy and should be limited to a maximum of 4 lines by default. When the text exceeds this limit, it will be truncated with an ellipsis. This behavior ensures that the alert remains compact and does not take up too much vertical space on the page. Additional text is added here to make sure the truncation is visible."})]})]})]})]}),b[8]=y):y=b[8],y},meta:y},{name:"WithCode",story:()=>{let r,n,o,a,i,d,y,b,_=(0,l.c)(8);return _[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(f,{}),_[0]=r):r=_[0],_[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(p,{children:"Message goes here"}),o=e(u,{children:"Description goes here"}),_[1]=n,_[2]=o):(n=_[1],o=_[2]),_[3]===Symbol.for("react.memo_cache_sentinel")?(a=t(s,{color:"destructive",children:[r,t(h,{children:[n,o,e("div",{className:"pt-8",children:e(c,{size:"s",color:"destructive",children:"Optional code output"})})]})]}),_[3]=a):a=_[3],_[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(f,{}),_[4]=i):i=_[4],_[5]===Symbol.for("react.memo_cache_sentinel")?(d=e(p,{children:"Syntax Error in Configuration"}),y=e(u,{children:"An error occurred while parsing the configuration file."}),_[5]=d,_[6]=y):(d=_[5],y=_[6]),_[7]===Symbol.for("react.memo_cache_sentinel")?(b=t("div",{className:"flex flex-col gap-16 w-700",children:[a,t(s,{color:"destructive",children:[i,t(h,{children:[d,y,e("div",{className:"pt-8",children:e(c,{size:"s",color:"destructive",children:"Error: Unexpected token at line 42, column 15"})})]}),e(m,{})]})]}),_[7]=b):b=_[7],b},meta:y}];function g({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,l=()=>a.default.createElement(o,n),i={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.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,_.map((e,t)=>a.default.createElement(g,{key:t,entry:e})))),t}}})();