@ama-pt/agora-design-system 0.1.12 → 0.1.15

package/README.md

@@ -5,11 +5,12 @@
 ## Core technologies
 
 - React - <https://reactjs.org/>
-- NextJs - <https://nextjs.org/>
-- Tailwindcss - <https://tailwindcss.com/docs/installation>
+- NextJS - <https://nextjs.org/>
+- TailwindCss - <https://tailwindcss.com/docs/installation>
 
 ## Useful Links
 
+- React.dev - <https://react.dev/learn/start-a-new-react-project>
 - StoryBook - <https://prd-agora.northeurope.cloudapp.azure.com>
 - Figma (UX Design) - <https://www.figma.com/files/project/60863393/Ágora-Design-System>
 - ZeroHeight - <https://zeroheight.com/1be481dc2/p/2861fa-boas-vindas>
@@ -28,19 +29,7 @@
 @import '@ama-pt/agora-design-system/dist/styles/globals.css';
 ```
 
-### Note
-
-ReactJS is supported.
-
-NextJS is supported using this additional steps:
-
-1- Install the following package
-
-```sh
-> npm install next-transpile-modules
-```
-
-2- Set the next.config.js file as follow:
+3- Set the next.config.js file as follow:
 
 ```js
 /** @type {import('next').NextConfig} */

package/dist/components/index.js

@@ -2,3 +2,5 @@
 export * from './ui';
 // COMMON UTILS
 export * from './utils';
+// COMMON MODELS
+export * from './models';

package/dist/components/models/boolean-type.js

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

package/dist/components/models/feedback-state-type.js

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

package/dist/components/models/index.js

@@ -0,0 +1,2 @@
+export * from './boolean-type';
+export * from './feedback-state-type';

package/dist/components/ui/atoms/button/button.js

@@ -9,82 +9,56 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
 import classNames from 'classnames';
+import React, { forwardRef } from 'react';
+import { stringToBoolean } from '../../../utils';
 import { Icon } from '../icon';
 import './button.scss';
-import { stringToBoolean } from '../../../utils';
-/**
- *
- * @param icon
- * @param iconHover
- * @param iconAltText
- * @returns React.FC
- */
-const IconWrapper = ({ icon, iconHover, iconAltText }) => {
+const IconWrapper = ({ name, iconHover, iconAltText }) => {
     // preventing using illustrate family icons on buttons
-    if (icon.indexOf('agora-illustrate') >= 0 || (iconHover === null || iconHover === void 0 ? void 0 : iconHover.indexOf('agora-illustrate')) >= 0) {
+    if (name.indexOf('agora-illustrate') >= 0 || (iconHover === null || iconHover === void 0 ? void 0 : iconHover.indexOf('agora-illustrate')) >= 0) {
         return null;
     }
     return (React.createElement("div", { className: "icon-wrapper" },
-        React.createElement(Icon, { icon: icon, alt: iconAltText }),
-        React.createElement(Icon, { icon: (iconHover !== null && iconHover !== void 0 ? iconHover : icon).replace('line', 'solid'), alt: iconAltText })));
+        React.createElement(Icon, { name: name.replace('solid', 'line'), alt: iconAltText, "aria-hidden": !iconAltText }),
+        React.createElement(Icon, { name: (iconHover !== null && iconHover !== void 0 ? iconHover : name).replace('line', 'solid'), alt: iconAltText, "aria-hidden": !iconAltText })));
 };
 /**
  * Return icon default animation class according icon name and default position.
- * @param icon string
- * @param iconPosition leading|trailing
- * @returns string
  */
