@webiny/admin-ui 6.0.0-alpha.0

package/RadioGroup/primitives/RadioGroupPrimitive.js

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitives } from "radix-ui";
+import { cn } from "../../utils";
+import { Radio } from "./Radio";
+import { useRadioGroup } from "./useRadioGroup";
+
+/**
+ * Radio Group Root
+ */
+const RadioGroupRoot = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(RadioGroupPrimitives.Root, Object.assign({
+    className: cn("wby-grid wby-gap-sm-extra wby-py-xs-plus", className)
+  }, props));
+};
+
+/**
+ * Radio Group Renderer
+ */
+
+const RadioGroupRenderer = ({
+  items,
+  changeValue,
+  value,
+  disabled
+}) => {
+  return /*#__PURE__*/React.createElement(RadioGroupRoot, {
+    value: value,
+    onValueChange: value => changeValue(value),
+    disabled: disabled
+  }, items.map(item => /*#__PURE__*/React.createElement(Radio, {
+    id: item.id,
+    value: item.value,
+    key: item.id,
+    label: item.label,
+    disabled: item.disabled
+  })));
+};
+
+/**
+ * Radio Group Primitive
+ */
+const RadioGroupPrimitive = props => {
+  const {
+    vm,
+    changeValue
+  } = useRadioGroup(props);
+  return /*#__PURE__*/React.createElement(RadioGroupRenderer, Object.assign({}, props, {
+    items: vm.items,
+    changeValue: changeValue
+  }));
+};
+
+/**
+ * @deprecated
+ * This component is retained in @webiny/admin-ui and used in  @webiny/ui solely as a compatibility layer.
+ * It is marked as deprecated because nesting `Radio` components inside `RadioGroup` is no longer the recommended approach.
+ * Instead, we now pass an array of `RadioItemDto` directly to `RadioGroup` for better maintainability.
+ */
+const DeprecatedRadioGroup = RadioGroupRoot;
+export { RadioGroupPrimitive, RadioGroupRenderer, DeprecatedRadioGroup };
+
+//# sourceMappingURL=RadioGroupPrimitive.js.map

