@wallarm-org/design-system 3.4.0 → 3.4.1-rc-fix-data-display-category.2

package/dist/components/Tour/TourTitle.js

@@ -1,37 +1,39 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { forwardRef } from "react";
 import { Tour } from "@ark-ui/react";
 import { useTestId } from "../../utils/testId.js";
 import { Heading } from "../Heading/index.js";
 import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
-const TourTitle = /*#__PURE__*/ forwardRef((t0, ref)=>{
-    const $ = c(15);
+const TourTitle = (t0)=>{
+    const $ = c(16);
     let children;
     let props;
+    let ref;
     if ($[0] !== t0) {
-        ({ children, ...props } = t0);
+        ({ ref, children, ...props } = t0);
         $[0] = t0;
         $[1] = children;
         $[2] = props;
+        $[3] = ref;
     } else {
         children = $[1];
         props = $[2];
+        ref = $[3];
     }
     const testId = useTestId("title");
     let t1;
-    if ($[3] !== children) {
+    if ($[4] !== children) {
         t1 = /*#__PURE__*/ jsx(Heading, {
             size: "lg",
             weight: "medium",
             lineClamp: 2,
             children: children
         });
-        $[3] = children;
-        $[4] = t1;
-    } else t1 = $[4];
+        $[4] = children;
+        $[5] = t1;
+    } else t1 = $[5];
     let t2;
-    if ($[5] !== props || $[6] !== ref || $[7] !== t1 || $[8] !== testId) {
+    if ($[6] !== props || $[7] !== ref || $[8] !== t1 || $[9] !== testId) {
         t2 = /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
             children: /*#__PURE__*/ jsx(Tour.Title, {
                 ...props,
@@ -41,33 +43,33 @@ const TourTitle = /*#__PURE__*/ forwardRef((t0, ref)=>{
                 children: t1
             })
         });
-        $[5] = props;
-        $[6] = ref;
-        $[7] = t1;
-        $[8] = testId;
-        $[9] = t2;
-    } else t2 = $[9];
+        $[6] = props;
+        $[7] = ref;
+        $[8] = t1;
+        $[9] = testId;
+        $[10] = t2;
+    } else t2 = $[10];
     let t3;
-    if ($[10] !== children) {
+    if ($[11] !== children) {
         t3 = /*#__PURE__*/ jsx(OverflowTooltipContent, {
             children: children
         });
-        $[10] = children;
-        $[11] = t3;
-    } else t3 = $[11];
+        $[11] = children;
+        $[12] = t3;
+    } else t3 = $[12];
     let t4;
-    if ($[12] !== t2 || $[13] !== t3) {
+    if ($[13] !== t2 || $[14] !== t3) {
         t4 = /*#__PURE__*/ jsxs(OverflowTooltip, {
             children: [
                 t2,
                 t3
             ]
         });
-        $[12] = t2;
-        $[13] = t3;
-        $[14] = t4;
-    } else t4 = $[14];
+        $[13] = t2;
+        $[14] = t3;
+        $[15] = t4;
+    } else t4 = $[15];
     return t4;
-});
+};
 TourTitle.displayName = "TourTitle";
 export { TourTitle };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "3.3.0",