-function getDefaultIconAnimation(icon, iconPosition) {
-    let defaultAnimation = 'default';
+const getDefaultIconAnimation = (icon) => {
     if (icon) {
-        // if icon contains "arrow" or "chevron" word check for direction left/right and override the
-        // default animation to preserve armony
-        // this will code below will prevent arrow/chevron icon left/right direction perform default animation(up/down)
+        // if icon contains "arrow" or "chevron" word check for direction left/right and override the default animation to preserve harmony
+        // this code below will prevent arrow/chevron icon left/right direction perform default animation(up/down)
         const regex = /arrow|chevron/g;
         if (regex.test(icon)) {
             if (icon.indexOf('left') >= 0) {
-                defaultAnimation = 'backward';
+                return 'backward';
             }
-            else if (icon.indexOf('right') >= 0) {
-                defaultAnimation = 'forward';
+            if (icon.indexOf('right') >= 0) {
+                return 'forward';
             }
         }
     }
-    else if (iconPosition === 'leading') {
-        defaultAnimation = 'backward';
-    }
-    else if (iconPosition === 'trailing') {
-        defaultAnimation = 'forward';
-    }
-    return defaultAnimation;
-}
-export const Button = (_a) => {
-    var { appearence = 'solid', variant = 'primary', fullWidth = false, size = 'default', disabled = false, hasIcon = false, icon = '', iconHover = '', iconOnly = false, iconPosition = 'leading', iconAltText = '', children, className = '' } = _a, props = __rest(_a, ["appearence", "variant", "fullWidth", "size", "disabled", "hasIcon", "icon", "iconHover", "iconOnly", "iconPosition", "iconAltText", "children", "className"]);
-    let defaultIcon = '';
-    let defaultAnimation = '';
-    if (stringToBoolean(hasIcon) || stringToBoolean(iconOnly)) {
-        /**
-         * Detects default icon in case hasIcon/iconOnly params be true.
-         * @type string
-         */
-        defaultIcon = iconPosition === 'leading' ? 'agora-line-arrow-left-circle' : 'agora-line-arrow-right-circle';
-        defaultAnimation = getDefaultIconAnimation(icon, iconPosition);
-    }
+    return 'default';
+};
+export const InnerButton = (_a, ref) => {
+    var { appearance = 'solid', variant = 'primary', fullWidth, size = 'default', hasIcon, icon = '', iconHover = '', iconOnly, iconPosition = 'leading', iconAltText = '', children, className = '' } = _a, props = __rest(_a, ["appearance", "variant", "fullWidth", "size", "hasIcon", "icon", "iconHover", "iconOnly", "iconPosition", "iconAltText", "children", "className"]);
+    const iconToUse = icon || 'no-icon';
+    const iconHoverToUse = iconHover || 'no-icon';
+    const defaultAnimation = getDefaultIconAnimation(iconToUse);
     /**
-     * Building button classname dynamically according parameters.
+     * Building button class name dynamically according parameters.
      */
-    const buttonClassName = classNames(`btn btn-${size} btn-${appearence}--${variant}`, {
-        [`animate-icon--${defaultAnimation}`]: defaultAnimation !== '',
-        [`btn-with-icon--${iconPosition}`]: stringToBoolean(hasIcon),
-        'btn-block': stringToBoolean(fullWidth),
+    const buttonClassName = classNames({ 'flex items-center justify-center': !props.hidden }, `btn btn-${size} btn-${appearance}-${variant}`, {
+        [`animate-icon-${defaultAnimation}`]: stringToBoolean(hasIcon) || stringToBoolean(iconOnly),
+        [`btn-with-icon-${iconPosition}`]: stringToBoolean(hasIcon) || stringToBoolean(iconOnly),
         'is-icon-only': stringToBoolean(iconOnly)
+    }, {
+        'btn-block': stringToBoolean(fullWidth)
     }, className);
-    return (React.createElement("button", Object.assign({ type: "button", disabled: disabled, className: buttonClassName }, props), iconOnly ? (React.createElement(IconWrapper, { icon: icon !== null && icon !== void 0 ? icon : defaultIcon, iconHover: iconHover, iconAltText: iconAltText })) : (React.createElement(React.Fragment, null,
-        hasIcon && React.createElement(IconWrapper, { icon: icon !== null && icon !== void 0 ? icon : defaultIcon, iconHover: iconHover, iconAltText: iconAltText }),
+    return (React.createElement("button", Object.assign({ type: "button", className: buttonClassName }, props, { ref: ref }), iconOnly ? (React.createElement(IconWrapper, { name: iconToUse, iconHover: iconHoverToUse, iconAltText: iconAltText })) : (React.createElement(React.Fragment, null,
+        hasIcon && React.createElement(IconWrapper, { name: iconToUse, iconHover: iconHoverToUse, iconAltText: iconAltText }),
         React.createElement("span", { className: "children-wrapper" }, children)))));
 };
-const MemoButton = React.memo(Button);
-MemoButton.displayName = 'Button';
-export default MemoButton;
+export const Button = forwardRef(InnerButton);

package/dist/components/ui/atoms/button/button.scss

@@ -1 +1 @@
-.btn{display:flex;align-items:center;justify-content:center;border-radius:4px;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn .icon-wrapper{pointer-events:none;height:24px;min-width:24px}.btn .icon-wrapper svg{position:absolute}.btn[class*=" btn-link"]{padding-left:16px!important;padding-right:16px!important;padding-top:8px!important;padding-bottom:8px!important;position:relative;text-decoration-line:none}.btn[class*=" btn-link"].btn-default::after{top:42px!important}.btn[class*=" btn-link"].btn-small::after{top:32px!important}.btn[class*=" btn-link"]:not([class*=btn-with-icon])::after{position:absolute;left:16px;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);width:calc(100% - 32px);height:1px;content:"";top:43px;transform:scaleX(1);transform-origin:center}.btn[class*=" btn-link"]:hover::after{transform:scaleX(0)}.btn:focus{outline-style:solid;outline-width:2px;outline-offset:2px;outline-color:#034ad8}.btn:not(:focus){outline:2px solid transparent;outline-offset:2px}.btn[class*=" btn-with-icon"]{text-decoration-line:none!important}.btn[class*=" btn-list-link"]{justify-content:space-between;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.btn-default{padding-left:16px;padding-right:16px;padding-top:16px;padding-bottom:16px;min-height:60px}.btn-default span.children-wrapper{font-size:1rem;line-height:1.75rem;letter-spacing:0;font-weight:500}.btn-default.is-icon-only{padding:0!important;width:60px}.btn-default.is-icon-only .icon-wrapper{margin:0}.btn-small{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px;min-height:44px}.btn-small span.children-wrapper{font-size:1rem;line-height:1.75rem;letter-spacing:0;font-weight:500}.btn-small.is-icon-only{padding:0!important;width:44px}.btn-small.is-icon-only .icon-wrapper{margin:0}.btn.animate-icon--backward svg{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn.animate-icon--backward svg:first-of-type{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}.btn.animate-icon--backward svg:last-of-type{--tw-translate-x:16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}.btn.animate-icon--backward:hover svg:first-of-type{--tw-translate-x:-16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}.btn.animate-icon--backward:hover svg:last-of-type{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}.btn.animate-icon--forward svg{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn.animate-icon--forward svg:first-of-type{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}.btn.animate-icon--forward svg:last-of-type{--tw-translate-x:-16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}.btn.animate-icon--forward:hover svg:first-of-type{--tw-translate-x:16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}.btn.animate-icon--forward:hover svg:last-of-type{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}.btn.animate-icon--default svg{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn.animate-icon--default svg:first-of-type{--tw-translate-x:0px;--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}.btn.animate-icon--default svg:last-of-type{--tw-translate-x:0px;--tw-translate-y:16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}.btn.animate-icon--default:hover svg:first-of-type{--tw-translate-x:0px;--tw-translate-y:-16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}.btn.animate-icon--default:hover svg:last-of-type{--tw-translate-x:0px;--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}.btn-block{width:100%;justify-content:center}.btn-with-icon--leading{flex-direction:row}.btn-with-icon--leading span.children-wrapper{text-align:left!important}.btn-with-icon--leading .icon-wrapper{margin-right:8px;margin-left:0}.btn-with-icon--trailing{flex-direction:row-reverse}.btn-with-icon--trailing span.children-wrapper{text-align:left!important}.btn-with-icon--trailing .icon-wrapper{margin-left:8px;margin-right:0}.btn-solid--primary:not(:hover){--tw-bg-opacity:1;background-color:rgb(3 74 216 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid--primary:not(:active):hover{--tw-bg-opacity:1;background-color:rgb(3 56 162 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid--primary:active{--tw-bg-opacity:1;background-color:rgb(0 43 130 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid--primary:disabled{--tw-bg-opacity:1;background-color:rgb(3 74 216 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));opacity:.25;pointer-events:none}.btn-solid--primary svg:first-of-type path{fill:transparent;stroke:#fff}.btn-solid--primary svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid--primary:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid--primary:active svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid--secondary:not(:hover){--tw-bg-opacity:1;background-color:rgb(230 239 245 / var(--tw-bg-opacity));color:#2b363c}.btn-solid--secondary:not(:active):hover{--tw-bg-opacity:1;background-color:rgb(218 230 240 / var(--tw-bg-opacity));color:#2b363c}.btn-solid--secondary:active{--tw-bg-opacity:1;background-color:rgb(200 215 227 / var(--tw-bg-opacity));color:#2b363c}.btn-solid--secondary:disabled{--tw-bg-opacity:1;background-color:rgb(230 239 245 / var(--tw-bg-opacity));color:#2b363c;opacity:.25;pointer-events:none}.btn-solid--secondary svg:first-of-type path{fill:transparent;stroke:#000}.btn-solid--secondary svg:last-of-type path{stroke:transparent;fill:#000}.btn-solid--secondary:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#000}.btn-solid--secondary:active svg:last-of-type path{stroke:transparent;fill:#000}.btn-solid--success:not(:hover){--tw-bg-opacity:1;background-color:rgb(0 114 76 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid--success:not(:active):hover{--tw-bg-opacity:1;background-color:rgb(0 85 57 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid--success:active{--tw-bg-opacity:1;background-color:rgb(1 57 38 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid--success:disabled{--tw-bg-opacity:1;background-color:rgb(0 114 76 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));opacity:.25;pointer-events:none}.btn-solid--success svg:first-of-type path{fill:transparent;stroke:#fff}.btn-solid--success svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid--success:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid--success:active svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid--warning:not(:hover){--tw-bg-opacity:1;background-color:rgb(251 203 60 / var(--tw-bg-opacity));color:#2b363c}.btn-solid--warning:not(:active):hover{--tw-bg-opacity:1;background-color:rgb(251 187 60 / var(--tw-bg-opacity));color:#2b363c}.btn-solid--warning:active{--tw-bg-opacity:1;background-color:rgb(242 162 34 / var(--tw-bg-opacity));color:#2b363c}.btn-solid--warning:disabled{--tw-bg-opacity:1;background-color:rgb(251 203 60 / var(--tw-bg-opacity));color:#2b363c;opacity:.25;pointer-events:none}.btn-solid--warning svg:first-of-type path{fill:transparent;stroke:#2b363c}.btn-solid--warning svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-solid--warning:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-solid--warning:active svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-solid--danger:not(:hover){--tw-bg-opacity:1;background-color:rgb(209 36 50 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid--danger:not(:active):hover{--tw-bg-opacity:1;background-color:rgb(196 24 38 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid--danger:active{--tw-bg-opacity:1;background-color:rgb(178 9 23 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid--danger:disabled{--tw-bg-opacity:1;background-color:rgb(209 36 50 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));opacity:.25;pointer-events:none}.btn-solid--danger svg:first-of-type path{fill:transparent;stroke:#fff}.btn-solid--danger svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid--danger:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid--danger:active svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid--neutral:not(:hover){--tw-bg-opacity:1;background-color:rgb(43 54 60 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid--neutral:not(:active):hover{--tw-bg-opacity:1;background-color:rgb(71 81 100 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid--neutral:active{--tw-bg-opacity:1;background-color:rgb(43 54 60 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid--neutral:disabled{--tw-bg-opacity:1;background-color:rgb(43 54 60 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));opacity:.25;pointer-events:none}.btn-solid--neutral svg:first-of-type path{fill:transparent;stroke:#fff}.btn-solid--neutral svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid--neutral:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid--neutral:active svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid--white:not(:hover){--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));color:#2b363c}.btn-solid--white:not(:active):hover{--tw-bg-opacity:1;background-color:rgb(241 243 248 / var(--tw-bg-opacity));color:#2b363c}.btn-solid--white:active{--tw-bg-opacity:1;background-color:rgb(225 228 234 / var(--tw-bg-opacity));color:#2b363c}.btn-solid--white:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));color:#2b363c;opacity:.25;pointer-events:none}.btn-solid--white svg:first-of-type path{fill:transparent;stroke:#2b363c}.btn-solid--white svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-solid--white:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-solid--white:active svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-outline--primary:not(:hover){border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity))}.btn-outline--primary:not(:active):hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(3 74 216 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity))}.btn-outline--primary:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(0 43 130 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(0 43 130 / var(--tw-text-opacity))}.btn-outline--primary:disabled{border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity));opacity:.25;pointer-events:none}.btn-outline--primary svg:first-of-type path{fill:transparent;stroke:#1a65fa}.btn-outline--primary svg:last-of-type path{stroke:transparent;fill:#1a65fa}.btn-outline--primary:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#1a65fa}.btn-outline--primary:active svg:last-of-type path{stroke:transparent;fill:#002b82}.btn-outline--success:not(:hover){border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(0 114 76 / var(--tw-text-opacity))}.btn-outline--success:not(:active):hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(0 114 76 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(0 114 76 / var(--tw-text-opacity))}.btn-outline--success:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(1 57 38 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(1 57 38 / var(--tw-text-opacity))}.btn-outline--success:disabled{border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(0 114 76 / var(--tw-text-opacity));opacity:.25;pointer-events:none}.btn-outline--success svg:first-of-type path{fill:transparent;stroke:#00724c}.btn-outline--success svg:last-of-type path{stroke:transparent;fill:#00724c}.btn-outline--success:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#00724c}.btn-outline--success:active svg:last-of-type path{stroke:transparent;fill:#013926}.btn-outline--warning:not(:hover){border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(176 97 18 / var(--tw-text-opacity))}.btn-outline--warning:not(:active):hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(251 187 60 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(176 97 18 / var(--tw-text-opacity))}.btn-outline--warning:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(178 9 23 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(178 9 23 / var(--tw-text-opacity))}.btn-outline--warning:disabled{border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(176 97 18 / var(--tw-text-opacity));opacity:.25;pointer-events:none}.btn-outline--warning svg:first-of-type path{fill:transparent;stroke:#b06112}.btn-outline--warning svg:last-of-type path{stroke:transparent;fill:#fbbb3c}.btn-outline--warning:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#fbbb3c}.btn-outline--warning:active svg:last-of-type path{stroke:transparent;fill:#f2a222}.btn-outline--danger:not(:hover){border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(209 36 50 / var(--tw-text-opacity))}.btn-outline--danger:not(:active):hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(209 36 50 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(209 36 50 / var(--tw-text-opacity))}.btn-outline--danger:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(196 24 38 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(178 9 23 / var(--tw-text-opacity))}.btn-outline--danger:disabled{border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(209 36 50 / var(--tw-text-opacity));opacity:.25;pointer-events:none}.btn-outline--danger svg:first-of-type path{fill:transparent;stroke:#d12432}.btn-outline--danger svg:last-of-type path{stroke:transparent;fill:#d12432}.btn-outline--danger:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#d12432}.btn-outline--danger:active svg:last-of-type path{stroke:transparent;fill:#b20917}.btn-outline--neutral:not(:hover){border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));color:#2b363c}.btn-outline--neutral:not(:active):hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(136 147 170 / var(--tw-border-opacity));color:#2b363c}.btn-outline--neutral:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(43 54 60 / var(--tw-border-opacity));color:#2b363c}.btn-outline--neutral:disabled{border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));color:#2b363c;opacity:.25;pointer-events:none}.btn-outline--neutral svg:first-of-type path{fill:transparent;stroke:#000}.btn-outline--neutral svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-outline--neutral:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-outline--neutral:active svg:last-of-type path{stroke:transparent;fill:#64718b}.btn-outline--white:not(:hover){border-width:2px;--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-outline--white:not(:active):hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(136 147 170 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-outline--white:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(71 81 100 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(205 210 220 / var(--tw-text-opacity))}.btn-outline--white:disabled{border-width:2px;--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));opacity:.25;pointer-events:none}.btn-outline--white svg:first-of-type path{fill:transparent;stroke:#fff}.btn-outline--white svg:last-of-type path{stroke:transparent;fill:#fff}.btn-outline--white:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#fff}.btn-outline--white:active svg:last-of-type path{stroke:transparent;fill:#cdd2dc}.btn-link--primary:not(:hover){--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity))}.btn-link--primary:not(:active):hover{--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity))}.btn-link--primary:active{--tw-text-opacity:1;color:rgb(3 56 162 / var(--tw-text-opacity))}.btn-link--primary:disabled{--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity));opacity:.25;pointer-events:none}.btn-link--primary::after{--tw-bg-opacity:1;background-color:rgb(3 74 216 / var(--tw-bg-opacity))}.btn-link--primary svg:first-of-type path{fill:transparent;stroke:#1a65fa}.btn-link--primary svg:last-of-type path{stroke:transparent;fill:#0338a2}.btn-link--primary:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#0338a2}.btn-link--primary:active svg:last-of-type path{stroke:transparent;fill:#1a65fa}.btn-link--success:not(:hover){--tw-text-opacity:1;color:rgb(0 114 76 / var(--tw-text-opacity))}.btn-link--success:not(:active):hover{--tw-text-opacity:1;color:rgb(0 114 76 / var(--tw-text-opacity))}.btn-link--success:active{--tw-text-opacity:1;color:rgb(0 85 57 / var(--tw-text-opacity))}.btn-link--success:disabled{--tw-text-opacity:1;color:rgb(0 114 76 / var(--tw-text-opacity));opacity:.25;pointer-events:none}.btn-link--success::after{--tw-bg-opacity:1;background-color:rgb(0 114 76 / var(--tw-bg-opacity))}.btn-link--success svg:first-of-type path{fill:transparent;stroke:#00724c}.btn-link--success svg:last-of-type path{stroke:transparent;fill:#00724c}.btn-link--success:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#00724c}.btn-link--success:active svg:last-of-type path{stroke:transparent;fill:#013926}.btn-link--warning:not(:hover){--tw-text-opacity:1;color:rgb(176 97 18 / var(--tw-text-opacity));text-decoration-color:#fbbb3c}.btn-link--warning:not(:active):hover{--tw-text-opacity:1;color:rgb(176 97 18 / var(--tw-text-opacity))}.btn-link--warning:active{--tw-text-opacity:1;color:rgb(176 97 18 / var(--tw-text-opacity));text-decoration-color:#fbbb3c}.btn-link--warning:disabled{--tw-text-opacity:1;color:rgb(251 187 60 / var(--tw-text-opacity));opacity:.25;pointer-events:none}.btn-link--warning::after{--tw-bg-opacity:1;background-color:rgb(251 187 60 / var(--tw-bg-opacity))}.btn-link--warning svg:first-of-type path{fill:transparent;stroke:#b06112}.btn-link--warning svg:last-of-type path{stroke:transparent;fill:#fbbb3c}.btn-link--warning:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#fbbb3c}.btn-link--warning:active svg:last-of-type path{stroke:transparent;fill:#f2a222}.btn-link--danger:not(:hover){--tw-text-opacity:1;color:rgb(209 36 50 / var(--tw-text-opacity))}.btn-link--danger:not(:active):hover{--tw-text-opacity:1;color:rgb(196 24 38 / var(--tw-text-opacity))}.btn-link--danger:active{--tw-text-opacity:1;color:rgb(178 9 23 / var(--tw-text-opacity))}.btn-link--danger:disabled{--tw-text-opacity:1;color:rgb(209 36 50 / var(--tw-text-opacity));opacity:.25;pointer-events:none}.btn-link--danger::after{--tw-bg-opacity:1;background-color:rgb(209 36 50 / var(--tw-bg-opacity))}.btn-link--danger svg:first-of-type path{fill:transparent;stroke:#d12432}.btn-link--danger svg:last-of-type path{stroke:transparent;fill:#d12432}.btn-link--danger:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#d12432}.btn-link--danger:active svg:last-of-type path{stroke:transparent;fill:#b20917}.btn-link--neutral:not(:hover){color:#2b363c;text-decoration-color:#2b363c}.btn-link--neutral:not(:active):hover{color:#2b363c}.btn-link--neutral:active{color:#2b363c;text-decoration-color:#2b363c}.btn-link--neutral:disabled{color:#2b363c;text-decoration-color:#2b363c;opacity:.25;pointer-events:none}.btn-link--neutral::after{--tw-bg-opacity:1;background-color:rgb(43 54 60 / var(--tw-bg-opacity))}.btn-link--neutral svg:first-of-type path{fill:transparent;stroke:#2b363c}.btn-link--neutral svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-link--neutral:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-link--neutral:active svg:last-of-type path{stroke:transparent;fill:#64718b}.btn-link--white:not(:hover){--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));text-decoration-color:#fff}.btn-link--white:not(:active):hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-link--white:active{--tw-text-opacity:1;color:rgb(205 210 220 / var(--tw-text-opacity));text-decoration-color:#e1e4ea}.btn-link--white:disabled{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));text-decoration-color:#fff;opacity:.25;pointer-events:none}.btn-link--white::after{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn-link--white svg:first-of-type path{fill:transparent;stroke:#fff}.btn-link--white svg:last-of-type path{stroke:transparent;fill:#fff}.btn-link--white:not(:active):hover svg:last-of-type path{stroke:transparent;fill:#fff}.btn-link--white:active svg:last-of-type path{stroke:transparent;fill:#cdd2dc}
+.btn{border-radius:4px;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn .icon-wrapper{pointer-events:none;height:24px;min-width:24px}.btn .icon-wrapper svg{position:absolute}.btn:disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;user-select:none}.btn[class*=" btn-link"]{padding-left:16px!important;padding-right:16px!important;padding-top:8px!important;padding-bottom:8px!important;position:relative;text-decoration-line:none}.btn[class*=" btn-link"].btn-default::after{top:42px!important}.btn[class*=" btn-link"].btn-small::after{top:32px!important}.btn[class*=" btn-link"]:not([class*=btn-with-icon])::after{position:absolute;left:16px;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);width:calc(100% - 32px);height:1px;content:"";top:43px;transform:scaleX(1);transform-origin:center}.btn[class*=" btn-link"]:hover::after{transform:scaleX(0)}.btn:focus{outline-style:solid;outline-width:2px;outline-offset:2px;outline-color:#034ad8}.btn:not(:focus){outline:2px solid transparent;outline-offset:2px}.btn[class*=" btn-with-icon"]{text-decoration-line:none!important}.btn[class*=" btn-list-link"]{justify-content:space-between;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.btn-default{padding-left:16px;padding-right:16px;padding-top:16px;padding-bottom:16px;min-height:60px}.btn-default span.children-wrapper{font-size:1rem;line-height:1.75rem;letter-spacing:0;font-weight:500}.btn-default.is-icon-only{padding:0!important;min-width:60px}.btn-default.is-icon-only .icon-wrapper{margin:0}.btn-small{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px;min-height:44px}.btn-small span.children-wrapper{font-size:1rem;line-height:1.75rem;letter-spacing:0;font-weight:500}.btn-small.is-icon-only{padding:0!important;min-width:44px}.btn-small.is-icon-only .icon-wrapper{margin:0}.btn.animate-icon-backward svg{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn.animate-icon-backward svg:first-of-type{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}.btn.animate-icon-backward svg:last-of-type{--tw-translate-x:16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}.btn.animate-icon-backward:not(:disabled):hover svg:first-of-type{--tw-translate-x:-16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}.btn.animate-icon-backward:not(:disabled):hover svg:last-of-type{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}.btn.animate-icon-forward svg{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn.animate-icon-forward svg:first-of-type{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}.btn.animate-icon-forward svg:last-of-type{--tw-translate-x:-16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}.btn.animate-icon-forward:not(:disabled):hover svg:first-of-type{--tw-translate-x:16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}.btn.animate-icon-forward:not(:disabled):hover svg:last-of-type{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}.btn.animate-icon-default svg{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn.animate-icon-default svg:first-of-type{--tw-translate-x:0px;--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}.btn.animate-icon-default svg:last-of-type{--tw-translate-x:0px;--tw-translate-y:16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}.btn.animate-icon-default:not(:disabled):hover svg:first-of-type{--tw-translate-x:0px;--tw-translate-y:-16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}.btn.animate-icon-default:not(:disabled):hover svg:last-of-type{--tw-translate-x:0px;--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}.btn-block{width:100%;justify-content:center}.btn-with-icon-leading{flex-direction:row}.btn-with-icon-leading span.children-wrapper{text-align:left!important}.btn-with-icon-leading .icon-wrapper{margin-right:8px;margin-left:0}.btn-with-icon-trailing{flex-direction:row-reverse}.btn-with-icon-trailing span.children-wrapper{text-align:left!important}.btn-with-icon-trailing .icon-wrapper{margin-left:8px;margin-right:0}.btn-solid-primary{--tw-bg-opacity:1;background-color:rgb(3 74 216 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid-primary:not(:active):not(:disabled):hover{--tw-bg-opacity:1;background-color:rgb(3 56 162 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid-primary:active{--tw-bg-opacity:1;background-color:rgb(0 43 130 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid-primary:disabled{--tw-bg-opacity:1;background-color:rgb(3 74 216 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));opacity:.25}.btn-solid-primary svg:first-of-type path{fill:transparent;stroke:#fff}.btn-solid-primary svg:last-of-type path{stroke:transparent;stroke:#fff}.btn-solid-primary:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#fff}.btn-solid-primary:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid-primary:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#fff}.btn-solid-primary:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid-secondary{--tw-bg-opacity:1;background-color:rgb(227 244 255 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity))}.btn-solid-secondary:not(:active):not(:disabled):hover{--tw-bg-opacity:1;background-color:rgb(204 234 255 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity))}.btn-solid-secondary:active{--tw-bg-opacity:1;background-color:rgb(28 163 252 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity))}.btn-solid-secondary:disabled{--tw-bg-opacity:1;background-color:rgb(227 244 255 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity));opacity:.25}.btn-solid-secondary svg:first-of-type path{fill:transparent;stroke:#000}.btn-solid-secondary svg:last-of-type path{stroke:transparent;stroke:#000}.btn-solid-secondary:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#000}.btn-solid-secondary:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#000}.btn-solid-secondary:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#000}.btn-solid-secondary:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#000}.btn-solid-success{--tw-bg-opacity:1;background-color:rgb(0 114 76 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid-success:not(:active):not(:disabled):hover{--tw-bg-opacity:1;background-color:rgb(0 85 57 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid-success:active{--tw-bg-opacity:1;background-color:rgb(1 57 38 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid-success:disabled{--tw-bg-opacity:1;background-color:rgb(0 114 76 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));opacity:.25}.btn-solid-success svg:first-of-type path{fill:transparent;stroke:#fff}.btn-solid-success svg:last-of-type path{stroke:transparent;stroke:#fff}.btn-solid-success:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#fff}.btn-solid-success:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid-success:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#fff}.btn-solid-success:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid-warning{--tw-bg-opacity:1;background-color:rgb(251 203 60 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity))}.btn-solid-warning:not(:active):not(:disabled):hover{--tw-bg-opacity:1;background-color:rgb(251 187 60 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity))}.btn-solid-warning:active{--tw-bg-opacity:1;background-color:rgb(242 162 34 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity))}.btn-solid-warning:disabled{--tw-bg-opacity:1;background-color:rgb(251 203 60 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity));opacity:.25}.btn-solid-warning svg:first-of-type path{fill:transparent;stroke:#2b363c}.btn-solid-warning svg:last-of-type path{stroke:transparent;stroke:#2b363c}.btn-solid-warning:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#2b363c}.btn-solid-warning:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-solid-warning:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#2b363c}.btn-solid-warning:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-solid-danger{--tw-bg-opacity:1;background-color:rgb(209 35 50 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid-danger:not(:active):not(:disabled):hover{--tw-bg-opacity:1;background-color:rgb(196 24 38 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid-danger:active{--tw-bg-opacity:1;background-color:rgb(178 9 23 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid-danger:disabled{--tw-bg-opacity:1;background-color:rgb(209 35 50 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));opacity:.25}.btn-solid-danger svg:first-of-type path{fill:transparent;stroke:#fff}.btn-solid-danger svg:last-of-type path{stroke:transparent;stroke:#fff}.btn-solid-danger:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#fff}.btn-solid-danger:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid-danger:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#fff}.btn-solid-danger:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid-neutral{--tw-bg-opacity:1;background-color:rgb(43 54 60 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid-neutral:not(:active):not(:disabled):hover{--tw-bg-opacity:1;background-color:rgb(71 81 100 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid-neutral:active{--tw-bg-opacity:1;background-color:rgb(43 54 60 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-solid-neutral:disabled{--tw-bg-opacity:1;background-color:rgb(43 54 60 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));opacity:.25}.btn-solid-neutral svg:first-of-type path{fill:transparent;stroke:#fff}.btn-solid-neutral svg:last-of-type path{stroke:transparent;stroke:#fff}.btn-solid-neutral:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#fff}.btn-solid-neutral:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid-neutral:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#fff}.btn-solid-neutral:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#fff}.btn-solid-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity))}.btn-solid-white:not(:active):not(:disabled):hover{--tw-bg-opacity:1;background-color:rgb(241 243 248 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity))}.btn-solid-white:active{--tw-bg-opacity:1;background-color:rgb(225 228 234 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity))}.btn-solid-white:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity));opacity:.25}.btn-solid-white svg:first-of-type path{fill:transparent;stroke:#2b363c}.btn-solid-white svg:last-of-type path{stroke:transparent;stroke:#2b363c}.btn-solid-white:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#2b363c}.btn-solid-white:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-solid-white:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#2b363c}.btn-solid-white:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-outline-primary{border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity))}.btn-outline-primary:not(:active):not(:disabled):hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(3 74 216 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity))}.btn-outline-primary:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(0 43 130 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(0 43 130 / var(--tw-text-opacity))}.btn-outline-primary:disabled{border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity));opacity:.25}.btn-outline-primary svg:first-of-type path{fill:transparent;stroke:#1a65fa}.btn-outline-primary svg:last-of-type path{stroke:transparent;stroke:#1a65fa}.btn-outline-primary:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#1a65fa}.btn-outline-primary:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#1a65fa}.btn-outline-primary:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#002b82}.btn-outline-primary:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#002b82}.btn-outline-success{border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(0 114 76 / var(--tw-text-opacity))}.btn-outline-success:not(:active):not(:disabled):hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(0 114 76 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(0 114 76 / var(--tw-text-opacity))}.btn-outline-success:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(1 57 38 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(1 57 38 / var(--tw-text-opacity))}.btn-outline-success:disabled{border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(0 114 76 / var(--tw-text-opacity));opacity:.25}.btn-outline-success svg:first-of-type path{fill:transparent;stroke:#00724c}.btn-outline-success svg:last-of-type path{stroke:transparent;stroke:#00724c}.btn-outline-success:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#00724c}.btn-outline-success:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#00724c}.btn-outline-success:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#013926}.btn-outline-success:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#013926}.btn-outline-warning{border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(176 97 18 / var(--tw-text-opacity))}.btn-outline-warning:not(:active):not(:disabled):hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(251 187 60 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(176 97 18 / var(--tw-text-opacity))}.btn-outline-warning:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(178 9 23 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(178 9 23 / var(--tw-text-opacity))}.btn-outline-warning:disabled{border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(176 97 18 / var(--tw-text-opacity));opacity:.25}.btn-outline-warning svg:first-of-type path{fill:transparent;stroke:#b06112}.btn-outline-warning svg:last-of-type path{stroke:transparent;stroke:#b06112}.btn-outline-warning:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#fbbb3c}.btn-outline-warning:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#fbbb3c}.btn-outline-warning:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#f2a222}.btn-outline-warning:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#f2a222}.btn-outline-danger{border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(209 35 50 / var(--tw-text-opacity))}.btn-outline-danger:not(:active):not(:disabled):hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(209 35 50 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(209 35 50 / var(--tw-text-opacity))}.btn-outline-danger:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(196 24 38 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(178 9 23 / var(--tw-text-opacity))}.btn-outline-danger:disabled{border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(209 35 50 / var(--tw-text-opacity));opacity:.25}.btn-outline-danger svg:first-of-type path{fill:transparent;stroke:#d12332}.btn-outline-danger svg:last-of-type path{stroke:transparent;stroke:#d12332}.btn-outline-danger:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#d12332}.btn-outline-danger:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#d12332}.btn-outline-danger:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#b20917}.btn-outline-danger:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#b20917}.btn-outline-neutral{border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity))}.btn-outline-neutral:not(:active):not(:disabled):hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(136 147 170 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity))}.btn-outline-neutral:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(43 54 60 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity))}.btn-outline-neutral:disabled{border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity));opacity:.25}.btn-outline-neutral svg:first-of-type path{fill:transparent;stroke:#000}.btn-outline-neutral svg:last-of-type path{stroke:transparent;stroke:#000}.btn-outline-neutral:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#2b363c}.btn-outline-neutral:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-outline-neutral:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#64718b}.btn-outline-neutral:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#64718b}.btn-outline-white{border-width:2px;--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-outline-white:not(:active):not(:disabled):hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(136 147 170 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-outline-white:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(71 81 100 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(205 210 220 / var(--tw-text-opacity))}.btn-outline-white:disabled{border-width:2px;--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));opacity:.25}.btn-outline-white svg:first-of-type path{fill:transparent;stroke:#fff}.btn-outline-white svg:last-of-type path{stroke:transparent;stroke:#fff}.btn-outline-white:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#fff}.btn-outline-white:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#fff}.btn-outline-white:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#cdd2dc}.btn-outline-white:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#cdd2dc}.btn-link-primary{--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity))}.btn-link-primary:not(:active):not(:disabled):hover{--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity))}.btn-link-primary:active{--tw-text-opacity:1;color:rgb(3 56 162 / var(--tw-text-opacity))}.btn-link-primary:disabled{--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity));opacity:.25}.btn-link-primary::after{--tw-bg-opacity:1;background-color:rgb(3 74 216 / var(--tw-bg-opacity))}.btn-link-primary svg:first-of-type path{fill:transparent;stroke:#1a65fa}.btn-link-primary svg:last-of-type path{stroke:transparent;stroke:#1a65fa}.btn-link-primary:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#0338a2}.btn-link-primary:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#0338a2}.btn-link-primary:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#1a65fa}.btn-link-primary:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#1a65fa}.btn-link-success{--tw-text-opacity:1;color:rgb(0 114 76 / var(--tw-text-opacity))}.btn-link-success:not(:active):not(:disabled):hover{--tw-text-opacity:1;color:rgb(0 114 76 / var(--tw-text-opacity))}.btn-link-success:active{--tw-text-opacity:1;color:rgb(0 85 57 / var(--tw-text-opacity))}.btn-link-success:disabled{--tw-text-opacity:1;color:rgb(0 114 76 / var(--tw-text-opacity));opacity:.25}.btn-link-success::after{--tw-bg-opacity:1;background-color:rgb(0 114 76 / var(--tw-bg-opacity))}.btn-link-success svg:first-of-type path{fill:transparent;stroke:#00724c}.btn-link-success svg:last-of-type path{stroke:transparent;stroke:#00724c}.btn-link-success:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#00724c}.btn-link-success:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#00724c}.btn-link-success:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#013926}.btn-link-success:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#013926}.btn-link-warning{--tw-text-opacity:1;color:rgb(176 97 18 / var(--tw-text-opacity));text-decoration-color:#fbbb3c}.btn-link-warning:not(:active):not(:disabled):hover{--tw-text-opacity:1;color:rgb(176 97 18 / var(--tw-text-opacity))}.btn-link-warning:active{--tw-text-opacity:1;color:rgb(176 97 18 / var(--tw-text-opacity));text-decoration-color:#fbbb3c}.btn-link-warning:disabled{--tw-text-opacity:1;color:rgb(251 187 60 / var(--tw-text-opacity));opacity:.25}.btn-link-warning::after{--tw-bg-opacity:1;background-color:rgb(251 187 60 / var(--tw-bg-opacity))}.btn-link-warning svg:first-of-type path{fill:transparent;stroke:#b06112}.btn-link-warning svg:last-of-type path{stroke:transparent;stroke:#b06112}.btn-link-warning:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#fbbb3c}.btn-link-warning:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#fbbb3c}.btn-link-warning:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#f2a222}.btn-link-warning:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#f2a222}.btn-link-danger{--tw-text-opacity:1;color:rgb(209 35 50 / var(--tw-text-opacity))}.btn-link-danger:not(:active):not(:disabled):hover{--tw-text-opacity:1;color:rgb(196 24 38 / var(--tw-text-opacity))}.btn-link-danger:active{--tw-text-opacity:1;color:rgb(178 9 23 / var(--tw-text-opacity))}.btn-link-danger:disabled{--tw-text-opacity:1;color:rgb(209 35 50 / var(--tw-text-opacity));opacity:.25}.btn-link-danger::after{--tw-bg-opacity:1;background-color:rgb(209 35 50 / var(--tw-bg-opacity))}.btn-link-danger svg:first-of-type path{fill:transparent;stroke:#d12332}.btn-link-danger svg:last-of-type path{stroke:transparent;stroke:#d12332}.btn-link-danger:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#d12332}.btn-link-danger:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#d12332}.btn-link-danger:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#b20917}.btn-link-danger:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#b20917}.btn-link-neutral{--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity));text-decoration-color:#2b363c}.btn-link-neutral:not(:active):not(:disabled):hover{--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity))}.btn-link-neutral:active{--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity));text-decoration-color:#2b363c}.btn-link-neutral:disabled{--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity));text-decoration-color:#2b363c;opacity:.25}.btn-link-neutral::after{--tw-bg-opacity:1;background-color:rgb(43 54 60 / var(--tw-bg-opacity))}.btn-link-neutral svg:first-of-type path{fill:transparent;stroke:#2b363c}.btn-link-neutral svg:last-of-type path{stroke:transparent;stroke:#2b363c}.btn-link-neutral:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#2b363c}.btn-link-neutral:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#2b363c}.btn-link-neutral:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#64718b}.btn-link-neutral:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#64718b}.btn-link-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));text-decoration-color:#fff}.btn-link-white:not(:active):not(:disabled):hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn-link-white:active{--tw-text-opacity:1;color:rgb(205 210 220 / var(--tw-text-opacity));text-decoration-color:#e1e4ea}.btn-link-white:disabled{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));text-decoration-color:#fff;opacity:.25}.btn-link-white::after{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn-link-white svg:first-of-type path{fill:transparent;stroke:#fff}.btn-link-white svg:last-of-type path{stroke:transparent;stroke:#fff}.btn-link-white:not(:active):not(:disabled):hover svg:first-of-type path{fill:transparent;fill:#fff}.btn-link-white:not(:active):not(:disabled):hover svg:last-of-type path{stroke:transparent;fill:#fff}.btn-link-white:active:not(:disabled) svg:first-of-type path{fill:transparent;fill:#cdd2dc}.btn-link-white:active:not(:disabled) svg:last-of-type path{stroke:transparent;fill:#cdd2dc}

package/dist/components/ui/atoms/checkbox/checkbox.js

@@ -10,34 +10,47 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import classNames from 'classnames';
-import React, { useState } from 'react';
-import { stringToBoolean } from '../../../utils';
+import React, { useId, useRef, useState } from 'react';
+import { stringToBoolean } from '../../../index';
 import { Icon } from '../icon';
 import './checkbox.scss';
-export const Checkbox = (_a) => {
-    var { label = '', ariaLabel, hasError, isChecked, hideLabel, isOptional, id, children } = _a, props = __rest(_a, ["label", "ariaLabel", "hasError", "isChecked", "hideLabel", "isOptional", "id", "children"]);
+export const InnerCheckbox = (_a, ref) => {
+    var { label, hasError, hideLabel, required = true, children } = _a, props = __rest(_a, ["label", "hasError", "hideLabel", "required", "children"]);
     const inputWrapper = classNames('agora-checkbox-wrapper', {
+        'is-disabled': props.disabled,
         'has-error': stringToBoolean(hasError),
         'input-only': stringToBoolean(hideLabel)
     });
+    const generatedId = useId();
     const propsClone = Object.assign({}, props);
+    propsClone.id = propsClone.id || generatedId;
     const { onChange } = propsClone;
-    const [checked, setChecked] = useState(stringToBoolean(isChecked));
+    const [currentChecked, setCurrentChecked] = useState(stringToBoolean(propsClone.checked));
+    const wrapperRef = useRef(null);
+    const handleCustomCheckboxKeydown = (evt) => {
+        var _a, _b;
+        if (wrapperRef !== null && (evt.code === 'Space' || evt.code === 'Enter')) {
+            evt.preventDefault();
+            (_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.click();
+        }
+    };
+    const handleCustomCheckboxClick = (evt) => {
+        var _a, _b;
+        if (wrapperRef !== null) {
+            evt.preventDefault();
+            (_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.click();
+        }
+    };
     const handleChange = (evt) => {
-        setChecked(!checked);
+        setCurrentChecked(!currentChecked);
         onChange === null || onChange === void 0 ? void 0 : onChange(evt);
     };
-    if (stringToBoolean(isOptional)) {
-        delete propsClone.required;
-    }
-    else {
-        propsClone.required = true;
-    }
-    return (React.createElement("div", { className: inputWrapper },
-        React.createElement("input", Object.assign({ type: "checkbox", id: id, checked: checked, "aria-label": ariaLabel || label, "aria-required": !stringToBoolean(isOptional), "aria-invalid": stringToBoolean(hasError), onChange: handleChange, tabIndex: 0 }, propsClone)),
-        React.createElement("span", { className: "checkbox-span" },
-            React.createElement(Icon, { icon: "agora-line-tick", ariaHidden: true })),
-        React.createElement("label", { className: "checkbox-label text-m-regular", htmlFor: id },
-            React.createElement("span", null, children || label))));
+    return (React.createElement("div", { ref: wrapperRef, className: inputWrapper },
+        React.createElement("input", Object.assign({ className: "inner-checkbox-input" }, propsClone, { value: propsClone.value || undefined, type: "checkbox", tabIndex: -1, ref: ref, onChange: handleChange })),
+        React.createElement("div", Object.assign({}, propsClone, { className: "agora-checkbox-custom", id: `agora-checkbox-custom-${propsClone.id}`, role: "checkbox", tabIndex: props.disabled ? -1 : 0, "aria-checked": currentChecked, "aria-disabled": !!props.disabled, "aria-label": hideLabel ? propsClone['aria-label'] || label : propsClone['aria-label'], "aria-required": required, "aria-invalid": stringToBoolean(hasError), onKeyDown: handleCustomCheckboxKeydown, onClick: handleCustomCheckboxClick }),
+            React.createElement("span", { className: "checkbox-span" },
+                React.createElement(Icon, { name: "agora-line-tick", "aria-hidden": true })),
+            !hideLabel && (React.createElement("label", { className: "checkbox-label text-m-regular", htmlFor: propsClone.id },
+                React.createElement("span", null, children || label))))));
 };
-export default Checkbox;
+export const Checkbox = React.forwardRef(InnerCheckbox);

package/dist/components/ui/atoms/checkbox/checkbox.scss

@@ -1 +1 @@
-.agora-checkbox-wrapper{position:relative;display:flex;width:-moz-fit-content;width:fit-content;cursor:pointer;align-items:flex-start;min-height:44px}.agora-checkbox-wrapper>.checkbox-label{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:4px;border-width:2px;border-color:transparent;padding-right:16px;padding-left:56px;--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity));transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:-50px;min-height:44px;padding-top:10px;padding-bottom:10px}.agora-checkbox-wrapper>label{margin-top:-2px}.agora-checkbox-wrapper.input-only{width:44px;height:44px}.agora-checkbox-wrapper.input-only .checkbox-span{margin:10px}.agora-checkbox-wrapper.input-only input{top:0;left:0}.agora-checkbox-wrapper.input-only .checkbox-label{margin-top:0;padding-left:0;width:44px;height:44px;margin-left:-44px}.agora-checkbox-wrapper.input-only .checkbox-label span{display:none}.agora-checkbox-wrapper:hover input:not(:disabled)~.checkbox-label{--tw-border-opacity:1;border-color:rgb(26 101 250 / var(--tw-border-opacity))}.agora-checkbox-wrapper input{position:absolute;cursor:pointer;opacity:0;width:44px;height:44px;left:6px;top:2px}.agora-checkbox-wrapper input:checked~.checkbox-span{--tw-border-opacity:1;border-color:rgb(26 101 250 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(26 101 250 / var(--tw-bg-opacity))}.agora-checkbox-wrapper input:checked~.checkbox-span svg{visibility:visible}.agora-checkbox-wrapper input:checked~.checkbox-span svg path{stroke:#fff}.agora-checkbox-wrapper input:focus~.checkbox-span{border-radius:4px;outline-width:0}.agora-checkbox-wrapper input:focus~.checkbox-label{--tw-border-opacity:1;border-color:rgb(26 101 250 / var(--tw-border-opacity))}.agora-checkbox-wrapper input:disabled{cursor:not-allowed}.agora-checkbox-wrapper input:disabled~.checkbox-label{cursor:not-allowed;--tw-text-opacity:1;color:rgb(186 192 204 / var(--tw-text-opacity))}.agora-checkbox-wrapper input:disabled~.checkbox-span{--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(241 243 248 / var(--tw-bg-opacity))}.agora-checkbox-wrapper input:disabled~.checkbox-span svg path{stroke:#64718b;opacity:.5}.agora-checkbox-wrapper .checkbox-span{pointer-events:none;z-index:50;margin-left:16px;margin-right:8px;display:flex;height:24px;width:24px;align-items:center;justify-content:center;border-radius:4px;border-width:2px;--tw-border-opacity:1;border-color:rgb(136 147 170 / var(--tw-border-opacity));outline-style:solid;outline-width:2px;outline-offset:4px;outline-color:transparent;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;margin-top:12px}.agora-checkbox-wrapper .checkbox-span svg{visibility:hidden}.agora-checkbox-wrapper.has-error .checkbox-span{--tw-border-opacity:1;border-color:rgb(222 45 59 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(254 241 242 / var(--tw-bg-opacity))}@media (max-width:768px){.agora-checkbox-wrapper .checkbox-label{margin-left:-58px!important;padding-left:60px}.agora-checkbox-wrapper label{margin-top:2px}.agora-checkbox-wrapper input{left:2px;top:6px!important}.agora-checkbox-wrapper .checkbox-span{margin-left:8px!important;height:32px!important;width:32px!important;min-width:32px}.agora-checkbox-wrapper.input-only input{top:0!important}.agora-checkbox-wrapper.input-only .checkbox-label{margin-left:-44px!important}.agora-checkbox-wrapper.input-only .checkbox-span{margin:6px!important}}
+.agora-checkbox-wrapper{position:relative;width:-moz-fit-content;width:fit-content}.agora-checkbox-wrapper .agora-checkbox-custom,.agora-checkbox-wrapper .inner-checkbox-input{outline:2px solid transparent;outline-offset:2px}.agora-checkbox-wrapper.has-error .agora-checkbox-custom .checkbox-span{--tw-border-opacity:1;border-color:rgb(222 45 59 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(254 241 242 / var(--tw-bg-opacity))}.agora-checkbox-wrapper.is-disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;user-select:none}.agora-checkbox-wrapper.is-disabled .checkbox-label,.agora-checkbox-wrapper.is-disabled .checkbox-span,.agora-checkbox-wrapper.is-disabled input{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;user-select:none}.agora-checkbox-wrapper.is-disabled .agora-checkbox-custom:focus,.agora-checkbox-wrapper.is-disabled .agora-checkbox-custom:hover{border-color:transparent}.agora-checkbox-wrapper .agora-checkbox-custom{display:flex;align-items:flex-start;border-radius:4px;border-width:2px;border-color:transparent;padding-left:16px;padding-right:16px;padding-top:0;padding-bottom:0;min-height:44px}.agora-checkbox-wrapper .agora-checkbox-custom .checkbox-label{--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity));transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin:6px 0}.agora-checkbox-wrapper .agora-checkbox-custom .checkbox-span{margin-right:16px;display:flex;height:24px;width:24px;align-items:center;justify-content:center;border-radius:4px;border-width:2px;--tw-border-opacity:1;border-color:rgb(136 147 170 / var(--tw-border-opacity));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;margin-top:10px;margin-bottom:10px}.agora-checkbox-wrapper .agora-checkbox-custom .checkbox-span svg{visibility:hidden}.agora-checkbox-wrapper .agora-checkbox-custom:focus,.agora-checkbox-wrapper .agora-checkbox-custom:hover{--tw-border-opacity:1;border-color:rgb(3 74 216 / var(--tw-border-opacity))}.agora-checkbox-wrapper .inner-checkbox-input{display:none}.agora-checkbox-wrapper .inner-checkbox-input:checked~.agora-checkbox-custom .checkbox-span{--tw-border-opacity:1;border-color:rgb(3 74 216 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(3 74 216 / var(--tw-bg-opacity))}.agora-checkbox-wrapper .inner-checkbox-input:checked~.agora-checkbox-custom .checkbox-span svg{visibility:visible}.agora-checkbox-wrapper .inner-checkbox-input:checked~.agora-checkbox-custom .checkbox-span svg path{stroke:#fff}.agora-checkbox-wrapper .inner-checkbox-input:disabled~.agora-checkbox-custom .checkbox-label{--tw-text-opacity:1;color:rgb(186 192 204 / var(--tw-text-opacity))}.agora-checkbox-wrapper .inner-checkbox-input:disabled~.agora-checkbox-custom .checkbox-span{--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(241 243 248 / var(--tw-bg-opacity))}.agora-checkbox-wrapper .inner-checkbox-input:disabled~.agora-checkbox-custom .checkbox-span svg path{stroke:#64718b;opacity:.5}.agora-checkbox-wrapper.input-only{min-width:24px}.agora-checkbox-wrapper.input-only .checkbox-span{margin-right:0}

package/dist/components/ui/atoms/icon/assets/Line/line-chevrons-left.js

@@ -0,0 +1,9 @@
+import React from 'react';
+export const component = (props) => {
+    const newProps = Object.assign({}, props);
+    delete newProps.alt;
+    delete newProps.title;
+    return (React.createElement("svg", Object.assign({ width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, newProps),
+        props.title && React.createElement("title", null, props.title),
+        React.createElement("path", { d: "M5 1L1 5L5 9M11 1L7 5L11 9", stroke: "#034AD8", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+};

package/dist/components/ui/atoms/icon/assets/Line/line-chevrons-right.js

@@ -0,0 +1,9 @@
+import React from 'react';
+export const component = (props) => {
+    const newProps = Object.assign({}, props);
+    delete newProps.alt;
+    delete newProps.title;
+    return (React.createElement("svg", Object.assign({ width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, newProps),
+        props.title && React.createElement("title", null, props.title),
+        React.createElement("path", { d: "M7 1L11 5L7 9M1 1L5 5L1 9", stroke: "#034AD8", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+};

package/dist/components/ui/atoms/icon/assets/Other/info-date.js

@@ -0,0 +1,9 @@
+import React from 'react';
+export const component = (props) => {
+    const newProps = Object.assign({}, props);
+    delete newProps.alt;
+    delete newProps.title;
+    return (React.createElement("svg", Object.assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, newProps),
+        props.title && React.createElement("title", null, props.title),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0ZM11 6C10.4477 6 10 6.44772 10 7C10 7.55228 10.4477 8 11 8H11.01C11.5623 8 12.01 7.55228 12.01 7C12.01 6.44772 11.5623 6 11.01 6H11ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V15C10 15.5523 10.4477 16 11 16C11.5523 16 12 15.5523 12 15V11Z", fill: "#0079BF" })));
+};