@ama-pt/agora-design-system 0.1.2 → 0.1.3

package/README.md

@@ -1,6 +1,6 @@
 # Ágora Design System
 
-<b>Bem-vindo ao Ágora Design System, o sistema de design e desenvolvimento por detrás do ePortugal o portal agregador de serviços públicos da República Portuguesa</b>
+<p>Welcome to the Ágora Design System, the design system behind the ePortugal aggregator site of the Portuguese Republic public services</p>
 
 ## Core technologies
 
@@ -16,6 +16,41 @@
 
 ## Installation
 
+1- Add the library to the project
+
 ```sh
 > npm install @ama-pt/agora-design-system
 ```
+
+2- Add global css styles to your global stylesheet
+
+```css
+@import '@ama-pt/agora-design-system/dist/styles/globals.css';
+```
+
+### Note
+
+For now, only NextJS is supported, and using this additional steps:
+
+1- Install the following package
+
+```sh
+> npm install next-transpile-modules
+```
+
+2- Set the next.config.js file as follow:
+
+```js
+/** @type {import('next').NextConfig} */
+const withTM = require('next-transpile-modules')(['@ama-pt/agora-design-system']);
+
+module.exports = withTM({
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.map$/i,
+      use: 'raw-loader'
+    });
+    return config;
+  }
+});
+```

package/README.npm.md

@@ -1,6 +1,6 @@
 # Ágora Design System
 
-<b>Bem-vindo ao Ágora Design System, o sistema de design e desenvolvimento por detrás do ePortugal o portal agregador de serviços públicos da República Portuguesa</b>
+<p>Welcome to the Ágora Design System, the design system behind the ePortugal aggregator site of the Portuguese Republic public services</p>
 
 ## Core technologies
 
@@ -16,6 +16,41 @@
 
 ## Installation
 
+1- Add the library to the project
+
 ```sh
 > npm install @ama-pt/agora-design-system
 ```
+
+2- Add global css styles to your global stylesheet
+
+```css
+@import '@ama-pt/agora-design-system/dist/styles/globals.css';
+```
+
+### Note
+
+For now, only NextJS is supported, and using this additional steps:
+
+1- Install the following package
+
+```sh
+> npm install next-transpile-modules
+```
+
+2- Set the next.config.js file as follow:
+
+```js
+/** @type {import('next').NextConfig} */
+const withTM = require('next-transpile-modules')(['@ama-pt/agora-design-system']);
+
+module.exports = withTM({
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.map$/i,
+      use: 'raw-loader'
+    });
+    return config;
+  }
+});
+```

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