package/RadioGroup/primitives/RadioGroupPrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","RadioGroup","RadioGroupPrimitives","cn","Radio","useRadioGroup","RadioGroupRoot","className","props","createElement","Root","Object","assign","RadioGroupRenderer","items","changeValue","value","disabled","onValueChange","map","item","id","key","label","RadioGroupPrimitive","vm","DeprecatedRadioGroup"],"sources":["RadioGroupPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { RadioGroup as RadioGroupPrimitives } from \"radix-ui\";\nimport { cn } from \"~/utils\";\nimport { Radio } from \"./Radio\";\nimport { RadioItemParams, RadioItemFormatted } from \"../domains\";\nimport { useRadioGroup } from \"./useRadioGroup\";\n\n/**\n * Radio Group Root\n */\nconst RadioGroupRoot = ({ className, ...props }: RadioGroupPrimitives.RadioGroupProps) => {\n    return (\n        <RadioGroupPrimitives.Root\n            className={cn(\"wby-grid wby-gap-sm-extra wby-py-xs-plus\", className)}\n            {...props}\n        />\n    );\n};\n\n/**\n * Radio Group Renderer\n */\ninterface RadioGroupPrimitiveProps\n    extends Omit<\n        RadioGroupPrimitives.RadioGroupProps,\n        \"defaultValue\" | \"onChange\" | \"onValueChange\" | \"value\"\n    > {\n    items: RadioItemParams[];\n    /**\n     * Callback triggered when the selected value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * Optional selected item.\n     */\n    value?: string;\n}\n\ninterface RadioGroupVm {\n    items: RadioItemFormatted[];\n}\n\ninterface RadioGroupRendererProps extends Omit<RadioGroupPrimitiveProps, \"onChange\"> {\n    items: RadioItemFormatted[];\n    changeValue: (value: string) => void;\n}\n\nconst RadioGroupRenderer = ({ items, changeValue, value, disabled }: RadioGroupRendererProps) => {\n    return (\n        <RadioGroupRoot\n            value={value}\n            onValueChange={value => changeValue(value)}\n            disabled={disabled}\n        >\n            {items.map(item => (\n                <Radio\n                    id={item.id}\n                    value={item.value}\n                    key={item.id}\n                    label={item.label}\n                    disabled={item.disabled}\n                />\n            ))}\n        </RadioGroupRoot>\n    );\n};\n\n/**\n * Radio Group Primitive\n */\nconst RadioGroupPrimitive = (props: RadioGroupPrimitiveProps) => {\n    const { vm, changeValue } = useRadioGroup(props);\n    return <RadioGroupRenderer {...props} items={vm.items} changeValue={changeValue} />;\n};\n\n/**\n * @deprecated\n * This component is retained in @webiny/admin-ui and used in  @webiny/ui solely as a compatibility layer.\n * It is marked as deprecated because nesting `Radio` components inside `RadioGroup` is no longer the recommended approach.\n * Instead, we now pass an array of `RadioItemDto` directly to `RadioGroup` for better maintainability.\n */\nconst DeprecatedRadioGroup = RadioGroupRoot;\n\nexport {\n    RadioGroupPrimitive,\n    RadioGroupRenderer,\n    DeprecatedRadioGroup,\n    type RadioGroupPrimitiveProps,\n    type RadioGroupVm\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,IAAIC,oBAAoB,QAAQ,UAAU;AAC7D,SAASC,EAAE;AACX,SAASC,KAAK;AAEd,SAASC,aAAa;;AAEtB;AACA;AACA;AACA,MAAMC,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAA4C,CAAC,KAAK;EACtF,oBACIR,KAAA,CAAAS,aAAA,CAACP,oBAAoB,CAACQ,IAAI,EAAAC,MAAA,CAAAC,MAAA;IACtBL,SAAS,EAAEJ,EAAE,CAAC,0CAA0C,EAAEI,SAAS;EAAE,GACjEC,KAAK,CACZ,CAAC;AAEV,CAAC;;AAED;AACA;AACA;;AA0BA,MAAMK,kBAAkB,GAAGA,CAAC;EAAEC,KAAK;EAAEC,WAAW;EAAEC,KAAK;EAAEC;AAAkC,CAAC,KAAK;EAC7F,oBACIjB,KAAA,CAAAS,aAAA,CAACH,cAAc;IACXU,KAAK,EAAEA,KAAM;IACbE,aAAa,EAAEF,KAAK,IAAID,WAAW,CAACC,KAAK,CAAE;IAC3CC,QAAQ,EAAEA;EAAS,GAElBH,KAAK,CAACK,GAAG,CAACC,IAAI,iBACXpB,KAAA,CAAAS,aAAA,CAACL,KAAK;IACFiB,EAAE,EAAED,IAAI,CAACC,EAAG;IACZL,KAAK,EAAEI,IAAI,CAACJ,KAAM;IAClBM,GAAG,EAAEF,IAAI,CAACC,EAAG;IACbE,KAAK,EAAEH,IAAI,CAACG,KAAM;IAClBN,QAAQ,EAAEG,IAAI,CAACH;EAAS,CAC3B,CACJ,CACW,CAAC;AAEzB,CAAC;;AAED;AACA;AACA;AACA,MAAMO,mBAAmB,GAAIhB,KAA+B,IAAK;EAC7D,MAAM;IAAEiB,EAAE;IAAEV;EAAY,CAAC,GAAGV,aAAa,CAACG,KAAK,CAAC;EAChD,oBAAOR,KAAA,CAAAS,aAAA,CAACI,kBAAkB,EAAAF,MAAA,CAAAC,MAAA,KAAKJ,KAAK;IAAEM,KAAK,EAAEW,EAAE,CAACX,KAAM;IAACC,WAAW,EAAEA;EAAY,EAAE,CAAC;AACvF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,MAAMW,oBAAoB,GAAGpB,cAAc;AAE3C,SACIkB,mBAAmB,EACnBX,kBAAkB,EAClBa,oBAAoB","ignoreList":[]}

package/RadioGroup/primitives/RadioGroupPrimitive.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RadioGroupPrimitive } from "./RadioGroupPrimitive";
+declare const meta: Meta<typeof RadioGroupPrimitive>;
+export default meta;
+type Story = StoryObj<typeof RadioGroupPrimitive>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const WithDefaultOption: Story;
+export declare const WithDisabledOption: Story;
+export declare const WithDefaultDisabledOption: Story;
+export declare const WithLongOption: Story;
+export declare const WithComplexOptions: Story;
+export declare const WithExternalValueControl: Story;

package/RadioGroup/primitives/RadioGroupPrimitive.stories.js

