@alfalab/core-components 46.0.0-beta.5 → 46.0.0-beta.7
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/amount-input/@alfalab/core-components-shared/package.json +23 -0
- package/amount-input/Component.js +2 -1
- package/amount-input/cssm/Component.js +2 -1
- package/amount-input/esm/Component.js +2 -1
- package/amount-input/esm/index.js +1 -0
- package/amount-input/modern/Component.js +2 -1
- package/amount-input/modern/index.js +1 -0
- package/bottom-sheet/component.js +3 -9
- package/bottom-sheet/cssm/component.js +3 -9
- package/bottom-sheet/esm/component.js +4 -10
- package/bottom-sheet/modern/component.js +4 -9
- package/button/Component.responsive.js +2 -1
- package/button/cssm/Component.responsive.js +2 -1
- package/button/esm/Component.responsive.js +2 -2
- package/button/esm/index.js +1 -1
- package/button/modern/Component.responsive.js +2 -2
- package/button/modern/index.js +1 -1
- package/calendar/Component.responsive.js +2 -1
- package/calendar/cssm/Component.responsive.js +2 -1
- package/calendar/esm/Component.responsive.js +2 -2
- package/calendar/esm/index.js +1 -1
- package/calendar/modern/Component.responsive.js +2 -2
- package/calendar/modern/index.js +1 -1
- package/calendar-input/@alfalab/core-components-shared/package.json +23 -0
- package/calendar-input/Component.responsive.js +2 -1
- package/calendar-input/cssm/Component.responsive.js +2 -1
- package/calendar-input/esm/Component.responsive.js +2 -1
- package/calendar-input/esm/index.js +1 -0
- package/calendar-input/modern/Component.responsive.js +2 -1
- package/calendar-input/modern/index.js +1 -0
- package/checkbox-group/@alfalab/core-components-shared/package.json +23 -0
- package/checkbox-group/Component.responsive.js +2 -1
- package/checkbox-group/cssm/Component.responsive.js +2 -1
- package/checkbox-group/esm/Component.responsive.js +2 -1
- package/checkbox-group/esm/index.js +1 -0
- package/checkbox-group/modern/Component.responsive.js +2 -1
- package/checkbox-group/modern/index.js +1 -0
- package/code-input/@alfalab/core-components-shared/package.json +23 -0
- package/code-input/Component.responsive.js +2 -1
- package/code-input/cssm/Component.responsive.js +2 -1
- package/code-input/esm/Component.responsive.js +2 -1
- package/code-input/esm/index.js +1 -0
- package/code-input/modern/Component.responsive.js +2 -1
- package/code-input/modern/index.js +1 -0
- package/confirmation/@alfalab/core-components-shared/package.json +23 -0
- package/confirmation/component.responsive.js +2 -1
- package/confirmation/components/base-confirmation/component.js +2 -1
- package/confirmation/cssm/component.responsive.js +2 -1
- package/confirmation/cssm/components/base-confirmation/component.js +2 -1
- package/confirmation/esm/component.responsive.js +2 -1
- package/confirmation/esm/components/base-confirmation/component.js +2 -1
- package/confirmation/esm/components/base-confirmation/index.js +1 -0
- package/confirmation/esm/desktop/component.desktop.js +1 -0
- package/confirmation/esm/desktop/index.js +1 -0
- package/confirmation/esm/index.js +1 -0
- package/confirmation/esm/mobile/component.mobile.js +1 -0
- package/confirmation/esm/mobile/index.js +1 -0
- package/confirmation/modern/component.responsive.js +2 -1
- package/confirmation/modern/components/base-confirmation/component.js +2 -1
- package/confirmation/modern/components/base-confirmation/index.js +1 -0
- package/confirmation/modern/desktop/component.desktop.js +1 -0
- package/confirmation/modern/desktop/index.js +1 -0
- package/confirmation/modern/index.js +1 -0
- package/confirmation/modern/mobile/component.mobile.js +1 -0
- package/confirmation/modern/mobile/index.js +1 -0
- package/custom-picker-button/@alfalab/core-components-shared/package.json +23 -0
- package/custom-picker-button/Component.responsive.js +2 -1
- package/custom-picker-button/cssm/Component.responsive.js +2 -1
- package/custom-picker-button/esm/Component.responsive.js +2 -1
- package/custom-picker-button/esm/index.js +1 -0
- package/custom-picker-button/modern/Component.responsive.js +2 -1
- package/custom-picker-button/modern/index.js +1 -0
- package/date-range-input/@alfalab/core-components-shared/package.json +23 -0
- package/date-range-input/Component.responsive.js +2 -1
- package/date-range-input/cssm/Component.responsive.js +2 -1
- package/date-range-input/esm/Component.responsive.js +2 -1
- package/date-range-input/esm/index.js +1 -0
- package/date-range-input/modern/Component.responsive.js +2 -1
- package/date-range-input/modern/index.js +1 -0
- package/date-time-input/@alfalab/core-components-shared/package.json +23 -0
- package/date-time-input/Component.responsive.js +2 -1
- package/date-time-input/cssm/Component.responsive.js +2 -1
- package/date-time-input/esm/Component.responsive.js +2 -1
- package/date-time-input/esm/index.js +1 -0
- package/date-time-input/modern/Component.responsive.js +2 -1
- package/date-time-input/modern/index.js +1 -0
- package/filter-tag/@alfalab/core-components-shared/package.json +23 -0
- package/filter-tag/Component.responsive.js +2 -1
- package/filter-tag/cssm/Component.responsive.js +2 -1
- package/filter-tag/esm/Component.responsive.js +2 -1
- package/filter-tag/esm/index.js +1 -0
- package/filter-tag/modern/Component.responsive.js +2 -1
- package/filter-tag/modern/index.js +1 -0
- package/form-control/Component.responsive.js +2 -1
- package/form-control/cssm/Component.responsive.js +2 -1
- package/form-control/esm/Component.responsive.js +2 -2
- package/form-control/esm/index.js +1 -1
- package/form-control/modern/Component.responsive.js +2 -2
- package/form-control/modern/index.js +1 -1
- package/icon-button/Component.d.ts +10 -0
- package/icon-button/Component.js +4 -3
- package/icon-button/cssm/Component.d.ts +10 -0
- package/icon-button/cssm/Component.js +2 -1
- package/icon-button/cssm/default.module.css +35 -3
- package/icon-button/cssm/inverted.module.css +35 -3
- package/icon-button/default.css +35 -3
- package/icon-button/esm/Component.d.ts +10 -0
- package/icon-button/esm/Component.js +4 -3
- package/icon-button/esm/default.css +35 -3
- package/icon-button/esm/inverted.css +35 -3
- package/icon-button/inverted.css +35 -3
- package/icon-button/modern/Component.d.ts +10 -0
- package/icon-button/modern/Component.js +4 -3
- package/icon-button/modern/default.css +35 -3
- package/icon-button/modern/inverted.css +35 -3
- package/input/Component.responsive.js +2 -1
- package/input/cssm/Component.responsive.js +2 -1
- package/input/esm/Component.responsive.js +2 -2
- package/input/esm/index.js +1 -1
- package/input/modern/Component.responsive.js +2 -2
- package/input/modern/index.js +1 -1
- package/input-autocomplete/Component.responsive.js +2 -1
- package/input-autocomplete/cssm/Component.responsive.js +2 -1
- package/input-autocomplete/esm/Component.responsive.js +2 -2
- package/input-autocomplete/esm/index.js +1 -1
- package/input-autocomplete/modern/Component.responsive.js +2 -2
- package/input-autocomplete/modern/index.js +1 -1
- package/international-phone-input/Component.responsive.js +2 -1
- package/international-phone-input/cssm/Component.responsive.js +2 -1
- package/international-phone-input/cssm/typings-1fe708ea.d.ts +6 -0
- package/international-phone-input/esm/Component.responsive.js +2 -2
- package/international-phone-input/esm/index.js +1 -1
- package/international-phone-input/esm/typings-1fe708ea.d.ts +6 -0
- package/international-phone-input/modern/Component.responsive.js +2 -2
- package/international-phone-input/modern/index.js +1 -1
- package/international-phone-input/modern/typings-1fe708ea.d.ts +6 -0
- package/international-phone-input/typings-1fe708ea.d.ts +6 -0
- package/markdown/Component.responsive.js +1 -1
- package/markdown/cssm/Component.responsive.js +1 -1
- package/markdown/esm/Component.responsive.js +2 -2
- package/markdown/modern/Component.responsive.js +2 -2
- package/modal/Component.responsive.js +2 -1
- package/modal/components/controls/Component.js +1 -1
- package/modal/components/footer/Component.js +1 -1
- package/modal/cssm/Component.responsive.js +2 -1
- package/modal/esm/Component.responsive.js +3 -3
- package/modal/esm/components/controls/Component.js +1 -1
- package/modal/esm/components/controls/index.js +1 -1
- package/modal/esm/components/footer/Component.js +1 -1
- package/modal/esm/desktop/Component.desktop.js +1 -1
- package/modal/esm/desktop/index.js +1 -1
- package/modal/esm/index.js +2 -2
- package/modal/esm/mobile/Component.mobile.js +1 -1
- package/modal/esm/mobile/index.js +1 -1
- package/modal/modern/Component.responsive.js +3 -3
- package/modal/modern/components/controls/Component.js +1 -1
- package/modal/modern/components/controls/index.js +1 -1
- package/modal/modern/components/footer/Component.js +1 -1
- package/modal/modern/desktop/Component.desktop.js +1 -1
- package/modal/modern/desktop/index.js +1 -1
- package/modal/modern/index.js +2 -2
- package/modal/modern/mobile/Component.mobile.js +1 -1
- package/modal/modern/mobile/index.js +1 -1
- package/number-input/Component.responsive.js +2 -1
- package/number-input/cssm/Component.responsive.js +2 -1
- package/number-input/esm/Component.responsive.js +2 -2
- package/number-input/esm/index.js +1 -1
- package/number-input/modern/Component.responsive.js +2 -2
- package/number-input/modern/index.js +1 -1
- package/package.json +1 -1
- package/pattern-lock/Component.responsive.js +2 -1
- package/pattern-lock/cssm/Component.responsive.js +2 -1
- package/pattern-lock/esm/Component.responsive.js +2 -2
- package/pattern-lock/esm/index.js +1 -1
- package/pattern-lock/modern/Component.responsive.js +2 -2
- package/pattern-lock/modern/index.js +1 -1
- package/picker-button/@alfalab/core-components-shared/package.json +23 -0
- package/picker-button/Component.responsive.js +2 -1
- package/picker-button/cssm/Component.responsive.js +2 -1
- package/picker-button/cssm/mobile/Component.mobile.js +2 -1
- package/picker-button/cssm/typings-1fe708ea.d.ts +415 -10
- package/picker-button/esm/Component.responsive.js +2 -1
- package/picker-button/esm/index.js +1 -0
- package/picker-button/esm/mobile/Component.mobile.js +2 -1
- package/picker-button/esm/mobile/index.js +1 -0
- package/picker-button/esm/typings-1fe708ea.d.ts +415 -10
- package/picker-button/mobile/Component.mobile.js +2 -1
- package/picker-button/modern/Component.responsive.js +2 -1
- package/picker-button/modern/index.js +1 -0
- package/picker-button/modern/mobile/Component.mobile.js +2 -1
- package/picker-button/modern/mobile/index.js +1 -0
- package/picker-button/modern/typings-1fe708ea.d.ts +415 -10
- package/picker-button/typings-1fe708ea.d.ts +415 -10
- package/plate/Component.responsive.js +17 -1
- package/plate/cssm/Component.responsive.js +17 -1
- package/plate/esm/Component.responsive.js +17 -2
- package/plate/esm/index.js +1 -1
- package/plate/modern/Component.responsive.js +18 -2
- package/plate/modern/index.js +1 -1
- package/radio-group/@alfalab/core-components-shared/package.json +23 -0
- package/radio-group/Component.responsive.js +2 -1
- package/radio-group/cssm/Component.responsive.js +2 -1
- package/radio-group/esm/Component.responsive.js +2 -1
- package/radio-group/esm/index.js +1 -0
- package/radio-group/modern/Component.responsive.js +2 -1
- package/radio-group/modern/index.js +1 -0
- package/select/Component.responsive.js +2 -1
- package/select/cssm/Component.responsive.js +2 -1
- package/select/esm/Component.responsive.js +3 -3
- package/select/esm/index.js +2 -2
- package/select/esm/mobile/Component.mobile.js +1 -1
- package/select/esm/mobile/Component.modal.mobile.js +1 -1
- package/select/esm/mobile/index.js +1 -1
- package/select/esm/presets/index.js +1 -1
- package/select/esm/presets/useSelectWithApply/hook.js +1 -1
- package/select/esm/presets/useSelectWithApply/options-list-with-apply/Component.js +1 -1
- package/select/esm/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
- package/select/esm/presets/useSelectWithApply/options-list-with-apply/index.js +1 -1
- package/select/esm/shared/index.js +1 -1
- package/select/mobile/Component.mobile.js +1 -1
- package/select/modern/Component.responsive.js +3 -3
- package/select/modern/index.js +2 -2
- package/select/modern/mobile/Component.mobile.js +1 -1
- package/select/modern/mobile/Component.modal.mobile.js +1 -1
- package/select/modern/mobile/index.js +1 -1
- package/select/modern/presets/index.js +1 -1
- package/select/modern/presets/useSelectWithApply/hook.js +1 -1
- package/select/modern/presets/useSelectWithApply/options-list-with-apply/Component.js +1 -1
- package/select/modern/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
- package/select/modern/presets/useSelectWithApply/options-list-with-apply/index.js +1 -1
- package/select/modern/shared/index.js +1 -1
- package/select/presets/index.js +1 -1
- package/select/presets/useSelectWithApply/hook.js +1 -1
- package/select/presets/useSelectWithApply/options-list-with-apply/Component.js +1 -1
- package/select/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
- package/select/presets/useSelectWithApply/options-list-with-apply/index.js +1 -1
- package/select/shared/index.js +1 -1
- package/select-with-tags/@alfalab/core-components-shared/package.json +23 -0
- package/select-with-tags/Component.responsive.js +2 -1
- package/select-with-tags/cssm/Component.responsive.js +2 -1
- package/select-with-tags/esm/Component.responsive.js +2 -1
- package/select-with-tags/esm/index.js +1 -0
- package/select-with-tags/modern/Component.responsive.js +2 -1
- package/select-with-tags/modern/index.js +1 -0
- package/shared/cssm/getComponentBreakpoint/getComponentBreakpoint.d.ts +2 -0
- package/shared/cssm/getComponentBreakpoint/getComponentBreakpoint.js +18 -0
- package/shared/cssm/getComponentBreakpoint/index.d.ts +1 -0
- package/shared/cssm/getComponentBreakpoint/index.js +7 -0
- package/shared/cssm/index.d.ts +1 -0
- package/shared/cssm/index.js +2 -0
- package/shared/esm/getComponentBreakpoint/getComponentBreakpoint.d.ts +2 -0
- package/shared/esm/getComponentBreakpoint/getComponentBreakpoint.js +16 -0
- package/shared/esm/getComponentBreakpoint/index.d.ts +1 -0
- package/shared/esm/getComponentBreakpoint/index.js +1 -0
- package/shared/esm/index.d.ts +1 -0
- package/shared/esm/index.js +1 -0
- package/shared/getComponentBreakpoint/getComponentBreakpoint.d.ts +2 -0
- package/shared/getComponentBreakpoint/getComponentBreakpoint.js +18 -0
- package/shared/getComponentBreakpoint/index.d.ts +1 -0
- package/shared/getComponentBreakpoint/index.js +7 -0
- package/shared/index.d.ts +1 -0
- package/shared/index.js +2 -0
- package/shared/modern/getComponentBreakpoint/getComponentBreakpoint.d.ts +2 -0
- package/shared/modern/getComponentBreakpoint/getComponentBreakpoint.js +17 -0
- package/shared/modern/getComponentBreakpoint/index.d.ts +1 -0
- package/shared/modern/getComponentBreakpoint/index.js +1 -0
- package/shared/modern/index.d.ts +1 -0
- package/shared/modern/index.js +1 -0
- package/side-panel/Component.responsive.js +1 -1
- package/side-panel/components/controls/Component.js +1 -1
- package/side-panel/components/footer/Component.js +1 -1
- package/side-panel/cssm/Component.responsive.js +1 -1
- package/side-panel/esm/Component.responsive.js +3 -3
- package/side-panel/esm/components/controls/Component.js +1 -1
- package/side-panel/esm/components/controls/index.js +1 -1
- package/side-panel/esm/components/footer/Component.desktop.js +1 -1
- package/side-panel/esm/components/footer/Component.js +1 -1
- package/side-panel/esm/components/footer/Component.mobile.js +1 -1
- package/side-panel/esm/desktop/Component.desktop.js +1 -1
- package/side-panel/esm/desktop/index.js +1 -1
- package/side-panel/esm/index.js +1 -1
- package/side-panel/esm/mobile/Component.mobile.js +1 -1
- package/side-panel/esm/mobile/index.js +1 -1
- package/side-panel/modern/Component.responsive.js +3 -3
- package/side-panel/modern/components/controls/Component.js +1 -1
- package/side-panel/modern/components/controls/index.js +1 -1
- package/side-panel/modern/components/footer/Component.desktop.js +1 -1
- package/side-panel/modern/components/footer/Component.js +1 -1
- package/side-panel/modern/components/footer/Component.mobile.js +1 -1
- package/side-panel/modern/desktop/Component.desktop.js +1 -1
- package/side-panel/modern/desktop/index.js +1 -1
- package/side-panel/modern/index.js +1 -1
- package/side-panel/modern/mobile/Component.mobile.js +1 -1
- package/side-panel/modern/mobile/index.js +1 -1
- package/status/Component.d.ts +2 -1
- package/status/Component.js +2 -2
- package/status/cssm/Component.d.ts +2 -1
- package/status/cssm/Component.js +1 -1
- package/status/cssm/index.module.css +74 -29
- package/status/esm/Component.d.ts +2 -1
- package/status/esm/Component.js +2 -2
- package/status/esm/index.css +55 -27
- package/status/index.css +55 -27
- package/status/modern/Component.d.ts +2 -1
- package/status/modern/Component.js +2 -2
- package/status/modern/index.css +55 -27
- package/system-message/Components.responsive.js +1 -1
- package/system-message/cssm/Components.responsive.js +1 -1
- package/system-message/esm/Components.responsive.js +2 -2
- package/system-message/modern/Components.responsive.js +2 -2
- package/tabs/components/primary-tablist/Component.collapsible.js +2 -1
- package/tabs/components/primary-tablist/Component.responsive.js +2 -1
- package/tabs/components/secondary-tablist/Component.responsive.js +2 -1
- package/tabs/components/tabs/Component.js +2 -1
- package/tabs/cssm/components/primary-tablist/Component.collapsible.js +2 -1
- package/tabs/cssm/components/primary-tablist/Component.responsive.js +2 -1
- package/tabs/cssm/components/secondary-tablist/Component.responsive.js +2 -1
- package/tabs/cssm/components/tabs/Component.js +2 -1
- package/tabs/esm/collapsible/index.js +1 -1
- package/tabs/esm/components/primary-tablist/Component.collapsible.js +2 -2
- package/tabs/esm/components/primary-tablist/Component.responsive.js +2 -2
- package/tabs/esm/components/secondary-tablist/Component.responsive.js +2 -2
- package/tabs/esm/components/tabs/Component.collapsible.js +1 -1
- package/tabs/esm/components/tabs/Component.js +2 -1
- package/tabs/esm/components/tabs/Component.responsive.js +1 -1
- package/tabs/esm/index.js +1 -1
- package/tabs/modern/collapsible/index.js +1 -1
- package/tabs/modern/components/primary-tablist/Component.collapsible.js +2 -2
- package/tabs/modern/components/primary-tablist/Component.responsive.js +2 -2
- package/tabs/modern/components/secondary-tablist/Component.responsive.js +2 -2
- package/tabs/modern/components/tabs/Component.collapsible.js +1 -1
- package/tabs/modern/components/tabs/Component.js +2 -1
- package/tabs/modern/components/tabs/Component.responsive.js +1 -1
- package/tabs/modern/index.js +1 -1
- package/tag/@alfalab/core-components-shared/package.json +23 -0
- package/tag/Component.responsive.js +2 -1
- package/tag/components/base-tag/Component.d.ts +1 -1
- package/tag/cssm/Component.responsive.js +2 -1
- package/tag/cssm/components/base-tag/Component.d.ts +1 -1
- package/tag/esm/Component.responsive.js +2 -1
- package/tag/esm/components/base-tag/Component.d.ts +1 -1
- package/tag/esm/index.js +1 -0
- package/tag/modern/Component.responsive.js +2 -1
- package/tag/modern/components/base-tag/Component.d.ts +1 -1
- package/tag/modern/index.js +1 -0
- package/themes/breakpoints/breakpoint-768.css +3 -0
- package/themes/compiled/mobile-dark-bluetint.css +79 -58
- package/toast/@alfalab/core-components-shared/package.json +23 -0
- package/toast/Component.responsive.js +2 -1
- package/toast/cssm/Component.responsive.js +2 -1
- package/toast/esm/Component.responsive.js +2 -1
- package/toast/esm/index.js +1 -0
- package/toast/modern/Component.responsive.js +2 -1
- package/toast/modern/index.js +1 -0
- package/toast-plate/@alfalab/core-components-shared/package.json +23 -0
- package/toast-plate/Component.responsive.js +2 -1
- package/toast-plate/components/base-toast-plate/component.js +3 -4
- package/toast-plate/components/base-toast-plate/hooks/useDeprecatedBadge.js +2 -5
- package/toast-plate/components/base-toast-plate/utils/getBaseToastPlateTestIds.js +3 -5
- package/toast-plate/cssm/Component.responsive.js +2 -1
- package/toast-plate/cssm/components/base-toast-plate/component.js +3 -4
- package/toast-plate/cssm/components/base-toast-plate/hooks/useDeprecatedBadge.js +2 -5
- package/toast-plate/cssm/components/base-toast-plate/utils/getBaseToastPlateTestIds.js +3 -5
- package/toast-plate/esm/Component.responsive.js +2 -3
- package/toast-plate/esm/components/base-toast-plate/component.js +1 -2
- package/toast-plate/esm/components/base-toast-plate/hooks/useDeprecatedBadge.js +1 -4
- package/toast-plate/esm/components/base-toast-plate/index.js +1 -2
- package/toast-plate/esm/components/base-toast-plate/utils/getBaseToastPlateTestIds.js +1 -3
- package/toast-plate/esm/desktop/Component.desktop.js +1 -2
- package/toast-plate/esm/desktop/index.js +1 -2
- package/toast-plate/esm/index.js +1 -2
- package/toast-plate/esm/mobile/Component.mobile.js +1 -2
- package/toast-plate/esm/mobile/index.js +1 -2
- package/toast-plate/modern/Component.responsive.js +2 -3
- package/toast-plate/modern/components/base-toast-plate/component.js +1 -2
- package/toast-plate/modern/components/base-toast-plate/hooks/useDeprecatedBadge.js +1 -4
- package/toast-plate/modern/components/base-toast-plate/index.js +1 -2
- package/toast-plate/modern/components/base-toast-plate/utils/getBaseToastPlateTestIds.js +1 -3
- package/toast-plate/modern/desktop/Component.desktop.js +1 -2
- package/toast-plate/modern/desktop/index.js +1 -2
- package/toast-plate/modern/index.js +1 -2
- package/toast-plate/modern/mobile/Component.mobile.js +1 -2
- package/toast-plate/modern/mobile/index.js +1 -2
- package/tooltip/@alfalab/core-components-shared/package.json +23 -0
- package/tooltip/Component.responsive.js +2 -1
- package/tooltip/cssm/Component.responsive.js +2 -1
- package/tooltip/esm/Component.responsive.js +2 -1
- package/tooltip/esm/index.js +1 -0
- package/tooltip/modern/Component.responsive.js +2 -1
- package/tooltip/modern/index.js +1 -0
- package/universal-date-input/Component.responsive.js +2 -1
- package/universal-date-input/cssm/Component.responsive.js +2 -1
- package/universal-date-input/esm/Component.responsive.js +2 -2
- package/universal-date-input/esm/index.js +1 -1
- package/universal-date-input/modern/Component.responsive.js +2 -2
- package/universal-date-input/modern/index.js +1 -1
- package/picker-button/Component-307da6d7.d.ts +0 -168
- package/picker-button/Context-c2e6f1b2.d.ts +0 -4
- package/picker-button/cssm/Component-307da6d7.d.ts +0 -168
- package/picker-button/cssm/Context-c2e6f1b2.d.ts +0 -4
- package/picker-button/cssm/index-064acd29.d.ts +0 -13
- package/picker-button/cssm/index-307da6d7.d.ts +0 -67
- package/picker-button/cssm/types-a870d1f8.d.ts +0 -117
- package/picker-button/esm/Component-307da6d7.d.ts +0 -168
- package/picker-button/esm/Context-c2e6f1b2.d.ts +0 -4
- package/picker-button/esm/index-064acd29.d.ts +0 -13
- package/picker-button/esm/index-307da6d7.d.ts +0 -67
- package/picker-button/esm/types-a870d1f8.d.ts +0 -117
- package/picker-button/index-064acd29.d.ts +0 -13
- package/picker-button/index-307da6d7.d.ts +0 -67
- package/picker-button/modern/Component-307da6d7.d.ts +0 -168
- package/picker-button/modern/Context-c2e6f1b2.d.ts +0 -4
- package/picker-button/modern/index-064acd29.d.ts +0 -13
- package/picker-button/modern/index-307da6d7.d.ts +0 -67
- package/picker-button/modern/types-a870d1f8.d.ts +0 -117
- package/picker-button/types-a870d1f8.d.ts +0 -117
- package/toast-plate/browser-a216f694.d.ts +0 -6
- package/toast-plate/cssm/browser-a216f694.d.ts +0 -6
- package/toast-plate/cssm/getDataTestId-73ea38f8.d.ts +0 -3
- package/toast-plate/cssm/getDataTestId-73ea38f8.js +0 -6
- package/toast-plate/cssm/index-307da6d7.d.ts +0 -71
- package/toast-plate/cssm/useCustomWebkitScrollbar-a216f694.d.ts +0 -2
- package/toast-plate/esm/browser-a216f694.d.ts +0 -6
- package/toast-plate/esm/getDataTestId-f4dc32c7.d.ts +0 -3
- package/toast-plate/esm/getDataTestId-f4dc32c7.js +0 -6
- package/toast-plate/esm/index-307da6d7.d.ts +0 -71
- package/toast-plate/esm/useCustomWebkitScrollbar-a216f694.d.ts +0 -2
- package/toast-plate/getDataTestId-442368bd.d.ts +0 -3
- package/toast-plate/getDataTestId-442368bd.js +0 -6
- package/toast-plate/index-307da6d7.d.ts +0 -71
- package/toast-plate/modern/browser-a216f694.d.ts +0 -6
- package/toast-plate/modern/getDataTestId-16038735.d.ts +0 -3
- package/toast-plate/modern/getDataTestId-16038735.js +0 -6
- package/toast-plate/modern/index-307da6d7.d.ts +0 -71
- package/toast-plate/modern/useCustomWebkitScrollbar-a216f694.d.ts +0 -2
- package/toast-plate/useCustomWebkitScrollbar-a216f694.d.ts +0 -2
- /package/modal/esm/{layout.module-ed84e654.js → layout.module-8c2ad581.js} +0 -0
- /package/modal/{layout.module-74d56d9e.js → layout.module-9c7f42a7.js} +0 -0
- /package/modal/modern/{layout.module-169c9cd4.js → layout.module-7b9f84d6.js} +0 -0
- /package/{picker-button → plate}/browser-a216f694.d.ts +0 -0
- /package/{picker-button → plate}/cssm/browser-a216f694.d.ts +0 -0
- /package/{picker-button → plate}/cssm/useCustomWebkitScrollbar-a216f694.d.ts +0 -0
- /package/{picker-button → plate}/esm/browser-a216f694.d.ts +0 -0
- /package/{picker-button → plate}/esm/useCustomWebkitScrollbar-a216f694.d.ts +0 -0
- /package/{picker-button → plate}/modern/browser-a216f694.d.ts +0 -0
- /package/{picker-button → plate}/modern/useCustomWebkitScrollbar-a216f694.d.ts +0 -0
- /package/{picker-button → plate}/useCustomWebkitScrollbar-a216f694.d.ts +0 -0
- /package/select/esm/{hook-43f97773.d.ts → hook-cdd6fd77.d.ts} +0 -0
- /package/select/esm/{hook-43f97773.js → hook-cdd6fd77.js} +0 -0
- /package/select/{hook-47df637e.d.ts → hook-504cecce.d.ts} +0 -0
- /package/select/{hook-47df637e.js → hook-504cecce.js} +0 -0
- /package/select/modern/{hook-72d63281.d.ts → hook-f45c958e.d.ts} +0 -0
- /package/select/modern/{hook-72d63281.js → hook-f45c958e.js} +0 -0
- /package/side-panel/esm/{layout.module-72cc1a7a.js → layout.module-85dc8854.js} +0 -0
- /package/side-panel/{layout.module-cfb65ab1.js → layout.module-7feda991.js} +0 -0
- /package/side-panel/modern/{layout.module-3503b091.js → layout.module-3ff83598.js} +0 -0
|
@@ -12,7 +12,13 @@
|
|
|
12
12
|
--color-light-neutral-translucent-700-press: rgba(1, 1, 12, 0.63);
|
|
13
13
|
--color-light-status-negative: #ff4837;
|
|
14
14
|
--color-light-status-negative-hover: #ec2d20;
|
|
15
|
-
--color-light-status-negative-press: #c7241f;
|
|
15
|
+
--color-light-status-negative-press: #c7241f;
|
|
16
|
+
--color-light-text-negative: #ec2d20;
|
|
17
|
+
--color-light-text-primary: rgba(3, 3, 6, 0.88);
|
|
18
|
+
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
19
|
+
--color-light-text-tertiary: rgba(5, 8, 29, 0.38);
|
|
20
|
+
--color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
|
|
21
|
+
--color-light-transparent-default-press: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
16
22
|
--color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3);
|
|
17
23
|
--color-light-graphic-primary-alpha-40: rgba(14, 14, 14, 0.4);
|
|
18
24
|
--color-light-graphic-primary-alpha-50: rgba(14, 14, 14, 0.5);
|
|
@@ -88,7 +94,31 @@
|
|
|
88
94
|
color: var(--icon-button-tertiary-hover-color);
|
|
89
95
|
} :global(.cc-icon-button).tertiary:active {
|
|
90
96
|
color: var(--icon-button-tertiary-active-color);
|
|
91
|
-
} :global(.cc-icon-button).
|
|
97
|
+
} :global(.cc-icon-button).transparentBg.primary {
|
|
98
|
+
color: var(--color-light-text-primary)
|
|
99
|
+
} :global(.cc-icon-button).transparentBg.primary:hover {
|
|
100
|
+
background: var(--color-light-transparent-default-hover);
|
|
101
|
+
} :global(.cc-icon-button).transparentBg.primary:active {
|
|
102
|
+
background: var(--color-light-transparent-default-press);
|
|
103
|
+
} :global(.cc-icon-button).transparentBg.secondary {
|
|
104
|
+
color: var(--color-light-text-secondary)
|
|
105
|
+
} :global(.cc-icon-button).transparentBg.secondary:hover {
|
|
106
|
+
background: var(--color-light-transparent-default-hover);
|
|
107
|
+
} :global(.cc-icon-button).transparentBg.secondary:active {
|
|
108
|
+
background: var(--color-light-transparent-default-press);
|
|
109
|
+
} :global(.cc-icon-button).transparentBg.negative {
|
|
110
|
+
color: var(--color-light-text-negative)
|
|
111
|
+
} :global(.cc-icon-button).transparentBg.negative:hover {
|
|
112
|
+
background: var(--color-light-transparent-default-hover);
|
|
113
|
+
} :global(.cc-icon-button).transparentBg.negative:active {
|
|
114
|
+
background: var(--color-light-transparent-default-press);
|
|
115
|
+
} :global(.cc-icon-button).transparentBg.tertiary {
|
|
116
|
+
color: var(--color-light-text-tertiary)
|
|
117
|
+
} :global(.cc-icon-button).transparentBg.tertiary:hover {
|
|
118
|
+
background: var(--color-light-transparent-default-hover);
|
|
119
|
+
} :global(.cc-icon-button).transparentBg.tertiary:active {
|
|
120
|
+
background: var(--color-light-transparent-default-press);
|
|
121
|
+
} :global(.cc-icon-button).component:disabled.primary {
|
|
92
122
|
color: var(--icon-button-primary-disabled-color)
|
|
93
123
|
} :global(.cc-icon-button).component:disabled.primary.loader {
|
|
94
124
|
color: var(--icon-button-primary-base-color);
|
|
@@ -104,4 +134,6 @@
|
|
|
104
134
|
color: var(--icon-button-tertiary-disabled-color)
|
|
105
135
|
} :global(.cc-icon-button).component:disabled.tertiary.loader {
|
|
106
136
|
color: var(--icon-button-tertiary-base-color);
|
|
107
|
-
}
|
|
137
|
+
} :global(.cc-icon-button).component:disabled.transparentBg {
|
|
138
|
+
background: transparent;
|
|
139
|
+
}
|
|
@@ -6,7 +6,13 @@
|
|
|
6
6
|
--color-light-neutral-translucent-500-inverted: rgba(228, 228, 251, 0.28);
|
|
7
7
|
--color-light-status-negative-inverted: #ff4837;
|
|
8
8
|
--color-light-status-negative-inverted-hover: #ff755e;
|
|
9
|
-
--color-light-status-negative-inverted-press: #ff8d79;
|
|
9
|
+
--color-light-status-negative-inverted-press: #ff8d79;
|
|
10
|
+
--color-light-text-negative-inverted: #ff4837;
|
|
11
|
+
--color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
|
|
12
|
+
--color-light-text-secondary-inverted: rgba(238, 238, 251, 0.55);
|
|
13
|
+
--color-light-text-tertiary-inverted: rgba(233, 233, 250, 0.37);
|
|
14
|
+
--color-light-transparent-default-inverted-hover: rgba(214, 214, 229, 0.07);
|
|
15
|
+
--color-light-transparent-default-inverted-press: rgba(225, 225, 248, 0.09); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
10
16
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
11
17
|
} :root {
|
|
12
18
|
} :root {
|
|
@@ -103,7 +109,31 @@
|
|
|
103
109
|
color: var(--icon-button-inverted-tertiary-hover-color);
|
|
104
110
|
} :global(.cc-icon-button).tertiary:active {
|
|
105
111
|
color: var(--icon-button-inverted-tertiary-active-color);
|
|
106
|
-
} :global(.cc-icon-button).
|
|
112
|
+
} :global(.cc-icon-button).transparentBg.primary {
|
|
113
|
+
color: var(--color-light-text-primary-inverted)
|
|
114
|
+
} :global(.cc-icon-button).transparentBg.primary:hover {
|
|
115
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
116
|
+
} :global(.cc-icon-button).transparentBg.primary:active {
|
|
117
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
118
|
+
} :global(.cc-icon-button).transparentBg.secondary {
|
|
119
|
+
color: var(--color-light-text-secondary-inverted)
|
|
120
|
+
} :global(.cc-icon-button).transparentBg.secondary:hover {
|
|
121
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
122
|
+
} :global(.cc-icon-button).transparentBg.secondary:active {
|
|
123
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
124
|
+
} :global(.cc-icon-button).transparentBg.negative {
|
|
125
|
+
color: var(--color-light-text-negative-inverted)
|
|
126
|
+
} :global(.cc-icon-button).transparentBg.negative:hover {
|
|
127
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
128
|
+
} :global(.cc-icon-button).transparentBg.negative:active {
|
|
129
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
130
|
+
} :global(.cc-icon-button).transparentBg.tertiary {
|
|
131
|
+
color: var(--color-light-text-tertiary-inverted)
|
|
132
|
+
} :global(.cc-icon-button).transparentBg.tertiary:hover {
|
|
133
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
134
|
+
} :global(.cc-icon-button).transparentBg.tertiary:active {
|
|
135
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
136
|
+
} :global(.cc-icon-button).component:disabled.primary {
|
|
107
137
|
color: var(--icon-button-inverted-primary-disabled-color)
|
|
108
138
|
} :global(.cc-icon-button).component:disabled.primary.loader {
|
|
109
139
|
color: var(--icon-button-inverted-primary-base-color);
|
|
@@ -119,4 +149,6 @@
|
|
|
119
149
|
color: var(--icon-button-inverted-tertiary-disabled-color)
|
|
120
150
|
} :global(.cc-icon-button).component:disabled.tertiary.loader {
|
|
121
151
|
color: var(--icon-button-inverted-tertiary-base-color);
|
|
122
|
-
}
|
|
152
|
+
} :global(.cc-icon-button).component:disabled.transparentBg {
|
|
153
|
+
background: transparent;
|
|
154
|
+
}
|
package/icon-button/default.css
CHANGED
|
@@ -13,7 +13,13 @@
|
|
|
13
13
|
--color-light-neutral-translucent-700-press: rgba(1, 1, 12, 0.63);
|
|
14
14
|
--color-light-status-negative: #ff4837;
|
|
15
15
|
--color-light-status-negative-hover: #ec2d20;
|
|
16
|
-
--color-light-status-negative-press: #c7241f;
|
|
16
|
+
--color-light-status-negative-press: #c7241f;
|
|
17
|
+
--color-light-text-negative: #ec2d20;
|
|
18
|
+
--color-light-text-primary: rgba(3, 3, 6, 0.88);
|
|
19
|
+
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
20
|
+
--color-light-text-tertiary: rgba(5, 8, 29, 0.38);
|
|
21
|
+
--color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
|
|
22
|
+
--color-light-transparent-default-press: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
17
23
|
--color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3);
|
|
18
24
|
--color-light-graphic-primary-alpha-40: rgba(14, 14, 14, 0.4);
|
|
19
25
|
--color-light-graphic-primary-alpha-50: rgba(14, 14, 14, 0.5);
|
|
@@ -89,7 +95,31 @@
|
|
|
89
95
|
color: var(--icon-button-tertiary-hover-color);
|
|
90
96
|
} .cc-icon-button.icon-button__tertiary_4tbui:active {
|
|
91
97
|
color: var(--icon-button-tertiary-active-color);
|
|
92
|
-
} .cc-icon-button.icon-
|
|
98
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__primary_4tbui {
|
|
99
|
+
color: var(--color-light-text-primary)
|
|
100
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__primary_4tbui:hover {
|
|
101
|
+
background: var(--color-light-transparent-default-hover);
|
|
102
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__primary_4tbui:active {
|
|
103
|
+
background: var(--color-light-transparent-default-press);
|
|
104
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__secondary_4tbui {
|
|
105
|
+
color: var(--color-light-text-secondary)
|
|
106
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__secondary_4tbui:hover {
|
|
107
|
+
background: var(--color-light-transparent-default-hover);
|
|
108
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__secondary_4tbui:active {
|
|
109
|
+
background: var(--color-light-transparent-default-press);
|
|
110
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__negative_4tbui {
|
|
111
|
+
color: var(--color-light-text-negative)
|
|
112
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__negative_4tbui:hover {
|
|
113
|
+
background: var(--color-light-transparent-default-hover);
|
|
114
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__negative_4tbui:active {
|
|
115
|
+
background: var(--color-light-transparent-default-press);
|
|
116
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__tertiary_4tbui {
|
|
117
|
+
color: var(--color-light-text-tertiary)
|
|
118
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__tertiary_4tbui:hover {
|
|
119
|
+
background: var(--color-light-transparent-default-hover);
|
|
120
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__tertiary_4tbui:active {
|
|
121
|
+
background: var(--color-light-transparent-default-press);
|
|
122
|
+
} .cc-icon-button.icon-button__component_4tbui:disabled.icon-button__primary_4tbui {
|
|
93
123
|
color: var(--icon-button-primary-disabled-color)
|
|
94
124
|
} .cc-icon-button.icon-button__component_4tbui:disabled.icon-button__primary_4tbui.icon-button__loader_4tbui {
|
|
95
125
|
color: var(--icon-button-primary-base-color);
|
|
@@ -105,4 +135,6 @@
|
|
|
105
135
|
color: var(--icon-button-tertiary-disabled-color)
|
|
106
136
|
} .cc-icon-button.icon-button__component_4tbui:disabled.icon-button__tertiary_4tbui.icon-button__loader_4tbui {
|
|
107
137
|
color: var(--icon-button-tertiary-base-color);
|
|
108
|
-
}
|
|
138
|
+
} .cc-icon-button.icon-button__component_4tbui:disabled.icon-button__transparentBg_4tbui {
|
|
139
|
+
background: transparent;
|
|
140
|
+
}
|
|
@@ -22,6 +22,11 @@ type IconButtonProps = {
|
|
|
22
22
|
* Дополнительный класс
|
|
23
23
|
*/
|
|
24
24
|
className?: string;
|
|
25
|
+
/**
|
|
26
|
+
* Включает прозрачный фон
|
|
27
|
+
* @default false
|
|
28
|
+
*/
|
|
29
|
+
transparentBg?: boolean;
|
|
25
30
|
/**
|
|
26
31
|
* Выравнивание иконки
|
|
27
32
|
* @default 'center'
|
|
@@ -56,6 +61,11 @@ declare const IconButton: React.ForwardRefExoticComponent<{
|
|
|
56
61
|
* Дополнительный класс
|
|
57
62
|
*/
|
|
58
63
|
className?: string | undefined;
|
|
64
|
+
/**
|
|
65
|
+
* Включает прозрачный фон
|
|
66
|
+
* @default false
|
|
67
|
+
*/
|
|
68
|
+
transparentBg?: boolean | undefined;
|
|
59
69
|
/**
|
|
60
70
|
* Выравнивание иконки
|
|
61
71
|
* @default 'center'
|
|
@@ -3,13 +3,13 @@ import React, { forwardRef } from 'react';
|
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { Button } from '../../button/esm';
|
|
5
5
|
|
|
6
|
-
var defaultColors = {"primary":"icon-button__primary_4tbui","secondary":"icon-button__secondary_4tbui","transparent":"icon-button__transparent_4tbui","negative":"icon-button__negative_4tbui","tertiary":"icon-button__tertiary_4tbui","component":"icon-button__component_4tbui","loader":"icon-button__loader_4tbui"};
|
|
6
|
+
var defaultColors = {"primary":"icon-button__primary_4tbui","secondary":"icon-button__secondary_4tbui","transparent":"icon-button__transparent_4tbui","negative":"icon-button__negative_4tbui","tertiary":"icon-button__tertiary_4tbui","transparentBg":"icon-button__transparentBg_4tbui","component":"icon-button__component_4tbui","loader":"icon-button__loader_4tbui"};
|
|
7
7
|
require('./default.css');
|
|
8
8
|
|
|
9
9
|
var styles = {"size-24":"icon-button__size-24_1s5jk","size-32":"icon-button__size-32_1s5jk","size-40":"icon-button__size-40_1s5jk","size-48":"icon-button__size-48_1s5jk","size-56":"icon-button__size-56_1s5jk","iconWrapper":"icon-button__iconWrapper_1s5jk","center":"icon-button__center_1s5jk","left":"icon-button__left_1s5jk","right":"icon-button__right_1s5jk","icon":"icon-button__icon_1s5jk"};
|
|
10
10
|
require('./index.css');
|
|
11
11
|
|
|
12
|
-
var invertedColors = {"primary":"icon-button__primary_gkd4v","secondary":"icon-button__secondary_gkd4v","transparent":"icon-button__transparent_gkd4v","negative":"icon-button__negative_gkd4v","tertiary":"icon-button__tertiary_gkd4v","component":"icon-button__component_gkd4v","loader":"icon-button__loader_gkd4v"};
|
|
12
|
+
var invertedColors = {"primary":"icon-button__primary_gkd4v","secondary":"icon-button__secondary_gkd4v","transparent":"icon-button__transparent_gkd4v","negative":"icon-button__negative_gkd4v","tertiary":"icon-button__tertiary_gkd4v","transparentBg":"icon-button__transparentBg_gkd4v","component":"icon-button__component_gkd4v","loader":"icon-button__loader_gkd4v"};
|
|
13
13
|
require('./inverted.css');
|
|
14
14
|
|
|
15
15
|
var colorStyles = {
|
|
@@ -28,9 +28,10 @@ var SIZE_TO_CLASSNAME_MAP = {
|
|
|
28
28
|
};
|
|
29
29
|
var IconButton = forwardRef(function (_a, ref) {
|
|
30
30
|
var _b;
|
|
31
|
-
var className = _a.className, Icon = _a.icon, _c = _a.view, view = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 48 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.alignIcon, alignIcon = _f === void 0 ? 'center' : _f, restProps = __rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon"]);
|
|
31
|
+
var className = _a.className, Icon = _a.icon, _c = _a.view, view = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 48 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.alignIcon, alignIcon = _f === void 0 ? 'center' : _f, _g = _a.transparentBg, transparentBg = _g === void 0 ? false : _g, restProps = __rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon", "transparentBg"]);
|
|
32
32
|
return (React.createElement(Button, __assign({}, restProps, { ref: ref, view: 'text', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, (_b = {},
|
|
33
33
|
_b[colorStyles[colors].loader] = restProps.loading,
|
|
34
|
+
_b[colorStyles[colors].transparentBg] = transparentBg,
|
|
34
35
|
_b)), size: 's' }),
|
|
35
36
|
React.createElement("span", { className: cn(styles.iconWrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], styles[alignIcon]) }, React.isValidElement(Icon) ? (React.cloneElement(Icon, { className: cn(styles.icon, Icon.props.className) })) : (React.createElement(Icon, { className: styles.icon })))));
|
|
36
37
|
});
|
|
@@ -13,7 +13,13 @@
|
|
|
13
13
|
--color-light-neutral-translucent-700-press: rgba(1, 1, 12, 0.63);
|
|
14
14
|
--color-light-status-negative: #ff4837;
|
|
15
15
|
--color-light-status-negative-hover: #ec2d20;
|
|
16
|
-
--color-light-status-negative-press: #c7241f;
|
|
16
|
+
--color-light-status-negative-press: #c7241f;
|
|
17
|
+
--color-light-text-negative: #ec2d20;
|
|
18
|
+
--color-light-text-primary: rgba(3, 3, 6, 0.88);
|
|
19
|
+
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
20
|
+
--color-light-text-tertiary: rgba(5, 8, 29, 0.38);
|
|
21
|
+
--color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
|
|
22
|
+
--color-light-transparent-default-press: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
17
23
|
--color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3);
|
|
18
24
|
--color-light-graphic-primary-alpha-40: rgba(14, 14, 14, 0.4);
|
|
19
25
|
--color-light-graphic-primary-alpha-50: rgba(14, 14, 14, 0.5);
|
|
@@ -89,7 +95,31 @@
|
|
|
89
95
|
color: var(--icon-button-tertiary-hover-color);
|
|
90
96
|
} .cc-icon-button.icon-button__tertiary_4tbui:active {
|
|
91
97
|
color: var(--icon-button-tertiary-active-color);
|
|
92
|
-
} .cc-icon-button.icon-
|
|
98
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__primary_4tbui {
|
|
99
|
+
color: var(--color-light-text-primary)
|
|
100
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__primary_4tbui:hover {
|
|
101
|
+
background: var(--color-light-transparent-default-hover);
|
|
102
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__primary_4tbui:active {
|
|
103
|
+
background: var(--color-light-transparent-default-press);
|
|
104
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__secondary_4tbui {
|
|
105
|
+
color: var(--color-light-text-secondary)
|
|
106
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__secondary_4tbui:hover {
|
|
107
|
+
background: var(--color-light-transparent-default-hover);
|
|
108
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__secondary_4tbui:active {
|
|
109
|
+
background: var(--color-light-transparent-default-press);
|
|
110
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__negative_4tbui {
|
|
111
|
+
color: var(--color-light-text-negative)
|
|
112
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__negative_4tbui:hover {
|
|
113
|
+
background: var(--color-light-transparent-default-hover);
|
|
114
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__negative_4tbui:active {
|
|
115
|
+
background: var(--color-light-transparent-default-press);
|
|
116
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__tertiary_4tbui {
|
|
117
|
+
color: var(--color-light-text-tertiary)
|
|
118
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__tertiary_4tbui:hover {
|
|
119
|
+
background: var(--color-light-transparent-default-hover);
|
|
120
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__tertiary_4tbui:active {
|
|
121
|
+
background: var(--color-light-transparent-default-press);
|
|
122
|
+
} .cc-icon-button.icon-button__component_4tbui:disabled.icon-button__primary_4tbui {
|
|
93
123
|
color: var(--icon-button-primary-disabled-color)
|
|
94
124
|
} .cc-icon-button.icon-button__component_4tbui:disabled.icon-button__primary_4tbui.icon-button__loader_4tbui {
|
|
95
125
|
color: var(--icon-button-primary-base-color);
|
|
@@ -105,4 +135,6 @@
|
|
|
105
135
|
color: var(--icon-button-tertiary-disabled-color)
|
|
106
136
|
} .cc-icon-button.icon-button__component_4tbui:disabled.icon-button__tertiary_4tbui.icon-button__loader_4tbui {
|
|
107
137
|
color: var(--icon-button-tertiary-base-color);
|
|
108
|
-
}
|
|
138
|
+
} .cc-icon-button.icon-button__component_4tbui:disabled.icon-button__transparentBg_4tbui {
|
|
139
|
+
background: transparent;
|
|
140
|
+
}
|
|
@@ -7,7 +7,13 @@
|
|
|
7
7
|
--color-light-neutral-translucent-500-inverted: rgba(228, 228, 251, 0.28);
|
|
8
8
|
--color-light-status-negative-inverted: #ff4837;
|
|
9
9
|
--color-light-status-negative-inverted-hover: #ff755e;
|
|
10
|
-
--color-light-status-negative-inverted-press: #ff8d79;
|
|
10
|
+
--color-light-status-negative-inverted-press: #ff8d79;
|
|
11
|
+
--color-light-text-negative-inverted: #ff4837;
|
|
12
|
+
--color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
|
|
13
|
+
--color-light-text-secondary-inverted: rgba(238, 238, 251, 0.55);
|
|
14
|
+
--color-light-text-tertiary-inverted: rgba(233, 233, 250, 0.37);
|
|
15
|
+
--color-light-transparent-default-inverted-hover: rgba(214, 214, 229, 0.07);
|
|
16
|
+
--color-light-transparent-default-inverted-press: rgba(225, 225, 248, 0.09); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
11
17
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
12
18
|
} :root {
|
|
13
19
|
} :root {
|
|
@@ -104,7 +110,31 @@
|
|
|
104
110
|
color: var(--icon-button-inverted-tertiary-hover-color);
|
|
105
111
|
} .cc-icon-button.icon-button__tertiary_gkd4v:active {
|
|
106
112
|
color: var(--icon-button-inverted-tertiary-active-color);
|
|
107
|
-
} .cc-icon-button.icon-
|
|
113
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__primary_gkd4v {
|
|
114
|
+
color: var(--color-light-text-primary-inverted)
|
|
115
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__primary_gkd4v:hover {
|
|
116
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
117
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__primary_gkd4v:active {
|
|
118
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
119
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__secondary_gkd4v {
|
|
120
|
+
color: var(--color-light-text-secondary-inverted)
|
|
121
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__secondary_gkd4v:hover {
|
|
122
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
123
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__secondary_gkd4v:active {
|
|
124
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
125
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__negative_gkd4v {
|
|
126
|
+
color: var(--color-light-text-negative-inverted)
|
|
127
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__negative_gkd4v:hover {
|
|
128
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
129
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__negative_gkd4v:active {
|
|
130
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
131
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__tertiary_gkd4v {
|
|
132
|
+
color: var(--color-light-text-tertiary-inverted)
|
|
133
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__tertiary_gkd4v:hover {
|
|
134
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
135
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__tertiary_gkd4v:active {
|
|
136
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
137
|
+
} .cc-icon-button.icon-button__component_gkd4v:disabled.icon-button__primary_gkd4v {
|
|
108
138
|
color: var(--icon-button-inverted-primary-disabled-color)
|
|
109
139
|
} .cc-icon-button.icon-button__component_gkd4v:disabled.icon-button__primary_gkd4v.icon-button__loader_gkd4v {
|
|
110
140
|
color: var(--icon-button-inverted-primary-base-color);
|
|
@@ -120,4 +150,6 @@
|
|
|
120
150
|
color: var(--icon-button-inverted-tertiary-disabled-color)
|
|
121
151
|
} .cc-icon-button.icon-button__component_gkd4v:disabled.icon-button__tertiary_gkd4v.icon-button__loader_gkd4v {
|
|
122
152
|
color: var(--icon-button-inverted-tertiary-base-color);
|
|
123
|
-
}
|
|
153
|
+
} .cc-icon-button.icon-button__component_gkd4v:disabled.icon-button__transparentBg_gkd4v {
|
|
154
|
+
background: transparent;
|
|
155
|
+
}
|
package/icon-button/inverted.css
CHANGED
|
@@ -7,7 +7,13 @@
|
|
|
7
7
|
--color-light-neutral-translucent-500-inverted: rgba(228, 228, 251, 0.28);
|
|
8
8
|
--color-light-status-negative-inverted: #ff4837;
|
|
9
9
|
--color-light-status-negative-inverted-hover: #ff755e;
|
|
10
|
-
--color-light-status-negative-inverted-press: #ff8d79;
|
|
10
|
+
--color-light-status-negative-inverted-press: #ff8d79;
|
|
11
|
+
--color-light-text-negative-inverted: #ff4837;
|
|
12
|
+
--color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
|
|
13
|
+
--color-light-text-secondary-inverted: rgba(238, 238, 251, 0.55);
|
|
14
|
+
--color-light-text-tertiary-inverted: rgba(233, 233, 250, 0.37);
|
|
15
|
+
--color-light-transparent-default-inverted-hover: rgba(214, 214, 229, 0.07);
|
|
16
|
+
--color-light-transparent-default-inverted-press: rgba(225, 225, 248, 0.09); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
11
17
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
12
18
|
} :root {
|
|
13
19
|
} :root {
|
|
@@ -104,7 +110,31 @@
|
|
|
104
110
|
color: var(--icon-button-inverted-tertiary-hover-color);
|
|
105
111
|
} .cc-icon-button.icon-button__tertiary_gkd4v:active {
|
|
106
112
|
color: var(--icon-button-inverted-tertiary-active-color);
|
|
107
|
-
} .cc-icon-button.icon-
|
|
113
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__primary_gkd4v {
|
|
114
|
+
color: var(--color-light-text-primary-inverted)
|
|
115
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__primary_gkd4v:hover {
|
|
116
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
117
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__primary_gkd4v:active {
|
|
118
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
119
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__secondary_gkd4v {
|
|
120
|
+
color: var(--color-light-text-secondary-inverted)
|
|
121
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__secondary_gkd4v:hover {
|
|
122
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
123
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__secondary_gkd4v:active {
|
|
124
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
125
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__negative_gkd4v {
|
|
126
|
+
color: var(--color-light-text-negative-inverted)
|
|
127
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__negative_gkd4v:hover {
|
|
128
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
129
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__negative_gkd4v:active {
|
|
130
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
131
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__tertiary_gkd4v {
|
|
132
|
+
color: var(--color-light-text-tertiary-inverted)
|
|
133
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__tertiary_gkd4v:hover {
|
|
134
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
135
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__tertiary_gkd4v:active {
|
|
136
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
137
|
+
} .cc-icon-button.icon-button__component_gkd4v:disabled.icon-button__primary_gkd4v {
|
|
108
138
|
color: var(--icon-button-inverted-primary-disabled-color)
|
|
109
139
|
} .cc-icon-button.icon-button__component_gkd4v:disabled.icon-button__primary_gkd4v.icon-button__loader_gkd4v {
|
|
110
140
|
color: var(--icon-button-inverted-primary-base-color);
|
|
@@ -120,4 +150,6 @@
|
|
|
120
150
|
color: var(--icon-button-inverted-tertiary-disabled-color)
|
|
121
151
|
} .cc-icon-button.icon-button__component_gkd4v:disabled.icon-button__tertiary_gkd4v.icon-button__loader_gkd4v {
|
|
122
152
|
color: var(--icon-button-inverted-tertiary-base-color);
|
|
123
|
-
}
|
|
153
|
+
} .cc-icon-button.icon-button__component_gkd4v:disabled.icon-button__transparentBg_gkd4v {
|
|
154
|
+
background: transparent;
|
|
155
|
+
}
|
|
@@ -22,6 +22,11 @@ type IconButtonProps = {
|
|
|
22
22
|
* Дополнительный класс
|
|
23
23
|
*/
|
|
24
24
|
className?: string;
|
|
25
|
+
/**
|
|
26
|
+
* Включает прозрачный фон
|
|
27
|
+
* @default false
|
|
28
|
+
*/
|
|
29
|
+
transparentBg?: boolean;
|
|
25
30
|
/**
|
|
26
31
|
* Выравнивание иконки
|
|
27
32
|
* @default 'center'
|
|
@@ -56,6 +61,11 @@ declare const IconButton: React.ForwardRefExoticComponent<{
|
|
|
56
61
|
* Дополнительный класс
|
|
57
62
|
*/
|
|
58
63
|
className?: string | undefined;
|
|
64
|
+
/**
|
|
65
|
+
* Включает прозрачный фон
|
|
66
|
+
* @default false
|
|
67
|
+
*/
|
|
68
|
+
transparentBg?: boolean | undefined;
|
|
59
69
|
/**
|
|
60
70
|
* Выравнивание иконки
|
|
61
71
|
* @default 'center'
|
|
@@ -2,13 +2,13 @@ import React, { forwardRef } from 'react';
|
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { Button } from '../../button/modern';
|
|
4
4
|
|
|
5
|
-
const defaultColors = {"primary":"icon-button__primary_4tbui","secondary":"icon-button__secondary_4tbui","transparent":"icon-button__transparent_4tbui","negative":"icon-button__negative_4tbui","tertiary":"icon-button__tertiary_4tbui","component":"icon-button__component_4tbui","loader":"icon-button__loader_4tbui"};
|
|
5
|
+
const defaultColors = {"primary":"icon-button__primary_4tbui","secondary":"icon-button__secondary_4tbui","transparent":"icon-button__transparent_4tbui","negative":"icon-button__negative_4tbui","tertiary":"icon-button__tertiary_4tbui","transparentBg":"icon-button__transparentBg_4tbui","component":"icon-button__component_4tbui","loader":"icon-button__loader_4tbui"};
|
|
6
6
|
require('./default.css');
|
|
7
7
|
|
|
8
8
|
const styles = {"size-24":"icon-button__size-24_1s5jk","size-32":"icon-button__size-32_1s5jk","size-40":"icon-button__size-40_1s5jk","size-48":"icon-button__size-48_1s5jk","size-56":"icon-button__size-56_1s5jk","iconWrapper":"icon-button__iconWrapper_1s5jk","center":"icon-button__center_1s5jk","left":"icon-button__left_1s5jk","right":"icon-button__right_1s5jk","icon":"icon-button__icon_1s5jk"};
|
|
9
9
|
require('./index.css');
|
|
10
10
|
|
|
11
|
-
const invertedColors = {"primary":"icon-button__primary_gkd4v","secondary":"icon-button__secondary_gkd4v","transparent":"icon-button__transparent_gkd4v","negative":"icon-button__negative_gkd4v","tertiary":"icon-button__tertiary_gkd4v","component":"icon-button__component_gkd4v","loader":"icon-button__loader_gkd4v"};
|
|
11
|
+
const invertedColors = {"primary":"icon-button__primary_gkd4v","secondary":"icon-button__secondary_gkd4v","transparent":"icon-button__transparent_gkd4v","negative":"icon-button__negative_gkd4v","tertiary":"icon-button__tertiary_gkd4v","transparentBg":"icon-button__transparentBg_gkd4v","component":"icon-button__component_gkd4v","loader":"icon-button__loader_gkd4v"};
|
|
12
12
|
require('./inverted.css');
|
|
13
13
|
|
|
14
14
|
const colorStyles = {
|
|
@@ -25,8 +25,9 @@ const SIZE_TO_CLASSNAME_MAP = {
|
|
|
25
25
|
48: 'size-48',
|
|
26
26
|
56: 'size-56',
|
|
27
27
|
};
|
|
28
|
-
const IconButton = forwardRef(({ className, icon: Icon, view = 'primary', size = 48, colors = 'default', alignIcon = 'center', ...restProps }, ref) => (React.createElement(Button, { ...restProps, ref: ref, view: 'text', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, {
|
|
28
|
+
const IconButton = forwardRef(({ className, icon: Icon, view = 'primary', size = 48, colors = 'default', alignIcon = 'center', transparentBg = false, ...restProps }, ref) => (React.createElement(Button, { ...restProps, ref: ref, view: 'text', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, {
|
|
29
29
|
[colorStyles[colors].loader]: restProps.loading,
|
|
30
|
+
[colorStyles[colors].transparentBg]: transparentBg,
|
|
30
31
|
}), size: 's' },
|
|
31
32
|
React.createElement("span", { className: cn(styles.iconWrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], styles[alignIcon]) }, React.isValidElement(Icon) ? (React.cloneElement(Icon, { className: cn(styles.icon, Icon.props.className) })) : (React.createElement(Icon, { className: styles.icon }))))));
|
|
32
33
|
|
|
@@ -13,7 +13,13 @@
|
|
|
13
13
|
--color-light-neutral-translucent-700-press: rgba(1, 1, 12, 0.63);
|
|
14
14
|
--color-light-status-negative: #ff4837;
|
|
15
15
|
--color-light-status-negative-hover: #ec2d20;
|
|
16
|
-
--color-light-status-negative-press: #c7241f;
|
|
16
|
+
--color-light-status-negative-press: #c7241f;
|
|
17
|
+
--color-light-text-negative: #ec2d20;
|
|
18
|
+
--color-light-text-primary: rgba(3, 3, 6, 0.88);
|
|
19
|
+
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
20
|
+
--color-light-text-tertiary: rgba(5, 8, 29, 0.38);
|
|
21
|
+
--color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
|
|
22
|
+
--color-light-transparent-default-press: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
17
23
|
--color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3);
|
|
18
24
|
--color-light-graphic-primary-alpha-40: rgba(14, 14, 14, 0.4);
|
|
19
25
|
--color-light-graphic-primary-alpha-50: rgba(14, 14, 14, 0.5);
|
|
@@ -89,7 +95,31 @@
|
|
|
89
95
|
color: var(--icon-button-tertiary-hover-color);
|
|
90
96
|
} .cc-icon-button.icon-button__tertiary_4tbui:active {
|
|
91
97
|
color: var(--icon-button-tertiary-active-color);
|
|
92
|
-
} .cc-icon-button.icon-
|
|
98
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__primary_4tbui {
|
|
99
|
+
color: var(--color-light-text-primary)
|
|
100
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__primary_4tbui:hover {
|
|
101
|
+
background: var(--color-light-transparent-default-hover);
|
|
102
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__primary_4tbui:active {
|
|
103
|
+
background: var(--color-light-transparent-default-press);
|
|
104
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__secondary_4tbui {
|
|
105
|
+
color: var(--color-light-text-secondary)
|
|
106
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__secondary_4tbui:hover {
|
|
107
|
+
background: var(--color-light-transparent-default-hover);
|
|
108
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__secondary_4tbui:active {
|
|
109
|
+
background: var(--color-light-transparent-default-press);
|
|
110
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__negative_4tbui {
|
|
111
|
+
color: var(--color-light-text-negative)
|
|
112
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__negative_4tbui:hover {
|
|
113
|
+
background: var(--color-light-transparent-default-hover);
|
|
114
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__negative_4tbui:active {
|
|
115
|
+
background: var(--color-light-transparent-default-press);
|
|
116
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__tertiary_4tbui {
|
|
117
|
+
color: var(--color-light-text-tertiary)
|
|
118
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__tertiary_4tbui:hover {
|
|
119
|
+
background: var(--color-light-transparent-default-hover);
|
|
120
|
+
} .cc-icon-button.icon-button__transparentBg_4tbui.icon-button__tertiary_4tbui:active {
|
|
121
|
+
background: var(--color-light-transparent-default-press);
|
|
122
|
+
} .cc-icon-button.icon-button__component_4tbui:disabled.icon-button__primary_4tbui {
|
|
93
123
|
color: var(--icon-button-primary-disabled-color)
|
|
94
124
|
} .cc-icon-button.icon-button__component_4tbui:disabled.icon-button__primary_4tbui.icon-button__loader_4tbui {
|
|
95
125
|
color: var(--icon-button-primary-base-color);
|
|
@@ -105,4 +135,6 @@
|
|
|
105
135
|
color: var(--icon-button-tertiary-disabled-color)
|
|
106
136
|
} .cc-icon-button.icon-button__component_4tbui:disabled.icon-button__tertiary_4tbui.icon-button__loader_4tbui {
|
|
107
137
|
color: var(--icon-button-tertiary-base-color);
|
|
108
|
-
}
|
|
138
|
+
} .cc-icon-button.icon-button__component_4tbui:disabled.icon-button__transparentBg_4tbui {
|
|
139
|
+
background: transparent;
|
|
140
|
+
}
|
|
@@ -7,7 +7,13 @@
|
|
|
7
7
|
--color-light-neutral-translucent-500-inverted: rgba(228, 228, 251, 0.28);
|
|
8
8
|
--color-light-status-negative-inverted: #ff4837;
|
|
9
9
|
--color-light-status-negative-inverted-hover: #ff755e;
|
|
10
|
-
--color-light-status-negative-inverted-press: #ff8d79;
|
|
10
|
+
--color-light-status-negative-inverted-press: #ff8d79;
|
|
11
|
+
--color-light-text-negative-inverted: #ff4837;
|
|
12
|
+
--color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
|
|
13
|
+
--color-light-text-secondary-inverted: rgba(238, 238, 251, 0.55);
|
|
14
|
+
--color-light-text-tertiary-inverted: rgba(233, 233, 250, 0.37);
|
|
15
|
+
--color-light-transparent-default-inverted-hover: rgba(214, 214, 229, 0.07);
|
|
16
|
+
--color-light-transparent-default-inverted-press: rgba(225, 225, 248, 0.09); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
11
17
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
12
18
|
} :root {
|
|
13
19
|
} :root {
|
|
@@ -104,7 +110,31 @@
|
|
|
104
110
|
color: var(--icon-button-inverted-tertiary-hover-color);
|
|
105
111
|
} .cc-icon-button.icon-button__tertiary_gkd4v:active {
|
|
106
112
|
color: var(--icon-button-inverted-tertiary-active-color);
|
|
107
|
-
} .cc-icon-button.icon-
|
|
113
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__primary_gkd4v {
|
|
114
|
+
color: var(--color-light-text-primary-inverted)
|
|
115
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__primary_gkd4v:hover {
|
|
116
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
117
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__primary_gkd4v:active {
|
|
118
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
119
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__secondary_gkd4v {
|
|
120
|
+
color: var(--color-light-text-secondary-inverted)
|
|
121
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__secondary_gkd4v:hover {
|
|
122
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
123
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__secondary_gkd4v:active {
|
|
124
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
125
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__negative_gkd4v {
|
|
126
|
+
color: var(--color-light-text-negative-inverted)
|
|
127
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__negative_gkd4v:hover {
|
|
128
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
129
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__negative_gkd4v:active {
|
|
130
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
131
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__tertiary_gkd4v {
|
|
132
|
+
color: var(--color-light-text-tertiary-inverted)
|
|
133
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__tertiary_gkd4v:hover {
|
|
134
|
+
background: var(--color-light-transparent-default-inverted-hover);
|
|
135
|
+
} .cc-icon-button.icon-button__transparentBg_gkd4v.icon-button__tertiary_gkd4v:active {
|
|
136
|
+
background: var(--color-light-transparent-default-inverted-press);
|
|
137
|
+
} .cc-icon-button.icon-button__component_gkd4v:disabled.icon-button__primary_gkd4v {
|
|
108
138
|
color: var(--icon-button-inverted-primary-disabled-color)
|
|
109
139
|
} .cc-icon-button.icon-button__component_gkd4v:disabled.icon-button__primary_gkd4v.icon-button__loader_gkd4v {
|
|
110
140
|
color: var(--icon-button-inverted-primary-base-color);
|
|
@@ -120,4 +150,6 @@
|
|
|
120
150
|
color: var(--icon-button-inverted-tertiary-disabled-color)
|
|
121
151
|
} .cc-icon-button.icon-button__component_gkd4v:disabled.icon-button__tertiary_gkd4v.icon-button__loader_gkd4v {
|
|
122
152
|
color: var(--icon-button-inverted-tertiary-base-color);
|
|
123
|
-
}
|
|
153
|
+
} .cc-icon-button.icon-button__component_gkd4v:disabled.icon-button__transparentBg_gkd4v {
|
|
154
|
+
background: transparent;
|
|
155
|
+
}
|
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
3
3
|
var tslib = require('tslib');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var coreComponentsMq = require('../mq');
|
|
6
|
+
var coreComponentsShared = require('../shared');
|
|
6
7
|
var desktop_Component_desktop = require('./desktop/Component.desktop.js');
|
|
7
8
|
var mobile_Component_mobile = require('./mobile/Component.mobile.js');
|
|
8
9
|
|
|
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
12
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
12
13
|
|
|
13
14
|
var Input = React.forwardRef(function (_a, ref) {
|
|
14
|
-
var _b = _a.breakpoint, breakpoint = _b === void 0 ?
|
|
15
|
+
var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
|
|
15
16
|
var query = "(min-width: ".concat(breakpoint, "px)");
|
|
16
17
|
var isDesktop = coreComponentsMq.useMatchMedia(query, defaultMatchMediaValue)[0];
|
|
17
18
|
var Component = isDesktop ? desktop_Component_desktop.InputDesktop : mobile_Component_mobile.InputMobile;
|