@@ -1,375 +1 @@
-//  Mixings
-@mixin dyeButton($naturalColors, $hoverColors, $activeColors, $disabledColors) {
-  &:not(:hover) {
-    @apply #{$naturalColors};
-  }
-
-  &:not(:active):hover {
-    @apply #{$hoverColors};
-  }
-
-  &:active {
-    @apply #{$activeColors};
-  }
-
-  &:disabled {
-    @apply #{$disabledColors} opacity-25;
-    pointer-events: none;
-  }
-}
-
-@mixin dyeIcon($naturalColors, $hoverColors, $activeColors) {
-  svg:first-of-type {
-    path {
-      fill: transparent;
-      @apply #{$naturalColors};
-    }
-  }
-
-  svg:last-of-type {
-    path {
-      stroke: transparent;
-      @apply #{$hoverColors};
-    }
-  }
-
-  &:not(:active):hover {
-    svg:last-of-type {
-      path {
-        stroke: transparent;
-        @apply #{$hoverColors};
-      }
-    }
-  }
-  &:active {
-    svg:last-of-type {
-      path {
-        stroke: transparent;
-        @apply #{$activeColors};
-      }
-    }
-  }
-}
-
-@mixin dyeLinkUnderline($color) {
-  &::after {
-    @apply #{$color};
-  }
-}
-
-@mixin animateIcon($firstIconInitState, $secondIconInitState, $firtIconHoverState) {
-  svg {
-    @apply transition-all ease-in-out;
-  }
-  svg:first-of-type {
-    @apply #{$firstIconInitState};
-  }
-
-  svg:last-of-type {
-    @apply #{$secondIconInitState};
-  }
-
-  &:hover {
-    svg:first-of-type {
-      @apply #{$firtIconHoverState};
-    }
-    svg:last-of-type {
-      @apply #{$firstIconInitState};
-    }
-  }
-}
-
-.btn {
-  @apply rounded-4 flex items-center justify-center transition-all  ease-in-out;
-
-  .icon-wrapper {
-    @apply pointer-events-none h-24;
-    min-width: 24px;
-    svg {
-      @apply absolute;
-    }
-  }
-
-  // Global styles for ButtonLinks
-  &[class*=' btn-link'] {
-    // apply for all ButtonLink
-    @apply px-16 py-8 #{!important};
-
-    @apply relative no-underline;
-
-    &.btn-default {
-      &::after {
-        top: 42px !important;
-      }
-    }
-
-    &.btn-small {
-      &::after {
-        top: 32px !important;
-      }
-    }
-
-    &:not([class*='btn-with-icon'])::after {
-      @apply left-16 absolute  transition-all ease-in-out;
-      width: calc(100% - 32px);
-      height: 1px;
-      content: '';
-      top: 43px;
-      transform: scaleX(1);
-      transform-origin: center;
-    }
-
-    &:hover::after {
-      transform: scaleX(0);
-    }
-  }
-
-  &:focus {
-    @apply outline outline-2 outline-primary-600 outline-offset-2;
-  }
-
-  &:not(:focus) {
-    @apply outline-none;
-  }
-
-  // avoid underline decoration when Icon present
-  &[class*=' btn-with-icon'] {
-    @apply no-underline #{!important};
-  }
-
-  &[class*=' btn-list-link'] {
-    @apply justify-between text-right truncate;
-  }
-
-  // Sizes & Spacing
-  &-default {
-    @apply px-16 py-16;
-
-    span.children-wrapper {
-      @apply text-interaction-button-m;
-    }
-
-    min-height: 60px;
-
-    &.is-icon-only {
-      @apply p-0 #{!important};
-      width: 60px;
-
-      .icon-wrapper {
-        @apply m-0;
-      }
-    }
-  }
-
-  &-small {
-    @apply px-16 py-8;
-
-    span.children-wrapper {
-      @apply text-interaction-button-s;
-    }
-
-    min-height: 44px;
-
-    &.is-icon-only {
-      @apply p-0 #{!important};
-      width: 44px;
-
-      .icon-wrapper {
-        @apply m-0;
-      }
-    }
-  }
-  // # end sizes
-
-  // Animate Icons according animation type
-  &.animate-icon--backward {
-    @include animateIcon('translate-x-0 opacity-100', 'translate-x-16 opacity-0', '-translate-x-16 opacity-0');
-  }
-
-  &.animate-icon--forward {
-    @include animateIcon('translate-x-0 opacity-100', '-translate-x-16 opacity-0', 'translate-x-16 opacity-0');
-  }
-  &.animate-icon--default {
-    @include animateIcon(
-      'translate-x-0 translate-y-0 opacity-100',
-      ' translate-x-0 translate-y-16 opacity-0',
-      'translate-x-0 -translate-y-16 opacity-0'
-    );
-  }
-  // # end animations
-
-  &-block {
-    @apply w-full justify-center;
-  }
-
-  &-with-icon {
-    &--leading {
-      span.children-wrapper {
-        text-align: left !important;
-      }
-      @apply flex-row;
-
-      .icon-wrapper {
-        @apply mr-8 ml-0;
-      }
-    }
-
-    &--trailing {
-      span.children-wrapper {
-        text-align: left !important;
-      }
-
-      @apply flex-row-reverse;
-
-      .icon-wrapper {
-        @apply ml-8 mr-0;
-      }
-    }
-  }
-
-  &-solid {
-    &--primary {
-      @include dyeButton(
-        'text-white bg-primary-600',
-        'text-white bg-primary-700',
-        'text-white bg-primary-800',
-        'text-white bg-primary-600'
-      );
-      @include dyeIcon('stroke-white', 'fill-white', 'fill-white');
-    }
-    &--secondary {
-      @include dyeButton(
-        'text-dark bg-secondary-200',
-        'text-dark bg-secondary-300',
-        'text-dark bg-secondary-500',
-        'text-dark bg-secondary-200'
-      );
-      @include dyeIcon('stroke-black', 'fill-black', 'fill-black');
-    }
-    &--success {
-      @include dyeButton(
-        'text-white bg-success-600',
-        'text-white bg-success-700',
-        'text-white bg-success-800',
-        'text-white bg-success-600'
-      );
-      @include dyeIcon('stroke-white', 'fill-white', 'fill-white');
-    }
-    &--warning {
-      @include dyeButton('bg-alert-500 text-dark', 'bg-alert-600 text-dark', 'bg-alert-700 text-dark', 'bg-alert-500 text-dark');
-      @include dyeIcon('stroke-neutral-900', 'fill-neutral-900', 'fill-neutral-900');
-    }
-    &--danger {
-      @include dyeButton('bg-danger-600 text-white', 'bg-danger-700 text-white', 'bg-danger-800 text-white', 'bg-danger-600 text-white');
-      @include dyeIcon('stroke-white', 'fill-white', 'fill-white');
-    }
-    &--neutral {
-      @include dyeButton(
-        'bg-neutral-900 text-white',
-        'bg-neutral-800 text-white',
-        'bg-neutral-900 text-white',
-        'bg-neutral-900 text-white'
-      );
-      @include dyeIcon('stroke-white', 'fill-white', 'fill-white');
-    }
-    &--white {
-      @include dyeButton('bg-white text-dark', 'bg-neutral-100 text-dark', 'bg-neutral-200 text-dark', 'bg-white text-dark');
-      @include dyeIcon('stroke-neutral-900', 'fill-neutral-900', 'fill-neutral-900');
-    }
-  }
-
-  &-outline {
-    &--primary {
-      @include dyeButton(
-        'border-neutral-300 text-primary-600 border-2',
-        'border-primary-600 text-primary-600 border-2',
-        'border-primary-800 text-primary-800 border-2',
-        'border-neutral-300 text-primary-600 border-2'
-      );
-      @include dyeIcon('stroke-primary-500', 'fill-primary-500', 'fill-primary-800');
-    }
-    &--success {
-      @include dyeButton(
-        'border-neutral-300 text-success-600 border-2',
-        'border-success-600 text-success-600 border-2',
-        'border-success-800 text-success-800 border-2',
-        'border-neutral-300 text-success-600 border-2'
-      );
-      @include dyeIcon('stroke-success-600', 'fill-success-600', 'fill-success-800');
-    }
-    &--warning {
-      @include dyeButton(
-        'border-neutral-300 text-alert-800 border-2',
-        'border-alert-600 text-alert-800 border-2',
-        'border-danger-800 text-danger-800 border-2',
-        'border-neutral-300 text-alert-800 border-2'
-      );
-      @include dyeIcon('stroke-alert-800', 'fill-alert-600', 'fill-alert-700');
-    }
-    &--danger {
-      @include dyeButton(
-        'border-neutral-300 text-danger-600 border-2',
-        'border-danger-600 text-danger-600 border-2',
-        'border-danger-700 text-danger-800 border-2',
-        'border-neutral-300 text-danger-600 border-2'
-      );
-      @include dyeIcon('stroke-danger-600', 'fill-danger-600', 'fill-danger-800');
-    }
-    &--neutral {
-      @include dyeButton(
-        'border-neutral-300 text-dark border-2',
-        'border-neutral-600 text-dark border-2',
-        'border-neutral-900 text-dark border-2',
-        'border-neutral-300 text-dark border-2'
-      );
-      @include dyeIcon('stroke-black', 'fill-dark', 'fill-neutral-700');
-    }
-    &--white {
-      @include dyeButton(
-        'border-white text-white border-2',
-        'border-neutral-600 text-white border-2',
-        'border-neutral-800 text-neutral-300 border-2',
-        'border-white text-white border-2'
-      );
-      @include dyeIcon('stroke-white', 'fill-white', 'fill-neutral-300');
-    }
-  }
-
-  &-link {
-    &--primary {
-      @include dyeButton('text-primary-600', 'text-primary-600', 'text-primary-700', 'text-primary-600');
-      @include dyeLinkUnderline('bg-primary-600');
-      @include dyeIcon('stroke-primary-500', 'fill-primary-700', 'fill-primary-500');
-    }
-    &--success {
-      @include dyeButton('text-success-600', 'text-success-600', 'text-success-700', 'text-success-600');
-      @include dyeLinkUnderline('bg-success-600');
-      @include dyeIcon('stroke-success-600', 'fill-success-600', 'fill-success-800');
-    }
-    &--warning {
-      @include dyeButton('text-alert-800 decoration-alert-600', 'text-alert-800', 'text-alert-800 decoration-alert-600', 'text-alert-600');
-      @include dyeLinkUnderline('bg-alert-600');
-      @include dyeIcon('stroke-alert-800', 'fill-alert-600', 'fill-alert-700');
-    }
-    &--danger {
-      @include dyeButton('text-danger-600', 'text-danger-700', 'text-danger-800', 'text-danger-600');
-      @include dyeLinkUnderline('bg-danger-600');
-      @include dyeIcon('stroke-danger-600', 'fill-danger-600', 'fill-danger-800');
-    }
-    &--neutral {
-      @include dyeButton('text-dark decoration-dark', 'text-dark', 'text-dark decoration-dark', 'text-dark decoration-dark');
-      @include dyeLinkUnderline('bg-neutral-900');
-      @include dyeIcon('stroke-dark', 'fill-neutral-900', 'fill-neutral-700');
-    }
-    &--white {
-      @include dyeButton(
-        'text-white decoration-white',
-        'text-white',
-        'text-neutral-300 decoration-neutral-200',
-        'text-white decoration-white'
-      );
-      @include dyeLinkUnderline('bg-white');
-      @include dyeIcon('stroke-white', 'fill-white', 'fill-neutral-300');
-    }
-  }
-}
+.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.25rem;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:.875rem;line-height:1.125rem;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}

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

