@webiny/admin-ui 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/SegmentedControl/primitives/SegmentedControlPrimitive.js

@@ -0,0 +1,103 @@
+import * as React from "react";
+import { cn, cva } from "../../utils.js";
+import { useSegmentedControl } from "./useSegmentedControl.js";
+import { Icon } from "../../Icon/index.js";
+
+/**
+ * Segmented Control Item Button
+ */
+const segmentedControlItemVariants = cva(["inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer relative rounded-md", "text-md px-sm-extra py-xs [&>svg]:size-md gap-xs", "focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed focus-visible:ring-offset-0", "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed"], {
+  variants: {
+    variant: {
+      light: ["text-neutral-strong fill-neutral-xstrong", "data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80", "hover:data-[state=inactive]:text-neutral-primary", "hover:data-[state=inactive]:bg-neutral-base/80", "active:data-[state=inactive]:bg-neutral-base/80"],
+      dimmed: ["text-neutral-strong fill-neutral-xstrong", "data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80", "hover:data-[state=inactive]:text-neutral-primary", "hover:data-[state=inactive]:bg-neutral-base/80", "active:data-[state=inactive]:bg-neutral-base/80"],
+      ghost: ["text-neutral-strong fill-neutral-xstrong", "data-[state=active]:bg-neutral-dark/5", "hover:data-[state=inactive]:bg-neutral-dark/5", "active:data-[state=inactive]:bg-neutral-dark/5"]
+    }
+  },
+  defaultVariants: {
+    variant: "light"
+  }
+});
+const segmentedControlRootVariants = cva("inline-flex rounded-md p-xxs gap-xs", {
+  variants: {
+    variant: {
+      light: "bg-neutral-light",
+      dimmed: "bg-neutral-dimmed",
+      ghost: ""
+    }
+  },
+  defaultVariants: {
+    variant: "light"
+  }
+});
+const SegmentedControlItemButton = ({
+  item,
+  isActive,
+  onValueChange,
+  variant,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("button", Object.assign({
+    type: "button",
+    role: "radio",
+    "aria-checked": isActive,
+    "data-state": isActive ? "active" : "inactive",
+    disabled: item.disabled,
+    onClick: () => onValueChange(item.value),
+    className: cn(segmentedControlItemVariants({
+      variant
+    }), className)
+  }, props), item.icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: item.icon,
+    size: "sm",
+    label: String(item.label),
+    color: "neutral-strong"
+  }), item.label);
+};
+
+/**
+ * Segmented Control Primitive
+ */
+
+const SegmentedControlRenderer = ({
+  items,
+  changeValue,
+  value,
+  variant = "light",
+  className,
+  disabled
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    role: "radiogroup",
+    className: cn(segmentedControlRootVariants({
+      variant
+    }), className)
+  }, items.map(item => /*#__PURE__*/React.createElement(SegmentedControlItemButton, {
+    key: item.id,
+    item: {
+      ...item,
+      disabled: disabled || item.disabled
+    },
+    isActive: value === item.value,
+    onValueChange: changeValue,
+    variant: variant
+  })));
+};
+
+/**
+ * Segmented Control Primitive Component
+ */
+const SegmentedControlPrimitive = props => {
+  const {
+    vm,
+    changeValue
+  } = useSegmentedControl(props);
+  return /*#__PURE__*/React.createElement(SegmentedControlRenderer, Object.assign({}, props, {
+    items: vm.items,
+    changeValue: changeValue
+  }));
+};
+export { SegmentedControlPrimitive, SegmentedControlRenderer };
+
+//# sourceMappingURL=SegmentedControlPrimitive.js.map

