@webiny/admin-ui 6.2.0-beta.0 → 6.3.0-beta.0

package/Grid/Grid.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as GridStories from './Grid.stories';
+import * as GridStories from "./Grid.stories";
 
 <Meta of={GridStories} />
 
@@ -13,56 +13,44 @@ import React from "react";
 import { Grid } from "@webiny/admin-ui";
 
 const GridExample = () => {
-    return (
-        <Grid gap={"comfortable"} className={"bg-neutral-light p-4"}>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 1
-            </Grid.Column>
-            <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 2<br/>Span: 3
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 3
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 4
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 5
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 6
-            </Grid.Column>
-            <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 7<br/>Span: 2
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 8
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 9
-            </Grid.Column>
-        </Grid>
-    );
-};
+return (
+
+<Grid gap={"comfortable"} className={"bg-neutral-light p-4"}>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 1</Grid.Column>
+  <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+    Col 2<br />
+    Span: 3
+  </Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 3</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 4</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 5</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 6</Grid.Column>
+  <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+    Col 7<br />
+    Span: 2
+  </Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 8</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 9</Grid.Column>
+</Grid>
+); };
 
 export default GridExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Grid/Grid.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Grid/Grid.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={GridStories.Documentation}/>
+<Controls of={GridStories.Documentation} />
 
 ## Usage
 
@@ -71,37 +59,39 @@ import React from "react";
 import { Grid } from "@webiny/admin-ui";
 
 const GridExample = () => {
-    return (
-        <Grid gap={"comfortable"} className={"bg-neutral-light p-4"}>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 1
-            </Grid.Column>
-            <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 2<br/>Span: 3
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 3
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 4
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 5
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 6
-            </Grid.Column>
-            <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 7<br/>Span: 2
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 8
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 9
-            </Grid.Column>
-        </Grid>
-    );
+  return (
+    <Grid gap={"comfortable"} className={"bg-neutral-light p-4"}>
+      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 1
+      </Grid.Column>
+      <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 2<br />
+        Span: 3
+      </Grid.Column>
+      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 3
+      </Grid.Column>
+      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 4
+      </Grid.Column>
+      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 5
+      </Grid.Column>
+      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 6
+      </Grid.Column>
+      <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 7<br />
+        Span: 2
+      </Grid.Column>
+      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 8
+      </Grid.Column>
+      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 9
+      </Grid.Column>
+    </Grid>
+  );
 };
 
 export default GridExample;
@@ -110,6 +100,7 @@ export default GridExample;
 ## Examples
 
 ### Spacious Gap
