@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.js
CHANGED
|
@@ -873,26 +873,26 @@ var templateObject_1$s, templateObject_2$g, templateObject_3$c;
|
|
|
873
873
|
|
|
874
874
|
React.createElement;
|
|
875
875
|
var _a$5 = tokensData.semantic,
|
|
876
|
-
typography$
|
|
876
|
+
typography$1 = _a$5.typography,
|
|
877
877
|
color$4 = _a$5.color;
|
|
878
878
|
var getTypographyStyles = function getTypographyStyles(variant) {
|
|
879
879
|
var styles = {
|
|
880
|
-
display: "font: ".concat(typography$
|
|
881
|
-
h1: "font: ".concat(typography$
|
|
882
|
-
h2: "font: ".concat(typography$
|
|
883
|
-
h3: "font: ".concat(typography$
|
|
884
|
-
h4: "font: ".concat(typography$
|
|
885
|
-
h5: "font: ".concat(typography$
|
|
886
|
-
h6: "font: ".concat(typography$
|
|
887
|
-
subtitle: "font: ".concat(typography$
|
|
888
|
-
body: "font: ".concat(typography$
|
|
889
|
-
small: "font: ".concat(typography$
|
|
890
|
-
overline: "font: ".concat(typography$
|
|
891
|
-
caption: "font: ".concat(typography$
|
|
892
|
-
button1: "font: ".concat(typography$
|
|
893
|
-
button2: "font: ".concat(typography$
|
|
894
|
-
button3: "font: ".concat(typography$
|
|
895
|
-
label: "font: ".concat(typography$
|
|
880
|
+
display: "font: ".concat(typography$1.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
|
|
881
|
+
h1: "font: ".concat(typography$1.h1, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
|
|
882
|
+
h2: "font: ".concat(typography$1.h2, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
883
|
+
h3: "font: ".concat(typography$1.h3, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
884
|
+
h4: "font: ".concat(typography$1.h4, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
885
|
+
h5: "font: ".concat(typography$1.h5, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
|
|
886
|
+
h6: "font: ".concat(typography$1.h6, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
|
|
887
|
+
subtitle: "font: ".concat(typography$1.subtitle, ";"),
|
|
888
|
+
body: "font: ".concat(typography$1.body, ";"),
|
|
889
|
+
small: "font: ".concat(typography$1.small, ";"),
|
|
890
|
+
overline: "font: ".concat(typography$1.overline, ";"),
|
|
891
|
+
caption: "font: ".concat(typography$1.caption, "; text-transform: uppercase;"),
|
|
892
|
+
button1: "font: ".concat(typography$1.button1, ";"),
|
|
893
|
+
button2: "font: ".concat(typography$1.button2, ";"),
|
|
894
|
+
button3: "font: ".concat(typography$1.button3, ";"),
|
|
895
|
+
label: "font: ".concat(typography$1.label, ";")
|
|
896
896
|
};
|
|
897
897
|
return styles[variant] || styles.body;
|
|
898
898
|
};
|
|
@@ -2028,12 +2028,12 @@ var templateObject_1$k, templateObject_2$b, templateObject_3$8, templateObject_4
|
|
|
2028
2028
|
|
|
2029
2029
|
React.createElement;
|
|
2030
2030
|
var _a$4 = tokensData.semantic,
|
|
2031
|
-
typography
|
|
2031
|
+
typography = _a$4.typography,
|
|
2032
2032
|
color$2 = _a$4.color;
|
|
2033
2033
|
var TimeStyled = styled.time.withConfig({
|
|
2034
2034
|
displayName: "DateFormatter__TimeStyled",
|
|
2035
2035
|
componentId: "sc-5464cc-0"
|
|
2036
|
-
})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography
|
|
2036
|
+
})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography.label, color$2.text.subdued);
|
|
2037
2037
|
var DateFormatter = function DateFormatter(_a) {
|
|
2038
2038
|
var dateString = _a.dateString,
|
|
2039
2039
|
_b = _a.formatString,
|
|
@@ -2652,7 +2652,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
2652
2652
|
},
|
|
2653
2653
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
2654
2654
|
componentId: "sc-1ddpctx-1"
|
|
2655
|
-
})(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:
|
|
2655
|
+
})(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"
|
|
2656
2656
|
/**
|
|
2657
2657
|
* Container for checkbox with proper spacing and alignment
|
|
2658
2658
|
* 48px min-height for touch target (8px grid aligned)
|
|
@@ -3021,9 +3021,10 @@ var _a = tokensData.base,
|
|
|
3021
3021
|
shadow = _a.shadow,
|
|
3022
3022
|
zIndex = _a.zIndex,
|
|
3023
3023
|
_b = tokensData.semantic,
|
|
3024
|
-
color = _b.color
|
|
3025
|
-
|
|
3026
|
-
border = _b.border
|
|
3024
|
+
color = _b.color;
|
|
3025
|
+
_b.typography;
|
|
3026
|
+
var border = _b.border,
|
|
3027
|
+
input$1 = tokensData.component.input;
|
|
3027
3028
|
var DropdownContainer = styled.div.withConfig({
|
|
3028
3029
|
displayName: "Dropdown__DropdownContainer",
|
|
3029
3030
|
componentId: "sc-kz07c4-0"
|
|
@@ -3034,9 +3035,9 @@ var DropdownTrigger = styled.button.withConfig({
|
|
|
3034
3035
|
},
|
|
3035
3036
|
displayName: "Dropdown__DropdownTrigger",
|
|
3036
3037
|
componentId: "sc-kz07c4-1"
|
|
3037
|
-
})(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:
|
|
3038
|
+
})(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) {
|
|
3038
3039
|
var $isOpen = _a.$isOpen;
|
|
3039
|
-
return $isOpen && "\n
|
|
3040
|
+
return $isOpen && "\n border-color: ".concat(input$1.focus.borderColor, ";\n ");
|
|
3040
3041
|
});
|
|
3041
3042
|
var DropdownIcon = styled.div.withConfig({
|
|
3042
3043
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3054,7 +3055,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
3054
3055
|
},
|
|
3055
3056
|
displayName: "Dropdown__DropdownMenu",
|
|
3056
3057
|
componentId: "sc-kz07c4-3"
|
|
3057
|
-
})(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],
|
|
3058
|
+
})(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) {
|
|
3058
3059
|
var $isOpen = _a.$isOpen;
|
|
3059
3060
|
return $isOpen ? 1 : 0;
|
|
3060
3061
|
}, function (_a) {
|
|
@@ -3070,13 +3071,13 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3070
3071
|
},
|
|
3071
3072
|
displayName: "Dropdown__DropdownOption",
|
|
3072
3073
|
componentId: "sc-kz07c4-4"
|
|
3073
|
-
})(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"])),
|
|
3074
|
+
})(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) {
|
|
3074
3075
|
var $isSelected = _a.$isSelected,
|
|
3075
3076
|
$isFocused = _a.$isFocused;
|
|
3076
3077
|
if ($isFocused) return color.background.surface;
|
|
3077
3078
|
if ($isSelected) return color.background.surface;
|
|
3078
3079
|
return 'transparent';
|
|
3079
|
-
},
|
|
3080
|
+
}, input$1["default"].font, input$1["default"].textColor, color.background.surface, color.background.surface, border.subtle);
|
|
3080
3081
|
var Dropdown = function Dropdown(_a) {
|
|
3081
3082
|
var options = _a.options,
|
|
3082
3083
|
value = _a.value,
|