package/SegmentedControl/primitives/SegmentedControlPrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","useSegmentedControl","Icon","segmentedControlItemVariants","variants","variant","light","dimmed","ghost","defaultVariants","segmentedControlRootVariants","SegmentedControlItemButton","item","isActive","onValueChange","className","props","createElement","Object","assign","type","role","disabled","onClick","value","icon","size","label","String","color","SegmentedControlRenderer","items","changeValue","map","key","id","SegmentedControlPrimitive","vm"],"sources":["SegmentedControlPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport type {\n    SegmentedControlItemParams,\n    SegmentedControlItemFormatted\n} from \"../domains/index.js\";\nimport { useSegmentedControl } from \"./useSegmentedControl.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\n/**\n * Segmented Control Item Button\n */\nconst segmentedControlItemVariants = cva(\n    [\n        \"inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer relative rounded-md\",\n        \"text-md px-sm-extra py-xs [&>svg]:size-md gap-xs\",\n        \"focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed focus-visible:ring-offset-0\",\n        \"disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            variant: {\n                light: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                dimmed: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                ghost: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:bg-neutral-dark/5\",\n                    \"hover:data-[state=inactive]:bg-neutral-dark/5\",\n                    \"active:data-[state=inactive]:bg-neutral-dark/5\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"light\"\n        }\n    }\n);\n\nconst segmentedControlRootVariants = cva(\"inline-flex rounded-md p-xxs gap-xs\", {\n    variants: {\n        variant: {\n            light: \"bg-neutral-light\",\n            dimmed: \"bg-neutral-dimmed\",\n            ghost: \"\"\n        }\n    },\n    defaultVariants: {\n        variant: \"light\"\n    }\n});\n\ninterface SegmentedControlItemProps extends Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    \"value\"\n> {\n    item: SegmentedControlItemFormatted;\n    isActive: boolean;\n    onValueChange: (value: string) => void;\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n}\n\nconst SegmentedControlItemButton = ({\n    item,\n    isActive,\n    onValueChange,\n    variant,\n    className,\n    ...props\n}: SegmentedControlItemProps) => {\n    return (\n        <button\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isActive}\n            data-state={isActive ? \"active\" : \"inactive\"}\n            disabled={item.disabled}\n            onClick={() => onValueChange(item.value)}\n            className={cn(segmentedControlItemVariants({ variant }), className)}\n            {...props}\n        >\n            {item.icon && (\n                <Icon\n                    icon={item.icon}\n                    size={\"sm\"}\n                    label={String(item.label)}\n                    color={\"neutral-strong\"}\n                />\n            )}\n            {item.label}\n        </button>\n    );\n};\n\n/**\n * Segmented Control Primitive\n */\ninterface SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemParams[];\n    /**\n     * Callback triggered when the selected value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * The selected value.\n     */\n    value?: string;\n    /**\n     * Visual style variant.\n     */\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n    /**\n     * Additional class name.\n     */\n    className?: string;\n    /**\n     * Disabled state for all items.\n     */\n    disabled?: boolean;\n}\n\ninterface SegmentedControlVm {\n    items: SegmentedControlItemFormatted[];\n}\n\ninterface SegmentedControlRendererProps extends SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemFormatted[];\n    changeValue: (value: string) => void;\n}\n\nconst SegmentedControlRenderer = ({\n    items,\n    changeValue,\n    value,\n    variant = \"light\",\n    className,\n    disabled\n}: SegmentedControlRendererProps) => {\n    return (\n        <div role=\"radiogroup\" className={cn(segmentedControlRootVariants({ variant }), className)}>\n            {items.map(item => (\n                <SegmentedControlItemButton\n                    key={item.id}\n                    item={{ ...item, disabled: disabled || item.disabled }}\n                    isActive={value === item.value}\n                    onValueChange={changeValue}\n                    variant={variant}\n                />\n            ))}\n        </div>\n    );\n};\n\n/**\n * Segmented Control Primitive Component\n */\nconst SegmentedControlPrimitive = (props: SegmentedControlPrimitiveProps) => {\n    const { vm, changeValue } = useSegmentedControl(props);\n    return <SegmentedControlRenderer {...props} items={vm.items} changeValue={changeValue} />;\n};\n\nexport {\n    SegmentedControlPrimitive,\n    SegmentedControlRenderer,\n    type SegmentedControlPrimitiveProps,\n    type SegmentedControlVm\n};\n"],"mappings":"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","ignoreList":[]}

package/SegmentedControl/primitives/SegmentedControlPrimitive.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { SegmentedControlPrimitive } from "./SegmentedControlPrimitive.js";
+declare const meta: Meta<typeof SegmentedControlPrimitive>;
+export default meta;
+type Story = StoryObj<typeof SegmentedControlPrimitive>;
+export declare const Default: Story;
+export declare const WithDefaultOption: Story;
+export declare const WithIcons: Story;
+export declare const VariantLight: Story;
+export declare const VariantDimmed: Story;
+export declare const VariantGhost: Story;
+export declare const Disabled: Story;
+export declare const PartiallyDisabled: Story;

package/SegmentedControl/primitives/SegmentedControlPrimitive.stories.js

@@ -0,0 +1,138 @@
+import React, { useState } from "react";
+import { SegmentedControlPrimitive } from "./SegmentedControlPrimitive.js";
+import { Icon } from "../../Icon/index.js";
+import { ReactComponent as LockIcon } from "@webiny/icons/notifications.svg";
+const meta = {
+  title: "Components/Form Primitives/SegmentedControl",
+  component: SegmentedControlPrimitive,
+  parameters: {
+    layout: "padded"
+  },
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "w-full"
+    }, /*#__PURE__*/React.createElement(SegmentedControlPrimitive, Object.assign({}, args, {
+      value: value,
+      onChange: value => setValue(value)
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "mt-4 text-center"
+    }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
+  }
+};
+export default meta;
+const items = [{
+  label: "Item 1",
+  value: "item1"
+}, {
+  label: "Item 2",
+  value: "item2"
+}, {
+  label: "Item 3",
+  value: "item3"
+}, {
+  label: "Item 4",
+  value: "item4"
+}];
+const itemsWithIcons = [{
+  label: "Item 1",
+  value: "item1",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}, {
+  label: "Item 2",
+  value: "item2",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}, {
+  label: "Item 3",
+  value: "item3",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}, {
+  label: "Item 4",
+  value: "item4",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}];
+export const Default = {
+  args: {
+    items
+  }
+};
+export const WithDefaultOption = {
+  args: {
+    items,
+    value: "item2"
+  }
+};
+export const WithIcons = {
+  args: {
+    items: itemsWithIcons,
+    value: "item1"
+  }
+};
+export const VariantLight = {
+  args: {
+    items,
+    value: "item1",
+    variant: "light"
+  }
+};
+export const VariantDimmed = {
+  args: {
+    items,
+    value: "item1",
+    variant: "dimmed"
+  }
+};
+export const VariantGhost = {
+  render: args => {
+    const [value, setValue] = useState(args.value || "item1");
+    return /*#__PURE__*/React.createElement("div", {
+      className: "p-md rounded-md bg-neutral-light"
+    }, /*#__PURE__*/React.createElement(SegmentedControlPrimitive, Object.assign({}, args, {
+      items: items,
+      value: value,
+      onChange: value => setValue(value),
+      variant: "ghost"
+    })));
+  }
+};
+export const Disabled = {
+  args: {
+    items,
+    value: "item2",
+    disabled: true
+  }
+};
+export const PartiallyDisabled = {
+  args: {
+    items: [{
+      label: "Item 1",
+      value: "item1"
+    }, {
+      label: "Item 2 (disabled)",
+      value: "item2",
+      disabled: true
+    }, {
+      label: "Item 3",
+      value: "item3"
+    }, {
+      label: "Item 4 (disabled)",
+      value: "item4",
+      disabled: true
+    }],
+    value: "item1"
+  }
+};
+
+//# sourceMappingURL=SegmentedControlPrimitive.stories.js.map

