react-minolith 1.0.3 → 1.0.5

package/dist/utilities/emotionStyleUtility/emotionStyleUtility.js

@@ -0,0 +1,218 @@
+"use client";
+import { css as G } from "@emotion/react";
+import { merge as J } from "lodash";
+const u = "minolith-";
+function o(e, t) {
+  return e ? t === "highlighter" ? {
+    default: $(e.default),
+    hover: $(e.hover),
+    focus: $(e.focus),
+    active: $(e.active),
+    disabled: $(e.disabled)
+  } : {
+    default: k(e.default),
+    hover: k(e.hover),
+    focus: k(e.focus),
+    active: k(e.active),
+    disabled: k(e.disabled)
+  } : {
+    default: void 0,
+    hover: void 0,
+    focus: void 0,
+    active: void 0,
+    disabled: void 0
+  };
+}
+function k(e) {
+  if (e)
+    return e.name === "rainbow" ? "transparent !important" : `var(--${u}color-${e.name}-${e.lightness === 5 ? "05" : e.lightness}) !important`;
+}
+function $(e) {
+  if (e && e.name !== "rainbow")
+    return `linear-gradient(
+    transparent 66.66%,
+    var(--${u}color-${e.name}-${e.lightness}) 33.33%
+  )`;
+}
+function C(e) {
+  return e.foreColor || e.backColor || e.highlighter || e.borderColor ? {
+    color: e.foreColor,
+    backgroundColor: e.backColor,
+    backgroundImage: e.highlighter,
+    borderColor: e.borderColor,
+    borderTopColor: e.borderTopColor,
+    borderRightColor: e.borderRightColor,
+    borderBottomColor: e.borderBottomColor,
+    borderLeftColor: e.borderLeftColor
+  } : void 0;
+}
+function L({
+  foreColor: e,
+  backColor: t,
+  highlighter: g,
+  borderColor: r,
+  borderTopColor: i,
+  borderRightColor: d,
+  borderBottomColor: a,
+  borderLeftColor: n
+}) {
+  return (e || t || g || r || i || d || a || n) && {
+    color: e && e.default,
+    backgroundColor: t && t.default,
+    backgroundImage: g && g.default,
+    borderColor: r && r.default,
+    borderTopColor: i && i.default,
+    borderRightColor: d && d.default,
+    borderBottomColor: a && a.default,
+    borderLeftColor: n && n.default,
+    ":hover": C({
+      foreColor: e && e.hover,
+      backColor: t && t.hover,
+      highlighter: g && g.hover,
+      borderColor: r && r.hover,
+      borderTopColor: i && i.hover,
+      borderRightColor: d && d.hover,
+      borderBottomColor: a && a.hover,
+      borderLeftColor: n && n.hover
+    }),
+    ":focus": C({
+      foreColor: e && e.focus,
+      backColor: t && t.focus,
+      highlighter: g && g.focus,
+      borderColor: r && r.focus,
+      borderTopColor: i && i.focus,
+      borderRightColor: d && d.focus,
+      borderBottomColor: a && a.focus,
+      borderLeftColor: n && n.focus
+    }),
+    ":active": C({
+      foreColor: e && e.active,
+      backColor: t && t.active,
+      highlighter: g && g.active,
+      borderColor: r && r.active,
+      borderTopColor: i && i.active,
+      borderRightColor: d && d.active,
+      borderBottomColor: a && a.active,
+      borderLeftColor: n && n.active
+    }),
+    "[disabled]": C({
+      foreColor: e && e.disabled,
+      backColor: t && t.disabled,
+      highlighter: g && g.disabled,
+      borderColor: r && r.disabled,
+      borderTopColor: i && i.disabled,
+      borderRightColor: d && d.disabled,
+      borderBottomColor: a && a.disabled,
+      borderLeftColor: n && n.disabled
+    })
+  };
+}
+function M(e) {
+  if (Object.keys(e).filter(
+    (y) => y === "fore" || y === "back" || y === "highlighter" || y === "border" || y === "positioning" || y === "sizing" || y === "spacing"
+  ).length === 0)
+    return e.css ? e.css : void 0;
+  const r = e.fore && o(e.fore.color), i = e.fore && e.fore.color && o(e.fore.color.light), d = e.fore && e.fore.color && o(e.fore.color.dark), a = e.fore && e.fore.fontSize ? `var(--${u}font-size-${e.fore.fontSize})` : void 0, n = e.fore && e.fore.fontWeight ? `var(--${u}font-weight-${e.fore.fontWeight})` : void 0, c = e.back && o(e.back.color), w = e.back && e.back.color && o(e.back.color.light), R = e.back && e.back.color && o(e.back.color.dark), b = e.highlighter && o(e.highlighter.color, "highlighter"), j = e.highlighter && e.highlighter.color && o(e.highlighter.color.light, "highlighter"), S = e.highlighter && e.highlighter.color && o(e.highlighter.color.dark, "highlighter"), l = e.border && o(e.border.color), h = e.border && e.border.top && o(e.border.top.color), f = e.border && e.border.right && o(e.border.right.color), m = e.border && e.border.bottom && o(e.border.bottom.color), v = e.border && e.border.left && o(e.border.left.color), T = e.border && e.border.color && o(e.border.color.light), D = e.border && e.border.top && e.border.top.color && o(e.border.top.color.light), W = e.border && e.border.right && e.border.right.color && o(e.border.right.color.light), z = e.border && e.border.bottom && e.border.bottom.color && o(e.border.bottom.color.light), P = e.border && e.border.left && e.border.left.color && o(e.border.left.color.light), I = e.border && e.border.color && o(e.border.color.dark), O = e.border && e.border.top && e.border.top.color && o(e.border.top.color.dark), V = e.border && e.border.right && e.border.right.color && o(e.border.right.color.dark), s = e.border && e.border.bottom && e.border.bottom.color && o(e.border.bottom.color.dark), x = e.border && e.border.left && e.border.left.color && o(e.border.left.color.dark), K = C({
+    foreColor: r && r.hover,
+    backColor: c && c.hover,
+    highlighter: b && b.hover,
+    borderColor: l && l.hover,
+    borderTopColor: h && h.hover,
+    borderRightColor: f && f.hover,
+    borderBottomColor: m && m.hover,
+    borderLeftColor: v && v.hover
+  }), U = C({
+    foreColor: r && r.focus,
+    backColor: c && c.focus,
+    highlighter: b && b.focus,
+    borderColor: l && l.focus,
+    borderTopColor: h && h.focus,
+    borderRightColor: f && f.focus,
+    borderBottomColor: m && m.focus,
+    borderLeftColor: v && v.focus
+  }), E = C({
+    foreColor: r && r.active,
+    backColor: c && c.active,
+    highlighter: b && b.active,
+    borderColor: l && l.active,
+    borderTopColor: h && h.active,
+    borderRightColor: f && f.active,
+    borderBottomColor: m && m.active,
+    borderLeftColor: v && v.active
+  }), H = C({
+    foreColor: r && r.disabled,
+    backColor: c && c.disabled,
+    highlighter: b && b.disabled,
+    borderColor: l && l.disabled,
+    borderTopColor: h && h.disabled,
+    borderRightColor: f && f.disabled,
+    borderBottomColor: m && m.disabled,
+    borderLeftColor: v && v.disabled
+  }), q = L({
+    foreColor: i,
+    backColor: w,
+    highlighter: j,
+    borderColor: T,
+    borderTopColor: D,
+    borderRightColor: W,
+    borderBottomColor: z,
+    borderLeftColor: P
+  }), F = L({
+    foreColor: d,
+    backColor: R,
+    highlighter: S,
+    borderColor: I,
+    borderTopColor: O,
+    borderRightColor: V,
+    borderBottomColor: s,
+    borderLeftColor: x
+  }), B = G({
+    color: r && r.default,
+    fontSize: a,
+    fontWeight: n,
+    backgroundColor: c && c.default,
+    backgroundImage: b && b.default,
+    borderColor: l && l.default,
+    borderCollapse: e.border && e.border.collapse ? e.border.collapse === "collapted" ? "collapse" : "separate" : void 0,
+    borderRadius: e.border && e.border.radius ? `var(--${u}border-radius-${e.border.radius})` : void 0,
+    borderStyle: e.border && e.border.style ? e.border.style : void 0,
+    borderWidth: e.border && e.border.width ? `var(--${u}border-width-${e.border.width})` : void 0,
+    borderTopColor: h && h.default,
+    borderTopStyle: e.border && e.border.top && e.border.top.style ? e.border.top.style : void 0,
+    borderTopWidth: e.border && e.border.top && e.border.top.width ? `var(--${u}border-width-${e.border.top.width})` : void 0,
+    borderRightColor: f && f.default,
+    borderRightStyle: e.border && e.border.right && e.border.right.style ? e.border.right.style : void 0,
+    borderRightWidth: e.border && e.border.right && e.border.right.width ? `var(--${u}border-width-${e.border.right.width})` : void 0,
+    borderBottomColor: m && m.default,
+    borderBottomStyle: e.border && e.border.bottom && e.border.bottom.style ? e.border.bottom.style : void 0,
+    borderBottomWidth: e.border && e.border.bottom && e.border.bottom.width ? `var(--${u}border-width-${e.border.bottom.width})` : void 0,
+    borderLeftColor: v && v.default,
+    borderLeftStyle: e.border && e.border.left && e.border.left.style ? e.border.left.style : void 0,
+    borderLeftWidth: e.border && e.border.left && e.border.left.width ? `var(--${u}border-width-${e.border.left.width})` : void 0,
+    margin: e.spacing && e.spacing.margin ? typeof e.spacing.margin == "number" ? `${e.spacing.margin}rem` : typeof e.spacing.margin == "string" ? e.spacing.margin : void 0 : void 0,
+    marginTop: e.spacing && e.spacing.margin && typeof e.spacing.margin == "object" && e.spacing.margin.top ? typeof e.spacing.margin.top == "number" ? `${e.spacing.margin.top}rem` : e.spacing.margin.top : void 0,
+    marginRight: e.spacing && e.spacing.margin && typeof e.spacing.margin == "object" && e.spacing.margin.right ? typeof e.spacing.margin.right == "number" ? `${e.spacing.margin.right}rem` : e.spacing.margin.right : void 0,
+    marginBottom: e.spacing && e.spacing.margin && typeof e.spacing.margin == "object" && e.spacing.margin.bottom ? typeof e.spacing.margin.bottom == "number" ? `${e.spacing.margin.bottom}rem` : e.spacing.margin.bottom : void 0,
+    marginLeft: e.spacing && e.spacing.margin && typeof e.spacing.margin == "object" && e.spacing.margin.left ? typeof e.spacing.margin.left == "number" ? `${e.spacing.margin.left}rem` : e.spacing.margin.left : void 0,
+    padding: e.spacing && e.spacing.padding ? typeof e.spacing.padding == "number" ? `${e.spacing.padding}rem` : typeof e.spacing.padding == "string" ? e.spacing.padding : void 0 : void 0,
+    paddingTop: e.spacing && e.spacing.padding && typeof e.spacing.padding == "object" && e.spacing.padding.top ? typeof e.spacing.padding.top == "number" ? `${e.spacing.padding.top}rem` : e.spacing.padding.top : void 0,
+    paddingRight: e.spacing && e.spacing.padding && typeof e.spacing.padding == "object" && e.spacing.padding.right ? typeof e.spacing.padding.right == "number" ? `${e.spacing.padding.right}rem` : e.spacing.padding.right : void 0,
+    paddingBottom: e.spacing && e.spacing.padding && typeof e.spacing.padding == "object" && e.spacing.padding.bottom ? typeof e.spacing.padding.bottom == "number" ? `${e.spacing.padding.bottom}rem` : e.spacing.padding.bottom : void 0,
+    paddingLeft: e.spacing && e.spacing.padding && typeof e.spacing.padding == "object" && e.spacing.padding.left ? typeof e.spacing.padding.left == "number" ? `${e.spacing.padding.left}rem` : e.spacing.padding.left : void 0,
+    ":hover": K,
+    ":focus": U,
+    ":active": E,
+    "[disabled]": H,
+    "@media (prefers-color-scheme: light)": q,
+    "@media (prefers-color-scheme: dark)": F
+  });
+  return e.css ? J(B, e.css) : B;
+}
+const X = {
+  getColorVariable: k,
+  getEmotionCss: M
+};
+export {
+  X as default
+};
+//# sourceMappingURL=emotionStyleUtility.js.map

