@webiny/admin-ui 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

package/Skeleton/Skeleton.stories.js

@@ -1,108 +1,134 @@
-import React from "react";
+import react from "react";
 import { Skeleton } from "./Skeleton.js";
 const meta = {
-  title: "Components/Skeleton",
-  component: Skeleton,
-  parameters: {
-    layout: "padded"
-  },
-  argTypes: {
-    type: {
-      control: "select",
-      options: ["text", "thumbnail", "area"]
+    title: "Components/Skeleton",
+    component: Skeleton,
+    parameters: {
+        layout: "padded"
     },
-    size: {
-      control: "select",
-      options: ["xs", "sm", "md", "lg", "xl", "xxl", "3xl"]
+    argTypes: {
+        type: {
+            control: "select",
+            options: [
+                "text",
+                "thumbnail",
+                "area"
+            ]
+        },
+        size: {
+            control: "select",
+            options: [
+                "xs",
+                "sm",
+                "md",
+                "lg",
+                "xl",
+                "xxl",
+                "3xl"
+            ]
+        }
     }
-  }
 };
-export default meta;
-export const Default = {};
-export const Text = {
-  args: {
-    type: "text"
-  }
+const Skeleton_stories = meta;
+const Default = {};
+const Text = {
+    args: {
+        type: "text"
+    }
 };
-export const Thumbnail = {
-  args: {
-    type: "thumbnail"
-  }
+const Thumbnail = {
+    args: {
+        type: "thumbnail"
+    }
 };
-export const Area = {
-  args: {
-    type: "area",
-    className: "w-1/2 h-32"
-  }
+const Area = {
+    args: {
+        type: "area",
+        className: "w-1/2 h-32"
+    }
 };
-export const MultipleAreas = {
-  render: () => /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-md"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-md"
-  }, /*#__PURE__*/React.createElement(Skeleton, {
-    type: "area",
-    className: "w-32 h-32"
-  }), /*#__PURE__*/React.createElement(Skeleton, {
-    type: "area",
-    className: "w-32 h-32"
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Skeleton, {
-    type: "area",
-    className: "w-32 h-full"
-  })))
+const MultipleAreas = {
+    render: ()=>/*#__PURE__*/ react.createElement("div", {
+            className: "flex gap-md"
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex flex-col gap-md"
+        }, /*#__PURE__*/ react.createElement(Skeleton, {
+            type: "area",
+            className: "w-32 h-32"
+        }), /*#__PURE__*/ react.createElement(Skeleton, {
+            type: "area",
+            className: "w-32 h-32"
+        })), /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Skeleton, {
+            type: "area",
+            className: "w-32 h-full"
+        })))
 };
-export const ExtraSmall = {
-  args: {
-    size: "xs"
-  }
+const ExtraSmall = {
+    args: {
+        size: "xs"
+    }
 };
-export const Small = {
-  args: {
-    size: "sm"
-  }
+const Small = {
+    args: {
+        size: "sm"
+    }
 };
-export const Medium = {
-  args: {
-    size: "md"
-  }
+const Medium = {
+    args: {
+        size: "md"
+    }
 };
-export const Large = {
-  args: {
-    size: "lg"
-  }
+const Large = {
+    args: {
+        size: "lg"
+    }
 };
-export const ExtraLarge = {
-  args: {
-    size: "xl"
-  }
+const ExtraLarge = {
+    args: {
+        size: "xl"
+    }
 };
-export const DoubleExtraLarge = {
-  args: {
-    size: "xxl"
-  }
+const DoubleExtraLarge = {
+    args: {
+        size: "xxl"
+    }
 };
-export const TripleExtraLarge = {
-  args: {
-    size: "3xl"
-  }
+const TripleExtraLarge = {
+    args: {
+        size: "3xl"
+    }
 };
-export const Documentation = {
-  args: {
-    type: "area",
-    size: "lg"
-  },
-  argTypes: {
-    type: {
-      control: "select",
-      description: "The type of skeleton to display",
-      options: ["text", "thumbnail", "area"]
+const Documentation = {
+    args: {
+        type: "area",
+        size: "lg"
     },
-    size: {
-      control: "select",
-      description: "The size of the skeleton",
-      options: ["xs", "sm", "md", "lg", "xl", "xxl", "3xl"]
+    argTypes: {
+        type: {
+            control: "select",
+            description: "The type of skeleton to display",
+            options: [
+                "text",
+                "thumbnail",
+                "area"
+            ]
+        },
+        size: {
+            control: "select",
+            description: "The size of the skeleton",
+            options: [
+                "xs",
+                "sm",
+                "md",
+                "lg",
+                "xl",
+                "xxl",
+                "3xl"
+            ]
+        }
     }
-  }
 };
+export default Skeleton_stories;
+export { Area, Default, Documentation, DoubleExtraLarge, ExtraLarge, ExtraSmall, Large, Medium, MultipleAreas, Small, Text, Thumbnail, TripleExtraLarge };
 
 //# sourceMappingURL=Skeleton.stories.js.map

package/Skeleton/Skeleton.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Skeleton","meta","title","component","parameters","layout","argTypes","type","control","options","size","Default","Text","args","Thumbnail","Area","className","MultipleAreas","render","createElement","ExtraSmall","Small","Medium","Large","ExtraLarge","DoubleExtraLarge","TripleExtraLarge","Documentation","description"],"sources":["Skeleton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Skeleton } from \"./Skeleton.js\";\n\nconst meta: Meta<typeof Skeleton> = {\n    title: \"Components/Skeleton\",\n    component: Skeleton,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Skeleton>;\n\nexport const Default: Story = {};\n\nexport const Text: Story = {\n    args: {\n        type: \"text\"\n    }\n};\n\nexport const Thumbnail: Story = {\n    args: {\n        type: \"thumbnail\"\n    }\n};\n\nexport const Area: Story = {\n    args: {\n        type: \"area\",\n        className: \"w-1/2 h-32\"\n    }\n};\n\nexport const MultipleAreas: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <div className=\"flex flex-col gap-md\">\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n            </div>\n            <div>\n                <Skeleton type=\"area\" className=\"w-32 h-full\" />\n            </div>\n        </div>\n    )\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const DoubleExtraLarge: Story = {\n    args: {\n        size: \"xxl\"\n    }\n};\n\nexport const TripleExtraLarge: Story = {\n    args: {\n        size: \"3xl\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"area\",\n        size: \"lg\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            description: \"The type of skeleton to display\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            description: \"The size of the skeleton\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Skeleton/Skeleton.stories.js","sources":["../../src/Skeleton/Skeleton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Skeleton } from \"./Skeleton.js\";\n\nconst meta: Meta<typeof Skeleton> = {\n    title: \"Components/Skeleton\",\n    component: Skeleton,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Skeleton>;\n\nexport const Default: Story = {};\n\nexport const Text: Story = {\n    args: {\n        type: \"text\"\n    }\n};\n\nexport const Thumbnail: Story = {\n    args: {\n        type: \"thumbnail\"\n    }\n};\n\nexport const Area: Story = {\n    args: {\n        type: \"area\",\n        className: \"w-1/2 h-32\"\n    }\n};\n\nexport const MultipleAreas: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <div className=\"flex flex-col gap-md\">\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n            </div>\n            <div>\n                <Skeleton type=\"area\" className=\"w-32 h-full\" />\n            </div>\n        </div>\n    )\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const DoubleExtraLarge: Story = {\n    args: {\n        size: \"xxl\"\n    }\n};\n\nexport const TripleExtraLarge: Story = {\n    args: {\n        size: \"3xl\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"area\",\n        size: \"lg\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            description: \"The type of skeleton to display\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            description: \"The size of the skeleton\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        }\n    }\n};\n"],"names":["meta","Skeleton","Default","Text","Thumbnail","Area","MultipleAreas","ExtraSmall","Small","Medium","Large","ExtraLarge","DoubleExtraLarge","TripleExtraLarge","Documentation"],"mappings":";;AAIA,MAAMA,OAA8B;IAChC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAa;aAAO;QAC1C;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;gBAAO;aAAM;QACzD;IACJ;AACJ;AAEA,yBAAeD;AAIR,MAAME,UAAiB,CAAC;AAExB,MAAMC,OAAc;IACvB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,OAAc;IACvB,MAAM;QACF,MAAM;QACN,WAAW;IACf;AACJ;AAEO,MAAMC,gBAAuB;IAChC,QAAQ,kBACJ,oBAAC;YAAI,WAAU;yBACX,oBAAC;YAAI,WAAU;yBACX,oBAACL,UAAQA;YAAC,MAAK;YAAO,WAAW;0BACjC,oBAACA,UAAQA;YAAC,MAAK;YAAO,WAAW;2BAErC,oBAAC,2BACG,oBAACA,UAAQA;YAAC,MAAK;YAAO,WAAU;;AAIhD;AAEO,MAAMM,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,MAAM;IACV;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAQ;gBAAa;aAAO;QAC1C;QACA,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;gBAAO;aAAM;QACzD;IACJ;AACJ"}

package/Skeleton/index.js

@@ -1,3 +1 @@
 export * from "./Skeleton.js";
-
-//# sourceMappingURL=index.js.map

package/Slider/Slider.d.ts

@@ -7,21 +7,21 @@ import type { FormComponentProps } from "../FormComponent/index.js";
 type SliderProps = FormComponentProps & SliderPrimitiveProps & {
     labelPosition?: "top" | "side";
 };
-declare const Slider: (({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
-    original: ({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+declare const Slider: (({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
+    original: ({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
-        original: ({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+    original: (({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
+        original: ({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
-        original: ({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
+        original: ({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Slider/Slider.js

@@ -1,98 +1,76 @@
-import * as React from "react";
 import { Label } from "../Label/index.js";
 import { makeDecoratable } from "../utils.js";
-import { SliderPrimitiveRenderer, useSlider, SliderValue } from "./primitives/index.js";
+import { SliderPrimitiveRenderer, SliderValue, useSlider } from "./primitives/index.js";
 import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
-
-/**
- * Slider Renderer with side label
- */
-
-const SliderRendererWithSideValue = props => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full flex flex-row items-center justify-between"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "basis-2/12 pr-sm"
-  }, /*#__PURE__*/React.createElement(Label, {
-    text: props.label,
-    required: props.required,
-    disabled: props.disabled,
-    invalid: props.invalid,
-    weight: "light"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "basis-9/12"
-  }, /*#__PURE__*/React.createElement(SliderPrimitiveRenderer, props)), /*#__PURE__*/React.createElement("div", {
-    className: "basis-1/12 pl-sm text-right"
-  }, /*#__PURE__*/React.createElement(SliderValue, {
-    value: props.textValue,
-    disabled: props.disabled
-  })));
-};
-
-/**
- * Slider
- */
-
-const DecoratableSlider = ({
-  description,
-  note,
-  validation,
-  labelPosition,
-  ...props
-}) => {
-  const {
-    isValid: validationIsValid,
-    message: validationMessage
-  } = validation || {};
-  const invalid = validationIsValid === false;
-  const {
-    vm,
-    changeValue,
-    commitValue
-  } = useSlider(props);
-  if (labelPosition === "side") {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "w-full"
-    }, /*#__PURE__*/React.createElement(FormComponentDescription, {
-      text: description,
-      disabled: props.disabled
-    }), /*#__PURE__*/React.createElement(SliderRendererWithSideValue, Object.assign({}, props, vm, {
-      invalid: invalid,
-      onValueChange: changeValue,
-      onValueCommit: commitValue
-    })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
-      text: validationMessage,
-      invalid: invalid,
-      disabled: props.disabled
-    }), /*#__PURE__*/React.createElement(FormComponentNote, {
-      text: note,
-      disabled: props.disabled
+import * as __rspack_external_react from "react";
+const SliderRendererWithSideValue = (props)=>/*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "w-full flex flex-row items-center justify-between"
+    }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "basis-2/12 pr-sm"
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Label, {
+        text: props.label,
+        required: props.required,
+        disabled: props.disabled,
+        invalid: props.invalid,
+        weight: "light"
+    })), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "basis-9/12"
+    }, /*#__PURE__*/ __rspack_external_react.createElement(SliderPrimitiveRenderer, props)), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "basis-1/12 pl-sm text-right"
+    }, /*#__PURE__*/ __rspack_external_react.createElement(SliderValue, {
+        value: props.textValue,
+        disabled: props.disabled
+    })));
+const DecoratableSlider = ({ description, note, hint, validation, labelPosition, ...props })=>{
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = false === validationIsValid;
+    const { vm, changeValue, commitValue } = useSlider(props);
+    if ("side" === labelPosition) return /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "w-full"
+    }, /*#__PURE__*/ __rspack_external_react.createElement(FormComponentDescription, {
+        text: description,
+        disabled: props.disabled
+    }), /*#__PURE__*/ __rspack_external_react.createElement(SliderRendererWithSideValue, {
+        ...props,
+        ...vm,
+        invalid: invalid,
+        onValueChange: changeValue,
+        onValueCommit: commitValue
+    }), /*#__PURE__*/ __rspack_external_react.createElement(FormComponentErrorMessage, {
+        text: validationMessage,
+        invalid: invalid,
+        disabled: props.disabled
+    }), /*#__PURE__*/ __rspack_external_react.createElement(FormComponentNote, {
+        text: note,
+        disabled: props.disabled
+    }));
+    return /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "w-full"
+    }, /*#__PURE__*/ __rspack_external_react.createElement(FormComponentLabel, {
+        hint: hint,
+        text: /*#__PURE__*/ __rspack_external_react.createElement(Label, {
+            text: props.label,
+            value: vm.textValue
+        }),
+        disabled: props.disabled,
+        required: props.required,
+        invalid: invalid
+    }), /*#__PURE__*/ __rspack_external_react.createElement(FormComponentDescription, {
+        text: description,
+        disabled: props.disabled
+    }), /*#__PURE__*/ __rspack_external_react.createElement(SliderPrimitiveRenderer, {
+        ...props,
+        ...vm,
+        onValueChange: changeValue,
+        onValueCommit: commitValue
+    }), /*#__PURE__*/ __rspack_external_react.createElement(FormComponentErrorMessage, {
+        text: validationMessage,
+        invalid: invalid,
+        disabled: props.disabled
+    }), /*#__PURE__*/ __rspack_external_react.createElement(FormComponentNote, {
+        text: note,
+        disabled: props.disabled
     }));
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
-    text: /*#__PURE__*/React.createElement(Label, {
-      text: props.label,
-      value: vm.textValue
-    }),
-    disabled: props.disabled,
-    required: props.required,
-    invalid: invalid
-  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
-    text: description,
-    disabled: props.disabled
-  }), /*#__PURE__*/React.createElement(SliderPrimitiveRenderer, Object.assign({}, props, vm, {
-    onValueChange: changeValue,
-    onValueCommit: commitValue
-  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
-    text: validationMessage,
-    invalid: invalid,
-    disabled: props.disabled
-  }), /*#__PURE__*/React.createElement(FormComponentNote, {
-    text: note,
-    disabled: props.disabled
-  }));
 };
 const Slider = makeDecoratable("Slider", DecoratableSlider);
 export { Slider };

package/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Label","makeDecoratable","SliderPrimitiveRenderer","useSlider","SliderValue","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","SliderRendererWithSideValue","props","createElement","className","text","label","required","disabled","invalid","weight","value","textValue","DecoratableSlider","description","note","validation","labelPosition","isValid","validationIsValid","message","validationMessage","vm","changeValue","commitValue","Object","assign","onValueChange","onValueCommit","Slider"],"sources":["Slider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Label } from \"~/Label/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { SliderPrimitiveProps, SliderPrimitiveRendererProps } from \"./primitives/index.js\";\nimport { SliderPrimitiveRenderer, useSlider, SliderValue } 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\n/**\n * Slider Renderer with side label\n */\ninterface SliderRendererWithSideValueProps extends SliderPrimitiveRendererProps {\n    label?: React.ReactNode;\n    invalid?: boolean;\n    required?: boolean;\n}\n\nconst SliderRendererWithSideValue = (props: SliderRendererWithSideValueProps) => {\n    return (\n        <div className={\"w-full flex flex-row items-center justify-between\"}>\n            <div className={\"basis-2/12 pr-sm\"}>\n                <Label\n                    text={props.label}\n                    required={props.required}\n                    disabled={props.disabled}\n                    invalid={props.invalid}\n                    weight={\"light\"}\n                />\n            </div>\n            <div className={\"basis-9/12\"}>\n                <SliderPrimitiveRenderer {...props} />\n            </div>\n            <div className={\"basis-1/12 pl-sm text-right\"}>\n                <SliderValue value={props.textValue} disabled={props.disabled} />\n            </div>\n        </div>\n    );\n};\n\n/**\n * Slider\n */\ntype SliderProps = FormComponentProps &\n    SliderPrimitiveProps & {\n        labelPosition?: \"top\" | \"side\";\n    };\n\nconst DecoratableSlider = ({\n    description,\n    note,\n    validation,\n    labelPosition,\n    ...props\n}: SliderProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = validationIsValid === false;\n\n    const { vm, changeValue, commitValue } = useSlider(props);\n\n    if (labelPosition === \"side\") {\n        return (\n            <div className={\"w-full\"}>\n                <FormComponentDescription text={description} disabled={props.disabled} />\n                <SliderRendererWithSideValue\n                    {...props}\n                    {...vm}\n                    invalid={invalid}\n                    onValueChange={changeValue}\n                    onValueCommit={commitValue}\n                />\n                <FormComponentErrorMessage\n                    text={validationMessage}\n                    invalid={invalid}\n                    disabled={props.disabled}\n                />\n                <FormComponentNote text={note} disabled={props.disabled} />\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"w-full\"}>\n            <FormComponentLabel\n                text={<Label text={props.label} value={vm.textValue} />}\n                disabled={props.disabled}\n                required={props.required}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={props.disabled} />\n            <SliderPrimitiveRenderer\n                {...props}\n                {...vm}\n                onValueChange={changeValue}\n                onValueCommit={commitValue}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={props.disabled}\n            />\n            <FormComponentNote text={note} disabled={props.disabled} />\n        </div>\n    );\n};\nconst Slider = makeDecoratable(\"Slider\", DecoratableSlider);\n\nexport { Slider, type SliderProps };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Slider/Slider.js","sources":["../../src/Slider/Slider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Label } from \"~/Label/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { SliderPrimitiveProps, SliderPrimitiveRendererProps } from \"./primitives/index.js\";\nimport { SliderPrimitiveRenderer, useSlider, SliderValue } 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\n/**\n * Slider Renderer with side label\n */\ninterface SliderRendererWithSideValueProps extends SliderPrimitiveRendererProps {\n    label?: React.ReactNode;\n    invalid?: boolean;\n    required?: boolean;\n}\n\nconst SliderRendererWithSideValue = (props: SliderRendererWithSideValueProps) => {\n    return (\n        <div className={\"w-full flex flex-row items-center justify-between\"}>\n            <div className={\"basis-2/12 pr-sm\"}>\n                <Label\n                    text={props.label}\n                    required={props.required}\n                    disabled={props.disabled}\n                    invalid={props.invalid}\n                    weight={\"light\"}\n                />\n            </div>\n            <div className={\"basis-9/12\"}>\n                <SliderPrimitiveRenderer {...props} />\n            </div>\n            <div className={\"basis-1/12 pl-sm text-right\"}>\n                <SliderValue value={props.textValue} disabled={props.disabled} />\n            </div>\n        </div>\n    );\n};\n\n/**\n * Slider\n */\ntype SliderProps = FormComponentProps &\n    SliderPrimitiveProps & {\n        labelPosition?: \"top\" | \"side\";\n    };\n\nconst DecoratableSlider = ({\n    description,\n    note,\n    hint,\n    validation,\n    labelPosition,\n    ...props\n}: SliderProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = validationIsValid === false;\n\n    const { vm, changeValue, commitValue } = useSlider(props);\n\n    if (labelPosition === \"side\") {\n        return (\n            <div className={\"w-full\"}>\n                <FormComponentDescription text={description} disabled={props.disabled} />\n                <SliderRendererWithSideValue\n                    {...props}\n                    {...vm}\n                    invalid={invalid}\n                    onValueChange={changeValue}\n                    onValueCommit={commitValue}\n                />\n                <FormComponentErrorMessage\n                    text={validationMessage}\n                    invalid={invalid}\n                    disabled={props.disabled}\n                />\n                <FormComponentNote text={note} disabled={props.disabled} />\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"w-full\"}>\n            <FormComponentLabel\n                hint={hint}\n                text={<Label text={props.label} value={vm.textValue} />}\n                disabled={props.disabled}\n                required={props.required}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={props.disabled} />\n            <SliderPrimitiveRenderer\n                {...props}\n                {...vm}\n                onValueChange={changeValue}\n                onValueCommit={commitValue}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={props.disabled}\n            />\n            <FormComponentNote text={note} disabled={props.disabled} />\n        </div>\n    );\n};\nconst Slider = makeDecoratable(\"Slider\", DecoratableSlider);\n\nexport { Slider, type SliderProps };\n"],"names":["SliderRendererWithSideValue","props","Label","SliderPrimitiveRenderer","SliderValue","DecoratableSlider","description","note","hint","validation","labelPosition","validationIsValid","validationMessage","invalid","vm","changeValue","commitValue","useSlider","FormComponentDescription","FormComponentErrorMessage","FormComponentNote","FormComponentLabel","Slider","makeDecoratable"],"mappings":";;;;;AAsBA,MAAMA,8BAA8B,CAACC,QAC1B,WAAP,GACI,sCAAC;QAAI,WAAW;qBACZ,sCAAC;QAAI,WAAW;qBACZ,sCAACC,OAAKA;QACF,MAAMD,MAAM,KAAK;QACjB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,SAASA,MAAM,OAAO;QACtB,QAAQ;uBAGhB,sCAAC;QAAI,WAAW;qBACZ,sCAACE,yBAA4BF,SAAAA,WAAAA,GAEjC,sCAAC;QAAI,WAAW;qBACZ,sCAACG,aAAWA;QAAC,OAAOH,MAAM,SAAS;QAAE,UAAUA,MAAM,QAAQ;;AAc7E,MAAMI,oBAAoB,CAAC,EACvBC,WAAW,EACXC,IAAI,EACJC,IAAI,EACJC,UAAU,EACVC,aAAa,EACb,GAAGT,OACO;IACV,MAAM,EAAE,SAASU,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGH,cAAc,CAAC;IAClF,MAAMI,UAAUF,AAAsB,UAAtBA;IAEhB,MAAM,EAAEG,EAAE,EAAEC,WAAW,EAAEC,WAAW,EAAE,GAAGC,UAAUhB;IAEnD,IAAIS,AAAkB,WAAlBA,eACA,OAAO,WAAP,GACI,sCAAC;QAAI,WAAW;qBACZ,sCAACQ,0BAAwBA;QAAC,MAAMZ;QAAa,UAAUL,MAAM,QAAQ;sBACrE,sCAACD,6BAA2BA;QACvB,GAAGC,KAAK;QACR,GAAGa,EAAE;QACN,SAASD;QACT,eAAeE;QACf,eAAeC;sBAEnB,sCAACG,2BAAyBA;QACtB,MAAMP;QACN,SAASC;QACT,UAAUZ,MAAM,QAAQ;sBAE5B,sCAACmB,mBAAiBA;QAAC,MAAMb;QAAM,UAAUN,MAAM,QAAQ;;IAKnE,OAAO,WAAP,GACI,sCAAC;QAAI,WAAW;qBACZ,sCAACoB,oBAAkBA;QACf,MAAMb;QACN,oBAAM,sCAACN,OAAKA;YAAC,MAAMD,MAAM,KAAK;YAAE,OAAOa,GAAG,SAAS;;QACnD,UAAUb,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,SAASY;sBAEb,sCAACK,0BAAwBA;QAAC,MAAMZ;QAAa,UAAUL,MAAM,QAAQ;sBACrE,sCAACE,yBAAuBA;QACnB,GAAGF,KAAK;QACR,GAAGa,EAAE;QACN,eAAeC;QACf,eAAeC;sBAEnB,sCAACG,2BAAyBA;QACtB,MAAMP;QACN,SAASC;QACT,UAAUZ,MAAM,QAAQ;sBAE5B,sCAACmB,mBAAiBA;QAAC,MAAMb;QAAM,UAAUN,MAAM,QAAQ;;AAGnE;AACA,MAAMqB,SAASC,gBAAgB,UAAUlB"}

package/Slider/Slider.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as SliderStories from './Slider.stories';
+import * as SliderStories from "./Slider.stories";
 
 <Meta of={SliderStories} />
 
@@ -15,8 +15,8 @@ import React, { useState } from "react";
 import { Slider } from "@webiny/admin-ui";
 
 const SliderExample = () => {
-    const [value, setValue] = useState(50);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [value, setValue] = useState(50);
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleChange = (newValue: number) => {
         setValue(newValue);
@@ -46,62 +46,63 @@ const SliderExample = () => {
             />
         </div>
     );
+
 };
 
 export default SliderExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Slider/Slider.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/Slider/Slider.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={SliderStories.Documentation} exclude={["onValueChange", "onValueCommit"]}/>
+<Controls of={SliderStories.Documentation} exclude={["onValueChange", "onValueCommit"]} />
 
 ```tsx
 import React, { useState } from "react";
 import { Slider } from "@webiny/admin-ui";
 
 const SliderExample = () => {
-    const [value, setValue] = useState(50);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleChange = (newValue: number) => {
-        setValue(newValue);
-
-        if (newValue === 0) {
-            setValidation({ isValid: false, message: "Please select a value" });
-        } else {
-            setValidation({ isValid: true, message: "" });
-        }
-    };
-
-    return (
-        <div>
-            <Slider
-                label="Volume Level"
-                description="Adjust the volume level of your device"
-                note="Note: Higher values may cause distortion on some devices"
-                min={0}
-                max={100}
-                step={1}
-                value={value}
-                required={true}
-                onValueChange={handleChange}
-                showTooltip={true}
-                transformValue={(value) => `${value}%`}
-                validation={validation}
-            />
-        </div>
-    );
+  const [value, setValue] = useState(50);
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleChange = (newValue: number) => {
+    setValue(newValue);
+
+    if (newValue === 0) {
+      setValidation({ isValid: false, message: "Please select a value" });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  return (
+    <div>
+      <Slider
+        label="Volume Level"
+        description="Adjust the volume level of your device"
+        note="Note: Higher values may cause distortion on some devices"
+        min={0}
+        max={100}
+        step={1}
+        value={value}
+        required={true}
+        onValueChange={handleChange}
+        showTooltip={true}
+        transformValue={value => `${value}%`}
+        validation={validation}
+      />
+    </div>
+  );
 };
 
 export default SliderExample;