@stenajs-webui/forms 15.5.1 → 15.5.4
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/index.es.js +4 -4
- package/dist/index.js +4 -4
- package/package.json +4 -4
package/dist/index.es.js
CHANGED
|
@@ -75,7 +75,7 @@ function styleInject(css, ref) {
|
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
var css_248z$5 = ".Switch-module_switch__aK2ff {\n --swui-switch-width: 50px;\n --swui-switch-height: var(--swui-field-box-size-medium);\n --swui-switch-animation-time: var(--swui-animation-time-medium);\n --swui-switch-selected-highlight-color: var(--swui-primary-action-color);\n --swui-switch-knob-width: calc(var(--swui-switch-height) - 2px);\n /* Backgrounds */\n --swui-switch-knob-bg-color-enabled: var(--swui-handle-bg-enabled-color);\n --swui-switch-knob-bg-color-disabled: var(--swui-handle-bg-disabled-color);\n --swui-switch-container-bg-color-enabled: var(--swui-field-bg-enabled);\n --swui-switch-container-bg-color-disabled: var(--swui-field-bg-disabled);\n /* Borders */\n --swui-switch-knob-border-color-enabled: var(--swui-separator-color);\n --swui-switch-container-border-color: var(--swui-field-border-color);\n --swui-switch-container-border-color-hover: var(\n --swui-field-border-color-hover\n );\n --swui-switch-container-border-color-disabled: var(\n --swui-field-border-color-disabled\n );\n /* Shadow */\n --swui-switch-knob-shadow-color: var(--swui-field-shadow-color);\n\n display:
|
|
78
|
+
var css_248z$5 = ".Switch-module_switch__aK2ff {\n --swui-switch-width: 50px;\n --swui-switch-height: var(--swui-field-box-size-medium);\n --swui-switch-animation-time: var(--swui-animation-time-medium);\n --swui-switch-selected-highlight-color: var(--swui-primary-action-color);\n --swui-switch-knob-width: calc(var(--swui-switch-height) - 2px);\n /* Backgrounds */\n --swui-switch-knob-bg-color-enabled: var(--swui-handle-bg-enabled-color);\n --swui-switch-knob-bg-color-disabled: var(--swui-handle-bg-disabled-color);\n --swui-switch-container-bg-color-enabled: var(--swui-field-bg-enabled);\n --swui-switch-container-bg-color-disabled: var(--swui-field-bg-disabled);\n /* Borders */\n --swui-switch-knob-border-color-enabled: var(--swui-separator-color);\n --swui-switch-container-border-color: var(--swui-field-border-color);\n --swui-switch-container-border-color-hover: var(\n --swui-field-border-color-hover\n );\n --swui-switch-container-border-color-disabled: var(\n --swui-field-border-color-disabled\n );\n /* Shadow */\n --swui-switch-knob-shadow-color: var(--swui-field-shadow-color);\n\n display: flex;\n flex-direction: row;\n border: 1px solid var(--swui-switch-container-border-color);\n box-sizing: border-box;\n background-color: var(--swui-switch-container-bg-color-enabled);\n height: var(--swui-switch-height);\n width: var(--swui-switch-width);\n border-radius: calc(var(--swui-switch-height) / 2);\n padding: 0;\n margin: 0;\n cursor: pointer;\n transition: background-color var(--swui-switch-animation-time);\n}\n\n .Switch-module_switch__aK2ff:focus {\n outline: 0;\n border: 1px solid var(--swui-switch-selected-highlight-color);\n box-shadow: inset var(--swui-switch-selected-highlight-color) 0 0 4px 0;\n }\n\n .Switch-module_switch__aK2ff:hover {\n border: 1px solid var(--swui-switch-selected-highlight-color);\n }\n\n .Switch-module_switch__aK2ff:disabled {\n cursor: default;\n background-color: var(--swui-switch-container-bg-color-disabled);\n border: 1px solid var(--swui-switch-container-border-color-disabled);\n }\n\n .Switch-module_switch__aK2ff:disabled .Switch-module_knob__1Kx4S {\n background-color: var(--swui-switch-knob-bg-color-disabled);\n }\n\n .Switch-module_switch__aK2ff .Switch-module_filler__184NF {\n flex: none;\n transition: flex var(--swui-switch-animation-time);\n }\n\n .Switch-module_switch__aK2ff .Switch-module_knob__1Kx4S {\n width: var(--swui-switch-knob-width);\n height: var(--swui-switch-knob-width);\n border-radius: 50%;\n background-color: var(--swui-switch-knob-bg-color-enabled);\n box-shadow: var(--swui-switch-knob-shadow-color) 0 0 4px 1px;\n }\n\n.Switch-module_checked__EgDKL {\n border: 1px solid var(--swui-switch-selected-highlight-color);\n background-color: var(--swui-switch-selected-highlight-color);\n}\n\n.Switch-module_checked__EgDKL .Switch-module_filler__184NF {\n flex: 1;\n }\n";
|
|
79
79
|
var styles$5 = {"switch":"Switch-module_switch__aK2ff","knob":"Switch-module_knob__1Kx4S","filler":"Switch-module_filler__184NF","checked":"Switch-module_checked__EgDKL"};
|
|
80
80
|
styleInject(css_248z$5);
|
|
81
81
|
|
|
@@ -98,7 +98,7 @@ var SwitchWithLabel = function (_a) {
|
|
|
98
98
|
React.createElement(Text, { userSelect: "none", color: textColor }, label)))));
|
|
99
99
|
};
|
|
100
100
|
|
|
101
|
-
var css_248z$4 = ".Checkbox-module_checkbox__Ey0_E {\n --swui-checkbox-height: var(--swui-field-box-size-medium);\n --swui-checkbox-height-small: var(--swui-field-box-size-small);\n --swui-checkbox-border-radius: var(--swui-field-border-radius);\n --swui-checkbox-animation-time: var(--swui-animation-time-medium);\n /* Icon */\n --swui-checkbox-icon-color: var(--swui-field-indicator-active-color);\n --swui-checkbox-disabled-icon-color: var(--swui-field-border-color-disabled);\n --swui-checkbox-unchecked-icon-color: var(\n --swui-field-indicator-inactive-color\n );\n /* Background */\n --swui-checkbox-unchecked-bg-color: var(--swui-white);\n --swui-checkbox-checked-bg-color: var(--swui-primary-action-color);\n --swui-checkbox-disabled-bg-color: var(--swui-field-bg-disabled);\n --swui-checkbox-disabled-checked-bg-color: var(--swui-field-bg-disabled);\n /* Border */\n --swui-checkbox-border-color: var(--swui-field-border-color);\n --swui-checkbox-border-hover-color: var(--swui-field-border-color-hover);\n --swui-checkbox-disabled-border-color: var(\n --swui-field-border-color-disabled\n );\n /* Shadow */\n --swui-checkbox-checked-focus-shadow: var(--swui-field-focus-shadow-inverted);\n --swui-checkbox-unchecked-focus-shadow: var(--swui-field-focus-shadow);\n\n -webkit-appearance: none;\n -moz-appearance: none;\n border-radius: var(--swui-checkbox-border-radius);\n outline: none;\n display: inline-block;\n vertical-align: top;\n position: relative;\n margin: 0;\n cursor: pointer;\n border: 1px solid\n var(--current-border-color, var(--swui-checkbox-border-color));\n background: var(--current-bg-color, var(--swui-checkbox-unchecked-bg-color));\n transition: background var(--swui-checkbox-animation-time),\n border-color var(--swui-checkbox-animation-time),\n box-shadow var(--swui-checkbox-animation-time);\n
|
|
101
|
+
var css_248z$4 = ".Checkbox-module_checkbox__Ey0_E {\n --swui-checkbox-height: var(--swui-field-box-size-medium);\n --swui-checkbox-height-small: var(--swui-field-box-size-small);\n --swui-checkbox-border-radius: var(--swui-field-border-radius);\n --swui-checkbox-animation-time: var(--swui-animation-time-medium);\n /* Icon */\n --swui-checkbox-icon-color: var(--swui-field-indicator-active-color);\n --swui-checkbox-disabled-icon-color: var(--swui-field-border-color-disabled);\n --swui-checkbox-unchecked-icon-color: var(\n --swui-field-indicator-inactive-color\n );\n /* Background */\n --swui-checkbox-unchecked-bg-color: var(--swui-white);\n --swui-checkbox-checked-bg-color: var(--swui-primary-action-color);\n --swui-checkbox-disabled-bg-color: var(--swui-field-bg-disabled);\n --swui-checkbox-disabled-checked-bg-color: var(--swui-field-bg-disabled);\n /* Border */\n --swui-checkbox-border-color: var(--swui-field-border-color);\n --swui-checkbox-border-hover-color: var(--swui-field-border-color-hover);\n --swui-checkbox-disabled-border-color: var(\n --swui-field-border-color-disabled\n );\n /* Shadow */\n --swui-checkbox-checked-focus-shadow: var(--swui-field-focus-shadow-inverted);\n --swui-checkbox-unchecked-focus-shadow: var(--swui-field-focus-shadow);\n\n -webkit-appearance: none;\n -moz-appearance: none;\n border-radius: var(--swui-checkbox-border-radius);\n outline: none;\n display: inline-block;\n vertical-align: top;\n position: relative;\n margin: 0;\n cursor: pointer;\n border: 1px solid\n var(--current-border-color, var(--swui-checkbox-border-color));\n background: var(--current-bg-color, var(--swui-checkbox-unchecked-bg-color));\n transition: background var(--swui-checkbox-animation-time),\n border-color var(--swui-checkbox-animation-time),\n box-shadow var(--swui-checkbox-animation-time);\n flex-shrink: 0;\n}\n\n .Checkbox-module_checkbox__Ey0_E.Checkbox-module_standard__1WgNJ {\n width: var(--swui-checkbox-height);\n height: var(--swui-checkbox-height);\n }\n\n .Checkbox-module_checkbox__Ey0_E.Checkbox-module_standard__1WgNJ:after {\n width: 3px;\n height: 6px;\n left: 9px;\n top: 6px;\n }\n\n .Checkbox-module_checkbox__Ey0_E.Checkbox-module_small__IGbRq {\n width: var(--swui-checkbox-height-small);\n height: var(--swui-checkbox-height-small);\n }\n\n .Checkbox-module_checkbox__Ey0_E.Checkbox-module_small__IGbRq:after {\n width: 3px;\n height: 6px;\n left: 5px;\n top: 2px;\n }\n\n .Checkbox-module_checkbox__Ey0_E:after {\n content: \"\";\n display: block;\n position: absolute;\n transition: opacity var(--swui-checkbox-animation-time),\n width var(--swui-checkbox-animation-time),\n top var(--swui-checkbox-animation-time),\n -webkit-transform var(--swui-checkbox-animation-time) var(--d-t-e, ease);\n transition: transform var(--swui-checkbox-animation-time) var(--d-t-e, ease),\n opacity var(--swui-checkbox-animation-time),\n width var(--swui-checkbox-animation-time),\n top var(--swui-checkbox-animation-time);\n transition: transform var(--swui-checkbox-animation-time) var(--d-t-e, ease),\n opacity var(--swui-checkbox-animation-time),\n width var(--swui-checkbox-animation-time),\n top var(--swui-checkbox-animation-time),\n -webkit-transform var(--swui-checkbox-animation-time) var(--d-t-e, ease);\n border: 2px solid\n var(\n --current-checkbox-icon-color,\n var(--swui-checkbox-unchecked-icon-color)\n );\n border-top: 0;\n border-left: 0;\n -webkit-transform: rotate(var(--current-check-rotation, 20deg));\n transform: rotate(var(--current-check-rotation, 20deg));\n box-sizing: content-box;\n }\n\n .Checkbox-module_checkbox__Ey0_E:checked {\n --current-check-rotation: 43deg;\n --current-bg-color: var(--swui-checkbox-checked-bg-color);\n --current-border-color: var(--swui-checkbox-checked-bg-color);\n --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);\n }\n\n .Checkbox-module_checkbox__Ey0_E:checked:after {\n --current-checkbox-icon-color: var(--swui-checkbox-icon-color);\n }\n\n .Checkbox-module_checkbox__Ey0_E:disabled:not(:checked) {\n --current-bg-color: var(--swui-checkbox-disabled-bg-color);\n --current-border-color: var(--swui-checkbox-disabled-border-color);\n }\n\n .Checkbox-module_checkbox__Ey0_E:disabled:not(:checked):after {\n --current-checkbox-icon-color: --swui-checkbox-unchecked-icon-color;\n }\n\n .Checkbox-module_checkbox__Ey0_E:disabled:checked {\n --current-bg-color: var(--swui-checkbox-disabled-checked-bg-color);\n --current-border-color: var(--swui-checkbox-disabled-border-color);\n }\n\n .Checkbox-module_checkbox__Ey0_E:disabled:checked:after {\n --current-checkbox-icon-color: var(--swui-checkbox-disabled-icon-color);\n }\n\n .Checkbox-module_checkbox__Ey0_E:disabled:checked + label {\n }\n\n .Checkbox-module_checkbox__Ey0_E:indeterminate {\n --current-check-rotation: 43deg;\n --current-bg-color: var(--swui-checkbox-checked-bg-color);\n --current-border-color: var(--swui-checkbox-checked-bg-color);\n --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);\n }\n\n .Checkbox-module_checkbox__Ey0_E:indeterminate:after {\n --current-checkbox-icon-color: var(--swui-checkbox-icon-color);\n border-right: 0;\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n width: 6px;\n }\n\n .Checkbox-module_checkbox__Ey0_E:indeterminate.Checkbox-module_standard__1WgNJ:after {\n top: 4px;\n left: 8px;\n }\n\n .Checkbox-module_checkbox__Ey0_E:indeterminate.Checkbox-module_small__IGbRq:after {\n top: 0;\n left: 4px;\n }\n\n .Checkbox-module_checkbox__Ey0_E:indeterminate:disabled:after {\n --current-checkbox-icon-color: var(--swui-checkbox-disabled-icon-color);\n }\n\n .Checkbox-module_checkbox__Ey0_E:hover:not(:checked):not(:disabled) {\n --current-border-color: var(--swui-checkbox-border-hover-color);\n }\n\n .Checkbox-module_checkbox__Ey0_E:focus:checked {\n box-shadow: var(--swui-checkbox-checked-focus-shadow);\n }\n\n .Checkbox-module_checkbox__Ey0_E:focus:not(:checked) {\n box-shadow: var(--swui-checkbox-unchecked-focus-shadow);\n }\n\n .Checkbox-module_checkbox__Ey0_E + label {\n font-size: 14px;\n line-height: var(--swui-checkbox-height);\n display: inline-block;\n vertical-align: top;\n cursor: pointer;\n margin-left: 4px;\n }\n";
|
|
102
102
|
var styles$4 = {"checkbox":"Checkbox-module_checkbox__Ey0_E","standard":"Checkbox-module_standard__1WgNJ","small":"Checkbox-module_small__IGbRq"};
|
|
103
103
|
styleInject(css_248z$4);
|
|
104
104
|
|
|
@@ -146,7 +146,7 @@ var CheckboxWithLabel = function (_a) {
|
|
|
146
146
|
children))));
|
|
147
147
|
};
|
|
148
148
|
|
|
149
|
-
var css_248z$3 = ".RadioButton-module_radiobutton__13XTW {\n /* Sizes */\n --swui-radiobutton-size-standard: var(--swui-field-box-size-medium);\n --swui-radiobutton-size-small: var(--swui-field-box-size-small);\n --swui-radiobutton-animation-time: var(--swui-animation-time-medium);\n /* Icon */\n --swui-radiobutton-icon-color: var(--swui-field-indicator-active-color);\n --swui-radiobutton-disabled-icon-color: var(--swui-separator-color);\n --swui-radiobutton-unchecked-icon-color: var(\n --swui-field-indicator-inactive-color\n );\n /* Background */\n --swui-radiobutton-checked-bg-color: var(--swui-primary-action-color);\n --swui-radiobutton-checked-disabled-bg-color: var(--swui-field-bg-disabled);\n --swui-radiobutton-unchecked-bg-color: var(--swui-white);\n --swui-radiobutton-unchecked-disabled-bg-color: var(--swui-field-bg-disabled);\n /* Border */\n --swui-radiobutton-unchecked-border-color: var(--swui-field-border-color);\n --swui-radiobutton-unchecked-hover-border-color: var(\n --swui-field-border-color-hover\n );\n --swui-radiobutton-disabled-border-color: var(\n --swui-field-border-color-disabled\n );\n /* Shadow */\n --swui-radiobutton-checked-focus-shadow: var(\n --swui-field-focus-shadow-inverted\n );\n --swui-radiobutton-unchecked-focus-shadow: var(--swui-field-focus-shadow);\n\n -webkit-appearance: none;\n -moz-appearance: none;\n outline: none;\n display: inline-block;\n vertical-align: top;\n position: relative;\n margin: 0;\n
|
|
149
|
+
var css_248z$3 = ".RadioButton-module_radiobutton__13XTW {\n /* Sizes */\n --swui-radiobutton-size-standard: var(--swui-field-box-size-medium);\n --swui-radiobutton-size-small: var(--swui-field-box-size-small);\n --swui-radiobutton-animation-time: var(--swui-animation-time-medium);\n /* Icon */\n --swui-radiobutton-icon-color: var(--swui-field-indicator-active-color);\n --swui-radiobutton-disabled-icon-color: var(--swui-separator-color);\n --swui-radiobutton-unchecked-icon-color: var(\n --swui-field-indicator-inactive-color\n );\n /* Background */\n --swui-radiobutton-checked-bg-color: var(--swui-primary-action-color);\n --swui-radiobutton-checked-disabled-bg-color: var(--swui-field-bg-disabled);\n --swui-radiobutton-unchecked-bg-color: var(--swui-white);\n --swui-radiobutton-unchecked-disabled-bg-color: var(--swui-field-bg-disabled);\n /* Border */\n --swui-radiobutton-unchecked-border-color: var(--swui-field-border-color);\n --swui-radiobutton-unchecked-hover-border-color: var(\n --swui-field-border-color-hover\n );\n --swui-radiobutton-disabled-border-color: var(\n --swui-field-border-color-disabled\n );\n /* Shadow */\n --swui-radiobutton-checked-focus-shadow: var(\n --swui-field-focus-shadow-inverted\n );\n --swui-radiobutton-unchecked-focus-shadow: var(--swui-field-focus-shadow);\n\n -webkit-appearance: none;\n -moz-appearance: none;\n outline: none;\n display: inline-block;\n vertical-align: top;\n position: relative;\n margin: 0;\n flex: none;\n cursor: pointer;\n border: 1px solid\n var(--current-border-color, var(--swui-radiobutton-unchecked-border-color));\n border-radius: 50%;\n background: var(\n --current-bg-color,\n var(--swui-radiobutton-unchecked-bg-color)\n );\n transition: background var(--swui-radiobutton-animation-time),\n border-color var(--swui-radiobutton-animation-time),\n box-shadow var(--swui-radiobutton-animation-time);\n}\n\n .RadioButton-module_radiobutton__13XTW.RadioButton-module_standard__PVQ2A {\n height: var(--swui-radiobutton-size-standard);\n width: var(--swui-radiobutton-size-standard);\n }\n\n .RadioButton-module_radiobutton__13XTW.RadioButton-module_standard__PVQ2A:after {\n left: 7px;\n top: 7px;\n }\n\n .RadioButton-module_radiobutton__13XTW.RadioButton-module_small__37EpP {\n height: var(--swui-radiobutton-size-small);\n width: var(--swui-radiobutton-size-small);\n }\n\n .RadioButton-module_radiobutton__13XTW.RadioButton-module_small__37EpP:after {\n left: 3px;\n top: 3px;\n }\n\n .RadioButton-module_radiobutton__13XTW:after {\n content: \"\";\n display: block;\n position: absolute;\n transition: opacity\n var(--current-opacity-time, var(--swui-radiobutton-animation-time))\n var(--current-transform-type, ease),\n -webkit-transform\n var(--current-transform-time, var(--swui-radiobutton-animation-time))\n var(--current-transform-type, ease);\n transition: transform\n var(--current-transform-time, var(--swui-radiobutton-animation-time))\n var(--current-transform-type, ease),\n opacity\n var(--current-opacity-time, var(--swui-radiobutton-animation-time))\n var(--current-transform-type, ease);\n transition: transform\n var(--current-transform-time, var(--swui-radiobutton-animation-time))\n var(--current-transform-type, ease),\n opacity\n var(--current-opacity-time, var(--swui-radiobutton-animation-time))\n var(--current-transform-type, ease),\n -webkit-transform\n var(--current-transform-time, var(--swui-radiobutton-animation-time))\n var(--current-transform-type, ease);\n -webkit-transform: scale(var(--current-scale, 0));\n transform: scale(var(--current-scale, 0));\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(\n --current-icon-color,\n var(--swui-radiobutton-unchecked-icon-color)\n );\n opacity: var(--current-opacity, 0);\n }\n\n .RadioButton-module_radiobutton__13XTW:checked {\n --current-bg-color: var(--swui-radiobutton-checked-bg-color);\n --current-border-color: var(--swui-radiobutton-checked-bg-color);\n --current-opacity-time: var(--swui-radiobutton-animation-time);\n --current-transform-time: 0.6s;\n --current-transform-type: cubic-bezier(0.2, 0.85, 0.32, 1.2);\n --current-opacity: 1;\n --current-scale: 1;\n }\n\n .RadioButton-module_radiobutton__13XTW:checked:after {\n --current-icon-color: var(--swui-radiobutton-icon-color);\n }\n\n .RadioButton-module_radiobutton__13XTW:disabled {\n --current-bg-color: var(--swui-radiobutton-unchecked-disabled-bg-color);\n --current-border-color: var(--swui-radiobutton-disabled-border-color);\n }\n\n .RadioButton-module_radiobutton__13XTW:disabled:checked {\n --current-bg-color: var(--swui-radiobutton-checked-disabled-bg-color);\n }\n\n .RadioButton-module_radiobutton__13XTW:disabled:checked:after {\n --current-icon-color: var(--swui-radiobutton-disabled-icon-color);\n }\n\n .RadioButton-module_radiobutton__13XTW:disabled + label {\n }\n\n .RadioButton-module_radiobutton__13XTW:hover:not(:checked):not(:disabled) {\n --current-border-color: var(\n --swui-radiobutton-unchecked-hover-border-color\n );\n }\n\n .RadioButton-module_radiobutton__13XTW:focus:checked {\n box-shadow: var(--swui-radiobutton-checked-focus-shadow);\n }\n\n .RadioButton-module_radiobutton__13XTW:focus:not(:checked) {\n box-shadow: var(--swui-radiobutton-unchecked-focus-shadow);\n }\n\n .RadioButton-module_radiobutton__13XTW + label {\n font-size: 14px;\n line-height: var(--swui-radiobutton-size-standard);\n display: inline-block;\n vertical-align: top;\n cursor: pointer;\n margin-left: 4px;\n }\n";
|
|
150
150
|
var styles$3 = {"radiobutton":"RadioButton-module_radiobutton__13XTW","standard":"RadioButton-module_standard__PVQ2A","small":"RadioButton-module_small__37EpP"};
|
|
151
151
|
styleInject(css_248z$3);
|
|
152
152
|
|
|
@@ -303,7 +303,7 @@ var useTextInput = function (ref, _a) {
|
|
|
303
303
|
};
|
|
304
304
|
};
|
|
305
305
|
|
|
306
|
-
var css_248z$2 = ".TextInput-module_textInput__241mK {\n --swui-textinput-text-color: var(--swui-field-text-color);\n --swui-textinput-text-color-disabled: var(--swui-field-text-color-disabled);\n --swui-textinput-letter-spacing: var(--swui-field-letter-spacing);\n --swui-textinput-line-height: var(--swui-field-text-line-height);\n --swui-textinput-indent: var(--swui-metrics-indent);\n --swui-textinput-spacing: calc(var(--swui-field-text-spacing) - 1px);\n --swui-textinput-font-size: var(--swui-font-size-inputs);\n --swui-textinput-font-family: var(--swui-font-input);\n --swui-textinput-font-weight: var(--swui-font-weight-inputs);\n --swui-textinput-placeholder-color: var(--swui-field-placeholder-color);\n --swui-textinput-animation-time: var(--swui-animation-time-medium);\n --swui-textinput-icon-color: var(--swui-field-border-color-disabled);\n --swui-textinput-icon-hover-color: var(--swui-primary-action-color);\n --swui-textinput-icon-size: var(--swui-field-icon-size);\n\n /* States */\n --swui-textinput-icon-color-success: var(--swui-state-success-color);\n\n --swui-textinput-bg-loading: var(--swui-state-loading-light-color);\n --swui-textinput-border-color-loading: var(--swui-state-loading-color);\n\n --swui-textinput-bg-modified: var(--swui-state-modified-light-color);\n --swui-textinput-border-color-modified: var(--swui-state-modified-color);\n\n --swui-textinput-bg-warning: var(--swui-state-alert-light-color);\n --swui-textinput-border-color-warning: var(--swui-state-alert-color);\n\n --swui-textinput-bg-error: var(--swui-state-error-light-color);\n --swui-textinput-border-color-error: var(--swui-state-error-color);\n\n /* Background */\n --swui-textinput-bg-color: var(--swui-field-bg-enabled);\n --swui-textinput-bg-color-disabled: var(--swui-field-bg-disabled);\n\n /* Border */\n --swui-textinput-border-radius: var(--swui-field-border-radius);\n --swui-textinput-border-color: var(--swui-field-border-color);\n --swui-textinput-border-color-hover: var(--swui-field-border-color-hover);\n --swui-textinput-border-color-disabled: var(\n --swui-field-border-color-disabled\n );\n\n /* Shadow */\n --swui-textinput-focus-shadow: var(--swui-field-focus-shadow);\n\n /* Current vars */\n --current-bg: var(--swui-textinput-bg-color);\n --current-border-color: var(--swui-textinput-border-color);\n --current-icon-color: var(--swui-textinput-icon-color);\n\n /* Styling */\n display:
|
|
306
|
+
var css_248z$2 = ".TextInput-module_textInput__241mK {\n --swui-textinput-text-color: var(--swui-field-text-color);\n --swui-textinput-text-color-disabled: var(--swui-field-text-color-disabled);\n --swui-textinput-letter-spacing: var(--swui-field-letter-spacing);\n --swui-textinput-line-height: var(--swui-field-text-line-height);\n --swui-textinput-indent: var(--swui-metrics-indent);\n --swui-textinput-spacing: calc(var(--swui-field-text-spacing) - 1px);\n --swui-textinput-font-size: var(--swui-font-size-inputs);\n --swui-textinput-font-family: var(--swui-font-input);\n --swui-textinput-font-weight: var(--swui-font-weight-inputs);\n --swui-textinput-placeholder-color: var(--swui-field-placeholder-color);\n --swui-textinput-animation-time: var(--swui-animation-time-medium);\n --swui-textinput-icon-color: var(--swui-field-border-color-disabled);\n --swui-textinput-icon-hover-color: var(--swui-primary-action-color);\n --swui-textinput-icon-size: var(--swui-field-icon-size);\n\n /* States */\n --swui-textinput-icon-color-success: var(--swui-state-success-color);\n\n --swui-textinput-bg-loading: var(--swui-state-loading-light-color);\n --swui-textinput-border-color-loading: var(--swui-state-loading-color);\n\n --swui-textinput-bg-modified: var(--swui-state-modified-light-color);\n --swui-textinput-border-color-modified: var(--swui-state-modified-color);\n\n --swui-textinput-bg-warning: var(--swui-state-alert-light-color);\n --swui-textinput-border-color-warning: var(--swui-state-alert-color);\n\n --swui-textinput-bg-error: var(--swui-state-error-light-color);\n --swui-textinput-border-color-error: var(--swui-state-error-color);\n\n /* Background */\n --swui-textinput-bg-color: var(--swui-field-bg-enabled);\n --swui-textinput-bg-color-disabled: var(--swui-field-bg-disabled);\n\n /* Border */\n --swui-textinput-border-radius: var(--swui-field-border-radius);\n --swui-textinput-border-color: var(--swui-field-border-color);\n --swui-textinput-border-color-hover: var(--swui-field-border-color-hover);\n --swui-textinput-border-color-disabled: var(\n --swui-field-border-color-disabled\n );\n\n /* Shadow */\n --swui-textinput-focus-shadow: var(--swui-field-focus-shadow);\n\n /* Current vars */\n --current-bg: var(--swui-textinput-bg-color);\n --current-border-color: var(--swui-textinput-border-color);\n --current-icon-color: var(--swui-textinput-icon-color);\n\n /* Styling */\n display: flex;\n width: 100%;\n align-items: center;\n background: var(--current-bg);\n border: 1px solid var(--current-border-color);\n border-radius: var(--swui-textinput-border-radius);\n transition: all var(--swui-textinput-animation-time);\n}\n\n .TextInput-module_textInput__241mK.TextInput-module_textInput__241mK:focus-within {\n box-shadow: var(--swui-textinput-focus-shadow);\n --current-border-color: var(--swui-textinput-border-color-hover);\n --current-bg: var(--swui-textinput-bg-color);\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_input__2k0az {\n letter-spacing: var(--swui-textinput-letter-spacing);\n line-height: var(--swui-textinput-line-height);\n width: 100%;\n padding: var(--swui-textinput-spacing) var(--swui-textinput-indent);\n color: var(--swui-textinput-text-color);\n font-size: var(--swui-textinput-font-size);\n font-family: var(--swui-textinput-font-family);\n font-weight: var(--swui-textinput-font-weight);\n background: var(--swui-hidden);\n border: none;\n min-width: 0; /* https://stackoverflow.com/a/43361500 */\n margin: 0;\n }\n\n /* Safari */\n\n .TextInput-module_textInput__241mK .TextInput-module_input__2k0az:disabled {\n color: var(--swui-textinput-text-color-disabled);\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_input__2k0az::-webkit-input-placeholder {\n color: var(--swui-textinput-placeholder-color);\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_input__2k0az:-ms-input-placeholder {\n color: var(--swui-textinput-placeholder-color);\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_input__2k0az::placeholder {\n color: var(--swui-textinput-placeholder-color);\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_input__2k0az:focus {\n outline: none;\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_input__2k0az::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n /*\n * States\n */\n\n .TextInput-module_textInput__241mK.TextInput-module_standard__UTt4V:hover:not(.TextInput-module_disabled__1uxhM), .TextInput-module_textInput__241mK.TextInput-module_success__12K-z:hover:not(.TextInput-module_disabled__1uxhM) {\n --current-border-color: var(--swui-textinput-border-color-hover);\n }\n\n .TextInput-module_textInput__241mK.TextInput-module_success__12K-z {\n --current-icon-color: var(--swui-textinput-icon-color-success);\n }\n\n .TextInput-module_textInput__241mK.TextInput-module_loading__oczVY {\n --current-bg: var(--swui-textinput-bg-loading);\n --current-border-color: var(--swui-textinput-border-color-loading);\n }\n\n .TextInput-module_textInput__241mK.TextInput-module_modified__2042t {\n --current-bg: var(--swui-textinput-bg-modified);\n --current-border-color: var(--swui-textinput-border-color-modified);\n --current-icon-color: var(--lhds-color-blue-300);\n }\n\n .TextInput-module_textInput__241mK.TextInput-module_error__39qGr {\n --current-bg: var(--swui-textinput-bg-error);\n --current-border-color: var(--swui-textinput-border-color-error);\n --current-icon-color: var(--swui-textinput-border-color-error);\n }\n\n .TextInput-module_textInput__241mK.TextInput-module_warning__kpGF8 {\n --current-bg: var(--swui-textinput-bg-warning);\n --current-border-color: var(--swui-textinput-border-color-warning);\n --current-icon-color: var(--swui-textinput-border-color-warning);\n }\n\n .TextInput-module_textInput__241mK.TextInput-module_disabled__1uxhM {\n --current-bg: var(--swui-textinput-bg-color-disabled);\n --current-border-color: var(--swui-textinput-border-color-disabled);\n }\n\n .TextInput-module_textInput__241mK.TextInput-module_textInput__241mK.TextInput-module_hideBorder__1_dYg {\n border: none;\n box-shadow: none;\n background: none;\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_clickable__2fPUX:hover {\n --current-icon-color: var(--swui-textinput-icon-hover-color);\n cursor: pointer;\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_icon__1U2OO {\n transition: color var(--swui-textinput-animation-time);\n color: var(--current-icon-color);\n font-size: var(--swui-textinput-icon-size);\n }\n";
|
|
307
307
|
var styles$2 = {"textInput":"TextInput-module_textInput__241mK","input":"TextInput-module_input__2k0az","standard":"TextInput-module_standard__UTt4V","disabled":"TextInput-module_disabled__1uxhM","success":"TextInput-module_success__12K-z","loading":"TextInput-module_loading__oczVY","modified":"TextInput-module_modified__2042t","error":"TextInput-module_error__39qGr","warning":"TextInput-module_warning__kpGF8","hideBorder":"TextInput-module_hideBorder__1_dYg","clickable":"TextInput-module_clickable__2fPUX","icon":"TextInput-module_icon__1U2OO"};
|
|
308
308
|
styleInject(css_248z$2);
|
|
309
309
|
|
package/dist/index.js
CHANGED
|
@@ -102,7 +102,7 @@ function styleInject(css, ref) {
|
|
|
102
102
|
}
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
-
var css_248z$5 = ".Switch-module_switch__aK2ff {\n --swui-switch-width: 50px;\n --swui-switch-height: var(--swui-field-box-size-medium);\n --swui-switch-animation-time: var(--swui-animation-time-medium);\n --swui-switch-selected-highlight-color: var(--swui-primary-action-color);\n --swui-switch-knob-width: calc(var(--swui-switch-height) - 2px);\n /* Backgrounds */\n --swui-switch-knob-bg-color-enabled: var(--swui-handle-bg-enabled-color);\n --swui-switch-knob-bg-color-disabled: var(--swui-handle-bg-disabled-color);\n --swui-switch-container-bg-color-enabled: var(--swui-field-bg-enabled);\n --swui-switch-container-bg-color-disabled: var(--swui-field-bg-disabled);\n /* Borders */\n --swui-switch-knob-border-color-enabled: var(--swui-separator-color);\n --swui-switch-container-border-color: var(--swui-field-border-color);\n --swui-switch-container-border-color-hover: var(\n --swui-field-border-color-hover\n );\n --swui-switch-container-border-color-disabled: var(\n --swui-field-border-color-disabled\n );\n /* Shadow */\n --swui-switch-knob-shadow-color: var(--swui-field-shadow-color);\n\n display:
|
|
105
|
+
var css_248z$5 = ".Switch-module_switch__aK2ff {\n --swui-switch-width: 50px;\n --swui-switch-height: var(--swui-field-box-size-medium);\n --swui-switch-animation-time: var(--swui-animation-time-medium);\n --swui-switch-selected-highlight-color: var(--swui-primary-action-color);\n --swui-switch-knob-width: calc(var(--swui-switch-height) - 2px);\n /* Backgrounds */\n --swui-switch-knob-bg-color-enabled: var(--swui-handle-bg-enabled-color);\n --swui-switch-knob-bg-color-disabled: var(--swui-handle-bg-disabled-color);\n --swui-switch-container-bg-color-enabled: var(--swui-field-bg-enabled);\n --swui-switch-container-bg-color-disabled: var(--swui-field-bg-disabled);\n /* Borders */\n --swui-switch-knob-border-color-enabled: var(--swui-separator-color);\n --swui-switch-container-border-color: var(--swui-field-border-color);\n --swui-switch-container-border-color-hover: var(\n --swui-field-border-color-hover\n );\n --swui-switch-container-border-color-disabled: var(\n --swui-field-border-color-disabled\n );\n /* Shadow */\n --swui-switch-knob-shadow-color: var(--swui-field-shadow-color);\n\n display: flex;\n flex-direction: row;\n border: 1px solid var(--swui-switch-container-border-color);\n box-sizing: border-box;\n background-color: var(--swui-switch-container-bg-color-enabled);\n height: var(--swui-switch-height);\n width: var(--swui-switch-width);\n border-radius: calc(var(--swui-switch-height) / 2);\n padding: 0;\n margin: 0;\n cursor: pointer;\n transition: background-color var(--swui-switch-animation-time);\n}\n\n .Switch-module_switch__aK2ff:focus {\n outline: 0;\n border: 1px solid var(--swui-switch-selected-highlight-color);\n box-shadow: inset var(--swui-switch-selected-highlight-color) 0 0 4px 0;\n }\n\n .Switch-module_switch__aK2ff:hover {\n border: 1px solid var(--swui-switch-selected-highlight-color);\n }\n\n .Switch-module_switch__aK2ff:disabled {\n cursor: default;\n background-color: var(--swui-switch-container-bg-color-disabled);\n border: 1px solid var(--swui-switch-container-border-color-disabled);\n }\n\n .Switch-module_switch__aK2ff:disabled .Switch-module_knob__1Kx4S {\n background-color: var(--swui-switch-knob-bg-color-disabled);\n }\n\n .Switch-module_switch__aK2ff .Switch-module_filler__184NF {\n flex: none;\n transition: flex var(--swui-switch-animation-time);\n }\n\n .Switch-module_switch__aK2ff .Switch-module_knob__1Kx4S {\n width: var(--swui-switch-knob-width);\n height: var(--swui-switch-knob-width);\n border-radius: 50%;\n background-color: var(--swui-switch-knob-bg-color-enabled);\n box-shadow: var(--swui-switch-knob-shadow-color) 0 0 4px 1px;\n }\n\n.Switch-module_checked__EgDKL {\n border: 1px solid var(--swui-switch-selected-highlight-color);\n background-color: var(--swui-switch-selected-highlight-color);\n}\n\n.Switch-module_checked__EgDKL .Switch-module_filler__184NF {\n flex: 1;\n }\n";
|
|
106
106
|
var styles$5 = {"switch":"Switch-module_switch__aK2ff","knob":"Switch-module_knob__1Kx4S","filler":"Switch-module_filler__184NF","checked":"Switch-module_checked__EgDKL"};
|
|
107
107
|
styleInject(css_248z$5);
|
|
108
108
|
|
|
@@ -125,7 +125,7 @@ var SwitchWithLabel = function (_a) {
|
|
|
125
125
|
React__namespace.createElement(core.Text, { userSelect: "none", color: textColor }, label)))));
|
|
126
126
|
};
|
|
127
127
|
|
|
128
|
-
var css_248z$4 = ".Checkbox-module_checkbox__Ey0_E {\n --swui-checkbox-height: var(--swui-field-box-size-medium);\n --swui-checkbox-height-small: var(--swui-field-box-size-small);\n --swui-checkbox-border-radius: var(--swui-field-border-radius);\n --swui-checkbox-animation-time: var(--swui-animation-time-medium);\n /* Icon */\n --swui-checkbox-icon-color: var(--swui-field-indicator-active-color);\n --swui-checkbox-disabled-icon-color: var(--swui-field-border-color-disabled);\n --swui-checkbox-unchecked-icon-color: var(\n --swui-field-indicator-inactive-color\n );\n /* Background */\n --swui-checkbox-unchecked-bg-color: var(--swui-white);\n --swui-checkbox-checked-bg-color: var(--swui-primary-action-color);\n --swui-checkbox-disabled-bg-color: var(--swui-field-bg-disabled);\n --swui-checkbox-disabled-checked-bg-color: var(--swui-field-bg-disabled);\n /* Border */\n --swui-checkbox-border-color: var(--swui-field-border-color);\n --swui-checkbox-border-hover-color: var(--swui-field-border-color-hover);\n --swui-checkbox-disabled-border-color: var(\n --swui-field-border-color-disabled\n );\n /* Shadow */\n --swui-checkbox-checked-focus-shadow: var(--swui-field-focus-shadow-inverted);\n --swui-checkbox-unchecked-focus-shadow: var(--swui-field-focus-shadow);\n\n -webkit-appearance: none;\n -moz-appearance: none;\n border-radius: var(--swui-checkbox-border-radius);\n outline: none;\n display: inline-block;\n vertical-align: top;\n position: relative;\n margin: 0;\n cursor: pointer;\n border: 1px solid\n var(--current-border-color, var(--swui-checkbox-border-color));\n background: var(--current-bg-color, var(--swui-checkbox-unchecked-bg-color));\n transition: background var(--swui-checkbox-animation-time),\n border-color var(--swui-checkbox-animation-time),\n box-shadow var(--swui-checkbox-animation-time);\n
|
|
128
|
+
var css_248z$4 = ".Checkbox-module_checkbox__Ey0_E {\n --swui-checkbox-height: var(--swui-field-box-size-medium);\n --swui-checkbox-height-small: var(--swui-field-box-size-small);\n --swui-checkbox-border-radius: var(--swui-field-border-radius);\n --swui-checkbox-animation-time: var(--swui-animation-time-medium);\n /* Icon */\n --swui-checkbox-icon-color: var(--swui-field-indicator-active-color);\n --swui-checkbox-disabled-icon-color: var(--swui-field-border-color-disabled);\n --swui-checkbox-unchecked-icon-color: var(\n --swui-field-indicator-inactive-color\n );\n /* Background */\n --swui-checkbox-unchecked-bg-color: var(--swui-white);\n --swui-checkbox-checked-bg-color: var(--swui-primary-action-color);\n --swui-checkbox-disabled-bg-color: var(--swui-field-bg-disabled);\n --swui-checkbox-disabled-checked-bg-color: var(--swui-field-bg-disabled);\n /* Border */\n --swui-checkbox-border-color: var(--swui-field-border-color);\n --swui-checkbox-border-hover-color: var(--swui-field-border-color-hover);\n --swui-checkbox-disabled-border-color: var(\n --swui-field-border-color-disabled\n );\n /* Shadow */\n --swui-checkbox-checked-focus-shadow: var(--swui-field-focus-shadow-inverted);\n --swui-checkbox-unchecked-focus-shadow: var(--swui-field-focus-shadow);\n\n -webkit-appearance: none;\n -moz-appearance: none;\n border-radius: var(--swui-checkbox-border-radius);\n outline: none;\n display: inline-block;\n vertical-align: top;\n position: relative;\n margin: 0;\n cursor: pointer;\n border: 1px solid\n var(--current-border-color, var(--swui-checkbox-border-color));\n background: var(--current-bg-color, var(--swui-checkbox-unchecked-bg-color));\n transition: background var(--swui-checkbox-animation-time),\n border-color var(--swui-checkbox-animation-time),\n box-shadow var(--swui-checkbox-animation-time);\n flex-shrink: 0;\n}\n\n .Checkbox-module_checkbox__Ey0_E.Checkbox-module_standard__1WgNJ {\n width: var(--swui-checkbox-height);\n height: var(--swui-checkbox-height);\n }\n\n .Checkbox-module_checkbox__Ey0_E.Checkbox-module_standard__1WgNJ:after {\n width: 3px;\n height: 6px;\n left: 9px;\n top: 6px;\n }\n\n .Checkbox-module_checkbox__Ey0_E.Checkbox-module_small__IGbRq {\n width: var(--swui-checkbox-height-small);\n height: var(--swui-checkbox-height-small);\n }\n\n .Checkbox-module_checkbox__Ey0_E.Checkbox-module_small__IGbRq:after {\n width: 3px;\n height: 6px;\n left: 5px;\n top: 2px;\n }\n\n .Checkbox-module_checkbox__Ey0_E:after {\n content: \"\";\n display: block;\n position: absolute;\n transition: opacity var(--swui-checkbox-animation-time),\n width var(--swui-checkbox-animation-time),\n top var(--swui-checkbox-animation-time),\n -webkit-transform var(--swui-checkbox-animation-time) var(--d-t-e, ease);\n transition: transform var(--swui-checkbox-animation-time) var(--d-t-e, ease),\n opacity var(--swui-checkbox-animation-time),\n width var(--swui-checkbox-animation-time),\n top var(--swui-checkbox-animation-time);\n transition: transform var(--swui-checkbox-animation-time) var(--d-t-e, ease),\n opacity var(--swui-checkbox-animation-time),\n width var(--swui-checkbox-animation-time),\n top var(--swui-checkbox-animation-time),\n -webkit-transform var(--swui-checkbox-animation-time) var(--d-t-e, ease);\n border: 2px solid\n var(\n --current-checkbox-icon-color,\n var(--swui-checkbox-unchecked-icon-color)\n );\n border-top: 0;\n border-left: 0;\n -webkit-transform: rotate(var(--current-check-rotation, 20deg));\n transform: rotate(var(--current-check-rotation, 20deg));\n box-sizing: content-box;\n }\n\n .Checkbox-module_checkbox__Ey0_E:checked {\n --current-check-rotation: 43deg;\n --current-bg-color: var(--swui-checkbox-checked-bg-color);\n --current-border-color: var(--swui-checkbox-checked-bg-color);\n --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);\n }\n\n .Checkbox-module_checkbox__Ey0_E:checked:after {\n --current-checkbox-icon-color: var(--swui-checkbox-icon-color);\n }\n\n .Checkbox-module_checkbox__Ey0_E:disabled:not(:checked) {\n --current-bg-color: var(--swui-checkbox-disabled-bg-color);\n --current-border-color: var(--swui-checkbox-disabled-border-color);\n }\n\n .Checkbox-module_checkbox__Ey0_E:disabled:not(:checked):after {\n --current-checkbox-icon-color: --swui-checkbox-unchecked-icon-color;\n }\n\n .Checkbox-module_checkbox__Ey0_E:disabled:checked {\n --current-bg-color: var(--swui-checkbox-disabled-checked-bg-color);\n --current-border-color: var(--swui-checkbox-disabled-border-color);\n }\n\n .Checkbox-module_checkbox__Ey0_E:disabled:checked:after {\n --current-checkbox-icon-color: var(--swui-checkbox-disabled-icon-color);\n }\n\n .Checkbox-module_checkbox__Ey0_E:disabled:checked + label {\n }\n\n .Checkbox-module_checkbox__Ey0_E:indeterminate {\n --current-check-rotation: 43deg;\n --current-bg-color: var(--swui-checkbox-checked-bg-color);\n --current-border-color: var(--swui-checkbox-checked-bg-color);\n --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);\n }\n\n .Checkbox-module_checkbox__Ey0_E:indeterminate:after {\n --current-checkbox-icon-color: var(--swui-checkbox-icon-color);\n border-right: 0;\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n width: 6px;\n }\n\n .Checkbox-module_checkbox__Ey0_E:indeterminate.Checkbox-module_standard__1WgNJ:after {\n top: 4px;\n left: 8px;\n }\n\n .Checkbox-module_checkbox__Ey0_E:indeterminate.Checkbox-module_small__IGbRq:after {\n top: 0;\n left: 4px;\n }\n\n .Checkbox-module_checkbox__Ey0_E:indeterminate:disabled:after {\n --current-checkbox-icon-color: var(--swui-checkbox-disabled-icon-color);\n }\n\n .Checkbox-module_checkbox__Ey0_E:hover:not(:checked):not(:disabled) {\n --current-border-color: var(--swui-checkbox-border-hover-color);\n }\n\n .Checkbox-module_checkbox__Ey0_E:focus:checked {\n box-shadow: var(--swui-checkbox-checked-focus-shadow);\n }\n\n .Checkbox-module_checkbox__Ey0_E:focus:not(:checked) {\n box-shadow: var(--swui-checkbox-unchecked-focus-shadow);\n }\n\n .Checkbox-module_checkbox__Ey0_E + label {\n font-size: 14px;\n line-height: var(--swui-checkbox-height);\n display: inline-block;\n vertical-align: top;\n cursor: pointer;\n margin-left: 4px;\n }\n";
|
|
129
129
|
var styles$4 = {"checkbox":"Checkbox-module_checkbox__Ey0_E","standard":"Checkbox-module_standard__1WgNJ","small":"Checkbox-module_small__IGbRq"};
|
|
130
130
|
styleInject(css_248z$4);
|
|
131
131
|
|
|
@@ -173,7 +173,7 @@ var CheckboxWithLabel = function (_a) {
|
|
|
173
173
|
children))));
|
|
174
174
|
};
|
|
175
175
|
|
|
176
|
-
var css_248z$3 = ".RadioButton-module_radiobutton__13XTW {\n /* Sizes */\n --swui-radiobutton-size-standard: var(--swui-field-box-size-medium);\n --swui-radiobutton-size-small: var(--swui-field-box-size-small);\n --swui-radiobutton-animation-time: var(--swui-animation-time-medium);\n /* Icon */\n --swui-radiobutton-icon-color: var(--swui-field-indicator-active-color);\n --swui-radiobutton-disabled-icon-color: var(--swui-separator-color);\n --swui-radiobutton-unchecked-icon-color: var(\n --swui-field-indicator-inactive-color\n );\n /* Background */\n --swui-radiobutton-checked-bg-color: var(--swui-primary-action-color);\n --swui-radiobutton-checked-disabled-bg-color: var(--swui-field-bg-disabled);\n --swui-radiobutton-unchecked-bg-color: var(--swui-white);\n --swui-radiobutton-unchecked-disabled-bg-color: var(--swui-field-bg-disabled);\n /* Border */\n --swui-radiobutton-unchecked-border-color: var(--swui-field-border-color);\n --swui-radiobutton-unchecked-hover-border-color: var(\n --swui-field-border-color-hover\n );\n --swui-radiobutton-disabled-border-color: var(\n --swui-field-border-color-disabled\n );\n /* Shadow */\n --swui-radiobutton-checked-focus-shadow: var(\n --swui-field-focus-shadow-inverted\n );\n --swui-radiobutton-unchecked-focus-shadow: var(--swui-field-focus-shadow);\n\n -webkit-appearance: none;\n -moz-appearance: none;\n outline: none;\n display: inline-block;\n vertical-align: top;\n position: relative;\n margin: 0;\n
|
|
176
|
+
var css_248z$3 = ".RadioButton-module_radiobutton__13XTW {\n /* Sizes */\n --swui-radiobutton-size-standard: var(--swui-field-box-size-medium);\n --swui-radiobutton-size-small: var(--swui-field-box-size-small);\n --swui-radiobutton-animation-time: var(--swui-animation-time-medium);\n /* Icon */\n --swui-radiobutton-icon-color: var(--swui-field-indicator-active-color);\n --swui-radiobutton-disabled-icon-color: var(--swui-separator-color);\n --swui-radiobutton-unchecked-icon-color: var(\n --swui-field-indicator-inactive-color\n );\n /* Background */\n --swui-radiobutton-checked-bg-color: var(--swui-primary-action-color);\n --swui-radiobutton-checked-disabled-bg-color: var(--swui-field-bg-disabled);\n --swui-radiobutton-unchecked-bg-color: var(--swui-white);\n --swui-radiobutton-unchecked-disabled-bg-color: var(--swui-field-bg-disabled);\n /* Border */\n --swui-radiobutton-unchecked-border-color: var(--swui-field-border-color);\n --swui-radiobutton-unchecked-hover-border-color: var(\n --swui-field-border-color-hover\n );\n --swui-radiobutton-disabled-border-color: var(\n --swui-field-border-color-disabled\n );\n /* Shadow */\n --swui-radiobutton-checked-focus-shadow: var(\n --swui-field-focus-shadow-inverted\n );\n --swui-radiobutton-unchecked-focus-shadow: var(--swui-field-focus-shadow);\n\n -webkit-appearance: none;\n -moz-appearance: none;\n outline: none;\n display: inline-block;\n vertical-align: top;\n position: relative;\n margin: 0;\n flex: none;\n cursor: pointer;\n border: 1px solid\n var(--current-border-color, var(--swui-radiobutton-unchecked-border-color));\n border-radius: 50%;\n background: var(\n --current-bg-color,\n var(--swui-radiobutton-unchecked-bg-color)\n );\n transition: background var(--swui-radiobutton-animation-time),\n border-color var(--swui-radiobutton-animation-time),\n box-shadow var(--swui-radiobutton-animation-time);\n}\n\n .RadioButton-module_radiobutton__13XTW.RadioButton-module_standard__PVQ2A {\n height: var(--swui-radiobutton-size-standard);\n width: var(--swui-radiobutton-size-standard);\n }\n\n .RadioButton-module_radiobutton__13XTW.RadioButton-module_standard__PVQ2A:after {\n left: 7px;\n top: 7px;\n }\n\n .RadioButton-module_radiobutton__13XTW.RadioButton-module_small__37EpP {\n height: var(--swui-radiobutton-size-small);\n width: var(--swui-radiobutton-size-small);\n }\n\n .RadioButton-module_radiobutton__13XTW.RadioButton-module_small__37EpP:after {\n left: 3px;\n top: 3px;\n }\n\n .RadioButton-module_radiobutton__13XTW:after {\n content: \"\";\n display: block;\n position: absolute;\n transition: opacity\n var(--current-opacity-time, var(--swui-radiobutton-animation-time))\n var(--current-transform-type, ease),\n -webkit-transform\n var(--current-transform-time, var(--swui-radiobutton-animation-time))\n var(--current-transform-type, ease);\n transition: transform\n var(--current-transform-time, var(--swui-radiobutton-animation-time))\n var(--current-transform-type, ease),\n opacity\n var(--current-opacity-time, var(--swui-radiobutton-animation-time))\n var(--current-transform-type, ease);\n transition: transform\n var(--current-transform-time, var(--swui-radiobutton-animation-time))\n var(--current-transform-type, ease),\n opacity\n var(--current-opacity-time, var(--swui-radiobutton-animation-time))\n var(--current-transform-type, ease),\n -webkit-transform\n var(--current-transform-time, var(--swui-radiobutton-animation-time))\n var(--current-transform-type, ease);\n -webkit-transform: scale(var(--current-scale, 0));\n transform: scale(var(--current-scale, 0));\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(\n --current-icon-color,\n var(--swui-radiobutton-unchecked-icon-color)\n );\n opacity: var(--current-opacity, 0);\n }\n\n .RadioButton-module_radiobutton__13XTW:checked {\n --current-bg-color: var(--swui-radiobutton-checked-bg-color);\n --current-border-color: var(--swui-radiobutton-checked-bg-color);\n --current-opacity-time: var(--swui-radiobutton-animation-time);\n --current-transform-time: 0.6s;\n --current-transform-type: cubic-bezier(0.2, 0.85, 0.32, 1.2);\n --current-opacity: 1;\n --current-scale: 1;\n }\n\n .RadioButton-module_radiobutton__13XTW:checked:after {\n --current-icon-color: var(--swui-radiobutton-icon-color);\n }\n\n .RadioButton-module_radiobutton__13XTW:disabled {\n --current-bg-color: var(--swui-radiobutton-unchecked-disabled-bg-color);\n --current-border-color: var(--swui-radiobutton-disabled-border-color);\n }\n\n .RadioButton-module_radiobutton__13XTW:disabled:checked {\n --current-bg-color: var(--swui-radiobutton-checked-disabled-bg-color);\n }\n\n .RadioButton-module_radiobutton__13XTW:disabled:checked:after {\n --current-icon-color: var(--swui-radiobutton-disabled-icon-color);\n }\n\n .RadioButton-module_radiobutton__13XTW:disabled + label {\n }\n\n .RadioButton-module_radiobutton__13XTW:hover:not(:checked):not(:disabled) {\n --current-border-color: var(\n --swui-radiobutton-unchecked-hover-border-color\n );\n }\n\n .RadioButton-module_radiobutton__13XTW:focus:checked {\n box-shadow: var(--swui-radiobutton-checked-focus-shadow);\n }\n\n .RadioButton-module_radiobutton__13XTW:focus:not(:checked) {\n box-shadow: var(--swui-radiobutton-unchecked-focus-shadow);\n }\n\n .RadioButton-module_radiobutton__13XTW + label {\n font-size: 14px;\n line-height: var(--swui-radiobutton-size-standard);\n display: inline-block;\n vertical-align: top;\n cursor: pointer;\n margin-left: 4px;\n }\n";
|
|
177
177
|
var styles$3 = {"radiobutton":"RadioButton-module_radiobutton__13XTW","standard":"RadioButton-module_standard__PVQ2A","small":"RadioButton-module_small__37EpP"};
|
|
178
178
|
styleInject(css_248z$3);
|
|
179
179
|
|
|
@@ -330,7 +330,7 @@ var useTextInput = function (ref, _a) {
|
|
|
330
330
|
};
|
|
331
331
|
};
|
|
332
332
|
|
|
333
|
-
var css_248z$2 = ".TextInput-module_textInput__241mK {\n --swui-textinput-text-color: var(--swui-field-text-color);\n --swui-textinput-text-color-disabled: var(--swui-field-text-color-disabled);\n --swui-textinput-letter-spacing: var(--swui-field-letter-spacing);\n --swui-textinput-line-height: var(--swui-field-text-line-height);\n --swui-textinput-indent: var(--swui-metrics-indent);\n --swui-textinput-spacing: calc(var(--swui-field-text-spacing) - 1px);\n --swui-textinput-font-size: var(--swui-font-size-inputs);\n --swui-textinput-font-family: var(--swui-font-input);\n --swui-textinput-font-weight: var(--swui-font-weight-inputs);\n --swui-textinput-placeholder-color: var(--swui-field-placeholder-color);\n --swui-textinput-animation-time: var(--swui-animation-time-medium);\n --swui-textinput-icon-color: var(--swui-field-border-color-disabled);\n --swui-textinput-icon-hover-color: var(--swui-primary-action-color);\n --swui-textinput-icon-size: var(--swui-field-icon-size);\n\n /* States */\n --swui-textinput-icon-color-success: var(--swui-state-success-color);\n\n --swui-textinput-bg-loading: var(--swui-state-loading-light-color);\n --swui-textinput-border-color-loading: var(--swui-state-loading-color);\n\n --swui-textinput-bg-modified: var(--swui-state-modified-light-color);\n --swui-textinput-border-color-modified: var(--swui-state-modified-color);\n\n --swui-textinput-bg-warning: var(--swui-state-alert-light-color);\n --swui-textinput-border-color-warning: var(--swui-state-alert-color);\n\n --swui-textinput-bg-error: var(--swui-state-error-light-color);\n --swui-textinput-border-color-error: var(--swui-state-error-color);\n\n /* Background */\n --swui-textinput-bg-color: var(--swui-field-bg-enabled);\n --swui-textinput-bg-color-disabled: var(--swui-field-bg-disabled);\n\n /* Border */\n --swui-textinput-border-radius: var(--swui-field-border-radius);\n --swui-textinput-border-color: var(--swui-field-border-color);\n --swui-textinput-border-color-hover: var(--swui-field-border-color-hover);\n --swui-textinput-border-color-disabled: var(\n --swui-field-border-color-disabled\n );\n\n /* Shadow */\n --swui-textinput-focus-shadow: var(--swui-field-focus-shadow);\n\n /* Current vars */\n --current-bg: var(--swui-textinput-bg-color);\n --current-border-color: var(--swui-textinput-border-color);\n --current-icon-color: var(--swui-textinput-icon-color);\n\n /* Styling */\n display:
|
|
333
|
+
var css_248z$2 = ".TextInput-module_textInput__241mK {\n --swui-textinput-text-color: var(--swui-field-text-color);\n --swui-textinput-text-color-disabled: var(--swui-field-text-color-disabled);\n --swui-textinput-letter-spacing: var(--swui-field-letter-spacing);\n --swui-textinput-line-height: var(--swui-field-text-line-height);\n --swui-textinput-indent: var(--swui-metrics-indent);\n --swui-textinput-spacing: calc(var(--swui-field-text-spacing) - 1px);\n --swui-textinput-font-size: var(--swui-font-size-inputs);\n --swui-textinput-font-family: var(--swui-font-input);\n --swui-textinput-font-weight: var(--swui-font-weight-inputs);\n --swui-textinput-placeholder-color: var(--swui-field-placeholder-color);\n --swui-textinput-animation-time: var(--swui-animation-time-medium);\n --swui-textinput-icon-color: var(--swui-field-border-color-disabled);\n --swui-textinput-icon-hover-color: var(--swui-primary-action-color);\n --swui-textinput-icon-size: var(--swui-field-icon-size);\n\n /* States */\n --swui-textinput-icon-color-success: var(--swui-state-success-color);\n\n --swui-textinput-bg-loading: var(--swui-state-loading-light-color);\n --swui-textinput-border-color-loading: var(--swui-state-loading-color);\n\n --swui-textinput-bg-modified: var(--swui-state-modified-light-color);\n --swui-textinput-border-color-modified: var(--swui-state-modified-color);\n\n --swui-textinput-bg-warning: var(--swui-state-alert-light-color);\n --swui-textinput-border-color-warning: var(--swui-state-alert-color);\n\n --swui-textinput-bg-error: var(--swui-state-error-light-color);\n --swui-textinput-border-color-error: var(--swui-state-error-color);\n\n /* Background */\n --swui-textinput-bg-color: var(--swui-field-bg-enabled);\n --swui-textinput-bg-color-disabled: var(--swui-field-bg-disabled);\n\n /* Border */\n --swui-textinput-border-radius: var(--swui-field-border-radius);\n --swui-textinput-border-color: var(--swui-field-border-color);\n --swui-textinput-border-color-hover: var(--swui-field-border-color-hover);\n --swui-textinput-border-color-disabled: var(\n --swui-field-border-color-disabled\n );\n\n /* Shadow */\n --swui-textinput-focus-shadow: var(--swui-field-focus-shadow);\n\n /* Current vars */\n --current-bg: var(--swui-textinput-bg-color);\n --current-border-color: var(--swui-textinput-border-color);\n --current-icon-color: var(--swui-textinput-icon-color);\n\n /* Styling */\n display: flex;\n width: 100%;\n align-items: center;\n background: var(--current-bg);\n border: 1px solid var(--current-border-color);\n border-radius: var(--swui-textinput-border-radius);\n transition: all var(--swui-textinput-animation-time);\n}\n\n .TextInput-module_textInput__241mK.TextInput-module_textInput__241mK:focus-within {\n box-shadow: var(--swui-textinput-focus-shadow);\n --current-border-color: var(--swui-textinput-border-color-hover);\n --current-bg: var(--swui-textinput-bg-color);\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_input__2k0az {\n letter-spacing: var(--swui-textinput-letter-spacing);\n line-height: var(--swui-textinput-line-height);\n width: 100%;\n padding: var(--swui-textinput-spacing) var(--swui-textinput-indent);\n color: var(--swui-textinput-text-color);\n font-size: var(--swui-textinput-font-size);\n font-family: var(--swui-textinput-font-family);\n font-weight: var(--swui-textinput-font-weight);\n background: var(--swui-hidden);\n border: none;\n min-width: 0; /* https://stackoverflow.com/a/43361500 */\n margin: 0;\n }\n\n /* Safari */\n\n .TextInput-module_textInput__241mK .TextInput-module_input__2k0az:disabled {\n color: var(--swui-textinput-text-color-disabled);\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_input__2k0az::-webkit-input-placeholder {\n color: var(--swui-textinput-placeholder-color);\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_input__2k0az:-ms-input-placeholder {\n color: var(--swui-textinput-placeholder-color);\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_input__2k0az::placeholder {\n color: var(--swui-textinput-placeholder-color);\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_input__2k0az:focus {\n outline: none;\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_input__2k0az::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n /*\n * States\n */\n\n .TextInput-module_textInput__241mK.TextInput-module_standard__UTt4V:hover:not(.TextInput-module_disabled__1uxhM), .TextInput-module_textInput__241mK.TextInput-module_success__12K-z:hover:not(.TextInput-module_disabled__1uxhM) {\n --current-border-color: var(--swui-textinput-border-color-hover);\n }\n\n .TextInput-module_textInput__241mK.TextInput-module_success__12K-z {\n --current-icon-color: var(--swui-textinput-icon-color-success);\n }\n\n .TextInput-module_textInput__241mK.TextInput-module_loading__oczVY {\n --current-bg: var(--swui-textinput-bg-loading);\n --current-border-color: var(--swui-textinput-border-color-loading);\n }\n\n .TextInput-module_textInput__241mK.TextInput-module_modified__2042t {\n --current-bg: var(--swui-textinput-bg-modified);\n --current-border-color: var(--swui-textinput-border-color-modified);\n --current-icon-color: var(--lhds-color-blue-300);\n }\n\n .TextInput-module_textInput__241mK.TextInput-module_error__39qGr {\n --current-bg: var(--swui-textinput-bg-error);\n --current-border-color: var(--swui-textinput-border-color-error);\n --current-icon-color: var(--swui-textinput-border-color-error);\n }\n\n .TextInput-module_textInput__241mK.TextInput-module_warning__kpGF8 {\n --current-bg: var(--swui-textinput-bg-warning);\n --current-border-color: var(--swui-textinput-border-color-warning);\n --current-icon-color: var(--swui-textinput-border-color-warning);\n }\n\n .TextInput-module_textInput__241mK.TextInput-module_disabled__1uxhM {\n --current-bg: var(--swui-textinput-bg-color-disabled);\n --current-border-color: var(--swui-textinput-border-color-disabled);\n }\n\n .TextInput-module_textInput__241mK.TextInput-module_textInput__241mK.TextInput-module_hideBorder__1_dYg {\n border: none;\n box-shadow: none;\n background: none;\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_clickable__2fPUX:hover {\n --current-icon-color: var(--swui-textinput-icon-hover-color);\n cursor: pointer;\n }\n\n .TextInput-module_textInput__241mK .TextInput-module_icon__1U2OO {\n transition: color var(--swui-textinput-animation-time);\n color: var(--current-icon-color);\n font-size: var(--swui-textinput-icon-size);\n }\n";
|
|
334
334
|
var styles$2 = {"textInput":"TextInput-module_textInput__241mK","input":"TextInput-module_input__2k0az","standard":"TextInput-module_standard__UTt4V","disabled":"TextInput-module_disabled__1uxhM","success":"TextInput-module_success__12K-z","loading":"TextInput-module_loading__oczVY","modified":"TextInput-module_modified__2042t","error":"TextInput-module_error__39qGr","warning":"TextInput-module_warning__kpGF8","hideBorder":"TextInput-module_hideBorder__1_dYg","clickable":"TextInput-module_clickable__2fPUX","icon":"TextInput-module_icon__1U2OO"};
|
|
335
335
|
styleInject(css_248z$2);
|
|
336
336
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stenajs-webui/forms",
|
|
3
|
-
"version": "15.5.
|
|
3
|
+
"version": "15.5.4",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "mattias800",
|
|
6
6
|
"license": "MIT",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"deploy": "gh-pages -d example/build"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@stenajs-webui/core": "15.5.
|
|
31
|
-
"@stenajs-webui/elements": "15.5.
|
|
30
|
+
"@stenajs-webui/core": "15.5.4",
|
|
31
|
+
"@stenajs-webui/elements": "15.5.4",
|
|
32
32
|
"classnames": "^2.3.1",
|
|
33
33
|
"date-fns": "2.26.0"
|
|
34
34
|
},
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"files": [
|
|
75
75
|
"dist"
|
|
76
76
|
],
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "50404266b55275d02a588a27a3822200ea1abfb4"
|
|
78
78
|
}
|