package/SegmentedControl/primitives/SegmentedControlPrimitive.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","SegmentedControlPrimitive","Icon","ReactComponent","LockIcon","meta","title","component","parameters","layout","render","args","value","setValue","createElement","className","Object","assign","onChange","items","label","itemsWithIcons","icon","Default","WithDefaultOption","WithIcons","VariantLight","variant","VariantDimmed","VariantGhost","Disabled","disabled","PartiallyDisabled"],"sources":["SegmentedControlPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { SegmentedControlPrimitive } from \"./SegmentedControlPrimitive.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/notifications.svg\";\n\nconst meta: Meta<typeof SegmentedControlPrimitive> = {\n    title: \"Components/Form Primitives/SegmentedControl\",\n    component: SegmentedControlPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <SegmentedControlPrimitive\n                    {...args}\n                    value={value}\n                    onChange={value => setValue(value)}\n                />\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;\n\ntype Story = StoryObj<typeof SegmentedControlPrimitive>;\n\nconst items = [\n    { label: \"Item 1\", value: \"item1\" },\n    { label: \"Item 2\", value: \"item2\" },\n    { label: \"Item 3\", value: \"item3\" },\n    { label: \"Item 4\", value: \"item4\" }\n];\n\nconst itemsWithIcons = [\n    { label: \"Item 1\", value: \"item1\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 2\", value: \"item2\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 3\", value: \"item3\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 4\", value: \"item4\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> }\n];\n\nexport const Default: Story = {\n    args: {\n        items\n    }\n};\n\nexport const WithDefaultOption: Story = {\n    args: {\n        items,\n        value: \"item2\"\n    }\n};\n\nexport const WithIcons: Story = {\n    args: {\n        items: itemsWithIcons,\n        value: \"item1\"\n    }\n};\n\nexport const VariantLight: Story = {\n    args: {\n        items,\n        value: \"item1\",\n        variant: \"light\"\n    }\n};\n\nexport const VariantDimmed: Story = {\n    args: {\n        items,\n        value: \"item1\",\n        variant: \"dimmed\"\n    }\n};\n\nexport const VariantGhost: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || \"item1\");\n        return (\n            <div className=\"p-md rounded-md bg-neutral-light\">\n                <SegmentedControlPrimitive\n                    {...args}\n                    items={items}\n                    value={value}\n                    onChange={value => setValue(value)}\n                    variant=\"ghost\"\n                />\n            </div>\n        );\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        items,\n        value: \"item2\",\n        disabled: true\n    }\n};\n\nexport const PartiallyDisabled: Story = {\n    args: {\n        items: [\n            { label: \"Item 1\", value: \"item1\" },\n            { label: \"Item 2 (disabled)\", value: \"item2\", disabled: true },\n            { label: \"Item 3\", value: \"item3\" },\n            { label: \"Item 4 (disabled)\", value: \"item4\", disabled: true }\n        ],\n        value: \"item1\"\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,yBAAyB;AAClC,SAASC,IAAI;AACb,SAASC,cAAc,IAAIC,QAAQ,QAAQ,iCAAiC;AAE5E,MAAMC,IAA4C,GAAG;EACjDC,KAAK,EAAE,6CAA6C;EACpDC,SAAS,EAAEN,yBAAyB;EACpCO,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ,CAAC;EACDC,MAAM,EAAEC,IAAI,IAAI;IACZ,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGb,QAAQ,CAACW,IAAI,CAACC,KAAK,CAAC;IAC9C,oBACIb,KAAA,CAAAe,aAAA;MAAKC,SAAS,EAAE;IAAS,gBACrBhB,KAAA,CAAAe,aAAA,CAACb,yBAAyB,EAAAe,MAAA,CAAAC,MAAA,KAClBN,IAAI;MACRC,KAAK,EAAEA,KAAM;MACbM,QAAQ,EAAEN,KAAK,IAAIC,QAAQ,CAACD,KAAK;IAAE,EACtC,CAAC,eACFb,KAAA,CAAAe,aAAA;MAAKC,SAAS,EAAE;IAAmB,GAAC,0BACR,eAAAhB,KAAA,CAAAe,aAAA,cAAMF,KAAW,CACxC,CACJ,CAAC;EAEd;AACJ,CAAC;AAED,eAAeP,IAAI;AAInB,MAAMc,KAAK,GAAG,CACV;EAAEC,KAAK,EAAE,QAAQ;EAAER,KAAK,EAAE;AAAQ,CAAC,EACnC;EAAEQ,KAAK,EAAE,QAAQ;EAAER,KAAK,EAAE;AAAQ,CAAC,EACnC;EAAEQ,KAAK,EAAE,QAAQ;EAAER,KAAK,EAAE;AAAQ,CAAC,EACnC;EAAEQ,KAAK,EAAE,QAAQ;EAAER,KAAK,EAAE;AAAQ,CAAC,CACtC;AAED,MAAMS,cAAc,GAAG,CACnB;EAAED,KAAK,EAAE,QAAQ;EAAER,KAAK,EAAE,OAAO;EAAEU,IAAI,eAAEvB,KAAA,CAAAe,aAAA,CAACZ,IAAI;IAACoB,IAAI,eAAEvB,KAAA,CAAAe,aAAA,CAACV,QAAQ,MAAE,CAAE;IAACgB,KAAK,EAAC;EAAM,CAAE;AAAE,CAAC,EACpF;EAAEA,KAAK,EAAE,QAAQ;EAAER,KAAK,EAAE,OAAO;EAAEU,IAAI,eAAEvB,KAAA,CAAAe,aAAA,CAACZ,IAAI;IAACoB,IAAI,eAAEvB,KAAA,CAAAe,aAAA,CAACV,QAAQ,MAAE,CAAE;IAACgB,KAAK,EAAC;EAAM,CAAE;AAAE,CAAC,EACpF;EAAEA,KAAK,EAAE,QAAQ;EAAER,KAAK,EAAE,OAAO;EAAEU,IAAI,eAAEvB,KAAA,CAAAe,aAAA,CAACZ,IAAI;IAACoB,IAAI,eAAEvB,KAAA,CAAAe,aAAA,CAACV,QAAQ,MAAE,CAAE;IAACgB,KAAK,EAAC;EAAM,CAAE;AAAE,CAAC,EACpF;EAAEA,KAAK,EAAE,QAAQ;EAAER,KAAK,EAAE,OAAO;EAAEU,IAAI,eAAEvB,KAAA,CAAAe,aAAA,CAACZ,IAAI;IAACoB,IAAI,eAAEvB,KAAA,CAAAe,aAAA,CAACV,QAAQ,MAAE,CAAE;IAACgB,KAAK,EAAC;EAAM,CAAE;AAAE,CAAC,CACvF;AAED,OAAO,MAAMG,OAAc,GAAG;EAC1BZ,IAAI,EAAE;IACFQ;EACJ;AACJ,CAAC;AAED,OAAO,MAAMK,iBAAwB,GAAG;EACpCb,IAAI,EAAE;IACFQ,KAAK;IACLP,KAAK,EAAE;EACX;AACJ,CAAC;AAED,OAAO,MAAMa,SAAgB,GAAG;EAC5Bd,IAAI,EAAE;IACFQ,KAAK,EAAEE,cAAc;IACrBT,KAAK,EAAE;EACX;AACJ,CAAC;AAED,OAAO,MAAMc,YAAmB,GAAG;EAC/Bf,IAAI,EAAE;IACFQ,KAAK;IACLP,KAAK,EAAE,OAAO;IACde,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMC,aAAoB,GAAG;EAChCjB,IAAI,EAAE;IACFQ,KAAK;IACLP,KAAK,EAAE,OAAO;IACde,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAME,YAAmB,GAAG;EAC/BnB,MAAM,EAAEC,IAAI,IAAI;IACZ,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGb,QAAQ,CAACW,IAAI,CAACC,KAAK,IAAI,OAAO,CAAC;IACzD,oBACIb,KAAA,CAAAe,aAAA;MAAKC,SAAS,EAAC;IAAkC,gBAC7ChB,KAAA,CAAAe,aAAA,CAACb,yBAAyB,EAAAe,MAAA,CAAAC,MAAA,KAClBN,IAAI;MACRQ,KAAK,EAAEA,KAAM;MACbP,KAAK,EAAEA,KAAM;MACbM,QAAQ,EAAEN,KAAK,IAAIC,QAAQ,CAACD,KAAK,CAAE;MACnCe,OAAO,EAAC;IAAO,EAClB,CACA,CAAC;EAEd;AACJ,CAAC;AAED,OAAO,MAAMG,QAAe,GAAG;EAC3BnB,IAAI,EAAE;IACFQ,KAAK;IACLP,KAAK,EAAE,OAAO;IACdmB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMC,iBAAwB,GAAG;EACpCrB,IAAI,EAAE;IACFQ,KAAK,EAAE,CACH;MAAEC,KAAK,EAAE,QAAQ;MAAER,KAAK,EAAE;IAAQ,CAAC,EACnC;MAAEQ,KAAK,EAAE,mBAAmB;MAAER,KAAK,EAAE,OAAO;MAAEmB,QAAQ,EAAE;IAAK,CAAC,EAC9D;MAAEX,KAAK,EAAE,QAAQ;MAAER,KAAK,EAAE;IAAQ,CAAC,EACnC;MAAEQ,KAAK,EAAE,mBAAmB;MAAER,KAAK,EAAE,OAAO;MAAEmB,QAAQ,EAAE;IAAK,CAAC,CACjE;IACDnB,KAAK,EAAE;EACX;AACJ,CAAC","ignoreList":[]}

