react-minolith 2.0.4 → 2.1.0

package/dist/components/BreadcrumbsNav/BreadcrumbsNav.js

@@ -3,7 +3,7 @@ import { jsx as l } from "@emotion/react/jsx-runtime";
 import c from "../../utilities/classNameUtility/classNameUtility.js";
 import m from "../../utilities/emotionStyleUtility/emotionStyleUtility.js";
 import '../../assets/Breadcrumb.css';const n = {
-  "breadcrumbs-nav": "_breadcrumbs-nav_1v1g0_92"
+  "breadcrumbs-nav": "_breadcrumbs-nav_4qscy_45"
 };
 function b(s) {
   const e = { ...s };

package/dist/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CA0C/D"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,OAAO,WAAW,MAAM,eAAe,CAAC;AAGxC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CA+D/D"}

package/dist/components/Button/Button.js

@@ -1,56 +1,51 @@
 "use client";
-import { jsx as l } from "@emotion/react/jsx-runtime";
-import d from "../../utilities/classNameUtility/classNameUtility.js";
-import o from "../../utilities/emotionStyleUtility/emotionStyleUtility.js";
-import '../../assets/Button.css';const c = "_button_e0d0b_1", a = {
-  button: c,
-  "is-circle": "_is-circle_e0d0b_21",
-  "is-small": "_is-small_e0d0b_29",
-  "is-large": "_is-large_e0d0b_36",
-  "is-xlarge": "_is-xlarge_e0d0b_43",
-  "is-focus": "_is-focus_e0d0b_50",
-  "is-focused": "_is-focused_e0d0b_50",
-  "is-hovered": "_is-hovered_e0d0b_56",
-  "is-active": "_is-active_e0d0b_62",
-  "is-disabled": "_is-disabled_e0d0b_68",
-  "is-gray": "_is-gray_e0d0b_73",
-  "is-hover": "_is-hover_e0d0b_56",
-  "is-red": "_is-red_e0d0b_99",
-  "is-coral": "_is-coral_e0d0b_125",
-  "is-orange": "_is-orange_e0d0b_151",
-  "is-yellow": "_is-yellow_e0d0b_177",
-  "is-lime": "_is-lime_e0d0b_203",
-  "is-green": "_is-green_e0d0b_229",
-  "is-cyan": "_is-cyan_e0d0b_255",
-  "is-blue": "_is-blue_e0d0b_281",
-  "is-violet": "_is-violet_e0d0b_307",
-  "is-magenta": "_is-magenta_e0d0b_333"
+import { jsx as r } from "@emotion/react/jsx-runtime";
+import n from "../../utilities/classNameUtility/classNameUtility.js";
+import a from "../../utilities/emotionStyleUtility/emotionStyleUtility.js";
+import '../../assets/Button.css';const m = "_button_1ng0t_1", b = {
+  button: m
 };
-function m(s) {
-  const e = { ...s };
-  delete e.colorName, delete e.fore, delete e.back, delete e.highlighter, delete e.border, delete e.positioning, delete e.sizing, delete e.spacing, delete e.css, delete e.as;
-  const i = [a.button];
-  s.colorName && i.push(a[`is-${s.colorName}`]);
-  const _ = d.getUtilityClassNames(s);
-  _ && i.push(..._), s.className && i.push(s.className);
-  const t = o.getEmotionCss(s);
-  return s.as ? /* @__PURE__ */ l(
-    s.as,
+function v(o) {
+  const t = { ...o };
+  delete t.colorName, delete t.fore, delete t.back, delete t.highlighter, delete t.border, delete t.positioning, delete t.sizing, delete t.spacing, delete t.css, delete t.as;
+  const l = [b.button], e = n.getUtilityClassNames(o);
+  e && l.push(...e), o.className && l.push(o.className);
+  const c = {
+    ...o.colorName ? {
+      "--minolith-button-color-fore": `var(--minolith-color-${o.colorName}-button-fore)`,
+      "--minolith-button-color-back": `var(--minolith-color-${o.colorName}-button-back)`,
+      "--minolith-button-color-border": `var(--minolith-color-${o.colorName}-button-border)`,
+      "--minolith-button-focus-color-fore": `var(--minolith-color-${o.colorName}-button-focus-fore)`,
+      "--minolith-button-focus-color-back": `var(--minolith-color-${o.colorName}-button-focus-back)`,
+      "--minolith-button-focus-color-border": `var(--minolith-color-${o.colorName}-button-focus-border)`,
+      "--minolith-button-hover-color-fore": `var(--minolith-color-${o.colorName}-button-hover-fore)`,
+      "--minolith-button-hover-color-back": `var(--minolith-color-${o.colorName}-button-hover-back)`,
+      "--minolith-button-hover-color-border": `var(--minolith-color-${o.colorName}-button-hover-border)`,
+      "--minolith-button-active-color-fore": `var(--minolith-color-${o.colorName}-button-active-fore)`,
+      "--minolith-button-active-color-back": `var(--minolith-color-${o.colorName}-button-active-back)`,
+      "--minolith-button-active-color-border": `var(--minolith-color-${o.colorName}-button-active-border)`,
+      "--minolith-button-disabled-color-fore": `var(--minolith-color-${o.colorName}-button-disabled-fore)`,
+      "--minolith-button-disabled-color-back": `var(--minolith-color-${o.colorName}-button-disabled-back)`,
+      "--minolith-button-disabled-color-border": `var(--minolith-color-${o.colorName}-button-disabled-border)`
+    } : void 0
+  }, i = a.getEmotionCss(o, c);
+  return o.as ? /* @__PURE__ */ r(
+    o.as,
     {
-      ...e,
-      className: i.join(" "),
-      css: t
+      ...t,
+      className: l.join(" "),
+      css: i
     }
-  ) : /* @__PURE__ */ l(
+  ) : /* @__PURE__ */ r(
     "button",
     {
-      ...e,
-      className: i.join(" "),
-      css: t
+      ...t,
+      className: l.join(" "),
+      css: i
     }
   );
 }
 export {
-  m as default
+  v as default
 };
 //# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactElement } from \"react\";\r\nimport classNameUtility from \"../../utilities/classNameUtility\";\r\nimport emotionStyleUtility from \"../../utilities/emotionStyleUtility\";\r\nimport classNames from \"./Button.module.scss\";\r\nimport ButtonProps from \"./ButtonProps\";\r\n\r\nexport default function Button(props: ButtonProps): ReactElement {\r\n  const assignedProps = { ...props };\r\n  delete assignedProps[\"colorName\"];\r\n  //#region BaseComponentProps\r\n  delete assignedProps[\"fore\"];\r\n  delete assignedProps[\"back\"];\r\n  delete assignedProps[\"highlighter\"];\r\n  delete assignedProps[\"border\"];\r\n  delete assignedProps[\"positioning\"];\r\n  delete assignedProps[\"sizing\"];\r\n  delete assignedProps[\"spacing\"];\r\n  delete assignedProps[\"css\"];\r\n  delete assignedProps[\"as\"];\r\n  //#endregion BaseComponentProps\r\n  const assignedClassNames = [classNames[\"button\"]];\r\n\r\n  if (props.colorName) {\r\n    assignedClassNames.push(classNames[`is-${props.colorName}`]);\r\n  }\r\n\r\n  const utilityClassNames = classNameUtility.getUtilityClassNames(props);\r\n  if (utilityClassNames) {\r\n    assignedClassNames.push(...utilityClassNames);\r\n  }\r\n  if (props.className) {\r\n    assignedClassNames.push(props.className);\r\n  }\r\n  const css = emotionStyleUtility.getEmotionCss(props);\r\n\r\n  return props.as ? (\r\n    <props.as\r\n      {...assignedProps}\r\n      className={assignedClassNames.join(\" \")}\r\n      css={css}\r\n    />\r\n  ) : (\r\n    <button\r\n      {...assignedProps}\r\n      className={assignedClassNames.join(\" \")}\r\n      css={css}\r\n    />\r\n  );\r\n}\r\n"],"names":["Button","props","assignedProps","assignedClassNames","classNames","utilityClassNames","classNameUtility","css","emotionStyleUtility","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,SAAwBA,EAAOC,GAAkC;AAC/D,QAAMC,IAAgB,EAAE,GAAGD,EAAA;AAC3B,SAAOC,EAAc,WAErB,OAAOA,EAAc,MACrB,OAAOA,EAAc,MACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,QACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,QACrB,OAAOA,EAAc,SACrB,OAAOA,EAAc,KACrB,OAAOA,EAAc;AAErB,QAAMC,IAAqB,CAACC,EAAW,MAAS;AAEhD,EAAIH,EAAM,aACRE,EAAmB,KAAKC,EAAW,MAAMH,EAAM,SAAS,EAAE,CAAC;AAG7D,QAAMI,IAAoBC,EAAiB,qBAAqBL,CAAK;AACrE,EAAII,KACFF,EAAmB,KAAK,GAAGE,CAAiB,GAE1CJ,EAAM,aACRE,EAAmB,KAAKF,EAAM,SAAS;AAEzC,QAAMM,IAAMC,EAAoB,cAAcP,CAAK;AAEnD,SAAOA,EAAM,KACX,gBAAAQ;AAAA,IAACR,EAAM;AAAA,IAAN;AAAA,MACE,GAAGC;AAAA,MACJ,WAAWC,EAAmB,KAAK,GAAG;AAAA,MACtC,KAAAI;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGP;AAAA,MACJ,WAAWC,EAAmB,KAAK,GAAG;AAAA,MACtC,KAAAI;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactElement } from \"react\";\r\nimport classNameUtility from \"../../utilities/classNameUtility\";\r\nimport emotionStyleUtility from \"../../utilities/emotionStyleUtility\";\r\nimport classNames from \"./Button.module.scss\";\r\nimport ButtonProps from \"./ButtonProps\";\r\nimport { Interpolation, Theme } from \"@emotion/react\";\r\n\r\nexport default function Button(props: ButtonProps): ReactElement {\r\n  const assignedProps = { ...props };\r\n  delete assignedProps[\"colorName\"];\r\n  //#region BaseComponentProps\r\n  delete assignedProps[\"fore\"];\r\n  delete assignedProps[\"back\"];\r\n  delete assignedProps[\"highlighter\"];\r\n  delete assignedProps[\"border\"];\r\n  delete assignedProps[\"positioning\"];\r\n  delete assignedProps[\"sizing\"];\r\n  delete assignedProps[\"spacing\"];\r\n  delete assignedProps[\"css\"];\r\n  delete assignedProps[\"as\"];\r\n  //#endregion BaseComponentProps\r\n  const assignedClassNames = [classNames[\"button\"]];\r\n\r\n  const utilityClassNames = classNameUtility.getUtilityClassNames(props);\r\n  if (utilityClassNames) {\r\n    assignedClassNames.push(...utilityClassNames);\r\n  }\r\n  if (props.className) {\r\n    assignedClassNames.push(props.className);\r\n  }\r\n\r\n  const colorNameCss: Interpolation<Theme> = props.colorName\r\n    ? {\r\n        [\"--minolith-button-color-fore\"]: `var(--minolith-color-${props.colorName}-button-fore)`,\r\n        [\"--minolith-button-color-back\"]: `var(--minolith-color-${props.colorName}-button-back)`,\r\n        [\"--minolith-button-color-border\"]: `var(--minolith-color-${props.colorName}-button-border)`,\r\n        [\"--minolith-button-focus-color-fore\"]: `var(--minolith-color-${props.colorName}-button-focus-fore)`,\r\n        [\"--minolith-button-focus-color-back\"]: `var(--minolith-color-${props.colorName}-button-focus-back)`,\r\n        [\"--minolith-button-focus-color-border\"]: `var(--minolith-color-${props.colorName}-button-focus-border)`,\r\n        [\"--minolith-button-hover-color-fore\"]: `var(--minolith-color-${props.colorName}-button-hover-fore)`,\r\n        [\"--minolith-button-hover-color-back\"]: `var(--minolith-color-${props.colorName}-button-hover-back)`,\r\n        [\"--minolith-button-hover-color-border\"]: `var(--minolith-color-${props.colorName}-button-hover-border)`,\r\n        [\"--minolith-button-active-color-fore\"]: `var(--minolith-color-${props.colorName}-button-active-fore)`,\r\n        [\"--minolith-button-active-color-back\"]: `var(--minolith-color-${props.colorName}-button-active-back)`,\r\n        [\"--minolith-button-active-color-border\"]: `var(--minolith-color-${props.colorName}-button-active-border)`,\r\n        [\"--minolith-button-disabled-color-fore\"]: `var(--minolith-color-${props.colorName}-button-disabled-fore)`,\r\n        [\"--minolith-button-disabled-color-back\"]: `var(--minolith-color-${props.colorName}-button-disabled-back)`,\r\n        [\"--minolith-button-disabled-color-border\"]: `var(--minolith-color-${props.colorName}-button-disabled-border)`,\r\n      }\r\n    : undefined;\r\n\r\n  const optionalCss = {\r\n    ...colorNameCss,\r\n  };\r\n\r\n  const css = emotionStyleUtility.getEmotionCss(props, optionalCss);\r\n\r\n  return props.as ? (\r\n    <props.as\r\n      {...assignedProps}\r\n      className={assignedClassNames.join(\" \")}\r\n      css={css}\r\n    />\r\n  ) : (\r\n    <button\r\n      {...assignedProps}\r\n      className={assignedClassNames.join(\" \")}\r\n      css={css}\r\n    />\r\n  );\r\n}\r\n"],"names":["Button","props","assignedProps","assignedClassNames","classNames","utilityClassNames","classNameUtility","optionalCss","css","emotionStyleUtility","jsx"],"mappings":";;;;;;;AAQA,SAAwBA,EAAOC,GAAkC;AAC/D,QAAMC,IAAgB,EAAE,GAAGD,EAAA;AAC3B,SAAOC,EAAc,WAErB,OAAOA,EAAc,MACrB,OAAOA,EAAc,MACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,QACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,QACrB,OAAOA,EAAc,SACrB,OAAOA,EAAc,KACrB,OAAOA,EAAc;AAErB,QAAMC,IAAqB,CAACC,EAAW,MAAS,GAE1CC,IAAoBC,EAAiB,qBAAqBL,CAAK;AACrE,EAAII,KACFF,EAAmB,KAAK,GAAGE,CAAiB,GAE1CJ,EAAM,aACRE,EAAmB,KAAKF,EAAM,SAAS;AAuBzC,QAAMM,IAAc;AAAA,IAClB,GArByCN,EAAM,YAC7C;AAAA,MACG,gCAAiC,wBAAwBA,EAAM,SAAS;AAAA,MACxE,gCAAiC,wBAAwBA,EAAM,SAAS;AAAA,MACxE,kCAAmC,wBAAwBA,EAAM,SAAS;AAAA,MAC1E,sCAAuC,wBAAwBA,EAAM,SAAS;AAAA,MAC9E,sCAAuC,wBAAwBA,EAAM,SAAS;AAAA,MAC9E,wCAAyC,wBAAwBA,EAAM,SAAS;AAAA,MAChF,sCAAuC,wBAAwBA,EAAM,SAAS;AAAA,MAC9E,sCAAuC,wBAAwBA,EAAM,SAAS;AAAA,MAC9E,wCAAyC,wBAAwBA,EAAM,SAAS;AAAA,MAChF,uCAAwC,wBAAwBA,EAAM,SAAS;AAAA,MAC/E,uCAAwC,wBAAwBA,EAAM,SAAS;AAAA,MAC/E,yCAA0C,wBAAwBA,EAAM,SAAS;AAAA,MACjF,yCAA0C,wBAAwBA,EAAM,SAAS;AAAA,MACjF,yCAA0C,wBAAwBA,EAAM,SAAS;AAAA,MACjF,2CAA4C,wBAAwBA,EAAM,SAAS;AAAA,IAAA,IAEtF;AAAA,EAGC,GAGCO,IAAMC,EAAoB,cAAcR,GAAOM,CAAW;AAEhE,SAAON,EAAM,KACX,gBAAAS;AAAA,IAACT,EAAM;AAAA,IAAN;AAAA,MACE,GAAGC;AAAA,MACJ,WAAWC,EAAmB,KAAK,GAAG;AAAA,MACtC,KAAAK;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,WAAWC,EAAmB,KAAK,GAAG;AAAA,MACtC,KAAAK;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Button/Button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,QAAA,MAAM,IAAI;;;;;CAKqB,CAAC;AAChC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,QAAA,MAAM,IAAI;;;;;CAKqB,CAAC;AAChC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC"}

package/dist/components/Button/ButtonProps.d.ts

@@ -1,7 +1,7 @@
 import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
 import { BaseComponentProps } from '../../models';
-import { ColorName } from '../../types';
+import { ColorName, SemanticColorName } from '../../types';
 export default interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, BaseComponentProps {
-    colorName?: ColorName;
+    colorName?: ColorName | SemanticColorName;
 }
 //# sourceMappingURL=ButtonProps.d.ts.map

package/dist/components/Button/ButtonProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonProps.d.ts","sourceRoot":"","sources":["../../../src/components/Button/ButtonProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,CAAC,OAAO,WAAW,WACvB,SACE,iBAAiB,CACf,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,EACD,kBAAkB;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB"}
+{"version":3,"file":"ButtonProps.d.ts","sourceRoot":"","sources":["../../../src/components/Button/ButtonProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,CAAC,OAAO,WAAW,WACvB,SACE,iBAAiB,CACf,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,EACD,kBAAkB;IACpB,SAAS,CAAC,EAAE,SAAS,GAAG,iBAAiB,CAAC;CAC3C"}

package/dist/components/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,CA0C3D"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,OAAO,SAAS,MAAM,aAAa,CAAC;AAGpC,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,CA+D3D"}

package/dist/components/Card/Card.js

@@ -1,50 +1,51 @@
 "use client";
-import { jsx as _ } from "@emotion/react/jsx-runtime";
-import o from "../../utilities/classNameUtility/classNameUtility.js";
-import c from "../../utilities/emotionStyleUtility/emotionStyleUtility.js";
-import '../../assets/Card.css';const d = "_card_1xkla_1", t = {
-  card: d,
-  "has-shadow": "_has-shadow_1xkla_13",
-  "card-header": "_card-header_1xkla_16",
-  "card-body": "_card-body_1xkla_28",
-  "card-footer": "_card-footer_1xkla_46",
-  "is-gray": "_is-gray_1xkla_56",
-  "is-red": "_is-red_1xkla_73",
-  "is-coral": "_is-coral_1xkla_90",
-  "is-orange": "_is-orange_1xkla_107",
-  "is-yellow": "_is-yellow_1xkla_124",
-  "is-lime": "_is-lime_1xkla_141",
-  "is-green": "_is-green_1xkla_158",
-  "is-cyan": "_is-cyan_1xkla_175",
-  "is-blue": "_is-blue_1xkla_192",
-  "is-violet": "_is-violet_1xkla_209",
-  "is-magenta": "_is-magenta_1xkla_226"
+import { jsx as l } from "@emotion/react/jsx-runtime";
+import t from "../../utilities/classNameUtility/classNameUtility.js";
+import d from "../../utilities/emotionStyleUtility/emotionStyleUtility.js";
+import '../../assets/Card.css';const m = "_card_lmc9y_1", n = {
+  card: m
 };
-function x(a) {
-  const e = { ...a };
-  delete e.colorName, delete e.fore, delete e.back, delete e.highlighter, delete e.border, delete e.positioning, delete e.sizing, delete e.spacing, delete e.css, delete e.as;
-  const s = [t.card];
-  a.colorName && s.push(t[`is-${a.colorName}`]);
-  const i = o.getUtilityClassNames(a);
-  i && s.push(...i), a.className && s.push(a.className);
-  const l = c.getEmotionCss(a);
-  return a.as ? /* @__PURE__ */ _(
-    a.as,
+function f(o) {
+  const r = { ...o };
+  delete r.colorName, delete r.fore, delete r.back, delete r.highlighter, delete r.border, delete r.positioning, delete r.sizing, delete r.spacing, delete r.css, delete r.as;
+  const c = [n.card], e = t.getUtilityClassNames(o);
+  e && c.push(...e), o.className && c.push(o.className);
+  const i = {
+    ...o.colorName ? {
+      "--minolith-card-color-fore": `var(--minolith-color-${o.colorName}-card-fore)`,
+      "--minolith-card-color-back": `var(--minolith-color-${o.colorName}-card-back)`,
+      "--minolith-card-color-border": `var(--minolith-color-${o.colorName}-card-border)`,
+      "--minolith-card-color-shadow": `var(--minolith-color-${o.colorName}-card-shadow)`,
+      "--minolith-card-selection-color-fore": `var(--minolith-color-${o.colorName}-card-selection-fore)`,
+      "--minolith-card-selection-color-back": `var(--minolith-color-${o.colorName}-card-selection-back)`,
+      "--minolith-card-header-color-fore": `var(--minolith-color-${o.colorName}-card-header-fore)`,
+      "--minolith-card-header-color-back": `var(--minolith-color-${o.colorName}-card-header-back)`,
+      "--minolith-card-header-color-border": `var(--minolith-color-${o.colorName}-card-header-border)`,
+      "--minolith-card-body-color-fore": `var(--minolith-color-${o.colorName}-card-body-fore)`,
+      "--minolith-card-body-color-back": `var(--minolith-color-${o.colorName}-card-body-back)`,
+      "--minolith-card-body-color-border": `var(--minolith-color-${o.colorName}-card-body-border)`,
+      "--minolith-card-footer-color-fore": `var(--minolith-color-${o.colorName}-card-footer-fore)`,
+      "--minolith-card-footer-color-back": `var(--minolith-color-${o.colorName}-card-footer-back)`,
+      "--minolith-card-footer-color-border": `var(--minolith-color-${o.colorName}-card-footer-border)`
+    } : void 0
+  }, a = d.getEmotionCss(o, i);
+  return o.as ? /* @__PURE__ */ l(
+    o.as,
     {
-      ...e,
-      className: s.join(" "),
-      css: l
+      ...r,
+      className: c.join(" "),
+      css: a
     }
-  ) : /* @__PURE__ */ _(
+  ) : /* @__PURE__ */ l(
     "div",
     {
-      ...e,
-      className: s.join(" "),
-      css: l
+      ...r,
+      className: c.join(" "),
+      css: a
     }
   );
 }
 export {
-  x as default
+  f as default
 };
 //# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactElement } from \"react\";\r\nimport classNameUtility from \"../../utilities/classNameUtility\";\r\nimport emotionStyleUtility from \"../../utilities/emotionStyleUtility\";\r\nimport classNames from \"./Card.module.scss\";\r\nimport CardProps from \"./CardProps\";\r\n\r\nexport default function Card(props: CardProps): ReactElement {\r\n  const assignedProps = { ...props };\r\n  delete assignedProps[\"colorName\"];\r\n  //#region BaseComponentProps\r\n  delete assignedProps[\"fore\"];\r\n  delete assignedProps[\"back\"];\r\n  delete assignedProps[\"highlighter\"];\r\n  delete assignedProps[\"border\"];\r\n  delete assignedProps[\"positioning\"];\r\n  delete assignedProps[\"sizing\"];\r\n  delete assignedProps[\"spacing\"];\r\n  delete assignedProps[\"css\"];\r\n  delete assignedProps[\"as\"];\r\n  //#endregion BaseComponentProps\r\n  const assignedClassNames = [classNames[\"card\"]];\r\n\r\n  if (props.colorName) {\r\n    assignedClassNames.push(classNames[`is-${props.colorName}`]);\r\n  }\r\n\r\n  const utilityClassNames = classNameUtility.getUtilityClassNames(props);\r\n  if (utilityClassNames) {\r\n    assignedClassNames.push(...utilityClassNames);\r\n  }\r\n  if (props.className) {\r\n    assignedClassNames.push(props.className);\r\n  }\r\n  const css = emotionStyleUtility.getEmotionCss(props);\r\n\r\n  return props.as ? (\r\n    <props.as\r\n      {...assignedProps}\r\n      className={assignedClassNames.join(\" \")}\r\n      css={css}\r\n    />\r\n  ) : (\r\n    <div\r\n      {...assignedProps}\r\n      className={assignedClassNames.join(\" \")}\r\n      css={css}\r\n    />\r\n  );\r\n}\r\n"],"names":["Card","props","assignedProps","assignedClassNames","classNames","utilityClassNames","classNameUtility","css","emotionStyleUtility","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAOA,SAAwBA,EAAKC,GAAgC;AAC3D,QAAMC,IAAgB,EAAE,GAAGD,EAAA;AAC3B,SAAOC,EAAc,WAErB,OAAOA,EAAc,MACrB,OAAOA,EAAc,MACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,QACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,QACrB,OAAOA,EAAc,SACrB,OAAOA,EAAc,KACrB,OAAOA,EAAc;AAErB,QAAMC,IAAqB,CAACC,EAAW,IAAO;AAE9C,EAAIH,EAAM,aACRE,EAAmB,KAAKC,EAAW,MAAMH,EAAM,SAAS,EAAE,CAAC;AAG7D,QAAMI,IAAoBC,EAAiB,qBAAqBL,CAAK;AACrE,EAAII,KACFF,EAAmB,KAAK,GAAGE,CAAiB,GAE1CJ,EAAM,aACRE,EAAmB,KAAKF,EAAM,SAAS;AAEzC,QAAMM,IAAMC,EAAoB,cAAcP,CAAK;AAEnD,SAAOA,EAAM,KACX,gBAAAQ;AAAA,IAACR,EAAM;AAAA,IAAN;AAAA,MACE,GAAGC;AAAA,MACJ,WAAWC,EAAmB,KAAK,GAAG;AAAA,MACtC,KAAAI;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGP;AAAA,MACJ,WAAWC,EAAmB,KAAK,GAAG;AAAA,MACtC,KAAAI;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactElement } from \"react\";\r\nimport classNameUtility from \"../../utilities/classNameUtility\";\r\nimport emotionStyleUtility from \"../../utilities/emotionStyleUtility\";\r\nimport classNames from \"./Card.module.scss\";\r\nimport CardProps from \"./CardProps\";\r\nimport { Interpolation, Theme } from \"@emotion/react\";\r\n\r\nexport default function Card(props: CardProps): ReactElement {\r\n  const assignedProps = { ...props };\r\n  delete assignedProps[\"colorName\"];\r\n  //#region BaseComponentProps\r\n  delete assignedProps[\"fore\"];\r\n  delete assignedProps[\"back\"];\r\n  delete assignedProps[\"highlighter\"];\r\n  delete assignedProps[\"border\"];\r\n  delete assignedProps[\"positioning\"];\r\n  delete assignedProps[\"sizing\"];\r\n  delete assignedProps[\"spacing\"];\r\n  delete assignedProps[\"css\"];\r\n  delete assignedProps[\"as\"];\r\n  //#endregion BaseComponentProps\r\n  const assignedClassNames = [classNames[\"card\"]];\r\n\r\n  const utilityClassNames = classNameUtility.getUtilityClassNames(props);\r\n  if (utilityClassNames) {\r\n    assignedClassNames.push(...utilityClassNames);\r\n  }\r\n  if (props.className) {\r\n    assignedClassNames.push(props.className);\r\n  }\r\n\r\n  const colorNameCss: Interpolation<Theme> = props.colorName\r\n    ? {\r\n        [\"--minolith-card-color-fore\"]: `var(--minolith-color-${props.colorName}-card-fore)`,\r\n        [\"--minolith-card-color-back\"]: `var(--minolith-color-${props.colorName}-card-back)`,\r\n        [\"--minolith-card-color-border\"]: `var(--minolith-color-${props.colorName}-card-border)`,\r\n        [\"--minolith-card-color-shadow\"]: `var(--minolith-color-${props.colorName}-card-shadow)`,\r\n        [\"--minolith-card-selection-color-fore\"]: `var(--minolith-color-${props.colorName}-card-selection-fore)`,\r\n        [\"--minolith-card-selection-color-back\"]: `var(--minolith-color-${props.colorName}-card-selection-back)`,\r\n        [\"--minolith-card-header-color-fore\"]: `var(--minolith-color-${props.colorName}-card-header-fore)`,\r\n        [\"--minolith-card-header-color-back\"]: `var(--minolith-color-${props.colorName}-card-header-back)`,\r\n        [\"--minolith-card-header-color-border\"]: `var(--minolith-color-${props.colorName}-card-header-border)`,\r\n        [\"--minolith-card-body-color-fore\"]: `var(--minolith-color-${props.colorName}-card-body-fore)`,\r\n        [\"--minolith-card-body-color-back\"]: `var(--minolith-color-${props.colorName}-card-body-back)`,\r\n        [\"--minolith-card-body-color-border\"]: `var(--minolith-color-${props.colorName}-card-body-border)`,\r\n        [\"--minolith-card-footer-color-fore\"]: `var(--minolith-color-${props.colorName}-card-footer-fore)`,\r\n        [\"--minolith-card-footer-color-back\"]: `var(--minolith-color-${props.colorName}-card-footer-back)`,\r\n        [\"--minolith-card-footer-color-border\"]: `var(--minolith-color-${props.colorName}-card-footer-border)`,\r\n      }\r\n    : undefined;\r\n\r\n  const optionalCss = {\r\n    ...colorNameCss,\r\n  };\r\n\r\n  const css = emotionStyleUtility.getEmotionCss(props, optionalCss);\r\n\r\n  return props.as ? (\r\n    <props.as\r\n      {...assignedProps}\r\n      className={assignedClassNames.join(\" \")}\r\n      css={css}\r\n    />\r\n  ) : (\r\n    <div\r\n      {...assignedProps}\r\n      className={assignedClassNames.join(\" \")}\r\n      css={css}\r\n    />\r\n  );\r\n}\r\n"],"names":["Card","props","assignedProps","assignedClassNames","classNames","utilityClassNames","classNameUtility","optionalCss","css","emotionStyleUtility","jsx"],"mappings":";;;;;;;AAQA,SAAwBA,EAAKC,GAAgC;AAC3D,QAAMC,IAAgB,EAAE,GAAGD,EAAA;AAC3B,SAAOC,EAAc,WAErB,OAAOA,EAAc,MACrB,OAAOA,EAAc,MACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,QACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,QACrB,OAAOA,EAAc,SACrB,OAAOA,EAAc,KACrB,OAAOA,EAAc;AAErB,QAAMC,IAAqB,CAACC,EAAW,IAAO,GAExCC,IAAoBC,EAAiB,qBAAqBL,CAAK;AACrE,EAAII,KACFF,EAAmB,KAAK,GAAGE,CAAiB,GAE1CJ,EAAM,aACRE,EAAmB,KAAKF,EAAM,SAAS;AAuBzC,QAAMM,IAAc;AAAA,IAClB,GArByCN,EAAM,YAC7C;AAAA,MACG,8BAA+B,wBAAwBA,EAAM,SAAS;AAAA,MACtE,8BAA+B,wBAAwBA,EAAM,SAAS;AAAA,MACtE,gCAAiC,wBAAwBA,EAAM,SAAS;AAAA,MACxE,gCAAiC,wBAAwBA,EAAM,SAAS;AAAA,MACxE,wCAAyC,wBAAwBA,EAAM,SAAS;AAAA,MAChF,wCAAyC,wBAAwBA,EAAM,SAAS;AAAA,MAChF,qCAAsC,wBAAwBA,EAAM,SAAS;AAAA,MAC7E,qCAAsC,wBAAwBA,EAAM,SAAS;AAAA,MAC7E,uCAAwC,wBAAwBA,EAAM,SAAS;AAAA,MAC/E,mCAAoC,wBAAwBA,EAAM,SAAS;AAAA,MAC3E,mCAAoC,wBAAwBA,EAAM,SAAS;AAAA,MAC3E,qCAAsC,wBAAwBA,EAAM,SAAS;AAAA,MAC7E,qCAAsC,wBAAwBA,EAAM,SAAS;AAAA,MAC7E,qCAAsC,wBAAwBA,EAAM,SAAS;AAAA,MAC7E,uCAAwC,wBAAwBA,EAAM,SAAS;AAAA,IAAA,IAElF;AAAA,EAGC,GAGCO,IAAMC,EAAoB,cAAcR,GAAOM,CAAW;AAEhE,SAAON,EAAM,KACX,gBAAAS;AAAA,IAACT,EAAM;AAAA,IAAN;AAAA,MACE,GAAGC;AAAA,MACJ,WAAWC,EAAmB,KAAK,GAAG;AAAA,MACtC,KAAAK;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,WAAWC,EAAmB,KAAK,GAAG;AAAA,MACtC,KAAAK;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Card/CardProps.d.ts

@@ -1,6 +1,6 @@
-import { ColorName } from '../../types';
+import { ColorName, SemanticColorName } from '../../types';
 import { default as DivProps } from '../Div/DivProps';
 export default interface CardProps extends DivProps {
-    colorName?: ColorName;
+    colorName?: ColorName | SemanticColorName;
 }
 //# sourceMappingURL=CardProps.d.ts.map

package/dist/components/Card/CardProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardProps.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AAEvC,MAAM,CAAC,OAAO,WAAW,SAAU,SAAQ,QAAQ;IACjD,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB"}
+{"version":3,"file":"CardProps.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AAEvC,MAAM,CAAC,OAAO,WAAW,SAAU,SAAQ,QAAQ;IACjD,SAAS,CAAC,EAAE,SAAS,GAAG,iBAAiB,CAAC;CAC3C"}

package/dist/components/CardBody/CardBody.js

@@ -3,9 +3,9 @@ import { jsx as l } from "@emotion/react/jsx-runtime";
 import d from "../../utilities/classNameUtility/classNameUtility.js";
 import o from "../../utilities/emotionStyleUtility/emotionStyleUtility.js";
 import '../../assets/Card.css';const c = {
-  "card-body": "_card-body_1xkla_28"
+  "card-body": "_card-body_lmc9y_85"
 };
-function g(s) {
+function y(s) {
   const e = { ...s };
   delete e.fore, delete e.back, delete e.highlighter, delete e.border, delete e.positioning, delete e.sizing, delete e.spacing, delete e.css, delete e.as;
   const t = [c["card-body"]], a = d.getUtilityClassNames(s);
@@ -28,6 +28,6 @@ function g(s) {
   );
 }
 export {
-  g as default
+  y as default
 };
 //# sourceMappingURL=CardBody.js.map

package/dist/components/CardFooter/CardFooter.js

@@ -3,7 +3,7 @@ import { jsx as l } from "@emotion/react/jsx-runtime";
 import o from "../../utilities/classNameUtility/classNameUtility.js";
 import c from "../../utilities/emotionStyleUtility/emotionStyleUtility.js";
 import '../../assets/Card.css';const n = {
-  "card-footer": "_card-footer_1xkla_46"
+  "card-footer": "_card-footer_lmc9y_103"
 };
 function f(s) {
   const e = { ...s };

package/dist/components/CardHeader/CardHeader.js

@@ -3,7 +3,7 @@ import { jsx as l } from "@emotion/react/jsx-runtime";
 import d from "../../utilities/classNameUtility/classNameUtility.js";
 import c from "../../utilities/emotionStyleUtility/emotionStyleUtility.js";
 import '../../assets/Card.css';const n = {
-  "card-header": "_card-header_1xkla_16"
+  "card-header": "_card-header_lmc9y_73"
 };
 function g(s) {
   const e = { ...s };

package/dist/components/Dialogue/Dialogue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialogue.d.ts","sourceRoot":"","sources":["../../../src/components/Dialogue/Dialogue.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CAiEnE"}
+{"version":3,"file":"Dialogue.d.ts","sourceRoot":"","sources":["../../../src/components/Dialogue/Dialogue.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAG5C,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CAiGnE"}

package/dist/components/Dialogue/Dialogue.js

@@ -1,67 +1,70 @@
 "use client";
-import { jsx as _ } from "@emotion/react/jsx-runtime";
-import d from "../../utilities/classNameUtility/classNameUtility.js";
-import l from "../../utilities/emotionStyleUtility/emotionStyleUtility.js";
-import '../../assets/Dialogue.css';const o = "_dialogue_zv88x_1", t = {
-  dialogue: o,
-  "is-avatar-small": "_is-avatar-small_zv88x_32",
-  "is-avatar-large": "_is-avatar-large_zv88x_37",
-  "is-avatar-circle": "_is-avatar-circle_zv88x_42",
-  "dialogue-avatar-container": "_dialogue-avatar-container_zv88x_54",
-  "dialogue-avatar": "_dialogue-avatar_zv88x_54",
-  "is-border-width-xthin": "_is-border-width-xthin_zv88x_62",
-  "is-border-width-thin": "_is-border-width-thin_zv88x_67",
-  "is-border-width-medium": "_is-border-width-medium_zv88x_72",
-  "is-border-width-thick": "_is-border-width-thick_zv88x_77",
-  "is-border-width-xthick": "_is-border-width-xthick_zv88x_82",
-  "is-border-width-xxthick": "_is-border-width-xxthick_zv88x_87",
-  "is-border-width-xxxthick": "_is-border-width-xxxthick_zv88x_92",
-  "dialogue-content-container": "_dialogue-content-container_zv88x_98",
-  "dialogue-name": "_dialogue-name_zv88x_129",
-  "dialogue-message": "_dialogue-message_zv88x_130",
-  "dialogue-message-inner": "_dialogue-message-inner_zv88x_163",
-  "is-left": "_is-left_zv88x_166",
-  "is-right": "_is-right_zv88x_208",
-  "is-border-style-solid": "_is-border-style-solid_zv88x_250",
-  "is-border-style-dashed": "_is-border-style-dashed_zv88x_257",
-  "is-border-style-dotted": "_is-border-style-dotted_zv88x_264",
-  "is-gray": "_is-gray_zv88x_271",
-  "is-red": "_is-red_zv88x_293",
-  "is-coral": "_is-coral_zv88x_315",
-  "is-orange": "_is-orange_zv88x_337",
-  "is-yellow": "_is-yellow_zv88x_359",
-  "is-lime": "_is-lime_zv88x_381",
-  "is-green": "_is-green_zv88x_403",
-  "is-cyan": "_is-cyan_zv88x_425",
-  "is-blue": "_is-blue_zv88x_447",
-  "is-violet": "_is-violet_zv88x_469",
-  "is-magenta": "_is-magenta_zv88x_491"
+import { jsx as t } from "@emotion/react/jsx-runtime";
+import g from "../../utilities/classNameUtility/classNameUtility.js";
+import h from "../../utilities/emotionStyleUtility/emotionStyleUtility.js";
+import '../../assets/Dialogue.css';const v = "_dialogue_akv2m_1", i = {
+  dialogue: v,
+  "is-avatar-circle": "_is-avatar-circle_akv2m_80",
+  "dialogue-avatar-container": "_dialogue-avatar-container_akv2m_93",
+  "dialogue-avatar": "_dialogue-avatar_akv2m_93",
+  "dialogue-content-container": "_dialogue-content-container_akv2m_98",
+  "has-border": "_has-border_akv2m_126",
+  "dialogue-name": "_dialogue-name_akv2m_135",
+  "dialogue-message": "_dialogue-message_akv2m_136",
+  "dialogue-message-inner": "_dialogue-message-inner_akv2m_169",
+  "is-left": "_is-left_akv2m_172",
+  "is-right": "_is-right_akv2m_214"
 };
-function x(e) {
-  const i = { ...e };
-  delete i.colorName, delete i.avatarSize, delete i.borderStyle, delete i.borderWidth, delete i.isRight, delete i.isAvatarCircle, delete i.fore, delete i.back, delete i.highlighter, delete i.border, delete i.positioning, delete i.sizing, delete i.spacing, delete i.css, delete i.as;
-  const s = [t.dialogue];
-  e.colorName && s.push(t[`is-${e.colorName}`]), e.isRight ? s.push(t["is-right"]) : s.push(t["is-left"]), e.avatarSize && s.push(t[`is-avatar-size-${e.avatarSize}`]), e.borderStyle && s.push(t[`is-border-style-${e.borderStyle}`]), e.borderWidth && s.push(t[`is-border-width-${e.borderWidth}`]), e.isAvatarCircle && s.push(t["is-avatar-circle"]);
-  const a = d.getUtilityClassNames(e);
-  a && s.push(...a), e.className && s.push(e.className);
-  const r = l.getEmotionCss(e);
-  return e.as ? /* @__PURE__ */ _(
-    e.as,
+function _(o) {
+  const e = { ...o };
+  delete e.colorName, delete e.avatarSize, delete e.borderStyle, delete e.borderWidth, delete e.isRight, delete e.isAvatarCircle, delete e.fore, delete e.back, delete e.highlighter, delete e.border, delete e.positioning, delete e.sizing, delete e.spacing, delete e.css, delete e.as;
+  const a = [i.dialogue];
+  o.isRight ? a.push(i["is-right"]) : a.push(i["is-left"]), o.isAvatarCircle && a.push(i["is-avatar-circle"]);
+  const l = g.getUtilityClassNames(o);
+  l && a.push(...l), o.className && a.push(o.className);
+  const c = o.colorName ? {
+    "--minolith-dialogue-color-fore": `var(--minolith-color-${o.colorName}-dialogue-fore, var(--minolith-color-${o.colorName}-fore))`,
+    "--minolith-dialogue-color-back": `var(--minolith-color-${o.colorName}-dialogue-back, var(--minolith-color-${o.colorName}-back))`,
+    "--minolith-dialogue-color-border": `var(--minolith-color-${o.colorName}-dialogue-border, var(--minolith-color-${o.colorName}-border))`,
+    "--minolith-dialogue-selection-color-fore": `var(--minolith-color-${o.colorName}-dialogue-selection-fore, var(--minolith-color-${o.colorName}-selection-fore))`,
+    "--minolith-dialogue-selection-color-back": `var(--minolith-color-${o.colorName}-dialogue-selection-back, var(--minolith-color-${o.colorName}-selection-back))`,
+    "--minolith-dialogue-avatar-color-back": `var(--minolith-color-${o.colorName}-dialogue-avatar-back, var(--minolith-color-${o.colorName}-back))`,
+    "--minolith-dialogue-avatar-color-border": `var(--minolith-color-${o.colorName}-dialogue-avatar-border, var(--minolith-color-${o.colorName}-border))`,
+    "--minolith-dialogue-name-color-fore": `var(--minolith-color-${o.colorName}-dialogue-name-fore, var(--minolith-color-${o.colorName}-fore))`,
+    "--minolith-dialogue-name-color-back": `var(--minolith-color-${o.colorName}-dialogue-name-back, var(--minolith-color-${o.colorName}-back))`,
+    "--minolith-dialogue-name-color-border": `var(--minolith-color-${o.colorName}-dialogue-name-border, var(--minolith-color-${o.colorName}-border))`,
+    "--minolith-dialogue-message-color-fore": `var(--minolith-color-${o.colorName}-dialogue-message-fore, var(--minolith-color-${o.colorName}-fore))`,
+    "--minolith-dialogue-message-color-back": `var(--minolith-color-${o.colorName}-dialogue-message-back, var(--minolith-color-${o.colorName}-back))`,
+    "--minolith-dialogue-message-color-border": `var(--minolith-color-${o.colorName}-dialogue-message-border, var(--minolith-color-${o.colorName}-border))`
+  } : void 0, m = o.avatarSize ? {
+    "--minolith-dialogue-avatar-size": o.avatarSize
+  } : void 0, d = o.borderStyle ? {
+    "--minolith-dialogue-border-style": o.borderStyle
+  } : void 0, n = o.borderWidth ? {
+    "--minolith-dialogue-border-width": `var(--minolith-border-width-${o.borderWidth})`
+  } : void 0, s = {
+    ...c,
+    ...m,
+    ...d,
+    ...n
+  }, r = h.getEmotionCss(o, s);
+  return o.as ? /* @__PURE__ */ t(
+    o.as,
     {
-      ...i,
-      className: s.join(" "),
+      ...e,
+      className: a.join(" "),
       css: r
     }
-  ) : /* @__PURE__ */ _(
+  ) : /* @__PURE__ */ t(
     "div",
     {
-      ...i,
-      className: s.join(" "),
+      ...e,
+      className: a.join(" "),
       css: r
     }
   );
 }
 export {
-  x as default
+  _ as default
 };
 //# sourceMappingURL=Dialogue.js.map

package/dist/components/Dialogue/Dialogue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialogue.js","sources":["../../../src/components/Dialogue/Dialogue.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactElement } from \"react\";\r\nimport classNameUtility from \"../../utilities/classNameUtility\";\r\nimport emotionStyleUtility from \"../../utilities/emotionStyleUtility\";\r\nimport classNames from \"./Dialogue.module.scss\";\r\nimport DialogueProps from \"./DialogueProps\";\r\n\r\nexport default function Dialogue(props: DialogueProps): ReactElement {\r\n  const assignedProps = { ...props };\r\n  delete assignedProps[\"colorName\"];\r\n  delete assignedProps[\"avatarSize\"];\r\n  delete assignedProps[\"borderStyle\"];\r\n  delete assignedProps[\"borderWidth\"];\r\n  delete assignedProps[\"isRight\"];\r\n  delete assignedProps[\"isAvatarCircle\"];\r\n  //#region BaseComponentProps\r\n  delete assignedProps[\"fore\"];\r\n  delete assignedProps[\"back\"];\r\n  delete assignedProps[\"highlighter\"];\r\n  delete assignedProps[\"border\"];\r\n  delete assignedProps[\"positioning\"];\r\n  delete assignedProps[\"sizing\"];\r\n  delete assignedProps[\"spacing\"];\r\n  delete assignedProps[\"css\"];\r\n  delete assignedProps[\"as\"];\r\n  //#endregion BaseComponentProps\r\n  const assignedClassNames = [classNames[\"dialogue\"]];\r\n\r\n  if (props.colorName) {\r\n    assignedClassNames.push(classNames[`is-${props.colorName}`]);\r\n  }\r\n\r\n  if (props.isRight) {\r\n    assignedClassNames.push(classNames[`is-right`]);\r\n  } else {\r\n    assignedClassNames.push(classNames[`is-left`]);\r\n  }\r\n  if (props.avatarSize) {\r\n    assignedClassNames.push(classNames[`is-avatar-size-${props.avatarSize}`]);\r\n  }\r\n  if (props.borderStyle) {\r\n    assignedClassNames.push(classNames[`is-border-style-${props.borderStyle}`]);\r\n  }\r\n  if (props.borderWidth) {\r\n    assignedClassNames.push(classNames[`is-border-width-${props.borderWidth}`]);\r\n  }\r\n  if (props.isAvatarCircle) {\r\n    assignedClassNames.push(classNames[`is-avatar-circle`]);\r\n  }\r\n\r\n  const utilityClassNames = classNameUtility.getUtilityClassNames(props);\r\n  if (utilityClassNames) {\r\n    assignedClassNames.push(...utilityClassNames);\r\n  }\r\n  if (props.className) {\r\n    assignedClassNames.push(props.className);\r\n  }\r\n  const css = emotionStyleUtility.getEmotionCss(props);\r\n\r\n  return props.as ? (\r\n    <props.as\r\n      {...assignedProps}\r\n      className={assignedClassNames.join(\" \")}\r\n      css={css}\r\n    />\r\n  ) : (\r\n    <div\r\n      {...assignedProps}\r\n      className={assignedClassNames.join(\" \")}\r\n      css={css}\r\n    />\r\n  );\r\n}\r\n"],"names":["Dialogue","props","assignedProps","assignedClassNames","classNames","utilityClassNames","classNameUtility","css","emotionStyleUtility","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,SAAwBA,EAASC,GAAoC;AACnE,QAAMC,IAAgB,EAAE,GAAGD,EAAA;AAC3B,SAAOC,EAAc,WACrB,OAAOA,EAAc,YACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,SACrB,OAAOA,EAAc,gBAErB,OAAOA,EAAc,MACrB,OAAOA,EAAc,MACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,QACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,QACrB,OAAOA,EAAc,SACrB,OAAOA,EAAc,KACrB,OAAOA,EAAc;AAErB,QAAMC,IAAqB,CAACC,EAAW,QAAW;AAElD,EAAIH,EAAM,aACRE,EAAmB,KAAKC,EAAW,MAAMH,EAAM,SAAS,EAAE,CAAC,GAGzDA,EAAM,UACRE,EAAmB,KAAKC,EAAW,UAAU,CAAC,IAE9CD,EAAmB,KAAKC,EAAW,SAAS,CAAC,GAE3CH,EAAM,cACRE,EAAmB,KAAKC,EAAW,kBAAkBH,EAAM,UAAU,EAAE,CAAC,GAEtEA,EAAM,eACRE,EAAmB,KAAKC,EAAW,mBAAmBH,EAAM,WAAW,EAAE,CAAC,GAExEA,EAAM,eACRE,EAAmB,KAAKC,EAAW,mBAAmBH,EAAM,WAAW,EAAE,CAAC,GAExEA,EAAM,kBACRE,EAAmB,KAAKC,EAAW,kBAAkB,CAAC;AAGxD,QAAMC,IAAoBC,EAAiB,qBAAqBL,CAAK;AACrE,EAAII,KACFF,EAAmB,KAAK,GAAGE,CAAiB,GAE1CJ,EAAM,aACRE,EAAmB,KAAKF,EAAM,SAAS;AAEzC,QAAMM,IAAMC,EAAoB,cAAcP,CAAK;AAEnD,SAAOA,EAAM,KACX,gBAAAQ;AAAA,IAACR,EAAM;AAAA,IAAN;AAAA,MACE,GAAGC;AAAA,MACJ,WAAWC,EAAmB,KAAK,GAAG;AAAA,MACtC,KAAAI;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGP;AAAA,MACJ,WAAWC,EAAmB,KAAK,GAAG;AAAA,MACtC,KAAAI;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Dialogue.js","sources":["../../../src/components/Dialogue/Dialogue.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactElement } from \"react\";\r\nimport classNameUtility from \"../../utilities/classNameUtility\";\r\nimport emotionStyleUtility from \"../../utilities/emotionStyleUtility\";\r\nimport classNames from \"./Dialogue.module.scss\";\r\nimport DialogueProps from \"./DialogueProps\";\r\nimport { Interpolation, Theme } from \"@emotion/react\";\r\n\r\nexport default function Dialogue(props: DialogueProps): ReactElement {\r\n  const assignedProps = { ...props };\r\n  delete assignedProps[\"colorName\"];\r\n  delete assignedProps[\"avatarSize\"];\r\n  delete assignedProps[\"borderStyle\"];\r\n  delete assignedProps[\"borderWidth\"];\r\n  delete assignedProps[\"isRight\"];\r\n  delete assignedProps[\"isAvatarCircle\"];\r\n  //#region BaseComponentProps\r\n  delete assignedProps[\"fore\"];\r\n  delete assignedProps[\"back\"];\r\n  delete assignedProps[\"highlighter\"];\r\n  delete assignedProps[\"border\"];\r\n  delete assignedProps[\"positioning\"];\r\n  delete assignedProps[\"sizing\"];\r\n  delete assignedProps[\"spacing\"];\r\n  delete assignedProps[\"css\"];\r\n  delete assignedProps[\"as\"];\r\n  //#endregion BaseComponentProps\r\n  const assignedClassNames = [classNames[\"dialogue\"]];\r\n\r\n  if (props.isRight) {\r\n    assignedClassNames.push(classNames[`is-right`]);\r\n  } else {\r\n    assignedClassNames.push(classNames[`is-left`]);\r\n  }\r\n\r\n  if (props.isAvatarCircle) {\r\n    assignedClassNames.push(classNames[`is-avatar-circle`]);\r\n  }\r\n\r\n  const utilityClassNames = classNameUtility.getUtilityClassNames(props);\r\n  if (utilityClassNames) {\r\n    assignedClassNames.push(...utilityClassNames);\r\n  }\r\n  if (props.className) {\r\n    assignedClassNames.push(props.className);\r\n  }\r\n\r\n  const colorNameCss: Interpolation<Theme> = props.colorName\r\n    ? {\r\n        [\"--minolith-dialogue-color-fore\"]: `var(--minolith-color-${props.colorName}-dialogue-fore, var(--minolith-color-${props.colorName}-fore))`,\r\n        [\"--minolith-dialogue-color-back\"]: `var(--minolith-color-${props.colorName}-dialogue-back, var(--minolith-color-${props.colorName}-back))`,\r\n        [\"--minolith-dialogue-color-border\"]: `var(--minolith-color-${props.colorName}-dialogue-border, var(--minolith-color-${props.colorName}-border))`,\r\n        [\"--minolith-dialogue-selection-color-fore\"]: `var(--minolith-color-${props.colorName}-dialogue-selection-fore, var(--minolith-color-${props.colorName}-selection-fore))`,\r\n        [\"--minolith-dialogue-selection-color-back\"]: `var(--minolith-color-${props.colorName}-dialogue-selection-back, var(--minolith-color-${props.colorName}-selection-back))`,\r\n        [\"--minolith-dialogue-avatar-color-back\"]: `var(--minolith-color-${props.colorName}-dialogue-avatar-back, var(--minolith-color-${props.colorName}-back))`,\r\n        [\"--minolith-dialogue-avatar-color-border\"]: `var(--minolith-color-${props.colorName}-dialogue-avatar-border, var(--minolith-color-${props.colorName}-border))`,\r\n        [\"--minolith-dialogue-name-color-fore\"]: `var(--minolith-color-${props.colorName}-dialogue-name-fore, var(--minolith-color-${props.colorName}-fore))`,\r\n        [\"--minolith-dialogue-name-color-back\"]: `var(--minolith-color-${props.colorName}-dialogue-name-back, var(--minolith-color-${props.colorName}-back))`,\r\n        [\"--minolith-dialogue-name-color-border\"]: `var(--minolith-color-${props.colorName}-dialogue-name-border, var(--minolith-color-${props.colorName}-border))`,\r\n        [\"--minolith-dialogue-message-color-fore\"]: `var(--minolith-color-${props.colorName}-dialogue-message-fore, var(--minolith-color-${props.colorName}-fore))`,\r\n        [\"--minolith-dialogue-message-color-back\"]: `var(--minolith-color-${props.colorName}-dialogue-message-back, var(--minolith-color-${props.colorName}-back))`,\r\n        [\"--minolith-dialogue-message-color-border\"]: `var(--minolith-color-${props.colorName}-dialogue-message-border, var(--minolith-color-${props.colorName}-border))`,\r\n      }\r\n    : undefined;\r\n\r\n  const avatarSizeCss: Interpolation<Theme> = props.avatarSize\r\n    ? {\r\n        [\"--minolith-dialogue-avatar-size\"]: props.avatarSize,\r\n      }\r\n    : undefined;\r\n\r\n  const borderStyleCss: Interpolation<Theme> = props.borderStyle\r\n    ? {\r\n        [\"--minolith-dialogue-border-style\"]: props.borderStyle,\r\n      }\r\n    : undefined;\r\n\r\n  const borderWidthCss: Interpolation<Theme> = props.borderWidth\r\n    ? {\r\n        [\"--minolith-dialogue-border-width\"]: `var(--minolith-border-width-${props.borderWidth})`,\r\n      }\r\n    : undefined;\r\n\r\n  const optionalCss = {\r\n    ...colorNameCss,\r\n    ...avatarSizeCss,\r\n    ...borderStyleCss,\r\n    ...borderWidthCss,\r\n  };\r\n\r\n  const css = emotionStyleUtility.getEmotionCss(props, optionalCss);\r\n\r\n  return props.as ? (\r\n    <props.as\r\n      {...assignedProps}\r\n      className={assignedClassNames.join(\" \")}\r\n      css={css}\r\n    />\r\n  ) : (\r\n    <div\r\n      {...assignedProps}\r\n      className={assignedClassNames.join(\" \")}\r\n      css={css}\r\n    />\r\n  );\r\n}\r\n"],"names":["Dialogue","props","assignedProps","assignedClassNames","classNames","utilityClassNames","classNameUtility","colorNameCss","avatarSizeCss","borderStyleCss","borderWidthCss","optionalCss","css","emotionStyleUtility","jsx"],"mappings":";;;;;;;;;;;;;;;;;AAQA,SAAwBA,EAASC,GAAoC;AACnE,QAAMC,IAAgB,EAAE,GAAGD,EAAA;AAC3B,SAAOC,EAAc,WACrB,OAAOA,EAAc,YACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,SACrB,OAAOA,EAAc,gBAErB,OAAOA,EAAc,MACrB,OAAOA,EAAc,MACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,QACrB,OAAOA,EAAc,aACrB,OAAOA,EAAc,QACrB,OAAOA,EAAc,SACrB,OAAOA,EAAc,KACrB,OAAOA,EAAc;AAErB,QAAMC,IAAqB,CAACC,EAAW,QAAW;AAElD,EAAIH,EAAM,UACRE,EAAmB,KAAKC,EAAW,UAAU,CAAC,IAE9CD,EAAmB,KAAKC,EAAW,SAAS,CAAC,GAG3CH,EAAM,kBACRE,EAAmB,KAAKC,EAAW,kBAAkB,CAAC;AAGxD,QAAMC,IAAoBC,EAAiB,qBAAqBL,CAAK;AACrE,EAAII,KACFF,EAAmB,KAAK,GAAGE,CAAiB,GAE1CJ,EAAM,aACRE,EAAmB,KAAKF,EAAM,SAAS;AAGzC,QAAMM,IAAqCN,EAAM,YAC7C;AAAA,IACG,kCAAmC,wBAAwBA,EAAM,SAAS,wCAAwCA,EAAM,SAAS;AAAA,IACjI,kCAAmC,wBAAwBA,EAAM,SAAS,wCAAwCA,EAAM,SAAS;AAAA,IACjI,oCAAqC,wBAAwBA,EAAM,SAAS,0CAA0CA,EAAM,SAAS;AAAA,IACrI,4CAA6C,wBAAwBA,EAAM,SAAS,kDAAkDA,EAAM,SAAS;AAAA,IACrJ,4CAA6C,wBAAwBA,EAAM,SAAS,kDAAkDA,EAAM,SAAS;AAAA,IACrJ,yCAA0C,wBAAwBA,EAAM,SAAS,+CAA+CA,EAAM,SAAS;AAAA,IAC/I,2CAA4C,wBAAwBA,EAAM,SAAS,iDAAiDA,EAAM,SAAS;AAAA,IACnJ,uCAAwC,wBAAwBA,EAAM,SAAS,6CAA6CA,EAAM,SAAS;AAAA,IAC3I,uCAAwC,wBAAwBA,EAAM,SAAS,6CAA6CA,EAAM,SAAS;AAAA,IAC3I,yCAA0C,wBAAwBA,EAAM,SAAS,+CAA+CA,EAAM,SAAS;AAAA,IAC/I,0CAA2C,wBAAwBA,EAAM,SAAS,gDAAgDA,EAAM,SAAS;AAAA,IACjJ,0CAA2C,wBAAwBA,EAAM,SAAS,gDAAgDA,EAAM,SAAS;AAAA,IACjJ,4CAA6C,wBAAwBA,EAAM,SAAS,kDAAkDA,EAAM,SAAS;AAAA,EAAA,IAExJ,QAEEO,IAAsCP,EAAM,aAC9C;AAAA,IACG,mCAAoCA,EAAM;AAAA,EAAA,IAE7C,QAEEQ,IAAuCR,EAAM,cAC/C;AAAA,IACG,oCAAqCA,EAAM;AAAA,EAAA,IAE9C,QAEES,IAAuCT,EAAM,cAC/C;AAAA,IACG,oCAAqC,+BAA+BA,EAAM,WAAW;AAAA,EAAA,IAExF,QAEEU,IAAc;AAAA,IAClB,GAAGJ;AAAA,IACH,GAAGC;AAAA,IACH,GAAGC;AAAA,IACH,GAAGC;AAAA,EAAA,GAGCE,IAAMC,EAAoB,cAAcZ,GAAOU,CAAW;AAEhE,SAAOV,EAAM,KACX,gBAAAa;AAAA,IAACb,EAAM;AAAA,IAAN;AAAA,MACE,GAAGC;AAAA,MACJ,WAAWC,EAAmB,KAAK,GAAG;AAAA,MACtC,KAAAS;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGZ;AAAA,MACJ,WAAWC,EAAmB,KAAK,GAAG;AAAA,MACtC,KAAAS;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Dialogue/Dialogue.stories.d.ts

@@ -10,4 +10,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Plain: Story;
 export declare const IsRight: Story;
+export declare const AvatarHasBorder: Story;
+export declare const IsAvatarCircleAndHasBorder: Story;
+export declare const IsRightAndIsAvatarCircleAndHasBorder: Story;
 //# sourceMappingURL=Dialogue.stories.d.ts.map

package/dist/components/Dialogue/Dialogue.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialogue.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Dialogue/Dialogue.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,QAAQ,MAAM,YAAY,CAAC;AASlC,QAAA,MAAM,IAAI;;;;;CAKuB,CAAC;AAClC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,KAAK,EAAE,KAwBnB,CAAC;AACF,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAC"}
+{"version":3,"file":"Dialogue.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Dialogue/Dialogue.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,QAAQ,MAAM,YAAY,CAAC;AASlC,QAAA,MAAM,IAAI;;;;;CAKuB,CAAC;AAClC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,KAAK,EAAE,KAwBnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KA2BxC,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,KA4BlD,CAAC"}

package/dist/components/Dialogue/DialogueProps.d.ts

@@ -1,9 +1,10 @@
-import { BorderStyle, BorderWidth, ColorName } from '../../types';
+import { BorderWidth, ColorName, SemanticColorName } from '../../types';
 import { default as DivProps } from '../Div/DivProps';
+import { Property } from 'csstype';
 export default interface DialogueProps extends DivProps {
-    colorName?: ColorName;
-    avatarSize?: "large" | "small";
-    borderStyle?: BorderStyle;
+    colorName?: ColorName | SemanticColorName;
+    avatarSize?: Property.Width;
+    borderStyle?: Property.BorderStyle;
     borderWidth?: BorderWidth;
     isAvatarCircle?: boolean;
     isRight?: boolean;

package/dist/components/Dialogue/DialogueProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogueProps.d.ts","sourceRoot":"","sources":["../../../src/components/Dialogue/DialogueProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AAEvC,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,QAAQ;IACrD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"DialogueProps.d.ts","sourceRoot":"","sources":["../../../src/components/Dialogue/DialogueProps.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,SAAS,EACT,iBAAiB,EAClB,MAAM,aAAa,CAAC;AACrB,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,QAAQ;IACrD,SAAS,CAAC,EAAE,SAAS,GAAG,iBAAiB,CAAC;IAC1C,UAAU,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IAC5B,WAAW,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;IACnC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/DialogueAvatar/DialogueAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogueAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/DialogueAvatar/DialogueAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAGxD,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,KAAK,EAAE,mBAAmB,GACzB,YAAY,CAqCd"}
+{"version":3,"file":"DialogueAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/DialogueAvatar/DialogueAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAGxD,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,KAAK,EAAE,mBAAmB,GACzB,YAAY,CAwCd"}

package/dist/components/DialogueAvatar/DialogueAvatar.js

@@ -1,33 +1,34 @@
 "use client";
 import { jsx as l } from "@emotion/react/jsx-runtime";
-import o from "../../utilities/classNameUtility/classNameUtility.js";
-import n from "../../utilities/emotionStyleUtility/emotionStyleUtility.js";
-import '../../assets/Dialogue.css';const m = {
-  "dialogue-avatar": "_dialogue-avatar_zv88x_54"
+import d from "../../utilities/classNameUtility/classNameUtility.js";
+import m from "../../utilities/emotionStyleUtility/emotionStyleUtility.js";
+import '../../assets/Dialogue.css';const o = {
+  "dialogue-avatar": "_dialogue-avatar_akv2m_93",
+  "has-border": "_has-border_akv2m_126"
 };
-function r(s) {
-  const e = { ...s };
+function g(a) {
+  const e = { ...a };
   delete e.fore, delete e.back, delete e.highlighter, delete e.border, delete e.positioning, delete e.sizing, delete e.spacing, delete e.css, delete e.as;
-  const a = [m["dialogue-avatar"]], t = o.getUtilityClassNames(s);
-  t && a.push(...t), s.className && a.push(s.className);
-  const i = n.getEmotionCss(s);
-  return s.as ? /* @__PURE__ */ l(
-    s.as,
+  const s = [o["dialogue-avatar"]], t = d.getUtilityClassNames(a);
+  t && s.push(...t), a.className && s.push(a.className), a.hasBorder && s.push(o["has-border"]);
+  const i = m.getEmotionCss(a);
+  return a.as ? /* @__PURE__ */ l(
+    a.as,
     {
       ...e,
-      className: a.join(" "),
+      className: s.join(" "),
       css: i
     }
   ) : /* @__PURE__ */ l(
     "img",
     {
       ...e,
-      className: a.join(" "),
+      className: s.join(" "),
       css: i
     }
   );
 }
 export {
-  r as default
+  g as default
 };
 //# sourceMappingURL=DialogueAvatar.js.map