@@ -0,0 +1,166 @@
+import React, { useState } from "react";
+import { RadioGroupPrimitive } from "./RadioGroupPrimitive";
+import { Text } from "../../Text";
+import { Button } from "../../Button";
+const meta = {
+  title: "Components/Form Primitives/RadioGroup",
+  component: RadioGroupPrimitive,
+  parameters: {
+    layout: "padded"
+  },
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wby-w-full"
+    }, /*#__PURE__*/React.createElement(RadioGroupPrimitive, Object.assign({}, args, {
+      value: value,
+      onChange: value => setValue(value)
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "wby-mt-4 wby-text-center"
+    }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
+  }
+};
+export default meta;
+export const Default = {
+  args: {
+    items: [{
+      value: "value-1",
+      label: "Value 1"
+    }, {
+      value: "value-2",
+      label: "Value 2"
+    }, {
+      value: "value-3",
+      label: "Value 3"
+    }]
+  }
+};
+export const Disabled = {
+  args: {
+    ...Default.args,
+    value: "value-2",
+    disabled: true,
+    items: [{
+      value: "value-1",
+      label: "Value 1"
+    }, {
+      value: "value-2",
+      label: "Value 2"
+    }, {
+      value: "value-3",
+      label: "Value 3"
+    }]
+  }
+};
+export const WithDefaultOption = {
+  args: {
+    ...Default.args,
+    value: "value-2"
+  }
+};
+export const WithDisabledOption = {
+  args: {
+    ...Default.args,
+    items: [{
+      value: "value-1",
+      label: "Value 1"
+    }, {
+      value: "value-2",
+      label: "Value 2",
+      disabled: true
+    }, {
+      value: "value-3",
+      label: "Value 3"
+    }]
+  }
+};
+export const WithDefaultDisabledOption = {
+  args: {
+    ...Default.args,
+    value: "value-2",
+    items: [{
+      value: "value-1",
+      label: "Value 1"
+    }, {
+      value: "value-2",
+      label: "Value 2",
+      disabled: true
+    }, {
+      value: "value-3",
+      label: "Value 3"
+    }]
+  }
+};
+export const WithLongOption = {
+  args: {
+    ...Default.args,
+    items: [{
+      value: "value-1",
+      label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla magna vel massa suscipit mollis. Nunc dui felis, iaculis id tortor ut, hendrerit pulvinar felis."
+    }, {
+      value: "value-2",
+      label: " Pellentesque erat ipsum, posuere dapibus diam id, accumsan sagittis mi. In eu nibh ut nunc ultricies placerat.",
+      disabled: true
+    }, {
+      value: "value-3",
+      label: "Integer a hendrerit dui. Sed tincidunt vel nibh a finibus."
+    }]
+  }
+};
+export const WithComplexOptions = {
+  args: {
+    ...Default.args,
+    items: [{
+      id: "value-1",
+      value: "value-1",
+      label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Value 1"), /*#__PURE__*/React.createElement(Text, {
+        size: "sm"
+      }, "Option description 1"))
+    }, {
+      id: "value-2",
+      value: "value-2",
+      label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Value 2"), /*#__PURE__*/React.createElement(Text, {
+        size: "sm"
+      }, "Option description 2"))
+    }, {
+      id: "value-3",
+      value: "value-3",
+      label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Value 3"), /*#__PURE__*/React.createElement(Text, {
+        size: "sm"
+      }, "Option description 3"))
+    }]
+  }
+};
+export const WithExternalValueControl = {
+  args: {
+    value: "value-2",
+    items: [{
+      value: "value-1",
+      label: "Value 1"
+    }, {
+      value: "value-2",
+      label: "Value 2"
+    }, {
+      value: "value-3",
+      label: "Value 3"
+    }]
+  },
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wby-w-full"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(RadioGroupPrimitive, Object.assign({}, args, {
+      value: value,
+      onChange: value => setValue(value)
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "wby-mt-4 wby-text-center"
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: () => setValue(args.value),
+      text: "Reset"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "wby-mt-4 wby-text-center"
+    }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
+  }
+};
+
+//# sourceMappingURL=RadioGroupPrimitive.stories.js.map

