@dnanpm/ui-components 0.9.0 → 0.10.0

package/README.md

@@ -49,6 +49,19 @@ Components are written as plain React function components with CSS Modules and B
 
 Typography is applied through the font shorthand presets from `@dnanpm/design-tokens` — `font: var(--typography-body-md)` — rather than by setting `font-family` and friends individually. `@dnanpm/ui-components/styles.css` includes those presets, so no extra import is needed.
 
+### Utility styles
+
+Reusable utility styles for consumer-owned markup are available as global CSS classes. Import the aggregate stylesheet after the base styles:
+
+```ts
+import '@dnanpm/ui-components/styles.css';
+import '@dnanpm/ui-components/utilities.css';
+```
+
+See the [Utility Styles documentation](https://designsystem.dna.fi/?path=/docs/ui-components-utility-styles--docs) for the available classes and examples.
+
+Individual stylesheets can be imported when the aggregate is not needed, for example `@dnanpm/ui-components/utilities/elevation.css`. The utility class names and import paths are public API.
+
 ### Tree-shaking
 
 This package uses selective exports to optimize bundle sizes. Import only what you need:

package/dist/components/Accordion/Accordion.css

@@ -19,4 +19,8 @@
 
 ._accordion--panel_18qm2_16 {
     gap: 0;
-} }
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

package/dist/components/AccordionItem/AccordionItem.cjs

@@ -3,8 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const icons = require("@dnanpm/icons");
 const Accordion_utils = require("../Accordion/Accordion.utils.cjs");