-  "generatedAt": "2026-10-22T07:21:43.495Z",
+  "version": "3.4.0",
+  "generatedAt": "2026-10-22T11:04:59.997Z",
   "components": [
     {
       "name": "Accordion",
@@ -19315,7 +19315,8 @@
             {
               "name": "size",
               "type": "{ small: string; medium: string; large: string; 'inline-edit': string; }",
-              "required": false
+              "required": false,
+              "defaultValue": "small"
             },
             {
               "name": "loading",
@@ -19355,12 +19356,14 @@
             {
               "name": "variant",
               "type": "{ primary: string; outline: string; ghost: string; secondary: string; }",
-              "required": false
+              "required": false,
+              "defaultValue": "primary"
             },
             {
               "name": "color",
               "type": "string | undefined",
-              "required": false
+              "required": false,
+              "defaultValue": "brand"
             },
             {
               "name": "disabled",
@@ -20067,7 +20070,8 @@
             {
               "name": "size",
               "type": "{ small: string; medium: string; large: string; 'inline-edit': string; }",
-              "required": false
+              "required": false,
+              "defaultValue": "small"
             },
             {
               "name": "loading",
@@ -20107,12 +20111,14 @@
             {
               "name": "variant",
               "type": "{ primary: string; outline: string; ghost: string; secondary: string; }",
-              "required": false
+              "required": false,
+              "defaultValue": "ghost"
             },
             {
               "name": "color",
               "type": "string | undefined",
-              "required": false
+              "required": false,
+              "defaultValue": "neutral"
             },
             {
               "name": "disabled",
@@ -22234,7 +22240,7 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "({ ...args }) => {\n  // `data-last-click` records which target handled the click. It renders nothing,\n  // and it is what the click-isolation e2e asserts on — the story used to prove\n  // the same thing by writing to the console.\n  const [lastClick, setLastClick] = useState<'card' | 'button' | 'none'>('none');\n\n  return (\n    <Card\n      onClick={e => {\n        onCardClick(e);\n        setLastClick('card');\n      }}\n      data-last-click={lastClick}\n      {...args}\n    >\n      <CardHeader>\n        <CardTitle>Card title</CardTitle>\n        <Badge size='medium' type='solid' color='slate'>\n          Badge\n        </Badge>\n      </CardHeader>\n\n      <CardContent>Card description</CardContent>\n\n      <CardFooter>\n        <Button\n          variant='secondary'\n          color='neutral'\n          onClick={e => {\n            onButtonClick(e);\n            setLastClick('button');\n          }}\n        >\n          Button\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}",
+          "code": "({ ...args }) => {\n  // `data-last-click` records which target handled the click. It renders nothing,\n  // and it is what the click-isolation e2e asserts on — the story used to prove\n  // the same thing by writing to the console.\n  const [lastClick, setLastClick] = useState<'card' | 'button' | 'none'>('none');\n\n  return (\n    <Card\n      onClick={e => {\n        onCardClick(e);\n        setLastClick('card');\n      }}\n      data-last-click={lastClick}\n      {...args}\n    >\n      <CardHeader>\n        <CardTitle>Card title</CardTitle>\n        <Badge size='medium' type='solid' color='slate'>\n          Badge\n        </Badge>\n      </CardHeader>\n\n      <CardContent>Card description</CardContent>\n\n      <CardFooter>\n        <Button\n          variant='secondary'\n          color='neutral'\n          onClick={(e: MouseEvent<HTMLButtonElement>) => {\n            onButtonClick(e);\n            setLastClick('button');\n          }}\n        >\n          Button\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}",
           "description": "The full stack — `CardHeader` with a `CardTitle`, `CardContent`, and a `CardFooter`\nfor actions — carrying a handler, so the footer button and the card are two\nseparate targets."
         },
         {
@@ -52526,7 +52532,7 @@
         },
         {
           "name": "Picked",
-          "code": "() => (\n  <FilterCascade\n    label='Scope'\n    collection={longCollection}\n    loadChildren={async () => [{ kind: 'application', uid: 'checkout', name: 'checkout-api' }]}\n    defaultValue={['eu1', 'checkout']}\n    data-testid='filter-cascade-picked'\n  >\n    <FilterCascadeTrigger />\n    <FilterCascadeContent />\n  </FilterCascade>\n)",
+          "code": "() => (\n  <FilterCascade\n    label='Scope'\n    collection={longCollection}\n    loadChildren={async (): Promise<Scope[]> => [\n      { kind: 'application', uid: 'checkout', name: 'checkout-api' },\n    ]}\n    defaultValue={['eu1', 'checkout']}\n    data-testid='filter-cascade-picked'\n  >\n    <FilterCascadeTrigger />\n    <FilterCascadeContent />\n  </FilterCascade>\n)",
           "description": "A picked application: the trigger reads the path; only the deployment segment truncates."
         },
         {
@@ -108618,7 +108624,7 @@
         {
           "name": "Basic",
           "code": "args => (\n  <Slider {...args}>\n    <SliderControl>\n      <SliderThumb aria-label='Value' />\n    </SliderControl>\n  </Slider>\n)",
-          "description": "One handle on a track. Arrow keys move by `step`, Page keys jump further, and Home and End go\nto the bounds — worth knowing before reaching for a paired input."
+          "description": "One handle on a track: arrow keys move by `step`, Page keys jump further, and Home and End go\nto the bounds. `SliderThumb` is the real interactive node, so `aria-label` and analytics\nattributes go on it, and its focus reuses the hover emphasis instead of drawing a ring."
         },
         {
           "name": "Range",
@@ -108638,12 +108644,12 @@
         {
           "name": "Labeled",
           "code": "args => (\n  <Slider {...args} min={0} max={100} step={50} defaultValue={[50]}>\n    <SliderControl>\n      <SliderThumb aria-label='Risk level' />\n      <SliderMarks\n        marks={[\n          { value: 0, label: 'Low' },\n          { value: 50, label: 'Medium' },\n          { value: 100, label: 'High' },\n        ]}\n      />\n    </SliderControl>\n  </Slider>\n)",
-          "description": "Marks carrying text, for a scale whose steps are named rather than numeric. The handle snaps\nto the labelled positions, so this is a choice among rungs rather than a magnitude."
+          "description": "Marks carrying text, for a scale whose steps are named rather than numeric. The handle snaps\nto the labelled positions and announces the label rather than the number, so keep it to a\nhandful of rungs."
         },
         {
           "name": "WithTooltip",
           "code": "args => (\n  <Slider {...args}>\n    <SliderControl>\n      <SliderThumb aria-label='Value' tooltip />\n    </SliderControl>\n  </Slider>\n)",
-          "description": "`tooltip` on a `SliderThumb` shows the value while dragging, then hides it. It suits a value\nonly checked mid-gesture; anything needed afterwards wants a persistent readout."
+          "description": "`tooltip` on a `SliderThumb` shows the value while dragging, then hides it. It suits a value\nonly checked mid-gesture; anything needed afterwards wants a persistent readout instead,\nnever both."
         },
         {
           "name": "WithInput",
@@ -126173,37 +126179,37 @@
         },
         {
           "name": "UpdateLoadingToSuccess",
-          "code": "() => {\n  const toast = useToast();\n  const id = useRef<string | undefined>(undefined);\n\n  const createToast = (duration?: number) => {\n    id.current = toast.create({\n      title: 'Loading',\n      description: 'Loading ...',\n      type: 'loading',\n      variant: 'extended',\n      duration,\n    });\n  };\n\n  const updateToast = (duration?: number) => {\n    if (!id.current) {\n      return;\n    }\n\n    toast.update({\n      id: id.current,\n      title: 'Success',\n      description: 'Success!',\n      type: 'success',\n      variant: 'extended',\n      duration,\n    });\n  };\n\n  return (\n    <VStack gap={16} align='start'>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>timed</p>\n        <HStack gap={8} wrap>\n          <Button variant='outline' color='neutral' onClick={() => createToast()}>\n            Create loading toast\n          </Button>\n          <Button variant='outline' color='neutral' onClick={() => updateToast()}>\n            Update to success\n          </Button>\n        </HStack>\n      </VStack>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>static — no timer</p>\n        <HStack gap={8} wrap>\n          <Button variant='secondary' color='neutral' onClick={() => createToast(STATIC_DURATION)}>\n            Create loading toast\n          </Button>\n          <Button variant='secondary' color='neutral' onClick={() => updateToast(STATIC_DURATION)}>\n            Update to success\n          </Button>\n        </HStack>\n      </VStack>\n    </VStack>\n  );\n}",
+          "code": "() => {\n  const toast = useToast();\n  const id = useRef<string | undefined>(undefined);\n\n  const createToast = (duration?: number) => {\n    id.current = toast.create({\n      title: 'Loading',\n      description: 'Loading ...',\n      type: 'loading',\n      variant: 'extended',\n      duration,\n    });\n  };\n\n  const updateToast = (duration?: number) => {\n    if (!id.current) {\n      return;\n    }\n\n    toast.update({\n      id: id.current,\n      title: 'Success',\n      description: 'Success!',\n      type: 'success',\n      variant: 'extended',\n      duration,\n    });\n  };\n\n  return (\n    <VStack gap={16} align='start'>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>timed</p>\n        <HStack gap={8} wrap='wrap'>\n          <Button variant='outline' color='neutral' onClick={() => createToast()}>\n            Create loading toast\n          </Button>\n          <Button variant='outline' color='neutral' onClick={() => updateToast()}>\n            Update to success\n          </Button>\n        </HStack>\n      </VStack>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>static — no timer</p>\n        <HStack gap={8} wrap='wrap'>\n          <Button variant='secondary' color='neutral' onClick={() => createToast(STATIC_DURATION)}>\n            Create loading toast\n          </Button>\n          <Button variant='secondary' color='neutral' onClick={() => updateToast(STATIC_DURATION)}>\n            Update to success\n          </Button>\n        </HStack>\n      </VStack>\n    </VStack>\n  );\n}",
           "description": "A loading toast has no timer and no progress bar, so it will not clear itself: `update()` the same id to resolve it to success or error."
         },
         {
           "name": "DescriptionKeepsExtended",
-          "code": "() => {\n  const toast = useToast();\n\n  const withDescription = (duration?: number) =>\n    toast.create({\n      title: 'Failed to mark as True Positive',\n      description: 'resolved vector count must not exceed 500000',\n      type: 'error',\n      variant: 'simple',\n      duration,\n    });\n\n  const withoutDescription = (duration?: number) =>\n    toast.create({ title: 'Marked 2 attacks', type: 'success', variant: 'simple', duration });\n\n  return (\n    <VStack gap={16} align='start'>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>timed</p>\n        <HStack gap={8} wrap>\n          <Button variant='outline' color='neutral' onClick={() => withDescription()}>\n            Simple with description\n          </Button>\n          <Button variant='outline' color='neutral' onClick={() => withoutDescription()}>\n            Simple without description\n          </Button>\n        </HStack>\n      </VStack>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>static — no timer</p>\n        <HStack gap={8} wrap>\n          <Button\n            variant='secondary'\n            color='neutral'\n            onClick={() => withDescription(STATIC_DURATION)}\n          >\n            Simple with description\n          </Button>\n          <Button\n            variant='secondary'\n            color='neutral'\n            onClick={() => withoutDescription(STATIC_DURATION)}\n          >\n            Simple without description\n          </Button>\n        </HStack>\n      </VStack>\n    </VStack>\n  );\n}",
+          "code": "() => {\n  const toast = useToast();\n\n  const withDescription = (duration?: number) =>\n    toast.create({\n      title: 'Failed to mark as True Positive',\n      description: 'resolved vector count must not exceed 500000',\n      type: 'error',\n      variant: 'simple',\n      duration,\n    });\n\n  const withoutDescription = (duration?: number) =>\n    toast.create({ title: 'Marked 2 attacks', type: 'success', variant: 'simple', duration });\n\n  return (\n    <VStack gap={16} align='start'>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>timed</p>\n        <HStack gap={8} wrap='wrap'>\n          <Button variant='outline' color='neutral' onClick={() => withDescription()}>\n            Simple with description\n          </Button>\n          <Button variant='outline' color='neutral' onClick={() => withoutDescription()}>\n            Simple without description\n          </Button>\n        </HStack>\n      </VStack>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>static — no timer</p>\n        <HStack gap={8} wrap='wrap'>\n          <Button\n            variant='secondary'\n            color='neutral'\n            onClick={() => withDescription(STATIC_DURATION)}\n          >\n            Simple with description\n          </Button>\n          <Button\n            variant='secondary'\n            color='neutral'\n            onClick={() => withoutDescription(STATIC_DURATION)}\n          >\n            Simple without description\n          </Button>\n        </HStack>\n      </VStack>\n    </VStack>\n  );\n}",
           "description": "A `description` is never dropped: ask for `simple` alongside one and the toast still reflows to `extended`, timer included. Passing no description keeps the one-line layout."
         },
         {
           "name": "SimpleWithActions",
-          "code": "() => {\n  const toast = useToast();\n\n  const single = (duration?: number) =>\n    toast.create({\n      title: 'Message sent',\n      type: 'success',\n      variant: 'simple',\n      duration,\n      actions: (\n        <ToastActions>\n          <Button variant='secondary' size='small' color='neutral-alt' onClick={onToastAction}>\n            Undo\n          </Button>\n        </ToastActions>\n      ),\n    });\n\n  const double = (duration?: number) =>\n    toast.create({\n      title: 'Connection restored',\n      type: 'info',\n      variant: 'simple',\n      duration,\n      actions: (\n        <ToastActions>\n          <Button variant='secondary' size='small' color='neutral-alt' onClick={onToastAction}>\n            View\n          </Button>\n          <Button variant='secondary' size='small' color='neutral-alt' onClick={onToastAction}>\n            Dismiss\n          </Button>\n        </ToastActions>\n      ),\n    });\n\n  return (\n    <VStack gap={16} align='start'>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>timed</p>\n        <HStack gap={8} wrap>\n          <Button variant='outline' color='neutral' onClick={() => single()}>\n            Simple Toast with Action\n          </Button>\n          <Button variant='outline' color='neutral' onClick={() => double()}>\n            Simple Toast with Two Actions\n          </Button>\n        </HStack>\n      </VStack>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>static — no timer</p>\n        <HStack gap={8} wrap>\n          <Button variant='secondary' color='neutral' onClick={() => single(STATIC_DURATION)}>\n            Simple Toast with Action\n          </Button>\n          <Button variant='secondary' color='neutral' onClick={() => double(STATIC_DURATION)}>\n            Simple Toast with Two Actions\n          </Button>\n        </HStack>\n      </VStack>\n    </VStack>\n  );\n}",
+          "code": "() => {\n  const toast = useToast();\n\n  const single = (duration?: number) =>\n    toast.create({\n      title: 'Message sent',\n      type: 'success',\n      variant: 'simple',\n      duration,\n      actions: (\n        <ToastActions>\n          <Button variant='secondary' size='small' color='neutral-alt' onClick={onToastAction}>\n            Undo\n          </Button>\n        </ToastActions>\n      ),\n    });\n\n  const double = (duration?: number) =>\n    toast.create({\n      title: 'Connection restored',\n      type: 'info',\n      variant: 'simple',\n      duration,\n      actions: (\n        <ToastActions>\n          <Button variant='secondary' size='small' color='neutral-alt' onClick={onToastAction}>\n            View\n          </Button>\n          <Button variant='secondary' size='small' color='neutral-alt' onClick={onToastAction}>\n            Dismiss\n          </Button>\n        </ToastActions>\n      ),\n    });\n\n  return (\n    <VStack gap={16} align='start'>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>timed</p>\n        <HStack gap={8} wrap='wrap'>\n          <Button variant='outline' color='neutral' onClick={() => single()}>\n            Simple Toast with Action\n          </Button>\n          <Button variant='outline' color='neutral' onClick={() => double()}>\n            Simple Toast with Two Actions\n          </Button>\n        </HStack>\n      </VStack>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>static — no timer</p>\n        <HStack gap={8} wrap='wrap'>\n          <Button variant='secondary' color='neutral' onClick={() => single(STATIC_DURATION)}>\n            Simple Toast with Action\n          </Button>\n          <Button variant='secondary' color='neutral' onClick={() => double(STATIC_DURATION)}>\n            Simple Toast with Two Actions\n          </Button>\n        </HStack>\n      </VStack>\n    </VStack>\n  );\n}",
           "description": "`simple` is a one-line title for about five seconds — as long as no `description` is passed with it. One action is the norm and two is the ceiling — they have to be optional, since the toast leaves on its own."
         },
         {
           "name": "ExtendedWithActions",
-          "code": "() => {\n  const toast = useToast();\n\n  const single = (duration?: number) =>\n    toast.create({\n      title: 'Extended Toast',\n      description: 'This is an extended toast with default layout.',\n      type: 'success',\n      variant: 'extended',\n      duration,\n      actions: (\n        <ToastActions>\n          <Button variant='secondary' size='small' color='neutral-alt' onClick={onToastAction}>\n            Action\n          </Button>\n        </ToastActions>\n      ),\n    });\n\n  const double = (duration?: number) =>\n    toast.create({\n      title: 'File processed',\n      description: 'Your file has been processed successfully.',\n      type: 'info',\n      variant: 'extended',\n      duration,\n      actions: (\n        <ToastActions>\n          <Button variant='secondary' size='small' color='neutral-alt' onClick={onToastAction}>\n            View\n          </Button>\n          <Button variant='secondary' size='small' color='neutral-alt' onClick={onToastAction}>\n            Download\n          </Button>\n        </ToastActions>\n      ),\n    });\n\n  return (\n    <VStack gap={16} align='start'>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>timed</p>\n        <HStack gap={8} wrap>\n          <Button variant='outline' color='neutral' onClick={() => single()}>\n            Extended Toast with Action\n          </Button>\n          <Button variant='outline' color='neutral' onClick={() => double()}>\n            Extended Toast with Two Actions\n          </Button>\n        </HStack>\n      </VStack>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>static — no timer</p>\n        <HStack gap={8} wrap>\n          <Button variant='secondary' color='neutral' onClick={() => single(STATIC_DURATION)}>\n            Extended Toast with Action\n          </Button>\n          <Button variant='secondary' color='neutral' onClick={() => double(STATIC_DURATION)}>\n            Extended Toast with Two Actions\n          </Button>\n        </HStack>\n      </VStack>\n    </VStack>\n  );\n}",
+          "code": "() => {\n  const toast = useToast();\n\n  const single = (duration?: number) =>\n    toast.create({\n      title: 'Extended Toast',\n      description: 'This is an extended toast with default layout.',\n      type: 'success',\n      variant: 'extended',\n      duration,\n      actions: (\n        <ToastActions>\n          <Button variant='secondary' size='small' color='neutral-alt' onClick={onToastAction}>\n            Action\n          </Button>\n        </ToastActions>\n      ),\n    });\n\n  const double = (duration?: number) =>\n    toast.create({\n      title: 'File processed',\n      description: 'Your file has been processed successfully.',\n      type: 'info',\n      variant: 'extended',\n      duration,\n      actions: (\n        <ToastActions>\n          <Button variant='secondary' size='small' color='neutral-alt' onClick={onToastAction}>\n            View\n          </Button>\n          <Button variant='secondary' size='small' color='neutral-alt' onClick={onToastAction}>\n            Download\n          </Button>\n        </ToastActions>\n      ),\n    });\n\n  return (\n    <VStack gap={16} align='start'>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>timed</p>\n        <HStack gap={8} wrap='wrap'>\n          <Button variant='outline' color='neutral' onClick={() => single()}>\n            Extended Toast with Action\n          </Button>\n          <Button variant='outline' color='neutral' onClick={() => double()}>\n            Extended Toast with Two Actions\n          </Button>\n        </HStack>\n      </VStack>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>static — no timer</p>\n        <HStack gap={8} wrap='wrap'>\n          <Button variant='secondary' color='neutral' onClick={() => single(STATIC_DURATION)}>\n            Extended Toast with Action\n          </Button>\n          <Button variant='secondary' color='neutral' onClick={() => double(STATIC_DURATION)}>\n            Extended Toast with Two Actions\n          </Button>\n        </HStack>\n      </VStack>\n    </VStack>\n  );\n}",
           "description": "`extended` adds a description and about ten seconds, for the cases where one sentence of context genuinely helps."
         },
         {
           "name": "LongText",
-          "code": "() => {\n  const toast = useToast();\n\n  const longTitle =\n    'This is a very very very long title that will be truncated after a certain number of lines';\n  const veryLongTitle = longTitle.repeat(4);\n  const longDescription =\n    'This is a very long description that will be truncated after a certain number of lines. ' +\n    'Hover over the description to see the full text in a tooltip. ' +\n    'This allows for better space management while still providing access to all the information.'.repeat(\n      2,\n    );\n\n  const simpleLong = (duration?: number) =>\n    toast.create({ title: longTitle, variant: 'simple', type: 'info', duration });\n\n  const extendedLong = (duration?: number) =>\n    toast.create({\n      title: veryLongTitle,\n      variant: 'extended',\n      description: longDescription,\n      type: 'info',\n      duration,\n    });\n\n  return (\n    <VStack gap={16} align='start'>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>timed</p>\n        <HStack gap={8} wrap>\n          <Button variant='outline' color='neutral' onClick={() => simpleLong()}>\n            Simple with long title\n          </Button>\n          <Button variant='outline' color='neutral' onClick={() => extendedLong()}>\n            Extended with long text\n          </Button>\n        </HStack>\n      </VStack>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>static — no timer</p>\n        <HStack gap={8} wrap>\n          <Button variant='secondary' color='neutral' onClick={() => simpleLong(STATIC_DURATION)}>\n            Simple with long title\n          </Button>\n          <Button variant='secondary' color='neutral' onClick={() => extendedLong(STATIC_DURATION)}>\n            Extended with long text\n          </Button>\n        </HStack>\n      </VStack>\n    </VStack>\n  );\n}",
+          "code": "() => {\n  const toast = useToast();\n\n  const longTitle =\n    'This is a very very very long title that will be truncated after a certain number of lines';\n  const veryLongTitle = longTitle.repeat(4);\n  const longDescription =\n    'This is a very long description that will be truncated after a certain number of lines. ' +\n    'Hover over the description to see the full text in a tooltip. ' +\n    'This allows for better space management while still providing access to all the information.'.repeat(\n      2,\n    );\n\n  const simpleLong = (duration?: number) =>\n    toast.create({ title: longTitle, variant: 'simple', type: 'info', duration });\n\n  const extendedLong = (duration?: number) =>\n    toast.create({\n      title: veryLongTitle,\n      variant: 'extended',\n      description: longDescription,\n      type: 'info',\n      duration,\n    });\n\n  return (\n    <VStack gap={16} align='start'>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>timed</p>\n        <HStack gap={8} wrap='wrap'>\n          <Button variant='outline' color='neutral' onClick={() => simpleLong()}>\n            Simple with long title\n          </Button>\n          <Button variant='outline' color='neutral' onClick={() => extendedLong()}>\n            Extended with long text\n          </Button>\n        </HStack>\n      </VStack>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>static — no timer</p>\n        <HStack gap={8} wrap='wrap'>\n          <Button variant='secondary' color='neutral' onClick={() => simpleLong(STATIC_DURATION)}>\n            Simple with long title\n          </Button>\n          <Button variant='secondary' color='neutral' onClick={() => extendedLong(STATIC_DURATION)}>\n            Extended with long text\n          </Button>\n        </HStack>\n      </VStack>\n    </VStack>\n  );\n}",
           "description": "The title clamps to one line simple, two extended, and the description to four, with the full text in a tooltip. Pre-truncating your own copy fights it."
         },
         {
           "name": "WithoutCloseButton",
-          "code": "() => {\n  const toast = useToast();\n\n  const create = (duration?: number) =>\n    toast.create({\n      title: 'Non-closable toast',\n      variant: 'extended',\n      description: 'This toast cannot be closed manually.',\n      type: 'info',\n      closable: false,\n      duration,\n    });\n\n  return (\n    <VStack gap={16} align='start'>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>timed</p>\n        <HStack gap={8} wrap>\n          <Button variant='outline' color='neutral' onClick={() => create()}>\n            Non-closable Toast\n          </Button>\n        </HStack>\n      </VStack>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>static — no timer</p>\n        <HStack gap={8} wrap>\n          <Button variant='secondary' color='neutral' onClick={() => create(STATIC_DURATION)}>\n            Non-closable Toast\n          </Button>\n        </HStack>\n      </VStack>\n    </VStack>\n  );\n}",
+          "code": "() => {\n  const toast = useToast();\n\n  const create = (duration?: number) =>\n    toast.create({\n      title: 'Non-closable toast',\n      variant: 'extended',\n      description: 'This toast cannot be closed manually.',\n      type: 'info',\n      closable: false,\n      duration,\n    });\n\n  return (\n    <VStack gap={16} align='start'>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>timed</p>\n        <HStack gap={8} wrap='wrap'>\n          <Button variant='outline' color='neutral' onClick={() => create()}>\n            Non-closable Toast\n          </Button>\n        </HStack>\n      </VStack>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>static — no timer</p>\n        <HStack gap={8} wrap='wrap'>\n          <Button variant='secondary' color='neutral' onClick={() => create(STATIC_DURATION)}>\n            Non-closable Toast\n          </Button>\n        </HStack>\n      </VStack>\n    </VStack>\n  );\n}",
           "description": "`closable: false` takes the X away, which is only right for an in-flight loading toast the reader must not lose."
         },
         {
           "name": "CustomIcon",
-          "code": "() => {\n  const toast = useToast();\n\n  const withColor = (duration?: number) =>\n    toast.create({\n      title: 'Custom icon toast',\n      variant: 'extended',\n      description: 'This toast uses a custom icon that overrides the type-based icon.',\n      type: 'success',\n      icon: <Activity size='lg' className='text-purple-500' />,\n      duration,\n    });\n\n  const withoutColor = (duration?: number) =>\n    toast.create({\n      title: 'Custom icon with action',\n      variant: 'extended',\n      description: 'You can use any icon component as a custom icon.',\n      type: 'info',\n      icon: <Activity />,\n      duration,\n    });\n\n  return (\n    <VStack gap={16} align='start'>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>timed</p>\n        <HStack gap={8} wrap>\n          <Button variant='outline' color='neutral' onClick={() => withColor()}>\n            Custom Icon with own color\n          </Button>\n          <Button variant='outline' color='neutral' onClick={() => withoutColor()}>\n            Custom Icon without color\n          </Button>\n        </HStack>\n      </VStack>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>static — no timer</p>\n        <HStack gap={8} wrap>\n          <Button variant='secondary' color='neutral' onClick={() => withColor(STATIC_DURATION)}>\n            Custom Icon with own color\n          </Button>\n          <Button variant='secondary' color='neutral' onClick={() => withoutColor(STATIC_DURATION)}>\n            Custom Icon without color\n          </Button>\n        </HStack>\n      </VStack>\n    </VStack>\n  );\n}",
+          "code": "() => {\n  const toast = useToast();\n\n  const withColor = (duration?: number) =>\n    toast.create({\n      title: 'Custom icon toast',\n      variant: 'extended',\n      description: 'This toast uses a custom icon that overrides the type-based icon.',\n      type: 'success',\n      icon: <Activity size='lg' className='text-purple-500' />,\n      duration,\n    });\n\n  const withoutColor = (duration?: number) =>\n    toast.create({\n      title: 'Custom icon with action',\n      variant: 'extended',\n      description: 'You can use any icon component as a custom icon.',\n      type: 'info',\n      icon: <Activity />,\n      duration,\n    });\n\n  return (\n    <VStack gap={16} align='start'>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>timed</p>\n        <HStack gap={8} wrap='wrap'>\n          <Button variant='outline' color='neutral' onClick={() => withColor()}>\n            Custom Icon with own color\n          </Button>\n          <Button variant='outline' color='neutral' onClick={() => withoutColor()}>\n            Custom Icon without color\n          </Button>\n        </HStack>\n      </VStack>\n      <VStack gap={4} align='start'>\n        <p className='sb-annotation'>static — no timer</p>\n        <HStack gap={8} wrap='wrap'>\n          <Button variant='secondary' color='neutral' onClick={() => withColor(STATIC_DURATION)}>\n            Custom Icon with own color\n          </Button>\n          <Button variant='secondary' color='neutral' onClick={() => withoutColor(STATIC_DURATION)}>\n            Custom Icon without color\n          </Button>\n        </HStack>\n      </VStack>\n    </VStack>\n  );\n}",
           "description": "A custom `icon` replaces the type’s own. It inherits the type colour unless it sets one, so the first here is deliberately purple and the second is not."
         }
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "3.4.0",
+  "version": "3.4.1-rc-fix-data-display-category.2",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",
@@ -65,13 +65,12 @@
     "build:watch": "rslib build --watch",
     "prepublishOnly": "prepare-publish",
     "postpublish": "restore-package",
-    "generate-exports": "tsx scripts/generate-exports.ts",
     "compiler:audit": "tsx scripts/compiler-audit.ts",
     "generate:grammars": "lezer-generator src/components/CodeEditor/engine/languages/http/http.grammar -o src/components/CodeEditor/engine/languages/http/parser.ts --typeScript",
     "publish:local": "pnpm build && yalc publish --push",
     "lint": "biome check",
     "lint:fix": "biome check --fix",
-    "typecheck": "tsc --noEmit && tsc -p tsconfig.figma.json",
+    "typecheck": "tsc -p tsconfig.app.json --noEmit --composite false --incremental false && tsc -p tsconfig.storybook.json --noEmit --composite false --incremental false && tsc -p tsconfig.figma.json --noEmit --composite false --incremental false && tsc -p tsconfig.e2e.json --noEmit --composite false --incremental false",
     "test": "rstest watch",
     "test:coverage": "rstest run --coverage",
     "test:run": "rstest run",
@@ -83,9 +82,6 @@
     "e2e:failed": "playwright test --last-failed",
     "e2e:failed:headed": "playwright test --last-failed --headed",
     "e2e:report": "playwright show-report",
-    "e2e:docker": "playwright test --config=playwright.config.docker.ts",
-    "e2e:docker:ui": "playwright test --config=playwright.config.docker.ts --ui",
-    "e2e:docker:failed": "playwright test --config=playwright.config.docker.ts --last-failed",
     "e2e:docker:report": "playwright show-report ./playwright-report --port=9323",
     "icons:sync": "tsx scripts/icons/sync.ts",
     "code-connect:preview": "node --env-file-if-exists=../../.env.local node_modules/@figma/code-connect/bin/figma connect preview",