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

package/IconPicker/IconPicker.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 IconPickerStories from './IconPicker.stories';
+import * as IconPickerStories from "./IconPicker.stories";
 
 <Meta of={IconPickerStories} />
 
@@ -20,8 +20,8 @@ import { fas } from "@fortawesome/free-solid-svg-icons";
 library.add(fas as any);
 
 const IconPickerExample = () => {
-    const [selectedIcon, setSelectedIcon] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [selectedIcon, setSelectedIcon] = useState("");
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleChange = (newIcon: string) => {
         setSelectedIcon(newIcon);
@@ -52,22 +52,23 @@ const IconPickerExample = () => {
             validation={validation}
         />
     );
+
 };
 
 export default IconPickerExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/IconPicker/IconPicker.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/IconPicker/IconPicker.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={IconPickerStories.Documentation} exclude={"onChange"} />
@@ -82,38 +83,39 @@ import { fas } from "@fortawesome/free-solid-svg-icons";
 library.add(fas as any);
 
 const IconPickerExample = () => {
-    const [selectedIcon, setSelectedIcon] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleChange = (newIcon: string) => {
-        setSelectedIcon(newIcon);
-
-        if (!newIcon && true) { // true represents required field
-            setValidation({ isValid: false, message: "Please select an icon" });
-        } else {
-            setValidation({ isValid: true, message: "" });
-        }
-    };
-
-    return (
-        <IconPicker
-            label="Select an Icon"
-            description="Choose an icon for your button"
-            note="Note: The selected icon will be displayed on your button"
-            required={true}
-            icons={[
-                { prefix: "fas", name: "trash-restore-alt" },
-                { prefix: "fas", name: "file-pen" },
-                { prefix: "fas", name: "receipt" },
-                { prefix: "fas", name: "user-circle" },
-                { prefix: "fas", name: "circle-user" }
-                // Add more icons as needed
-            ]}
-            value={selectedIcon}
-            onChange={handleChange}
-            validation={validation}
-        />
-    );
+  const [selectedIcon, setSelectedIcon] = useState("");
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleChange = (newIcon: string) => {
+    setSelectedIcon(newIcon);
+
+    if (!newIcon && true) {
+      // true represents required field
+      setValidation({ isValid: false, message: "Please select an icon" });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  return (
+    <IconPicker
+      label="Select an Icon"
+      description="Choose an icon for your button"
+      note="Note: The selected icon will be displayed on your button"
+      required={true}
+      icons={[
+        { prefix: "fas", name: "trash-restore-alt" },
+        { prefix: "fas", name: "file-pen" },
+        { prefix: "fas", name: "receipt" },
+        { prefix: "fas", name: "user-circle" },
+        { prefix: "fas", name: "circle-user" }
+        // Add more icons as needed
+      ]}
+      value={selectedIcon}
+      onChange={handleChange}
+      validation={validation}
+    />
+  );
 };
 
 export default IconPickerExample;
@@ -146,29 +148,29 @@ const definitions = (library as any).definitions;
 const allIcons: IconPickerIconDto[] = [];
 
 Object.keys(definitions)
-    .filter((pack): pack is IconPrefix => validPrefixes.includes(pack as IconPrefix))
-    .forEach((prefix) => {
-        const icons = definitions[prefix];
-        Object.keys(icons).forEach((icon) => {
-            allIcons.push({
-                prefix,
-                name: icon as IconName
-            });
-        });
+  .filter((pack): pack is IconPrefix => validPrefixes.includes(pack as IconPrefix))
+  .forEach(prefix => {
+    const icons = definitions[prefix];
+    Object.keys(icons).forEach(icon => {
+      allIcons.push({
+        prefix,
+        name: icon as IconName
+      });
     });
+  });
 ```
 
 You can then pass the `allIcons` array to the `IconPicker` component:
 
 ```tsx
 <IconPicker
-    label="Select an Icon"
-    description="Choose an icon for your button"
-    note="Note: The selected icon will be displayed on your button"
-    required={true}
-    icons={allIcons}
-    value={selectedIcon}
-    onChange={handleChange}
-    validation={validation}
+  label="Select an Icon"
+  description="Choose an icon for your button"
+  note="Note: The selected icon will be displayed on your button"
+  required={true}
+  icons={allIcons}
+  value={selectedIcon}
+  onChange={handleChange}
+  validation={validation}
 />
 ```

package/IconPicker/primitives/IconPickerPrimitive.d.ts

@@ -5,7 +5,7 @@ import type { IconPickerIconDto } from "../domains/index.js";
 declare const iconPickerVariants: (props?: ({
     size?: "md" | "lg" | "xl" | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IconPickerPrimitiveProps extends VariantProps<typeof iconPickerVariants> {
     /**
      * Indicates if the field is disabled.

package/IconPicker/primitives/components/IconPickerTrigger.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { type VariantProps } from "../../../utils.js";
 declare const iconPickerTriggerVariants: (props?: ({
     size?: "md" | "lg" | "xl" | null | undefined;
-} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IconPickerTriggerProps extends VariantProps<typeof iconPickerTriggerVariants> {
     value?: string;
 }

package/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Image","rest","finalProps","srcSet","Object","keys","map","key","join","createElement"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\n\n// Accepts all props that a normal <img> element would accept.\ninterface ImageProps\n    extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {\n    [key: string]: any;\n}\n\nconst Image = ({ ...rest }: ImageProps) => {\n    const finalProps = { ...rest };\n    const srcSet = finalProps.srcSet;\n    if (srcSet && typeof srcSet === \"object\") {\n        finalProps.srcSet = Object.keys(srcSet)\n            .map(key => `${srcSet[key]} ${key}`)\n            .join(\", \");\n    }\n\n    return <img {...finalProps} />;\n};\n\nexport { Image, type ImageProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;;AAMA,MAAMC,KAAK,GAAGA,CAAC;EAAE,GAAGC;AAAiB,CAAC,KAAK;EACvC,MAAMC,UAAU,GAAG;IAAE,GAAGD;EAAK,CAAC;EAC9B,MAAME,MAAM,GAAGD,UAAU,CAACC,MAAM;EAChC,IAAIA,MAAM,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;IACtCD,UAAU,CAACC,MAAM,GAAGC,MAAM,CAACC,IAAI,CAACF,MAAM,CAAC,CAClCG,GAAG,CAACC,GAAG,IAAI,GAAGJ,MAAM,CAACI,GAAG,CAAC,IAAIA,GAAG,EAAE,CAAC,CACnCC,IAAI,CAAC,IAAI,CAAC;EACnB;EAEA,oBAAOT,KAAA,CAAAU,aAAA,QAASP,UAAa,CAAC;AAClC,CAAC;AAED,SAASF,KAAK","ignoreList":[]}
+{"version":3,"names":["React","Image","rest","finalProps","srcSet","Object","keys","map","key","join","createElement"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\n\n// Accepts all props that a normal <img> element would accept.\ninterface ImageProps extends React.DetailedHTMLProps<\n    React.ImgHTMLAttributes<HTMLImageElement>,\n    HTMLImageElement\n> {\n    [key: string]: any;\n}\n\nconst Image = ({ ...rest }: ImageProps) => {\n    const finalProps = { ...rest };\n    const srcSet = finalProps.srcSet;\n    if (srcSet && typeof srcSet === \"object\") {\n        finalProps.srcSet = Object.keys(srcSet)\n            .map(key => `${srcSet[key]} ${key}`)\n            .join(\", \");\n    }\n\n    return <img {...finalProps} />;\n};\n\nexport { Image, type ImageProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;;AAQA,MAAMC,KAAK,GAAGA,CAAC;EAAE,GAAGC;AAAiB,CAAC,KAAK;EACvC,MAAMC,UAAU,GAAG;IAAE,GAAGD;EAAK,CAAC;EAC9B,MAAME,MAAM,GAAGD,UAAU,CAACC,MAAM;EAChC,IAAIA,MAAM,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;IACtCD,UAAU,CAACC,MAAM,GAAGC,MAAM,CAACC,IAAI,CAACF,MAAM,CAAC,CAClCG,GAAG,CAACC,GAAG,IAAI,GAAGJ,MAAM,CAACI,GAAG,CAAC,IAAIA,GAAG,EAAE,CAAC,CACnCC,IAAI,CAAC,IAAI,CAAC;EACnB;EAEA,oBAAOT,KAAA,CAAAU,aAAA,QAASP,UAAa,CAAC;AAClC,CAAC;AAED,SAASF,KAAK","ignoreList":[]}

package/Input/Input.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 InputStories from './Input.stories';
+import * as InputStories from "./Input.stories";
 
 <Meta of={InputStories} />
 
@@ -16,8 +16,8 @@ import React, { useState } from "react";
 import { Input } from "@webiny/admin-ui";
 
 const InputExample = () => {
-    const [value, setValue] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [value, setValue] = useState("");
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleValidation = () => {
         if (!value.trim()) {
@@ -46,25 +46,26 @@ const InputExample = () => {
             />
         </div>
     );
+
 };
 
 export default InputExample;
 
 ` } }
-    additionalActions={[
-        {
-            title: 'Open in GitHub',
-            onClick: () => {
-                window.open(
-                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Input/Input.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/Input/Input.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={InputStories.Documentation}/>
+<Controls of={InputStories.Documentation} />
 
 ```jsx
 import React, { useState } from "react";
@@ -72,36 +73,36 @@ import React, { useState } from "react";
 import { Input } from "@webiny/admin-ui";
 
 const InputExample = () => {
-    const [value, setValue] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleValidation = () => {
-        if (!value.trim()) {
-            setValidation({ isValid: false, message: "This field is required" });
-        } else if (value.trim().length < 3) {
-            setValidation({ isValid: false, message: "Must be at least 3 characters long" });
-        } else {
-            setValidation({ isValid: true, message: "" });
-        }
-    };
-
-    return (
-        <div>
-            <Input
-                type="text"
-                label="Full Name"
-                description="Enter your full name as it appears on your ID"
-                note="This will be used for official documentation"
-                placeholder="Enter your full name"
-                required={true}
-                value={value}
-                validation={validation}
-                onChange={newValue => setValue(newValue)}
-                onBlur={handleValidation}
-                onEnter={handleValidation}
-            />
-        </div>
-    );
+  const [value, setValue] = useState("");
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleValidation = () => {
+    if (!value.trim()) {
+      setValidation({ isValid: false, message: "This field is required" });
+    } else if (value.trim().length < 3) {
+      setValidation({ isValid: false, message: "Must be at least 3 characters long" });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  return (
+    <div>
+      <Input
+        type="text"
+        label="Full Name"
+        description="Enter your full name as it appears on your ID"
+        note="This will be used for official documentation"
+        placeholder="Enter your full name"
+        required={true}
+        value={value}
+        validation={validation}
+        onChange={newValue => setValue(newValue)}
+        onBlur={handleValidation}
+        onEnter={handleValidation}
+      />
+    </div>
+  );
 };
 
 export default InputExample;
@@ -110,6 +111,7 @@ export default InputExample;
 ## Examples
 
 ### With Validate Function
+
 The Input component supports validation using the validation prop, as shown in the example above.
 For more complex or reusable validation scenarios, you can use the validate prop, which accepts a custom validation function.
 Try entering **exists@** in the input box to see it in action, and click on **Show code** to view the validation function.
@@ -120,8 +122,8 @@ import React, { useState } from "react";
 import { Input } from "@webiny/admin-ui";
 
 const EmailInput = () => {
-    const [value, setValue] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: undefined });
+const [value, setValue] = useState("");
+const [validation, setValidation] = useState({ isValid: true, message: undefined });
 
     const validate = async () => {
         // Simulate API call delay
@@ -146,33 +148,42 @@ const EmailInput = () => {
             validation={validation}
         />
     );
+
 };` } }
 />
 
 ## Anatomy
 
 ### Input Anatomy
-<img src="/images/storybook/input/anatomy.png" alt="Input Anatomy"/>
+
+<img src="/images/storybook/input/anatomy.png" alt="Input Anatomy" />
 
 ### Styles
-<img src="/images/storybook/input/styles.png" alt="Styles"/>
+
+<img src="/images/storybook/input/styles.png" alt="Styles" />
 
 ### Field Size
-<img src="/images/storybook/input/field-size.png" alt="Field Size"/>
+
+<img src="/images/storybook/input/field-size.png" alt="Field Size" />
 
 ### States and Styles
-<img src="/images/storybook/input/states-and-styles.png" alt="States and Styles"/>
+
+<img src="/images/storybook/input/states-and-styles.png" alt="States and Styles" />
 
 ### Label Anatomy
-<img src="/images/storybook/input/label-anatomy.png" alt="Label Anatomy"/>
+
+<img src="/images/storybook/input/label-anatomy.png" alt="Label Anatomy" />
 
 ### Label Properties
-<img src="/images/storybook/input/label-properties.png" alt="Label Properties"/>
+
+<img src="/images/storybook/input/label-properties.png" alt="Label Properties" />
 
 ### Label Options
-<img src="/images/storybook/input/label-options.png" alt="Label Options"/>
+
+<img src="/images/storybook/input/label-options.png" alt="Label Options" />
 
 ## Usage
 
 ### Used in forms
-<img src="/images/storybook/input/used-in-forms.png" alt="Used in forms"/>
+
+<img src="/images/storybook/input/used-in-forms.png" alt="Used in forms" />

package/Input/InputPrimitive.d.ts

@@ -17,7 +17,7 @@ declare const inputVariants: (props?: ({
     size?: "md" | "lg" | "xl" | null | undefined;
     variant?: "primary" | "secondary" | "ghost" | "ghost-negative" | null | undefined;
     invalid?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type InputPrimitiveProps<TValue = any> = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> & VariantProps<typeof inputVariants> & {
     /**
      * Icon to be displayed at the start of the input field.

package/Label/Label.d.ts

@@ -5,7 +5,7 @@ declare const labelVariants: (props?: ({
     weight?: "strong" | "light" | null | undefined;
     disabled?: boolean | null | undefined;
     invalid?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface LabelProps extends Omit<React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, "children">, VariantProps<typeof labelVariants> {
     text: React.ReactNode;
     value?: React.ReactNode;

package/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Label","LabelPrimitive","cn","makeDecoratable","cva","LabelDescription","LabelHint","LabelRequired","LabelValue","useAdminUi","labelVariants","variants","weight","strong","light","disabled","true","invalid","defaultVariants","LabelBase","className","description","hint","required","value","text","props","compileMarkdown","createElement","Root","Object","assign","content"],"sources":["Label.tsx"],"sourcesContent":["import React from \"react\";\nimport { Label as LabelPrimitive } from \"radix-ui\";\nimport { cn, makeDecoratable, cva, type VariantProps } from \"~/utils.js\";\nimport { LabelDescription, LabelHint, LabelRequired, LabelValue } from \"./components/index.js\";\nimport { useAdminUi } from \"~/AdminUiProvider/index.js\";\n\nconst labelVariants = cva(\n    [\n        \"inline-flex items-center justify-between w-full text-sm\",\n        \"text-neutral-primary whitespace-nowrap\",\n        \"peer-disabled:text-neutral-disabled peer-disabled:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            weight: {\n                strong: \"font-semibold\",\n                light: \"font-regular\"\n            },\n            disabled: {\n                true: \"text-neutral-disabled cursor-not-allowed\"\n            },\n            invalid: {\n                true: \"webiny_label-invalid\"\n            }\n        },\n        defaultVariants: {\n            weight: \"strong\"\n        }\n    }\n);\n\ninterface LabelProps\n    extends Omit<React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, \"children\">,\n        VariantProps<typeof labelVariants> {\n    text: React.ReactNode;\n    value?: React.ReactNode;\n    description?: React.ReactNode;\n    hint?: React.ReactNode;\n    required?: boolean;\n    disabled?: boolean;\n}\n\nconst LabelBase = ({\n    className,\n    disabled,\n    description,\n    hint,\n    required,\n    value,\n    text,\n    weight,\n    invalid,\n    ...props\n}: LabelProps) => {\n    const { compileMarkdown } = useAdminUi();\n\n    if (!text) {\n        return null;\n    }\n\n    return (\n        <LabelPrimitive.Root\n            className={cn(labelVariants({ weight, disabled, invalid }), className)}\n            {...props}\n        >\n            <span>\n                <span className={\"flex items-center gap-xxs\"}>\n                    <span className={\"webiny_label-text\"}>{text}</span>\n                    {description && (\n                        <LabelDescription\n                            content={compileMarkdown(description)}\n                            disabled={disabled}\n                        />\n                    )}\n                    {hint && <LabelHint content={compileMarkdown(hint)} />}\n                    {required && <LabelRequired disabled={disabled} />}\n                </span>\n            </span>\n            {value && <LabelValue value={value} weight={weight} disabled={disabled} />}\n        </LabelPrimitive.Root>\n    );\n};\n\nconst Label = makeDecoratable(\"Label\", LabelBase);\n\nexport { Label, type LabelProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,IAAIC,cAAc,QAAQ,UAAU;AAClD,SAASC,EAAE,EAAEC,eAAe,EAAEC,GAAG;AACjC,SAASC,gBAAgB,EAAEC,SAAS,EAAEC,aAAa,EAAEC,UAAU;AAC/D,SAASC,UAAU;AAEnB,MAAMC,aAAa,GAAGN,GAAG,CACrB,CACI,yDAAyD,EACzD,wCAAwC,EACxC,sEAAsE,CACzE,EACD;EACIO,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,MAAM,EAAE,eAAe;MACvBC,KAAK,EAAE;IACX,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV,CAAC;IACDC,OAAO,EAAE;MACLD,IAAI,EAAE;IACV;EACJ,CAAC;EACDE,eAAe,EAAE;IACbN,MAAM,EAAE;EACZ;AACJ,CACJ,CAAC;AAaD,MAAMO,SAAS,GAAGA,CAAC;EACfC,SAAS;EACTL,QAAQ;EACRM,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,KAAK;EACLC,IAAI;EACJb,MAAM;EACNK,OAAO;EACP,GAAGS;AACK,CAAC,KAAK;EACd,MAAM;IAAEC;EAAgB,CAAC,GAAGlB,UAAU,CAAC,CAAC;EAExC,IAAI,CAACgB,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACI1B,KAAA,CAAA6B,aAAA,CAAC3B,cAAc,CAAC4B,IAAI,EAAAC,MAAA,CAAAC,MAAA;IAChBX,SAAS,EAAElB,EAAE,CAACQ,aAAa,CAAC;MAAEE,MAAM;MAAEG,QAAQ;MAAEE;IAAQ,CAAC,CAAC,EAAEG,SAAS;EAAE,GACnEM,KAAK,gBAET3B,KAAA,CAAA6B,aAAA,4BACI7B,KAAA,CAAA6B,aAAA;IAAMR,SAAS,EAAE;EAA4B,gBACzCrB,KAAA,CAAA6B,aAAA;IAAMR,SAAS,EAAE;EAAoB,GAAEK,IAAW,CAAC,EAClDJ,WAAW,iBACRtB,KAAA,CAAA6B,aAAA,CAACvB,gBAAgB;IACb2B,OAAO,EAAEL,eAAe,CAACN,WAAW,CAAE;IACtCN,QAAQ,EAAEA;EAAS,CACtB,CACJ,EACAO,IAAI,iBAAIvB,KAAA,CAAA6B,aAAA,CAACtB,SAAS;IAAC0B,OAAO,EAAEL,eAAe,CAACL,IAAI;EAAE,CAAE,CAAC,EACrDC,QAAQ,iBAAIxB,KAAA,CAAA6B,aAAA,CAACrB,aAAa;IAACQ,QAAQ,EAAEA;EAAS,CAAE,CAC/C,CACJ,CAAC,EACNS,KAAK,iBAAIzB,KAAA,CAAA6B,aAAA,CAACpB,UAAU;IAACgB,KAAK,EAAEA,KAAM;IAACZ,MAAM,EAAEA,MAAO;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACxD,CAAC;AAE9B,CAAC;AAED,MAAMf,KAAK,GAAGG,eAAe,CAAC,OAAO,EAAEgB,SAAS,CAAC;AAEjD,SAASnB,KAAK","ignoreList":[]}
+{"version":3,"names":["React","Label","LabelPrimitive","cn","makeDecoratable","cva","LabelDescription","LabelHint","LabelRequired","LabelValue","useAdminUi","labelVariants","variants","weight","strong","light","disabled","true","invalid","defaultVariants","LabelBase","className","description","hint","required","value","text","props","compileMarkdown","createElement","Root","Object","assign","content"],"sources":["Label.tsx"],"sourcesContent":["import React from \"react\";\nimport { Label as LabelPrimitive } from \"radix-ui\";\nimport { cn, makeDecoratable, cva, type VariantProps } from \"~/utils.js\";\nimport { LabelDescription, LabelHint, LabelRequired, LabelValue } from \"./components/index.js\";\nimport { useAdminUi } from \"~/AdminUiProvider/index.js\";\n\nconst labelVariants = cva(\n    [\n        \"inline-flex items-center justify-between w-full text-sm\",\n        \"text-neutral-primary whitespace-nowrap\",\n        \"peer-disabled:text-neutral-disabled peer-disabled:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            weight: {\n                strong: \"font-semibold\",\n                light: \"font-regular\"\n            },\n            disabled: {\n                true: \"text-neutral-disabled cursor-not-allowed\"\n            },\n            invalid: {\n                true: \"webiny_label-invalid\"\n            }\n        },\n        defaultVariants: {\n            weight: \"strong\"\n        }\n    }\n);\n\ninterface LabelProps\n    extends\n        Omit<React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, \"children\">,\n        VariantProps<typeof labelVariants> {\n    text: React.ReactNode;\n    value?: React.ReactNode;\n    description?: React.ReactNode;\n    hint?: React.ReactNode;\n    required?: boolean;\n    disabled?: boolean;\n}\n\nconst LabelBase = ({\n    className,\n    disabled,\n    description,\n    hint,\n    required,\n    value,\n    text,\n    weight,\n    invalid,\n    ...props\n}: LabelProps) => {\n    const { compileMarkdown } = useAdminUi();\n\n    if (!text) {\n        return null;\n    }\n\n    return (\n        <LabelPrimitive.Root\n            className={cn(labelVariants({ weight, disabled, invalid }), className)}\n            {...props}\n        >\n            <span>\n                <span className={\"flex items-center gap-xxs\"}>\n                    <span className={\"webiny_label-text\"}>{text}</span>\n                    {description && (\n                        <LabelDescription\n                            content={compileMarkdown(description)}\n                            disabled={disabled}\n                        />\n                    )}\n                    {hint && <LabelHint content={compileMarkdown(hint)} />}\n                    {required && <LabelRequired disabled={disabled} />}\n                </span>\n            </span>\n            {value && <LabelValue value={value} weight={weight} disabled={disabled} />}\n        </LabelPrimitive.Root>\n    );\n};\n\nconst Label = makeDecoratable(\"Label\", LabelBase);\n\nexport { Label, type LabelProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,IAAIC,cAAc,QAAQ,UAAU;AAClD,SAASC,EAAE,EAAEC,eAAe,EAAEC,GAAG;AACjC,SAASC,gBAAgB,EAAEC,SAAS,EAAEC,aAAa,EAAEC,UAAU;AAC/D,SAASC,UAAU;AAEnB,MAAMC,aAAa,GAAGN,GAAG,CACrB,CACI,yDAAyD,EACzD,wCAAwC,EACxC,sEAAsE,CACzE,EACD;EACIO,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,MAAM,EAAE,eAAe;MACvBC,KAAK,EAAE;IACX,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV,CAAC;IACDC,OAAO,EAAE;MACLD,IAAI,EAAE;IACV;EACJ,CAAC;EACDE,eAAe,EAAE;IACbN,MAAM,EAAE;EACZ;AACJ,CACJ,CAAC;AAcD,MAAMO,SAAS,GAAGA,CAAC;EACfC,SAAS;EACTL,QAAQ;EACRM,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,KAAK;EACLC,IAAI;EACJb,MAAM;EACNK,OAAO;EACP,GAAGS;AACK,CAAC,KAAK;EACd,MAAM;IAAEC;EAAgB,CAAC,GAAGlB,UAAU,CAAC,CAAC;EAExC,IAAI,CAACgB,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACI1B,KAAA,CAAA6B,aAAA,CAAC3B,cAAc,CAAC4B,IAAI,EAAAC,MAAA,CAAAC,MAAA;IAChBX,SAAS,EAAElB,EAAE,CAACQ,aAAa,CAAC;MAAEE,MAAM;MAAEG,QAAQ;MAAEE;IAAQ,CAAC,CAAC,EAAEG,SAAS;EAAE,GACnEM,KAAK,gBAET3B,KAAA,CAAA6B,aAAA,4BACI7B,KAAA,CAAA6B,aAAA;IAAMR,SAAS,EAAE;EAA4B,gBACzCrB,KAAA,CAAA6B,aAAA;IAAMR,SAAS,EAAE;EAAoB,GAAEK,IAAW,CAAC,EAClDJ,WAAW,iBACRtB,KAAA,CAAA6B,aAAA,CAACvB,gBAAgB;IACb2B,OAAO,EAAEL,eAAe,CAACN,WAAW,CAAE;IACtCN,QAAQ,EAAEA;EAAS,CACtB,CACJ,EACAO,IAAI,iBAAIvB,KAAA,CAAA6B,aAAA,CAACtB,SAAS;IAAC0B,OAAO,EAAEL,eAAe,CAACL,IAAI;EAAE,CAAE,CAAC,EACrDC,QAAQ,iBAAIxB,KAAA,CAAA6B,aAAA,CAACrB,aAAa;IAACQ,QAAQ,EAAEA;EAAS,CAAE,CAC/C,CACJ,CAAC,EACNS,KAAK,iBAAIzB,KAAA,CAAA6B,aAAA,CAACpB,UAAU;IAACgB,KAAK,EAAEA,KAAM;IAACZ,MAAM,EAAEA,MAAO;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACxD,CAAC;AAE9B,CAAC;AAED,MAAMf,KAAK,GAAGG,eAAe,CAAC,OAAO,EAAEgB,SAAS,CAAC;AAEjD,SAASnB,KAAK","ignoreList":[]}

package/Label/Label.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 LabelStories from './Label.stories';
+import * as LabelStories from "./Label.stories";
 
 <Meta of={LabelStories} />
 
@@ -12,7 +12,6 @@ The Label component is a fundamental UI element used to provide clear text descr
 It enhances usability by clearly identifying input fields and improves accessibility by properly associating labels with their corresponding form elements using htmlFor.
 The component supports a range of customization options, including descriptions, hints, required indicators, disabled and invalid states, and visual weight variants.
 
-
 ## Usage
 
 <Canvas of={LabelStories.Documentation} source={ { code: `
@@ -20,7 +19,7 @@ import React, { useState } from "react";
 import { Label, Input } from "@webiny/admin-ui";
 
 const LabelExample = () => {
-    const [value, setValue] = useState("");
+const [value, setValue] = useState("");
 
     return (
         <div className="mb-4 space-y-2">
@@ -47,22 +46,23 @@ const LabelExample = () => {
             />
         </div>
     );
+
 };
 
 export default LabelExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Label/Label.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/Label/Label.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={LabelStories.Documentation} />
@@ -72,33 +72,33 @@ import React, { useState } from "react";
 import { Label, Input } from "@webiny/admin-ui";
 
 const LabelExample = () => {
-    const [value, setValue] = useState("");
-
-    return (
-        <div className="mb-4 space-y-2">
-            <Label
-                id="full-name-label"
-                htmlFor="full-name"
-                text="Full Name"
-                description="As shown on your government-issued ID"
-                hint="Include middle name if applicable"
-                required={true}
-                value="Label value will be shown here"
-                weight="strong"
-                invalid={false}
-                disabled={false}
-            />
-
-            <Input
-                id="full-name"
-                type="text"
-                placeholder="e.g. John Michael Doe"
-                required={true}
-                value={value}
-                onChange={(e) => setValue(e.target.value)}
-            />
-        </div>
-    );
+  const [value, setValue] = useState("");
+
+  return (
+    <div className="mb-4 space-y-2">
+      <Label
+        id="full-name-label"
+        htmlFor="full-name"
+        text="Full Name"
+        description="As shown on your government-issued ID"
+        hint="Include middle name if applicable"
+        required={true}
+        value="Label value will be shown here"
+        weight="strong"
+        invalid={false}
+        disabled={false}
+      />
+
+      <Input
+        id="full-name"
+        type="text"
+        placeholder="e.g. John Michael Doe"
+        required={true}
+        value={value}
+        onChange={e => setValue(e.target.value)}
+      />
+    </div>
+  );
 };
 
 export default LabelExample;

package/Label/components/LabelDescription.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "../../utils.js";
 declare const labelDescriptionVariants: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface LabelDescriptionProps extends VariantProps<typeof labelDescriptionVariants> {
     content: React.ReactNode;
 }

package/Label/components/LabelRequired.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "../../utils.js";
 declare const labelRequiredVariants: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type LabelRequiredProps = VariantProps<typeof labelRequiredVariants>;
 declare const LabelRequired: ({ disabled }: LabelRequiredProps) => React.JSX.Element;
 export { LabelRequired, type LabelRequiredProps };

package/Label/components/LabelValue.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "../../utils.js";
 declare const labelValueVariants: (props?: ({
     weight?: "strong" | "light" | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface LabelValueProps extends VariantProps<typeof labelValueVariants> {
     value: React.ReactNode;
 }

package/Link/Link.d.ts

@@ -5,7 +5,7 @@ declare const linkVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "inherit" | null | undefined;
     variant?: "primary" | "secondary" | "primary-negative" | "secondary-negative" | null | undefined;
     underline?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type LinkProps = LinkComponentProps & VariantProps<typeof linkVariants> & {
     disabled?: boolean;
 };