package/RadioGroup/primitives/RadioGroupPrimitive.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","RadioGroupPrimitive","Text","Button","meta","title","component","parameters","layout","render","args","value","setValue","createElement","className","Object","assign","onChange","Default","items","label","Disabled","disabled","WithDefaultOption","WithDisabledOption","WithDefaultDisabledOption","WithLongOption","WithComplexOptions","id","size","WithExternalValueControl","onClick","text"],"sources":["RadioGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { RadioGroupPrimitive } from \"./RadioGroupPrimitive\";\nimport { Text } from \"~/Text\";\nimport { Button } from \"~/Button\";\n\nconst meta: Meta<typeof RadioGroupPrimitive> = {\n    title: \"Components/Form Primitives/RadioGroup\",\n    component: RadioGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"wby-w-full\"}>\n                <RadioGroupPrimitive {...args} value={value} onChange={value => setValue(value)} />\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof RadioGroupPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\"\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        value: \"value-2\",\n        disabled: true,\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\"\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const WithDefaultOption: Story = {\n    args: {\n        ...Default.args,\n        value: \"value-2\"\n    }\n};\n\nexport const WithDisabledOption: Story = {\n    args: {\n        ...Default.args,\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\",\n                disabled: true\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const WithDefaultDisabledOption: Story = {\n    args: {\n        ...Default.args,\n        value: \"value-2\",\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\",\n                disabled: true\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const WithLongOption: Story = {\n    args: {\n        ...Default.args,\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla magna vel massa suscipit mollis. Nunc dui felis, iaculis id tortor ut, hendrerit pulvinar felis.\"\n            },\n            {\n                value: \"value-2\",\n                label: \" Pellentesque erat ipsum, posuere dapibus diam id, accumsan sagittis mi. In eu nibh ut nunc ultricies placerat.\",\n                disabled: true\n            },\n            {\n                value: \"value-3\",\n                label: \"Integer a hendrerit dui. Sed tincidunt vel nibh a finibus.\"\n            }\n        ]\n    }\n};\n\nexport const WithComplexOptions: Story = {\n    args: {\n        ...Default.args,\n        items: [\n            {\n                id: \"value-1\",\n                value: \"value-1\",\n                label: (\n                    <div>\n                        <div>{\"Value 1\"}</div>\n                        <Text size={\"sm\"}>{\"Option description 1\"}</Text>\n                    </div>\n                )\n            },\n            {\n                id: \"value-2\",\n                value: \"value-2\",\n                label: (\n                    <div>\n                        <div>{\"Value 2\"}</div>\n                        <Text size={\"sm\"}>{\"Option description 2\"}</Text>\n                    </div>\n                )\n            },\n            {\n                id: \"value-3\",\n                value: \"value-3\",\n                label: (\n                    <div>\n                        <div>{\"Value 3\"}</div>\n                        <Text size={\"sm\"}>{\"Option description 3\"}</Text>\n                    </div>\n                )\n            }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        value: \"value-2\",\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\"\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"wby-w-full\"}>\n                <div>\n                    <RadioGroupPrimitive\n                        {...args}\n                        value={value}\n                        onChange={value => setValue(value)}\n                    />\n                </div>\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    <Button onClick={() => setValue(args.value)} text={\"Reset\"} />\n                </div>\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/RadioGroup/primitives/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./RadioGroupPrimitive";
+export * from "./Radio";

package/RadioGroup/primitives/index.js

@@ -0,0 +1,4 @@
+export * from "./RadioGroupPrimitive";
+export * from "./Radio";
+
+//# sourceMappingURL=index.js.map

package/RadioGroup/primitives/index.js.map

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

package/RadioGroup/primitives/presenters/RadioGroupPresenter.d.ts

@@ -0,0 +1,22 @@
+import { RadioGroupVm } from "../RadioGroupPrimitive";
+import { RadioItemParams } from "../../domains/RadioItemParams";
+interface RadioGroupPresenterParams<TValue = string> {
+    items: RadioItemParams[];
+    onValueChange?: (value: TValue) => void;
+}
+interface IRadioGroupPresenter<TValue = string> {
+    vm: RadioGroupVm;
+    init: (props: RadioGroupPresenterParams<TValue>) => void;
+    changeValue: (value: TValue) => void;
+}
+declare class RadioGroupPresenter<TValue = string> implements IRadioGroupPresenter<TValue> {
+    private params?;
+    constructor();
+    init: (params: RadioGroupPresenterParams<TValue>) => void;
+    get vm(): {
+        items: import("../../domains").RadioItemFormatted[];
+    };
+    changeValue: (value: TValue) => void;
+    private getRadioItems;
+}
+export { RadioGroupPresenter, type RadioGroupPresenterParams, type IRadioGroupPresenter };

package/RadioGroup/primitives/presenters/RadioGroupPresenter.js

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

