@ama-pt/agora-design-system 0.1.1

package/dist/cjs/components/ui/atoms/input_textarea/input_textarea.scss

@@ -0,0 +1,152 @@
+@mixin dyeLineIcon($colorClass) {
+  path {
+    fill: transparent;
+    @apply #{$colorClass} #{!important};
+  }
+}
+
+@mixin dyeSolidIcon($colorClass) {
+  path {
+    stroke: transparent;
+    @apply #{$colorClass} #{!important};
+  }
+}
+
+.agora-input-textarea--wrapper {
+  @apply flex flex-col relative;
+
+  // normal leading icons color on default status input text
+  .input-icon {
+    &.dye-as-solid {
+      @include dyeSolidIcon('fill-neutral-900 opacity-70');
+    }
+    &.dye-as-line {
+      @include dyeLineIcon('stroke-neutral-900 opacity-70');
+    }
+  }
+  //# end
+
+  & span.hint-icon-wrapper {
+    svg {
+      path {
+        stroke: transparent;
+        @apply fill-informative-500;
+      }
+    }
+  }
+
+  .feedback-icon-wrapper {
+    &--info {
+      path {
+        stroke: transparent;
+        @apply fill-informative-500;
+      }
+    }
+
+    &--success {
+      path {
+        stroke: transparent;
+        @apply fill-success-500;
+      }
+    }
+
+    &--danger {
+      path {
+        stroke: transparent;
+        @apply fill-danger-500;
+      }
+    }
+
+    &--warning {
+      path {
+        stroke: transparent;
+        @apply fill-alert-700;
+      }
+    }
+  }
+
+  .input-leading--icon {
+    @apply right-0 bottom-24 left-16 absolute w-min;
+    top: 18px;
+  }
+
+  .agora-input-textarea {
+    @apply border-2 border-neutral-300 outline-none rounded-4 p-16 transition-all ease-in-out text-interaction-input-text text-neutral-900;
+
+    &.has-leading-icon {
+      @apply pl-56;
+    }
+
+    &:hover:not(:focus):not(:disabled):not(:read-only) {
+      @apply border-neutral-800;
+
+      // normal leading icons color on default status input text
+      & ~ .input-icon {
+        &.dye-as-solid {
+          @include dyeSolidIcon('fill-neutral-900 opacity-100');
+        }
+        &.dye-as-line {
+          @include dyeLineIcon('stroke-neutral-900 opacity-100');
+        }
+      }
+      //# end
+    }
+
+    // disabled
+    &:disabled,
+    &:read-only {
+      @apply border-neutral-100 cursor-not-allowed bg-neutral-100 #{!important};
+
+      &:focus:read-only {
+        @apply border-primary-600 #{!important}; // force border
+      }
+
+      // normal leading icons color on default status input text
+      & ~ .input-icon {
+        &.dye-as-solid {
+          @include dyeSolidIcon('fill-neutral-900  opacity-70');
+        }
+        &.dye-as-line {
+          @include dyeLineIcon('stroke-neutral-900  opacity-70');
+        }
+      }
+      //# end
+    }
+
+    &.has-value {
+      @apply border-neutral-500;
+    }
+
+    &:not(:focus) {
+      @apply outline-0;
+    }
+
+    &:not(:disabled):focus {
+      @apply border-primary-600 outline outline-2 outline-offset-2 outline-primary-600;
+
+      // normal leading icons color on default status input text
+      & ~ .input-icon {
+        &.dye-as-solid {
+          @include dyeSolidIcon('fill-primary-600 opacity-100');
+        }
+        &.dye-as-line {
+          @include dyeLineIcon('stroke-primary-600  opacity-100');
+        }
+      }
+      //# end
+    }
+  }
+
+  &.input-has-error {
+    .input-feedback {
+      path {
+        stroke: transparent;
+        @apply fill-danger-500 #{!important};
+      }
+    }
+
+    .agora-input-textarea:not(:disabled):not(:read-only) {
+      @apply border-2 bg-danger-50 border-danger-500 #{!important};
+    }
+  }
+}

package/dist/cjs/components/ui/atoms/input_textarea/input_textarea.stories.d.ts