+
 To have more spacing between grid columns, you can use the `gap` prop and set it to `spacious`.
 
 <Canvas of={GridStories.WithGapSpacious}  source={ { code: `
@@ -117,38 +108,26 @@ import React from "react";
 import { Grid } from "@webiny/admin-ui";
 
 const GridSpaciousExample = () => {
-    return (
-        <Grid gap={"spacious"} className={"bg-neutral-light p-4"}>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 1
-            </Grid.Column>
-            <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 2<br/>Span: 3
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 3
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 4
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 5
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 6
-            </Grid.Column>
-            <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 7<br/>Span: 2
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 8
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 9
-            </Grid.Column>
-        </Grid>
-    );
-};
+return (
+
+<Grid gap={"spacious"} className={"bg-neutral-light p-4"}>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 1</Grid.Column>
+  <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+    Col 2<br />
+    Span: 3
+  </Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 3</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 4</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 5</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 6</Grid.Column>
+  <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+    Col 7<br />
+    Span: 2
+  </Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 8</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 9</Grid.Column>
+</Grid>
+); };
 
     export default GridSpaciousExample;
 
@@ -156,6 +135,7 @@ const GridSpaciousExample = () => {
 />
 
 ### With Offset
+
 With Offset, you can create a grid with a specific offset. The offset is applied to columns, e.g. `<Grid.Column span={8} offset={2}/>`. Please refer to the example - click on **Show code** to see code example.
 
 <Canvas of={GridStories.WithOffset}  source={ { code: `
@@ -163,8 +143,9 @@ import React from "react";
 import { Grid } from "@webiny/admin-ui";
 
 const GridWithOffsetExample = () => {
-    return (
-        <Grid gap={"spacious"} className={"bg-neutral-light p-4"}>
+return (
+
+<Grid gap={"spacious"} className={"bg-neutral-light p-4"}>
 
                 {/* Row 1 */}
                 <Grid.Column span={8} offset={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
@@ -204,46 +185,55 @@ const GridWithOffsetExample = () => {
 />
 
 ## Horizontal Grids
+
 The grids within the Webiny Design System behave as fixed and fluid elements relevant to the elements on the page.
 
 ### Grid types
+
 Webiny Design System use two types of grids: fluid and fixed. Both grid types use breakpoints to determine whether the layout needs to change between viewport sizes.
 
 ### Fluid
-The fluid grid stretches across an area to fill all available space within the screen, part of the screen or within the specific element if needed.
 
-<img src="/images/storybook/grid/fluid.png" alt="Fluid"/>
+The fluid grid stretches across an area to fill all available space within the screen, part of the screen or within the specific element if needed.
 
-<img src="/images/storybook/grid/fluid-dashboard.png" alt="Fluid Dashboard"/>
+<img src="/images/storybook/grid/fluid.png" alt="Fluid" />
 
+<img src="/images/storybook/grid/fluid-dashboard.png" alt="Fluid Dashboard" />
 
 ### Fixed
+
 The fixed grid applies the ideal maximum width to page or page element.
 
-<img src="/images/storybook/grid/fixed.png" alt="Fixed"/>
+<img src="/images/storybook/grid/fixed.png" alt="Fixed" />
 
-<img src="/images/storybook/grid/fixed-dashboard.png" alt="Fixed Dashboard"/>
+<img src="/images/storybook/grid/fixed-dashboard.png" alt="Fixed Dashboard" />
 
 ## Grid Gutter Sizes
+
 We considered using two main sizes for grid application, to be used dependent on the content type.
 
 ### Comfortable (Default)
-<img src="/images/storybook/grid/grid-gutter-size-comfortable.png" alt="Comfortable (Default)"/>
+
+<img src="/images/storybook/grid/grid-gutter-size-comfortable.png" alt="Comfortable (Default)" />
 
 ### Spacious
-<img src="/images/storybook/grid/grid-gutter-size-spacious.png" alt="Spacious"/>
+
+<img src="/images/storybook/grid/grid-gutter-size-spacious.png" alt="Spacious" />
 
 ## Breakpoints
+
 A breakpoint marks the point where a website’s layout adapts to provide the best user experience. In responsive design, the range of each breakpoint defines the ideal number of columns for a given viewport size, along with the suggested widths for margins and gutters.
 
-<img src="/images/storybook/grid/breakpoints.png" alt="Breakpoints"/>
+<img src="/images/storybook/grid/breakpoints.png" alt="Breakpoints" />
 
 ## Column Spans
+
 Content should be distributed across a minimum of 3 columns, with the option to extend up to 12 columns. To achieve a range of layouts, vary the number of columns used, allowing for flexible design across different breakpoints.
 
-<img src="/images/storybook/grid/column-spans.png" alt="Column Spans"/>
+<img src="/images/storybook/grid/column-spans.png" alt="Column Spans" />
 
 ## Column Offsets
+
 Content isn't required to span the full 12 columns. It can cover a smaller number of columns, creating a layout where the content is centered within a 12-column grid.
 
-<img src="/images/storybook/grid/column-offsets.png" alt="Column Offsets"/>
+<img src="/images/storybook/grid/column-offsets.png" alt="Column Offsets" />

package/HeaderBar/HeaderBar.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as HeaderBarStories from './HeaderBar.stories';
+import * as HeaderBarStories from "./HeaderBar.stories";
 
 <Meta of={HeaderBarStories} />
 
@@ -16,11 +16,12 @@ import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
 import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
 
 const HeaderBarExample = () => {
-    const StartContent = () => (
-        <Text size={"sm"} className={"text-neutral-dimmed"}>
-            {"Headless CMS / Articles / The best article ever"}
-        </Text>
-    );
+const StartContent = () => (
+
+<Text size={"sm"} className={"text-neutral-dimmed"}>
+  {"Headless CMS / Articles / The best article ever"}
+</Text>
+);
 
     const MiddleContent = () => <>Content in the middle</>;
 
@@ -56,22 +57,23 @@ const HeaderBarExample = () => {
             end={<EndContent />}
         />
     );
+
 };
 
 export default HeaderBarExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/HeaderBar/HeaderBar.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/HeaderBar/HeaderBar.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={HeaderBarStories.Documentation} />
@@ -82,47 +84,36 @@ import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
 import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
 
 const HeaderBarExample = () => {
-    const StartContent = () => (
-        <Text size={"sm"} className={"text-neutral-dimmed"}>
-            {"Headless CMS / Articles / The best article ever"}
-        </Text>
-    );
-
-    const MiddleContent = () => <>Content in the middle</>;
-
-    const EndContent = () => (
-        <div className={"flex gap-x-sm"}>
-            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
-            <div
-                className={
-                    "flex items-center rounded-md " +
-"gap-xxs py-xs px-xs bg-neutral-light"
-                }
-            >
-                <Avatar
-                    size={"sm"}
-                    variant={"strong"}
-                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
-                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
-                />
-                <IconButton
-                    variant={"ghost"}
-                    size={"xs"}
-                    color={"neutral-strong"}
-                    icon={<KeyboardArrowRightIcon />}
-                    onClick={() => console.log("clicked")}
-                />
-            </div>
-        </div>
-    );
-
-    return (
-        <HeaderBar
-            start={<StartContent />}
-            middle={<MiddleContent />}
-            end={<EndContent />}
+  const StartContent = () => (
+    <Text size={"sm"} className={"text-neutral-dimmed"}>
+      {"Headless CMS / Articles / The best article ever"}
+    </Text>
+  );
+
+  const MiddleContent = () => <>Content in the middle</>;
+
+  const EndContent = () => (
+    <div className={"flex gap-x-sm"}>
+      <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
+      <div className={"flex items-center rounded-md " + "gap-xxs py-xs px-xs bg-neutral-light"}>
+        <Avatar
+          size={"sm"}
+          variant={"strong"}
+          image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
+          fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
         />
-    );
+        <IconButton
+          variant={"ghost"}
+          size={"xs"}
+          color={"neutral-strong"}
+          icon={<KeyboardArrowRightIcon />}
+          onClick={() => console.log("clicked")}
+        />
+      </div>
+    </div>
+  );
+
+  return <HeaderBar start={<StartContent />} middle={<MiddleContent />} end={<EndContent />} />;
 };
 
 export default HeaderBarExample;
@@ -137,13 +128,15 @@ import React from "react";
 import { HeaderBar, Text } from "@webiny/admin-ui";
 
 const StartContentOnlyExample = () => {
-    const StartContent = () => (
-        <Text size={"sm"} className={"text-neutral-dimmed"}>
-            {"Headless CMS / Articles / The best article ever"}
-        </Text>
-    );
+const StartContent = () => (
+
+<Text size={"sm"} className={"text-neutral-dimmed"}>
+  {"Headless CMS / Articles / The best article ever"}
+</Text>
+);
 
     return <HeaderBar start={<StartContent />} />;
+
 };
 
 export default StartContentOnlyExample;
@@ -156,9 +149,10 @@ import React from "react";
 import { HeaderBar } from "@webiny/admin-ui";
 
 const MiddleContentOnlyExample = () => {
-    const MiddleContent = () => <>Content in the middle</>;
+const MiddleContent = () => <>Content in the middle</>;
 
     return <HeaderBar middle={<MiddleContent />} />;
+
 };
 
 export default MiddleContentOnlyExample;
@@ -172,33 +166,34 @@ import { HeaderBar, Button, IconButton, Avatar } from "@webiny/admin-ui";
 import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
 
 const EndContentOnlyExample = () => {
-    const EndContent = () => (
-        <div className={"flex gap-x-sm"}>
-            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
-            <div
-                className={
-                    "flex items-center rounded-md gap-xxs
-                    py-xs px-xs bg-neutral-light"
-                }
-            >
-                <Avatar
-                    size={"sm"}
-                    variant={"strong"}
-                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
-                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
-                />
-                <IconButton
-                    variant={"ghost"}
-                    size={"xs"}
-                    color={"neutral-strong"}
-                    icon={<KeyboardArrowRightIcon />}
-                    onClick={() => console.log("clicked")}
-                />
-            </div>
-        </div>
-    );
+const EndContent = () => (
+
+<div className={"flex gap-x-sm"}>
+<Button variant={"ghost"} size={"md"} text={"Root tenant"} />
+<div
+className={
+"flex items-center rounded-md gap-xxs
+py-xs px-xs bg-neutral-light"
+} >
+<Avatar
+size={"sm"}
+variant={"strong"}
+image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
+fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
+/>
+<IconButton
+variant={"ghost"}
+size={"xs"}
+color={"neutral-strong"}
+icon={<KeyboardArrowRightIcon />}
+onClick={() => console.log("clicked")}
+/>
+</div>
+</div>
+);
 
     return <HeaderBar end={<EndContent />} />;
+
 };
 
 export default EndContentOnlyExample;
@@ -212,11 +207,12 @@ import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
 import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
 
 const StartEndContentOnlyExample = () => {
-    const StartContent = () => (
-        <Text size={"sm"} className={"text-neutral-dimmed"}>
-            {"Headless CMS / Articles / The best article ever"}
-        </Text>
-    );
+const StartContent = () => (
+
+<Text size={"sm"} className={"text-neutral-dimmed"}>
+  {"Headless CMS / Articles / The best article ever"}
+</Text>
+);
 
     const EndContent = () => (
         <div className={"flex gap-x-sm"}>
@@ -244,6 +240,7 @@ const StartEndContentOnlyExample = () => {
     );
 
     return <HeaderBar start={<StartContent />} end={<EndContent />} />;
+
 };
 
 export default StartEndContentOnlyExample;
@@ -257,11 +254,12 @@ import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
 import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
 
 const MoreStartContentExample = () => {
-    const StartContent = () => (
-        <Text size={"sm"} className={"text-neutral-dimmed"}>
-            {"Headless CMS / Articles / The best article ever"}
-        </Text>
-    );
+const StartContent = () => (
+
+<Text size={"sm"} className={"text-neutral-dimmed"}>
+  {"Headless CMS / Articles / The best article ever"}
+</Text>
+);
 
     const MiddleContent = () => <>Content in the middle</>;
 
@@ -303,6 +301,7 @@ const MoreStartContentExample = () => {
             end={<EndContent />}
         />
     );
+
 };
 
 export default MoreStartContentExample;

package/Heading/Heading.d.ts

@@ -4,7 +4,7 @@ export type HeadingTags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
 declare const headingVariants: (props?: ({
     level?: 1 | 2 | 4 | 3 | 5 | 6 | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
     as?: HeadingTags;
 }

package/Heading/Heading.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","makeDecoratable","cva","TAG_MAP","headingVariants","variants","level","defaultVariants","HeadingBase","children","className","as","props","validatedLevel","Tag","createElement","Object","assign","Heading"],"sources":["Heading.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable, cva, type VariantProps } from \"~/utils.js\";\n\nexport type HeadingTags = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\nexport type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;\n\n// Create a mapping of variant to tag\nconst TAG_MAP: Record<HeadingLevels, HeadingTags> = {\n    1: \"h1\",\n    2: \"h2\",\n    3: \"h3\",\n    4: \"h4\",\n    5: \"h5\",\n    6: \"h6\"\n};\n\nconst headingVariants = cva(\"font-sans\", {\n    variants: {\n        level: {\n            1: \"text-h1\",\n            2: \"text-h2\",\n            3: \"text-h3\",\n            4: \"text-h4\",\n            5: \"text-h5\",\n            6: \"text-h6\"\n        }\n    },\n    defaultVariants: {\n        level: 1\n    }\n});\n\ninterface HeadingProps\n    extends React.HTMLAttributes<HTMLHeadingElement>,\n        VariantProps<typeof headingVariants> {\n    as?: HeadingTags;\n}\n\nconst HeadingBase = ({ children, level, className, as, ...props }: HeadingProps) => {\n    // Ensure `level` is a valid number, or fallback to a default value 1\n    const validatedLevel = level && level in TAG_MAP ? level : 1;\n\n    // Choose the tag: prefer `as`, otherwise use `TAG_MAP[validatedLevel]`\n    const Tag = as || TAG_MAP[validatedLevel];\n\n    return (\n        <Tag {...props} className={cn(headingVariants({ level }), className)}>\n            {children}\n        </Tag>\n    );\n};\n\nconst Heading = makeDecoratable(\"Heading\", HeadingBase);\n\nexport { Heading, type HeadingProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe,EAAEC,GAAG;AAKjC;AACA,MAAMC,OAA2C,GAAG;EAChD,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE;AACP,CAAC;AAED,MAAMC,eAAe,GAAGF,GAAG,CAAC,WAAW,EAAE;EACrCG,QAAQ,EAAE;IACNC,KAAK,EAAE;MACH,CAAC,EAAE,SAAS;MACZ,CAAC,EAAE,SAAS;MACZ,CAAC,EAAE,SAAS;MACZ,CAAC,EAAE,SAAS;MACZ,CAAC,EAAE,SAAS;MACZ,CAAC,EAAE;IACP;EACJ,CAAC;EACDC,eAAe,EAAE;IACbD,KAAK,EAAE;EACX;AACJ,CAAC,CAAC;AAQF,MAAME,WAAW,GAAGA,CAAC;EAAEC,QAAQ;EAAEH,KAAK;EAAEI,SAAS;EAAEC,EAAE;EAAE,GAAGC;AAAoB,CAAC,KAAK;EAChF;EACA,MAAMC,cAAc,GAAGP,KAAK,IAAIA,KAAK,IAAIH,OAAO,GAAGG,KAAK,GAAG,CAAC;;EAE5D;EACA,MAAMQ,GAAG,GAAGH,EAAE,IAAIR,OAAO,CAACU,cAAc,CAAC;EAEzC,oBACId,KAAA,CAAAgB,aAAA,CAACD,GAAG,EAAAE,MAAA,CAAAC,MAAA,KAAKL,KAAK;IAAEF,SAAS,EAAEV,EAAE,CAACI,eAAe,CAAC;MAAEE;IAAM,CAAC,CAAC,EAAEI,SAAS;EAAE,IAChED,QACA,CAAC;AAEd,CAAC;AAED,MAAMS,OAAO,GAAGjB,eAAe,CAAC,SAAS,EAAEO,WAAW,CAAC;AAEvD,SAASU,OAAO","ignoreList":[]}
+{"version":3,"names":["React","cn","makeDecoratable","cva","TAG_MAP","headingVariants","variants","level","defaultVariants","HeadingBase","children","className","as","props","validatedLevel","Tag","createElement","Object","assign","Heading"],"sources":["Heading.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable, cva, type VariantProps } from \"~/utils.js\";\n\nexport type HeadingTags = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\nexport type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;\n\n// Create a mapping of variant to tag\nconst TAG_MAP: Record<HeadingLevels, HeadingTags> = {\n    1: \"h1\",\n    2: \"h2\",\n    3: \"h3\",\n    4: \"h4\",\n    5: \"h5\",\n    6: \"h6\"\n};\n\nconst headingVariants = cva(\"font-sans\", {\n    variants: {\n        level: {\n            1: \"text-h1\",\n            2: \"text-h2\",\n            3: \"text-h3\",\n            4: \"text-h4\",\n            5: \"text-h5\",\n            6: \"text-h6\"\n        }\n    },\n    defaultVariants: {\n        level: 1\n    }\n});\n\ninterface HeadingProps\n    extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {\n    as?: HeadingTags;\n}\n\nconst HeadingBase = ({ children, level, className, as, ...props }: HeadingProps) => {\n    // Ensure `level` is a valid number, or fallback to a default value 1\n    const validatedLevel = level && level in TAG_MAP ? level : 1;\n\n    // Choose the tag: prefer `as`, otherwise use `TAG_MAP[validatedLevel]`\n    const Tag = as || TAG_MAP[validatedLevel];\n\n    return (\n        <Tag {...props} className={cn(headingVariants({ level }), className)}>\n            {children}\n        </Tag>\n    );\n};\n\nconst Heading = makeDecoratable(\"Heading\", HeadingBase);\n\nexport { Heading, type HeadingProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe,EAAEC,GAAG;AAKjC;AACA,MAAMC,OAA2C,GAAG;EAChD,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE;AACP,CAAC;AAED,MAAMC,eAAe,GAAGF,GAAG,CAAC,WAAW,EAAE;EACrCG,QAAQ,EAAE;IACNC,KAAK,EAAE;MACH,CAAC,EAAE,SAAS;MACZ,CAAC,EAAE,SAAS;MACZ,CAAC,EAAE,SAAS;MACZ,CAAC,EAAE,SAAS;MACZ,CAAC,EAAE,SAAS;MACZ,CAAC,EAAE;IACP;EACJ,CAAC;EACDC,eAAe,EAAE;IACbD,KAAK,EAAE;EACX;AACJ,CAAC,CAAC;AAOF,MAAME,WAAW,GAAGA,CAAC;EAAEC,QAAQ;EAAEH,KAAK;EAAEI,SAAS;EAAEC,EAAE;EAAE,GAAGC;AAAoB,CAAC,KAAK;EAChF;EACA,MAAMC,cAAc,GAAGP,KAAK,IAAIA,KAAK,IAAIH,OAAO,GAAGG,KAAK,GAAG,CAAC;;EAE5D;EACA,MAAMQ,GAAG,GAAGH,EAAE,IAAIR,OAAO,CAACU,cAAc,CAAC;EAEzC,oBACId,KAAA,CAAAgB,aAAA,CAACD,GAAG,EAAAE,MAAA,CAAAC,MAAA,KAAKL,KAAK;IAAEF,SAAS,EAAEV,EAAE,CAACI,eAAe,CAAC;MAAEE;IAAM,CAAC,CAAC,EAAEI,SAAS;EAAE,IAChED,QACA,CAAC;AAEd,CAAC;AAED,MAAMS,OAAO,GAAGjB,eAAe,CAAC,SAAS,EAAEO,WAAW,CAAC;AAEvD,SAASU,OAAO","ignoreList":[]}