npm - @webiny/admin-ui - Versions diffs - 6.0.0-alpha.0 → 6.0.0-alpha.2 - Mend

@webiny/admin-ui 6.0.0-alpha.0 → 6.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (413) hide show

package/Input/InputPrimitive.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","cn","cva","makeDecoratable","inputIconVariants","variants","inputSize","md","lg","xl","position","start","end","disabled","true","defaultVariants","compoundVariants","class","InputIcon","icon","className","createElement","cloneElement","props","size","inputVariants","variant","primary","secondary","ghost","iconPosition","both","invalid","getIconPosition","startIcon","endIcon","DecoratableInputPrimitive","autoSelect","forwardEventOnChange","inputRef","maxLength","onChange","originalOnChange","onEnter","onEscape","onKeyDown","originalOnKeyDown","onFocus","originalOnFocus","value","useCallback","event","target","e","key","select","Object","assign","ref","InputPrimitive"],"sources":["InputPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Icon as BaseIcon } from \"~/Icon\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils\";\n\n/*\n Icon\n /\nconst inputIconVariants = cva(\"wby-absolute wby-fill-neutral-xstrong\", {\n variants: {\n // Define dummy variants to be used in combination with `compoundVariants` below.\n inputSize: {\n md: \"wby-top-sm\",\n lg: \"wby-top-sm-extra\",\n xl: \"wby-top-md\"\n },\n position: {\n start: \"\",\n end: \"\"\n },\n disabled: {\n true: \"wby-fill-neutral-disabled\"\n }\n },\n defaultVariants: {\n inputSize: \"lg\",\n position: \"start\"\n },\n compoundVariants: [\n // The icon position is `absolute` and is adjusted horizontally across its parent using left and right.\n {\n inputSize: \"md\",\n position: \"start\",\n class: \"wby-left-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]\"\n },\n {\n inputSize: \"md\",\n position: \"end\",\n class: \"wby-right-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]\"\n },\n {\n inputSize: \"lg\",\n position: \"start\",\n class: \"wby-left-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]\"\n },\n {\n inputSize: \"lg\",\n position: \"end\",\n class: \"wby-right-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]\"\n },\n {\n inputSize: \"xl\",\n position: \"start\",\n class: \"wby-left-[calc(theme(spacing.md)-theme(borderWidth.sm))]\"\n },\n {\n inputSize: \"xl\",\n position: \"end\",\n class: \"wby-right-[calc(theme(spacing.md)-theme(borderWidth.sm))]\"\n }\n ]\n});\n\ninterface InputIconProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof inputIconVariants> {\n icon: React.ReactElement;\n}\n\nconst InputIcon = ({ icon, disabled, position, inputSize, className }: InputIconProps) => {\n return (\n <div className={cn(inputIconVariants({ position, disabled, inputSize }), 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-w-full wby-border-sm wby-text-md wby-peer\",\n \"focus-visible:wby-outline-none\",\n \"disabled:wby-cursor-not-allowed data-[disabled=true]:wby-cursor-not-allowed\",\n \"file:wby-bg-transparent file:wby-border-none file:wby-text-sm file:wby-font-semibold\"\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\",\n \"hover:wby-border-neutral-strong\",\n \"focus:wby-border-neutral-black\",\n \"data-[focused=true]:wby-border-neutral-black\",\n \"disabled:wby-bg-neutral-disabled disabled:wby-border-neutral-dimmed disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled\",\n \"data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-border-neutral-dimmed data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled\"\n ],\n secondary: [\n \"wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed\",\n \"hover:wby-bg-neutral-dimmed\",\n \"focus:wby-bg-neutral-base focus:wby-border-neutral-black\",\n \"data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-border-neutral-black\",\n \"disabled:wby-bg-neutral-disabled disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-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\"\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:wby-bg-neutral-dark/5\",\n \"data-[focused=true]:wby-bg-neutral-dark/5\",\n \"disabled:wby-bg-transparent disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled\",\n \"data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled\"\n ],\n \"ghost-negative\": [\n \"wby-bg-transparent wby-border-transparent wby-text-neutral-light/50 placeholder:wby-text-neutral-light/50\",\n \"hover:wby-bg-neutral-base/20\",\n \"focus:wby-bg-neutral-base focus:wby-text-neutral-primary focus:placeholder:wby-text-neutral-dimmed\",\n \"data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-bg-neutral-primary data-[focused=true]:placeholder:wby-text-neutral-dimmed\",\n \"disabled:wby-bg-transparent disabled:wby-text-neutral-disabled/50 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 iconPosition: {\n start: \"wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]\",\n end: \"wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]\",\n both: [\n \"wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]\",\n \"wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]\"\n ]\n },\n invalid: {\n true: \"\"\n }\n },\n compoundVariants: [\n // Prevent text overlap with icons, add extra padding for icons.\n {\n size: \"lg\",\n iconPosition: \"start\",\n class: \"wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]\"\n },\n {\n size: \"lg\",\n iconPosition: \"end\",\n class: \"wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]\"\n },\n {\n size: \"lg\",\n iconPosition: \"both\",\n class: [\n \"wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]\",\n \"wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]\"\n ]\n },\n {\n size: \"xl\",\n iconPosition: \"start\",\n class: \"wby-pl-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]\"\n },\n {\n size: \"xl\",\n iconPosition: \"end\",\n class: \"wby-pr-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]\"\n },\n {\n size: \"xl\",\n iconPosition: \"both\",\n class: [\n \"wby-pl-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]\",\n \"wby-pr-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]\"\n ]\n },\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\"\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 getIconPosition = (\n startIcon?: InputPrimitiveProps[\"startIcon\"],\n endIcon?: InputPrimitiveProps[\"endIcon\"]\n): \"start\" \| \"end\" \| \"both\" \| undefined => {\n if (startIcon && endIcon) {\n return \"both\";\n }\n if (startIcon) {\n return \"start\";\n }\n if (endIcon) {\n return \"end\";\n }\n return;\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 iconPosition = getIconPosition(startIcon, endIcon);\n\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(\"wby-relative wby-flex wby-items-center wby-w-full\", className)}>\n {startIcon && (\n <InputIcon\n disabled={disabled}\n icon={startIcon}\n inputSize={size}\n position={\"start\"}\n />\n )}\n <input\n {...props}\n ref={inputRef}\n className={cn(inputVariants({ variant, size, iconPosition, invalid }))}\n disabled={disabled}\n size={maxLength}\n onChange={onChange}\n onKeyDown={onKeyDown}\n value={value ?? \"\"}\n onFocus={onFocus}\n />\n {endIcon && (\n <InputIcon disabled={disabled} icon={endIcon} inputSize={size} position={\"end\"} />\n )}\n </div>\n );\n};\n\nconst InputPrimitive = makeDecoratable(\"InputPrimitive\", DecoratableInputPrimitive);\n\nexport {\n InputIcon,\n InputPrimitive,\n getIconPosition,\n inputVariants,\n inputIconVariants,\n type InputIconProps,\n type InputPrimitiveProps\n};\n"],"mappings":"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","ignoreList":[]}
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":[]}