@@ -0,0 +1,13 @@
+import { ComponentMeta, Story } from '@storybook/react';
+import React from 'react';
+import { InputTextAreaProps } from './input_textarea';
+declare const _default: ComponentMeta<React.FC<InputTextAreaProps>>;
+export default _default;
+export declare const InputTextComp: Story<any>;
+export declare const InputTextFeedbackInfo: Story<any>;
+export declare const InputTextFeedbackSuccess: Story<any>;
+export declare const InputTextFeedbackWarning: Story<any>;
+export declare const InputTextFeedbackDanger: Story<any>;
+export declare const InputTextCompHasReadOnly: Story<any>;
+export declare const InputTextCompDisabled: Story<any>;
+export declare const InputTextCompHasError: Story<any>;

package/dist/cjs/components/ui/atoms/input_textarea/input_textarea.stories.js

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputTextCompHasError = exports.InputTextCompDisabled = exports.InputTextCompHasReadOnly = exports.InputTextFeedbackDanger = exports.InputTextFeedbackWarning = exports.InputTextFeedbackSuccess = exports.InputTextFeedbackInfo = exports.InputTextComp = void 0;
+const react_1 = __importDefault(require("react"));
+const input_textarea_1 = require("./input_textarea");
+const input_textarea_csf_1 = require("./input_textarea.csf");
+exports.default = {
+    title: 'Components/Atoms/Input Text Area',
+    component: input_textarea_1.InputTextArea,
+    argTypes: Object.assign({}, input_textarea_csf_1.argTypes)
+};
+const InputTextComp = (args) => (react_1.default.createElement("div", { className: "p-8" },
+    react_1.default.createElement(input_textarea_1.InputTextArea, Object.assign({}, args, { id: "input-text" }))));
+exports.InputTextComp = InputTextComp;
+exports.InputTextComp.storyName = 'Input Text Area';
+exports.InputTextComp.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+const InputTextFeedbackInfo = (args) => (react_1.default.createElement("div", { className: "p-8" },
+    react_1.default.createElement(input_textarea_1.InputTextArea, Object.assign({}, args, { id: "input-text", feedbackText: "Some info feedback" }))));
+exports.InputTextFeedbackInfo = InputTextFeedbackInfo;
+exports.InputTextFeedbackInfo.storyName = 'Input Text Area Feedback Info';
+exports.InputTextFeedbackInfo.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+const InputTextFeedbackSuccess = (args) => (react_1.default.createElement("div", { className: "p-8" },
+    react_1.default.createElement(input_textarea_1.InputTextArea, Object.assign({}, args, { id: "input-text", feedbackText: "Some success feedback", feedbackState: "success" }))));
+exports.InputTextFeedbackSuccess = InputTextFeedbackSuccess;
+exports.InputTextFeedbackSuccess.storyName = 'Input Text Area Feedback Success';
+exports.InputTextFeedbackSuccess.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+const InputTextFeedbackWarning = (args) => (react_1.default.createElement("div", { className: "p-8" },
+    react_1.default.createElement(input_textarea_1.InputTextArea, Object.assign({}, args, { id: "input-text", feedbackText: "Some warning feedback", feedbackState: "warning" }))));
+exports.InputTextFeedbackWarning = InputTextFeedbackWarning;
+exports.InputTextFeedbackWarning.storyName = 'Input Text Area Feedback Warning';
+exports.InputTextFeedbackWarning.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+const InputTextFeedbackDanger = (args) => (react_1.default.createElement("div", { className: "p-8" },
+    react_1.default.createElement(input_textarea_1.InputTextArea, Object.assign({}, args, { id: "input-text", feedbackText: "Some danger feedback", feedbackState: "danger" }))));
+exports.InputTextFeedbackDanger = InputTextFeedbackDanger;
+exports.InputTextFeedbackDanger.storyName = 'Input Text Area Feedback Danger';
+exports.InputTextFeedbackDanger.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+const InputTextCompHasReadOnly = (args) => (react_1.default.createElement("div", { className: "p-8" },
+    react_1.default.createElement(input_textarea_1.InputTextArea, Object.assign({}, args, { id: "input-text" }))));
+exports.InputTextCompHasReadOnly = InputTextCompHasReadOnly;
+exports.InputTextCompHasReadOnly.storyName = 'Input Text Area Read Only';
+exports.InputTextCompHasReadOnly.args = {
+    readOnly: true,
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+const InputTextCompDisabled = (args) => (react_1.default.createElement("div", { className: "p-8" },
+    react_1.default.createElement(input_textarea_1.InputTextArea, Object.assign({}, args, { id: "input-text" }))));
+exports.InputTextCompDisabled = InputTextCompDisabled;
+exports.InputTextCompDisabled.storyName = 'Input Text Area Disabled';
+exports.InputTextCompDisabled.args = {
+    disabled: true,
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+const InputTextCompHasError = (args) => (react_1.default.createElement("div", { className: "p-8" },
+    react_1.default.createElement(input_textarea_1.InputTextArea, Object.assign({}, args, { id: "input-text" }))));
+exports.InputTextCompHasError = InputTextCompHasError;
+exports.InputTextCompHasError.storyName = 'Input Text Area Error';
+exports.InputTextCompHasError.args = {
+    hasError: true,
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+//# sourceMappingURL=input_textarea.stories.js.map

package/dist/cjs/components/ui/atoms/input_textarea/input_textarea.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input_textarea.stories.js","sourceRoot":"","sources":["../../../../../../src/components/ui/atoms/input_textarea/input_textarea.stories.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/ui/atoms/radio/index.d.ts

@@ -0,0 +1 @@
+export { Radio } from './radio';

package/dist/cjs/components/ui/atoms/radio/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = void 0;
+var radio_1 = require("./radio");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return radio_1.Radio; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/ui/atoms/radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/ui/atoms/radio/index.ts"],"names":[],"mappings":";;;AAAA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA"}

package/dist/cjs/components/ui/atoms/radio/radio.csf.d.ts

@@ -0,0 +1,73 @@
+export declare const parameters: {
+    actions: {
+        handles: string[];
+    };
+    design: {
+        type: string;
+        url: string;
+    };
+};
+export declare const argTypes: {
+    label: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+        control: {
+            type: string;
+        };
+    };
+    ariaLabel: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+        control: {
+            type: string;
+        };
+    };
+    disabled: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: null;
+    };
+    hasError: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: boolean;
+    };
+    hideLabel: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: boolean;
+    };
+    isChecked: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: boolean;
+    };
+    isOptional: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: boolean;
+    };
+};

