@common-origin/design-system 1.12.0 → 1.12.1
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 +29 -28
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +29 -28
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -871,26 +871,26 @@ var templateObject_1$s, templateObject_2$g, templateObject_3$c;
|
|
|
871
871
|
|
|
872
872
|
React.createElement;
|
|
873
873
|
var _a$5 = tokensData.semantic,
|
|
874
|
-
typography$
|
|
874
|
+
typography$1 = _a$5.typography,
|
|
875
875
|
color$4 = _a$5.color;
|
|
876
876
|
var getTypographyStyles = function getTypographyStyles(variant) {
|
|
877
877
|
var styles = {
|
|
878
|
-
display: "font: ".concat(typography$
|
|
879
|
-
h1: "font: ".concat(typography$
|
|
880
|
-
h2: "font: ".concat(typography$
|
|
881
|
-
h3: "font: ".concat(typography$
|
|
882
|
-
h4: "font: ".concat(typography$
|
|
883
|
-
h5: "font: ".concat(typography$
|
|
884
|
-
h6: "font: ".concat(typography$
|
|
885
|
-
subtitle: "font: ".concat(typography$
|
|
886
|
-
body: "font: ".concat(typography$
|
|
887
|
-
small: "font: ".concat(typography$
|
|
888
|
-
overline: "font: ".concat(typography$
|
|
889
|
-
caption: "font: ".concat(typography$
|
|
890
|
-
button1: "font: ".concat(typography$
|
|
891
|
-
button2: "font: ".concat(typography$
|
|
892
|
-
button3: "font: ".concat(typography$
|
|
893
|
-
label: "font: ".concat(typography$
|
|
878
|
+
display: "font: ".concat(typography$1.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
|
|
879
|
+
h1: "font: ".concat(typography$1.h1, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
|
|
880
|
+
h2: "font: ".concat(typography$1.h2, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
881
|
+
h3: "font: ".concat(typography$1.h3, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
882
|
+
h4: "font: ".concat(typography$1.h4, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
883
|
+
h5: "font: ".concat(typography$1.h5, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
|
|
884
|
+
h6: "font: ".concat(typography$1.h6, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
|
|
885
|
+
subtitle: "font: ".concat(typography$1.subtitle, ";"),
|
|
886
|
+
body: "font: ".concat(typography$1.body, ";"),
|
|
887
|
+
small: "font: ".concat(typography$1.small, ";"),
|
|
888
|
+
overline: "font: ".concat(typography$1.overline, ";"),
|
|
889
|
+
caption: "font: ".concat(typography$1.caption, "; text-transform: uppercase;"),
|
|
890
|
+
button1: "font: ".concat(typography$1.button1, ";"),
|
|
891
|
+
button2: "font: ".concat(typography$1.button2, ";"),
|
|
892
|
+
button3: "font: ".concat(typography$1.button3, ";"),
|
|
893
|
+
label: "font: ".concat(typography$1.label, ";")
|
|
894
894
|
};
|
|
895
895
|
return styles[variant] || styles.body;
|
|
896
896
|
};
|
|
@@ -2026,12 +2026,12 @@ var templateObject_1$k, templateObject_2$b, templateObject_3$8, templateObject_4
|
|
|
2026
2026
|
|
|
2027
2027
|
React.createElement;
|
|
2028
2028
|
var _a$4 = tokensData.semantic,
|
|
2029
|
-
typography
|
|
2029
|
+
typography = _a$4.typography,
|
|
2030
2030
|
color$2 = _a$4.color;
|
|
2031
2031
|
var TimeStyled = styled.time.withConfig({
|
|
2032
2032
|
displayName: "DateFormatter__TimeStyled",
|
|
2033
2033
|
componentId: "sc-5464cc-0"
|
|
2034
|
-
})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography
|
|
2034
|
+
})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography.label, color$2.text.subdued);
|
|
2035
2035
|
var DateFormatter = function DateFormatter(_a) {
|
|
2036
2036
|
var dateString = _a.dateString,
|
|
2037
2037
|
_b = _a.formatString,
|
|
@@ -2650,7 +2650,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
2650
2650
|
},
|
|
2651
2651
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
2652
2652
|
componentId: "sc-1ddpctx-1"
|
|
2653
|
-
})(templateObject_2$8 || (templateObject_2$8 = __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:
|
|
2653
|
+
})(templateObject_2$8 || (templateObject_2$8 = __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: 6px;\n top: 3px;\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: 6px;\n top: 3px;\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"
|
|
2654
2654
|
/**
|
|
2655
2655
|
* Container for checkbox with proper spacing and alignment
|
|
2656
2656
|
* 48px min-height for touch target (8px grid aligned)
|
|
@@ -3019,9 +3019,10 @@ var _a = tokensData.base,
|
|
|
3019
3019
|
shadow = _a.shadow,
|
|
3020
3020
|
zIndex = _a.zIndex,
|
|
3021
3021
|
_b = tokensData.semantic,
|
|
3022
|
-
color = _b.color
|
|
3023
|
-
|
|
3024
|
-
border = _b.border
|
|
3022
|
+
color = _b.color;
|
|
3023
|
+
_b.typography;
|
|
3024
|
+
var border = _b.border,
|
|
3025
|
+
input$1 = tokensData.component.input;
|
|
3025
3026
|
var DropdownContainer = styled.div.withConfig({
|
|
3026
3027
|
displayName: "Dropdown__DropdownContainer",
|
|
3027
3028
|
componentId: "sc-kz07c4-0"
|
|
@@ -3032,9 +3033,9 @@ var DropdownTrigger = styled.button.withConfig({
|
|
|
3032
3033
|
},
|
|
3033
3034
|
displayName: "Dropdown__DropdownTrigger",
|
|
3034
3035
|
componentId: "sc-kz07c4-1"
|
|
3035
|
-
})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition:
|
|
3036
|
+
})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n &:disabled {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n cursor: ", ";\n }\n \n ", "\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n &:disabled {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n cursor: ", ";\n }\n \n ", "\n"])), input$1["default"].paddingY, input$1["default"].paddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, input$1.hover.borderColor, input$1.focus.borderColor, input$1.focus.outline, input$1.focus.outlineOffset, input$1.disabled.backgroundColor, input$1.disabled.textColor, input$1.disabled.borderColor, input$1.disabled.cursor, function (_a) {
|
|
3036
3037
|
var $isOpen = _a.$isOpen;
|
|
3037
|
-
return $isOpen && "\n
|
|
3038
|
+
return $isOpen && "\n border-color: ".concat(input$1.focus.borderColor, ";\n ");
|
|
3038
3039
|
});
|
|
3039
3040
|
var DropdownIcon = styled.div.withConfig({
|
|
3040
3041
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3052,7 +3053,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
3052
3053
|
},
|
|
3053
3054
|
displayName: "Dropdown__DropdownMenu",
|
|
3054
3055
|
componentId: "sc-kz07c4-3"
|
|
3055
|
-
})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all 0.15s ease;\n max-height: 300px;\n overflow-y: auto;\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all 0.15s ease;\n max-height: 300px;\n overflow-y: auto;\n"])), zIndex[3],
|
|
3056
|
+
})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all 0.15s ease;\n max-height: 300px;\n overflow-y: auto;\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all 0.15s ease;\n max-height: 300px;\n overflow-y: auto;\n"])), zIndex[3], input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, shadow[3], spacing[1], function (_a) {
|
|
3056
3057
|
var $isOpen = _a.$isOpen;
|
|
3057
3058
|
return $isOpen ? 1 : 0;
|
|
3058
3059
|
}, function (_a) {
|
|
@@ -3068,13 +3069,13 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3068
3069
|
},
|
|
3069
3070
|
displayName: "Dropdown__DropdownOption",
|
|
3070
3071
|
componentId: "sc-kz07c4-4"
|
|
3071
|
-
})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n width: 100%;\n display: block;\n padding: ", " ", ";\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color 0.15s ease;\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus {\n outline: none;\n background-color: ", ";\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"], ["\n width: 100%;\n display: block;\n padding: ", " ", ";\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color 0.15s ease;\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus {\n outline: none;\n background-color: ", ";\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"])),
|
|
3072
|
+
})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n width: 100%;\n display: block;\n padding: ", " ", ";\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color 0.15s ease;\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus {\n outline: none;\n background-color: ", ";\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"], ["\n width: 100%;\n display: block;\n padding: ", " ", ";\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color 0.15s ease;\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus {\n outline: none;\n background-color: ", ";\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"])), input$1["default"].paddingY, input$1["default"].paddingX, function (_a) {
|
|
3072
3073
|
var $isSelected = _a.$isSelected,
|
|
3073
3074
|
$isFocused = _a.$isFocused;
|
|
3074
3075
|
if ($isFocused) return color.background.surface;
|
|
3075
3076
|
if ($isSelected) return color.background.surface;
|
|
3076
3077
|
return 'transparent';
|
|
3077
|
-
},
|
|
3078
|
+
}, input$1["default"].font, input$1["default"].textColor, color.background.surface, color.background.surface, border.subtle);
|
|
3078
3079
|
var Dropdown = function Dropdown(_a) {
|
|
3079
3080
|
var options = _a.options,
|
|
3080
3081
|
value = _a.value,
|