@common-origin/design-system 2.22.0 → 2.23.0

package/dist/client.js

@@ -659,6 +659,40 @@ var radiusByKey = {
   '3xl': radius$4['3xl'],
   circle: radius$4.full
 };
+/** Box's `bg` prop: the grammar's token paths, read from the token at that path. */
+var backgroundByPath = {
+  'surface.base': surface.base,
+  'surface.raised': surface.raised,
+  'surface.scrim': surface.scrim,
+  'color.fill.emphasis': color$a.fill.emphasis,
+  'color.fill.muted': color$a.fill.muted,
+  'color.fill.inverse': color$a.fill.inverse,
+  'color.fill.accent': color$a.fill.accent,
+  'color.fill.accent-hover': color$a.fill['accent-hover'],
+  'color.fill.accent-pressed': color$a.fill['accent-pressed'],
+  'color.fill.accent-muted': color$a.fill['accent-muted'],
+  'color.fill.accent-muted-hover': color$a.fill['accent-muted-hover'],
+  'color.fill.accent-muted-pressed': color$a.fill['accent-muted-pressed'],
+  'color.fill.danger': color$a.fill.danger,
+  'color.fill.danger-hover': color$a.fill['danger-hover'],
+  'color.fill.danger-pressed': color$a.fill['danger-pressed'],
+  'color.fill.danger-muted': color$a.fill['danger-muted'],
+  'color.fill.success': color$a.fill.success,
+  'color.fill.success-muted': color$a.fill['success-muted'],
+  'color.fill.warning': color$a.fill.warning,
+  'color.fill.warning-muted': color$a.fill['warning-muted'],
+  'color.fill.serious': color$a.fill.serious,
+  'color.fill.serious-muted': color$a.fill['serious-muted'],
+  'color.fill.ai-muted': color$a.fill['ai-muted'],
+  'color.fill.disabled': color$a.fill.disabled,
+  'color.fill.default': color$a.fill["default"],
+  'color.fill.default-hover': color$a.fill['default-hover'],
+  'color.fill.default-pressed': color$a.fill['default-pressed'],
+  'color.fill.none': color$a.fill.none,
+  'color.fill.none-hover': color$a.fill['none-hover'],
+  'color.fill.none-pressed': color$a.fill['none-pressed'],
+  'color.fill.inverse-none-hover': color$a.fill['inverse-none-hover']
+};
 /** Box's `bg` prop: the old background keys, read from `surface` and `color.fill`. */
 var backgroundByKey = {
   "default": surface.base,
@@ -739,6 +773,9 @@ var borderColorByKey = {
   error: color$a.border.danger
 };
 
+var backgroundColor = function backgroundColor(bg) {
+  return bg in backgroundByPath ? backgroundByPath[bg] : backgroundByKey[bg];
+};
 var StyledBox = /*#__PURE__*/styled__default.default.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -822,7 +859,7 @@ var StyledBox = /*#__PURE__*/styled__default.default.div.withConfig({
 }, function (props) {
   return props.$borderLeft && styled.css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: ", " solid ", ";"], ["border-left: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderLeft]);
 }, function (props) {
-  return props.$bg && styled.css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundByKey[props.$bg]);
+  return props.$bg && styled.css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor(props.$bg));
 }, function (props) {
   return props.$color && styled.css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), textColorByKey[props.$color]);
 }, function (props) {
@@ -2885,7 +2922,7 @@ var AccountCard = function AccountCard(_a) {
   return jsxRuntime.jsx(Box, {
     minWidth: tokens.component.accountCard.minWidth,
     p: "lg",
-    bg: "subtle",
+    bg: "surface.raised",
     border: "default",
     borderRadius: "xl",
     transition: "box-shadow ".concat(semantic$c.motion.duration.moderate, " ").concat(semantic$c.motion.easing.decelerate),