package/dist/utilities/emotionStyleUtility/emotionStyleUtility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emotionStyleUtility.js","sources":["../../../src/utilities/emotionStyleUtility/emotionStyleUtility.ts"],"sourcesContent":["\"use client\";\r\nimport {\r\n  BaseComponentProps,\r\n} from \"../../common/models\";\r\nimport { css, CSSObject, Interpolation, Theme } from \"@emotion/react\";\r\nimport { ColorAttributes, ColorName } from \"../../react-minolith\";\r\nimport { merge } from \"lodash\";\r\n\r\nconst cssVariablePrefix = \"minolith-\";\r\n\r\ninterface ComponentStateColorCssProperty {\r\n  default?: string;\r\n  hover?: string;\r\n  focus?: string;\r\n  active?: string;\r\n  disabled?: string;\r\n}\r\n\r\nfunction getColorProps<ColorNameType = ColorName>(\r\n  props?: {\r\n    default?: ColorAttributes<ColorNameType>;\r\n    hover?: ColorAttributes<ColorNameType>;\r\n    focus?: ColorAttributes<ColorNameType>;\r\n    active?: ColorAttributes<ColorNameType>;\r\n    disabled?: ColorAttributes<ColorNameType>;\r\n  },\r\n  mode?: \"highlighter\"\r\n): ComponentStateColorCssProperty {\r\n  if (!props) {\r\n    return {\r\n      default: undefined,\r\n      hover: undefined,\r\n      focus: undefined,\r\n      active: undefined,\r\n      disabled: undefined,\r\n    };\r\n  }\r\n\r\n  if (mode === \"highlighter\") {\r\n    return {\r\n      default: getHighlighterBackgroundVariable(props.default),\r\n      hover: getHighlighterBackgroundVariable(props.hover),\r\n      focus: getHighlighterBackgroundVariable(props.focus),\r\n      active: getHighlighterBackgroundVariable(props.active),\r\n      disabled: getHighlighterBackgroundVariable(props.disabled),\r\n    };\r\n  }\r\n\r\n  return {\r\n    default: getColorVariable(props.default),\r\n    hover: getColorVariable(props.hover),\r\n    focus: getColorVariable(props.focus),\r\n    active: getColorVariable(props.active),\r\n    disabled: getColorVariable(props.disabled),\r\n  };\r\n}\r\n\r\nfunction getColorVariable<ColorNameType = ColorName>(\r\n  colorAttributes?: ColorAttributes<ColorNameType>\r\n): string | undefined {\r\n  if (!colorAttributes) {\r\n    return undefined;\r\n  }\r\n\r\n  if (colorAttributes.name === \"rainbow\") {\r\n    return \"transparent !important\";\r\n  }\r\n\r\n  return `var(--${cssVariablePrefix}color-${colorAttributes.name}-${\r\n    colorAttributes.lightness === 5 ? \"05\" : colorAttributes.lightness\r\n  }) !important`;\r\n}\r\n\r\nfunction getHighlighterBackgroundVariable<ColorNameType>(\r\n  colorAttributes?: ColorAttributes<ColorNameType>\r\n): string | undefined {\r\n  if (!colorAttributes) {\r\n    return undefined;\r\n  }\r\n\r\n  if (colorAttributes.name === \"rainbow\") {\r\n    return undefined;\r\n  }\r\n\r\n  return `linear-gradient(\r\n    transparent 66.66%,\r\n    var(--${cssVariablePrefix}color-${colorAttributes.name}-${colorAttributes.lightness}) 33.33%\r\n  )`;\r\n}\r\n\r\nfunction getCssObject(props: {\r\n  foreColor?: string;\r\n  backColor?: string;\r\n  highlighter?: string;\r\n  borderColor?: string;\r\n  borderTopColor?: string;\r\n  borderRightColor?: string;\r\n  borderBottomColor?: string;\r\n  borderLeftColor?: string;\r\n}): CSSObject | undefined {\r\n  return props.foreColor ||\r\n    props.backColor ||\r\n    props.highlighter ||\r\n    props.borderColor\r\n    ? {\r\n        color: props.foreColor,\r\n        backgroundColor: props.backColor,\r\n        backgroundImage: props.highlighter,\r\n        borderColor: props.borderColor,\r\n        borderTopColor: props.borderTopColor,\r\n        borderRightColor: props.borderRightColor,\r\n        borderBottomColor: props.borderBottomColor,\r\n        borderLeftColor: props.borderLeftColor,\r\n      }\r\n    : undefined;\r\n}\r\n\r\nfunction getSchemeCssObject({\r\n  foreColor,\r\n  backColor,\r\n  highlighter,\r\n  borderColor,\r\n  borderTopColor,\r\n  borderRightColor,\r\n  borderBottomColor,\r\n  borderLeftColor,\r\n}: {\r\n  foreColor?: ComponentStateColorCssProperty;\r\n  backColor?: ComponentStateColorCssProperty;\r\n  highlighter?: ComponentStateColorCssProperty;\r\n  borderColor?: ComponentStateColorCssProperty;\r\n  borderTopColor?: ComponentStateColorCssProperty;\r\n  borderRightColor?: ComponentStateColorCssProperty;\r\n  borderBottomColor?: ComponentStateColorCssProperty;\r\n  borderLeftColor?: ComponentStateColorCssProperty;\r\n}) {\r\n  return (\r\n    (foreColor ||\r\n      backColor ||\r\n      highlighter ||\r\n      borderColor ||\r\n      borderTopColor ||\r\n      borderRightColor ||\r\n      borderBottomColor ||\r\n      borderLeftColor) && {\r\n      color: foreColor && foreColor.default,\r\n      backgroundColor: backColor && backColor.default,\r\n      backgroundImage: highlighter && highlighter.default,\r\n      borderColor: borderColor && borderColor.default,\r\n      borderTopColor: borderTopColor && borderTopColor.default,\r\n      borderRightColor: borderRightColor && borderRightColor.default,\r\n      borderBottomColor: borderBottomColor && borderBottomColor.default,\r\n      borderLeftColor: borderLeftColor && borderLeftColor.default,\r\n      \":hover\": getCssObject({\r\n        foreColor: foreColor && foreColor.hover,\r\n        backColor: backColor && backColor.hover,\r\n        highlighter: highlighter && highlighter.hover,\r\n        borderColor: borderColor && borderColor.hover,\r\n        borderTopColor: borderTopColor && borderTopColor.hover,\r\n        borderRightColor: borderRightColor && borderRightColor.hover,\r\n        borderBottomColor: borderBottomColor && borderBottomColor.hover,\r\n        borderLeftColor: borderLeftColor && borderLeftColor.hover,\r\n      }),\r\n      \":focus\": getCssObject({\r\n        foreColor: foreColor && foreColor.focus,\r\n        backColor: backColor && backColor.focus,\r\n        highlighter: highlighter && highlighter.focus,\r\n        borderColor: borderColor && borderColor.focus,\r\n        borderTopColor: borderTopColor && borderTopColor.focus,\r\n        borderRightColor: borderRightColor && borderRightColor.focus,\r\n        borderBottomColor: borderBottomColor && borderBottomColor.focus,\r\n        borderLeftColor: borderLeftColor && borderLeftColor.focus,\r\n      }),\r\n      \":active\": getCssObject({\r\n        foreColor: foreColor && foreColor.active,\r\n        backColor: backColor && backColor.active,\r\n        highlighter: highlighter && highlighter.active,\r\n        borderColor: borderColor && borderColor.active,\r\n        borderTopColor: borderTopColor && borderTopColor.active,\r\n        borderRightColor: borderRightColor && borderRightColor.active,\r\n        borderBottomColor: borderBottomColor && borderBottomColor.active,\r\n        borderLeftColor: borderLeftColor && borderLeftColor.active,\r\n      }),\r\n      \"[disabled]\": getCssObject({\r\n        foreColor: foreColor && foreColor.disabled,\r\n        backColor: backColor && backColor.disabled,\r\n        highlighter: highlighter && highlighter.disabled,\r\n        borderColor: borderColor && borderColor.disabled,\r\n        borderTopColor: borderTopColor && borderTopColor.disabled,\r\n        borderRightColor: borderRightColor && borderRightColor.disabled,\r\n        borderBottomColor: borderBottomColor && borderBottomColor.disabled,\r\n        borderLeftColor: borderLeftColor && borderLeftColor.disabled,\r\n      }),\r\n    }\r\n  );\r\n}\r\n\r\nfunction getEmotionCss(props: BaseComponentProps): Interpolation<Theme> {\r\n  const keys = Object.keys(props);\r\n\r\n  const baseComponentPropsKeys = keys.filter(\r\n    (key) =>\r\n      key === \"fore\" ||\r\n      key === \"back\" ||\r\n      key === \"highlighter\" ||\r\n      key === \"border\" ||\r\n      key === \"positioning\" ||\r\n      key === \"sizing\" ||\r\n      key === \"spacing\"\r\n  );\r\n\r\n  if (baseComponentPropsKeys.length === 0) {\r\n    if (props.css) {\r\n      return props.css;\r\n    }\r\n    return undefined;\r\n  }\r\n\r\n  //#region fore\r\n  const foreColorBase = props.fore && getColorProps(props.fore.color);\r\n  const foreColorLight =\r\n    props.fore && props.fore.color && getColorProps(props.fore.color.light);\r\n  const foreColorDark =\r\n    props.fore && props.fore.color && getColorProps(props.fore.color.dark);\r\n\r\n  const fontSize =\r\n    props.fore && props.fore.fontSize\r\n      ? `var(--${cssVariablePrefix}font-size-${props.fore.fontSize})`\r\n      : undefined;\r\n\r\n  const fontWeight =\r\n    props.fore && props.fore.fontWeight\r\n      ? `var(--${cssVariablePrefix}font-weight-${props.fore.fontWeight})`\r\n      : undefined;\r\n\r\n  //#endregion fore\r\n\r\n  //#region back\r\n  const backColorBase = props.back && getColorProps(props.back.color);\r\n  const backColorLight =\r\n    props.back && props.back.color && getColorProps(props.back.color.light);\r\n  const backColorDark =\r\n    props.back && props.back.color && getColorProps(props.back.color.dark);\r\n\r\n  //#endregion back\r\n\r\n  //#region highlighter\r\n  const highlighterColorBase =\r\n    props.highlighter && getColorProps(props.highlighter.color, \"highlighter\");\r\n\r\n  const highlighterColorLight =\r\n    props.highlighter &&\r\n    props.highlighter.color &&\r\n    getColorProps(props.highlighter.color.light, \"highlighter\");\r\n\r\n  const highlighterColorDark =\r\n    props.highlighter &&\r\n    props.highlighter.color &&\r\n    getColorProps(props.highlighter.color.dark, \"highlighter\");\r\n\r\n  //#endregion highlighter\r\n\r\n  //#region border\r\n  const borderColorBase = props.border && getColorProps(props.border.color);\r\n\r\n  const borderTopColorBase =\r\n    props.border && props.border.top && getColorProps(props.border.top.color);\r\n\r\n  const borderRightColorBase =\r\n    props.border &&\r\n    props.border.right &&\r\n    getColorProps(props.border.right.color);\r\n\r\n  const borderBottomColorBase =\r\n    props.border &&\r\n    props.border.bottom &&\r\n    getColorProps(props.border.bottom.color);\r\n\r\n  const borderLeftColorBase =\r\n    props.border && props.border.left && getColorProps(props.border.left.color);\r\n  const borderColorLight =\r\n    props.border &&\r\n    props.border.color &&\r\n    getColorProps(props.border.color.light);\r\n\r\n  const borderTopColorLight =\r\n    props.border &&\r\n    props.border.top &&\r\n    props.border.top.color &&\r\n    getColorProps(props.border.top.color.light);\r\n\r\n  const borderRightColorLight =\r\n    props.border &&\r\n    props.border.right &&\r\n    props.border.right.color &&\r\n    getColorProps(props.border.right.color.light);\r\n\r\n  const borderBottomColorLight =\r\n    props.border &&\r\n    props.border.bottom &&\r\n    props.border.bottom.color &&\r\n    getColorProps(props.border.bottom.color.light);\r\n\r\n  const borderLeftColorLight =\r\n    props.border &&\r\n    props.border.left &&\r\n    props.border.left.color &&\r\n    getColorProps(props.border.left.color.light);\r\n\r\n  const borderColorDark =\r\n    props.border &&\r\n    props.border.color &&\r\n    getColorProps(props.border.color.dark);\r\n\r\n  const borderTopColorDark =\r\n    props.border &&\r\n    props.border.top &&\r\n    props.border.top.color &&\r\n    getColorProps(props.border.top.color.dark);\r\n\r\n  const borderRightColorDark =\r\n    props.border &&\r\n    props.border.right &&\r\n    props.border.right.color &&\r\n    getColorProps(props.border.right.color.dark);\r\n\r\n  const borderBottomColorDark =\r\n    props.border &&\r\n    props.border.bottom &&\r\n    props.border.bottom.color &&\r\n    getColorProps(props.border.bottom.color.dark);\r\n\r\n  const borderLeftColorDark =\r\n    props.border &&\r\n    props.border.left &&\r\n    props.border.left.color &&\r\n    getColorProps(props.border.left.color.dark);\r\n\r\n  //#endregion border\r\n\r\n  const hover = getCssObject({\r\n    foreColor: foreColorBase && foreColorBase.hover,\r\n    backColor: backColorBase && backColorBase.hover,\r\n    highlighter: highlighterColorBase && highlighterColorBase.hover,\r\n    borderColor: borderColorBase && borderColorBase.hover,\r\n    borderTopColor: borderTopColorBase && borderTopColorBase.hover,\r\n    borderRightColor: borderRightColorBase && borderRightColorBase.hover,\r\n    borderBottomColor: borderBottomColorBase && borderBottomColorBase.hover,\r\n    borderLeftColor: borderLeftColorBase && borderLeftColorBase.hover,\r\n  });\r\n\r\n  const focus = getCssObject({\r\n    foreColor: foreColorBase && foreColorBase.focus,\r\n    backColor: backColorBase && backColorBase.focus,\r\n    highlighter: highlighterColorBase && highlighterColorBase.focus,\r\n    borderColor: borderColorBase && borderColorBase.focus,\r\n    borderTopColor: borderTopColorBase && borderTopColorBase.focus,\r\n    borderRightColor: borderRightColorBase && borderRightColorBase.focus,\r\n    borderBottomColor: borderBottomColorBase && borderBottomColorBase.focus,\r\n    borderLeftColor: borderLeftColorBase && borderLeftColorBase.focus,\r\n  });\r\n\r\n  const active = getCssObject({\r\n    foreColor: foreColorBase && foreColorBase.active,\r\n    backColor: backColorBase && backColorBase.active,\r\n    highlighter: highlighterColorBase && highlighterColorBase.active,\r\n    borderColor: borderColorBase && borderColorBase.active,\r\n    borderTopColor: borderTopColorBase && borderTopColorBase.active,\r\n    borderRightColor: borderRightColorBase && borderRightColorBase.active,\r\n    borderBottomColor: borderBottomColorBase && borderBottomColorBase.active,\r\n    borderLeftColor: borderLeftColorBase && borderLeftColorBase.active,\r\n  });\r\n\r\n  const disabled = getCssObject({\r\n    foreColor: foreColorBase && foreColorBase.disabled,\r\n    backColor: backColorBase && backColorBase.disabled,\r\n    highlighter: highlighterColorBase && highlighterColorBase.disabled,\r\n    borderColor: borderColorBase && borderColorBase.disabled,\r\n    borderTopColor: borderTopColorBase && borderTopColorBase.disabled,\r\n    borderRightColor: borderRightColorBase && borderRightColorBase.disabled,\r\n    borderBottomColor: borderBottomColorBase && borderBottomColorBase.disabled,\r\n    borderLeftColor: borderLeftColorBase && borderLeftColorBase.disabled,\r\n  });\r\n\r\n  const light = getSchemeCssObject({\r\n    foreColor: foreColorLight,\r\n    backColor: backColorLight,\r\n    highlighter: highlighterColorLight,\r\n    borderColor: borderColorLight,\r\n    borderTopColor: borderTopColorLight,\r\n    borderRightColor: borderRightColorLight,\r\n    borderBottomColor: borderBottomColorLight,\r\n    borderLeftColor: borderLeftColorLight,\r\n  });\r\n\r\n  const dark = getSchemeCssObject({\r\n    foreColor: foreColorDark,\r\n    backColor: backColorDark,\r\n    highlighter: highlighterColorDark,\r\n    borderColor: borderColorDark,\r\n    borderTopColor: borderTopColorDark,\r\n    borderRightColor: borderRightColorDark,\r\n    borderBottomColor: borderBottomColorDark,\r\n    borderLeftColor: borderLeftColorDark,\r\n  });\r\n\r\n  const minolithUtilityStyles = css({\r\n    color: foreColorBase && foreColorBase.default,\r\n    fontSize: fontSize,\r\n    fontWeight: fontWeight,\r\n    backgroundColor: backColorBase && backColorBase.default,\r\n    backgroundImage: highlighterColorBase && highlighterColorBase.default,\r\n    borderColor: borderColorBase && borderColorBase.default,\r\n    borderCollapse:\r\n      props.border && props.border.collapse\r\n        ? props.border.collapse === \"collapted\"\r\n          ? \"collapse\"\r\n          : \"separate\"\r\n        : undefined,\r\n    borderRadius:\r\n      props.border && props.border.radius\r\n        ? `var(--${cssVariablePrefix}border-radius-${props.border.radius})`\r\n        : undefined,\r\n    borderStyle:\r\n      props.border && props.border.style ? props.border.style : undefined,\r\n    borderWidth:\r\n      props.border && props.border.width\r\n        ? `var(--${cssVariablePrefix}border-width-${props.border.width})`\r\n        : undefined,\r\n    borderTopColor: borderTopColorBase && borderTopColorBase.default,\r\n    borderTopStyle:\r\n      props.border && props.border.top && props.border.top.style\r\n        ? props.border.top.style\r\n        : undefined,\r\n    borderTopWidth:\r\n      props.border && props.border.top && props.border.top.width\r\n        ? `var(--${cssVariablePrefix}border-width-${props.border.top.width})`\r\n        : undefined,\r\n    borderRightColor: borderRightColorBase && borderRightColorBase.default,\r\n    borderRightStyle:\r\n      props.border && props.border.right && props.border.right.style\r\n        ? props.border.right.style\r\n        : undefined,\r\n    borderRightWidth:\r\n      props.border && props.border.right && props.border.right.width\r\n        ? `var(--${cssVariablePrefix}border-width-${props.border.right.width})`\r\n        : undefined,\r\n    borderBottomColor: borderBottomColorBase && borderBottomColorBase.default,\r\n    borderBottomStyle:\r\n      props.border && props.border.bottom && props.border.bottom.style\r\n        ? props.border.bottom.style\r\n        : undefined,\r\n    borderBottomWidth:\r\n      props.border && props.border.bottom && props.border.bottom.width\r\n        ? `var(--${cssVariablePrefix}border-width-${props.border.bottom.width})`\r\n        : undefined,\r\n    borderLeftColor: borderLeftColorBase && borderLeftColorBase.default,\r\n    borderLeftStyle:\r\n      props.border && props.border.left && props.border.left.style\r\n        ? props.border.left.style\r\n        : undefined,\r\n    borderLeftWidth:\r\n      props.border && props.border.left && props.border.left.width\r\n        ? `var(--${cssVariablePrefix}border-width-${props.border.left.width})`\r\n        : undefined,\r\n    margin:\r\n      props.spacing && props.spacing.margin\r\n        ? typeof props.spacing.margin === \"number\"\r\n          ? `${props.spacing.margin}rem`\r\n          : typeof props.spacing.margin === \"string\"\r\n          ? props.spacing.margin\r\n          : undefined\r\n        : undefined,\r\n    marginTop:\r\n      props.spacing &&\r\n      props.spacing.margin &&\r\n      typeof props.spacing.margin === \"object\" &&\r\n      props.spacing.margin.top\r\n        ? typeof props.spacing.margin.top === \"number\"\r\n          ? `${props.spacing.margin.top}rem`\r\n          : props.spacing.margin.top\r\n        : undefined,\r\n    marginRight:\r\n      props.spacing &&\r\n      props.spacing.margin &&\r\n      typeof props.spacing.margin === \"object\" &&\r\n      props.spacing.margin.right\r\n        ? typeof props.spacing.margin.right === \"number\"\r\n          ? `${props.spacing.margin.right}rem`\r\n          : props.spacing.margin.right\r\n        : undefined,\r\n    marginBottom:\r\n      props.spacing &&\r\n      props.spacing.margin &&\r\n      typeof props.spacing.margin === \"object\" &&\r\n      props.spacing.margin.bottom\r\n        ? typeof props.spacing.margin.bottom === \"number\"\r\n          ? `${props.spacing.margin.bottom}rem`\r\n          : props.spacing.margin.bottom\r\n        : undefined,\r\n    marginLeft:\r\n      props.spacing &&\r\n      props.spacing.margin &&\r\n      typeof props.spacing.margin === \"object\" &&\r\n      props.spacing.margin.left\r\n        ? typeof props.spacing.margin.left === \"number\"\r\n          ? `${props.spacing.margin.left}rem`\r\n          : props.spacing.margin.left\r\n        : undefined,\r\n    padding:\r\n      props.spacing && props.spacing.padding\r\n        ? typeof props.spacing.padding === \"number\"\r\n          ? `${props.spacing.padding}rem`\r\n          : typeof props.spacing.padding === \"string\"\r\n          ? props.spacing.padding\r\n          : undefined\r\n        : undefined,\r\n    paddingTop:\r\n      props.spacing &&\r\n      props.spacing.padding &&\r\n      typeof props.spacing.padding === \"object\" &&\r\n      props.spacing.padding.top\r\n        ? typeof props.spacing.padding.top === \"number\"\r\n          ? `${props.spacing.padding.top}rem`\r\n          : props.spacing.padding.top\r\n        : undefined,\r\n    paddingRight:\r\n      props.spacing &&\r\n      props.spacing.padding &&\r\n      typeof props.spacing.padding === \"object\" &&\r\n      props.spacing.padding.right\r\n        ? typeof props.spacing.padding.right === \"number\"\r\n          ? `${props.spacing.padding.right}rem`\r\n          : props.spacing.padding.right\r\n        : undefined,\r\n    paddingBottom:\r\n      props.spacing &&\r\n      props.spacing.padding &&\r\n      typeof props.spacing.padding === \"object\" &&\r\n      props.spacing.padding.bottom\r\n        ? typeof props.spacing.padding.bottom === \"number\"\r\n          ? `${props.spacing.padding.bottom}rem`\r\n          : props.spacing.padding.bottom\r\n        : undefined,\r\n    paddingLeft:\r\n      props.spacing &&\r\n      props.spacing.padding &&\r\n      typeof props.spacing.padding === \"object\" &&\r\n      props.spacing.padding.left\r\n        ? typeof props.spacing.padding.left === \"number\"\r\n          ? `${props.spacing.padding.left}rem`\r\n          : props.spacing.padding.left\r\n        : undefined,\r\n    \":hover\": hover,\r\n    \":focus\": focus,\r\n    \":active\": active,\r\n    \"[disabled]\": disabled,\r\n    \"@media (prefers-color-scheme: light)\": light,\r\n    \"@media (prefers-color-scheme: dark)\": dark,\r\n  });\r\n\r\n  if (props.css) {\r\n    return merge(minolithUtilityStyles, props.css);\r\n  }\r\n\r\n  return minolithUtilityStyles;\r\n}\r\n\r\nconst emotionStyleUtility = {\r\n  getColorVariable,\r\n  getEmotionCss,\r\n};\r\n\r\nexport default emotionStyleUtility;\r\n"],"names":[],"mappings":";;;AAQA;AAUA;AAUE;AAWS;AACkD;AACJ;AACA;AACE;AACI;AAItD;AACkC;AACJ;AACA;AACE;AACI;AAxBlC;AACI;AACF;AACA;AACC;AACE;AAqBhB;AAEA;AAGE;AAII;AAON;AAEA;AAGE;AAQO;AAAA;AAAA;AAE8E;AAEvF;AAEA;AAUE;AAII;AACe;AACU;AACA;AACJ;AACG;AACE;AACC;AACF;AAG/B;AAEA;AAA4B;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AAUE;AAQwB;AACU;AACU;AACI;AACJ;AACS;AACM;AACG;AACN;AAC7B;AACa;AACA;AACM;AACA;AACS;AACM;AACG;AACN;AACrD;AACsB;AACa;AACA;AACM;AACA;AACS;AACM;AACG;AACN;AACrD;AACuB;AACY;AACA;AACM;AACA;AACS;AACM;AACG;AACN;AACrD;AAC0B;AACS;AACA;AACM;AACA;AACS;AACM;AACG;AACN;AACrD;AAGP;AAEA;AAcM;AAXgC;AAQxB;AAIV;AAOF;AAyH2B;AACiB;AACA;AACgB;AACV;AACS;AACM;AACG;AACN;AAGnC;AACiB;AACA;AACgB;AACV;AACS;AACM;AACG;AACN;AAGlC;AACgB;AACA;AACgB;AACV;AACS;AACM;AACG;AACN;AAGhC;AACc;AACA;AACgB;AACV;AACS;AACM;AACG;AACN;AAG7B;AACpB;AACA;AACE;AACA;AACG;AACE;AACC;AACF;AAGa;AACnB;AACA;AACE;AACA;AACG;AACE;AACC;AACF;AAGe;AACM;AACtC;AACA;AACgD;AACc;AACd;AAM1C;AAIA;AAEsD;AAItD;AACmD;AAInD;AAIA;AACyD;AAIzD;AAIA;AAC4D;AAI5D;AAIA;AACsD;AAItD;AAIA;AAQA;AASA;AASA;AASA;AASA;AAQA;AASA;AASA;AASA;AASA;AACI;AACA;AACC;AACG;AAC0B;AACD;AAGzC;AAKF;AAEA;AAA4B;AAC1B;AAEF;;;;"}