package/RadioGroup/primitives/presenters/RadioGroupPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["makeAutoObservable","RadioItem","RadioItemFormatter","RadioGroupPresenter","params","undefined","constructor","init","vm","items","getRadioItems","map","item","format","changeValue","value","onValueChange","create"],"sources":["RadioGroupPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport { RadioGroupVm } from \"../RadioGroupPrimitive\";\nimport { RadioItem } from \"~/RadioGroup/domains/RadioItem\";\nimport { RadioItemFormatter } from \"~/RadioGroup/domains/RadioItemFormatter\";\nimport { RadioItemParams } from \"~/RadioGroup/domains/RadioItemParams\";\n\ninterface RadioGroupPresenterParams<TValue = string> {\n    items: RadioItemParams[];\n    onValueChange?: (value: TValue) => void;\n}\n\ninterface IRadioGroupPresenter<TValue = string> {\n    vm: RadioGroupVm;\n    init: (props: RadioGroupPresenterParams<TValue>) => void;\n    changeValue: (value: TValue) => void;\n}\n\nclass RadioGroupPresenter<TValue = string> implements IRadioGroupPresenter<TValue> {\n    private params?: RadioGroupPresenterParams<TValue> = undefined;\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    public init = (params: RadioGroupPresenterParams<TValue>) => {\n        this.params = params;\n    };\n\n    get vm() {\n        return {\n            items: this.getRadioItems().map(item => RadioItemFormatter.format(item))\n        };\n    }\n\n    public changeValue = (value: TValue) => {\n        this.params?.onValueChange?.(value);\n    };\n\n    private getRadioItems() {\n        if (!this.params?.items) {\n            return [];\n        }\n\n        return this.params.items.map(item => RadioItem.create(item));\n    }\n}\n\nexport { RadioGroupPresenter, type RadioGroupPresenterParams, type IRadioGroupPresenter };\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAEzC,SAASC,SAAS;AAClB,SAASC,kBAAkB;AAc3B,MAAMC,mBAAmB,CAA0D;EACvEC,MAAM,GAAuCC,SAAS;EAE9DC,WAAWA,CAAA,EAAG;IACVN,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEOO,IAAI,GAAIH,MAAyC,IAAK;IACzD,IAAI,CAACA,MAAM,GAAGA,MAAM;EACxB,CAAC;EAED,IAAII,EAAEA,CAAA,EAAG;IACL,OAAO;MACHC,KAAK,EAAE,IAAI,CAACC,aAAa,CAAC,CAAC,CAACC,GAAG,CAACC,IAAI,IAAIV,kBAAkB,CAACW,MAAM,CAACD,IAAI,CAAC;IAC3E,CAAC;EACL;EAEOE,WAAW,GAAIC,KAAa,IAAK;IACpC,IAAI,CAACX,MAAM,EAAEY,aAAa,GAAGD,KAAK,CAAC;EACvC,CAAC;EAEOL,aAAaA,CAAA,EAAG;IACpB,IAAI,CAAC,IAAI,CAACN,MAAM,EAAEK,KAAK,EAAE;MACrB,OAAO,EAAE;IACb;IAEA,OAAO,IAAI,CAACL,MAAM,CAACK,KAAK,CAACE,GAAG,CAACC,IAAI,IAAIX,SAAS,CAACgB,MAAM,CAACL,IAAI,CAAC,CAAC;EAChE;AACJ;AAEA,SAAST,mBAAmB","ignoreList":[]}

package/RadioGroup/primitives/presenters/RadioGroupPresenter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/RadioGroup/primitives/presenters/RadioGroupPresenter.test.js

@@ -0,0 +1,48 @@
+import { RadioGroupPresenter } from "./RadioGroupPresenter";
+describe("RadioGroupPresenter", () => {
+  const onValueChange = jest.fn();
+  it("should return the compatible `vm` based on props", () => {
+    // `items`
+    {
+      const presenter = new RadioGroupPresenter();
+      presenter.init({
+        onValueChange,
+        items: [{
+          value: "value-1",
+          label: "Value 1"
+        }, {
+          value: "value-2",
+          label: "Value 2"
+        }]
+      });
+      expect(presenter.vm.items).toEqual([{
+        id: expect.any(String),
+        value: "value-1",
+        label: "Value 1",
+        disabled: false
+      }, {
+        id: expect.any(String),
+        value: "value-2",
+        label: "Value 2",
+        disabled: false
+      }]);
+    }
+  });
+  it("should call `onValueChange` callback when `changeValue` is called", () => {
+    const presenter = new RadioGroupPresenter();
+    presenter.init({
+      onValueChange,
+      items: [{
+        value: "value-1",
+        label: "Value 1"
+      }, {
+        value: "value-2",
+        label: "Value 2"
+      }]
+    });
+    presenter.changeValue("value-2");
+    expect(onValueChange).toHaveBeenCalledWith("value-2");
+  });
+});
+
+//# sourceMappingURL=RadioGroupPresenter.test.js.map