package/SegmentedControl/primitives/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./SegmentedControlPrimitive.js";
+export * from "./useSegmentedControl.js";
+export * from "./presenters/SegmentedControlPresenter.js";

package/SegmentedControl/primitives/index.js

@@ -0,0 +1,5 @@
+export * from "./SegmentedControlPrimitive.js";
+export * from "./useSegmentedControl.js";
+export * from "./presenters/SegmentedControlPresenter.js";
+
+//# sourceMappingURL=index.js.map

package/SegmentedControl/primitives/index.js.map

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

package/SegmentedControl/primitives/presenters/SegmentedControlPresenter.d.ts

@@ -0,0 +1,22 @@
+import type { SegmentedControlVm } from "../SegmentedControlPrimitive.js";
+import type { SegmentedControlItemParams } from "../../../SegmentedControl/domains/SegmentedControlItemParams.js";
+interface SegmentedControlPresenterParams<TValue = string> {
+    items: SegmentedControlItemParams[];
+    onValueChange?: (value: TValue) => void;
+}
+interface ISegmentedControlPresenter<TValue = string> {
+    vm: SegmentedControlVm;
+    init: (props: SegmentedControlPresenterParams<TValue>) => void;
+    changeValue: (value: TValue) => void;
+}
+declare class SegmentedControlPresenter<TValue = string> implements ISegmentedControlPresenter<TValue> {
+    private params?;
+    constructor();
+    init: (params: SegmentedControlPresenterParams<TValue>) => void;
+    get vm(): {
+        items: import("../../index.js").SegmentedControlItemFormatted[];
+    };
+    changeValue: (value: TValue) => void;
+    private getSegmentedControlItems;
+}
+export { SegmentedControlPresenter, type SegmentedControlPresenterParams, type ISegmentedControlPresenter };