package/dist/utilities/emotionStyleUtility/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './emotionStyleUtility';
+export * from './emotionStyleUtility';
+//# sourceMappingURL=index.d.ts.map

package/dist/utilities/emotionStyleUtility/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/emotionStyleUtility/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,cAAc,uBAAuB,CAAC"}

package/dist/utilities/emotionStyleUtility/index.js

@@ -0,0 +1,5 @@
+import { default as o } from "./emotionStyleUtility.js";
+export {
+  o as default
+};
+//# sourceMappingURL=index.js.map

package/dist/utilities/emotionStyleUtility/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/utilities/index.d.ts

@@ -1,3 +1,4 @@
 export { default as minolithStyleUtility } from './minolithStyleUtility';
 export { default as classNameUtility } from './classNameUtility';
+export { default as emotionStyleUtility } from './emotionStyleUtility/emotionStyleUtility';
 //# sourceMappingURL=index.d.ts.map

package/dist/utilities/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2CAA2C,CAAC"}

package/dist/utilities/index.js

@@ -1,7 +1,9 @@
-import { default as a } from "./minolithStyleUtility/minolithStyleUtility.js";
-import { default as i } from "./classNameUtility.js";
+import { default as l } from "./minolithStyleUtility/minolithStyleUtility.js";
+import { default as o } from "./classNameUtility/classNameUtility.js";
+import { default as f } from "./emotionStyleUtility/emotionStyleUtility.js";
 export {
-  i as classNameUtility,
-  a as minolithStyleUtility
+  o as classNameUtility,
+  f as emotionStyleUtility,
+  l as minolithStyleUtility
 };
 //# sourceMappingURL=index.js.map

