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

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

@@ -1,152 +1 @@
-@mixin dyeLineIcon($colorClass) {
-  path {
-    fill: transparent;
-    @apply #{$colorClass} #{!important};
-  }
-}
-
-@mixin dyeSolidIcon($colorClass) {
-  path {
-    stroke: transparent;
-    @apply #{$colorClass} #{!important};
-  }
-}
-
-.agora-input-textarea--wrapper {
-  @apply flex flex-col relative;
-
-  // normal leading icons color on default status input text
-  .input-icon {
-    &.dye-as-solid {
-      @include dyeSolidIcon('fill-neutral-900 opacity-70');
-    }
-    &.dye-as-line {
-      @include dyeLineIcon('stroke-neutral-900 opacity-70');
-    }
-  }
-  //# end
-
-  & span.hint-icon-wrapper {
-    svg {
-      path {
-        stroke: transparent;
-        @apply fill-informative-500;
-      }
-    }
-  }
-
-  .feedback-icon-wrapper {
-    &--info {
-      path {
-        stroke: transparent;
-        @apply fill-informative-500;
-      }
-    }
-
-    &--success {
-      path {
-        stroke: transparent;
-        @apply fill-success-500;
-      }
-    }
-
-    &--danger {
-      path {
-        stroke: transparent;
-        @apply fill-danger-500;
-      }
-    }
-
-    &--warning {
-      path {
-        stroke: transparent;
-        @apply fill-alert-700;
-      }
-    }
-  }
-
-  .input-leading--icon {
-    @apply right-0 bottom-24 left-16 absolute w-min;
-    top: 18px;
-  }
-
-  .agora-input-textarea {
-    @apply border-2 border-neutral-300 outline-none rounded-4 p-16 transition-all ease-in-out text-interaction-input-text text-neutral-900;
-
-    &.has-leading-icon {
-      @apply pl-56;
-    }
-
-    &:hover:not(:focus):not(:disabled):not(:read-only) {
-      @apply border-neutral-800;
-
-      // normal leading icons color on default status input text
-      & ~ .input-icon {
-        &.dye-as-solid {
-          @include dyeSolidIcon('fill-neutral-900 opacity-100');
-        }
-        &.dye-as-line {
-          @include dyeLineIcon('stroke-neutral-900 opacity-100');
-        }
-      }
-      //# end
-    }
-
-    // disabled
-    &:disabled,
-    &:read-only {
-      @apply border-neutral-100 cursor-not-allowed bg-neutral-100 #{!important};
-
-      &:focus:read-only {
-        @apply border-primary-600 #{!important}; // force border
-      }
-
-      // normal leading icons color on default status input text
-      & ~ .input-icon {
-        &.dye-as-solid {
-          @include dyeSolidIcon('fill-neutral-900  opacity-70');
-        }
-        &.dye-as-line {
-          @include dyeLineIcon('stroke-neutral-900  opacity-70');
-        }
-      }
-      //# end
-    }
-
-    &.has-value {
-      @apply border-neutral-500;
-    }
-
-    &:not(:focus) {
-      @apply outline-0;
-    }
-
-    &:not(:disabled):focus {
-      @apply border-primary-600 outline outline-2 outline-offset-2 outline-primary-600;
-
-      // normal leading icons color on default status input text
-      & ~ .input-icon {
-        &.dye-as-solid {
-          @include dyeSolidIcon('fill-primary-600 opacity-100');
-        }
-        &.dye-as-line {
-          @include dyeLineIcon('stroke-primary-600  opacity-100');
-        }
-      }
-      //# end
-    }
-  }
-
-  &.input-has-error {
-    .input-feedback {
-      path {
-        stroke: transparent;
-        @apply fill-danger-500 #{!important};
-      }
-    }
-
-    .agora-input-textarea:not(:disabled):not(:read-only) {
-      @apply border-2 bg-danger-50 border-danger-500 #{!important};
-    }
-  }
-}
+.agora-input-textarea--wrapper{position:relative;display:flex;flex-direction:column}.agora-input-textarea--wrapper .input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-textarea--wrapper .input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-textarea--wrapper span.hint-icon-wrapper svg path{stroke:transparent;fill:#0079bf}.agora-input-textarea--wrapper .feedback-icon-wrapper--info path{stroke:transparent;fill:#0079bf}.agora-input-textarea--wrapper .feedback-icon-wrapper--success path{stroke:transparent;fill:#008558}.agora-input-textarea--wrapper .feedback-icon-wrapper--danger path{stroke:transparent;fill:#de2d3b}.agora-input-textarea--wrapper .feedback-icon-wrapper--warning path{stroke:transparent;fill:#f2a222}.agora-input-textarea--wrapper .input-leading--icon{position:absolute;right:0;bottom:24px;left:16px;width:-moz-min-content;width:min-content;top:18px}.agora-input-textarea--wrapper .agora-input-textarea{border-radius:4px;border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));padding:16px;font-size:1rem;line-height:1.25rem;letter-spacing:0;font-weight:400;--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity));outline:2px solid transparent;outline-offset:2px;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.agora-input-textarea--wrapper .agora-input-textarea.has-leading-icon{padding-left:56px}.agora-input-textarea--wrapper .agora-input-textarea:hover:not(:focus):not(:disabled):not(:-moz-read-only){--tw-border-opacity:1;border-color:rgb(71 81 100 / var(--tw-border-opacity))}.agora-input-textarea--wrapper .agora-input-textarea:hover:not(:focus):not(:disabled):not(:read-only){--tw-border-opacity:1;border-color:rgb(71 81 100 / var(--tw-border-opacity))}.agora-input-textarea--wrapper .agora-input-textarea:hover:not(:focus):not(:disabled):not(:-moz-read-only)~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:1!important}.agora-input-textarea--wrapper .agora-input-textarea:hover:not(:focus):not(:disabled):not(:read-only)~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:1!important}.agora-input-textarea--wrapper .agora-input-textarea:hover:not(:focus):not(:disabled):not(:-moz-read-only)~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:1!important}.agora-input-textarea--wrapper .agora-input-textarea:hover:not(:focus):not(:disabled):not(:read-only)~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:1!important}.agora-input-textarea--wrapper .agora-input-textarea:-moz-read-only{cursor:not-allowed!important;--tw-border-opacity:1!important;border-color:rgb(241 243 248 / var(--tw-border-opacity))!important;--tw-bg-opacity:1!important;background-color:rgb(241 243 248 / var(--tw-bg-opacity))!important}.agora-input-textarea--wrapper .agora-input-textarea:disabled,.agora-input-textarea--wrapper .agora-input-textarea:read-only{cursor:not-allowed!important;--tw-border-opacity:1!important;border-color:rgb(241 243 248 / var(--tw-border-opacity))!important;--tw-bg-opacity:1!important;background-color:rgb(241 243 248 / var(--tw-bg-opacity))!important}.agora-input-textarea--wrapper .agora-input-textarea:-moz-read-only:focus:-moz-read-only,.agora-input-textarea--wrapper .agora-input-textarea:disabled:focus:-moz-read-only{--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important}.agora-input-textarea--wrapper .agora-input-textarea:disabled:focus:read-only,.agora-input-textarea--wrapper .agora-input-textarea:read-only:focus:read-only{--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important}.agora-input-textarea--wrapper .agora-input-textarea:-moz-read-only~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-textarea--wrapper .agora-input-textarea:disabled~.input-icon.dye-as-solid path,.agora-input-textarea--wrapper .agora-input-textarea:read-only~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-textarea--wrapper .agora-input-textarea:-moz-read-only~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-textarea--wrapper .agora-input-textarea:disabled~.input-icon.dye-as-line path,.agora-input-textarea--wrapper .agora-input-textarea:read-only~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-textarea--wrapper .agora-input-textarea.has-value{--tw-border-opacity:1;border-color:rgb(156 166 184 / var(--tw-border-opacity))}.agora-input-textarea--wrapper .agora-input-textarea:not(:focus){outline-width:0}.agora-input-textarea--wrapper .agora-input-textarea:not(:disabled):focus{--tw-border-opacity:1;border-color:rgb(3 74 216 / var(--tw-border-opacity));outline-style:solid;outline-width:2px;outline-offset:2px;outline-color:#034ad8}.agora-input-textarea--wrapper .agora-input-textarea:not(:disabled):focus~.input-icon.dye-as-solid path{stroke:transparent;fill:#034ad8!important;opacity:1!important}.agora-input-textarea--wrapper .agora-input-textarea:not(:disabled):focus~.input-icon.dye-as-line path{fill:transparent;stroke:#034ad8!important;opacity:1!important}.agora-input-textarea--wrapper.input-has-error .input-feedback path{stroke:transparent;fill:#de2d3b!important}.agora-input-textarea--wrapper.input-has-error .agora-input-textarea:not(:disabled):not(:-moz-read-only){border-width:2px!important;--tw-border-opacity:1!important;border-color:rgb(222 45 59 / var(--tw-border-opacity))!important;--tw-bg-opacity:1!important;background-color:rgb(254 241 242 / var(--tw-bg-opacity))!important}.agora-input-textarea--wrapper.input-has-error .agora-input-textarea:not(:disabled):not(:read-only){border-width:2px!important;--tw-border-opacity:1!important;border-color:rgb(222 45 59 / var(--tw-border-opacity))!important;--tw-bg-opacity:1!important;background-color:rgb(254 241 242 / var(--tw-bg-opacity))!important}

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

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

package/dist/esm/components/ui/index.d.ts

@@ -1,6 +1,8 @@
-export * from './atoms/icon';
 export * from './atoms/button';
-export * from './atoms/input_text';
+export * from './atoms/checkbox';
+export * from './atoms/icon';
 export * from './atoms/input_number';
+export * from './atoms/input_password';
+export * from './atoms/input_text';
 export * from './atoms/input_textarea';
-export * from './molecules/accordion';
+export * from './atoms/radio';

package/dist/esm/components/ui/index.js

@@ -1,9 +1,12 @@
-// Atoms
-export * from './atoms/icon';
+//  Atoms
 export * from './atoms/button';
-export * from './atoms/input_text';
+export * from './atoms/checkbox';
+export * from './atoms/icon';
 export * from './atoms/input_number';
+export * from './atoms/input_password';
+export * from './atoms/input_text';
 export * from './atoms/input_textarea';
-// Molecules
-export * from './molecules/accordion';
+export * from './atoms/radio';
+//  Molecules
+//  export * from './molecules/accordion';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,YAAY;AACZ,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,aAAa;AACb,0CAA0C"}

package/dist/esm/components/ui/molecules/accordion/accordion.scss

@@ -1,8 +1 @@
-.agora-accordion {
-  .accordion-chevron {
-    transition: transform 300ms;
-  }
-  .accordion-trigger[data-state='open'] > .accordion-chevron {
-    transform: rotate(180deg);
-  }
-}
+.agora-accordion .accordion-chevron{transition:transform .3s}.agora-accordion .accordion-trigger[data-state=open]>.accordion-chevron{transform:rotate(180deg)}

package/dist/esm/styles/globals.scss

@@ -1,29 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  p,
-  a,
-  li,
-  span,
-  em,
-  input,
-  select,
-  i,
-  optgroup,
-  option,
-  textarea,
-  div,
-  label,
-  button {
-    @apply text-text-m;
-  }
-}
-textarea,
-input[type] {
-  &::placeholder {
-    @apply text-interaction-input-text text-neutral-700;
-  }
-}
+@import url(https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap);*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}::after,::before{--tw-content:''}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Noto Sans,sans-serif;font-feature-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}a,button,div,em,i,input,label,li,optgroup,option,p,select,span,textarea{font-size:1rem;line-height:1.75rem;letter-spacing:0;font-weight:400}*,::after,::before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:576px){.container{max-width:576px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:992px){.container{max-width:992px}}@media (min-width:1200px){.container{max-width:1200px}}@media (min-width:1400px){.container{max-width:1400px}}.relative{position:relative}.my-8{margin-top:8px;margin-bottom:8px}.mb-64{margin-bottom:64px}.mb-32{margin-bottom:32px}.mb-8{margin-bottom:8px}.mt-8{margin-top:8px}.mr-8{margin-right:8px}.ml-16{margin-left:16px}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.w-full{width:100%}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.rounded-4{border-radius:4px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-neutral-300{--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity))}.bg-neutral-100{--tw-bg-opacity:1;background-color:rgb(241 243 248 / var(--tw-bg-opacity))}.bg-primary-900{--tw-bg-opacity:1;background-color:rgb(2 28 81 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-16{padding:16px}.p-8{padding:8px}.p-32{padding:32px}.px-32{padding-left:32px;padding-right:32px}.pl-8{padding-left:8px}.pl-16{padding-left:16px}.pb-32{padding-bottom:32px}.text-center{text-align:center}.text-headings-lg-strong{font-size:2.5rem;line-height:3.75rem;letter-spacing:0;font-weight:700}.text-type-specs-source-code{font-size:1.125rem;line-height:1.625rem;letter-spacing:0;font-weight:600}.text-headings-l-strong{font-size:1.135rem;line-height:2rem;letter-spacing:0;font-weight:700}.text-text-m{font-size:1rem;line-height:1.75rem;letter-spacing:0;font-weight:400}.text-interaction-input-label{font-size:1rem;line-height:1.25rem;letter-spacing:0;font-weight:500}.text-type-specs-caption{font-size:.875rem;line-height:1.125rem;letter-spacing:0;font-weight:400}.text-interaction-button-l{font-size:1.125rem;line-height:1.375rem;letter-spacing:0;font-weight:500}.text-primary-600{--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity))}.text-primary-900{--tw-text-opacity:1;color:rgb(2 28 81 / var(--tw-text-opacity))}.text-neutral-700{--tw-text-opacity:1;color:rgb(100 113 139 / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}input[type]::-moz-placeholder,textarea::-moz-placeholder{font-size:1rem;line-height:1.25rem;letter-spacing:0;font-weight:400;--tw-text-opacity:1;color:rgb(100 113 139 / var(--tw-text-opacity))}input[type]::placeholder,textarea::placeholder{font-size:1rem;line-height:1.25rem;letter-spacing:0;font-weight:400;--tw-text-opacity:1;color:rgb(100 113 139 / var(--tw-text-opacity))}.hover\:bg-primary-100:hover{--tw-bg-opacity:1;background-color:rgb(242 246 255 / var(--tw-bg-opacity))}@media (min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

package/dist/styles/globals.css

@@ -0,0 +1 @@
+@import url(https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap);*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}::after,::before{--tw-content:''}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Noto Sans,sans-serif;font-feature-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}a,button,div,em,i,input,label,li,optgroup,option,p,select,span,textarea{font-size:1rem;line-height:1.75rem;letter-spacing:0;font-weight:400}*,::after,::before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:576px){.container{max-width:576px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:992px){.container{max-width:992px}}@media (min-width:1200px){.container{max-width:1200px}}@media (min-width:1400px){.container{max-width:1400px}}.relative{position:relative}.my-8{margin-top:8px;margin-bottom:8px}.mb-64{margin-bottom:64px}.mb-32{margin-bottom:32px}.mb-8{margin-bottom:8px}.mt-8{margin-top:8px}.mr-8{margin-right:8px}.ml-16{margin-left:16px}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.w-full{width:100%}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.rounded-4{border-radius:4px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-neutral-300{--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity))}.bg-neutral-100{--tw-bg-opacity:1;background-color:rgb(241 243 248 / var(--tw-bg-opacity))}.bg-primary-900{--tw-bg-opacity:1;background-color:rgb(2 28 81 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-16{padding:16px}.p-8{padding:8px}.p-32{padding:32px}.px-32{padding-left:32px;padding-right:32px}.pl-8{padding-left:8px}.pl-16{padding-left:16px}.pb-32{padding-bottom:32px}.text-center{text-align:center}.text-headings-lg-strong{font-size:2.5rem;line-height:3.75rem;letter-spacing:0;font-weight:700}.text-type-specs-source-code{font-size:1.125rem;line-height:1.625rem;letter-spacing:0;font-weight:600}.text-headings-l-strong{font-size:1.135rem;line-height:2rem;letter-spacing:0;font-weight:700}.text-text-m{font-size:1rem;line-height:1.75rem;letter-spacing:0;font-weight:400}.text-interaction-input-label{font-size:1rem;line-height:1.25rem;letter-spacing:0;font-weight:500}.text-type-specs-caption{font-size:.875rem;line-height:1.125rem;letter-spacing:0;font-weight:400}.text-interaction-button-l{font-size:1.125rem;line-height:1.375rem;letter-spacing:0;font-weight:500}.text-primary-600{--tw-text-opacity:1;color:rgb(3 74 216 / var(--tw-text-opacity))}.text-primary-900{--tw-text-opacity:1;color:rgb(2 28 81 / var(--tw-text-opacity))}.text-neutral-700{--tw-text-opacity:1;color:rgb(100 113 139 / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}input[type]::-moz-placeholder,textarea::-moz-placeholder{font-size:1rem;line-height:1.25rem;letter-spacing:0;font-weight:400;--tw-text-opacity:1;color:rgb(100 113 139 / var(--tw-text-opacity))}input[type]::placeholder,textarea::placeholder{font-size:1rem;line-height:1.25rem;letter-spacing:0;font-weight:400;--tw-text-opacity:1;color:rgb(100 113 139 / var(--tw-text-opacity))}.hover\:bg-primary-100:hover{--tw-bg-opacity:1;background-color:rgb(242 246 255 / var(--tw-bg-opacity))}@media (min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ama-pt/agora-design-system",
   "description": "Ágora Design system",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "dist/cjs/components/index.js",
   "module": "dist/esm/components/index.js",
   "files": [
@@ -14,14 +14,11 @@
     "lint:fix": "eslint --fix ./**/*.{js,jsx,ts,tsx,json}",
     "format": "prettier --write ./**/*.{js,jsx,ts,tsx,css,scss,mdx,md,json} --config ./.prettierrc",
     "clean": "gulp clean",
-    "minify-css": "gulp minify-css",
     "copy-assets": "gulp assets",
-    "copy-component-styles": "gulp components",
-    "copy-global-styles": "gulp scss",
-    "build:tailwind": "npx tailwindcss-cli build -i src/styles/globals.scss -o dist/css/index.css",
+    "build:css": "gulp css-components&& gulp css-rename && gulp css-globals",
     "build:esm": "tsc",
     "build:cjs": "tsc --module CommonJS --outDir dist/cjs/components",
-    "build": "npm run clean && npm run build:esm && npm run build:cjs && npm run build:tailwind --yes && npm run minify-css && npm run copy-assets && npm run copy-component-styles && npm run copy-global-styles"
+    "build": "npm run clean && npm run copy-assets && npm run build:css && npm run build:esm && npm run build:cjs"
   },
   "dependencies": {
     "@babel/core": "^7.18.10",
@@ -31,6 +28,8 @@
     "@radix-ui/react-accordion": "^1.0.1",
     "babel-loader": "^8.2.5",
     "classnames": "^2.3.2",
+    "gulp-postcss": "^9.0.1",
+    "gulp-sass": "^5.1.0",
     "next-transpile-modules": "^10.0.0",
     "raw-loader": "^4.0.2",
     "sass": "^1.56.2",
@@ -77,8 +76,7 @@
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-clean-css": "^4.3.0",
-    "gulp-concat-util": "^0.5.5",
-    "gulp-sourcemaps": "^3.0.0",
+    "gulp-rename": "^2.0.0",
     "gulp-touch-cmd": "^0.0.1",
     "next": "^13.0.4",
     "postcss": "^8.4.19",
@@ -108,7 +106,7 @@
     "react": "^18.2.0"
   },
   "author": {
-    "name": "TicApp"
+    "name": "AMA"
   },
   "license": "MIT"
 }