package/dist/cjs/components/ui/atoms/radio/radio.csf.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.argTypes = exports.parameters = void 0;
+exports.parameters = {
+    actions: {
+        handles: ['mouseenter', 'click', 'focusin', 'focusout']
+    },
+    design: {
+        type: 'zeroheight',
+        url: 'https://zeroheight.com/1be481dc2/p/489b41-buttons/b/026ea1'
+    }
+};
+exports.argTypes = {
+    label: {
+        type: { name: 'string', required: true },
+        description: 'Radio descriptive label',
+        defaultValue: 'Lorem ipsum dolor sit amet',
+        control: {
+            type: 'text'
+        }
+    },
+    ariaLabel: {
+        type: { name: 'string', required: false },
+        description: 'Descritive attribute that labels the checkbox in terms of accessibility',
+        defaultValue: '',
+        control: {
+            type: 'text'
+        }
+    },
+    disabled: {
+        type: { name: 'boolean', required: false },
+        description: 'Indicate if this field is able to be selected',
+        defaultValue: null
+    },
+    hasError: {
+        type: { name: 'boolean', required: false },
+        description: 'Indicate that this field has error',
+        defaultValue: false
+    },
+    hideLabel: {
+        type: { name: 'boolean', required: false },
+        description: 'Should display/hide label',
+        defaultValue: false
+    },
+    isChecked: {
+        type: { name: 'boolean', required: false },
+        description: 'Should this field must start checked',
+        defaultValue: false
+    },
+    isOptional: {
+        type: { name: 'boolean', required: false },
+        description: 'Decides if this field could be optional',
+        defaultValue: false
+    }
+};
+//# sourceMappingURL=radio.csf.js.map

package/dist/cjs/components/ui/atoms/radio/radio.csf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.csf.js","sourceRoot":"","sources":["../../../../../../src/components/ui/atoms/radio/radio.csf.ts"],"names":[],"mappings":";;;AAAa,QAAA,UAAU,GAAG;IACxB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC;KACxD;IACD,MAAM,EAAE;QACN,IAAI,EAAE,YAAY;QAClB,GAAG,EAAE,4DAA4D;KAClE;CACF,CAAC;AAEW,QAAA,QAAQ,GAAG;IACtB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE;QACxC,WAAW,EAAE,yBAAyB;QACtC,YAAY,EAAE,4BAA4B;QAC1C,OAAO,EAAE;YACP,IAAI,EAAE,MAAM;SACb;KACF;IACD,SAAS,EAAE;QACT,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;QACzC,WAAW,EAAE,yEAAyE;QACtF,YAAY,EAAE,EAAE;QAChB,OAAO,EAAE;YACP,IAAI,EAAE,MAAM;SACb;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC1C,WAAW,EAAE,+CAA+C;QAC5D,YAAY,EAAE,IAAI;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC1C,WAAW,EAAE,oCAAoC;QACjD,YAAY,EAAE,KAAK;KACpB;IACD,SAAS,EAAE;QACT,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC1C,WAAW,EAAE,2BAA2B;QACxC,YAAY,EAAE,KAAK;KACpB;IACD,SAAS,EAAE;QACT,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC1C,WAAW,EAAE,sCAAsC;QACnD,YAAY,EAAE,KAAK;KACpB;IACD,UAAU,EAAE;QACV,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC1C,WAAW,EAAE,yCAAyC;QACtD,YAAY,EAAE,KAAK;KACpB;CACF,CAAC"}