package/dist/utilities/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/utilities/minolithStyleUtility/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './minolithStyleUtility';
+export * from './minolithStyleUtility';
 //# sourceMappingURL=index.d.ts.map

package/dist/utilities/minolithStyleUtility/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/minolithStyleUtility/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/minolithStyleUtility/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,cAAc,wBAAwB,CAAC"}

package/dist/utilities/minolithStyleUtility/minolithStyleUtility.d.ts

@@ -1,16 +1,9 @@
 import { default as MinolithCssVariable } from '../../common/models/MinolithCssVariable';
-import { BaseComponentProps } from '../../common/models';
-import { Interpolation, Theme } from '@emotion/react';
-import { ColorAttributes, ColorName } from '../../react-minolith';
 declare function getMinolithCssVariableStyles(cssVariableSetting?: MinolithCssVariable): string[];
 declare function getRootStyles(cssVariableSetting?: MinolithCssVariable): string[];
-declare function getColorVariable<ColorNameType = ColorName>(colorAttributes?: ColorAttributes<ColorNameType>): string | undefined;
-declare function getEmotionCss(props: BaseComponentProps): Interpolation<Theme>;
 declare const minolithStyleUtility: {
     getMinolithCssVariableStyles: typeof getMinolithCssVariableStyles;
     getRootStyles: typeof getRootStyles;
-    getColorVariable: typeof getColorVariable;
-    getEmotionCss: typeof getEmotionCss;
 };
 export default minolithStyleUtility;
 //# sourceMappingURL=minolithStyleUtility.d.ts.map