package/SegmentedControl/primitives/presenters/SegmentedControlPresenter.js

@@ -0,0 +1,29 @@
+import { makeAutoObservable } from "mobx";
+import { SegmentedControlItem } from "../../domains/SegmentedControlItem.js";
+import { SegmentedControlItemFormatter } from "../../domains/SegmentedControlItemFormatter.js";
+class SegmentedControlPresenter {
+  params = undefined;
+  constructor() {
+    makeAutoObservable(this);
+  }
+  init = params => {
+    this.params = params;
+  };
+  get vm() {
+    return {
+      items: this.getSegmentedControlItems().map(item => SegmentedControlItemFormatter.format(item))
+    };
+  }
+  changeValue = value => {
+    this.params?.onValueChange?.(value);
+  };
+  getSegmentedControlItems() {
+    if (!this.params?.items) {
+      return [];
+    }
+    return this.params.items.map(item => SegmentedControlItem.create(item));
+  }
+}
+export { SegmentedControlPresenter };
+
+//# sourceMappingURL=SegmentedControlPresenter.js.map

package/SegmentedControl/primitives/presenters/SegmentedControlPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["makeAutoObservable","SegmentedControlItem","SegmentedControlItemFormatter","SegmentedControlPresenter","params","undefined","constructor","init","vm","items","getSegmentedControlItems","map","item","format","changeValue","value","onValueChange","create"],"sources":["SegmentedControlPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { SegmentedControlVm } from \"../SegmentedControlPrimitive.js\";\nimport { SegmentedControlItem } from \"~/SegmentedControl/domains/SegmentedControlItem.js\";\nimport { SegmentedControlItemFormatter } from \"~/SegmentedControl/domains/SegmentedControlItemFormatter.js\";\nimport type { SegmentedControlItemParams } from \"~/SegmentedControl/domains/SegmentedControlItemParams.js\";\n\ninterface SegmentedControlPresenterParams<TValue = string> {\n    items: SegmentedControlItemParams[];\n    onValueChange?: (value: TValue) => void;\n}\n\ninterface ISegmentedControlPresenter<TValue = string> {\n    vm: SegmentedControlVm;\n    init: (props: SegmentedControlPresenterParams<TValue>) => void;\n    changeValue: (value: TValue) => void;\n}\n\nclass SegmentedControlPresenter<TValue = string> implements ISegmentedControlPresenter<TValue> {\n    private params?: SegmentedControlPresenterParams<TValue> = undefined;\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    public init = (params: SegmentedControlPresenterParams<TValue>) => {\n        this.params = params;\n    };\n\n    get vm() {\n        return {\n            items: this.getSegmentedControlItems().map(item =>\n                SegmentedControlItemFormatter.format(item)\n            )\n        };\n    }\n\n    public changeValue = (value: TValue) => {\n        this.params?.onValueChange?.(value);\n    };\n\n    private getSegmentedControlItems() {\n        if (!this.params?.items) {\n            return [];\n        }\n\n        return this.params.items.map(item => SegmentedControlItem.create(item));\n    }\n}\n\nexport {\n    SegmentedControlPresenter,\n    type SegmentedControlPresenterParams,\n    type ISegmentedControlPresenter\n};\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAEzC,SAASC,oBAAoB;AAC7B,SAASC,6BAA6B;AActC,MAAMC,yBAAyB,CAAgE;EACnFC,MAAM,GAA6CC,SAAS;EAEpEC,WAAWA,CAAA,EAAG;IACVN,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEOO,IAAI,GAAIH,MAA+C,IAAK;IAC/D,IAAI,CAACA,MAAM,GAAGA,MAAM;EACxB,CAAC;EAED,IAAII,EAAEA,CAAA,EAAG;IACL,OAAO;MACHC,KAAK,EAAE,IAAI,CAACC,wBAAwB,CAAC,CAAC,CAACC,GAAG,CAACC,IAAI,IAC3CV,6BAA6B,CAACW,MAAM,CAACD,IAAI,CAC7C;IACJ,CAAC;EACL;EAEOE,WAAW,GAAIC,KAAa,IAAK;IACpC,IAAI,CAACX,MAAM,EAAEY,aAAa,GAAGD,KAAK,CAAC;EACvC,CAAC;EAEOL,wBAAwBA,CAAA,EAAG;IAC/B,IAAI,CAAC,IAAI,CAACN,MAAM,EAAEK,KAAK,EAAE;MACrB,OAAO,EAAE;IACb;IAEA,OAAO,IAAI,CAACL,MAAM,CAACK,KAAK,CAACE,GAAG,CAACC,IAAI,IAAIX,oBAAoB,CAACgB,MAAM,CAACL,IAAI,CAAC,CAAC;EAC3E;AACJ;AAEA,SACIT,yBAAyB","ignoreList":[]}

