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

package/ProgressBar/useProgressBar.js

@@ -1,27 +1,32 @@
 import { useEffect, useMemo, useState } from "react";
 import { autorun } from "mobx";
 import { ProgressBarPresenter } from "./presenters/index.js";
-export const useProgressBar = props => {
-  const params = useMemo(() => ({
-    value: props.value,
-    max: props.max,
-    getValueLabel: props.getValueLabel
-  }), [props.value, props.max, props.getValueLabel]);
-  const presenter = useMemo(() => {
-    return new ProgressBarPresenter();
-  }, []);
-  const [vm, setVm] = useState(presenter.vm);
-  useEffect(() => {
-    presenter.init(params);
-  }, [params]);
-  useEffect(() => {
-    return autorun(() => {
-      setVm(presenter.vm);
-    });
-  }, [presenter]);
-  return {
-    vm
-  };
+const useProgressBar = (props)=>{
+    const params = useMemo(()=>({
+            value: props.value,
+            max: props.max,
+            getValueLabel: props.getValueLabel
+        }), [
+        props.value,
+        props.max,
+        props.getValueLabel
+    ]);
+    const presenter = useMemo(()=>new ProgressBarPresenter(), []);
+    const [vm, setVm] = useState(presenter.vm);
+    useEffect(()=>{
+        presenter.init(params);
+    }, [
+        params
+    ]);
+    useEffect(()=>autorun(()=>{
+            setVm(presenter.vm);
+        }), [
+        presenter
+    ]);
+    return {
+        vm
+    };
 };
+export { useProgressBar };
 
 //# sourceMappingURL=useProgressBar.js.map

package/ProgressBar/useProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useState","autorun","ProgressBarPresenter","useProgressBar","props","params","value","max","getValueLabel","presenter","vm","setVm","init"],"sources":["useProgressBar.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { ProgressBarProps } from \"./ProgressBar.js\";\nimport { ProgressBarPresenter, type ProgressBarPresenterParams } from \"./presenters/index.js\";\n\nexport const useProgressBar = (props: ProgressBarProps) => {\n    const params: ProgressBarPresenterParams = useMemo(\n        () => ({\n            value: props.value,\n            max: props.max,\n            getValueLabel: props.getValueLabel\n        }),\n        [props.value, props.max, props.getValueLabel]\n    );\n\n    const presenter = useMemo(() => {\n        return new ProgressBarPresenter();\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm\n    };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAE9B,SAASC,oBAAoB;AAE7B,OAAO,MAAMC,cAAc,GAAIC,KAAuB,IAAK;EACvD,MAAMC,MAAkC,GAAGN,OAAO,CAC9C,OAAO;IACHO,KAAK,EAAEF,KAAK,CAACE,KAAK;IAClBC,GAAG,EAAEH,KAAK,CAACG,GAAG;IACdC,aAAa,EAAEJ,KAAK,CAACI;EACzB,CAAC,CAAC,EACF,CAACJ,KAAK,CAACE,KAAK,EAAEF,KAAK,CAACG,GAAG,EAAEH,KAAK,CAACI,aAAa,CAChD,CAAC;EAED,MAAMC,SAAS,GAAGV,OAAO,CAAC,MAAM;IAC5B,OAAO,IAAIG,oBAAoB,CAAC,CAAC;EACrC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACQ,EAAE,EAAEC,KAAK,CAAC,GAAGX,QAAQ,CAACS,SAAS,CAACC,EAAE,CAAC;EAE1CZ,SAAS,CAAC,MAAM;IACZW,SAAS,CAACG,IAAI,CAACP,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZP,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBU,KAAK,CAACF,SAAS,CAACC,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACD,SAAS,CAAC,CAAC;EAEf,OAAO;IACHC;EACJ,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"file":"ProgressBar/useProgressBar.js","sources":["../../src/ProgressBar/useProgressBar.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { ProgressBarProps } from \"./ProgressBar.js\";\nimport { ProgressBarPresenter, type ProgressBarPresenterParams } from \"./presenters/index.js\";\n\nexport const useProgressBar = (props: ProgressBarProps) => {\n    const params: ProgressBarPresenterParams = useMemo(\n        () => ({\n            value: props.value,\n            max: props.max,\n            getValueLabel: props.getValueLabel\n        }),\n        [props.value, props.max, props.getValueLabel]\n    );\n\n    const presenter = useMemo(() => {\n        return new ProgressBarPresenter();\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm\n    };\n};\n"],"names":["useProgressBar","props","params","useMemo","presenter","ProgressBarPresenter","vm","setVm","useState","useEffect","autorun"],"mappings":";;;AAKO,MAAMA,iBAAiB,CAACC;IAC3B,MAAMC,SAAqCC,QACvC,IAAO;YACH,OAAOF,MAAM,KAAK;YAClB,KAAKA,MAAM,GAAG;YACd,eAAeA,MAAM,aAAa;QACtC,IACA;QAACA,MAAM,KAAK;QAAEA,MAAM,GAAG;QAAEA,MAAM,aAAa;KAAC;IAGjD,MAAMG,YAAYD,QAAQ,IACf,IAAIE,wBACZ,EAAE;IAEL,MAAM,CAACC,IAAIC,MAAM,GAAGC,SAASJ,UAAU,EAAE;IAEzCK,UAAU;QACNL,UAAU,IAAI,CAACF;IACnB,GAAG;QAACA;KAAO;IAEXO,UAAU,IACCC,QAAQ;YACXH,MAAMH,UAAU,EAAE;QACtB,IACD;QAACA;KAAU;IAEd,OAAO;QACHE;IACJ;AACJ"}