package/dist/utilities/minolithStyleUtility/minolithStyleUtility.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"minolithStyleUtility.d.ts","sourceRoot":"","sources":["../../../src/utilities/minolithStyleUtility/minolithStyleUtility.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EACL,kBAAkB,EAInB,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EAAkB,aAAa,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAoclE,iBAAS,4BAA4B,CACnC,kBAAkB,CAAC,EAAE,mBAAmB,GACvC,MAAM,EAAE,CAoBV;AAED,iBAAS,aAAa,CAAC,kBAAkB,CAAC,EAAE,mBAAmB,GAAG,MAAM,EAAE,CAsoBzE;AAwPD,iBAAS,gBAAgB,CAAC,aAAa,GAAG,SAAS,EACjD,eAAe,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,GAC/C,MAAM,GAAG,SAAS,CAYpB;AA8HD,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,aAAa,CAAC,KAAK,CAAC,CAiXtE;AAED,QAAA,MAAM,oBAAoB;;;;;CAKzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"minolithStyleUtility.d.ts","sourceRoot":"","sources":["../../../src/utilities/minolithStyleUtility/minolithStyleUtility.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAkc1E,iBAAS,4BAA4B,CACnC,kBAAkB,CAAC,EAAE,mBAAmB,GACvC,MAAM,EAAE,CAoBV;AAED,iBAAS,aAAa,CAAC,kBAAkB,CAAC,EAAE,mBAAmB,GAAG,MAAM,EAAE,CAsoBzE;AAiND,QAAA,MAAM,oBAAoB;;;CAGzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}