@webiny/admin-ui 6.0.0-alpha.5 → 6.0.0-rc.0

package/Input/InputPrimitive.js

@@ -1,12 +1,12 @@
 import * as React from "react";
-import { cn, cva, makeDecoratable } from "../utils";
+import { cn, cva, makeDecoratable } from "../utils.js";
 const InputIcon = ({
   icon,
   inputSize,
   className
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: cn("wby-fill-inherit", className)
+    className: cn("fill-inherit", className)
   }, /*#__PURE__*/React.cloneElement(icon, {
     ...icon.props,
     size: inputSize === "xl" ? "lg" : "sm" // Map icon size based on the input size.
@@ -20,18 +20,18 @@ const InputIcon = ({
  * because these variants can be used by both input and div elements. The last one is used by `MultiAutocomplete` component,
  * where the `inputVariants` is used to style a div that wraps multiple elements (input, Tags, icons, etc.)
  */
-const inputVariants = cva(["wby-relative wby-flex wby-items-center wby-gap-sm wby-w-full", "wby-border-sm wby-text-md", "has-[:disabled]:wby-cursor-not-allowed data-[disabled=true]:wby-cursor-not-allowed"], {
+const inputVariants = cva(["relative flex items-center gap-sm w-full", "border-sm text-md", "has-disabled:cursor-not-allowed data-[disabled=true]:cursor-not-allowed"], {
   variants: {
     size: {
-      md: ["wby-rounded-md", "wby-py-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"],
-      lg: ["wby-rounded-md", "wby-py-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"],
-      xl: ["wby-rounded-lg wby-leading-6", "wby-py-[calc(theme(padding.md)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.md)-theme(borderWidth.sm))]"]
+      md: ["rounded-md", "py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]"],
+      lg: ["rounded-md", "py-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]"],
+      xl: ["rounded-lg leading-6", "py-[calc(var(--padding-md)-(var(--border-width-sm)))] px-[calc(var(--padding-md)-(var(--border-width-sm)))]"]
     },
     variant: {
-      primary: ["wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong placeholder:wby-text-neutral-dimmed wby-fill-neutral-xstrong", "hover:wby-border-neutral-strong", "focus-within:!wby-border-neutral-black", "data-[focused=true]:!wby-border-neutral-black", "has-[:disabled]:wby-bg-neutral-disabled has-[:disabled]:wby-border-neutral-muted has-[:disabled]:hover:wby-border-neutral-muted has-[:disabled]:wby-text-neutral-disabled has-[:disabled]:placeholder:wby-text-neutral-disabled has-[:disabled]:wby-fill-neutral-disabled", "data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-border-neutral-muted data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled data-[disabled=true]:wby-fill-neutral-disabled"],
-      secondary: ["wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed wby-fill-neutral-xstrong", "hover:wby-bg-neutral-dimmed", "focus-within:!wby-bg-neutral-base focus-within:!wby-border-neutral-black", "data-[focused=true]:!wby-bg-neutral-base data-[focused=true]:!wby-border-neutral-black", "has-[:disabled]:wby-bg-neutral-disabled has-[:disabled]:wby-text-neutral-disabled has-[:disabled]:placeholder:wby-text-neutral-disabled has-[:disabled]:wby-fill-neutral-disabled", "data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled data-[disabled=true]:wby-fill-neutral-disabled"],
-      ghost: ["wby-bg-transparent wby-border-transparent wby-text-neutral-strong placeholder:wby-text-neutral-dimmed", "hover:wby-bg-neutral-dark/5", "focus-within:!wby-bg-neutral-dark/5", "data-[focused=true]:!wby-bg-neutral-dark/5", "has-[:disabled]:wby-bg-transparent has-[:disabled]:wby-text-neutral-disabled has-[:disabled]:placeholder:wby-text-neutral-disabled has-[:disabled]:wby-fill-neutral-disabled", "data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled data-[disabled=true]:wby-fill-neutral-disabled"],
-      "ghost-negative": ["wby-bg-transparent wby-border-transparent wby-text-neutral-light/50 placeholder:wby-text-neutral-light/50 wby-fill-neutral-base/50", "hover:wby-bg-neutral-base/20", "focus-within:!wby-bg-neutral-base focus-within:!wby-text-neutral-primary focus-within:!placeholder:wby-text-neutral-dimmed focus-within:!wby-fill-neutral-xstrong", "data-[focused=true]:!wby-bg-neutral-base data-[focused=true]:!wby-text-neutral-primary data-[focused=true]:!placeholder:wby-text-neutral-dimmed data-[focused=true]:!wby-fill-neutral-xstrong", "has-[:disabled]:wby-bg-transparent has-[:disabled]:wby-text-neutral-disabled/50 has-[:disabled]:placeholder:wby-text-neutral-disabled/50", "data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled/50 data-[disabled=true]:placeholder:wby-text-neutral-disabled/50"]
+      primary: ["bg-neutral-base border-neutral-muted text-neutral-strong placeholder:text-neutral-dimmed fill-neutral-xstrong", "hover:border-neutral-strong", "focus-within:border-neutral-black!", "data-[focused=true]:border-neutral-black!", "has-disabled:bg-neutral-disabled has-disabled:border-neutral-muted has-disabled:hover:border-neutral-muted has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled", "data-[disabled=true]:bg-neutral-disabled data-[disabled=true]:border-neutral-muted data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled"],
+      secondary: ["bg-neutral-light border-neutral-subtle text-neutral-strong placeholder:text-neutral-dimmed fill-neutral-xstrong", "hover:bg-neutral-dimmed", "focus-within:bg-neutral-base! focus-within:border-neutral-black!", "data-[focused=true]:bg-neutral-base! data-[focused=true]:border-neutral-black!", "has-disabled:bg-neutral-disabled has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled", "data-[disabled=true]:bg-neutral-disabled data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled"],
+      ghost: ["bg-transparent border-transparent text-neutral-strong placeholder:text-neutral-dimmed", "hover:bg-neutral-dark/5", "focus-within:bg-neutral-dark/5!", "data-[focused=true]:bg-neutral-dark/5!", "has-disabled:bg-transparent has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled", "data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled"],
+      "ghost-negative": ["bg-transparent border-transparent text-neutral-light/50 placeholder:text-neutral-light/50 fill-neutral-base/50", "hover:bg-neutral-base/20", "focus-within:bg-neutral-base! focus-within:text-neutral-primary! focus-within:!placeholder:text-neutral-dimmed focus-within:fill-neutral-xstrong!", "data-[focused=true]:bg-neutral-base! data-[focused=true]:text-neutral-primary! data-[focused=true]:!placeholder:text-neutral-dimmed data-[focused=true]:fill-neutral-xstrong!", "has-disabled:bg-transparent has-disabled:text-neutral-disabled/50 has-disabled:placeholder:text-neutral-disabled/50", "data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled/50 data-[disabled=true]:placeholder:text-neutral-disabled/50"]
     },
     invalid: {
       true: ""
@@ -42,19 +42,19 @@ const inputVariants = cva(["wby-relative wby-flex wby-items-center wby-gap-sm wb
   {
     variant: "primary",
     invalid: true,
-    class: "!wby-border-destructive-default"
+    class: "border-destructive-default!"
   }, {
     variant: "secondary",
     invalid: true,
-    class: "!wby-border-destructive-default"
+    class: "border-destructive-default!"
   }, {
     variant: "ghost",
     invalid: true,
-    class: "!wby-border-destructive-subtle !wby-bg-destructive-subtle"
+    class: "border-destructive-subtle! bg-destructive-subtle!"
   }, {
     variant: "ghost-negative",
     invalid: true,
-    class: "!wby-border-destructive-default !wby-bg-destructive-subtle wby-text-neutral-primary placeholder:wby-text-neutral-dimmed !wby-fill-neutral-xstrong"
+    class: "border-destructive-default! bg-destructive-subtle! text-neutral-primary placeholder:text-neutral-dimmed fill-neutral-xstrong!"
   }],
   defaultVariants: {
     size: "lg",
@@ -118,7 +118,7 @@ const DecoratableInputPrimitive = ({
     icon: startIcon
   }), /*#__PURE__*/React.createElement("input", Object.assign({}, props, {
     ref: inputRef,
-    className: cn(["wby-w-full wby-bg-transparent wby-border-none wby-text-md wby-peer", "focus-visible:wby-outline-none", "disabled:wby-cursor-not-allowed", "file:wby-text-sm file:wby-font-semibold"]),
+    className: cn(["w-full bg-transparent border-none text-md peer", "focus-visible:outline-none", "disabled:cursor-not-allowed", "file:text-sm file:font-semibold"]),
     disabled: disabled,
     size: maxLength,
     onChange: onChange,

package/Input/InputPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","makeDecoratable","InputIcon","icon","inputSize","className","createElement","cloneElement","props","size","inputVariants","variants","md","lg","xl","variant","primary","secondary","ghost","invalid","true","compoundVariants","class","defaultVariants","DecoratableInputPrimitive","autoSelect","disabled","endIcon","forwardEventOnChange","inputRef","maxLength","onChange","originalOnChange","onEnter","onEscape","onKeyDown","originalOnKeyDown","onFocus","originalOnFocus","startIcon","value","useCallback","event","target","e","key","select","Object","assign","ref","InputPrimitive"],"sources":["InputPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Icon as BaseIcon } from \"~/Icon\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils\";\n\ninterface InputIconProps extends React.HTMLAttributes<HTMLDivElement> {\n    icon: React.ReactElement;\n    inputSize?: VariantProps<typeof inputVariants>[\"size\"];\n}\n\nconst InputIcon = ({ icon, inputSize, className }: InputIconProps) => {\n    return (\n        <div className={cn(\"wby-fill-inherit\", className)}>\n            {React.cloneElement(icon, {\n                ...icon.props,\n                size: inputSize === \"xl\" ? \"lg\" : \"sm\" // Map icon size based on the input size.\n            })}\n        </div>\n    );\n};\n\n/**\n * Input\n *\n * We support both `disabled` and `data-disabled` as well as `focused` and `data-focused` variants\n * because these variants can be used by both input and div elements. The last one is used by `MultiAutocomplete` component,\n * where the `inputVariants` is used to style a div that wraps multiple elements (input, Tags, icons, etc.)\n */\nconst inputVariants = cva(\n    [\n        \"wby-relative wby-flex wby-items-center wby-gap-sm wby-w-full\",\n        \"wby-border-sm wby-text-md\",\n        \"has-[:disabled]:wby-cursor-not-allowed data-[disabled=true]:wby-cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            size: {\n                md: [\n                    \"wby-rounded-md\",\n                    \"wby-py-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]\"\n                ],\n                lg: [\n                    \"wby-rounded-md\",\n                    \"wby-py-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]\"\n                ],\n                xl: [\n                    \"wby-rounded-lg wby-leading-6\",\n                    \"wby-py-[calc(theme(padding.md)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.md)-theme(borderWidth.sm))]\"\n                ]\n            },\n            variant: {\n                primary: [\n                    \"wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong placeholder:wby-text-neutral-dimmed wby-fill-neutral-xstrong\",\n                    \"hover:wby-border-neutral-strong\",\n                    \"focus-within:!wby-border-neutral-black\",\n                    \"data-[focused=true]:!wby-border-neutral-black\",\n                    \"has-[:disabled]:wby-bg-neutral-disabled has-[:disabled]:wby-border-neutral-muted has-[:disabled]:hover:wby-border-neutral-muted has-[:disabled]:wby-text-neutral-disabled has-[:disabled]:placeholder:wby-text-neutral-disabled has-[:disabled]:wby-fill-neutral-disabled\",\n                    \"data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-border-neutral-muted data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled data-[disabled=true]:wby-fill-neutral-disabled\"\n                ],\n                secondary: [\n                    \"wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed wby-fill-neutral-xstrong\",\n                    \"hover:wby-bg-neutral-dimmed\",\n                    \"focus-within:!wby-bg-neutral-base focus-within:!wby-border-neutral-black\",\n                    \"data-[focused=true]:!wby-bg-neutral-base data-[focused=true]:!wby-border-neutral-black\",\n                    \"has-[:disabled]:wby-bg-neutral-disabled has-[:disabled]:wby-text-neutral-disabled has-[:disabled]:placeholder:wby-text-neutral-disabled has-[:disabled]:wby-fill-neutral-disabled\",\n                    \"data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled data-[disabled=true]:wby-fill-neutral-disabled\"\n                ],\n                ghost: [\n                    \"wby-bg-transparent wby-border-transparent wby-text-neutral-strong placeholder:wby-text-neutral-dimmed\",\n                    \"hover:wby-bg-neutral-dark/5\",\n                    \"focus-within:!wby-bg-neutral-dark/5\",\n                    \"data-[focused=true]:!wby-bg-neutral-dark/5\",\n                    \"has-[:disabled]:wby-bg-transparent has-[:disabled]:wby-text-neutral-disabled has-[:disabled]:placeholder:wby-text-neutral-disabled has-[:disabled]:wby-fill-neutral-disabled\",\n                    \"data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled data-[disabled=true]:wby-fill-neutral-disabled\"\n                ],\n                \"ghost-negative\": [\n                    \"wby-bg-transparent wby-border-transparent wby-text-neutral-light/50 placeholder:wby-text-neutral-light/50 wby-fill-neutral-base/50\",\n                    \"hover:wby-bg-neutral-base/20\",\n                    \"focus-within:!wby-bg-neutral-base focus-within:!wby-text-neutral-primary focus-within:!placeholder:wby-text-neutral-dimmed focus-within:!wby-fill-neutral-xstrong\",\n                    \"data-[focused=true]:!wby-bg-neutral-base data-[focused=true]:!wby-text-neutral-primary data-[focused=true]:!placeholder:wby-text-neutral-dimmed data-[focused=true]:!wby-fill-neutral-xstrong\",\n                    \"has-[:disabled]:wby-bg-transparent has-[:disabled]:wby-text-neutral-disabled/50 has-[:disabled]:placeholder:wby-text-neutral-disabled/50\",\n                    \"data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled/50 data-[disabled=true]:placeholder:wby-text-neutral-disabled/50\"\n                ]\n            },\n            invalid: {\n                true: \"\"\n            }\n        },\n        compoundVariants: [\n            // Add specific classNames in case of invalid inputs: note the difference between the ghost and the other variants.\n            {\n                variant: \"primary\",\n                invalid: true,\n                class: \"!wby-border-destructive-default\"\n            },\n            {\n                variant: \"secondary\",\n                invalid: true,\n                class: \"!wby-border-destructive-default\"\n            },\n            {\n                variant: \"ghost\",\n                invalid: true,\n                class: \"!wby-border-destructive-subtle !wby-bg-destructive-subtle\"\n            },\n            {\n                variant: \"ghost-negative\",\n                invalid: true,\n                class: \"!wby-border-destructive-default !wby-bg-destructive-subtle wby-text-neutral-primary placeholder:wby-text-neutral-dimmed !wby-fill-neutral-xstrong\"\n            }\n        ],\n        defaultVariants: {\n            size: \"lg\",\n            variant: \"primary\"\n        }\n    }\n);\n\ntype InputPrimitiveProps<TValue = any> = Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    \"size\" | \"onChange\"\n> &\n    VariantProps<typeof inputVariants> & {\n        /**\n         * Icon to be displayed at the start of the input field.\n         */\n        startIcon?: React.ReactElement<typeof BaseIcon> | React.ReactElement;\n        /**\n         * Icon to be displayed at the end of the input field.\n         */\n        endIcon?: React.ReactElement<typeof BaseIcon> | React.ReactElement;\n        /**\n         * Maximum length of the input field.\n         */\n        maxLength?: React.InputHTMLAttributes<HTMLInputElement>[\"size\"];\n        /**\n         * Reference to the input element.\n         */\n        inputRef?: React.Ref<HTMLInputElement>;\n        /**\n         * If true, it will pass the native `event` to the `onChange` callback\n         */\n        forwardEventOnChange?: boolean;\n        /**\n         * Callback function to be called when the Enter key is pressed.\n         */\n        onEnter?: InputPrimitiveProps[\"onKeyDown\"];\n        /**\n         * Callback function to be called when the Esc key is pressed.\n         */\n        onEscape?: InputPrimitiveProps[\"onKeyDown\"];\n        /**\n         * A callback that is executed each time a value is changed.\n         */\n        onChange?: (value: TValue) => void;\n        /**\n         * If true, will select the value in the input on focus.\n         */\n        autoSelect?: boolean;\n    };\n\nconst DecoratableInputPrimitive = ({\n    autoSelect,\n    className,\n    disabled,\n    endIcon,\n    forwardEventOnChange,\n    inputRef,\n    invalid,\n    maxLength,\n    onChange: originalOnChange,\n    onEnter,\n    onEscape,\n    onKeyDown: originalOnKeyDown,\n    onFocus: originalOnFocus,\n    size,\n    startIcon,\n    value,\n    variant,\n    ...props\n}: InputPrimitiveProps) => {\n    const onChange = React.useCallback(\n        (event: React.SyntheticEvent<HTMLInputElement>) => {\n            if (!originalOnChange) {\n                return;\n            }\n\n            // @ts-expect-error\n            originalOnChange(forwardEventOnChange ? event : event.target.value);\n        },\n        [forwardEventOnChange, originalOnChange]\n    );\n\n    const onKeyDown = React.useCallback(\n        (e: React.KeyboardEvent<HTMLInputElement>) => {\n            if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                onEnter(e);\n            }\n\n            if (typeof onEscape === \"function\" && e.key === \"Escape\") {\n                onEscape(e);\n            }\n\n            if (typeof originalOnKeyDown === \"function\") {\n                return originalOnKeyDown(e);\n            }\n        },\n        [originalOnKeyDown, onEnter]\n    );\n\n    const onFocus = React.useCallback(\n        (e: React.FocusEvent<HTMLInputElement>) => {\n            if (originalOnFocus) {\n                originalOnFocus(e);\n            }\n\n            if (autoSelect) {\n                e.target.select();\n            }\n        },\n        [originalOnFocus, autoSelect]\n    );\n\n    return (\n        <div className={cn(inputVariants({ variant, size, invalid }), className)}>\n            {startIcon && <InputIcon icon={startIcon} />}\n            <input\n                {...props}\n                ref={inputRef}\n                className={cn([\n                    \"wby-w-full wby-bg-transparent wby-border-none wby-text-md wby-peer\",\n                    \"focus-visible:wby-outline-none\",\n                    \"disabled:wby-cursor-not-allowed\",\n                    \"file:wby-text-sm file:wby-font-semibold\"\n                ])}\n                disabled={disabled}\n                size={maxLength}\n                onChange={onChange}\n                onKeyDown={onKeyDown}\n                value={value ?? \"\"}\n                onFocus={onFocus}\n            />\n            {endIcon && <InputIcon icon={endIcon} />}\n        </div>\n    );\n};\n\nconst InputPrimitive = makeDecoratable(\"InputPrimitive\", DecoratableInputPrimitive);\n\nexport { InputIcon, InputPrimitive, inputVariants, type InputIconProps, type InputPrimitiveProps };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","makeDecoratable","InputIcon","icon","inputSize","className","createElement","cloneElement","props","size","inputVariants","variants","md","lg","xl","variant","primary","secondary","ghost","invalid","true","compoundVariants","class","defaultVariants","DecoratableInputPrimitive","autoSelect","disabled","endIcon","forwardEventOnChange","inputRef","maxLength","onChange","originalOnChange","onEnter","onEscape","onKeyDown","originalOnKeyDown","onFocus","originalOnFocus","startIcon","value","useCallback","event","target","e","key","select","Object","assign","ref","InputPrimitive"],"sources":["InputPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Icon as BaseIcon } from \"~/Icon/index.js\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\ninterface InputIconProps extends React.HTMLAttributes<HTMLDivElement> {\n    icon: React.ReactElement;\n    inputSize?: VariantProps<typeof inputVariants>[\"size\"];\n}\n\nconst InputIcon = ({ icon, inputSize, className }: InputIconProps) => {\n    return (\n        <div className={cn(\"fill-inherit\", className)}>\n            {React.cloneElement(icon, {\n                ...icon.props,\n                size: inputSize === \"xl\" ? \"lg\" : \"sm\" // Map icon size based on the input size.\n            })}\n        </div>\n    );\n};\n\n/**\n * Input\n *\n * We support both `disabled` and `data-disabled` as well as `focused` and `data-focused` variants\n * because these variants can be used by both input and div elements. The last one is used by `MultiAutocomplete` component,\n * where the `inputVariants` is used to style a div that wraps multiple elements (input, Tags, icons, etc.)\n */\nconst inputVariants = cva(\n    [\n        \"relative flex items-center gap-sm w-full\",\n        \"border-sm text-md\",\n        \"has-disabled:cursor-not-allowed data-[disabled=true]:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            size: {\n                md: [\n                    \"rounded-md\",\n                    \"py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ],\n                lg: [\n                    \"rounded-md\",\n                    \"py-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ],\n                xl: [\n                    \"rounded-lg leading-6\",\n                    \"py-[calc(var(--padding-md)-(var(--border-width-sm)))] px-[calc(var(--padding-md)-(var(--border-width-sm)))]\"\n                ]\n            },\n            variant: {\n                primary: [\n                    \"bg-neutral-base border-neutral-muted text-neutral-strong placeholder:text-neutral-dimmed fill-neutral-xstrong\",\n                    \"hover:border-neutral-strong\",\n                    \"focus-within:border-neutral-black!\",\n                    \"data-[focused=true]:border-neutral-black!\",\n                    \"has-disabled:bg-neutral-disabled has-disabled:border-neutral-muted has-disabled:hover:border-neutral-muted has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled\",\n                    \"data-[disabled=true]:bg-neutral-disabled data-[disabled=true]:border-neutral-muted data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled\"\n                ],\n                secondary: [\n                    \"bg-neutral-light border-neutral-subtle text-neutral-strong placeholder:text-neutral-dimmed fill-neutral-xstrong\",\n                    \"hover:bg-neutral-dimmed\",\n                    \"focus-within:bg-neutral-base! focus-within:border-neutral-black!\",\n                    \"data-[focused=true]:bg-neutral-base! data-[focused=true]:border-neutral-black!\",\n                    \"has-disabled:bg-neutral-disabled has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled\",\n                    \"data-[disabled=true]:bg-neutral-disabled data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled\"\n                ],\n                ghost: [\n                    \"bg-transparent border-transparent text-neutral-strong placeholder:text-neutral-dimmed\",\n                    \"hover:bg-neutral-dark/5\",\n                    \"focus-within:bg-neutral-dark/5!\",\n                    \"data-[focused=true]:bg-neutral-dark/5!\",\n                    \"has-disabled:bg-transparent has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled\",\n                    \"data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled\"\n                ],\n                \"ghost-negative\": [\n                    \"bg-transparent border-transparent text-neutral-light/50 placeholder:text-neutral-light/50 fill-neutral-base/50\",\n                    \"hover:bg-neutral-base/20\",\n                    \"focus-within:bg-neutral-base! focus-within:text-neutral-primary! focus-within:!placeholder:text-neutral-dimmed focus-within:fill-neutral-xstrong!\",\n                    \"data-[focused=true]:bg-neutral-base! data-[focused=true]:text-neutral-primary! data-[focused=true]:!placeholder:text-neutral-dimmed data-[focused=true]:fill-neutral-xstrong!\",\n                    \"has-disabled:bg-transparent has-disabled:text-neutral-disabled/50 has-disabled:placeholder:text-neutral-disabled/50\",\n                    \"data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled/50 data-[disabled=true]:placeholder:text-neutral-disabled/50\"\n                ]\n            },\n            invalid: {\n                true: \"\"\n            }\n        },\n        compoundVariants: [\n            // Add specific classNames in case of invalid inputs: note the difference between the ghost and the other variants.\n            {\n                variant: \"primary\",\n                invalid: true,\n                class: \"border-destructive-default!\"\n            },\n            {\n                variant: \"secondary\",\n                invalid: true,\n                class: \"border-destructive-default!\"\n            },\n            {\n                variant: \"ghost\",\n                invalid: true,\n                class: \"border-destructive-subtle! bg-destructive-subtle!\"\n            },\n            {\n                variant: \"ghost-negative\",\n                invalid: true,\n                class: \"border-destructive-default! bg-destructive-subtle! text-neutral-primary placeholder:text-neutral-dimmed fill-neutral-xstrong!\"\n            }\n        ],\n        defaultVariants: {\n            size: \"lg\",\n            variant: \"primary\"\n        }\n    }\n);\n\ntype InputPrimitiveProps<TValue = any> = Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    \"size\" | \"onChange\"\n> &\n    VariantProps<typeof inputVariants> & {\n        /**\n         * Icon to be displayed at the start of the input field.\n         */\n        startIcon?: React.ReactElement<typeof BaseIcon> | React.ReactElement;\n        /**\n         * Icon to be displayed at the end of the input field.\n         */\n        endIcon?: React.ReactElement<typeof BaseIcon> | React.ReactElement;\n        /**\n         * Maximum length of the input field.\n         */\n        maxLength?: React.InputHTMLAttributes<HTMLInputElement>[\"size\"];\n        /**\n         * Reference to the input element.\n         */\n        inputRef?: React.Ref<HTMLInputElement>;\n        /**\n         * If true, it will pass the native `event` to the `onChange` callback\n         */\n        forwardEventOnChange?: boolean;\n        /**\n         * Callback function to be called when the Enter key is pressed.\n         */\n        onEnter?: InputPrimitiveProps[\"onKeyDown\"];\n        /**\n         * Callback function to be called when the Esc key is pressed.\n         */\n        onEscape?: InputPrimitiveProps[\"onKeyDown\"];\n        /**\n         * A callback that is executed each time a value is changed.\n         */\n        onChange?: (value: TValue) => void;\n        /**\n         * If true, will select the value in the input on focus.\n         */\n        autoSelect?: boolean;\n    };\n\nconst DecoratableInputPrimitive = ({\n    autoSelect,\n    className,\n    disabled,\n    endIcon,\n    forwardEventOnChange,\n    inputRef,\n    invalid,\n    maxLength,\n    onChange: originalOnChange,\n    onEnter,\n    onEscape,\n    onKeyDown: originalOnKeyDown,\n    onFocus: originalOnFocus,\n    size,\n    startIcon,\n    value,\n    variant,\n    ...props\n}: InputPrimitiveProps) => {\n    const onChange = React.useCallback(\n        (event: React.SyntheticEvent<HTMLInputElement>) => {\n            if (!originalOnChange) {\n                return;\n            }\n\n            // @ts-expect-error\n            originalOnChange(forwardEventOnChange ? event : event.target.value);\n        },\n        [forwardEventOnChange, originalOnChange]\n    );\n\n    const onKeyDown = React.useCallback(\n        (e: React.KeyboardEvent<HTMLInputElement>) => {\n            if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                onEnter(e);\n            }\n\n            if (typeof onEscape === \"function\" && e.key === \"Escape\") {\n                onEscape(e);\n            }\n\n            if (typeof originalOnKeyDown === \"function\") {\n                return originalOnKeyDown(e);\n            }\n        },\n        [originalOnKeyDown, onEnter]\n    );\n\n    const onFocus = React.useCallback(\n        (e: React.FocusEvent<HTMLInputElement>) => {\n            if (originalOnFocus) {\n                originalOnFocus(e);\n            }\n\n            if (autoSelect) {\n                e.target.select();\n            }\n        },\n        [originalOnFocus, autoSelect]\n    );\n\n    return (\n        <div className={cn(inputVariants({ variant, size, invalid }), className)}>\n            {startIcon && <InputIcon icon={startIcon} />}\n            <input\n                {...props}\n                ref={inputRef}\n                className={cn([\n                    \"w-full bg-transparent border-none text-md peer\",\n                    \"focus-visible:outline-none\",\n                    \"disabled:cursor-not-allowed\",\n                    \"file:text-sm file:font-semibold\"\n                ])}\n                disabled={disabled}\n                size={maxLength}\n                onChange={onChange}\n                onKeyDown={onKeyDown}\n                value={value ?? \"\"}\n                onFocus={onFocus}\n            />\n            {endIcon && <InputIcon icon={endIcon} />}\n        </div>\n    );\n};\n\nconst InputPrimitive = makeDecoratable(\"InputPrimitive\", DecoratableInputPrimitive);\n\nexport { InputIcon, InputPrimitive, inputVariants, type InputIconProps, type InputPrimitiveProps };\n"],"mappings":"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","ignoreList":[]}

package/Input/InputPrimitive.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { InputPrimitive } from "./InputPrimitive";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { InputPrimitive } from "./InputPrimitive.js";
 declare const meta: Meta<typeof InputPrimitive>;
 export default meta;
 type Story = StoryObj<typeof InputPrimitive>;

package/Input/InputPrimitive.stories.js

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { ReactComponent as NotificationsIcon } from "@webiny/icons/notifications.svg";
 import { ReactComponent as CalendarIcon } from "@webiny/icons/calendar_month.svg";
-import { InputPrimitive } from "./InputPrimitive";
-import { Icon } from "../Icon";
+import { InputPrimitive } from "./InputPrimitive.js";
+import { Icon } from "../Icon/index.js";
 const meta = {
   title: "Components/Form Primitives/Input",
   component: InputPrimitive,
@@ -28,12 +28,12 @@ const meta = {
   render: args => {
     const [value, setValue] = useState(args.value);
     return /*#__PURE__*/React.createElement("div", {
-      className: "wby-w-full"
+      className: "w-full"
     }, /*#__PURE__*/React.createElement(InputPrimitive, Object.assign({}, args, {
       value: value,
       onChange: setValue
     })), /*#__PURE__*/React.createElement("div", {
-      className: "wby-mt-4 wby-text-center"
+      className: "mt-4 text-center"
     }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
   }
 };
@@ -152,7 +152,7 @@ export const GhostNegativeVariant = {
     placeholder: "Custom placeholder"
   },
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-dark wby-text-neutral-light wby-p-xl"
+    className: "bg-neutral-dark text-neutral-light p-xl"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export const GhostNegativeVariantDisabled = {
@@ -161,7 +161,7 @@ export const GhostNegativeVariantDisabled = {
     disabled: true
   },
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-dark wby-text-neutral-light wby-p-xl"
+    className: "bg-neutral-dark text-neutral-light p-xl"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export const GhostNegativeVariantInvalid = {
@@ -170,7 +170,7 @@ export const GhostNegativeVariantInvalid = {
     invalid: true
   },
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-dark wby-text-neutral-light wby-p-xl"
+    className: "bg-neutral-dark text-neutral-light p-xl"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export const WithForwardEventOnChange = {

package/Input/InputPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","ReactComponent","NotificationsIcon","CalendarIcon","InputPrimitive","Icon","meta","title","component","argTypes","onChange","action","onEnter","onKeyDown","type","control","options","defaultValue","parameters","layout","render","args","value","setValue","createElement","className","Object","assign","Default","MediumSize","placeholder","size","LargeSize","ExtraLargeSize","WithStartIcon","startIcon","label","icon","WithEndIcon","endIcon","WithStartAndEndIcons","PrimaryVariant","variant","PrimaryVariantDisabled","disabled","PrimaryVariantInvalid","invalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","decorators","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange","forwardEventOnChange"],"sources":["InputPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as NotificationsIcon } from \"@webiny/icons/notifications.svg\";\nimport { ReactComponent as CalendarIcon } from \"@webiny/icons/calendar_month.svg\";\n\nimport { InputPrimitive } from \"./InputPrimitive\";\nimport { Icon } from \"~/Icon\";\n\nconst meta: Meta<typeof InputPrimitive> = {\n    title: \"Components/Form Primitives/Input\",\n    component: InputPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onEnter: { action: \"onEnter\" },\n        onKeyDown: { action: \"onKeyDown\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"wby-w-full\"}>\n                <InputPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof InputPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />\n    }\n};\n\nexport const WithEndIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const WithStartAndEndIcons: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />,\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"primary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-text-neutral-light wby-p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-text-neutral-light wby-p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-text-neutral-light wby-p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithForwardEventOnChange: Story = {\n    args: {\n        ...Default.args,\n        forwardEventOnChange: true\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","ReactComponent","NotificationsIcon","CalendarIcon","InputPrimitive","Icon","meta","title","component","argTypes","onChange","action","onEnter","onKeyDown","type","control","options","defaultValue","parameters","layout","render","args","value","setValue","createElement","className","Object","assign","Default","MediumSize","placeholder","size","LargeSize","ExtraLargeSize","WithStartIcon","startIcon","label","icon","WithEndIcon","endIcon","WithStartAndEndIcons","PrimaryVariant","variant","PrimaryVariantDisabled","disabled","PrimaryVariantInvalid","invalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","decorators","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange","forwardEventOnChange"],"sources":["InputPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as NotificationsIcon } from \"@webiny/icons/notifications.svg\";\nimport { ReactComponent as CalendarIcon } from \"@webiny/icons/calendar_month.svg\";\n\nimport { InputPrimitive } from \"./InputPrimitive.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst meta: Meta<typeof InputPrimitive> = {\n    title: \"Components/Form Primitives/Input\",\n    component: InputPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onEnter: { action: \"onEnter\" },\n        onKeyDown: { action: \"onKeyDown\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <InputPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof InputPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />\n    }\n};\n\nexport const WithEndIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const WithStartAndEndIcons: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />,\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"primary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithForwardEventOnChange: Story = {\n    args: {\n        ...Default.args,\n        forwardEventOnChange: true\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Input/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./Input";
-export * from "./InputPrimitive";
+export * from "./Input.js";
+export * from "./InputPrimitive.js";

package/Input/index.js

@@ -1,4 +1,4 @@
-export * from "./Input";
-export * from "./InputPrimitive";
+export * from "./Input.js";
+export * from "./InputPrimitive.js";
 
 //# sourceMappingURL=index.js.map

package/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Input\";\nexport * from \"./InputPrimitive\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Input.js\";\nexport * from \"./InputPrimitive.js\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/Label/Label.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
+import React from "react";
 import { Label as LabelPrimitive } from "radix-ui";
-import { type VariantProps } from "../utils";
+import { type VariantProps } from "../utils.js";
 declare const labelVariants: (props?: ({
     weight?: "strong" | "light" | null | undefined;
     disabled?: boolean | null | undefined;
     invalid?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
 interface LabelProps extends Omit<React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, "children">, VariantProps<typeof labelVariants> {
     text: React.ReactNode;
     value?: React.ReactNode;
@@ -27,7 +27,7 @@ declare const Label: (({ className, disabled, description, hint, required, value
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null) & {
         original: ({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null;
         originalName: string;
         displayName: string;

package/Label/Label.js

@@ -1,15 +1,16 @@
-import * as React from "react";
+import React from "react";
 import { Label as LabelPrimitive } from "radix-ui";
-import { cn, makeDecoratable, cva } from "../utils";
-import { LabelDescription, LabelHint, LabelRequired, LabelValue } from "./components";
-const labelVariants = cva(["wby-inline-flex wby-items-center wby-justify-between wby-w-full wby-text-sm", "wby-text-neutral-primary wby-whitespace-nowrap", "peer-disabled:wby-text-neutral-disabled peer-disabled:wby-cursor-not-allowed"], {
+import { cn, makeDecoratable, cva } from "../utils.js";
+import { LabelDescription, LabelHint, LabelRequired, LabelValue } from "./components/index.js";
+import { useAdminUi } from "../AdminUiProvider/index.js";
+const labelVariants = cva(["inline-flex items-center justify-between w-full text-sm", "text-neutral-primary whitespace-nowrap", "peer-disabled:text-neutral-disabled peer-disabled:cursor-not-allowed"], {
   variants: {
     weight: {
-      strong: "wby-font-semibold",
-      light: "wby-font-regular"
+      strong: "font-semibold",
+      light: "font-regular"
     },
     disabled: {
-      true: "wby-text-neutral-disabled wby-cursor-not-allowed"
+      true: "text-neutral-disabled cursor-not-allowed"
     },
     invalid: {
       true: "webiny_label-invalid"
@@ -31,6 +32,9 @@ const LabelBase = ({
   invalid,
   ...props
 }) => {
+  const {
+    compileMarkdown
+  } = useAdminUi();
   if (!text) {
     return null;
   }
@@ -41,14 +45,14 @@ const LabelBase = ({
       invalid
     }), className)
   }, props), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
-    className: "wby-flex wby-items-center wby-gap-xxs"
+    className: "flex items-center gap-xxs"
   }, /*#__PURE__*/React.createElement("span", {
     className: "webiny_label-text"
   }, text), description && /*#__PURE__*/React.createElement(LabelDescription, {
-    content: description,
+    content: compileMarkdown(description),
     disabled: disabled
   }), hint && /*#__PURE__*/React.createElement(LabelHint, {
-    content: hint
+    content: compileMarkdown(hint)
   }), required && /*#__PURE__*/React.createElement(LabelRequired, {
     disabled: disabled
   }))), value && /*#__PURE__*/React.createElement(LabelValue, {

package/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Label","LabelPrimitive","cn","makeDecoratable","cva","LabelDescription","LabelHint","LabelRequired","LabelValue","labelVariants","variants","weight","strong","light","disabled","true","invalid","defaultVariants","LabelBase","className","description","hint","required","value","text","props","createElement","Root","Object","assign","content"],"sources":["Label.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Label as LabelPrimitive } from \"radix-ui\";\nimport { cn, makeDecoratable, cva, type VariantProps } from \"~/utils\";\nimport { LabelDescription, LabelHint, LabelRequired, LabelValue } from \"./components\";\n\nconst labelVariants = cva(\n    [\n        \"wby-inline-flex wby-items-center wby-justify-between wby-w-full wby-text-sm\",\n        \"wby-text-neutral-primary wby-whitespace-nowrap\",\n        \"peer-disabled:wby-text-neutral-disabled peer-disabled:wby-cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            weight: {\n                strong: \"wby-font-semibold\",\n                light: \"wby-font-regular\"\n            },\n            disabled: {\n                true: \"wby-text-neutral-disabled wby-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    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={\"wby-flex wby-items-center wby-gap-xxs\"}>\n                    <span className={\"webiny_label-text\"}>{text}</span>\n                    {description && <LabelDescription content={description} disabled={disabled} />}\n                    {hint && <LabelHint content={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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,IAAIC,cAAc,QAAQ,UAAU;AAClD,SAASC,EAAE,EAAEC,eAAe,EAAEC,GAAG;AACjC,SAASC,gBAAgB,EAAEC,SAAS,EAAEC,aAAa,EAAEC,UAAU;AAE/D,MAAMC,aAAa,GAAGL,GAAG,CACrB,CACI,6EAA6E,EAC7E,gDAAgD,EAChD,8EAA8E,CACjF,EACD;EACIM,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,MAAM,EAAE,mBAAmB;MAC3BC,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,IAAI,CAACD,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACIzB,KAAA,CAAA2B,aAAA,CAACzB,cAAc,CAAC0B,IAAI,EAAAC,MAAA,CAAAC,MAAA;IAChBV,SAAS,EAAEjB,EAAE,CAACO,aAAa,CAAC;MAAEE,MAAM;MAAEG,QAAQ;MAAEE;IAAQ,CAAC,CAAC,EAAEG,SAAS;EAAE,GACnEM,KAAK,gBAET1B,KAAA,CAAA2B,aAAA,4BACI3B,KAAA,CAAA2B,aAAA;IAAMP,SAAS,EAAE;EAAwC,gBACrDpB,KAAA,CAAA2B,aAAA;IAAMP,SAAS,EAAE;EAAoB,GAAEK,IAAW,CAAC,EAClDJ,WAAW,iBAAIrB,KAAA,CAAA2B,aAAA,CAACrB,gBAAgB;IAACyB,OAAO,EAAEV,WAAY;IAACN,QAAQ,EAAEA;EAAS,CAAE,CAAC,EAC7EO,IAAI,iBAAItB,KAAA,CAAA2B,aAAA,CAACpB,SAAS;IAACwB,OAAO,EAAET;EAAK,CAAE,CAAC,EACpCC,QAAQ,iBAAIvB,KAAA,CAAA2B,aAAA,CAACnB,aAAa;IAACO,QAAQ,EAAEA;EAAS,CAAE,CAC/C,CACJ,CAAC,EACNS,KAAK,iBAAIxB,KAAA,CAAA2B,aAAA,CAAClB,UAAU;IAACe,KAAK,EAAEA,KAAM;IAACZ,MAAM,EAAEA,MAAO;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACxD,CAAC;AAE9B,CAAC;AAED,MAAMd,KAAK,GAAGG,eAAe,CAAC,OAAO,EAAEe,SAAS,CAAC;AAEjD,SAASlB,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 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":[]}

package/Label/Label.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as LabelStories from './Label.stories';
 
@@ -23,7 +23,7 @@ const LabelExample = () => {
     const [value, setValue] = useState("");
 
     return (
-        <div className="wby-mb-4 wby-space-y-2">
+        <div className="mb-4 space-y-2">
             <Label
                 id="full-name-label"
                 htmlFor="full-name"
@@ -75,7 +75,7 @@ const LabelExample = () => {
     const [value, setValue] = useState("");
 
     return (
-        <div className="wby-mb-4 wby-space-y-2">
+        <div className="mb-4 space-y-2">
             <Label
                 id="full-name-label"
                 htmlFor="full-name"

package/Label/Label.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Label } from "./Label";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { Label } from "./Label.js";
 declare const meta: Meta<typeof Label>;
 export default meta;
 type Story = StoryObj<typeof Label>;

package/Label/Label.stories.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { Label } from "./Label";
-import { Tooltip } from "../Tooltip";
-import { Input } from "../Input";
+import { Label } from "./Label.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { Input } from "../Input/index.js";
 const meta = {
   title: "Components/Form/Label",
   component: Label,
@@ -15,7 +15,7 @@ export const Documentation = {
   render: args => {
     const [value, setValue] = React.useState("");
     return /*#__PURE__*/React.createElement("div", {
-      className: "wby-mb-4 wby-space-y-2"
+      className: "mb-4 space-y-2"
     }, /*#__PURE__*/React.createElement(Label, args), /*#__PURE__*/React.createElement(Input, {
       id: args.htmlFor,
       type: "text",
@@ -116,7 +116,7 @@ export const WithValue = {
     value: 24
   },
   render: args => /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-64"
+    className: "w-64"
   }, /*#__PURE__*/React.createElement(Label, args))
 };
 export const Disabled = {
@@ -130,7 +130,7 @@ export const Disabled = {
     value: 24
   },
   render: args => /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-64"
+    className: "w-64"
   }, /*#__PURE__*/React.createElement(Label, args))
 };
 

package/Label/Label.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Label","Tooltip","Input","meta","title","component","parameters","layout","decorators","Story","createElement","Provider","Documentation","render","args","value","setValue","useState","className","id","htmlFor","type","placeholder","required","onChange","e","target","text","description","hint","disabled","weight","invalid","argTypes","control","options","Default","Fragment","LightWeight","Required","WithDescription","WithHint","WithValue","Disabled"],"sources":["Label.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Label } from \"./Label\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { Input } from \"~/Input\";\n\nconst meta: Meta<typeof Label> = {\n    title: \"Components/Form/Label\",\n    component: Label,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Label>;\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = React.useState(\"\");\n\n        return (\n            <div className=\"wby-mb-4 wby-space-y-2\">\n                <Label {...args} />\n                <Input\n                    id={args.htmlFor}\n                    type=\"text\"\n                    placeholder=\"e.g. John Michael Doe\"\n                    required={args.required}\n                    value={value}\n                    onChange={e => setValue(e.target.value)}\n                />\n            </div>\n        );\n    },\n    args: {\n        text: \"Full Name\",\n        htmlFor: \"full-name\",\n        description: \"As shown on your government-issued ID\",\n        hint: \"Include middle name if applicable\",\n        required: true,\n        disabled: false,\n        weight: \"strong\",\n        value: \"Label value will be shown here\",\n        invalid: false\n    },\n    argTypes: {\n        text: {\n            description: \"The text content of the label\",\n            control: \"text\"\n        },\n        htmlFor: {\n            description: \"The ID of the form element this label is associated with\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Additional descriptive text shown next to the label\",\n            control: \"text\"\n        },\n        hint: {\n            description: \"Tooltip hint text that appears on hover\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Whether the associated form field is required\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Whether the label should appear disabled\",\n            control: \"boolean\"\n        },\n        weight: {\n            description: \"The font weight of the label text\",\n            control: \"select\",\n            options: [\"strong\", \"light\"]\n        },\n        value: {\n            description: \"Optional value to display on the right side of the label\",\n            control: \"text\"\n        },\n        invalid: {\n            description: \"Whether the label should appear in an invalid state\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Default: Story = {\n    args: {\n        text: \"Test label\",\n        htmlFor: \"test-field\"\n    },\n    render: args => (\n        <>\n            <input type=\"checkbox\" id={args.htmlFor} />\n            <Label {...args} />\n        </>\n    )\n};\n\nexport const LightWeight: Story = {\n    args: {\n        ...Default.args,\n        weight: \"light\"\n    }\n};\n\nexport const Required: Story = {\n    args: {\n        ...Default.args,\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"(description)\"\n    }\n};\n\nexport const WithHint: Story = {\n    args: {\n        ...Default.args,\n        hint: \"This is an additional message in case context to this label needs to be added\"\n    }\n};\n\nexport const WithValue: Story = {\n    args: {\n        ...Default.args,\n        value: 24\n    },\n    render: args => (\n        <div className=\"wby-w-64\">\n            <Label {...args} />\n        </div>\n    )\n};\n\nexport const Disabled: Story = {\n    args: {\n        htmlFor: \"test-field-disabled\",\n        text: \"Test label\",\n        description: \"(description)\",\n        hint: \"This is an additional message in case context to this label needs to be added\",\n        required: true,\n        disabled: true,\n        value: 24\n    },\n    render: args => (\n        <div className=\"wby-w-64\">\n            <Label {...args} />\n        </div>\n    )\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Label","Tooltip","Input","meta","title","component","parameters","layout","decorators","Story","createElement","Provider","Documentation","render","args","value","setValue","useState","className","id","htmlFor","type","placeholder","required","onChange","e","target","text","description","hint","disabled","weight","invalid","argTypes","control","options","Default","Fragment","LightWeight","Required","WithDescription","WithHint","WithValue","Disabled"],"sources":["Label.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\n\nimport { Label } from \"./Label.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Input } from \"~/Input/index.js\";\n\nconst meta: Meta<typeof Label> = {\n    title: \"Components/Form/Label\",\n    component: Label,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Label>;\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = React.useState(\"\");\n\n        return (\n            <div className=\"mb-4 space-y-2\">\n                <Label {...args} />\n                <Input\n                    id={args.htmlFor}\n                    type=\"text\"\n                    placeholder=\"e.g. John Michael Doe\"\n                    required={args.required}\n                    value={value}\n                    onChange={e => setValue(e.target.value)}\n                />\n            </div>\n        );\n    },\n    args: {\n        text: \"Full Name\",\n        htmlFor: \"full-name\",\n        description: \"As shown on your government-issued ID\",\n        hint: \"Include middle name if applicable\",\n        required: true,\n        disabled: false,\n        weight: \"strong\",\n        value: \"Label value will be shown here\",\n        invalid: false\n    },\n    argTypes: {\n        text: {\n            description: \"The text content of the label\",\n            control: \"text\"\n        },\n        htmlFor: {\n            description: \"The ID of the form element this label is associated with\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Additional descriptive text shown next to the label\",\n            control: \"text\"\n        },\n        hint: {\n            description: \"Tooltip hint text that appears on hover\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Whether the associated form field is required\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Whether the label should appear disabled\",\n            control: \"boolean\"\n        },\n        weight: {\n            description: \"The font weight of the label text\",\n            control: \"select\",\n            options: [\"strong\", \"light\"]\n        },\n        value: {\n            description: \"Optional value to display on the right side of the label\",\n            control: \"text\"\n        },\n        invalid: {\n            description: \"Whether the label should appear in an invalid state\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Default: Story = {\n    args: {\n        text: \"Test label\",\n        htmlFor: \"test-field\"\n    },\n    render: args => (\n        <>\n            <input type=\"checkbox\" id={args.htmlFor} />\n            <Label {...args} />\n        </>\n    )\n};\n\nexport const LightWeight: Story = {\n    args: {\n        ...Default.args,\n        weight: \"light\"\n    }\n};\n\nexport const Required: Story = {\n    args: {\n        ...Default.args,\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"(description)\"\n    }\n};\n\nexport const WithHint: Story = {\n    args: {\n        ...Default.args,\n        hint: \"This is an additional message in case context to this label needs to be added\"\n    }\n};\n\nexport const WithValue: Story = {\n    args: {\n        ...Default.args,\n        value: 24\n    },\n    render: args => (\n        <div className=\"w-64\">\n            <Label {...args} />\n        </div>\n    )\n};\n\nexport const Disabled: Story = {\n    args: {\n        htmlFor: \"test-field-disabled\",\n        text: \"Test label\",\n        description: \"(description)\",\n        hint: \"This is an additional message in case context to this label needs to be added\",\n        required: true,\n        disabled: true,\n        value: 24\n    },\n    render: args => (\n        <div className=\"w-64\">\n            <Label {...args} />\n        </div>\n    )\n};\n"],"mappings":"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","ignoreList":[]}

package/Label/components/LabelDescription.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const labelDescriptionVariants: (props?: ({
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/Label/components/LabelDescription.js

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { cn, cva } from "../../utils";
-import { Text } from "../../Text";
-const labelDescriptionVariants = cva("wby-font-normal wby-text-neutral-strong", {
+import { cn, cva } from "../../utils.js";
+import { Text } from "../../Text/index.js";
+const labelDescriptionVariants = cva("font-normal text-neutral-strong", {
   variants: {
     disabled: {
-      true: "wby-text-neutral-disabled"
+      true: "text-neutral-disabled"
     }
   }
 });

package/Label/components/LabelDescription.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","Text","labelDescriptionVariants","variants","disabled","true","LabelDescription","content","createElement","className","size"],"sources":["LabelDescription.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\nimport { Text } from \"~/Text\";\n\nconst labelDescriptionVariants = cva(\"wby-font-normal wby-text-neutral-strong\", {\n    variants: {\n        disabled: {\n            true: \"wby-text-neutral-disabled\"\n        }\n    }\n});\n\ninterface LabelDescriptionProps extends VariantProps<typeof labelDescriptionVariants> {\n    content: React.ReactNode;\n}\n\nconst LabelDescription = ({ content, disabled }: LabelDescriptionProps) => (\n    <Text className={cn(labelDescriptionVariants({ disabled }))} size={\"sm\"}>\n        {content}\n    </Text>\n);\n\nexport { LabelDescription, type LabelDescriptionProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,IAAI;AAEb,MAAMC,wBAAwB,GAAGF,GAAG,CAAC,yCAAyC,EAAE;EAC5EG,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAMF,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,OAAO;EAAEH;AAAgC,CAAC,kBAClEN,KAAA,CAAAU,aAAA,CAACP,IAAI;EAACQ,SAAS,EAAEV,EAAE,CAACG,wBAAwB,CAAC;IAAEE;EAAS,CAAC,CAAC,CAAE;EAACM,IAAI,EAAE;AAAK,GACnEH,OACC,CACT;AAED,SAASD,gBAAgB","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","Text","labelDescriptionVariants","variants","disabled","true","LabelDescription","content","createElement","className","size"],"sources":["LabelDescription.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst labelDescriptionVariants = cva(\"font-normal text-neutral-strong\", {\n    variants: {\n        disabled: {\n            true: \"text-neutral-disabled\"\n        }\n    }\n});\n\ninterface LabelDescriptionProps extends VariantProps<typeof labelDescriptionVariants> {\n    content: React.ReactNode;\n}\n\nconst LabelDescription = ({ content, disabled }: LabelDescriptionProps) => (\n    <Text className={cn(labelDescriptionVariants({ disabled }))} size={\"sm\"}>\n        {content}\n    </Text>\n);\n\nexport { LabelDescription, type LabelDescriptionProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,IAAI;AAEb,MAAMC,wBAAwB,GAAGF,GAAG,CAAC,iCAAiC,EAAE;EACpEG,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAMF,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,OAAO;EAAEH;AAAgC,CAAC,kBAClEN,KAAA,CAAAU,aAAA,CAACP,IAAI;EAACQ,SAAS,EAAEV,EAAE,CAACG,wBAAwB,CAAC;IAAEE;EAAS,CAAC,CAAC,CAAE;EAACM,IAAI,EAAE;AAAK,GACnEH,OACC,CACT;AAED,SAASD,gBAAgB","ignoreList":[]}

package/Label/components/LabelHint.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
-import { Tooltip } from "../../Tooltip";
-import { Icon } from "../../Icon";
+import { Tooltip } from "../../Tooltip/index.js";
+import { Icon } from "../../Icon/index.js";
 const LabelHint = ({
   content
 }) => /*#__PURE__*/React.createElement(Tooltip, {

package/Label/components/LabelHint.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","InfoIcon","Tooltip","Icon","LabelHint","content","createElement","trigger","icon","size","label","color"],"sources":["LabelHint.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { Icon } from \"~/Icon\";\n\ninterface LabelHintProps {\n    content: React.ReactNode;\n}\n\nconst LabelHint = ({ content }: LabelHintProps) => (\n    <Tooltip\n        content={content}\n        trigger={\n            <Icon\n                icon={<InfoIcon />}\n                size=\"xs\"\n                label={\"More information\"}\n                color={\"neutral-light\"}\n            />\n        }\n    />\n);\n\nexport { LabelHint, type LabelHintProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,QAAQ,QAAQ,wBAAwB;AACnE,SAASC,OAAO;AAChB,SAASC,IAAI;AAMb,MAAMC,SAAS,GAAGA,CAAC;EAAEC;AAAwB,CAAC,kBAC1CN,KAAA,CAAAO,aAAA,CAACJ,OAAO;EACJG,OAAO,EAAEA,OAAQ;EACjBE,OAAO,eACHR,KAAA,CAAAO,aAAA,CAACH,IAAI;IACDK,IAAI,eAAET,KAAA,CAAAO,aAAA,CAACL,QAAQ,MAAE,CAAE;IACnBQ,IAAI,EAAC,IAAI;IACTC,KAAK,EAAE,kBAAmB;IAC1BC,KAAK,EAAE;EAAgB,CAC1B;AACJ,CACJ,CACJ;AAED,SAASP,SAAS","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","InfoIcon","Tooltip","Icon","LabelHint","content","createElement","trigger","icon","size","label","color"],"sources":["LabelHint.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\ninterface LabelHintProps {\n    content: React.ReactNode;\n}\n\nconst LabelHint = ({ content }: LabelHintProps) => (\n    <Tooltip\n        content={content}\n        trigger={\n            <Icon\n                icon={<InfoIcon />}\n                size=\"xs\"\n                label={\"More information\"}\n                color={\"neutral-light\"}\n            />\n        }\n    />\n);\n\nexport { LabelHint, type LabelHintProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,QAAQ,QAAQ,wBAAwB;AACnE,SAASC,OAAO;AAChB,SAASC,IAAI;AAMb,MAAMC,SAAS,GAAGA,CAAC;EAAEC;AAAwB,CAAC,kBAC1CN,KAAA,CAAAO,aAAA,CAACJ,OAAO;EACJG,OAAO,EAAEA,OAAQ;EACjBE,OAAO,eACHR,KAAA,CAAAO,aAAA,CAACH,IAAI;IACDK,IAAI,eAAET,KAAA,CAAAO,aAAA,CAACL,QAAQ,MAAE,CAAE;IACnBQ,IAAI,EAAC,IAAI;IACTC,KAAK,EAAE,kBAAmB;IAC1BC,KAAK,EAAE;EAAgB,CAC1B;AACJ,CACJ,CACJ;AAED,SAASP,SAAS","ignoreList":[]}

package/Label/components/LabelRequired.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const labelRequiredVariants: (props?: ({
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;