package/RadioGroup/RadioGroup.js

@@ -1,45 +1,36 @@
-import React, { useMemo } from "react";
+import react, { useMemo } from "react";
 import { makeDecoratable } from "../utils.js";
 import { RadioGroupPrimitive } from "./primitives/index.js";
 import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
-const DecoratableRadioGroup = ({
-  label,
-  description,
-  note,
-  hint,
-  required,
-  disabled,
-  validation,
-  ...props
-}) => {
-  const {
-    isValid: validationIsValid,
-    message: validationMessage
-  } = validation || {};
-  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
-    text: label,
-    hint: hint,
-    required: required,
-    disabled: disabled,
-    invalid: invalid
-  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
-    text: description,
-    disabled: disabled,
-    className: "mb-xs-plus"
-  }), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
-    text: validationMessage,
-    invalid: invalid,
-    disabled: disabled,
-    className: "mt-none mb-xs-plus"
-  }), /*#__PURE__*/React.createElement(RadioGroupPrimitive, Object.assign({
-    disabled: disabled
-  }, props)), /*#__PURE__*/React.createElement(FormComponentNote, {
-    text: note,
-    disabled: disabled
-  }));
+const DecoratableRadioGroup = ({ label, description, note, hint, required, disabled, validation, ...props })=>{
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(()=>false === validationIsValid, [
+        validationIsValid
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "w-full"
+    }, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: label,
+        hint: hint,
+        required: required,
+        disabled: disabled,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(FormComponentDescription, {
+        text: description,
+        disabled: disabled,
+        className: "mb-xs-plus"
+    }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: validationMessage,
+        invalid: invalid,
+        disabled: disabled,
+        className: "mt-none mb-xs-plus"
+    }), /*#__PURE__*/ react.createElement(RadioGroupPrimitive, {
+        disabled: disabled,
+        ...props
+    }), /*#__PURE__*/ react.createElement(FormComponentNote, {
+        text: note,
+        disabled: disabled
+    }));
 };
 const RadioGroup = makeDecoratable("RadioGroup", DecoratableRadioGroup);
 export { RadioGroup };