package/dist/cjs/components/ui/atoms/radio/radio.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import './radio.scss';
+export interface RadioProps extends React.ComponentPropsWithRef<'input'> {
+    /**
+     * Input ID.
+     * @default ''
+     */
+    id: string;
+    /**
+     * Radio descriptive text
+     * @default ''
+     */
+    label?: string;
+    /**
+     * Descritive attribute that labels the checkbox in terms of accessibility
+     * @default null
+     */
+    ariaLabel?: string;
+    /**
+     * Hightlight the input indicating some error
+     * @default false
+     */
+    hasError?: boolean | 'true' | 'false';
+    /**
+     * Radio descriptive text
+     * @default false
+     */
+    isChecked?: boolean | 'true' | 'false';
+    /**
+     * Decides if display/hide label.
+     * @default false
+     */
+    hideLabel?: boolean | 'true' | 'false';
+    /**
+     * Decides if this field could be optional.
+     * @default false
+     */
+    isOptional?: boolean | 'true' | 'false';
+}
+export declare const Radio: React.FC<RadioProps>;
+export default Radio;

package/dist/cjs/components/ui/atoms/radio/radio.js

@@ -0,0 +1,72 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../../../utils");
+require("./radio.scss");
+const Radio = (_a) => {
+    var { label = '', ariaLabel, hasError, isChecked, hideLabel, isOptional, id, children } = _a, props = __rest(_a, ["label", "ariaLabel", "hasError", "isChecked", "hideLabel", "isOptional", "id", "children"]);
+    const inputWrapper = (0, classnames_1.default)('agora-radio-wrapper', {
+        'has-error': (0, utils_1.stringToBoolean)(hasError),
+        'input-only': (0, utils_1.stringToBoolean)(hideLabel)
+    });
+    const propsClone = Object.assign({}, props);
+    const { onChange } = propsClone;
+    const [checked, setChecked] = (0, react_1.useState)((0, utils_1.stringToBoolean)(isChecked));
+    const handleChange = (evt) => {
+        setChecked(!checked);
+        onChange === null || onChange === void 0 ? void 0 : onChange(evt);
+    };
+    if ((0, utils_1.stringToBoolean)(isOptional)) {
+        delete propsClone.required;
+    }
+    else {
+        propsClone.required = true;
+    }
+    return (react_1.default.createElement("div", { className: inputWrapper },
+        react_1.default.createElement("input", Object.assign({ type: "radio", id: id, checked: checked, "aria-label": ariaLabel || label, onChange: handleChange }, propsClone)),
+        react_1.default.createElement("span", { className: "radio-span" }),
+        react_1.default.createElement("label", { htmlFor: id, className: "radio-label text-text-m" },
+            react_1.default.createElement("span", null, children || label))));
+};
+exports.Radio = Radio;
+exports.default = exports.Radio;
+//# sourceMappingURL=radio.js.map