package/RadioGroup/primitives/presenters/RadioGroupPresenter.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RadioGroupPresenter","describe","onValueChange","jest","fn","it","presenter","init","items","value","label","expect","vm","toEqual","id","any","String","disabled","changeValue","toHaveBeenCalledWith"],"sources":["RadioGroupPresenter.test.ts"],"sourcesContent":["import { RadioGroupPresenter } from \"./RadioGroupPresenter\";\n\ndescribe(\"RadioGroupPresenter\", () => {\n    const onValueChange = jest.fn();\n\n    it(\"should return the compatible `vm` based on props\", () => {\n        // `items`\n        {\n            const presenter = new RadioGroupPresenter();\n            presenter.init({\n                onValueChange,\n                items: [\n                    {\n                        value: \"value-1\",\n                        label: \"Value 1\"\n                    },\n                    {\n                        value: \"value-2\",\n                        label: \"Value 2\"\n                    }\n                ]\n            });\n            expect(presenter.vm.items).toEqual([\n                {\n                    id: expect.any(String),\n                    value: \"value-1\",\n                    label: \"Value 1\",\n                    disabled: false\n                },\n                {\n                    id: expect.any(String),\n                    value: \"value-2\",\n                    label: \"Value 2\",\n                    disabled: false\n                }\n            ]);\n        }\n    });\n\n    it(\"should call `onValueChange` callback when `changeValue` is called\", () => {\n        const presenter = new RadioGroupPresenter();\n        presenter.init({\n            onValueChange,\n            items: [\n                {\n                    value: \"value-1\",\n                    label: \"Value 1\"\n                },\n                {\n                    value: \"value-2\",\n                    label: \"Value 2\"\n                }\n            ]\n        });\n        presenter.changeValue(\"value-2\");\n        expect(onValueChange).toHaveBeenCalledWith(\"value-2\");\n    });\n});\n"],"mappings":"AAAA,SAASA,mBAAmB;AAE5BC,QAAQ,CAAC,qBAAqB,EAAE,MAAM;EAClC,MAAMC,aAAa,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;EAE/BC,EAAE,CAAC,kDAAkD,EAAE,MAAM;IACzD;IACA;MACI,MAAMC,SAAS,GAAG,IAAIN,mBAAmB,CAAC,CAAC;MAC3CM,SAAS,CAACC,IAAI,CAAC;QACXL,aAAa;QACbM,KAAK,EAAE,CACH;UACIC,KAAK,EAAE,SAAS;UAChBC,KAAK,EAAE;QACX,CAAC,EACD;UACID,KAAK,EAAE,SAAS;UAChBC,KAAK,EAAE;QACX,CAAC;MAET,CAAC,CAAC;MACFC,MAAM,CAACL,SAAS,CAACM,EAAE,CAACJ,KAAK,CAAC,CAACK,OAAO,CAAC,CAC/B;QACIC,EAAE,EAAEH,MAAM,CAACI,GAAG,CAACC,MAAM,CAAC;QACtBP,KAAK,EAAE,SAAS;QAChBC,KAAK,EAAE,SAAS;QAChBO,QAAQ,EAAE;MACd,CAAC,EACD;QACIH,EAAE,EAAEH,MAAM,CAACI,GAAG,CAACC,MAAM,CAAC;QACtBP,KAAK,EAAE,SAAS;QAChBC,KAAK,EAAE,SAAS;QAChBO,QAAQ,EAAE;MACd,CAAC,CACJ,CAAC;IACN;EACJ,CAAC,CAAC;EAEFZ,EAAE,CAAC,mEAAmE,EAAE,MAAM;IAC1E,MAAMC,SAAS,GAAG,IAAIN,mBAAmB,CAAC,CAAC;IAC3CM,SAAS,CAACC,IAAI,CAAC;MACXL,aAAa;MACbM,KAAK,EAAE,CACH;QACIC,KAAK,EAAE,SAAS;QAChBC,KAAK,EAAE;MACX,CAAC,EACD;QACID,KAAK,EAAE,SAAS;QAChBC,KAAK,EAAE;MACX,CAAC;IAET,CAAC,CAAC;IACFJ,SAAS,CAACY,WAAW,CAAC,SAAS,CAAC;IAChCP,MAAM,CAACT,aAAa,CAAC,CAACiB,oBAAoB,CAAC,SAAS,CAAC;EACzD,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/RadioGroup/primitives/presenters/index.d.ts

@@ -0,0 +1 @@
+export * from "./RadioGroupPresenter";

package/RadioGroup/primitives/presenters/index.js

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

package/RadioGroup/primitives/presenters/index.js.map

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

package/RadioGroup/primitives/useRadioGroup.d.ts

@@ -0,0 +1,7 @@
+import { RadioGroupPrimitiveProps } from "./RadioGroupPrimitive";
+export declare const useRadioGroup: (props: RadioGroupPrimitiveProps) => {
+    vm: {
+        items: import("../domains").RadioItemFormatted[];
+    };
+    changeValue: (value: string) => void;
+};

package/RadioGroup/primitives/useRadioGroup.js

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