package/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","makeDecoratable","RadioGroupPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableRadioGroup","label","description","note","hint","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","RadioGroup"],"sources":["RadioGroup.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { RadioGroupPrimitiveProps } from \"./primitives/index.js\";\nimport { RadioGroupPrimitive } 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 RadioGroupProps = RadioGroupPrimitiveProps & FormComponentProps;\n\nconst DecoratableRadioGroup = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: RadioGroupProps) => {\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\n                text={description}\n                disabled={disabled}\n                className={\"mb-xs-plus\"}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n                className={\"mt-none mb-xs-plus\"}\n            />\n            <RadioGroupPrimitive disabled={disabled} {...props} />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\nconst RadioGroup = makeDecoratable(\"RadioGroup\", DecoratableRadioGroup);\n\nexport { RadioGroup };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,mBAAmB;AAE5B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,qBAAqB,GAAGA,CAAC;EAC3BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACU,CAAC,KAAK;EACnB,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;IACrBoB,IAAI,EAAEd,WAAY;IAClBI,QAAQ,EAAEA,QAAS;IACnBS,SAAS,EAAE;EAAa,CAC3B,CAAC,eACFvB,KAAA,CAAAsB,aAAA,CAACjB,yBAAyB;IACtBmB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA,QAAS;IACnBS,SAAS,EAAE;EAAqB,CACnC,CAAC,eACFvB,KAAA,CAAAsB,aAAA,CAACnB,mBAAmB,EAAAsB,MAAA,CAAAC,MAAA;IAACZ,QAAQ,EAAEA;EAAS,GAAKE,KAAK,CAAG,CAAC,eACtDhB,KAAA,CAAAsB,aAAA,CAACf,iBAAiB;IAACiB,IAAI,EAAEb,IAAK;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AACD,MAAMa,UAAU,GAAGzB,eAAe,CAAC,YAAY,EAAEM,qBAAqB,CAAC;AAEvE,SAASmB,UAAU","ignoreList":[]}
+{"version":3,"file":"RadioGroup/RadioGroup.js","sources":["../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { RadioGroupPrimitiveProps } from \"./primitives/index.js\";\nimport { RadioGroupPrimitive } 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 RadioGroupProps = RadioGroupPrimitiveProps & FormComponentProps;\n\nconst DecoratableRadioGroup = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: RadioGroupProps) => {\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\n                text={description}\n                disabled={disabled}\n                className={\"mb-xs-plus\"}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n                className={\"mt-none mb-xs-plus\"}\n            />\n            <RadioGroupPrimitive disabled={disabled} {...props} />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\nconst RadioGroup = makeDecoratable(\"RadioGroup\", DecoratableRadioGroup);\n\nexport { RadioGroup };\n"],"names":["DecoratableRadioGroup","label","description","note","hint","required","disabled","validation","props","validationIsValid","validationMessage","invalid","useMemo","FormComponentLabel","FormComponentDescription","FormComponentErrorMessage","RadioGroupPrimitive","FormComponentNote","RadioGroup","makeDecoratable"],"mappings":";;;;AAcA,MAAMA,wBAAwB,CAAC,EAC3BC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACV,GAAGC,OACW;IACd,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGH,cAAc,CAAC;IAClF,MAAMI,UAAUC,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAE9E,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACI,oBAAkBA;QACf,MAAMZ;QACN,MAAMG;QACN,UAAUC;QACV,UAAUC;QACV,SAASK;sBAEb,oBAACG,0BAAwBA;QACrB,MAAMZ;QACN,UAAUI;QACV,WAAW;sBAEf,oBAACS,2BAAyBA;QACtB,MAAML;QACN,SAASC;QACT,UAAUL;QACV,WAAW;sBAEf,oBAACU,qBAAmBA;QAAC,UAAUV;QAAW,GAAGE,KAAK;sBAClD,oBAACS,mBAAiBA;QAAC,MAAMd;QAAM,UAAUG;;AAGrD;AACA,MAAMY,aAAaC,gBAAgB,cAAcnB"}

package/RadioGroup/RadioGroup.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 RadioGroupStories from './RadioGroup.stories';
+import * as RadioGroupStories from "./RadioGroup.stories";
 
 <Meta of={RadioGroupStories} />
 