package/SegmentedControl/primitives/useSegmentedControl.d.ts

@@ -0,0 +1,7 @@
+import type { SegmentedControlPrimitiveProps } from "./SegmentedControlPrimitive.js";
+export declare const useSegmentedControl: (props: SegmentedControlPrimitiveProps) => {
+    vm: {
+        items: import("../index.js").SegmentedControlItemFormatted[];
+    };
+    changeValue: (value: string) => void;
+};

package/SegmentedControl/primitives/useSegmentedControl.js

@@ -0,0 +1,27 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { SegmentedControlPresenter } from "./presenters/SegmentedControlPresenter.js";
+export const useSegmentedControl = props => {
+  const params = useMemo(() => ({
+    items: props.items,
+    onValueChange: props.onChange
+  }), [props.items, props.onChange]);
+  const presenter = useMemo(() => {
+    return new SegmentedControlPresenter();
+  }, []);
+  useEffect(() => {
+    presenter.init(params);
+  }, [params]);
+  const [vm, setVm] = useState(presenter.vm);
+  useEffect(() => {
+    return autorun(() => {
+      setVm(presenter.vm);
+    });
+  }, [presenter]);
+  return {
+    vm,
+    changeValue: presenter.changeValue
+  };
+};
+
+//# sourceMappingURL=useSegmentedControl.js.map

package/SegmentedControl/primitives/useSegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useState","autorun","SegmentedControlPresenter","useSegmentedControl","props","params","items","onValueChange","onChange","presenter","init","vm","setVm","changeValue"],"sources":["useSegmentedControl.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { SegmentedControlPrimitiveProps } from \"./SegmentedControlPrimitive.js\";\nimport type { SegmentedControlPresenterParams } from \"./presenters/SegmentedControlPresenter.js\";\nimport { SegmentedControlPresenter } from \"./presenters/SegmentedControlPresenter.js\";\n\nexport const useSegmentedControl = (props: SegmentedControlPrimitiveProps) => {\n    const params: SegmentedControlPresenterParams = useMemo(\n        () => ({\n            items: props.items,\n            onValueChange: props.onChange\n        }),\n        [props.items, props.onChange]\n    );\n\n    const presenter = useMemo(() => {\n        return new SegmentedControlPresenter();\n    }, []);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return { vm, changeValue: presenter.changeValue };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAG9B,SAASC,yBAAyB;AAElC,OAAO,MAAMC,mBAAmB,GAAIC,KAAqC,IAAK;EAC1E,MAAMC,MAAuC,GAAGN,OAAO,CACnD,OAAO;IACHO,KAAK,EAAEF,KAAK,CAACE,KAAK;IAClBC,aAAa,EAAEH,KAAK,CAACI;EACzB,CAAC,CAAC,EACF,CAACJ,KAAK,CAACE,KAAK,EAAEF,KAAK,CAACI,QAAQ,CAChC,CAAC;EAED,MAAMC,SAAS,GAAGV,OAAO,CAAC,MAAM;IAC5B,OAAO,IAAIG,yBAAyB,CAAC,CAAC;EAC1C,CAAC,EAAE,EAAE,CAAC;EAENJ,SAAS,CAAC,MAAM;IACZW,SAAS,CAACC,IAAI,CAACL,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAM,CAACM,EAAE,EAAEC,KAAK,CAAC,GAAGZ,QAAQ,CAACS,SAAS,CAACE,EAAE,CAAC;EAE1Cb,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBW,KAAK,CAACH,SAAS,CAACE,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACF,SAAS,CAAC,CAAC;EAEf,OAAO;IAAEE,EAAE;IAAEE,WAAW,EAAEJ,SAAS,CAACI;EAAY,CAAC;AACrD,CAAC","ignoreList":[]}

