@common-origin/design-system 1.11.0 → 1.11.3
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.esm.js +3 -3
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2642,7 +2642,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
2642
2642
|
},
|
|
2643
2643
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
2644
2644
|
componentId: "sc-1ddpctx-1"
|
|
2645
|
-
})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width:
|
|
2645
|
+
})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n min-width: 20px;\n min-height: 20px;\n border-radius: ", ";\n border: ", " solid;\n background-color: ", ";\n border-color: ", ";\n cursor: ", ";\n transition: all 150ms ease-out;\n flex-shrink: 0;\n\n /* Hover state */\n ", ":not(:disabled):hover + & {\n border-color: ", ";\n }\n\n /* Focus state */\n ", ":focus-visible + & {\n outline: ", ";\n outline-offset: ", ";\n border-color: ", ";\n }\n\n /* Disabled state */\n ", "\n\n /* Checkmark icon */\n &::after {\n content: '';\n position: absolute;\n display: ", ";\n left: 4px;\n top: 2px;\n width: 4px;\n height: 8px;\n border: solid ", ";\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n }\n\n /* Indeterminate icon (horizontal line) */\n &::before {\n content: '';\n position: absolute;\n display: ", ";\n left: 4px;\n top: 8px;\n width: 10px;\n height: 2px;\n background-color: ", ";\n }\n"], ["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n min-width: 20px;\n min-height: 20px;\n border-radius: ", ";\n border: ", " solid;\n background-color: ", ";\n border-color: ", ";\n cursor: ", ";\n transition: all 150ms ease-out;\n flex-shrink: 0;\n\n /* Hover state */\n ", ":not(:disabled):hover + & {\n border-color: ", ";\n }\n\n /* Focus state */\n ", ":focus-visible + & {\n outline: ", ";\n outline-offset: ", ";\n border-color: ", ";\n }\n\n /* Disabled state */\n ", "\n\n /* Checkmark icon */\n &::after {\n content: '';\n position: absolute;\n display: ", ";\n left: 4px;\n top: 2px;\n width: 4px;\n height: 8px;\n border: solid ", ";\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n }\n\n /* Indeterminate icon (horizontal line) */\n &::before {\n content: '';\n position: absolute;\n display: ", ";\n left: 4px;\n top: 8px;\n width: 10px;\n height: 2px;\n background-color: ", ";\n }\n"
|
|
2646
2646
|
/**
|
|
2647
2647
|
* Container for checkbox with proper spacing and alignment
|
|
2648
2648
|
* 48px min-height for touch target (8px grid aligned)
|
|
@@ -2659,7 +2659,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
2659
2659
|
}, HiddenCheckboxInput, tokensData.component.input.focus.outline, tokensData.component.input.focus.outlineOffset, function (props) {
|
|
2660
2660
|
return props.$state === 'error' ? tokensData.component.input.error.focus.borderColor : tokensData.component.input.focus.borderColor;
|
|
2661
2661
|
}, function (props) {
|
|
2662
|
-
return props.$state === 'disabled' && "\n background-color: ".concat(tokensData.component.input.disabled.backgroundColor, ";\n border-color: ").concat(tokensData.component.input.disabled.borderColor, ";\n
|
|
2662
|
+
return props.$state === 'disabled' && "\n background-color: ".concat(tokensData.component.input.disabled.backgroundColor, ";\n border-color: ").concat(tokensData.component.input.disabled.borderColor, ";\n ");
|
|
2663
2663
|
}, function (props) {
|
|
2664
2664
|
return props.$checked ? 'block' : 'none';
|
|
2665
2665
|
}, tokensData.semantic.color.text.inverse, function (props) {
|
|
@@ -2675,7 +2675,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
2675
2675
|
},
|
|
2676
2676
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
2677
2677
|
componentId: "sc-1ddpctx-2"
|
|
2678
|
-
})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height:
|
|
2678
|
+
})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height: 32px;\n flex-direction: ", ";\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height: 32px;\n flex-direction: ", ";\n user-select: none;\n"
|
|
2679
2679
|
/**
|
|
2680
2680
|
* Label text with proper typography
|
|
2681
2681
|
*/])), tokensData.base.spacing[3], function (props) {
|