@@ -1,139 +1 @@
-.agora-checkbox-wrapper {
-  @apply flex items-start cursor-pointer relative w-fit;
-  min-height: 44px;
-
-  & > .checkbox-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;
-
-    .checkbox-span {
-      margin: 10px;
-    }
-
-    input {
-      @apply top-0 left-0;
-    }
-
-    .checkbox-label {
-      @apply mt-0 pl-0;
-      width: 44px;
-      height: 44px;
-      margin-left: -44px;
-    }
-
-    .checkbox-label span {
-      @apply hidden;
-    }
-  }
-
-  &:hover input:not(:disabled) ~ .checkbox-label {
-    @apply border-primary-500;
-  }
-
-  input {
-    @apply absolute opacity-0 cursor-pointer;
-    width: 44px;
-    height: 44px;
-    left: 6px;
-    top: 2px;
-
-    //
-    &:checked {
-      & ~ .checkbox-span {
-        @apply bg-primary-500 border-primary-500;
-        svg {
-          @apply visible;
-          path {
-            @apply stroke-white;
-          }
-        }
-      }
-    }
-
-    &:focus {
-      & ~ .checkbox-span {
-        @apply outline-0 rounded-4;
-      }
-      & ~ .checkbox-label {
-        @apply border-primary-500;
-      }
-    }
-
-    &:disabled {
-      @apply cursor-not-allowed;
-
-      & ~ .checkbox-label {
-        @apply text-neutral-400 cursor-not-allowed;
-      }
-
-      & ~ .checkbox-span {
-        @apply bg-neutral-100 border-neutral-300;
-        svg {
-          path {
-            @apply stroke-neutral-700 opacity-50;
-          }
-        }
-      }
-    }
-  }
-
-  .checkbox-span {
-    @apply pointer-events-none ml-16 z-50 rounded-4 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;
-    svg {
-      @apply invisible;
-    }
-  }
-
-  &.has-error .checkbox-span {
-    @apply border-danger-500 bg-danger-50;
-  }
-
-  @media (max-width: theme('screens.md')) {
-    .checkbox-label {
-      margin-left: -58px !important;
-      padding-left: 60px;
-    }
-
-    label {
-      margin-top: 2px;
-    }
-
-    input {
-      left: 2px;
-      top: 6px !important;
-    }
-
-    .checkbox-span {
-      @apply w-32 h-32 ml-8 #{!important};
-      @apply min-w-[theme('spacing[32]')];
-    }
-
-    &.input-only {
-      input {
-        top: 0 !important;
-      }
-
-      .checkbox-label {
-        margin-left: -44px !important;
-      }
-
-      .checkbox-span {
-        margin: 6px !important;
-      }
-    }
-  }
-}
+.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}}