package/Select/Select.d.ts

@@ -1,22 +1,22 @@
 import React from "react";
-import type { SelectPrimitiveProps } from "./primitives";
-import type { FormComponentProps } from "../FormComponent";
+import type { SelectPrimitiveProps } from "./primitives/index.js";
+import type { FormComponentProps } from "../FormComponent/index.js";
 type SelectProps = SelectPrimitiveProps & FormComponentProps;
-declare const Select: (({ label, description, note, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element) & {
-    original: ({ label, description, note, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
+declare const Select: (({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element) & {
+    original: ({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
+    original: (({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ label, description, note, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Select/Select.js

@@ -1,11 +1,12 @@
 import React, { useMemo } from "react";
-import { makeDecoratable } from "../utils";
-import { SelectPrimitive } from "./primitives";
-import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+import { makeDecoratable } from "../utils.js";
+import { SelectPrimitive } from "./primitives/index.js";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
 const DecoratableSelect = ({
   label,
   description,
   note,
+  hint,
   required,
   disabled,
   validation,
@@ -17,9 +18,10 @@ const DecoratableSelect = ({
   } = validation || {};
   const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full"
+    className: "w-full"
   }, /*#__PURE__*/React.createElement(FormComponentLabel, {
     text: label,
+    hint: hint,
     required: required,
     disabled: disabled,
     invalid: invalid

package/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","makeDecoratable","SelectPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableSelect","label","description","note","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","Select"],"sources":["Select.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { SelectPrimitiveProps } from \"./primitives\";\nimport { SelectPrimitive } from \"./primitives\";\nimport type { FormComponentProps } from \"~/FormComponent\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent\";\n\ntype SelectProps = SelectPrimitiveProps & FormComponentProps;\n\nconst DecoratableSelect = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    ...props\n}: SelectProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"wby-w-full\"}>\n            <FormComponentLabel\n                text={label}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <SelectPrimitive {...props} disabled={disabled} invalid={invalid} />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\nconst Select = makeDecoratable(\"Select\", DecoratableSelect);\n\nexport { Select, type SelectProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,eAAe;AAExB,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,iBAAiB,GAAGA,CAAC;EACvBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACM,CAAC,KAAK;EACf,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGnB,OAAO,CAAC,MAAMgB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIjB,KAAA,CAAAqB,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzBtB,KAAA,CAAAqB,aAAA,CAACf,kBAAkB;IACfiB,IAAI,EAAEd,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFpB,KAAA,CAAAqB,aAAA,CAACjB,wBAAwB;IAACmB,IAAI,EAAEb,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEb,KAAA,CAAAqB,aAAA,CAAClB,eAAe,EAAAqB,MAAA,CAAAC,MAAA,KAAKV,KAAK;IAAEF,QAAQ,EAAEA,QAAS;IAACO,OAAO,EAAEA;EAAQ,EAAE,CAAC,eACpEpB,KAAA,CAAAqB,aAAA,CAAChB,yBAAyB;IACtBkB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFb,KAAA,CAAAqB,aAAA,CAACd,iBAAiB;IAACgB,IAAI,EAAEZ,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AACD,MAAMa,MAAM,GAAGxB,eAAe,CAAC,QAAQ,EAAEM,iBAAiB,CAAC;AAE3D,SAASkB,MAAM","ignoreList":[]}
+{"version":3,"names":["React","useMemo","makeDecoratable","SelectPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableSelect","label","description","note","hint","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","Select"],"sources":["Select.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { SelectPrimitiveProps } from \"./primitives/index.js\";\nimport { SelectPrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype SelectProps = SelectPrimitiveProps & FormComponentProps;\n\nconst DecoratableSelect = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: SelectProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"w-full\"}>\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <SelectPrimitive {...props} disabled={disabled} invalid={invalid} />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\nconst Select = makeDecoratable(\"Select\", DecoratableSelect);\n\nexport { Select, type SelectProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,eAAe;AAExB,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,iBAAiB,GAAGA,CAAC;EACvBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACM,CAAC,KAAK;EACf,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGpB,OAAO,CAAC,MAAMiB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIlB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAE;EAAS,gBACrBvB,KAAA,CAAAsB,aAAA,CAAChB,kBAAkB;IACfkB,IAAI,EAAEf,KAAM;IACZG,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFrB,KAAA,CAAAsB,aAAA,CAAClB,wBAAwB;IAACoB,IAAI,EAAEd,WAAY;IAACI,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEd,KAAA,CAAAsB,aAAA,CAACnB,eAAe,EAAAsB,MAAA,CAAAC,MAAA,KAAKV,KAAK;IAAEF,QAAQ,EAAEA,QAAS;IAACO,OAAO,EAAEA;EAAQ,EAAE,CAAC,eACpErB,KAAA,CAAAsB,aAAA,CAACjB,yBAAyB;IACtBmB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFd,KAAA,CAAAsB,aAAA,CAACf,iBAAiB;IAACiB,IAAI,EAAEb,IAAK;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AACD,MAAMa,MAAM,GAAGzB,eAAe,CAAC,QAAQ,EAAEM,iBAAiB,CAAC;AAE3D,SAASmB,MAAM","ignoreList":[]}

package/Select/Select.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as SelectStories from './Select.stories';
+import * as SelectStories from "./Select.stories";
 
 <Meta of={SelectStories} />
 
@@ -16,7 +16,7 @@ import React, { useState } from "react";
 import { Select } from "@webiny/admin-ui";
 
 const SelectExample = () => {
-    const [value, setValue] = useState("");
+const [value, setValue] = useState("");
 
     return (
         <Select
@@ -36,25 +36,26 @@ const SelectExample = () => {
             onChange={setValue}
         />
     );
+
 };
 
 export default SelectExample;
 
 `} }
-    additionalActions={[
-        {
-            title: 'Open in GitHub',
-            onClick: () => {
-                window.open(
-                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Select/Select.tsx',
-                    '_blank'
-                );
-            },
-        }
-    ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Select/Select.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={SelectStories.Documentation} exclude={["onChange", "onOpenChange"]}/>
+<Controls of={SelectStories.Documentation} exclude={["onChange", "onOpenChange"]} />
 
 ```jsx
 import React, { useState } from "react";
@@ -62,26 +63,26 @@ import React, { useState } from "react";
 import { Select } from "@webiny/admin-ui";
 
 const SelectExample = () => {
-    const [value, setValue] = useState("");
-
-    return (
-        <Select
-            label="Time Zone"
-            description="Select your preferred time zone"
-            note="This setting will affect how times are displayed throughout the application"
-            required={true}
-            options={[
-                { value: "EST", label: "Eastern Standard Time (UTC-5)" },
-                { value: "CST", label: "Central Standard Time (UTC-6)" },
-                { value: "PST", label: "Pacific Standard Time (UTC-8)" },
-                { value: "GMT", label: "Greenwich Mean Time (UTC+0)" },
-                { value: "CET", label: "Central European Time (UTC+1)" },
-                { value: "IST", label: "India Standard Time (UTC+5:30)" }
-            ]}
-            value={value}
-            onChange={setValue}
-        />
-    );
+  const [value, setValue] = useState("");
+
+  return (
+    <Select
+      label="Time Zone"
+      description="Select your preferred time zone"
+      note="This setting will affect how times are displayed throughout the application"
+      required={true}
+      options={[
+        { value: "EST", label: "Eastern Standard Time (UTC-5)" },
+        { value: "CST", label: "Central Standard Time (UTC-6)" },
+        { value: "PST", label: "Pacific Standard Time (UTC-8)" },
+        { value: "GMT", label: "Greenwich Mean Time (UTC+0)" },
+        { value: "CET", label: "Central European Time (UTC+1)" },
+        { value: "IST", label: "India Standard Time (UTC+5:30)" }
+      ]}
+      value={value}
+      onChange={setValue}
+    />
+  );
 };
 
 export default SelectExample;
@@ -90,27 +91,35 @@ export default SelectExample;
 ## Anatomy
 
 ### Select Anatomy
-<img src="/images/storybook/select/anatomy.png" alt="Select Anatomy"/>
+
+<img src="/images/storybook/select/anatomy.png" alt="Select Anatomy" />
 
 ### Styles
-<img src="/images/storybook/select/styles.png" alt="Styles"/>
+
+<img src="/images/storybook/select/styles.png" alt="Styles" />
 
 ### Options
-<img src="/images/storybook/select/options.png" alt="Options"/>
+
+<img src="/images/storybook/select/options.png" alt="Options" />
 
 ### States and Styles
-<img src="/images/storybook/select/states-and-styles.png" alt="States and Styles"/>
+
+<img src="/images/storybook/select/states-and-styles.png" alt="States and Styles" />
 
 ### Label Anatomy
-<img src="/images/storybook/select/label-anatomy.png" alt="Label Anatomy"/>
+
+<img src="/images/storybook/select/label-anatomy.png" alt="Label Anatomy" />
 
 ### Label Properties
-<img src="/images/storybook/select/label-properties.png" alt="Label Properties"/>
+
+<img src="/images/storybook/select/label-properties.png" alt="Label Properties" />
 
 ### Label Options
-<img src="/images/storybook/select/label-options.png" alt="Label Options"/>
+
+<img src="/images/storybook/select/label-options.png" alt="Label Options" />
 
 ## Usage
 
 ### Used in forms
-<img src="/images/storybook/select/used-in-forms.png" alt="Used in forms"/>
+
+<img src="/images/storybook/select/used-in-forms.png" alt="Used in forms" />