package/RadioGroup/primitives/useRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useState","autorun","RadioGroupPresenter","useRadioGroup","props","params","items","onValueChange","onChange","presenter","init","vm","setVm","changeValue"],"sources":["useRadioGroup.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport { RadioGroupPrimitiveProps } from \"./RadioGroupPrimitive\";\nimport { RadioGroupPresenter, RadioGroupPresenterParams } from \"./presenters/RadioGroupPresenter\";\n\nexport const useRadioGroup = (props: RadioGroupPrimitiveProps) => {\n    const params: RadioGroupPresenterParams = 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 RadioGroupPresenter();\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;AAE9B,SAASC,mBAAmB;AAE5B,OAAO,MAAMC,aAAa,GAAIC,KAA+B,IAAK;EAC9D,MAAMC,MAAiC,GAAGN,OAAO,CAC7C,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,mBAAmB,CAAC,CAAC;EACpC,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/RangeSlider/RangeSlider.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { RangeSliderPrimitiveProps } from "./primitives";
+import { FormComponentProps } from "../FormComponent";
+type RangeSliderProps = RangeSliderPrimitiveProps & FormComponentProps & {
+    label: React.ReactNode;
+    valueConverter?: (value: number) => string;
+};
+declare const RangeSlider: (({ description, note, validation, ...props }: RangeSliderProps) => React.JSX.Element) & {
+    original: ({ description, note, validation, ...props }: RangeSliderProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ description, note, validation, ...props }: RangeSliderProps) => React.JSX.Element) & {
+        original: ({ description, note, validation, ...props }: RangeSliderProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ description, note, validation, ...props }: RangeSliderProps) => React.JSX.Element) & {
+        original: ({ description, note, validation, ...props }: RangeSliderProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { RangeSlider, type RangeSliderProps };

package/RangeSlider/RangeSlider.js

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { makeDecoratable } from "../utils";
+import { RangeSliderPrimitiveRenderer, RangeSliderValue, useRangeSlider } from "./primitives";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+const DecoratableRangeSlider = ({
+  description,
+  note,
+  validation,
+  ...props
+}) => {
+  const {
+    isValid: validationIsValid,
+    message: validationMessage
+  } = validation || {};
+  const invalid = React.useMemo(() => validationIsValid === false, [validationIsValid]);
+  const {
+    onValuesChange,
+    onValuesCommit,
+    ...restProps
+  } = props;
+  const {
+    vm,
+    changeValues,
+    commitValues
+  } = useRangeSlider({
+    ...restProps,
+    onValuesChange,
+    onValuesCommit
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full"
+  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: props.label,
+    required: props.required,
+    disabled: props.disabled,
+    invalid: invalid
+  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description,
+    disabled: props.disabled
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-flex-row wby-items-center wby-justify-between"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-basis-1/12 wby-pr-xxs"
+  }, /*#__PURE__*/React.createElement(RangeSliderValue, {
+    value: vm.textValues[0],
+    disabled: props.disabled
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "wby-basis-10/12"
+  }, /*#__PURE__*/React.createElement(RangeSliderPrimitiveRenderer, Object.assign({}, restProps, vm, {
+    onValueChange: changeValues,
+    onValueCommit: commitValues
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "wby-basis-1/12 wby-pl-xxs wby-text-right"
+  }, /*#__PURE__*/React.createElement(RangeSliderValue, {
+    value: vm.textValues[1],
+    disabled: props.disabled
+  }))), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validationMessage,
+    invalid: invalid,
+    disabled: props.disabled
+  }), /*#__PURE__*/React.createElement(FormComponentNote, {
+    text: note,
+    disabled: props.disabled
+  }));
+};
+const RangeSlider = makeDecoratable("RangeSlider", DecoratableRangeSlider);
+export { RangeSlider };
+
+//# sourceMappingURL=RangeSlider.js.map

package/RangeSlider/RangeSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","RangeSliderPrimitiveRenderer","RangeSliderValue","useRangeSlider","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableRangeSlider","description","note","validation","props","isValid","validationIsValid","message","validationMessage","invalid","useMemo","onValuesChange","onValuesCommit","restProps","vm","changeValues","commitValues","createElement","className","text","label","required","disabled","value","textValues","Object","assign","onValueChange","onValueCommit","RangeSlider"],"sources":["RangeSlider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport {\n    RangeSliderPrimitiveProps,\n    RangeSliderPrimitiveRenderer,\n    RangeSliderValue,\n    useRangeSlider\n} from \"./primitives\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote,\n    FormComponentProps\n} from \"~/FormComponent\";\n\ntype RangeSliderProps = RangeSliderPrimitiveProps &\n    FormComponentProps & {\n        label: React.ReactNode;\n        valueConverter?: (value: number) => string;\n    };\n\nconst DecoratableRangeSlider = ({ description, note, validation, ...props }: RangeSliderProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = React.useMemo(() => validationIsValid === false, [validationIsValid]);\n    const { onValuesChange, onValuesCommit, ...restProps } = props;\n    const { vm, changeValues, commitValues } = useRangeSlider({\n        ...restProps,\n        onValuesChange,\n        onValuesCommit\n    });\n\n    return (\n        <div className={\"wby-w-full\"}>\n            <FormComponentLabel\n                text={props.label}\n                required={props.required}\n                disabled={props.disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={props.disabled} />\n            <div className={\"wby-flex wby-flex-row wby-items-center wby-justify-between\"}>\n                <div className={\"wby-basis-1/12 wby-pr-xxs\"}>\n                    <RangeSliderValue value={vm.textValues[0]} disabled={props.disabled} />\n                </div>\n                <div className={\"wby-basis-10/12\"}>\n                    <RangeSliderPrimitiveRenderer\n                        {...restProps}\n                        {...vm}\n                        onValueChange={changeValues}\n                        onValueCommit={commitValues}\n                    />\n                </div>\n                <div className={\"wby-basis-1/12 wby-pl-xxs wby-text-right\"}>\n                    <RangeSliderValue value={vm.textValues[1]} disabled={props.disabled} />\n                </div>\n            </div>\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\nconst RangeSlider = makeDecoratable(\"RangeSlider\", DecoratableRangeSlider);\n\nexport { RangeSlider, type RangeSliderProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AACxB,SAEIC,4BAA4B,EAC5BC,gBAAgB,EAChBC,cAAc;AAElB,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAUrB,MAAMC,sBAAsB,GAAGA,CAAC;EAAEC,WAAW;EAAEC,IAAI;EAAEC,UAAU;EAAE,GAAGC;AAAwB,CAAC,KAAK;EAC9F,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGlB,KAAK,CAACmB,OAAO,CAAC,MAAMJ,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EACrF,MAAM;IAAEK,cAAc;IAAEC,cAAc;IAAE,GAAGC;EAAU,CAAC,GAAGT,KAAK;EAC9D,MAAM;IAAEU,EAAE;IAAEC,YAAY;IAAEC;EAAa,CAAC,GAAGrB,cAAc,CAAC;IACtD,GAAGkB,SAAS;IACZF,cAAc;IACdC;EACJ,CAAC,CAAC;EAEF,oBACIrB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzB3B,KAAA,CAAA0B,aAAA,CAACnB,kBAAkB;IACfqB,IAAI,EAAEf,KAAK,CAACgB,KAAM;IAClBC,QAAQ,EAAEjB,KAAK,CAACiB,QAAS;IACzBC,QAAQ,EAAElB,KAAK,CAACkB,QAAS;IACzBb,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFlB,KAAA,CAAA0B,aAAA,CAACrB,wBAAwB;IAACuB,IAAI,EAAElB,WAAY;IAACqB,QAAQ,EAAElB,KAAK,CAACkB;EAAS,CAAE,CAAC,eACzE/B,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAE;EAA6D,gBACzE3B,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAE;EAA4B,gBACxC3B,KAAA,CAAA0B,aAAA,CAACvB,gBAAgB;IAAC6B,KAAK,EAAET,EAAE,CAACU,UAAU,CAAC,CAAC,CAAE;IAACF,QAAQ,EAAElB,KAAK,CAACkB;EAAS,CAAE,CACrE,CAAC,eACN/B,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAE;EAAkB,gBAC9B3B,KAAA,CAAA0B,aAAA,CAACxB,4BAA4B,EAAAgC,MAAA,CAAAC,MAAA,KACrBb,SAAS,EACTC,EAAE;IACNa,aAAa,EAAEZ,YAAa;IAC5Ba,aAAa,EAAEZ;EAAa,EAC/B,CACA,CAAC,eACNzB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAE;EAA2C,gBACvD3B,KAAA,CAAA0B,aAAA,CAACvB,gBAAgB;IAAC6B,KAAK,EAAET,EAAE,CAACU,UAAU,CAAC,CAAC,CAAE;IAACF,QAAQ,EAAElB,KAAK,CAACkB;EAAS,CAAE,CACrE,CACJ,CAAC,eACN/B,KAAA,CAAA0B,aAAA,CAACpB,yBAAyB;IACtBsB,IAAI,EAAEX,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBa,QAAQ,EAAElB,KAAK,CAACkB;EAAS,CAC5B,CAAC,eACF/B,KAAA,CAAA0B,aAAA,CAAClB,iBAAiB;IAACoB,IAAI,EAAEjB,IAAK;IAACoB,QAAQ,EAAElB,KAAK,CAACkB;EAAS,CAAE,CACzD,CAAC;AAEd,CAAC;AAED,MAAMO,WAAW,GAAGrC,eAAe,CAAC,aAAa,EAAEQ,sBAAsB,CAAC;AAE1E,SAAS6B,WAAW","ignoreList":[]}