@ama-pt/agora-design-system 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/atoms/button/button.scss +1 -1
- package/dist/components/ui/atoms/checkbox/checkbox.js +1 -1
- package/dist/components/ui/atoms/icon/icon.scss +1 -1
- package/dist/components/ui/atoms/input_number/input_number.js +11 -9
- package/dist/components/ui/atoms/input_number/input_number.scss +1 -1
- package/dist/components/ui/atoms/input_password/input_password.js +9 -7
- package/dist/components/ui/atoms/input_password/input_password.scss +1 -1
- package/dist/components/ui/atoms/input_text/input_text.js +9 -7
- package/dist/components/ui/atoms/input_text/input_text.scss +1 -1
- package/dist/components/ui/atoms/input_textarea/input_textarea.js +9 -7
- package/dist/components/ui/atoms/input_textarea/input_textarea.scss +1 -1
- package/dist/components/ui/atoms/radio/radio.js +1 -1
- package/dist/components/ui/index.js +1 -1
- package/dist/components/ui/molecules/accordion/accordion.js +1 -1
- package/dist/components/ui/molecules/dropdown-list/contexts/AgoraDropdownListContext.context.js +2 -0
- package/dist/components/ui/molecules/dropdown-list/dropdown-list-section.js +36 -0
- package/dist/components/ui/molecules/dropdown-list/dropdown-list.js +377 -0
- package/dist/components/ui/molecules/dropdown-list/dropdown-list.scss +1 -0
- package/dist/components/ui/molecules/dropdown-list/index.js +2 -0
- package/dist/components/ui/molecules/dropdown-list/models/AgoraDropdownListContextType.type.js +1 -0
- package/dist/components/ui/molecules/dropdown-list/models/IChangedOption.interface.js +1 -0
- package/dist/components/ui/molecules/dropdown-list/models/IDropdownOptionProps.interface.js +1 -0
- package/dist/components/ui/molecules/dropdown-list/option-items/dropdown-list-checkbox-option.js +42 -0
- package/dist/components/ui/molecules/dropdown-list/option-items/dropdown-list-radio-option.js +40 -0
- package/dist/components/ui/molecules/dropdown-list/option-items/dropdown-list-text-option.js +47 -0
- package/dist/styles/globals.css +1 -1
- package/dist/styles/globals.scss +1 -1
- package/dist/types/index.d.ts +140 -20
- package/package.json +1 -1
|
@@ -1 +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.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}
|
|
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}
|
|
@@ -37,7 +37,7 @@ export const Checkbox = (_a) => {
|
|
|
37
37
|
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)),
|
|
38
38
|
React.createElement("span", { className: "checkbox-span" },
|
|
39
39
|
React.createElement(Icon, { icon: "agora-line-tick", ariaHidden: true })),
|
|
40
|
-
React.createElement("label", { className: "checkbox-label text-
|
|
40
|
+
React.createElement("label", { className: "checkbox-label text-m-regular", htmlFor: id },
|
|
41
41
|
React.createElement("span", null, children || label))));
|
|
42
42
|
};
|
|
43
43
|
export default Checkbox;
|
|
@@ -1 +1 @@
|
|
|
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}}.icon svg{fill:#000}.\!icon svg{fill:#000!important}.icon.icon-xs{width:16px;height:16px}.\!icon.icon-xs{width:16px!important;height:16px!important}.icon.icon-s{width:20px;height:20px}.\!icon.icon-s{width:20px!important;height:20px!important}.icon.icon-m{width:24px;height:24px}.\!icon.icon-m{width:24px!important;height:24px!important}.icon.icon-l{width:32px;height:32px}.\!icon.icon-l{width:32px!important;height:32px!important}.icon.icon-xl{width:40px;height:40px}.\!icon.icon-xl{width:40px!important;height:40px!important}.icon.icon-xxl{width:58px;height:58px}.\!icon.icon-xxl{width:58px!important;height:58px!important}.icon.icon-xxxl{width:64px;height:64px}.\!icon.icon-xxxl{width:64px!important;height:64px!important}.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-
|
|
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}}.icon svg{fill:#000}.\!icon svg{fill:#000!important}.icon.icon-xs{width:16px;height:16px}.\!icon.icon-xs{width:16px!important;height:16px!important}.icon.icon-s{width:20px;height:20px}.\!icon.icon-s{width:20px!important;height:20px!important}.icon.icon-m{width:24px;height:24px}.\!icon.icon-m{width:24px!important;height:24px!important}.icon.icon-l{width:32px;height:32px}.\!icon.icon-l{width:32px!important;height:32px!important}.icon.icon-xl{width:40px;height:40px}.\!icon.icon-xl{width:40px!important;height:40px!important}.icon.icon-xxl{width:58px;height:58px}.\!icon.icon-xxl{width:58px!important;height:58px!important}.icon.icon-xxxl{width:64px;height:64px}.\!icon.icon-xxxl{width:64px!important;height:64px!important}.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-3xl-bold{font-size:2.5rem;line-height:3.75rem;letter-spacing:0;font-weight:700}.text-l-semibold{font-size:1.25rem;line-height:2rem;letter-spacing:0;font-weight:600}.text-m-regular{font-size:1rem;line-height:1.75rem;letter-spacing:0;font-weight:400}.text-m-medium{font-size:1rem;line-height:1.75rem;letter-spacing:0;font-weight:500}.text-s-regular{font-size:.875rem;line-height:1.5rem;letter-spacing:0;font-weight:400}.text-m-bold{font-size:1rem;line-height:1.75rem;letter-spacing:0;font-weight:700}.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.75rem;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.75rem;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))}}
|
|
@@ -15,11 +15,12 @@ import { stringToBoolean } from '../../../utils';
|
|
|
15
15
|
import { Icon } from '../icon';
|
|
16
16
|
import './input_number.scss';
|
|
17
17
|
export const InputNumber = (_a) => {
|
|
18
|
-
var
|
|
18
|
+
var _b, _c, _d;
|
|
19
|
+
var { label = 'Input Label', ariaLabel, hideLabel, hasError, maxChars = -1, increaseButtonAltText, decreaseButtonAltText, showCharCounter, disabled, readOnly, feedbackText, feedbackState = 'info', leadingIcon, className = '', isOptional, id } = _a, props = __rest(_a, ["label", "ariaLabel", "hideLabel", "hasError", "maxChars", "increaseButtonAltText", "decreaseButtonAltText", "showCharCounter", "disabled", "readOnly", "feedbackText", "feedbackState", "leadingIcon", "className", "isOptional", "id"]);
|
|
19
20
|
const propsClone = Object.assign({}, props);
|
|
20
21
|
const { onChange, min, max } = propsClone;
|
|
21
22
|
const inputRef = useRef(null);
|
|
22
|
-
const [currentValue, setCurrentValue] = useState(
|
|
23
|
+
const [currentValue, setCurrentValue] = useState((_b = propsClone.value) !== null && _b !== void 0 ? _b : '');
|
|
23
24
|
/**
|
|
24
25
|
* Local onChange event handler. This functions enforces the max char limit.
|
|
25
26
|
* @param evt Event
|
|
@@ -63,7 +64,7 @@ export const InputNumber = (_a) => {
|
|
|
63
64
|
// text input component classes
|
|
64
65
|
inputClasses: classNames('agora-input-number', 'flex-1', {
|
|
65
66
|
'has-leading-icon': leadingIcon && leadingIcon.indexOf('agora-line') === 0,
|
|
66
|
-
'has-value': currentValue && currentValue.length > 0
|
|
67
|
+
'has-value': currentValue && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.toString().length) > 0
|
|
67
68
|
}, className),
|
|
68
69
|
leadigIconWrapperClasses: classNames('input-icon', 'input-leading--icon', {
|
|
69
70
|
'dye-as-solid': (leadingIcon === null || leadingIcon === void 0 ? void 0 : leadingIcon.indexOf('agora-solid')) === 0,
|
|
@@ -111,26 +112,27 @@ export const InputNumber = (_a) => {
|
|
|
111
112
|
else {
|
|
112
113
|
propsClone.required = true;
|
|
113
114
|
}
|
|
115
|
+
delete propsClone.value;
|
|
114
116
|
return (React.createElement("div", { className: inputWrapperClasses },
|
|
115
117
|
React.createElement("div", { className: labelSectionClasses },
|
|
116
|
-
React.createElement("label", { hidden: hideLabel && hideLabel !== 'true', htmlFor: id, className: "text-primary-900 text-
|
|
118
|
+
React.createElement("label", { hidden: hideLabel && hideLabel !== 'true', htmlFor: id, className: "text-primary-900 text-m-medium" }, label)),
|
|
117
119
|
React.createElement("div", { className: "input-wrapper flex relative items-center" },
|
|
118
120
|
React.createElement("input", Object.assign({ type: "number", id: id, value: currentValue, className: inputClasses, disabled: disabled, readOnly: readOnly, "aria-invalid": stringToBoolean(hasError), "aria-label": ariaLabel || label, "aria-required": !stringToBoolean(isOptional), ref: inputRef, onChange: handleChangeEvent }, propsClone)),
|
|
119
121
|
leadingIcon && leadingIcon.indexOf('agora-line') === 0 && (React.createElement("div", { className: leadigIconWrapperClasses },
|
|
120
122
|
React.createElement(Icon, { icon: leadingIcon, ariaHidden: true }))),
|
|
121
123
|
React.createElement("div", { className: "input-number-controls", onFocus: () => null, onMouseOver: () => handleMouseHouvering(true), onMouseLeave: () => handleMouseHouvering(false) },
|
|
122
|
-
React.createElement("button", { disabled: min === parseFloat(currentValue !== null &&
|
|
124
|
+
React.createElement("button", { disabled: min === parseFloat((_c = currentValue === null || currentValue === void 0 ? void 0 : currentValue.toString()) !== null && _c !== void 0 ? _c : '0') || disabled || readOnly, type: "button", onClick: handleStepDown, "aria-label": decreaseButtonAltText },
|
|
123
125
|
React.createElement(Icon, { icon: "agora-line-minus-circle", ariaHidden: true, className: "icon-step icon-step--default" }),
|
|
124
126
|
React.createElement(Icon, { icon: "agora-solid-minus-circle", ariaHidden: true, className: "icon-step icon-step--hover" })),
|
|
125
|
-
React.createElement("button", { disabled: max === parseFloat(currentValue !== null &&
|
|
127
|
+
React.createElement("button", { disabled: max === parseFloat((_d = currentValue === null || currentValue === void 0 ? void 0 : currentValue.toString()) !== null && _d !== void 0 ? _d : '0') || disabled || readOnly, type: "button", onClick: handleStepUp, "aria-label": increaseButtonAltText },
|
|
126
128
|
React.createElement(Icon, { icon: "agora-line-plus-circle", ariaHidden: true, className: "icon-step icon-step--default" }),
|
|
127
129
|
React.createElement(Icon, { icon: "agora-solid-plus-circle", ariaHidden: true, className: "icon-step icon-step--hover" })))),
|
|
128
130
|
React.createElement("div", { className: "flex items-center justify-between" },
|
|
129
131
|
React.createElement("div", { className: "flex items-center input-feedback mt-8" },
|
|
130
132
|
feedbackText && (React.createElement("span", { className: `mr-8 feedback-icon-wrapper feedback-icon-wrapper--${feedbackState}` }, !hasError ? (React.createElement(Icon, { icon: feedbackStateIconsMap[feedbackState], size: "s", alt: feedbackText })) : (React.createElement(Icon, { icon: "agora-solid-danger", size: "s", alt: feedbackText })))),
|
|
131
|
-
React.createElement("p", { className: "text-
|
|
132
|
-
stringToBoolean(showCharCounter) && (React.createElement("div", { className: "text-
|
|
133
|
-
currentValue.length,
|
|
133
|
+
React.createElement("p", { className: "text-s-regular text-neutral-700" }, feedbackText)),
|
|
134
|
+
stringToBoolean(showCharCounter) && (React.createElement("div", { className: "text-s-regular text-neutral-700 mt-8 pl-16" }, currentValue === null || currentValue === void 0 ? void 0 :
|
|
135
|
+
currentValue.toString().length,
|
|
134
136
|
" ",
|
|
135
137
|
maxChars !== -1 ? `/${maxChars}` : '')))));
|
|
136
138
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.agora-input-number-wrapper{position:relative;display:flex;flex-direction:column}.agora-input-number-wrapper .input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-number-wrapper .input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-number-wrapper span.hint-icon-wrapper svg path{stroke:transparent;fill:#0079bf}.agora-input-number-wrapper .feedback-icon-wrapper--info path{stroke:transparent;fill:#0079bf}.agora-input-number-wrapper .feedback-icon-wrapper--success path{stroke:transparent;fill:#008558}.agora-input-number-wrapper .feedback-icon-wrapper--danger path{stroke:transparent;fill:#de2d3b}.agora-input-number-wrapper .feedback-icon-wrapper--warning path{stroke:transparent;fill:#f2a222}.agora-input-number-wrapper .input-leading--icon{position:absolute;right:0;bottom:24px;left:16px;width:-moz-min-content;width:min-content;top:18px}.agora-input-number-wrapper .input-number-controls{width:96px;position:absolute;right:8px;display:flex;height:56px;align-items:center;justify-content:space-between;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.agora-input-number-wrapper .input-number-controls::before{content:"";position:absolute;height:24px;--tw-bg-opacity:1;background-color:rgb(225 228 234 / var(--tw-bg-opacity));left:47px;width:2px}.agora-input-number-wrapper .input-number-controls button{display:flex;align-items:center;justify-content:center;width:44px;height:44px}.agora-input-number-wrapper .input-number-controls button svg{pointer-events:none;position:absolute;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.agora-input-number-wrapper .input-number-controls button svg.icon-step--hover{--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));fill:#034ad8;opacity:0}.agora-input-number-wrapper .input-number-controls button svg.icon-step--default{stroke:#034ad8;opacity:1}.agora-input-number-wrapper .input-number-controls button:not(:disabled):active svg{--tw-scale-x:.95;--tw-scale-y:.95;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))}.agora-input-number-wrapper .input-number-controls button:not(:disabled):hover svg{pointer-events:none;position:absolute;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.agora-input-number-wrapper .input-number-controls button:not(:disabled):hover svg.icon-step--hover{--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}.agora-input-number-wrapper .input-number-controls button:not(:disabled):hover svg.icon-step--default{--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}.agora-input-number-wrapper .input-number-controls button:disabled{cursor:not-allowed;opacity:.5}.agora-input-number-wrapper.is-hovered input:not(:disabled):not(:-moz-read-only):not(:focus){border-width:2px;--tw-border-opacity:1;border-color:rgb(71 81 100 / var(--tw-border-opacity))}.agora-input-number-wrapper.is-hovered input:not(:disabled):not(:read-only):not(:focus){border-width:2px;--tw-border-opacity:1;border-color:rgb(71 81 100 / var(--tw-border-opacity))}.agora-input-number-wrapper .agora-input-number{width:100%;border-radius:4px;border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));padding-left: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);height:60px;padding-right:100px;-moz-appearance:textfield}.agora-input-number-wrapper .agora-input-number::-webkit-inner-spin-button,.agora-input-number-wrapper .agora-input-number::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.agora-input-number-wrapper .agora-input-number.has-leading-icon{padding-left:56px}.agora-input-number-wrapper .agora-input-number~div button:focus,.agora-input-number-wrapper .agora-input-number~div button:focus-visible{border-radius:4px!important;border-width:2px!important;--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important;outline:2px solid transparent!important;outline-offset:2px!important}.agora-input-number-wrapper .agora-input-number: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-number-wrapper .agora-input-number:hover:not(:focus):not(:disabled):not(:read-only){--tw-border-opacity:1;border-color:rgb(71 81 100 / var(--tw-border-opacity))}.agora-input-number-wrapper .agora-input-number: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-number-wrapper .agora-input-number:hover:not(:focus):not(:disabled):not(:read-only)~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:1!important}.agora-input-number-wrapper .agora-input-number: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-number-wrapper .agora-input-number:hover:not(:focus):not(:disabled):not(:read-only)~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:1!important}.agora-input-number-wrapper .agora-input-number:-moz-read-only~.input-number-controls{pointer-events:none;background-color:transparent}.agora-input-number-wrapper .agora-input-number:disabled~.input-number-controls,.agora-input-number-wrapper .agora-input-number:read-only~.input-number-controls{pointer-events:none;background-color:transparent}.agora-input-number-wrapper .agora-input-number:-moz-read-only~.input-number-controls button svg path{stroke:transparent;stroke:#2b363c!important;opacity:.5!important}.agora-input-number-wrapper .agora-input-number:disabled~.input-number-controls button svg path,.agora-input-number-wrapper .agora-input-number:read-only~.input-number-controls button svg path{stroke:transparent;stroke:#2b363c!important;opacity:.5!important}.agora-input-number-wrapper .agora-input-number:-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-number-wrapper .agora-input-number:disabled,.agora-input-number-wrapper .agora-input-number: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-number-wrapper .agora-input-number:-moz-read-only:focus:-moz-read-only,.agora-input-number-wrapper .agora-input-number:disabled:focus:-moz-read-only{--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important}.agora-input-number-wrapper .agora-input-number:disabled:focus:read-only,.agora-input-number-wrapper .agora-input-number:read-only:focus:read-only{--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important}.agora-input-number-wrapper .agora-input-number:-moz-read-only~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-number-wrapper .agora-input-number:disabled~.input-icon.dye-as-solid path,.agora-input-number-wrapper .agora-input-number:read-only~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-number-wrapper .agora-input-number:-moz-read-only~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-number-wrapper .agora-input-number:disabled~.input-icon.dye-as-line path,.agora-input-number-wrapper .agora-input-number:read-only~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-number-wrapper .agora-input-number.has-value:not(:-moz-read-only){--tw-border-opacity:1;border-color:rgb(156 166 184 / var(--tw-border-opacity))}.agora-input-number-wrapper .agora-input-number.has-value:not(:read-only){--tw-border-opacity:1;border-color:rgb(156 166 184 / var(--tw-border-opacity))}.agora-input-number-wrapper .agora-input-number:not(:focus){outline-width:0}.agora-input-number-wrapper .agora-input-number: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-number-wrapper .agora-input-number:not(:disabled):focus~.input-icon.dye-as-solid path{stroke:transparent;fill:#034ad8!important;opacity:1!important}.agora-input-number-wrapper .agora-input-number:not(:disabled):focus~.input-icon.dye-as-line path{fill:transparent;stroke:#034ad8!important;opacity:1!important}.agora-input-number-wrapper.input-has-error .input-feedback path{stroke:transparent;fill:#de2d3b!important}.agora-input-number-wrapper.input-has-error .input-number-controls{--tw-bg-opacity:1;background-color:rgb(254 241 242 / var(--tw-bg-opacity))}.agora-input-number-wrapper.input-has-error .input-number-controls button svg.icon-step--default path{fill:transparent;stroke:#2b363c!important}.agora-input-number-wrapper.input-has-error .input-number-controls button svg.icon-step--hover path{stroke:transparent;fill:#2b363c!important}.agora-input-number-wrapper.input-has-error .agora-input-number:not(:disabled):not(:-moz-read-only){--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-number-wrapper.input-has-error .agora-input-number:not(:disabled):not(:read-only){--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}
|
|
1
|
+
.agora-input-number-wrapper{position:relative;display:flex;flex-direction:column}.agora-input-number-wrapper .input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-number-wrapper .input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-number-wrapper span.hint-icon-wrapper svg path{stroke:transparent;fill:#0079bf}.agora-input-number-wrapper .feedback-icon-wrapper--info path{stroke:transparent;fill:#0079bf}.agora-input-number-wrapper .feedback-icon-wrapper--success path{stroke:transparent;fill:#008558}.agora-input-number-wrapper .feedback-icon-wrapper--danger path{stroke:transparent;fill:#de2d3b}.agora-input-number-wrapper .feedback-icon-wrapper--warning path{stroke:transparent;fill:#f2a222}.agora-input-number-wrapper .input-leading--icon{position:absolute;right:0;bottom:24px;left:16px;width:-moz-min-content;width:min-content;top:18px}.agora-input-number-wrapper .input-number-controls{width:96px;position:absolute;right:8px;display:flex;height:56px;align-items:center;justify-content:space-between;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.agora-input-number-wrapper .input-number-controls::before{content:"";position:absolute;height:24px;--tw-bg-opacity:1;background-color:rgb(225 228 234 / var(--tw-bg-opacity));left:47px;width:2px}.agora-input-number-wrapper .input-number-controls button{display:flex;align-items:center;justify-content:center;width:44px;height:44px}.agora-input-number-wrapper .input-number-controls button svg{pointer-events:none;position:absolute;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.agora-input-number-wrapper .input-number-controls button svg.icon-step--hover{--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));fill:#034ad8;opacity:0}.agora-input-number-wrapper .input-number-controls button svg.icon-step--default{stroke:#034ad8;opacity:1}.agora-input-number-wrapper .input-number-controls button:not(:disabled):active svg{--tw-scale-x:.95;--tw-scale-y:.95;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))}.agora-input-number-wrapper .input-number-controls button:not(:disabled):hover svg{pointer-events:none;position:absolute;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.agora-input-number-wrapper .input-number-controls button:not(:disabled):hover svg.icon-step--hover{--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}.agora-input-number-wrapper .input-number-controls button:not(:disabled):hover svg.icon-step--default{--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}.agora-input-number-wrapper .input-number-controls button:disabled{cursor:not-allowed;opacity:.5}.agora-input-number-wrapper.is-hovered input:not(:disabled):not(:-moz-read-only):not(:focus){border-width:2px;--tw-border-opacity:1;border-color:rgb(71 81 100 / var(--tw-border-opacity))}.agora-input-number-wrapper.is-hovered input:not(:disabled):not(:read-only):not(:focus){border-width:2px;--tw-border-opacity:1;border-color:rgb(71 81 100 / var(--tw-border-opacity))}.agora-input-number-wrapper .agora-input-number{width:100%;border-radius:4px;border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));padding-left:16px;font-size:1rem;line-height:1.75rem;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);height:60px;padding-right:100px;-moz-appearance:textfield}.agora-input-number-wrapper .agora-input-number::-webkit-inner-spin-button,.agora-input-number-wrapper .agora-input-number::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.agora-input-number-wrapper .agora-input-number.has-leading-icon{padding-left:56px}.agora-input-number-wrapper .agora-input-number~div button:focus,.agora-input-number-wrapper .agora-input-number~div button:focus-visible{border-radius:4px!important;border-width:2px!important;--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important;outline:2px solid transparent!important;outline-offset:2px!important}.agora-input-number-wrapper .agora-input-number: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-number-wrapper .agora-input-number:hover:not(:focus):not(:disabled):not(:read-only){--tw-border-opacity:1;border-color:rgb(71 81 100 / var(--tw-border-opacity))}.agora-input-number-wrapper .agora-input-number: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-number-wrapper .agora-input-number:hover:not(:focus):not(:disabled):not(:read-only)~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:1!important}.agora-input-number-wrapper .agora-input-number: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-number-wrapper .agora-input-number:hover:not(:focus):not(:disabled):not(:read-only)~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:1!important}.agora-input-number-wrapper .agora-input-number:-moz-read-only~.input-number-controls{pointer-events:none;background-color:transparent}.agora-input-number-wrapper .agora-input-number:disabled~.input-number-controls,.agora-input-number-wrapper .agora-input-number:read-only~.input-number-controls{pointer-events:none;background-color:transparent}.agora-input-number-wrapper .agora-input-number:-moz-read-only~.input-number-controls button svg path{stroke:transparent;stroke:#2b363c!important;opacity:.5!important}.agora-input-number-wrapper .agora-input-number:disabled~.input-number-controls button svg path,.agora-input-number-wrapper .agora-input-number:read-only~.input-number-controls button svg path{stroke:transparent;stroke:#2b363c!important;opacity:.5!important}.agora-input-number-wrapper .agora-input-number:-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-number-wrapper .agora-input-number:disabled,.agora-input-number-wrapper .agora-input-number: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-number-wrapper .agora-input-number:-moz-read-only:focus:-moz-read-only,.agora-input-number-wrapper .agora-input-number:disabled:focus:-moz-read-only{--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important}.agora-input-number-wrapper .agora-input-number:disabled:focus:read-only,.agora-input-number-wrapper .agora-input-number:read-only:focus:read-only{--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important}.agora-input-number-wrapper .agora-input-number:-moz-read-only~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-number-wrapper .agora-input-number:disabled~.input-icon.dye-as-solid path,.agora-input-number-wrapper .agora-input-number:read-only~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-number-wrapper .agora-input-number:-moz-read-only~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-number-wrapper .agora-input-number:disabled~.input-icon.dye-as-line path,.agora-input-number-wrapper .agora-input-number:read-only~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-number-wrapper .agora-input-number.has-value:not(:-moz-read-only){--tw-border-opacity:1;border-color:rgb(156 166 184 / var(--tw-border-opacity))}.agora-input-number-wrapper .agora-input-number.has-value:not(:read-only){--tw-border-opacity:1;border-color:rgb(156 166 184 / var(--tw-border-opacity))}.agora-input-number-wrapper .agora-input-number:not(:focus){outline-width:0}.agora-input-number-wrapper .agora-input-number: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-number-wrapper .agora-input-number:not(:disabled):focus~.input-icon.dye-as-solid path{stroke:transparent;fill:#034ad8!important;opacity:1!important}.agora-input-number-wrapper .agora-input-number:not(:disabled):focus~.input-icon.dye-as-line path{fill:transparent;stroke:#034ad8!important;opacity:1!important}.agora-input-number-wrapper.input-has-error .input-feedback path{stroke:transparent;fill:#de2d3b!important}.agora-input-number-wrapper.input-has-error .input-number-controls{--tw-bg-opacity:1;background-color:rgb(254 241 242 / var(--tw-bg-opacity))}.agora-input-number-wrapper.input-has-error .input-number-controls button svg.icon-step--default path{fill:transparent;stroke:#2b363c!important}.agora-input-number-wrapper.input-has-error .input-number-controls button svg.icon-step--hover path{stroke:transparent;fill:#2b363c!important}.agora-input-number-wrapper.input-has-error .agora-input-number:not(:disabled):not(:-moz-read-only){--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-number-wrapper.input-has-error .agora-input-number:not(:disabled):not(:read-only){--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}
|
|
@@ -15,12 +15,13 @@ import { stringToBoolean } from '../../../utils';
|
|
|
15
15
|
import { Icon } from '../icon';
|
|
16
16
|
import './input_password.scss';
|
|
17
17
|
export const InputPassword = (_a) => {
|
|
18
|
-
var
|
|
18
|
+
var _b;
|
|
19
|
+
var { label = 'Input Label', ariaLabel, hideLabel, hasError, maxChars = -1, showCharCounter, disabled, readOnly, feedbackText, feedbackState = 'info', leadingIcon, togglePasswordAltIconText = '', className = '', isOptional, id } = _a, props = __rest(_a, ["label", "ariaLabel", "hideLabel", "hasError", "maxChars", "showCharCounter", "disabled", "readOnly", "feedbackText", "feedbackState", "leadingIcon", "togglePasswordAltIconText", "className", "isOptional", "id"]);
|
|
19
20
|
const propsClone = Object.assign({}, props);
|
|
20
21
|
const { onChange } = propsClone;
|
|
21
22
|
const inputRef = useRef(null);
|
|
22
23
|
const [showPassword, setShowPassword] = useState(false);
|
|
23
|
-
const [currentValue, setCurrentValue] = useState(
|
|
24
|
+
const [currentValue, setCurrentValue] = useState((_b = propsClone.value) !== null && _b !== void 0 ? _b : '');
|
|
24
25
|
/**
|
|
25
26
|
* Show/Hide password
|
|
26
27
|
* @param evt Event
|
|
@@ -73,7 +74,7 @@ export const InputPassword = (_a) => {
|
|
|
73
74
|
// text input component classes
|
|
74
75
|
inputClasses: classNames('agora-input-password', 'flex-1', {
|
|
75
76
|
'has-leading-icon': leadingIcon && leadingIcon.indexOf('agora-line') === 0,
|
|
76
|
-
'has-value': currentValue.length > 0
|
|
77
|
+
'has-value': currentValue && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.toString().length) > 0
|
|
77
78
|
}, className),
|
|
78
79
|
leadigIconWrapperClasses: classNames('input-icon', 'input-leading--icon', {
|
|
79
80
|
'dye-as-solid': (leadingIcon === null || leadingIcon === void 0 ? void 0 : leadingIcon.indexOf('agora-solid')) === 0,
|
|
@@ -88,9 +89,10 @@ export const InputPassword = (_a) => {
|
|
|
88
89
|
else {
|
|
89
90
|
propsClone.required = true;
|
|
90
91
|
}
|
|
92
|
+
delete propsClone.value;
|
|
91
93
|
return (React.createElement("div", { className: inputWrapperClasses },
|
|
92
94
|
React.createElement("div", { className: labelSectionClasses },
|
|
93
|
-
React.createElement("label", { hidden: stringToBoolean(hideLabel), htmlFor: id, className: "text-primary-900 text-
|
|
95
|
+
React.createElement("label", { hidden: stringToBoolean(hideLabel), htmlFor: id, className: "text-primary-900 text-m-medium" }, label)),
|
|
94
96
|
React.createElement("div", { className: "input-wrapper flex relative items-center" },
|
|
95
97
|
React.createElement("input", Object.assign({ type: showPassword ? 'text' : 'password', id: id, value: currentValue, className: inputClasses, disabled: disabled, readOnly: readOnly, "aria-invalid": stringToBoolean(hasError), "aria-label": ariaLabel || label, "aria-required": !stringToBoolean(isOptional), ref: inputRef, onChange: handleChangeEvent }, propsClone)),
|
|
96
98
|
leadingIcon && leadingIcon.indexOf('agora-line') === 0 && (React.createElement("div", { className: leadigIconWrapperClasses },
|
|
@@ -100,9 +102,9 @@ export const InputPassword = (_a) => {
|
|
|
100
102
|
React.createElement("div", { className: "flex items-center justify-between" },
|
|
101
103
|
React.createElement("div", { className: "flex items-center input-feedback mt-8" },
|
|
102
104
|
feedbackText && (React.createElement("span", { className: `mr-8 feedback-icon-wrapper feedback-icon-wrapper--${feedbackState}` }, !stringToBoolean(hasError) ? (React.createElement(Icon, { icon: feedbackStateIconsMap[feedbackState], size: "s", alt: feedbackText })) : (React.createElement(Icon, { icon: "agora-solid-danger", size: "s", alt: feedbackText })))),
|
|
103
|
-
React.createElement("p", { className: "text-
|
|
104
|
-
stringToBoolean(showCharCounter) && (React.createElement("div", { className: "text-
|
|
105
|
-
currentValue.length,
|
|
105
|
+
React.createElement("p", { className: "text-s-regular text-neutral-700" }, feedbackText)),
|
|
106
|
+
stringToBoolean(showCharCounter) && (React.createElement("div", { className: "text-s-regular text-neutral-700 mt-8 pl-16" }, currentValue === null || currentValue === void 0 ? void 0 :
|
|
107
|
+
currentValue.toString().length,
|
|
106
108
|
" ",
|
|
107
109
|
maxChars !== -1 ? `/${maxChars}` : '')))));
|
|
108
110
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.agora-input-password--wrapper{position:relative;display:flex;flex-direction:column}.agora-input-password--wrapper .input-btn--toggle{position:absolute;right:8px;top:8px;display:flex;cursor:pointer;align-items:center;justify-content:center;height:44px;width:44px}.agora-input-password--wrapper .input-btn--toggle path{fill:transparent;stroke:#2b363c!important;opacity:.5!important}.agora-input-password--wrapper .input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-password--wrapper .input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-password--wrapper span.hint-icon-wrapper svg path{stroke:transparent;fill:#0079bf}.agora-input-password--wrapper .feedback-icon-wrapper--info path{stroke:transparent;fill:#0079bf}.agora-input-password--wrapper .feedback-icon-wrapper--success path{stroke:transparent;fill:#008558}.agora-input-password--wrapper .feedback-icon-wrapper--danger path{stroke:transparent;fill:#de2d3b}.agora-input-password--wrapper .feedback-icon-wrapper--warning path{stroke:transparent;fill:#f2a222}.agora-input-password--wrapper .input-leading--icon{position:absolute;right:0;bottom:24px;left:16px;width:-moz-min-content;width:min-content;top:18px}.agora-input-password--wrapper .agora-input-password{border-radius:4px;border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));padding-left:16px;padding-right:48px;font-size:1rem;line-height:1.
|
|
1
|
+
.agora-input-password--wrapper{position:relative;display:flex;flex-direction:column}.agora-input-password--wrapper .input-btn--toggle{position:absolute;right:8px;top:8px;display:flex;cursor:pointer;align-items:center;justify-content:center;height:44px;width:44px}.agora-input-password--wrapper .input-btn--toggle path{fill:transparent;stroke:#2b363c!important;opacity:.5!important}.agora-input-password--wrapper .input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-password--wrapper .input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-password--wrapper span.hint-icon-wrapper svg path{stroke:transparent;fill:#0079bf}.agora-input-password--wrapper .feedback-icon-wrapper--info path{stroke:transparent;fill:#0079bf}.agora-input-password--wrapper .feedback-icon-wrapper--success path{stroke:transparent;fill:#008558}.agora-input-password--wrapper .feedback-icon-wrapper--danger path{stroke:transparent;fill:#de2d3b}.agora-input-password--wrapper .feedback-icon-wrapper--warning path{stroke:transparent;fill:#f2a222}.agora-input-password--wrapper .input-leading--icon{position:absolute;right:0;bottom:24px;left:16px;width:-moz-min-content;width:min-content;top:18px}.agora-input-password--wrapper .agora-input-password{border-radius:4px;border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));padding-left:16px;padding-right:48px;font-size:1rem;line-height:1.75rem;letter-spacing:0;font-weight:400;outline:2px solid transparent;outline-offset:2px;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);height:60px}.agora-input-password--wrapper .agora-input-password.has-leading-icon{padding-left:56px}.agora-input-password--wrapper .agora-input-password: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-password--wrapper .agora-input-password:hover:not(:focus):not(:disabled):not(:read-only){--tw-border-opacity:1;border-color:rgb(71 81 100 / var(--tw-border-opacity))}.agora-input-password--wrapper .agora-input-password:hover:not(:focus):not(:disabled):not(:-moz-read-only)~.input-btn--toggle path{fill:transparent;stroke:#2b363c!important;opacity:1!important}.agora-input-password--wrapper .agora-input-password:hover:not(:focus):not(:disabled):not(:read-only)~.input-btn--toggle path{fill:transparent;stroke:#2b363c!important;opacity:1!important}.agora-input-password--wrapper .agora-input-password: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-password--wrapper .agora-input-password:hover:not(:focus):not(:disabled):not(:read-only)~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:1!important}.agora-input-password--wrapper .agora-input-password: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-password--wrapper .agora-input-password:hover:not(:focus):not(:disabled):not(:read-only)~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:1!important}.agora-input-password--wrapper .agora-input-password:-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-password--wrapper .agora-input-password:disabled,.agora-input-password--wrapper .agora-input-password: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-password--wrapper .agora-input-password:-moz-read-only:focus:-moz-read-only,.agora-input-password--wrapper .agora-input-password:disabled:focus:-moz-read-only{--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important}.agora-input-password--wrapper .agora-input-password:disabled:focus:read-only,.agora-input-password--wrapper .agora-input-password:read-only:focus:read-only{--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important}.agora-input-password--wrapper .agora-input-password:-moz-read-only~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-password--wrapper .agora-input-password:disabled~.input-icon.dye-as-solid path,.agora-input-password--wrapper .agora-input-password:read-only~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-password--wrapper .agora-input-password:-moz-read-only~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-password--wrapper .agora-input-password:disabled~.input-icon.dye-as-line path,.agora-input-password--wrapper .agora-input-password:read-only~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-password--wrapper .agora-input-password~.input-btn--toggle:active{visibility:visible}.agora-input-password--wrapper .agora-input-password.has-value{--tw-border-opacity:1;border-color:rgb(156 166 184 / var(--tw-border-opacity))}.agora-input-password--wrapper .agora-input-password.has-value~.input-btn--toggle path{fill:transparent;stroke:#2b363c!important;opacity:1!important}.agora-input-password--wrapper .agora-input-password:not(:focus){outline-width:0}.agora-input-password--wrapper .agora-input-password:not(:disabled):focus{--tw-border-opacity:1;border-color:rgb(3 74 216 / var(--tw-border-opacity));padding-right:48px;outline-style:solid;outline-width:2px;outline-offset:2px;outline-color:#034ad8}.agora-input-password--wrapper .agora-input-password:not(:disabled):focus~.input-btn--toggle path{fill:transparent;stroke:#034ad8!important;opacity:1!important}.agora-input-password--wrapper .agora-input-password:not(:disabled):focus~.input-icon.dye-as-solid path{stroke:transparent;fill:#034ad8!important;opacity:1!important}.agora-input-password--wrapper .agora-input-password:not(:disabled):focus~.input-icon.dye-as-line path{fill:transparent;stroke:#034ad8!important;opacity:1!important}.agora-input-password--wrapper.input-has-error .input-btn--toggle path{fill:transparent;stroke:#2b363c!important}.agora-input-password--wrapper.input-has-error .input-feedback path{stroke:transparent;fill:#de2d3b!important}.agora-input-password--wrapper.input-has-error .agora-input-password: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-password--wrapper.input-has-error .agora-input-password: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}
|
|
@@ -15,11 +15,12 @@ import { stringToBoolean } from '../../../utils';
|
|
|
15
15
|
import { Icon } from '../icon';
|
|
16
16
|
import './input_text.scss';
|
|
17
17
|
export const InputText = (_a) => {
|
|
18
|
-
var
|
|
18
|
+
var _b;
|
|
19
|
+
var { label = 'Input Label', ariaLabel, hideLabel, hasError, maxChars = -1, showCharCounter, disabled, readOnly, feedbackText, feedbackState = 'info', leadingIcon, isOptional, className = '', id } = _a, props = __rest(_a, ["label", "ariaLabel", "hideLabel", "hasError", "maxChars", "showCharCounter", "disabled", "readOnly", "feedbackText", "feedbackState", "leadingIcon", "isOptional", "className", "id"]);
|
|
19
20
|
const propsClone = Object.assign({}, props);
|
|
20
21
|
const { onChange } = propsClone;
|
|
21
22
|
const inputRef = useRef(null);
|
|
22
|
-
const [currentValue, setCurrentValue] = useState(
|
|
23
|
+
const [currentValue, setCurrentValue] = useState((_b = propsClone.value) !== null && _b !== void 0 ? _b : '');
|
|
23
24
|
/**
|
|
24
25
|
* Local onChange event handler. This functions allow us
|
|
25
26
|
* set a limit for chars amount
|
|
@@ -62,7 +63,7 @@ export const InputText = (_a) => {
|
|
|
62
63
|
// text input component classes
|
|
63
64
|
inputClasses: classNames('agora-input-text', 'flex-1', {
|
|
64
65
|
'has-leading-icon': leadingIcon && leadingIcon.indexOf('agora-line') === 0,
|
|
65
|
-
'has-value': currentValue.length > 0
|
|
66
|
+
'has-value': currentValue && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.toString().length) > 0
|
|
66
67
|
}, className),
|
|
67
68
|
leadigIconWrapperClasses: classNames('input-icon', 'input-leading--icon', {
|
|
68
69
|
'dye-as-solid': (leadingIcon === null || leadingIcon === void 0 ? void 0 : leadingIcon.indexOf('agora-solid')) === 0,
|
|
@@ -77,9 +78,10 @@ export const InputText = (_a) => {
|
|
|
77
78
|
else {
|
|
78
79
|
propsClone.required = true;
|
|
79
80
|
}
|
|
81
|
+
delete propsClone.value;
|
|
80
82
|
return (React.createElement("div", { className: inputWrapperClasses },
|
|
81
83
|
React.createElement("div", { className: labelSectionClasses },
|
|
82
|
-
React.createElement("label", { hidden: stringToBoolean(hideLabel), htmlFor: id, className: "text-primary-900 text-
|
|
84
|
+
React.createElement("label", { hidden: stringToBoolean(hideLabel), htmlFor: id, className: "text-primary-900 text-m-medium" }, label)),
|
|
83
85
|
React.createElement("div", { className: "input-wrapper flex relative items-center" },
|
|
84
86
|
React.createElement("input", Object.assign({ type: "text", id: id, value: currentValue, className: inputClasses, disabled: disabled, readOnly: readOnly, "aria-invalid": stringToBoolean(hasError), "aria-label": ariaLabel || label, "aria-required": !stringToBoolean(isOptional), ref: inputRef, onChange: handleChangeEvent }, propsClone)),
|
|
85
87
|
leadingIcon && leadingIcon.indexOf('agora-line') === 0 && (React.createElement("div", { className: leadigIconWrapperClasses },
|
|
@@ -87,9 +89,9 @@ export const InputText = (_a) => {
|
|
|
87
89
|
React.createElement("div", { className: "flex items-center justify-between" },
|
|
88
90
|
React.createElement("div", { className: "flex items-center input-feedback mt-8" },
|
|
89
91
|
feedbackText && (React.createElement("span", { className: `mr-8 feedback-icon-wrapper feedback-icon-wrapper--${feedbackState}` }, !stringToBoolean(hasError) ? (React.createElement(Icon, { icon: feedbackStateIconsMap[feedbackState], size: "s", alt: feedbackText })) : (React.createElement(Icon, { icon: "agora-solid-danger", size: "s", alt: feedbackText })))),
|
|
90
|
-
React.createElement("p", { className: "text-
|
|
91
|
-
stringToBoolean(showCharCounter) && (React.createElement("div", { className: "text-
|
|
92
|
-
currentValue.length,
|
|
92
|
+
React.createElement("p", { className: "text-s-regular text-neutral-700" }, feedbackText)),
|
|
93
|
+
stringToBoolean(showCharCounter) && (React.createElement("div", { className: "text-s-regular text-neutral-700 mt-8 pl-16" }, currentValue === null || currentValue === void 0 ? void 0 :
|
|
94
|
+
currentValue.toString().length,
|
|
93
95
|
" ",
|
|
94
96
|
maxChars !== -1 ? `/${maxChars}` : '')))));
|
|
95
97
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.agora-input-text--wrapper{position:relative;display:flex;flex-direction:column}.agora-input-text--wrapper .input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-text--wrapper .input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-text--wrapper span.hint-icon-wrapper svg path{stroke:transparent;fill:#0079bf}.agora-input-text--wrapper .feedback-icon-wrapper--info path{stroke:transparent;fill:#0079bf}.agora-input-text--wrapper .feedback-icon-wrapper--success path{stroke:transparent;fill:#008558}.agora-input-text--wrapper .feedback-icon-wrapper--danger path{stroke:transparent;fill:#de2d3b}.agora-input-text--wrapper .feedback-icon-wrapper--warning path{stroke:transparent;fill:#f2a222}.agora-input-text--wrapper .input-leading--icon{position:absolute;right:0;bottom:24px;left:16px;width:-moz-min-content;width:min-content;top:18px}.agora-input-text--wrapper .agora-input-text{border-radius:4px;border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));padding-left:16px;padding-right:16px;font-size:1rem;line-height:1.
|
|
1
|
+
.agora-input-text--wrapper{position:relative;display:flex;flex-direction:column}.agora-input-text--wrapper .input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-text--wrapper .input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-text--wrapper span.hint-icon-wrapper svg path{stroke:transparent;fill:#0079bf}.agora-input-text--wrapper .feedback-icon-wrapper--info path{stroke:transparent;fill:#0079bf}.agora-input-text--wrapper .feedback-icon-wrapper--success path{stroke:transparent;fill:#008558}.agora-input-text--wrapper .feedback-icon-wrapper--danger path{stroke:transparent;fill:#de2d3b}.agora-input-text--wrapper .feedback-icon-wrapper--warning path{stroke:transparent;fill:#f2a222}.agora-input-text--wrapper .input-leading--icon{position:absolute;right:0;bottom:24px;left:16px;width:-moz-min-content;width:min-content;top:18px}.agora-input-text--wrapper .agora-input-text{border-radius:4px;border-width:2px;--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));padding-left:16px;padding-right:16px;font-size:1rem;line-height:1.75rem;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);height:60px}.agora-input-text--wrapper .agora-input-text.has-leading-icon{padding-left:56px}.agora-input-text--wrapper .agora-input-text: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-text--wrapper .agora-input-text:hover:not(:focus):not(:disabled):not(:read-only){--tw-border-opacity:1;border-color:rgb(71 81 100 / var(--tw-border-opacity))}.agora-input-text--wrapper .agora-input-text: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-text--wrapper .agora-input-text:hover:not(:focus):not(:disabled):not(:read-only)~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:1!important}.agora-input-text--wrapper .agora-input-text: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-text--wrapper .agora-input-text:hover:not(:focus):not(:disabled):not(:read-only)~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:1!important}.agora-input-text--wrapper .agora-input-text:-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-text--wrapper .agora-input-text:disabled,.agora-input-text--wrapper .agora-input-text: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-text--wrapper .agora-input-text:-moz-read-only:focus:-moz-read-only,.agora-input-text--wrapper .agora-input-text:disabled:focus:-moz-read-only{--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important}.agora-input-text--wrapper .agora-input-text:disabled:focus:read-only,.agora-input-text--wrapper .agora-input-text:read-only:focus:read-only{--tw-border-opacity:1!important;border-color:rgb(3 74 216 / var(--tw-border-opacity))!important}.agora-input-text--wrapper .agora-input-text:-moz-read-only~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-text--wrapper .agora-input-text:disabled~.input-icon.dye-as-solid path,.agora-input-text--wrapper .agora-input-text:read-only~.input-icon.dye-as-solid path{stroke:transparent;fill:#2b363c!important;opacity:.7!important}.agora-input-text--wrapper .agora-input-text:-moz-read-only~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-text--wrapper .agora-input-text:disabled~.input-icon.dye-as-line path,.agora-input-text--wrapper .agora-input-text:read-only~.input-icon.dye-as-line path{fill:transparent;stroke:#2b363c!important;opacity:.7!important}.agora-input-text--wrapper .agora-input-text~.input-btn--clear:active{visibility:visible!important}.agora-input-text--wrapper .agora-input-text.has-value:not(:-moz-read-only){--tw-border-opacity:1;border-color:rgb(156 166 184 / var(--tw-border-opacity))}.agora-input-text--wrapper .agora-input-text.has-value:not(:read-only){--tw-border-opacity:1;border-color:rgb(156 166 184 / var(--tw-border-opacity))}.agora-input-text--wrapper .agora-input-text:not(:focus){outline-width:0}.agora-input-text--wrapper .agora-input-text: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-text--wrapper .agora-input-text:not(:disabled):focus~.input-icon.dye-as-solid path{stroke:transparent;fill:#034ad8!important;opacity:1!important}.agora-input-text--wrapper .agora-input-text:not(:disabled):focus~.input-icon.dye-as-line path{fill:transparent;stroke:#034ad8!important;opacity:1!important}.agora-input-text--wrapper.input-has-error .input-feedback path{stroke:transparent;fill:#de2d3b!important}.agora-input-text--wrapper.input-has-error .agora-input-text:not(:disabled):not(:-moz-read-only){--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-text--wrapper.input-has-error .agora-input-text:not(:disabled):not(:read-only){--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}
|
|
@@ -15,10 +15,11 @@ import { stringToBoolean } from '../../../utils';
|
|
|
15
15
|
import { Icon } from '../icon';
|
|
16
16
|
import './input_textarea.scss';
|
|
17
17
|
export const InputTextArea = (_a) => {
|
|
18
|
-
var
|
|
18
|
+
var _b;
|
|
19
|
+
var { label = 'Input Label', ariaLabel, hideLabel, hasError, maxChars = -1, showCharCounter, disabled, readOnly, feedbackText, feedbackState = 'info', className = '', isOptional, rows = 3, id } = _a, props = __rest(_a, ["label", "ariaLabel", "hideLabel", "hasError", "maxChars", "showCharCounter", "disabled", "readOnly", "feedbackText", "feedbackState", "className", "isOptional", "rows", "id"]);
|
|
19
20
|
const propsClone = Object.assign({}, props);
|
|
20
21
|
const { onChange } = propsClone;
|
|
21
|
-
const [currentValue, setCurrentValue] = useState(
|
|
22
|
+
const [currentValue, setCurrentValue] = useState((_b = propsClone.value) !== null && _b !== void 0 ? _b : '');
|
|
22
23
|
/**
|
|
23
24
|
* Local onChange event handler. This functions allow us
|
|
24
25
|
* set a limit for chars amount
|
|
@@ -60,7 +61,7 @@ export const InputTextArea = (_a) => {
|
|
|
60
61
|
}),
|
|
61
62
|
// text input component classes
|
|
62
63
|
inputClasses: classNames('agora-input-textarea', 'flex-1', {
|
|
63
|
-
'has-value': currentValue.length > 0
|
|
64
|
+
'has-value': currentValue && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.toString().length) > 0
|
|
64
65
|
}, className)
|
|
65
66
|
};
|
|
66
67
|
};
|
|
@@ -71,17 +72,18 @@ export const InputTextArea = (_a) => {
|
|
|
71
72
|
else {
|
|
72
73
|
propsClone.required = true;
|
|
73
74
|
}
|
|
75
|
+
delete propsClone.value;
|
|
74
76
|
return (React.createElement("div", { className: inputWrapperClasses },
|
|
75
77
|
React.createElement("div", { className: labelSectionClasses },
|
|
76
|
-
React.createElement("label", { hidden: stringToBoolean(hideLabel), htmlFor: id, className: "text-primary-900 text-
|
|
78
|
+
React.createElement("label", { hidden: stringToBoolean(hideLabel), htmlFor: id, className: "text-primary-900 text-m-medium" }, label)),
|
|
77
79
|
React.createElement("div", { className: "input-wrapper flex relative items-center" },
|
|
78
80
|
React.createElement("textarea", Object.assign({ rows: rows, id: id, value: currentValue, className: inputClasses, disabled: disabled, readOnly: readOnly, "aria-invalid": stringToBoolean(hasError), "aria-label": ariaLabel || label, "aria-required": !stringToBoolean(isOptional), onChange: handleChangeEvent }, propsClone))),
|
|
79
81
|
React.createElement("div", { className: "flex items-center justify-between" },
|
|
80
82
|
React.createElement("div", { className: "flex items-center input-feedback mt-8" },
|
|
81
83
|
feedbackText && (React.createElement("span", { className: `mr-8 feedback-icon-wrapper feedback-icon-wrapper--${feedbackState}` }, !stringToBoolean(hasError) ? (React.createElement(Icon, { icon: feedbackStateIconsMap[feedbackState], size: "s", alt: feedbackText })) : (React.createElement(Icon, { icon: "agora-solid-danger", size: "s", alt: feedbackText })))),
|
|
82
|
-
React.createElement("p", { className: "text-
|
|
83
|
-
stringToBoolean(showCharCounter) && (React.createElement("div", { className: "text-
|
|
84
|
-
currentValue.length,
|
|
84
|
+
React.createElement("p", { className: "text-s-regular text-neutral-700" }, feedbackText)),
|
|
85
|
+
stringToBoolean(showCharCounter) && (React.createElement("div", { className: "text-s-regular text-neutral-700 mt-8 pl-16" }, currentValue === null || currentValue === void 0 ? void 0 :
|
|
86
|
+
currentValue.toString().length,
|
|
85
87
|
" ",
|
|
86
88
|
maxChars !== -1 ? `/${maxChars}` : '')))));
|
|
87
89
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.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.
|
|
1
|
+
.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.75rem;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}
|
|
@@ -35,7 +35,7 @@ export const Radio = (_a) => {
|
|
|
35
35
|
return (React.createElement("div", { className: inputWrapper },
|
|
36
36
|
React.createElement("input", Object.assign({ type: "radio", id: id, checked: checked, "aria-label": ariaLabel || label, onChange: handleChange }, propsClone)),
|
|
37
37
|
React.createElement("span", { className: "radio-span" }),
|
|
38
|
-
React.createElement("label", { htmlFor: id, className: "radio-label text-
|
|
38
|
+
React.createElement("label", { htmlFor: id, className: "radio-label text-m-regular" },
|
|
39
39
|
React.createElement("span", null, children || label))));
|
|
40
40
|
};
|
|
41
41
|
export default Radio;
|
|
@@ -3,7 +3,7 @@ import * as AccordionRadixUi from '@radix-ui/react-accordion';
|
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { Icon } from '../../atoms/icon';
|
|
5
5
|
import './accordion.scss';
|
|
6
|
-
export const Accordion = ({ accordionItems, headerTag: Component = 'h3', type = 'single', rootAccordionClassName, headerTitleClassName = 'bg-white hover:bg-primary-100', contentClassName = 'text-
|
|
6
|
+
export const Accordion = ({ accordionItems, headerTag: Component = 'h3', type = 'single', rootAccordionClassName, headerTitleClassName = 'bg-white hover:bg-primary-100', contentClassName = 'text-m-regular', chevronName = 'agora-solid-chevron-down', accordionItemClassName = 'border-b border-neutral-300' }) => {
|
|
7
7
|
const rootAccordionCss = classNames('agora-accordion flex flex-wrap', rootAccordionClassName);
|
|
8
8
|
const renderAccordionItem = (items) => {
|
|
9
9
|
return items === null || items === void 0 ? void 0 : items.map((item, index) => {
|