package/Input/InputPrimitive.stories.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from "react";
+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";
@@ -24,6 +24,17 @@ const meta = {
   },
   parameters: {
     layout: "padded"
+  },
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wby-w-full"
+    }, /*#__PURE__*/React.createElement(InputPrimitive, Object.assign({}, args, {
+      value: value,
+      onChange: setValue
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "wby-mt-4 wby-text-center"
+    }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
   }
 };
 export default meta;
@@ -79,6 +90,7 @@ export const WithStartAndEndIcons = {
 };
 export const PrimaryVariant = {
   args: {
+    ...WithStartAndEndIcons.args,
     variant: "primary",
     placeholder: "Custom placeholder"
   }
@@ -97,6 +109,7 @@ export const PrimaryVariantInvalid = {
 };
 export const SecondaryVariant = {
   args: {
+    ...WithStartAndEndIcons.args,
     variant: "secondary",
     placeholder: "Custom placeholder"
   }
@@ -115,6 +128,7 @@ export const SecondaryVariantInvalid = {
 };
 export const GhostVariant = {
   args: {
+    ...WithStartAndEndIcons.args,
     variant: "ghost",
     placeholder: "Custom placeholder"
   }
@@ -133,11 +147,12 @@ export const GhostVariantInvalid = {
 };
 export const GhostNegativeVariant = {
   args: {
+    ...WithStartAndEndIcons.args,
     variant: "ghost-negative",
     placeholder: "Custom placeholder"
   },
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-dark wby-p-xl"
+    className: "wby-bg-neutral-dark wby-text-neutral-light wby-p-xl"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export const GhostNegativeVariantDisabled = {
@@ -146,7 +161,7 @@ export const GhostNegativeVariantDisabled = {
     disabled: true
   },
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-dark wby-p-xl"
+    className: "wby-bg-neutral-dark wby-text-neutral-light wby-p-xl"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export const GhostNegativeVariantInvalid = {
@@ -155,7 +170,7 @@ export const GhostNegativeVariantInvalid = {
     invalid: true
   },
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-dark wby-p-xl"
+    className: "wby-bg-neutral-dark wby-text-neutral-light wby-p-xl"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export const WithForwardEventOnChange = {

package/Input/InputPrimitive.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","ReactComponent","NotificationsIcon","CalendarIcon","InputPrimitive","Icon","meta","title","component","argTypes","onChange","action","onEnter","onKeyDown","type","control","options","defaultValue","parameters","layout","Default","MediumSize","args","placeholder","size","LargeSize","ExtraLargeSize","WithStartIcon","startIcon","createElement","label","icon","WithEndIcon","endIcon","WithStartAndEndIcons","PrimaryVariant","variant","PrimaryVariantDisabled","disabled","PrimaryVariantInvalid","invalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","decorators","Story","className","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange","forwardEventOnChange"],"sources":["InputPrimitive.stories.tsx"],"sourcesContent":["import React 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};\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 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 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 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 variant: \"ghost-negative\",\n placeholder: \"Custom placeholder\"\n },\n decorators: [\n Story => (\n <div className=\"wby-bg-neutral-dark 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-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-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":[]}
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":[]}

package/Link/Link.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import React from "react";
 import { type VariantProps } from "../utils";
 import { type LinkProps as WebinyReactRouterLinkProps } from "@webiny/react-router";
 declare const linkVariants: (props?: ({
-    size?: "inherit" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    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").ClassProp) | undefined) => string;

package/List/components/ListItemAction.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IconButtonProps as IconButtonProps } from "../../Button";
+import type { IconButtonProps as IconButtonProps } from "../../Button";
 type ListItemActionProps = IconButtonProps;
 declare const ListItemAction: ((props: ListItemActionProps) => React.JSX.Element) & {
     original: (props: ListItemActionProps) => React.JSX.Element;

package/List/components/ListItemAction.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","makeDecoratable","withStaticProps","IconButton","ListItemSeparator","DecoratableListItemAction","props","createElement","Object","assign","variant","size","ListItemAction","Separator"],"sources":["ListItemAction.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport { ~~IconButton,~~ IconButtonProps as IconButtonProps } from \"~/Button\";\nimport { ListItemSeparator } from \"./ListItemSeparator\";\n\ntype ListItemActionProps = IconButtonProps;\n\nconst DecoratableListItemAction = (props: ListItemActionProps) => {\n return <IconButton variant={\"ghost\"} size={\"sm\"} {...props} />;\n};\n\nconst ListItemAction = withStaticProps(\n makeDecoratable(\"ListItemAction\", DecoratableListItemAction),\n {\n Separator: ListItemSeparator\n }\n);\n\nexport { ListItemAction, type ListItemActionProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe;~~AACzC~~,SAASC,UAAU;AACnB,SAASC,iBAAiB;AAI1B,MAAMC,yBAAyB,GAAIC,KAA0B,IAAK;EAC9D,oBAAON,KAAA,CAAAO,aAAA,CAACJ,UAAU,EAAAK,MAAA,CAAAC,MAAA;IAACC,OAAO,EAAE,OAAQ;IAACC,IAAI,EAAE;EAAK,GAAKL,KAAK,CAAG,CAAC;AAClE,CAAC;AAED,MAAMM,cAAc,GAAGV,eAAe,CAClCD,eAAe,CAAC,gBAAgB,EAAEI,yBAAyB,CAAC,EAC5D;EACIQ,SAAS,EAAET;AACf,CACJ,CAAC;AAED,SAASQ,cAAc","ignoreList":[]}
1	+ {"version":3,"names":["React","makeDecoratable","withStaticProps","IconButton","ListItemSeparator","DecoratableListItemAction","props","createElement","Object","assign","variant","size","ListItemAction","Separator"],"sources":["ListItemAction.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport type { IconButtonProps as IconButtonProps } from \"~/Button\";\nimport { IconButton } from \"~/Button\";\nimport { ListItemSeparator } from \"./ListItemSeparator\";\n\ntype ListItemActionProps = IconButtonProps;\n\nconst DecoratableListItemAction = (props: ListItemActionProps) => {\n return <IconButton variant={\"ghost\"} size={\"sm\"} {...props} />;\n};\n\nconst ListItemAction = withStaticProps(\n makeDecoratable(\"ListItemAction\", DecoratableListItemAction),\n {\n Separator: ListItemSeparator\n }\n);\n\nexport { ListItemAction, type ListItemActionProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe;AAEzC,SAASC,UAAU;AACnB,SAASC,iBAAiB;AAI1B,MAAMC,yBAAyB,GAAIC,KAA0B,IAAK;EAC9D,oBAAON,KAAA,CAAAO,aAAA,CAACJ,UAAU,EAAAK,MAAA,CAAAC,MAAA;IAACC,OAAO,EAAE,OAAQ;IAACC,IAAI,EAAE;EAAK,GAAKL,KAAK,CAAG,CAAC;AAClE,CAAC;AAED,MAAMM,cAAc,GAAGV,eAAe,CAClCD,eAAe,CAAC,gBAAgB,EAAEI,yBAAyB,CAAC,EAC5D;EACIQ,SAAS,EAAET;AACf,CACJ,CAAC;AAED,SAASQ,cAAc","ignoreList":[]}

package/List/components/ListItemHandle.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IconProps as IconProps } from "../../Icon";
+import type { IconProps as IconProps } from "../../Icon";
 interface ListItemHandleProps extends Omit<IconProps, "icon" | "label"> {
     icon?: React.ReactElement;
     label?: string;

package/List/components/ListItemHandle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","ReactComponent","DragHandleIcon","makeDecoratable","Icon","DecoratableListItemHandle","props","createElement","Object","assign","size","color","className","icon","label","ListItemHandle"],"sources":["ListItemHandle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as DragHandleIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { makeDecoratable } from \"~/utils\";\nimport { ~~Icon,~~ IconProps as IconProps } from \"~/Icon\";\n\ninterface ListItemHandleProps extends Omit<IconProps, \"icon\" \| \"label\"> {\n icon?: React.ReactElement;\n label?: string;\n}\n\nconst DecoratableListItemHandle = (props: ListItemHandleProps) => {\n return (\n <Icon\n size={\"md\"}\n color={\"neutral-light\"}\n className={\"wby-mx-xxs wby-cursor-grab\"}\n icon={<DragHandleIcon />}\n label={\"Drag handle\"}\n {...props}\n />\n );\n};\n\nconst ListItemHandle = makeDecoratable(\"ListItemHandle\", DecoratableListItemHandle);\n\nexport { ListItemHandle, type ListItemHandleProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,cAAc,QAAQ,kCAAkC;AACnF,SAASC,eAAe;~~AACxB~~,SAASC,IAAI;AAOb,MAAMC,yBAAyB,GAAIC,KAA0B,IAAK;EAC9D,oBACIN,KAAA,CAAAO,aAAA,CAACH,IAAI,EAAAI,MAAA,CAAAC,MAAA;IACDC,IAAI,EAAE,IAAK;IACXC,KAAK,EAAE,eAAgB;IACvBC,SAAS,EAAE,4BAA6B;IACxCC,IAAI,eAAEb,KAAA,CAAAO,aAAA,CAACL,cAAc,MAAE,CAAE;IACzBY,KAAK,EAAE;EAAc,GACjBR,KAAK,CACZ,CAAC;AAEV,CAAC;AAED,MAAMS,cAAc,GAAGZ,eAAe,CAAC,gBAAgB,EAAEE,yBAAyB,CAAC;AAEnF,SAASU,cAAc","ignoreList":[]}
1	+ {"version":3,"names":["React","ReactComponent","DragHandleIcon","makeDecoratable","Icon","DecoratableListItemHandle","props","createElement","Object","assign","size","color","className","icon","label","ListItemHandle"],"sources":["ListItemHandle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as DragHandleIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { IconProps as IconProps } from \"~/Icon\";\nimport { Icon } from \"~/Icon\";\n\ninterface ListItemHandleProps extends Omit<IconProps, \"icon\" \| \"label\"> {\n icon?: React.ReactElement;\n label?: string;\n}\n\nconst DecoratableListItemHandle = (props: ListItemHandleProps) => {\n return (\n <Icon\n size={\"md\"}\n color={\"neutral-light\"}\n className={\"wby-mx-xxs wby-cursor-grab\"}\n icon={<DragHandleIcon />}\n label={\"Drag handle\"}\n {...props}\n />\n );\n};\n\nconst ListItemHandle = makeDecoratable(\"ListItemHandle\", DecoratableListItemHandle);\n\nexport { ListItemHandle, type ListItemHandleProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,cAAc,QAAQ,kCAAkC;AACnF,SAASC,eAAe;AAExB,SAASC,IAAI;AAOb,MAAMC,yBAAyB,GAAIC,KAA0B,IAAK;EAC9D,oBACIN,KAAA,CAAAO,aAAA,CAACH,IAAI,EAAAI,MAAA,CAAAC,MAAA;IACDC,IAAI,EAAE,IAAK;IACXC,KAAK,EAAE,eAAgB;IACvBC,SAAS,EAAE,4BAA6B;IACxCC,IAAI,eAAEb,KAAA,CAAAO,aAAA,CAACL,cAAc,MAAE,CAAE;IACzBY,KAAK,EAAE;EAAc,GACjBR,KAAK,CACZ,CAAC;AAEV,CAAC;AAED,MAAMS,cAAc,GAAGZ,eAAe,CAAC,gBAAgB,EAAEE,yBAAyB,CAAC;AAEnF,SAASU,cAAc","ignoreList":[]}

package/List/components/ListItemIcon.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IconProps as IconComponentProps } from "../../Icon";
+import type { IconProps as IconComponentProps } from "../../Icon";
 type ListItemIconProps = IconComponentProps;
 export declare const ListItemIcon: ((props: ListItemIconProps) => React.JSX.Element) & {
     original: (props: ListItemIconProps) => React.JSX.Element;

package/List/components/ListItemIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","makeDecoratable","Icon","IconComponent","DecoratableListItemIcon","props","createElement","Object","assign","size","color","ListItemIcon"],"sources":["ListItemIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport { ~~Icon~~ as ~~IconComponent,~~ ~~IconProps~~ as ~~IconComponentProps~~ } from \"~/Icon\";\n\ntype ListItemIconProps = IconComponentProps;\n\nconst DecoratableListItemIcon = (props: ListItemIconProps) => {\n return <IconComponent size={\"md\"} color={\"inherit\"} {...props} />;\n};\n\nexport const ListItemIcon = makeDecoratable(\"ListItemIcon\", DecoratableListItemIcon);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;~~AACxB~~,SAASC,IAAI,IAAIC,aAAa;AAI9B,MAAMC,uBAAuB,GAAIC,KAAwB,IAAK;EAC1D,oBAAOL,KAAA,CAAAM,aAAA,CAACH,aAAa,EAAAI,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAE,IAAK;IAACC,KAAK,EAAE;EAAU,GAAKL,KAAK,CAAG,CAAC;AACrE,CAAC;AAED,OAAO,MAAMM,YAAY,GAAGV,eAAe,CAAC,cAAc,EAAEG,uBAAuB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["React","makeDecoratable","Icon","IconComponent","DecoratableListItemIcon","props","createElement","Object","assign","size","color","ListItemIcon"],"sources":["ListItemIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { IconProps as IconComponentProps } from \"~/Icon\";\nimport { Icon as IconComponent } from \"~/Icon\";\n\ntype ListItemIconProps = IconComponentProps;\n\nconst DecoratableListItemIcon = (props: ListItemIconProps) => {\n return <IconComponent size={\"md\"} color={\"inherit\"} {...props} />;\n};\n\nexport const ListItemIcon = makeDecoratable(\"ListItemIcon\", DecoratableListItemIcon);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AAExB,SAASC,IAAI,IAAIC,aAAa;AAI9B,MAAMC,uBAAuB,GAAIC,KAAwB,IAAK;EAC1D,oBAAOL,KAAA,CAAAM,aAAA,CAACH,aAAa,EAAAI,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAE,IAAK;IAACC,KAAK,EAAE;EAAU,GAAKL,KAAK,CAAG,CAAC;AACrE,CAAC;AAED,OAAO,MAAMM,YAAY,GAAGV,eAAe,CAAC,cAAc,EAAEG,uBAAuB,CAAC","ignoreList":[]}

package/Loader/OverlayLoader.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react";
-import { LoaderProps } from "./Loader";
+import type { LoaderProps } from "./Loader";
 type OverlayLoaderProps = LoaderProps;
 declare const OverlayLoader: (({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element) & {
     original: ({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element;

package/Loader/OverlayLoader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","Loader","cn","makeDecoratable","DecoratableOverlayLoader","className","size","props","createElement","Object","assign","OverlayLoader"],"sources":["OverlayLoader.tsx"],"sourcesContent":["import React from \"react\";\nimport { Loader, ~~LoaderProps~~ } from \"./Loader\";\nimport { cn, makeDecoratable } from \"~/utils\";\n\ntype OverlayLoaderProps = LoaderProps;\n\nconst DecoratableOverlayLoader = ({ className, size = \"lg\", ...props }: OverlayLoaderProps) => {\n return (\n <div\n className={cn(\n \"wby-w-full wby-h-full wby-absolute wby-inset-0 wby-bg-neutral-base/80 wby-flex wby-items-center wby-justify-center wby-z-30\",\n className\n )}\n >\n <Loader {...props} size={size} />\n </div>\n );\n};\n\nconst OverlayLoader = makeDecoratable(\"OverlayLoader\", DecoratableOverlayLoader);\n\nexport { OverlayLoader, type OverlayLoaderProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;~~AACzB~~,SAASC,MAAM;AACf,SAASC,EAAE,EAAEC,eAAe;AAI5B,MAAMC,wBAAwB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,IAAI,GAAG,IAAI;EAAE,GAAGC;AAA0B,CAAC,KAAK;EAC3F,oBACIP,KAAA,CAAAQ,aAAA;IACIH,SAAS,EAAEH,EAAE,CACT,6HAA6H,EAC7HG,SACJ;EAAE,gBAEFL,KAAA,CAAAQ,aAAA,CAACP,MAAM,EAAAQ,MAAA,CAAAC,MAAA,KAAKH,KAAK;IAAED,IAAI,EAAEA;EAAK,EAAE,CAC/B,CAAC;AAEd,CAAC;AAED,MAAMK,aAAa,GAAGR,eAAe,CAAC,eAAe,EAAEC,wBAAwB,CAAC;AAEhF,SAASO,aAAa","ignoreList":[]}
1	+ {"version":3,"names":["React","Loader","cn","makeDecoratable","DecoratableOverlayLoader","className","size","props","createElement","Object","assign","OverlayLoader"],"sources":["OverlayLoader.tsx"],"sourcesContent":["import React from \"react\";\nimport type { LoaderProps } from \"./Loader\";\nimport { Loader } from \"./Loader\";\nimport { cn, makeDecoratable } from \"~/utils\";\n\ntype OverlayLoaderProps = LoaderProps;\n\nconst DecoratableOverlayLoader = ({ className, size = \"lg\", ...props }: OverlayLoaderProps) => {\n return (\n <div\n className={cn(\n \"wby-w-full wby-h-full wby-absolute wby-inset-0 wby-bg-neutral-base/80 wby-flex wby-items-center wby-justify-center wby-z-30\",\n className\n )}\n >\n <Loader {...props} size={size} />\n </div>\n );\n};\n\nconst OverlayLoader = makeDecoratable(\"OverlayLoader\", DecoratableOverlayLoader);\n\nexport { OverlayLoader, type OverlayLoaderProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,MAAM;AACf,SAASC,EAAE,EAAEC,eAAe;AAI5B,MAAMC,wBAAwB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,IAAI,GAAG,IAAI;EAAE,GAAGC;AAA0B,CAAC,KAAK;EAC3F,oBACIP,KAAA,CAAAQ,aAAA;IACIH,SAAS,EAAEH,EAAE,CACT,6HAA6H,EAC7HG,SACJ;EAAE,gBAEFL,KAAA,CAAAQ,aAAA,CAACP,MAAM,EAAAQ,MAAA,CAAAC,MAAA,KAAKH,KAAK;IAAED,IAAI,EAAEA;EAAK,EAAE,CAC/B,CAAC;AAEd,CAAC;AAED,MAAMK,aAAa,GAAGR,eAAe,CAAC,eAAe,EAAEC,wBAAwB,CAAC;AAEhF,SAASO,aAAa","ignoreList":[]}

package/MultiAutoComplete/MultiAutoComplete.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from "react";
-import { MultiAutoCompletePrimitiveProps } from "./primitives";
-import { FormComponentProps } from "../FormComponent";
+import type { MultiAutoCompletePrimitiveProps } from "./primitives";
+import type { FormComponentProps } from "../FormComponent";
 type MultiAutoCompleteProps = MultiAutoCompletePrimitiveProps & FormComponentProps;
 declare const MultiAutoComplete: (({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element) & {
     original: ({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element;

package/MultiAutoComplete/MultiAutoComplete.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","useMemo","useState","useEffect","useRef","makeDecoratable","MultiAutoCompletePrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableMultiAutoComplete","label","description","note","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","inputRef","inputId","setInputId","current","id","createElement","className","text","htmlFor","Object","assign","MultiAutoComplete"],"sources":["MultiAutoComplete.tsx"],"sourcesContent":["import React, { useMemo, useState, useEffect, useRef } from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport { ~~MultiAutoCompletePrimitive,~~ MultiAutoCompletePrimitiveProps } from \"./primitives\";\nimport {\n FormComponentDescription,\n FormComponentErrorMessage,\n FormComponentLabel,\n FormComponentNote~~,\n FormComponentProps~~\n} from \"~/FormComponent\";\n\ntype MultiAutoCompleteProps = MultiAutoCompletePrimitiveProps & FormComponentProps;\n\nconst DecoratableMultiAutoComplete = ({\n label,\n description,\n note,\n required,\n disabled,\n validation,\n ...props\n}: MultiAutoCompleteProps) => {\n const { isValid: validationIsValid, message: validationMessage } = validation \|\| {};\n const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n // Retrieve the internally generated ID from cmdk's <Command.Input> to sync with the external <label>\n const inputRef = useRef<HTMLInputElement>(null);\n const [inputId, setInputId] = useState<string>();\n\n useEffect(() => {\n if (inputRef.current?.id) {\n setInputId(inputRef.current.id);\n }\n }, []);\n\n return (\n <div className={\"wby-w-full\"}>\n <FormComponentLabel\n text={label}\n required={required}\n disabled={disabled}\n invalid={invalid}\n htmlFor={inputId}\n />\n <FormComponentDescription text={description} disabled={disabled} />\n <MultiAutoCompletePrimitive\n {...props}\n inputRef={inputRef}\n label={label}\n disabled={disabled}\n invalid={invalid}\n />\n <FormComponentErrorMessage\n text={validationMessage}\n invalid={invalid}\n disabled={disabled}\n />\n <FormComponentNote text={note} disabled={disabled} />\n </div>\n );\n};\n\nconst MultiAutoComplete = makeDecoratable(\"MultiAutoComplete\", DecoratableMultiAutoComplete);\n\nexport { MultiAutoComplete };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACnE,SAASC,eAAe;~~AACxB~~,SAASC,0BAA0B;~~AACnC~~,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;~~AAMrB~~,MAAMC,4BAA4B,GAAGA,CAAC;EAClCC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACiB,CAAC,KAAK;EAC1B,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGtB,OAAO,CAAC,MAAMmB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;;EAE/E;EACA,MAAMI,QAAQ,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAM,CAACqB,OAAO,EAAEC,UAAU,CAAC,GAAGxB,QAAQ,CAAS,CAAC;EAEhDC,SAAS,CAAC,MAAM;IACZ,IAAIqB,QAAQ,CAACG,OAAO,EAAEC,EAAE,EAAE;MACtBF,UAAU,CAACF,QAAQ,CAACG,OAAO,CAACC,EAAE,CAAC;IACnC;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,oBACI5B,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzB9B,KAAA,CAAA6B,aAAA,CAACpB,kBAAkB;IACfsB,IAAI,EAAEnB,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA,OAAQ;IACjBS,OAAO,EAAEP;EAAQ,CACpB,CAAC,eACFzB,KAAA,CAAA6B,aAAA,CAACtB,wBAAwB;IAACwB,IAAI,EAAElB,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEhB,KAAA,CAAA6B,aAAA,CAACvB,0BAA0B,EAAA2B,MAAA,CAAAC,MAAA,KACnBhB,KAAK;IACTM,QAAQ,EAAEA,QAAS;IACnBZ,KAAK,EAAEA,KAAM;IACbI,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,EACpB,CAAC,eACFvB,KAAA,CAAA6B,aAAA,CAACrB,yBAAyB;IACtBuB,IAAI,EAAET,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFhB,KAAA,CAAA6B,aAAA,CAACnB,iBAAiB;IAACqB,IAAI,EAAEjB,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMmB,iBAAiB,GAAG9B,eAAe,CAAC,mBAAmB,EAAEM,4BAA4B,CAAC;AAE5F,SAASwB,iBAAiB","ignoreList":[]}
1	+ {"version":3,"names":["React","useMemo","useState","useEffect","useRef","makeDecoratable","MultiAutoCompletePrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableMultiAutoComplete","label","description","note","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","inputRef","inputId","setInputId","current","id","createElement","className","text","htmlFor","Object","assign","MultiAutoComplete"],"sources":["MultiAutoComplete.tsx"],"sourcesContent":["import React, { useMemo, useState, useEffect, useRef } from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { MultiAutoCompletePrimitiveProps } from \"./primitives\";\nimport { MultiAutoCompletePrimitive } from \"./primitives\";\nimport type { FormComponentProps } from \"~/FormComponent\";\nimport {\n FormComponentDescription,\n FormComponentErrorMessage,\n FormComponentLabel,\n FormComponentNote\n} from \"~/FormComponent\";\n\ntype MultiAutoCompleteProps = MultiAutoCompletePrimitiveProps & FormComponentProps;\n\nconst DecoratableMultiAutoComplete = ({\n label,\n description,\n note,\n required,\n disabled,\n validation,\n ...props\n}: MultiAutoCompleteProps) => {\n const { isValid: validationIsValid, message: validationMessage } = validation \|\| {};\n const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n // Retrieve the internally generated ID from cmdk's <Command.Input> to sync with the external <label>\n const inputRef = useRef<HTMLInputElement>(null);\n const [inputId, setInputId] = useState<string>();\n\n useEffect(() => {\n if (inputRef.current?.id) {\n setInputId(inputRef.current.id);\n }\n }, []);\n\n return (\n <div className={\"wby-w-full\"}>\n <FormComponentLabel\n text={label}\n required={required}\n disabled={disabled}\n invalid={invalid}\n htmlFor={inputId}\n />\n <FormComponentDescription text={description} disabled={disabled} />\n <MultiAutoCompletePrimitive\n {...props}\n inputRef={inputRef}\n label={label}\n disabled={disabled}\n invalid={invalid}\n />\n <FormComponentErrorMessage\n text={validationMessage}\n invalid={invalid}\n disabled={disabled}\n />\n <FormComponentNote text={note} disabled={disabled} />\n </div>\n );\n};\n\nconst MultiAutoComplete = makeDecoratable(\"MultiAutoComplete\", DecoratableMultiAutoComplete);\n\nexport { MultiAutoComplete };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACnE,SAASC,eAAe;AAExB,SAASC,0BAA0B;AAEnC,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,4BAA4B,GAAGA,CAAC;EAClCC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACiB,CAAC,KAAK;EAC1B,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGtB,OAAO,CAAC,MAAMmB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;;EAE/E;EACA,MAAMI,QAAQ,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAM,CAACqB,OAAO,EAAEC,UAAU,CAAC,GAAGxB,QAAQ,CAAS,CAAC;EAEhDC,SAAS,CAAC,MAAM;IACZ,IAAIqB,QAAQ,CAACG,OAAO,EAAEC,EAAE,EAAE;MACtBF,UAAU,CAACF,QAAQ,CAACG,OAAO,CAACC,EAAE,CAAC;IACnC;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,oBACI5B,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzB9B,KAAA,CAAA6B,aAAA,CAACpB,kBAAkB;IACfsB,IAAI,EAAEnB,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA,OAAQ;IACjBS,OAAO,EAAEP;EAAQ,CACpB,CAAC,eACFzB,KAAA,CAAA6B,aAAA,CAACtB,wBAAwB;IAACwB,IAAI,EAAElB,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEhB,KAAA,CAAA6B,aAAA,CAACvB,0BAA0B,EAAA2B,MAAA,CAAAC,MAAA,KACnBhB,KAAK;IACTM,QAAQ,EAAEA,QAAS;IACnBZ,KAAK,EAAEA,KAAM;IACbI,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,EACpB,CAAC,eACFvB,KAAA,CAAA6B,aAAA,CAACrB,yBAAyB;IACtBuB,IAAI,EAAET,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFhB,KAAA,CAAA6B,aAAA,CAACnB,iBAAiB;IAACqB,IAAI,EAAEjB,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMmB,iBAAiB,GAAG9B,eAAe,CAAC,mBAAmB,EAAEM,4BAA4B,CAAC;AAE5F,SAASwB,iBAAiB","ignoreList":[]}

package/MultiAutoComplete/domains/MultiAutoCompleteOption.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { MultiAutoCompleteOptionDto } from "./MultiAutoCompleteOptionDto";
+import type { MultiAutoCompleteOptionDto } from "./MultiAutoCompleteOptionDto";
 export type MultiAutoCompleteOption = MultiAutoCompleteOptionDto | string;

package/MultiAutoComplete/domains/MultiAutoCompleteOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["MultiAutoCompleteOption.ts"],"sourcesContent":["import { MultiAutoCompleteOptionDto } from \"./MultiAutoCompleteOptionDto\";\n\nexport type MultiAutoCompleteOption = MultiAutoCompleteOptionDto \| string;\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["MultiAutoCompleteOption.ts"],"sourcesContent":["import type { MultiAutoCompleteOptionDto } from \"./MultiAutoCompleteOptionDto\";\n\nexport type MultiAutoCompleteOption = MultiAutoCompleteOptionDto \| string;\n"],"mappings":"","ignoreList":[]}

package/MultiAutoComplete/domains/MultiAutoCompleteOptionDto.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { CommandOptionDto } from "../../Command";
+import type { CommandOptionDto } from "../../Command";
 export type MultiAutoCompleteOptionDto = CommandOptionDto;

package/MultiAutoComplete/domains/MultiAutoCompleteOptionDto.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["MultiAutoCompleteOptionDto.ts"],"sourcesContent":["import { CommandOptionDto } from \"~/Command\";\n\nexport type MultiAutoCompleteOptionDto = CommandOptionDto;\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["MultiAutoCompleteOptionDto.ts"],"sourcesContent":["import type { CommandOptionDto } from \"~/Command\";\n\nexport type MultiAutoCompleteOptionDto = CommandOptionDto;\n"],"mappings":"","ignoreList":[]}

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from "react";
-import { InputPrimitiveProps } from "../../Input";
-import { MultiAutoCompleteOption } from "../domains";
-import { Icon } from "../../Icon";
+import type { InputPrimitiveProps } from "../../Input";
+import type { MultiAutoCompleteOption } from "../domains";
+import type { Icon } from "../../Icon";
 interface MultiAutoCompletePrimitiveProps {
     /**
      * Allows free input of values not present in the options.

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.js CHANGED Viewed

@@ -58,6 +58,7 @@ const DecoratableMultiAutoCompletePrimitive = props => {
     startIcon: props.startIcon,
     endIcon: /*#__PURE__*/React.createElement(MultiAutoCompleteInputIcons, {
       inputSize: props.size,
+      inputVariant: props.variant,
       displayResetAction: !vm.selectedOptionsVm.empty && vm.inputVm.displayResetAction,
       disabled: props.disabled,
       loading: props.loading,

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","Command","PopoverPrimitive","makeDecoratable","useMultiAutoComplete","MultiAutoCompleteInput","MultiAutoCompleteInputIcons","MultiAutoCompleteList","DecoratableMultiAutoCompletePrimitive","props","vm","setListOpenState","setSelectedOption","searchOption","removeSelectedOption","resetSelectedOptions","createOption","handleKeyDown","useCallback","event","disabled","optionsListVm","open","key","toLowerCase","handleSelectOption","value","handleCreateOption","createElement","onOpenChange","label","String","onKeyDown","Trigger","asChild","inputRef","inputVm","placeholder","changeValue","closeList","openList","variant","size","invalid","selectedOptionRenderer","selectedOptions","selectedOptionsVm","options","startIcon","endIcon","inputSize","displayResetAction","empty","loading","onResetValue","Content","style","width","onOpenAutoFocus","e","preventDefault","emptyMessage","loadingMessage","onOptionCreate","onOptionSelect","optionRenderer","temporaryOption","temporaryOptionVm","option","MultiAutoCompletePrimitive"],"sources":["MultiAutoCompletePrimitive.tsx"],"sourcesContent":["import React, { KeyboardEvent } from \"react\";\nimport { Command } from \"~/Command\";\nimport { PopoverPrimitive } from \"~/Popover\";\nimport { InputPrimitiveProps } from \"~/Input\";\nimport { makeDecoratable } from \"~/utils\";\nimport { useMultiAutoComplete } from \"./useMultiAutoComplete\";\nimport {\n MultiAutoCompleteInput,\n MultiAutoCompleteInputIcons,\n MultiAutoCompleteList\n} from \"./components\";\nimport { MultiAutoCompleteOption } from \"../domains\";\nimport { Icon } from \"~/Icon\";\n\ninterface MultiAutoCompletePrimitiveProps {\n /*\n Allows free input of values not present in the options.\n /\n allowFreeInput?: boolean;\n /\n Indicates if the reset action should be displayed.\n /\n displayResetAction?: boolean;\n /\n Indicates if the field is disabled.\n /\n disabled?: boolean;\n /\n Message to display when there are no options.\n /\n emptyMessage?: React.ReactNode;\n /\n Indicates if the input field is invalid.\n * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n /\n invalid?: InputPrimitiveProps[\"invalid\"];\n /\n Message to display when there are no options loaded or selected.\n * Use it to invite the user to interact with the autocomplete by typing a value.\n /\n initialMessage?: React.ReactNode;\n /\n Reference to the input element.\n /\n inputRef?: React.Ref<HTMLInputElement>;\n /\n Accessible label for the command menu. Not shown visibly.\n /\n label?: React.ReactNode;\n /\n Indicates if the autocomplete is loading options.\n /\n loading?: boolean;\n /\n Message to display while loading options.\n /\n loadingMessage?: React.ReactNode;\n /\n Callback triggered when the open state changes.\n /\n onOpenChange?: (open: boolean) => void;\n /\n Callback triggered when a value has been searched by the user.\n /\n onValueSearch?: (value: string) => void;\n /\n Callback triggered when the values change.\n /\n onValuesChange: (values: string[]) => void;\n /\n Callback triggered to reset the values.\n /\n onValuesReset?: () => void;\n /\n List of options for the autocomplete.\n /\n options?: MultiAutoCompleteOption[];\n /\n Custom renderer for the options.\n /\n optionRenderer?: (item: any, index: number) => React.ReactNode;\n /\n Placeholder text for the input field.\n /\n placeholder?: string;\n /\n Size of the input field.\n * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n /\n size?: InputPrimitiveProps[\"size\"];\n /\n Custom renderer for the selected options.\n /\n selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;\n /\n Icon to be displayed at the start of the input field.\n /\n startIcon?: React.ReactElement<typeof Icon> \| React.ReactElement;\n /\n Ensures that each value is unique.\n /\n uniqueValues?: boolean;\n /\n Variant of the input field.\n * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n /\n variant?: InputPrimitiveProps[\"variant\"];\n /\n Optional selected items.\n */\n values?: string[];\n}\n\nconst DecoratableMultiAutoCompletePrimitive = (props: MultiAutoCompletePrimitiveProps) => {\n const {\n vm,\n setListOpenState,\n setSelectedOption,\n searchOption,\n removeSelectedOption,\n resetSelectedOptions,\n createOption\n } = useMultiAutoComplete(props);\n\n const handleKeyDown = React.useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (props.disabled) {\n return;\n }\n\n if (!vm.optionsListVm.open) {\n setListOpenState(true);\n }\n\n if (event.key.toLowerCase() === \"escape\") {\n setListOpenState(false);\n }\n },\n [props.disabled, setListOpenState, setSelectedOption, vm.optionsListVm.open]\n );\n\n const handleSelectOption = React.useCallback(\n (value: string) => {\n setSelectedOption(value);\n setListOpenState(false);\n },\n [setSelectedOption, setListOpenState]\n );\n\n const handleCreateOption = React.useCallback(\n (value: string) => {\n createOption(value);\n setListOpenState(false);\n },\n [createOption, setListOpenState]\n );\n\n return (\n <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>\n <Command label={String(props.label)} onKeyDown={handleKeyDown}>\n <PopoverPrimitive.Trigger asChild>\n <span>\n <MultiAutoCompleteInput\n inputRef={props.inputRef}\n value={vm.inputVm.value}\n placeholder={vm.inputVm.placeholder}\n changeValue={searchOption}\n closeList={() => setListOpenState(false)}\n openList={() => setListOpenState(true)}\n variant={props.variant}\n size={props.size}\n invalid={props.invalid}\n removeSelectedOption={removeSelectedOption}\n selectedOptionRenderer={props.selectedOptionRenderer}\n selectedOptions={vm.selectedOptionsVm.options}\n disabled={props.disabled}\n startIcon={props.startIcon}\n endIcon={\n <MultiAutoCompleteInputIcons\n inputSize={props.size}\n displayResetAction={\n !vm.selectedOptionsVm.empty && vm.inputVm.displayResetAction\n }\n disabled={props.disabled}\n loading={props.loading}\n onResetValue={resetSelectedOptions}\n onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}\n />\n }\n />\n </span>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Content\n style={{ width: \"var(--radix-popover-trigger-width)\" }}\n onOpenAutoFocus={e => e.preventDefault()}\n >\n <MultiAutoCompleteList\n emptyMessage={vm.optionsListVm.emptyMessage}\n empty={vm.optionsListVm.empty}\n loading={props.loading}\n loadingMessage={vm.optionsListVm.loadingMessage}\n onOptionCreate={handleCreateOption}\n onOptionSelect={handleSelectOption}\n optionRenderer={props.optionRenderer}\n options={vm.optionsListVm.options}\n temporaryOption={vm.temporaryOptionVm.option}\n />\n </PopoverPrimitive.Content>\n </Command>\n </PopoverPrimitive>\n );\n};\n\nconst MultiAutoCompletePrimitive = makeDecoratable(\n \"MultiAutoCompletePrimitive\",\n DecoratableMultiAutoCompletePrimitive\n);\n\nexport { MultiAutoCompletePrimitive, type MultiAutoCompletePrimitiveProps };\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["React","Command","PopoverPrimitive","makeDecoratable","useMultiAutoComplete","MultiAutoCompleteInput","MultiAutoCompleteInputIcons","MultiAutoCompleteList","DecoratableMultiAutoCompletePrimitive","props","vm","setListOpenState","setSelectedOption","searchOption","removeSelectedOption","resetSelectedOptions","createOption","handleKeyDown","useCallback","event","disabled","optionsListVm","open","key","toLowerCase","handleSelectOption","value","handleCreateOption","createElement","onOpenChange","label","String","onKeyDown","Trigger","asChild","inputRef","inputVm","placeholder","changeValue","closeList","openList","variant","size","invalid","selectedOptionRenderer","selectedOptions","selectedOptionsVm","options","startIcon","endIcon","inputSize","inputVariant","displayResetAction","empty","loading","onResetValue","Content","style","width","onOpenAutoFocus","e","preventDefault","emptyMessage","loadingMessage","onOptionCreate","onOptionSelect","optionRenderer","temporaryOption","temporaryOptionVm","option","MultiAutoCompletePrimitive"],"sources":["MultiAutoCompletePrimitive.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport React from \"react\";\nimport { Command } from \"~/Command\";\nimport { PopoverPrimitive } from \"~/Popover\";\nimport type { InputPrimitiveProps } from \"~/Input\";\nimport { makeDecoratable } from \"~/utils\";\nimport { useMultiAutoComplete } from \"./useMultiAutoComplete\";\nimport {\n MultiAutoCompleteInput,\n MultiAutoCompleteInputIcons,\n MultiAutoCompleteList\n} from \"./components\";\nimport type { MultiAutoCompleteOption } from \"../domains\";\nimport type { Icon } from \"~/Icon\";\n\ninterface MultiAutoCompletePrimitiveProps {\n /*\n Allows free input of values not present in the options.\n /\n allowFreeInput?: boolean;\n /\n Indicates if the reset action should be displayed.\n /\n displayResetAction?: boolean;\n /\n Indicates if the field is disabled.\n /\n disabled?: boolean;\n /\n Message to display when there are no options.\n /\n emptyMessage?: React.ReactNode;\n /\n Indicates if the input field is invalid.\n * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n /\n invalid?: InputPrimitiveProps[\"invalid\"];\n /\n Message to display when there are no options loaded or selected.\n * Use it to invite the user to interact with the autocomplete by typing a value.\n /\n initialMessage?: React.ReactNode;\n /\n Reference to the input element.\n /\n inputRef?: React.Ref<HTMLInputElement>;\n /\n Accessible label for the command menu. Not shown visibly.\n /\n label?: React.ReactNode;\n /\n Indicates if the autocomplete is loading options.\n /\n loading?: boolean;\n /\n Message to display while loading options.\n /\n loadingMessage?: React.ReactNode;\n /\n Callback triggered when the open state changes.\n /\n onOpenChange?: (open: boolean) => void;\n /\n Callback triggered when a value has been searched by the user.\n /\n onValueSearch?: (value: string) => void;\n /\n Callback triggered when the values change.\n /\n onValuesChange: (values: string[]) => void;\n /\n Callback triggered to reset the values.\n /\n onValuesReset?: () => void;\n /\n List of options for the autocomplete.\n /\n options?: MultiAutoCompleteOption[];\n /\n Custom renderer for the options.\n /\n optionRenderer?: (item: any, index: number) => React.ReactNode;\n /\n Placeholder text for the input field.\n /\n placeholder?: string;\n /\n Size of the input field.\n * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n /\n size?: InputPrimitiveProps[\"size\"];\n /\n Custom renderer for the selected options.\n /\n selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;\n /\n Icon to be displayed at the start of the input field.\n /\n startIcon?: React.ReactElement<typeof Icon> \| React.ReactElement;\n /\n Ensures that each value is unique.\n /\n uniqueValues?: boolean;\n /\n Variant of the input field.\n * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n /\n variant?: InputPrimitiveProps[\"variant\"];\n /\n Optional selected items.\n */\n values?: string[];\n}\n\nconst DecoratableMultiAutoCompletePrimitive = (props: MultiAutoCompletePrimitiveProps) => {\n const {\n vm,\n setListOpenState,\n setSelectedOption,\n searchOption,\n removeSelectedOption,\n resetSelectedOptions,\n createOption\n } = useMultiAutoComplete(props);\n\n const handleKeyDown = React.useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (props.disabled) {\n return;\n }\n\n if (!vm.optionsListVm.open) {\n setListOpenState(true);\n }\n\n if (event.key.toLowerCase() === \"escape\") {\n setListOpenState(false);\n }\n },\n [props.disabled, setListOpenState, setSelectedOption, vm.optionsListVm.open]\n );\n\n const handleSelectOption = React.useCallback(\n (value: string) => {\n setSelectedOption(value);\n setListOpenState(false);\n },\n [setSelectedOption, setListOpenState]\n );\n\n const handleCreateOption = React.useCallback(\n (value: string) => {\n createOption(value);\n setListOpenState(false);\n },\n [createOption, setListOpenState]\n );\n\n return (\n <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>\n <Command label={String(props.label)} onKeyDown={handleKeyDown}>\n <PopoverPrimitive.Trigger asChild>\n <span>\n <MultiAutoCompleteInput\n inputRef={props.inputRef}\n value={vm.inputVm.value}\n placeholder={vm.inputVm.placeholder}\n changeValue={searchOption}\n closeList={() => setListOpenState(false)}\n openList={() => setListOpenState(true)}\n variant={props.variant}\n size={props.size}\n invalid={props.invalid}\n removeSelectedOption={removeSelectedOption}\n selectedOptionRenderer={props.selectedOptionRenderer}\n selectedOptions={vm.selectedOptionsVm.options}\n disabled={props.disabled}\n startIcon={props.startIcon}\n endIcon={\n <MultiAutoCompleteInputIcons\n inputSize={props.size}\n inputVariant={props.variant}\n displayResetAction={\n !vm.selectedOptionsVm.empty && vm.inputVm.displayResetAction\n }\n disabled={props.disabled}\n loading={props.loading}\n onResetValue={resetSelectedOptions}\n onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}\n />\n }\n />\n </span>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Content\n style={{ width: \"var(--radix-popover-trigger-width)\" }}\n onOpenAutoFocus={e => e.preventDefault()}\n >\n <MultiAutoCompleteList\n emptyMessage={vm.optionsListVm.emptyMessage}\n empty={vm.optionsListVm.empty}\n loading={props.loading}\n loadingMessage={vm.optionsListVm.loadingMessage}\n onOptionCreate={handleCreateOption}\n onOptionSelect={handleSelectOption}\n optionRenderer={props.optionRenderer}\n options={vm.optionsListVm.options}\n temporaryOption={vm.temporaryOptionVm.option}\n />\n </PopoverPrimitive.Content>\n </Command>\n </PopoverPrimitive>\n );\n};\n\nconst MultiAutoCompletePrimitive = makeDecoratable(\n \"MultiAutoCompletePrimitive\",\n DecoratableMultiAutoCompletePrimitive\n);\n\nexport { MultiAutoCompletePrimitive, type MultiAutoCompletePrimitiveProps };\n"],"mappings":"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","ignoreList":[]}

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.d.ts CHANGED Viewed

@@ -19,6 +19,9 @@ export declare const SecondaryVariantInvalid: Story;
 export declare const GhostVariant: Story;
 export declare const GhostVariantDisabled: Story;
 export declare const GhostVariantInvalid: Story;
+export declare const GhostNegativeVariant: Story;
+export declare const GhostNegativeVariantDisabled: Story;
+export declare const GhostNegativeVariantInvalid: Story;
 export declare const WithPredefinedValue: Story;
 export declare const WithCustomPlaceholder: Story;
 export declare const WithCustomEmptyMessage: Story;

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.js CHANGED Viewed

@@ -32,7 +32,7 @@ const meta = {
       onValuesChange: setValues
     })), /*#__PURE__*/React.createElement("div", {
       className: "wby-mt-4 wby-text-center"
-    }, "Current selected values: ", values));
+    }, "Current selected values: ", values?.join(",")));
   }
 };
 export default meta;
@@ -134,10 +134,84 @@ export const GhostVariantInvalid = {
     invalid: true
   }
 };
+export const GhostNegativeVariant = {
+  args: {
+    ...Default.args,
+    variant: "ghost-negative",
+    placeholder: "Custom placeholder"
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-dark wby-text-neutral-light wby-p-xl"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export const GhostNegativeVariantDisabled = {
+  args: {
+    ...GhostNegativeVariant.args,
+    disabled: true
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-dark wby-text-neutral-light wby-p-xl"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export const GhostNegativeVariantInvalid = {
+  args: {
+    ...GhostNegativeVariant.args,
+    invalid: true
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-dark wby-text-neutral-light wby-p-xl"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
 export const WithPredefinedValue = {
   args: {
     ...Default.args,
-    values: ["Eastern Standard Time (EST)"]
+    options: [{
+      label: "Eastern Standard Time (EST)",
+      value: "est"
+    }, {
+      label: "Central Standard Time (CST)",
+      value: "cst"
+    }, {
+      label: "Pacific Standard Time (PST)",
+      value: "pst"
+    }, {
+      label: "Greenwich Mean Time (GMT)",
+      value: "gmt"
+    }, {
+      label: "Central European Time (CET)",
+      value: "cet"
+    }, {
+      label: "Central Africa Time (CAT)",
+      value: "cat"
+    }, {
+      label: "India Standard Time (IST)",
+      value: "ist"
+    }, {
+      label: "China Standard Time (CST)",
+      value: "cst_china"
+    }, {
+      label: "Japan Standard Time (JST)",
+      value: "jst"
+    }, {
+      label: "Australian Western Standard Time (AWST)",
+      value: "awst"
+    }, {
+      label: "New Zealand Standard Time (NZST)",
+      value: "nzst"
+    }, {
+      label: "Fiji Time (FJT)",
+      value: "fjt"
+    }, {
+      label: "Argentina Time (ART)",
+      value: "art"
+    }, {
+      label: "Bolivia Time (BOT)",
+      value: "bot"
+    }, {
+      label: "Brasilia Time (BRT)",
+      value: "brt"
+    }],
+    values: ["est", "ist", "brt"]
   }
 };
 export const WithCustomPlaceholder = {
@@ -403,7 +477,7 @@ export const WithCustomSelectedOptionRenderer = {
       selectedOptionRenderer: selectedOptionRenderer
     })), /*#__PURE__*/React.createElement("div", {
       className: "wby-mt-4 wby-text-center"
-    }, "Current selected values: ", values));
+    }, "Current selected values: ", values?.join(",")));
   }
 };
 export const WithSeparators = {
@@ -578,7 +652,7 @@ export const WithExternalValueControl = {
       onClick: () => setValues(args.values)
     })), /*#__PURE__*/React.createElement("div", {
       className: "wby-mt-4 wby-text-center"
-    }, "Current selected values: ", values));
+    }, "Current selected values: ", values?.join(",")));
   }
 };