@@ -16,8 +16,8 @@ import React, { useState } from "react";
 import { RadioGroup } from "@webiny/admin-ui";
 
 const RadioGroupExample = () => {
-    const [value, setValue] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [value, setValue] = useState("");
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleValidation = () => {
         if (!value) {
@@ -53,27 +53,28 @@ const RadioGroupExample = () => {
             onBlur={handleValidation}
         />
     );
+
 };
 
 export default RadioGroupExample;
 
 `} }
-    additionalActions={[
-        {
-            title: 'Open in GitHub',
-            onClick: () => {
-                window.open(
-                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/RadioGroup/RadioGroup.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/RadioGroup/RadioGroup.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={RadioGroupStories.Documentation} />
 
-> **Note:** While the `required` prop will show the required indicator (*) next to the label, you need to implement the validation logic using the `validation` and `onBlur` props to handle the actual validation behavior.
+> **Note:** While the `required` prop will show the required indicator (\*) next to the label, you need to implement the validation logic using the `validation` and `onBlur` props to handle the actual validation behavior.
 
 ```jsx
 import React, { useState } from "react";
@@ -81,43 +82,43 @@ import React, { useState } from "react";
 import { RadioGroup } from "@webiny/admin-ui";
 
 const RadioGroupExample = () => {
-    const [value, setValue] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleValidation = () => {
-        if (!value) {
-            setValidation({ isValid: false, message: "This field is required" });
-        } else {
-            setValidation({ isValid: true, message: "" });
+  const [value, setValue] = useState("");
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleValidation = () => {
+    if (!value) {
+      setValidation({ isValid: false, message: "This field is required" });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  return (
+    <RadioGroup
+      label="Deployment Option"
+      description="Choose your preferred deployment method"
+      note="This setting will determine how your application is deployed"
+      required={true}
+      items={[
+        {
+          label: "Automatic Deployment",
+          value: "automatic"
+        },
+        {
+          label: "Manual Deployment",
+          value: "manual"
+        },
+        {
+          label: "Scheduled Deployment",
+          value: "scheduled"
         }
-    };
-
-    return (
-        <RadioGroup
-            label="Deployment Option"
-            description="Choose your preferred deployment method"
-            note="This setting will determine how your application is deployed"
-            required={true}
-            items={[
-                {
-                    label: "Automatic Deployment",
-                    value: "automatic"
-                },
-                {
-                    label: "Manual Deployment",
-                    value: "manual"
-                },
-                {
-                    label: "Scheduled Deployment",
-                    value: "scheduled"
-                }
-            ]}
-            value={value}
-            validation={validation}
-            onChange={newValue => setValue(newValue)}
-            onBlur={handleValidation}
-        />
-    );
+      ]}
+      value={value}
+      validation={validation}
+      onChange={newValue => setValue(newValue)}
+      onBlur={handleValidation}
+    />
+  );
 };
 
 export default RadioGroupExample;
@@ -126,23 +127,25 @@ export default RadioGroupExample;
 ## Anatomy
 
 ### General
+
 Radio input enable users to select a single item from a list of offered choices. A radio input group organizes related radio input options together for better clarity and functionality.
 
-<img src="/images/storybook/radio-group/anatomy.png" alt="Anatomy"/>
+<img src="/images/storybook/radio-group/anatomy.png" alt="Anatomy" />
 
 ### Radio input options
+
 Radio inputs can exist in two different states: Selected and Not Selected. When a radio input is used for bulk selection, all other options must be excluded since the very purpose of a radio input is to provide only one selectable option.
-<img src="/images/storybook/radio-group/options.png" alt="Radio input options"/>
+
+<img src="/images/storybook/radio-group/options.png" alt="Radio input options" />
 
 ### States
-<img src="/images/storybook/radio-group/states.png" alt="States"/>
+
+<img src="/images/storybook/radio-group/states.png" alt="States" />
 
 ## Usage
 
 ### Text overflow
-When the radio item text content is too long for the horizontal space available, the content should wrap to form another line aligning the text and checkbox on top.
-
-<img src="/images/storybook/radio-group/text-overflow.png" alt="Text overflow"/>
-
 
+When the radio item text content is too long for the horizontal space available, the content should wrap to form another line aligning the text and checkbox on top.
 
+<img src="/images/storybook/radio-group/text-overflow.png" alt="Text overflow" />

package/RadioGroup/RadioGroup.stories.js

@@ -1,151 +1,163 @@
-import React, { useState } from "react";
+import react, { useState } from "react";
 import { RadioGroup } from "./RadioGroup.js";
 const meta = {
-  title: "Components/Form/RadioGroup",
-  component: RadioGroup,
-  argTypes: {
-    disabled: {
-      control: "boolean",
-      defaultValue: false
+    title: "Components/Form/RadioGroup",
+    component: RadioGroup,
+    argTypes: {
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: (args)=>{
+        const [value, setValue] = useState(args.value);
+        return /*#__PURE__*/ react.createElement(RadioGroup, {
+            ...args,
+            value: value,
+            onChange: (value)=>setValue(value)
+        });
     }
-  },
-  parameters: {
-    layout: "padded"
-  },
-  render: args => {
-    const [value, setValue] = useState(args.value);
-    return /*#__PURE__*/React.createElement(RadioGroup, Object.assign({}, args, {
-      value: value,
-      onChange: value => setValue(value)
-    }));
-  }
 };
-export default meta;
-export const Default = {
-  args: {
-    items: [{
-      label: "Value 1",
-      value: "value-1"
-    }, {
-      label: "Value 2",
-      value: "value-2"
-    }, {
-      label: "Value 3",
-      value: "value-3"
-    }]
-  }
+const RadioGroup_stories = meta;
+const Default = {
+    args: {
+        items: [
+            {
+                label: "Value 1",
+                value: "value-1"
+            },
+            {
+                label: "Value 2",
+                value: "value-2"
+            },
+            {
+                label: "Value 3",
+                value: "value-3"
+            }
+        ]
+    }
 };
-export const WithLabel = {
-  args: {
-    ...Default.args,
-    label: "Any field label"
-  }
+const WithLabel = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
 };
-export const WithRequiredLabel = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    required: true
-  }
+const WithRequiredLabel = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
 };
-export const WithDescription = {
-  args: {
-    ...Default.args,
-    description: "Provide the required information for processing your request."
-  }
+const WithDescription = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
 };
-export const WithNotes = {
-  args: {
-    ...Default.args,
-    note: "Note: Ensure your selection or input is accurate before proceeding."
-  }
+const WithNotes = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
 };
-export const WithErrors = {
-  args: {
-    ...Default.args,
-    validation: {
-      isValid: false,
-      message: "This field is required."
+const WithErrors = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
     }
-  }
 };
-export const Disabled = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    disabled: true,
-    items: [{
-      label: "Value 1",
-      value: "value-1",
-      disabled: true
-    }, {
-      label: "Value 2",
-      value: "value-2",
-      disabled: true
-    }, {
-      label: "Value 3",
-      value: "value-3",
-      disabled: true
-    }]
-  }
+const Disabled = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true,
+        items: [
+            {
+                label: "Value 1",
+                value: "value-1",
+                disabled: true
+            },
+            {
+                label: "Value 2",
+                value: "value-2",
+                disabled: true
+            },
+            {
+                label: "Value 3",
+                value: "value-3",
+                disabled: true
+            }
+        ]
+    }
 };
-export const FullExample = {
-  args: {
-    ...Default.args,
-    label: "Select which deploy option do you prefer",
-    required: true,
-    description: "Deployment option is simply a way of parsing the data based on your database settings.",
-    note: "Note: Ensure your selection or input is accurate before proceeding.",
-    validation: {
-      isValid: false,
-      message: "You must select at least one option!"
+const FullExample = {
+    args: {
+        ...Default.args,
+        label: "Select which deploy option do you prefer",
+        required: true,
+        description: "Deployment option is simply a way of parsing the data based on your database settings.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "You must select at least one option!"
+        }
     }
-  }
 };
-export const Documentation = {
-  render: args => {
-    const [value, setValue] = useState("");
-    const [validation, setValidation] = useState({
-      isValid: true,
-      message: ""
-    });
-    const handleValidation = () => {
-      if (args.required && !value) {
-        setValidation({
-          isValid: false,
-          message: "This field is required"
+const Documentation = {
+    render: (args)=>{
+        const [value, setValue] = useState("");
+        const [validation, setValidation] = useState({
+            isValid: true,
+            message: ""
         });
-      } else {
-        setValidation({
-          isValid: true,
-          message: ""
+        const handleValidation = ()=>{
+            args.required && !value ? setValidation({
+                isValid: false,
+                message: "This field is required"
+            }) : setValidation({
+                isValid: true,
+                message: ""
+            });
+        };
+        return /*#__PURE__*/ react.createElement(RadioGroup, {
+            ...args,
+            value: value,
+            validation: validation,
+            onChange: (newValue)=>setValue(newValue),
+            onBlur: handleValidation
         });
-      }
-    };
-    return /*#__PURE__*/React.createElement(RadioGroup, Object.assign({}, args, {
-      value: value,
-      validation: validation,
-      onChange: newValue => setValue(newValue),
-      onBlur: handleValidation
-    }));
-  },
-  args: {
-    label: "Deployment Option",
-    description: "Choose your preferred deployment method",
-    note: "This setting will determine how your application is deployed",
-    required: true,
-    disabled: false,
-    items: [{
-      label: "Automatic Deployment",
-      value: "automatic"
-    }, {
-      label: "Manual Deployment",
-      value: "manual"
-    }, {
-      label: "Scheduled Deployment",
-      value: "scheduled"
-    }]
-  }
+    },
+    args: {
+        label: "Deployment Option",
+        description: "Choose your preferred deployment method",
+        note: "This setting will determine how your application is deployed",
+        required: true,
+        disabled: false,
+        items: [
+            {
+                label: "Automatic Deployment",
+                value: "automatic"
+            },
+            {
+                label: "Manual Deployment",
+                value: "manual"
+            },
+            {
+                label: "Scheduled Deployment",
+                value: "scheduled"
+            }
+        ]
+    }
 };
+export default RadioGroup_stories;
+export { Default, Disabled, Documentation, FullExample, WithDescription, WithErrors, WithLabel, WithNotes, WithRequiredLabel };
 
 //# sourceMappingURL=RadioGroup.stories.js.map