-const elevation_module = require("../../styles/utils/elevation.module.css.cjs");
-const focus_module = require("../../styles/utils/focus.module.css.cjs");
+const index = require("../../styles/utils/index.cjs");
 const AccordionItem_module = require("./AccordionItem.module.css.cjs");
 const cn = require("../../utils/cn/cn.cjs");
 const AccordionItem = ({
@@ -28,13 +27,14 @@ const AccordionItem = ({
       className: cn.cn(
         AccordionItem_module["accordion-item"],
         AccordionItem_module[`accordion-item--${variant}`],
-        variant === "box" && elevation_module.default.elevationLow,
+        variant === "box" && index.elevationStyles.elevationLow,
         className
       ),
       ...props,
+      ...variant === "box" ? { "data-color-scheme": "light" } : {},
       name: groupName ?? name,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: cn.cn(AccordionItem_module["accordion-item__summary"], focus_module.default.focusableInset), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: cn.cn(AccordionItem_module["accordion-item__summary"], index.focusStyles.focusableInset), children: [
           image && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {

package/dist/components/AccordionItem/AccordionItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.cjs","sources":["../../../src/components/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { ChevronDown } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { useAccordionContext } from '../Accordion/Accordion.utils';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './AccordionItem.module.css';\nimport type { AccordionItemProps } from './AccordionItem.types';\n\nexport const AccordionItem = ({\n    label,\n    variant: variantProp,\n    image,\n    imageSize,\n    children,\n    className,\n    name,\n    ref,\n    ...props\n}: AccordionItemProps) => {\n    const { variant: contextVariant, groupName } = useAccordionContext();\n    const variant = variantProp ?? contextVariant;\n    const resolvedImageSize = image ? (imageSize ?? 'md') : undefined;\n\n    return (\n        <details\n            ref={ref}\n            className={cn(\n                styles['accordion-item'],\n                styles[`accordion-item--${variant}`],\n                variant === 'box' && elevationStyles.elevationLow,\n                className,\n            )}\n            {...props}\n            name={groupName ?? name}\n        >\n            <summary className={cn(styles['accordion-item__summary'], focusStyles.focusableInset)}>\n                {image && (\n                    <span\n                        className={cn(\n                            styles['accordion-item__image'],\n                            resolvedImageSize &&\n                                styles[`accordion-item__image--${resolvedImageSize}`],\n                        )}\n                    >\n                        {image}\n                    </span>\n                )}\n                <span className={styles['accordion-item__label']}>{label}</span>\n                <ChevronDown className={styles['accordion-item__chevron']} aria-hidden=\"true\" />\n            </summary>\n            <div className={styles['accordion-item__content']}>{children}</div>\n        </details>\n    );\n};\n"],"names":["useAccordionContext","jsxs","cn","styles","elevationStyles","focusStyles","jsx","ChevronDown"],"mappings":";;;;;;;;;AAQO,MAAM,gBAAgB,CAAC;AAAA,EAC1B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAA0B;AACtB,QAAM,EAAE,SAAS,gBAAgB,UAAA,IAAcA,gBAAAA,oBAAA;AAC/C,QAAM,UAAU,eAAe;AAC/B,QAAM,oBAAoB,QAAS,aAAa,OAAQ;AAExD,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACPC,qBAAO,gBAAgB;AAAA,QACvBA,qBAAO,mBAAmB,OAAO,EAAE;AAAA,QACnC,YAAY,SAASC,iBAAAA,QAAgB;AAAA,QACrC;AAAA,MAAA;AAAA,MAEH,GAAG;AAAA,MACJ,MAAM,aAAa;AAAA,MAEnB,UAAA;AAAA,QAAAH,2BAAAA,KAAC,WAAA,EAAQ,WAAWC,MAAGC,qBAAO,yBAAyB,GAAGE,aAAAA,QAAY,cAAc,GAC/E,UAAA;AAAA,UAAA,SACGC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWJ,GAAAA;AAAAA,gBACPC,qBAAO,uBAAuB;AAAA,gBAC9B,qBACIA,qBAAO,0BAA0B,iBAAiB,EAAE;AAAA,cAAA;AAAA,cAG3D,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,yCAGR,QAAA,EAAK,WAAWA,qBAAO,uBAAuB,GAAI,UAAA,OAAM;AAAA,yCACxDI,MAAAA,aAAA,EAAY,WAAWJ,qBAAO,yBAAyB,GAAG,eAAY,OAAA,CAAO;AAAA,QAAA,GAClF;AAAA,uCACC,OAAA,EAAI,WAAWA,qBAAO,yBAAyB,GAAI,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzE;;"}
+{"version":3,"file":"AccordionItem.cjs","sources":["../../../src/components/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { ChevronDown } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { useAccordionContext } from '../Accordion/Accordion.utils';\nimport { elevationStyles, focusStyles } from '../../styles/utils';\nimport styles from './AccordionItem.module.css';\nimport type { AccordionItemProps } from './AccordionItem.types';\n\nexport const AccordionItem = ({\n    label,\n    variant: variantProp,\n    image,\n    imageSize,\n    children,\n    className,\n    name,\n    ref,\n    ...props\n}: AccordionItemProps) => {\n    const { variant: contextVariant, groupName } = useAccordionContext();\n    const variant = variantProp ?? contextVariant;\n    const resolvedImageSize = image ? (imageSize ?? 'md') : undefined;\n\n    return (\n        <details\n            ref={ref}\n            className={cn(\n                styles['accordion-item'],\n                styles[`accordion-item--${variant}`],\n                variant === 'box' && elevationStyles.elevationLow,\n                className,\n            )}\n            {...props}\n            {...(variant === 'box' ? { 'data-color-scheme': 'light' } : {})}\n            name={groupName ?? name}\n        >\n            <summary className={cn(styles['accordion-item__summary'], focusStyles.focusableInset)}>\n                {image && (\n                    <span\n                        className={cn(\n                            styles['accordion-item__image'],\n                            resolvedImageSize &&\n                                styles[`accordion-item__image--${resolvedImageSize}`],\n                        )}\n                    >\n                        {image}\n                    </span>\n                )}\n                <span className={styles['accordion-item__label']}>{label}</span>\n                <ChevronDown className={styles['accordion-item__chevron']} aria-hidden=\"true\" />\n            </summary>\n            <div className={styles['accordion-item__content']}>{children}</div>\n        </details>\n    );\n};\n"],"names":["useAccordionContext","jsxs","cn","styles","elevationStyles","focusStyles","jsx","ChevronDown"],"mappings":";;;;;;;;AAOO,MAAM,gBAAgB,CAAC;AAAA,EAC1B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAA0B;AACtB,QAAM,EAAE,SAAS,gBAAgB,UAAA,IAAcA,gBAAAA,oBAAA;AAC/C,QAAM,UAAU,eAAe;AAC/B,QAAM,oBAAoB,QAAS,aAAa,OAAQ;AAExD,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACPC,qBAAO,gBAAgB;AAAA,QACvBA,qBAAO,mBAAmB,OAAO,EAAE;AAAA,QACnC,YAAY,SAASC,MAAAA,gBAAgB;AAAA,QACrC;AAAA,MAAA;AAAA,MAEH,GAAG;AAAA,MACH,GAAI,YAAY,QAAQ,EAAE,qBAAqB,QAAA,IAAY,CAAA;AAAA,MAC5D,MAAM,aAAa;AAAA,MAEnB,UAAA;AAAA,QAAAH,2BAAAA,KAAC,WAAA,EAAQ,WAAWC,MAAGC,qBAAO,yBAAyB,GAAGE,MAAAA,YAAY,cAAc,GAC/E,UAAA;AAAA,UAAA,SACGC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWJ,GAAAA;AAAAA,gBACPC,qBAAO,uBAAuB;AAAA,gBAC9B,qBACIA,qBAAO,0BAA0B,iBAAiB,EAAE;AAAA,cAAA;AAAA,cAG3D,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,yCAGR,QAAA,EAAK,WAAWA,qBAAO,uBAAuB,GAAI,UAAA,OAAM;AAAA,yCACxDI,MAAAA,aAAA,EAAY,WAAWJ,qBAAO,yBAAyB,GAAG,eAAY,OAAA,CAAO;AAAA,QAAA,GAClF;AAAA,uCACC,OAAA,EAAI,WAAWA,qBAAO,yBAAyB,GAAI,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzE;;"}

package/dist/components/AccordionItem/AccordionItem.css

@@ -128,4 +128,7 @@
         /* calc-size() function allows transition to height: auto; */
         block-size: calc-size(auto, size);
     }
-} }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../src/components/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,eAAO,MAAM,aAAa,GAAI,6FAU3B,kBAAkB,4CAmCpB,CAAC"}
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../src/components/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,eAAO,MAAM,aAAa,GAAI,6FAU3B,kBAAkB,4CAoCpB,CAAC"}

package/dist/components/AccordionItem/AccordionItem.js

@@ -1,8 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { ChevronDown } from "@dnanpm/icons";
 import { useAccordionContext } from "../Accordion/Accordion.utils.js";
-import elevationStyles from "../../styles/utils/elevation.module.css.js";
-import focusStyles from "../../styles/utils/focus.module.css.js";
+import { focusStyles, elevationStyles } from "../../styles/utils/index.js";
 import styles from "./AccordionItem.module.css.js";
 import { cn } from "../../utils/cn/cn.js";
 const AccordionItem = ({
@@ -30,6 +29,7 @@ const AccordionItem = ({
         className
       ),
       ...props,
+      ...variant === "box" ? { "data-color-scheme": "light" } : {},
       name: groupName ?? name,
       children: [
         /* @__PURE__ */ jsxs("summary", { className: cn(styles["accordion-item__summary"], focusStyles.focusableInset), children: [

package/dist/components/AccordionItem/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../src/components/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { ChevronDown } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { useAccordionContext } from '../Accordion/Accordion.utils';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './AccordionItem.module.css';\nimport type { AccordionItemProps } from './AccordionItem.types';\n\nexport const AccordionItem = ({\n    label,\n    variant: variantProp,\n    image,\n    imageSize,\n    children,\n    className,\n    name,\n    ref,\n    ...props\n}: AccordionItemProps) => {\n    const { variant: contextVariant, groupName } = useAccordionContext();\n    const variant = variantProp ?? contextVariant;\n    const resolvedImageSize = image ? (imageSize ?? 'md') : undefined;\n\n    return (\n        <details\n            ref={ref}\n            className={cn(\n                styles['accordion-item'],\n                styles[`accordion-item--${variant}`],\n                variant === 'box' && elevationStyles.elevationLow,\n                className,\n            )}\n            {...props}\n            name={groupName ?? name}\n        >\n            <summary className={cn(styles['accordion-item__summary'], focusStyles.focusableInset)}>\n                {image && (\n                    <span\n                        className={cn(\n                            styles['accordion-item__image'],\n                            resolvedImageSize &&\n                                styles[`accordion-item__image--${resolvedImageSize}`],\n                        )}\n                    >\n                        {image}\n                    </span>\n                )}\n                <span className={styles['accordion-item__label']}>{label}</span>\n                <ChevronDown className={styles['accordion-item__chevron']} aria-hidden=\"true\" />\n            </summary>\n            <div className={styles['accordion-item__content']}>{children}</div>\n        </details>\n    );\n};\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,gBAAgB,CAAC;AAAA,EAC1B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAA0B;AACtB,QAAM,EAAE,SAAS,gBAAgB,UAAA,IAAc,oBAAA;AAC/C,QAAM,UAAU,eAAe;AAC/B,QAAM,oBAAoB,QAAS,aAAa,OAAQ;AAExD,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAW;AAAA,QACP,OAAO,gBAAgB;AAAA,QACvB,OAAO,mBAAmB,OAAO,EAAE;AAAA,QACnC,YAAY,SAAS,gBAAgB;AAAA,QACrC;AAAA,MAAA;AAAA,MAEH,GAAG;AAAA,MACJ,MAAM,aAAa;AAAA,MAEnB,UAAA;AAAA,QAAA,qBAAC,WAAA,EAAQ,WAAW,GAAG,OAAO,yBAAyB,GAAG,YAAY,cAAc,GAC/E,UAAA;AAAA,UAAA,SACG;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAW;AAAA,gBACP,OAAO,uBAAuB;AAAA,gBAC9B,qBACI,OAAO,0BAA0B,iBAAiB,EAAE;AAAA,cAAA;AAAA,cAG3D,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,8BAGR,QAAA,EAAK,WAAW,OAAO,uBAAuB,GAAI,UAAA,OAAM;AAAA,8BACxD,aAAA,EAAY,WAAW,OAAO,yBAAyB,GAAG,eAAY,OAAA,CAAO;AAAA,QAAA,GAClF;AAAA,4BACC,OAAA,EAAI,WAAW,OAAO,yBAAyB,GAAI,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzE;"}
+{"version":3,"file":"AccordionItem.js","sources":["../../../src/components/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { ChevronDown } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { useAccordionContext } from '../Accordion/Accordion.utils';\nimport { elevationStyles, focusStyles } from '../../styles/utils';\nimport styles from './AccordionItem.module.css';\nimport type { AccordionItemProps } from './AccordionItem.types';\n\nexport const AccordionItem = ({\n    label,\n    variant: variantProp,\n    image,\n    imageSize,\n    children,\n    className,\n    name,\n    ref,\n    ...props\n}: AccordionItemProps) => {\n    const { variant: contextVariant, groupName } = useAccordionContext();\n    const variant = variantProp ?? contextVariant;\n    const resolvedImageSize = image ? (imageSize ?? 'md') : undefined;\n\n    return (\n        <details\n            ref={ref}\n            className={cn(\n                styles['accordion-item'],\n                styles[`accordion-item--${variant}`],\n                variant === 'box' && elevationStyles.elevationLow,\n                className,\n            )}\n            {...props}\n            {...(variant === 'box' ? { 'data-color-scheme': 'light' } : {})}\n            name={groupName ?? name}\n        >\n            <summary className={cn(styles['accordion-item__summary'], focusStyles.focusableInset)}>\n                {image && (\n                    <span\n                        className={cn(\n                            styles['accordion-item__image'],\n                            resolvedImageSize &&\n                                styles[`accordion-item__image--${resolvedImageSize}`],\n                        )}\n                    >\n                        {image}\n                    </span>\n                )}\n                <span className={styles['accordion-item__label']}>{label}</span>\n                <ChevronDown className={styles['accordion-item__chevron']} aria-hidden=\"true\" />\n            </summary>\n            <div className={styles['accordion-item__content']}>{children}</div>\n        </details>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,gBAAgB,CAAC;AAAA,EAC1B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAA0B;AACtB,QAAM,EAAE,SAAS,gBAAgB,UAAA,IAAc,oBAAA;AAC/C,QAAM,UAAU,eAAe;AAC/B,QAAM,oBAAoB,QAAS,aAAa,OAAQ;AAExD,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAW;AAAA,QACP,OAAO,gBAAgB;AAAA,QACvB,OAAO,mBAAmB,OAAO,EAAE;AAAA,QACnC,YAAY,SAAS,gBAAgB;AAAA,QACrC;AAAA,MAAA;AAAA,MAEH,GAAG;AAAA,MACH,GAAI,YAAY,QAAQ,EAAE,qBAAqB,QAAA,IAAY,CAAA;AAAA,MAC5D,MAAM,aAAa;AAAA,MAEnB,UAAA;AAAA,QAAA,qBAAC,WAAA,EAAQ,WAAW,GAAG,OAAO,yBAAyB,GAAG,YAAY,cAAc,GAC/E,UAAA;AAAA,UAAA,SACG;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAW;AAAA,gBACP,OAAO,uBAAuB;AAAA,gBAC9B,qBACI,OAAO,0BAA0B,iBAAiB,EAAE;AAAA,cAAA;AAAA,cAG3D,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,8BAGR,QAAA,EAAK,WAAW,OAAO,uBAAuB,GAAI,UAAA,OAAM;AAAA,8BACxD,aAAA,EAAY,WAAW,OAAO,yBAAyB,GAAG,eAAY,OAAA,CAAO;AAAA,QAAA,GAClF;AAAA,4BACC,OAAA,EAAI,WAAW,OAAO,yBAAyB,GAAI,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzE;"}

package/dist/components/Avatar/Avatar.cjs

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const icons = require("@dnanpm/icons");
+const Avatar_module = require("./Avatar.module.css.cjs");
+const Avatar_utils = require("./Avatar.utils.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const isRenderable = require("../../utils/isRenderable/isRenderable.cjs");
+const fallbackMedia = {
+  variant: "icon",
+  content: /* @__PURE__ */ jsxRuntime.jsx(icons.UserFilled, { "aria-hidden": "true" })
+};
+const resolveMedia = (props) => {
+  switch (props.variant) {
+    case void 0:
+    case "letter":
+    case "two-letters": {
+      const variant = props.variant ?? "letter";
+      const initials = Avatar_utils.getInitials(props.name, variant === "two-letters" ? 2 : 1);
+      return initials === "" ? fallbackMedia : {
+        variant,
+        content: /* @__PURE__ */ jsxRuntime.jsx("span", { className: Avatar_module.default["avatar__initials"], children: initials })
+      };
+    }
+    case "person":
+    case "logo":
+      return isRenderable.isRenderable(props.image) ? { variant: props.variant, content: props.image } : fallbackMedia;
+    case "icon": {
+      const Icon = props.icon ?? icons.UserFilled;
+      return { variant: "icon", content: /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true" }) };
+    }
+  }
+};
+const Avatar = (props) => {
+  const {
+    size = "medium",
+    background = "sand-mid",
+    orientation = "horizontal",
+    showName = true,
+    name,
+    className,
+    ref,
+    variant: _variant,
+    image: _image,
+    icon: _icon,
+    ...rest
+  } = props;
+  const media = resolveMedia(props);
+  const trimmedName = name.trim();
+  const hasName = trimmedName.length > 0;
+  const isNameExposed = !showName && hasName;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref,
+      ...rest,
+      className: cn.cn(
+        Avatar_module.default["avatar"],
+        Avatar_module.default[`avatar--${size}`],
+        Avatar_module.default[`avatar--${orientation}`],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn.cn(
+              Avatar_module.default["avatar__media"],
+              Avatar_module.default[`avatar__media--${size}`],
+              Avatar_module.default[`avatar__media--${media.variant}`],
+              Avatar_module.default[`avatar__media--bg-${background}`]
+            ),
+            ...isNameExposed ? { role: "img", "aria-label": trimmedName } : { "aria-hidden": true },
+            children: media.content
+          }
+        ),
+        showName && hasName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Avatar_module.default["avatar__label"], children: name })
+      ]
+    }
+  );
+};
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar.cjs.map

package/dist/components/Avatar/Avatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { UserFilled } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { isRenderable } from '../../utils/isRenderable';\nimport styles from './Avatar.module.css';\nimport type { AvatarProps, ResolvedMedia } from './Avatar.types';\nimport { getInitials } from './Avatar.utils';\n\nconst fallbackMedia: ResolvedMedia = {\n    variant: 'icon',\n    content: <UserFilled aria-hidden=\"true\" />,\n};\n\n// Takes the whole props object so TypeScript can narrow the union on `variant`.\nconst resolveMedia = (props: AvatarProps): ResolvedMedia => {\n    switch (props.variant) {\n        case undefined:\n        case 'letter':\n        case 'two-letters': {\n            const variant = props.variant ?? 'letter';\n            const initials = getInitials(props.name, variant === 'two-letters' ? 2 : 1);\n\n            return initials === ''\n                ? fallbackMedia\n                : {\n                      variant,\n                      content: <span className={styles['avatar__initials']}>{initials}</span>,\n                  };\n        }\n        case 'person':\n        case 'logo':\n            return isRenderable(props.image)\n                ? { variant: props.variant, content: props.image }\n                : fallbackMedia;\n        case 'icon': {\n            const Icon = props.icon ?? UserFilled;\n\n            return { variant: 'icon', content: <Icon aria-hidden=\"true\" /> };\n        }\n    }\n};\n\nexport const Avatar = (props: AvatarProps) => {\n    const {\n        size = 'medium',\n        background = 'sand-mid',\n        orientation = 'horizontal',\n        showName = true,\n        name,\n        className,\n        ref,\n        variant: _variant,\n        image: _image,\n        icon: _icon,\n        ...rest\n    } = props;\n\n    const media = resolveMedia(props);\n    const trimmedName = name.trim();\n    const hasName = trimmedName.length > 0;\n    // A visible name already names the avatar, so the circle stays hidden to avoid repeating it.\n    const isNameExposed = !showName && hasName;\n\n    return (\n        <span\n            ref={ref}\n            {...rest}\n            className={cn(\n                styles['avatar'],\n                styles[`avatar--${size}`],\n                styles[`avatar--${orientation}`],\n                className,\n            )}\n        >\n            <span\n                className={cn(\n                    styles['avatar__media'],\n                    styles[`avatar__media--${size}`],\n                    styles[`avatar__media--${media.variant}`],\n                    styles[`avatar__media--bg-${background}`],\n                )}\n                {...(isNameExposed\n                    ? { role: 'img', 'aria-label': trimmedName }\n                    : { 'aria-hidden': true })}\n            >\n                {media.content}\n            </span>\n            {showName && hasName && <span className={styles['avatar__label']}>{name}</span>}\n        </span>\n    );\n};\n"],"names":["jsx","UserFilled","getInitials","styles","isRenderable","jsxs","cn"],"mappings":";;;;;;;;AAOA,MAAM,gBAA+B;AAAA,EACjC,SAAS;AAAA,EACT,SAASA,2BAAAA,IAACC,MAAAA,YAAA,EAAW,eAAY,OAAA,CAAO;AAC5C;AAGA,MAAM,eAAe,CAAC,UAAsC;AACxD,UAAQ,MAAM,SAAA;AAAA,IACV,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK,eAAe;AAChB,YAAM,UAAU,MAAM,WAAW;AACjC,YAAM,WAAWC,aAAAA,YAAY,MAAM,MAAM,YAAY,gBAAgB,IAAI,CAAC;AAE1E,aAAO,aAAa,KACd,gBACA;AAAA,QACI;AAAA,QACA,SAASF,2BAAAA,IAAC,QAAA,EAAK,WAAWG,cAAAA,QAAO,kBAAkB,GAAI,UAAA,SAAA,CAAS;AAAA,MAAA;AAAA,IAE9E;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AACD,aAAOC,0BAAa,MAAM,KAAK,IACzB,EAAE,SAAS,MAAM,SAAS,SAAS,MAAM,MAAA,IACzC;AAAA,IACV,KAAK,QAAQ;AACT,YAAM,OAAO,MAAM,QAAQH,MAAAA;AAE3B,aAAO,EAAE,SAAS,QAAQ,wCAAU,MAAA,EAAK,eAAY,QAAO,EAAA;AAAA,IAChE;AAAA,EAAA;AAER;AAEO,MAAM,SAAS,CAAC,UAAuB;AAC1C,QAAM;AAAA,IACF,OAAO;AAAA,IACP,aAAa;AAAA,IACb,cAAc;AAAA,IACd,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,QAAQ,aAAa,KAAK;AAChC,QAAM,cAAc,KAAK,KAAA;AACzB,QAAM,UAAU,YAAY,SAAS;AAErC,QAAM,gBAAgB,CAAC,YAAY;AAEnC,SACII,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAWC,GAAAA;AAAAA,QACPH,cAAAA,QAAO,QAAQ;AAAA,QACfA,cAAAA,QAAO,WAAW,IAAI,EAAE;AAAA,QACxBA,cAAAA,QAAO,WAAW,WAAW,EAAE;AAAA,QAC/B;AAAA,MAAA;AAAA,MAGJ,UAAA;AAAA,QAAAH,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWM,GAAAA;AAAAA,cACPH,cAAAA,QAAO,eAAe;AAAA,cACtBA,cAAAA,QAAO,kBAAkB,IAAI,EAAE;AAAA,cAC/BA,cAAAA,QAAO,kBAAkB,MAAM,OAAO,EAAE;AAAA,cACxCA,sBAAO,qBAAqB,UAAU,EAAE;AAAA,YAAA;AAAA,YAE3C,GAAI,gBACC,EAAE,MAAM,OAAO,cAAc,YAAA,IAC7B,EAAE,eAAe,KAAA;AAAA,YAEtB,UAAA,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAEV,YAAY,WAAWH,2BAAAA,IAAC,QAAA,EAAK,WAAWG,cAAAA,QAAO,eAAe,GAAI,UAAA,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpF;;"}

package/dist/components/Avatar/Avatar.css

@@ -0,0 +1,188 @@
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._avatar_1edxy_1 {
+    --_avatar-label-font: var(--typography-label-md);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-space-8);
+    max-width: 100%;
+    min-width: 0;
+    vertical-align: middle;
+}
+
+._avatar--vertical_1edxy_12 {
+    flex-direction: column;
+    text-align: center;
+}
+
+/* The label is a sibling of the circle, so the root carries the size for the label font. */
+._avatar--medium_1edxy_18 {
+    --_avatar-label-font: var(--typography-label-lg);
+}
+
+._avatar--large_1edxy_22 {
+    --_avatar-label-font: var(--typography-body-lg-medium);
+}
+
+/* === Media (the circle) === */
+
+._avatar__media_1edxy_28 {
+    --_avatar-size: 24px;
+    --_avatar-content-size: 12px;
+    --_avatar-initials-font: var(--typography-label-md);
+    --_avatar-border-color: var(--color-semantic-border-neutral-soft);
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--_avatar-size);
+    height: var(--_avatar-size);
+    overflow: hidden;
+    color: var(--color-semantic-foreground-muted);
+    border: var(--borderwidth-semantic-xs) solid var(--_avatar-border-color);
+    border-radius: var(--radius-semantic-full);
+    background-clip: padding-box;
+}
+
+/* === Sizes (base holds the small values; every avatar also gets a size modifier) === */
+
+._avatar__media--medium_1edxy_49 {
+    --_avatar-size: 48px;
+    --_avatar-content-size: 24px;
+    --_avatar-initials-font: var(--typography-label-lg);
+}
+
+._avatar__media--large_1edxy_55 {
+    --_avatar-size: 64px;
+    --_avatar-content-size: 32px;
+    --_avatar-initials-font: var(--typography-body-lg-medium);
+}
+
+/* 24 px has no room for two letters at the regular size. */
+._avatar__media--small_1edxy_62._avatar__media--two-letters_1edxy_62 {
+    --_avatar-initials-font: var(--typography-label-sm);
+}
+
+/* === Content === */
+
+._avatar__initials_1edxy_68 {
+    font: var(--_avatar-initials-font);
+    white-space: nowrap;
+}
+
+._avatar__media--person_1edxy_73 :where(img, picture, video, svg, canvas) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+._avatar__media--logo_1edxy_80 :where(img, picture, video, svg, canvas),
+._avatar__media--icon_1edxy_81 svg {
+    display: block;
+    width: var(--_avatar-content-size);
+    height: var(--_avatar-content-size);
+}
+
+._avatar__media--logo_1edxy_80 :where(img, picture, video, svg, canvas) {
+    object-fit: contain;
+}
+
+/* === Backgrounds (each sets a foreground colour that keeps 4.5:1 contrast) === */
+
+._avatar__media--bg-white_1edxy_93 {
+    background-color: var(--color-semantic-surface-base);
+}
+
+._avatar__media--bg-sand-soft_1edxy_97 {
+    background-color: var(--color-semantic-surface-neutral-soft);
+}
+
+._avatar__media--bg-sand-mid_1edxy_101 {
+    background-color: var(--color-semantic-surface-neutral-mid);
+}
+
+._avatar__media--bg-sand-strong_1edxy_105 {
+    background-color: var(--color-semantic-surface-neutral-strong);
+}
+
+._avatar__media--bg-pink-soft_1edxy_109 {
+    background-color: var(--color-semantic-surface-primary-soft);
+}
+
+._avatar__media--bg-pink-mid_1edxy_113 {
+    color: var(--color-semantic-foreground-default);
+    background-color: var(--color-semantic-surface-primary-mid);
+}
+
+._avatar__media--bg-pink-strong_1edxy_118 {
+    --_avatar-border-color: var(--color-semantic-border-primary);
+
+    color: var(--color-semantic-foreground-inverse);
+    background-color: var(--color-semantic-surface-primary-strong);
+}
+
+._avatar__media--bg-plum-soft_1edxy_125 {
+    --_avatar-border-color: var(--color-semantic-border-secondary);
+
+    color: var(--color-semantic-foreground-inverse);
+    background-color: var(--color-semantic-surface-secondary-soft);
+}
+
+._avatar__media--bg-plum-mid_1edxy_132 {
+    --_avatar-border-color: var(--color-semantic-border-secondary);
+
+    color: var(--color-semantic-foreground-inverse);
+    background-color: var(--color-semantic-surface-secondary-mid);
+}
+
+._avatar__media--bg-plum-strong_1edxy_139 {
+    --_avatar-border-color: var(--color-semantic-border-secondary);
+
+    color: var(--color-semantic-foreground-inverse);
+    background-color: var(--color-semantic-surface-secondary-strong);
+}
+
+._avatar__media--bg-transparent_1edxy_146 {
+    background-color: transparent;
+}
+
+/* A photo covers the background, so it keeps the neutral border whatever the background. */
+._avatar__media--person_1edxy_73 {
+    --_avatar-border-color: var(--color-semantic-border-neutral-soft);
+}
+
+/* === Label === */
+
+._avatar__label_1edxy_157 {
+    min-width: 0;
+    color: var(--color-semantic-foreground-default);
+    font: var(--_avatar-label-font);
+    display: -webkit-box;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+}
+
+/* Styles apply from [data-color-scheme="dark"] down to (but not into) [data-color-scheme="light"]. */
+@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
+    ._avatar__label_1edxy_157 {
+        color: var(--color-semantic-foreground-inverse);
+    }
+
+    ._avatar__media--bg-transparent_1edxy_146 {
+        color: var(--color-semantic-foreground-inverse);
+    }
+}
+
+/* Background colours are removed in forced colors mode, so keep the circle outline visible. */
+@media (forced-colors: active) {
+    ._avatar__media_1edxy_28 {
+        border: var(--borderwidth-semantic-xs) solid CanvasText;
+    }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,3 @@
+import { AvatarProps } from './Avatar.types';
+export declare const Avatar: (props: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,gBAAgB,CAAC;AAqCjE,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CAgDxC,CAAC"}

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,83 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { UserFilled } from "@dnanpm/icons";
+import styles from "./Avatar.module.css.js";
+import { getInitials } from "./Avatar.utils.js";
+import { cn } from "../../utils/cn/cn.js";
+import { isRenderable } from "../../utils/isRenderable/isRenderable.js";
+const fallbackMedia = {
+  variant: "icon",
+  content: /* @__PURE__ */ jsx(UserFilled, { "aria-hidden": "true" })
+};
+const resolveMedia = (props) => {
+  switch (props.variant) {
+    case void 0:
+    case "letter":
+    case "two-letters": {
+      const variant = props.variant ?? "letter";
+      const initials = getInitials(props.name, variant === "two-letters" ? 2 : 1);
+      return initials === "" ? fallbackMedia : {
+        variant,
+        content: /* @__PURE__ */ jsx("span", { className: styles["avatar__initials"], children: initials })
+      };
+    }
+    case "person":
+    case "logo":
+      return isRenderable(props.image) ? { variant: props.variant, content: props.image } : fallbackMedia;
+    case "icon": {
+      const Icon = props.icon ?? UserFilled;
+      return { variant: "icon", content: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) };
+    }
+  }
+};
+const Avatar = (props) => {
+  const {
+    size = "medium",
+    background = "sand-mid",
+    orientation = "horizontal",
+    showName = true,
+    name,
+    className,
+    ref,
+    variant: _variant,
+    image: _image,
+    icon: _icon,
+    ...rest
+  } = props;
+  const media = resolveMedia(props);
+  const trimmedName = name.trim();
+  const hasName = trimmedName.length > 0;
+  const isNameExposed = !showName && hasName;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      ...rest,
+      className: cn(
+        styles["avatar"],
+        styles[`avatar--${size}`],
+        styles[`avatar--${orientation}`],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              styles["avatar__media"],
+              styles[`avatar__media--${size}`],
+              styles[`avatar__media--${media.variant}`],
+              styles[`avatar__media--bg-${background}`]
+            ),
+            ...isNameExposed ? { role: "img", "aria-label": trimmedName } : { "aria-hidden": true },
+            children: media.content
+          }
+        ),
+        showName && hasName && /* @__PURE__ */ jsx("span", { className: styles["avatar__label"], children: name })
+      ]
+    }
+  );
+};
+export {
+  Avatar
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { UserFilled } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { isRenderable } from '../../utils/isRenderable';\nimport styles from './Avatar.module.css';\nimport type { AvatarProps, ResolvedMedia } from './Avatar.types';\nimport { getInitials } from './Avatar.utils';\n\nconst fallbackMedia: ResolvedMedia = {\n    variant: 'icon',\n    content: <UserFilled aria-hidden=\"true\" />,\n};\n\n// Takes the whole props object so TypeScript can narrow the union on `variant`.\nconst resolveMedia = (props: AvatarProps): ResolvedMedia => {\n    switch (props.variant) {\n        case undefined:\n        case 'letter':\n        case 'two-letters': {\n            const variant = props.variant ?? 'letter';\n            const initials = getInitials(props.name, variant === 'two-letters' ? 2 : 1);\n\n            return initials === ''\n                ? fallbackMedia\n                : {\n                      variant,\n                      content: <span className={styles['avatar__initials']}>{initials}</span>,\n                  };\n        }\n        case 'person':\n        case 'logo':\n            return isRenderable(props.image)\n                ? { variant: props.variant, content: props.image }\n                : fallbackMedia;\n        case 'icon': {\n            const Icon = props.icon ?? UserFilled;\n\n            return { variant: 'icon', content: <Icon aria-hidden=\"true\" /> };\n        }\n    }\n};\n\nexport const Avatar = (props: AvatarProps) => {\n    const {\n        size = 'medium',\n        background = 'sand-mid',\n        orientation = 'horizontal',\n        showName = true,\n        name,\n        className,\n        ref,\n        variant: _variant,\n        image: _image,\n        icon: _icon,\n        ...rest\n    } = props;\n\n    const media = resolveMedia(props);\n    const trimmedName = name.trim();\n    const hasName = trimmedName.length > 0;\n    // A visible name already names the avatar, so the circle stays hidden to avoid repeating it.\n    const isNameExposed = !showName && hasName;\n\n    return (\n        <span\n            ref={ref}\n            {...rest}\n            className={cn(\n                styles['avatar'],\n                styles[`avatar--${size}`],\n                styles[`avatar--${orientation}`],\n                className,\n            )}\n        >\n            <span\n                className={cn(\n                    styles['avatar__media'],\n                    styles[`avatar__media--${size}`],\n                    styles[`avatar__media--${media.variant}`],\n                    styles[`avatar__media--bg-${background}`],\n                )}\n                {...(isNameExposed\n                    ? { role: 'img', 'aria-label': trimmedName }\n                    : { 'aria-hidden': true })}\n            >\n                {media.content}\n            </span>\n            {showName && hasName && <span className={styles['avatar__label']}>{name}</span>}\n        </span>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,gBAA+B;AAAA,EACjC,SAAS;AAAA,EACT,SAAS,oBAAC,YAAA,EAAW,eAAY,OAAA,CAAO;AAC5C;AAGA,MAAM,eAAe,CAAC,UAAsC;AACxD,UAAQ,MAAM,SAAA;AAAA,IACV,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK,eAAe;AAChB,YAAM,UAAU,MAAM,WAAW;AACjC,YAAM,WAAW,YAAY,MAAM,MAAM,YAAY,gBAAgB,IAAI,CAAC;AAE1E,aAAO,aAAa,KACd,gBACA;AAAA,QACI;AAAA,QACA,SAAS,oBAAC,QAAA,EAAK,WAAW,OAAO,kBAAkB,GAAI,UAAA,SAAA,CAAS;AAAA,MAAA;AAAA,IAE9E;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AACD,aAAO,aAAa,MAAM,KAAK,IACzB,EAAE,SAAS,MAAM,SAAS,SAAS,MAAM,MAAA,IACzC;AAAA,IACV,KAAK,QAAQ;AACT,YAAM,OAAO,MAAM,QAAQ;AAE3B,aAAO,EAAE,SAAS,QAAQ,6BAAU,MAAA,EAAK,eAAY,QAAO,EAAA;AAAA,IAChE;AAAA,EAAA;AAER;AAEO,MAAM,SAAS,CAAC,UAAuB;AAC1C,QAAM;AAAA,IACF,OAAO;AAAA,IACP,aAAa;AAAA,IACb,cAAc;AAAA,IACd,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,QAAQ,aAAa,KAAK;AAChC,QAAM,cAAc,KAAK,KAAA;AACzB,QAAM,UAAU,YAAY,SAAS;AAErC,QAAM,gBAAgB,CAAC,YAAY;AAEnC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW;AAAA,QACP,OAAO,QAAQ;AAAA,QACf,OAAO,WAAW,IAAI,EAAE;AAAA,QACxB,OAAO,WAAW,WAAW,EAAE;AAAA,QAC/B;AAAA,MAAA;AAAA,MAGJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW;AAAA,cACP,OAAO,eAAe;AAAA,cACtB,OAAO,kBAAkB,IAAI,EAAE;AAAA,cAC/B,OAAO,kBAAkB,MAAM,OAAO,EAAE;AAAA,cACxC,OAAO,qBAAqB,UAAU,EAAE;AAAA,YAAA;AAAA,YAE3C,GAAI,gBACC,EAAE,MAAM,OAAO,cAAc,YAAA,IAC7B,EAAE,eAAe,KAAA;AAAA,YAEtB,UAAA,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAEV,YAAY,WAAW,oBAAC,QAAA,EAAK,WAAW,OAAO,eAAe,GAAI,UAAA,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpF;"}

package/dist/components/Avatar/Avatar.module.css.cjs

@@ -0,0 +1,40 @@
+require('./Avatar.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const avatar = "_avatar_1edxy_1";
+const avatar__media = "_avatar__media_1edxy_28";
+const avatar__initials = "_avatar__initials_1edxy_68";
+const avatar__label = "_avatar__label_1edxy_157";
+const styles = {
+  avatar,
+  "avatar--vertical": "_avatar--vertical_1edxy_12",
+  "avatar--medium": "_avatar--medium_1edxy_18",
+  "avatar--large": "_avatar--large_1edxy_22",
+  avatar__media,
+  "avatar__media--medium": "_avatar__media--medium_1edxy_49",
+  "avatar__media--large": "_avatar__media--large_1edxy_55",
+  "avatar__media--small": "_avatar__media--small_1edxy_62",
+  "avatar__media--two-letters": "_avatar__media--two-letters_1edxy_62",
+  avatar__initials,
+  "avatar__media--person": "_avatar__media--person_1edxy_73",
+  "avatar__media--logo": "_avatar__media--logo_1edxy_80",
+  "avatar__media--icon": "_avatar__media--icon_1edxy_81",
+  "avatar__media--bg-white": "_avatar__media--bg-white_1edxy_93",
+  "avatar__media--bg-sand-soft": "_avatar__media--bg-sand-soft_1edxy_97",
+  "avatar__media--bg-sand-mid": "_avatar__media--bg-sand-mid_1edxy_101",
+  "avatar__media--bg-sand-strong": "_avatar__media--bg-sand-strong_1edxy_105",
+  "avatar__media--bg-pink-soft": "_avatar__media--bg-pink-soft_1edxy_109",
+  "avatar__media--bg-pink-mid": "_avatar__media--bg-pink-mid_1edxy_113",
+  "avatar__media--bg-pink-strong": "_avatar__media--bg-pink-strong_1edxy_118",
+  "avatar__media--bg-plum-soft": "_avatar__media--bg-plum-soft_1edxy_125",
+  "avatar__media--bg-plum-mid": "_avatar__media--bg-plum-mid_1edxy_132",
+  "avatar__media--bg-plum-strong": "_avatar__media--bg-plum-strong_1edxy_139",
+  "avatar__media--bg-transparent": "_avatar__media--bg-transparent_1edxy_146",
+  avatar__label
+};
+exports.avatar = avatar;
+exports.avatar__initials = avatar__initials;
+exports.avatar__label = avatar__label;
+exports.avatar__media = avatar__media;
+exports.default = styles;
+//# sourceMappingURL=Avatar.module.css.cjs.map

package/dist/components/Avatar/Avatar.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Avatar/Avatar.module.css.js

@@ -0,0 +1,40 @@
+import './Avatar.css';
+const avatar = "_avatar_1edxy_1";
+const avatar__media = "_avatar__media_1edxy_28";
+const avatar__initials = "_avatar__initials_1edxy_68";
+const avatar__label = "_avatar__label_1edxy_157";
+const styles = {
+  avatar,
+  "avatar--vertical": "_avatar--vertical_1edxy_12",
+  "avatar--medium": "_avatar--medium_1edxy_18",
+  "avatar--large": "_avatar--large_1edxy_22",
+  avatar__media,
+  "avatar__media--medium": "_avatar__media--medium_1edxy_49",
+  "avatar__media--large": "_avatar__media--large_1edxy_55",
+  "avatar__media--small": "_avatar__media--small_1edxy_62",
+  "avatar__media--two-letters": "_avatar__media--two-letters_1edxy_62",
+  avatar__initials,
+  "avatar__media--person": "_avatar__media--person_1edxy_73",
+  "avatar__media--logo": "_avatar__media--logo_1edxy_80",
+  "avatar__media--icon": "_avatar__media--icon_1edxy_81",
+  "avatar__media--bg-white": "_avatar__media--bg-white_1edxy_93",
+  "avatar__media--bg-sand-soft": "_avatar__media--bg-sand-soft_1edxy_97",
+  "avatar__media--bg-sand-mid": "_avatar__media--bg-sand-mid_1edxy_101",
+  "avatar__media--bg-sand-strong": "_avatar__media--bg-sand-strong_1edxy_105",
+  "avatar__media--bg-pink-soft": "_avatar__media--bg-pink-soft_1edxy_109",
+  "avatar__media--bg-pink-mid": "_avatar__media--bg-pink-mid_1edxy_113",
+  "avatar__media--bg-pink-strong": "_avatar__media--bg-pink-strong_1edxy_118",
+  "avatar__media--bg-plum-soft": "_avatar__media--bg-plum-soft_1edxy_125",
+  "avatar__media--bg-plum-mid": "_avatar__media--bg-plum-mid_1edxy_132",
+  "avatar__media--bg-plum-strong": "_avatar__media--bg-plum-strong_1edxy_139",
+  "avatar__media--bg-transparent": "_avatar__media--bg-transparent_1edxy_146",
+  avatar__label
+};
+export {
+  avatar,
+  avatar__initials,
+  avatar__label,
+  avatar__media,
+  styles as default
+};
+//# sourceMappingURL=Avatar.module.css.js.map

package/dist/components/Avatar/Avatar.module.css.js.map

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