package/dist/cjs/components/ui/atoms/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../../../src/components/ui/atoms/radio/radio.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,+CAAwC;AACxC,0CAAiD;AACjD,wBAAsB;AAwCf,MAAM,KAAK,GAAyB,CAAC,EAU3C,EAAE,EAAE;QAVuC,EAC1C,KAAK,GAAG,EAAE,EACV,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,EACV,EAAE,EACF,QAAQ,OAET,EADI,KAAK,cATkC,4FAU3C,CADS;IAER,MAAM,YAAY,GAAG,IAAA,oBAAU,EAAC,qBAAqB,EAAE;QACrD,WAAW,EAAE,IAAA,uBAAe,EAAC,QAAQ,CAAC;QACtC,YAAY,EAAE,IAAA,uBAAe,EAAC,SAAS,CAAC;KACzC,CAAC,CAAC;IACH,MAAM,UAAU,qBAAQ,KAAK,CAAE,CAAC;IAEhC,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC;IAEhC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAA,uBAAe,EAAC,SAAS,CAAC,CAAC,CAAC;IAEnE,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,EAAE;QAC3B,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;QACrB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,GAAG,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,IAAI,IAAA,uBAAe,EAAC,UAAU,CAAC,EAAE;QAC/B,OAAO,UAAU,CAAC,QAAQ,CAAC;KAC5B;SAAM;QACL,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC;KAC5B;IAED,OAAO,CACL,uCAAK,SAAS,EAAE,YAAY;QAC1B,uDAAO,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,gBAAc,SAAS,IAAI,KAAK,EAAE,QAAQ,EAAE,YAAY,IAAM,UAAU,EAAI;QACxH,wCAAM,SAAS,EAAC,YAAY,GAAG;QAC/B,yCAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAC,yBAAyB;YACrD,4CAAO,QAAQ,IAAI,KAAK,CAAQ,CAC1B,CACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAzCW,QAAA,KAAK,SAyChB;AAEF,kBAAe,aAAK,CAAC"}

package/dist/cjs/components/ui/atoms/radio/radio.scss

@@ -0,0 +1,138 @@
+.agora-radio-wrapper {
+  @apply flex items-start cursor-pointer relative w-fit;
+  min-height: 44px;
+
+  & > .radio-label {
+    @apply text-neutral-900 select-none pr-16 border-2 cursor-pointer border-transparent rounded-4 transition-all ease-in-out pl-56;
+    margin-left: -50px;
+    min-height: 44px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  & > label {
+    margin-top: -2px;
+  }
+
+  &.input-only {
+    // apply to container
+    width: 44px;
+    height: 44px;
+
+    .radio-span {
+      margin: 10px;
+    }
+
+    input {
+      @apply top-0 left-0;
+    }
+
+    .radio-label {
+      @apply mt-0 pl-0;
+      width: 44px;
+      height: 44px;
+      margin-left: -44px;
+    }
+
+    .radio-label span {
+      @apply hidden;
+    }
+  }
+
+  &:hover input:not(:disabled) ~ .radio-label {
+    @apply border-primary-500;
+  }
+
+  input {
+    @apply absolute opacity-0 cursor-pointer;
+    width: 44px;
+    height: 44px;
+    left: 6px;
+    top: 2px;
+
+    & ~ .radio-span::before {
+      content: '';
+      width: 12px;
+      height: 12px;
+      @apply bg-white absolute rounded-16 opacity-0;
+    }
+
+    &:checked ~ .radio-span {
+      @apply bg-primary-500 border-primary-500;
+      &::before {
+        @apply opacity-100;
+      }
+    }
+
+    &:disabled:is(:checked) ~ .radio-span {
+      &::before {
+        @apply opacity-100 bg-neutral-300;
+      }
+    }
+
+    &:focus ~ .radio-span {
+      & ~ .radio-span {
+        @apply outline-0 rounded-4;
+      }
+      & ~ .radio-label {
+        @apply border-primary-500;
+      }
+    }
+
+    &:disabled {
+      @apply cursor-not-allowed;
+
+      & ~ .radio-label {
+        @apply text-neutral-400 cursor-not-allowed;
+      }
+
+      & ~ .radio-span {
+        @apply bg-neutral-100 border-neutral-300;
+      }
+    }
+  }
+
+  .radio-span {
+    @apply pointer-events-none  ml-16 z-50 rounded-24 border-2 border-neutral-600 mr-8 h-24 w-24 flex justify-center items-center outline-2 outline outline-transparent outline-offset-4 transition-all;
+    margin-top: 12px;
+  }
+
+  &.has-error .radio-span {
+    @apply border-danger-500 bg-danger-50;
+  }
+
+  @media (max-width: theme('screens.md')) {
+    .radio-label {
+      margin-left: -58px !important;
+      padding-left: 60px;
+    }
+
+    input {
+      @apply left-0 #{!important};
+      top: 6px !important;
+    }
+
+    label {
+      margin-top: 4px;
+    }
+
+    .radio-span {
+      @apply w-32 h-32 ml-8 #{!important};
+      @apply min-w-[theme('spacing[32]')];
+    }
+
+    &.input-only {
+      input {
+        top: 0 !important;
+      }
+
+      .radio-label {
+        margin-left: -44px !important;
+      }
+
+      .radio-span {
+        margin: 6px !important;
+      }
+    }
+  }
+}