@drivenets/design-system 0.6.0 → 0.6.1

package/dist/components/ds-autocomplete/ds-autocomplete.module.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-autocomplete.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-autocomplete/ds-autocomplete.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/shared/_input.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/shared/_dropdown.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/mixins/_bounding-box.scss"],"sourcesContent":["@use '../../styles/shared/dropdown';\n@use '../../styles/shared/input';\n\n$autocomplete-input-height: 36px;\n$autocomplete-max-visible-items: 4;\n$autocomplete-item-height: 38px;\n$autocomplete-dropdown-max-height: calc($autocomplete-max-visible-items * $autocomplete-item-height);\n$autocomplete-trigger-size: 24px;\n$autocomplete-trigger-border-radius: 4px;\n$autocomplete-highlight-border-radius: 2px;\n$autocomplete-animation-duration: 0.2s;\n$autocomplete-animation-translate: -8px;\n$autocomplete-outline-width: 2px;\n$autocomplete-outline-offset: 2px;\n$autocomplete-rotation-open: 180deg;\n$autocomplete-opacity-hidden: 0;\n$autocomplete-opacity-visible: 1;\n\n.root {\n\tposition: relative;\n\twidth: 100%;\n\tdisplay: inline-flex;\n\tflex-direction: column;\n}\n\n.control {\n\t@include input.base-input-container;\n\t@include input.input-container-states;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--spacing-3xs);\n\theight: $autocomplete-input-height;\n\tmin-height: $autocomplete-input-height;\n\tmax-height: $autocomplete-input-height;\n\n\t&[data-focus] {\n\t\tborder-color: var(--form-control-border-color, var(--color-border-action-primary)) !important;\n\t}\n\n\t&[data-invalid] {\n\t\tborder-color: var(--color-background-danger-strong);\n\t}\n}\n\n.input {\n\t@include input.base-input;\n\tflex: 1;\n\tmin-width: 0;\n\toutline: none;\n\n\t&::placeholder {\n\t\tcolor: var(--color-font-placeholder);\n\t}\n}\n\n.startAdornment {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcolor: var(--color-background-action);\n\tflex-shrink: 0;\n}\n\n.iconContainer {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--spacing-3xs);\n\tflex-shrink: 0;\n}\n\n.clearButton {\n\t@include input.icon-button;\n\tcursor: pointer;\n\topacity: $autocomplete-opacity-hidden;\n\tvisibility: hidden;\n\ttransition: opacity $autocomplete-animation-duration ease;\n\n\t&:hover {\n\t\tcolor: var(--color-background-action-hover);\n\t}\n}\n\n.control:hover .clearButton,\n.control[data-focus] .clearButton {\n\topacity: $autocomplete-opacity-visible;\n\tvisibility: visible;\n}\n\n.trigger {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcolor: var(--color-background-deselected);\n\ttransition:\n\t\ttransform $autocomplete-animation-duration ease-in-out,\n\t\tbackground-color $autocomplete-animation-duration ease,\n\t\tcolor $autocomplete-animation-duration ease;\n\tcursor: pointer;\n\tbackground: transparent;\n\tborder: none;\n\tpadding: 0;\n\tborder-radius: $autocomplete-trigger-border-radius;\n\twidth: $autocomplete-trigger-size;\n\theight: $autocomplete-trigger-size;\n\n\t&:hover {\n\t\tcolor: var(--color-background-deselected-hover);\n\t\tbackground: var(--color-background-action-hover-weak);\n\t}\n\n\t&[data-state='open'] {\n\t\ttransform: rotate($autocomplete-rotation-open);\n\t\tcolor: var(--color-background-deselected-hover);\n\t\tbackground: var(--color-background-action-hover-weak);\n\t}\n\n\t&:focus-visible {\n\t\toutline: $autocomplete-outline-width solid var(--color-focus);\n\t\toutline-offset: $autocomplete-outline-offset;\n\t}\n}\n\n.control[data-focus] .trigger {\n\tcolor: var(--color-background-deselected-hover);\n\tbackground: var(--color-background-action-hover-weak);\n}\n\n.positioner {\n\tz-index: var(--z-index-dropdown, 9999);\n\twidth: var(--reference-width);\n}\n\n.content {\n\t@include dropdown.dropdown-content;\n\toverflow: hidden;\n\tanimation: expand $autocomplete-animation-duration ease;\n\twidth: 100%;\n\tmin-width: var(--reference-width);\n\tmax-height: $autocomplete-dropdown-max-height;\n\n\t&[data-state='open'] {\n\t\tanimation: expand $autocomplete-animation-duration ease;\n\t}\n\n\t&[data-state='closed'] {\n\t\tanimation: collapse $autocomplete-animation-duration ease;\n\t}\n}\n\n.itemGroup {\n\toverflow-y: auto;\n\toverflow-x: hidden;\n\tmax-height: $autocomplete-dropdown-max-height;\n\tscrollbar-width: thin;\n}\n\n.item {\n\t@include dropdown.dropdown-item;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--spacing-xs);\n\theight: $autocomplete-item-height;\n\tmin-height: $autocomplete-item-height;\n\n\t&[data-highlighted] {\n\t\tbackground: var(--color-background-secondary-selected-weak);\n\t}\n}\n\n.itemIcon {\n\tcolor: var(--color-background-deselected);\n\tflex-shrink: 0;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.itemText {\n\tflex: 1;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\n\tmark {\n\t\tbackground-color: var(--color-data-yellow);\n\t\tcolor: var(--color-font-main);\n\t\tfont-weight: var(--font-weight-medium);\n\t\tpadding: 0;\n\t\tborder-radius: $autocomplete-highlight-border-radius;\n\t}\n}\n\n.noMatches {\n\tpadding: var(--spacing-xs);\n\tcolor: var(--color-font-disabled);\n\ttext-align: center;\n\tfont-size: var(--font-size-sm);\n}\n\n.disabled {\n\t.control {\n\t\tcolor: var(--color-background-deselected);\n\t\tbackground: var(--color-background-secondary);\n\t\tborder-color: var(--color-border-disabled);\n\t\tcursor: not-allowed;\n\n\t\t.input {\n\t\t\tcolor: var(--color-font-disabled);\n\t\t\tcursor: not-allowed;\n\t\t}\n\n\t\t.trigger {\n\t\t\tcolor: var(--color-background-disable);\n\t\t\tcursor: not-allowed;\n\t\t\tbackground: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tbackground: transparent;\n\t\t\t\tcolor: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n}\n\n.invalid {\n\t.control {\n\t\tborder-color: var(--color-background-danger-strong);\n\n\t\t&:hover,\n\t\t&[data-focus] {\n\t\t\tborder-color: var(--color-background-danger-strong) !important;\n\t\t}\n\t}\n}\n\n@keyframes expand {\n\t0% {\n\t\topacity: $autocomplete-opacity-hidden;\n\t\ttransform: translateY($autocomplete-animation-translate);\n\t}\n\n\t100% {\n\t\topacity: $autocomplete-opacity-visible;\n\t\ttransform: translateY(0);\n\t}\n}\n\n@keyframes collapse {\n\t0% {\n\t\topacity: $autocomplete-opacity-visible;\n\t\ttransform: translateY(0);\n\t}\n\n\t100% {\n\t\topacity: $autocomplete-opacity-hidden;\n\t\ttransform: translateY($autocomplete-animation-translate);\n\t}\n}\n"],"mappings":""}

package/dist/components/ds-autocomplete/ds-autocomplete.types.d.cts

@@ -1,79 +0,0 @@
-import { IconName } from "../ds-icon/ds-icon.types.cjs";
-import React from "react";
-
-//#region src/components/ds-autocomplete/ds-autocomplete.types.d.ts
-interface DsAutocompleteOption {
-  /**
-   * Label to display in the autocomplete dropdown
-   */
-  label: string;
-  /**
-   * Value to return when the option is selected
-   */
-  value: string;
-  /**
-   * Optional icon to display next to the label
-   */
-  icon?: IconName;
-}
-interface DsAutocompleteProps {
-  /**
-   * Unique identifier for the autocomplete component
-   */
-  id?: string;
-  /**
-   * Options to display in the dropdown
-   */
-  options: DsAutocompleteOption[];
-  /**
-   * Additional styles to apply to the component
-   */
-  style?: React.CSSProperties;
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-  /**
-   * Placeholder text to display when input is empty
-   */
-  placeholder?: string;
-  /**
-   * Whether the autocomplete is disabled
-   */
-  disabled?: boolean;
-  /**
-   * Whether the autocomplete is in an invalid state
-   */
-  invalid?: boolean;
-  /**
-   * Event handler called when the value changes (when an option is selected or custom value is entered)
-   */
-  onValueChange?: (value: string) => void;
-  /**
-   * Event handler called when the input value changes (on every keystroke)
-   */
-  onInputValueChange?: (value: string) => void;
-  /**
-   * Message to display when no options match the input
-   * @default 'No matches found'
-   */
-  noMatchesMessage?: string;
-  /**
-   * Whether to highlight the matching text in the dropdown options
-   * @default true
-   */
-  highlightMatch?: boolean;
-  /**
-   * Whether to show the dropdown trigger (arrow) button.
-   * If false, the dropdown will only open on typing.
-   * @default true
-   */
-  showTrigger?: boolean;
-  /**
-   * Content to display at the start of the input (e.g., a search icon).
-   */
-  startAdornment?: React.ReactNode;
-}
-//#endregion
-export { DsAutocompleteOption, DsAutocompleteProps };
-//# sourceMappingURL=ds-autocomplete.types.d.cts.map

package/dist/components/ds-autocomplete/ds-autocomplete.types.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-autocomplete.types.d.cts","names":[],"sources":["../../../src/components/ds-autocomplete/ds-autocomplete.types.tsx"],"sourcesContent":[],"mappings":";;;;UAGiB,oBAAA;;AAAjB;AAeA;EAQU,KAAA,EAAA,MAAA;EAID;;;;;;;SAfD;;UAGS,mBAAA;;;;;;;;WAQP;;;;UAID,KAAA,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA4CG,KAAA,CAAM"}

package/dist/components/ds-autocomplete/ds-autocomplete.types.d.ts

@@ -1,80 +0,0 @@
-import { IconName } from "../ds-icon/ds-icon.types.js";
-import "../ds-icon/index.js";
-import React from "react";
-
-//#region src/components/ds-autocomplete/ds-autocomplete.types.d.ts
-interface DsAutocompleteOption {
-  /**
-   * Label to display in the autocomplete dropdown
-   */
-  label: string;
-  /**
-   * Value to return when the option is selected
-   */
-  value: string;
-  /**
-   * Optional icon to display next to the label
-   */
-  icon?: IconName;
-}
-interface DsAutocompleteProps {
-  /**
-   * Unique identifier for the autocomplete component
-   */
-  id?: string;
-  /**
-   * Options to display in the dropdown
-   */
-  options: DsAutocompleteOption[];
-  /**
-   * Additional styles to apply to the component
-   */
-  style?: React.CSSProperties;
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-  /**
-   * Placeholder text to display when input is empty
-   */
-  placeholder?: string;
-  /**
-   * Whether the autocomplete is disabled
-   */
-  disabled?: boolean;
-  /**
-   * Whether the autocomplete is in an invalid state
-   */
-  invalid?: boolean;
-  /**
-   * Event handler called when the value changes (when an option is selected or custom value is entered)
-   */
-  onValueChange?: (value: string) => void;
-  /**
-   * Event handler called when the input value changes (on every keystroke)
-   */
-  onInputValueChange?: (value: string) => void;
-  /**
-   * Message to display when no options match the input
-   * @default 'No matches found'
-   */
-  noMatchesMessage?: string;
-  /**
-   * Whether to highlight the matching text in the dropdown options
-   * @default true
-   */
-  highlightMatch?: boolean;
-  /**
-   * Whether to show the dropdown trigger (arrow) button.
-   * If false, the dropdown will only open on typing.
-   * @default true
-   */
-  showTrigger?: boolean;
-  /**
-   * Content to display at the start of the input (e.g., a search icon).
-   */
-  startAdornment?: React.ReactNode;
-}
-//#endregion
-export { DsAutocompleteOption, DsAutocompleteProps };
-//# sourceMappingURL=ds-autocomplete.types.d.ts.map

package/dist/components/ds-autocomplete/ds-autocomplete.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-autocomplete.types.d.ts","names":[],"sources":["../../../src/components/ds-autocomplete/ds-autocomplete.types.tsx"],"sourcesContent":[],"mappings":";;;;;UAGiB,oBAAA;;;AAAjB;EAeiB,KAAA,EAAA,MAAA;EAQP;;;EAgDuB,KAAA,EAAA,MAAA;;;;SA3DzB;;UAGS,mBAAA;;;;;;;;WAQP;;;;UAID,KAAA,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA4CG,KAAA,CAAM"}

package/dist/components/ds-autocomplete/index.cjs

@@ -1 +0,0 @@
-const require_ds_autocomplete = require('./ds-autocomplete.cjs');

package/dist/components/ds-autocomplete/index.d.ts

@@ -1,2 +0,0 @@
-import { DsAutocompleteOption, DsAutocompleteProps } from "./ds-autocomplete.types.js";
-import { DsAutocomplete } from "./ds-autocomplete.js";

package/dist/components/ds-autocomplete/index.js

@@ -1 +0,0 @@
-import { DsAutocomplete } from "./ds-autocomplete.js";

package/dist/components/ds-avatar/ds-avatar.cjs

@@ -1,98 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_ds_avatar_module = require('./ds-avatar.module.cjs');
-const require_ds_tooltip = require('../ds-tooltip/ds-tooltip.cjs');
-require('../ds-tooltip/index.cjs');
-let react_compiler_runtime = require("react/compiler-runtime");
-let classnames = require("classnames");
-classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
-let _ark_ui_react_avatar = require("@ark-ui/react/avatar");
-
-//#region src/components/ds-avatar/ds-avatar.tsx
-/**
-* DsAvatar component for displaying user profile pictures or initials
-*/
-const DsAvatar = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(23);
-	const { src, alt, name, size: t1, type: t2, className, style, onStatusChange } = t0;
-	const size = t1 === void 0 ? "regular" : t1;
-	const type = t2 === void 0 ? "circle" : t2;
-	const getInitials = _temp2;
-	let t3;
-	if ($[0] !== onStatusChange) {
-		t3 = (details) => onStatusChange?.(details.status);
-		$[0] = onStatusChange;
-		$[1] = t3;
-	} else t3 = $[1];
-	const t4 = require_ds_avatar_module.default[size];
-	const t5 = require_ds_avatar_module.default[type];
-	let t6;
-	if ($[2] !== className || $[3] !== t4 || $[4] !== t5) {
-		t6 = (0, classnames.default)(require_ds_avatar_module.default.avatar, t4, t5, className);
-		$[2] = className;
-		$[3] = t4;
-		$[4] = t5;
-		$[5] = t6;
-	} else t6 = $[5];
-	let t7;
-	if ($[6] !== name) {
-		t7 = getInitials(name);
-		$[6] = name;
-		$[7] = t7;
-	} else t7 = $[7];
-	let t8;
-	if ($[8] !== t7) {
-		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_avatar.Avatar.Fallback, {
-			className: require_ds_avatar_module.default.fallback,
-			children: t7
-		});
-		$[8] = t7;
-		$[9] = t8;
-	} else t8 = $[9];
-	let t9;
-	if ($[10] !== alt || $[11] !== name || $[12] !== src) {
-		t9 = src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_avatar.Avatar.Image, {
-			src,
-			alt: alt || name
-		});
-		$[10] = alt;
-		$[11] = name;
-		$[12] = src;
-		$[13] = t9;
-	} else t9 = $[13];
-	let t10;
-	if ($[14] !== style || $[15] !== t3 || $[16] !== t6 || $[17] !== t8 || $[18] !== t9) {
-		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_avatar.Avatar.Root, {
-			onStatusChange: t3,
-			className: t6,
-			style,
-			children: [t8, t9]
-		});
-		$[14] = style;
-		$[15] = t3;
-		$[16] = t6;
-		$[17] = t8;
-		$[18] = t9;
-		$[19] = t10;
-	} else t10 = $[19];
-	let t11;
-	if ($[20] !== name || $[21] !== t10) {
-		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_tooltip.default, {
-			content: name,
-			children: t10
-		});
-		$[20] = name;
-		$[21] = t10;
-		$[22] = t11;
-	} else t11 = $[22];
-	return t11;
-};
-function _temp(w) {
-	return w[0];
-}
-function _temp2(name_0) {
-	return name_0.trim().split(" ").map(_temp).join("");
-}
-
-//#endregion
-exports.DsAvatar = DsAvatar;

package/dist/components/ds-avatar/ds-avatar.d.cts

@@ -1,12 +0,0 @@
-import { DsAvatarProps } from "./ds-avatar.types.cjs";
-import { FC } from "react";
-
-//#region src/components/ds-avatar/ds-avatar.d.ts
-
-/**
- * DsAvatar component for displaying user profile pictures or initials
- */
-declare const DsAvatar: FC<DsAvatarProps>;
-//#endregion
-export { DsAvatar };
-//# sourceMappingURL=ds-avatar.d.cts.map

package/dist/components/ds-avatar/ds-avatar.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-avatar.d.cts","names":[],"sources":["../../../src/components/ds-avatar/ds-avatar.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAUA;cAAa,UAAU,GAAG"}

package/dist/components/ds-avatar/ds-avatar.d.ts

@@ -1,12 +0,0 @@
-import { DsAvatarProps } from "./ds-avatar.types.js";
-import { FC } from "react";
-
-//#region src/components/ds-avatar/ds-avatar.d.ts
-
-/**
- * DsAvatar component for displaying user profile pictures or initials
- */
-declare const DsAvatar: FC<DsAvatarProps>;
-//#endregion
-export { DsAvatar };
-//# sourceMappingURL=ds-avatar.d.ts.map

package/dist/components/ds-avatar/ds-avatar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-avatar.d.ts","names":[],"sources":["../../../src/components/ds-avatar/ds-avatar.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAUA;cAAa,UAAU,GAAG"}

package/dist/components/ds-avatar/ds-avatar.js

@@ -1,97 +0,0 @@
-import ds_avatar_module_default from "./ds-avatar.module.js";
-import ds_tooltip_default from "../ds-tooltip/ds-tooltip.js";
-import "../ds-tooltip/index.js";
-import { c } from "react/compiler-runtime";
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Avatar } from "@ark-ui/react/avatar";
-
-//#region src/components/ds-avatar/ds-avatar.tsx
-/**
-* DsAvatar component for displaying user profile pictures or initials
-*/
-const DsAvatar = (t0) => {
-	const $ = c(23);
-	const { src, alt, name, size: t1, type: t2, className, style, onStatusChange } = t0;
-	const size = t1 === void 0 ? "regular" : t1;
-	const type = t2 === void 0 ? "circle" : t2;
-	const getInitials = _temp2;
-	let t3;
-	if ($[0] !== onStatusChange) {
-		t3 = (details) => onStatusChange?.(details.status);
-		$[0] = onStatusChange;
-		$[1] = t3;
-	} else t3 = $[1];
-	const t4 = ds_avatar_module_default[size];
-	const t5 = ds_avatar_module_default[type];
-	let t6;
-	if ($[2] !== className || $[3] !== t4 || $[4] !== t5) {
-		t6 = classNames(ds_avatar_module_default.avatar, t4, t5, className);
-		$[2] = className;
-		$[3] = t4;
-		$[4] = t5;
-		$[5] = t6;
-	} else t6 = $[5];
-	let t7;
-	if ($[6] !== name) {
-		t7 = getInitials(name);
-		$[6] = name;
-		$[7] = t7;
-	} else t7 = $[7];
-	let t8;
-	if ($[8] !== t7) {
-		t8 = /* @__PURE__ */ jsx(Avatar.Fallback, {
-			className: ds_avatar_module_default.fallback,
-			children: t7
-		});
-		$[8] = t7;
-		$[9] = t8;
-	} else t8 = $[9];
-	let t9;
-	if ($[10] !== alt || $[11] !== name || $[12] !== src) {
-		t9 = src && /* @__PURE__ */ jsx(Avatar.Image, {
-			src,
-			alt: alt || name
-		});
-		$[10] = alt;
-		$[11] = name;
-		$[12] = src;
-		$[13] = t9;
-	} else t9 = $[13];
-	let t10;
-	if ($[14] !== style || $[15] !== t3 || $[16] !== t6 || $[17] !== t8 || $[18] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(Avatar.Root, {
-			onStatusChange: t3,
-			className: t6,
-			style,
-			children: [t8, t9]
-		});
-		$[14] = style;
-		$[15] = t3;
-		$[16] = t6;
-		$[17] = t8;
-		$[18] = t9;
-		$[19] = t10;
-	} else t10 = $[19];
-	let t11;
-	if ($[20] !== name || $[21] !== t10) {
-		t11 = /* @__PURE__ */ jsx(ds_tooltip_default, {
-			content: name,
-			children: t10
-		});
-		$[20] = name;
-		$[21] = t10;
-		$[22] = t11;
-	} else t11 = $[22];
-	return t11;
-};
-function _temp(w) {
-	return w[0];
-}
-function _temp2(name_0) {
-	return name_0.trim().split(" ").map(_temp).join("");
-}
-
-//#endregion
-export { DsAvatar };
-//# sourceMappingURL=ds-avatar.js.map

package/dist/components/ds-avatar/ds-avatar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-avatar.js","names":["FC","Avatar","classNames","styles","DsAvatarProps","DsTooltip","DsAvatar","t0","$","_c","src","alt","name","size","t1","type","t2","className","style","onStatusChange","undefined","getInitials","_temp2","t3","details","status","t4","t5","t6","avatar","t7","t8","fallback","t9","t10","t11","_temp","w","name_0","trim","split","map","join"],"sources":["../../../src/components/ds-avatar/ds-avatar.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { Avatar } from '@ark-ui/react/avatar';\nimport classNames from 'classnames';\nimport styles from './ds-avatar.module.scss';\nimport type { DsAvatarProps } from './ds-avatar.types';\nimport { DsTooltip } from '../ds-tooltip';\n\n/**\n * DsAvatar component for displaying user profile pictures or initials\n */\nexport const DsAvatar: FC<DsAvatarProps> = ({\n\tsrc,\n\talt,\n\tname,\n\tsize = 'regular',\n\ttype = 'circle',\n\tclassName,\n\tstyle,\n\tonStatusChange,\n}) => {\n\tconst getInitials = (name: string) =>\n\t\tname\n\t\t\t.trim()\n\t\t\t.split(' ')\n\t\t\t.map((w) => w[0])\n\t\t\t.join('');\n\n\treturn (\n\t\t<DsTooltip content={name}>\n\t\t\t{\n\t\t\t\t<Avatar.Root\n\t\t\t\t\tonStatusChange={(details) => onStatusChange?.(details.status)}\n\t\t\t\t\tclassName={classNames(styles.avatar, styles[size], styles[type], className)}\n\t\t\t\t\tstyle={style}\n\t\t\t\t>\n\t\t\t\t\t<Avatar.Fallback className={styles.fallback}>{getInitials(name)}</Avatar.Fallback>\n\t\t\t\t\t{src && <Avatar.Image src={src} alt={alt || name} />}\n\t\t\t\t</Avatar.Root>\n\t\t\t}\n\t\t</DsTooltip>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;AAUA,MAAaM,YAA8BC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAC,MAAA,EAAAC,KAAAC,KAAAC,MAAAC,MAAAC,IAAAC,MAAAC,IAAAC,WAAAC,OAAAC,mBAAAZ;CAI3C,MAAAM,OAAAC,OAAAM,SAAA,YAAAN;CACA,MAAAC,OAAAC,OAAAI,SAAA,WAAAJ;CAKA,MAAAK,cAAoBC;CAKR,IAAAC;AAAA,KAAAf,EAAA,OAAAW,gBAAA;AAMQI,QAAAC,YAAaL,iBAAiBK,QAAOC,OAAQ;AAAAjB,IAAA,KAAAW;AAAAX,IAAA,KAAAe;OAAAA,MAAAf,EAAA;CACxB,MAAAkB,KAAAvB,yBAAOU;CAAO,MAAAc,KAAAxB,yBAAOY;CAAK,IAAAa;AAAA,KAAApB,EAAA,OAAAS,aAAAT,EAAA,OAAAkB,MAAAlB,EAAA,OAAAmB,IAAA;AAApDC,OAAA1B,WAAWC,yBAAM0B,QAASH,IAAcC,IAAcV,UAAU;AAAAT,IAAA,KAAAS;AAAAT,IAAA,KAAAkB;AAAAlB,IAAA,KAAAmB;AAAAnB,IAAA,KAAAoB;OAAAA,MAAApB,EAAA;CAAA,IAAAsB;AAAA,KAAAtB,EAAA,OAAAI,MAAA;AAG7BkB,OAAAT,YAAYT,KAAK;AAAAJ,IAAA,KAAAI;AAAAJ,IAAA,KAAAsB;OAAAA,MAAAtB,EAAA;CAAA,IAAAuB;AAAA,KAAAvB,EAAA,OAAAsB,IAAA;AAA/DC,OAAA,oBAAA,OAAA;GAA4B,WAAA5B,yBAAM6B;aAAYF;IAAoC;AAAAtB,IAAA,KAAAsB;AAAAtB,IAAA,KAAAuB;OAAAA,MAAAvB,EAAA;CAAA,IAAAyB;AAAA,KAAAzB,EAAA,QAAAG,OAAAH,EAAA,QAAAI,QAAAJ,EAAA,QAAAE,KAAA;AACjFuB,OAAAvB,OAAO,oBAAA,OAAA;GAAmBA;GAAU,KAAAC,OAAAC;IAAe;AAAAJ,IAAA,MAAAG;AAAAH,IAAA,MAAAI;AAAAJ,IAAA,MAAAE;AAAAF,IAAA,MAAAyB;OAAAA,MAAAzB,EAAA;CAAA,IAAA0B;AAAA,KAAA1B,EAAA,QAAAU,SAAAV,EAAA,QAAAe,MAAAf,EAAA,QAAAoB,MAAApB,EAAA,QAAAuB,MAAAvB,EAAA,QAAAyB,IAAA;AANrDC,QAAA,qBAAA,OAAA;GACiB,gBAAAX;GACL,WAAAK;GACJV;cAEPa,IACCE;IACY;AAAAzB,IAAA,MAAAU;AAAAV,IAAA,MAAAe;AAAAf,IAAA,MAAAoB;AAAApB,IAAA,MAAAuB;AAAAvB,IAAA,MAAAyB;AAAAzB,IAAA,MAAA0B;OAAAA,OAAA1B,EAAA;CAAA,IAAA2B;AAAA,KAAA3B,EAAA,QAAAI,QAAAJ,EAAA,QAAA0B,KAAA;AAThBC,QAAA,oBAAC;GAAmBvB,SAAAA;aAElBsB;IASU;AAAA1B,IAAA,MAAAI;AAAAJ,IAAA,MAAA0B;AAAA1B,IAAA,MAAA2B;OAAAA,OAAA3B,EAAA;AAAA,QAXZ2B;;AAlByC,SAAAC,MAAAC,GAAA;AAAA,QAc5BA,EAAC;;AAd2B,SAAAf,OAAAgB,QAAA;AAAA,QAWzC1B,OAAI2B,MACI,CAAAC,MACA,IAAI,CAAAC,IACNL,MAAY,CAAAM,KACX,GAAG"}

package/dist/components/ds-avatar/ds-avatar.module.cjs

@@ -1,17 +0,0 @@
-
-//#region src/components/ds-avatar/ds-avatar.module.scss
-var ds_avatar_module_default = {
-	"avatar": "_avatar_1pkly_1",
-	"circle": "_circle_1pkly_1",
-	"rounded": "_rounded_1pkly_1",
-	"xsm": "_xsm_1pkly_1",
-	"sm": "_sm_1pkly_1",
-	"regular": "_regular_1pkly_1",
-	"md": "_md_1pkly_1",
-	"lg": "_lg_1pkly_1",
-	"xl": "_xl_1pkly_1",
-	"fallback": "_fallback_1pkly_1"
-};
-
-//#endregion
-exports.default = ds_avatar_module_default;

package/dist/components/ds-avatar/ds-avatar.module.js

@@ -1,17 +0,0 @@
-//#region src/components/ds-avatar/ds-avatar.module.scss
-var ds_avatar_module_default = {
-	"avatar": "_avatar_1pkly_1",
-	"circle": "_circle_1pkly_1",
-	"rounded": "_rounded_1pkly_1",
-	"xsm": "_xsm_1pkly_1",
-	"sm": "_sm_1pkly_1",
-	"regular": "_regular_1pkly_1",
-	"md": "_md_1pkly_1",
-	"lg": "_lg_1pkly_1",
-	"xl": "_xl_1pkly_1",
-	"fallback": "_fallback_1pkly_1"
-};
-
-//#endregion
-export { ds_avatar_module_default as default };
-//# sourceMappingURL=ds-avatar.module.js.map

package/dist/components/ds-avatar/ds-avatar.module.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-avatar.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar/ds-avatar.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar/_mixins.scss"],"sourcesContent":["@use './mixins' as *;\n\n.avatar {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: relative;\n\toverflow: hidden;\n\tbackground-color: var(--color-background-deselected);\n\tcolor: var(--color-font-on-action);\n\tflex-shrink: 0;\n\tuser-select: none;\n\n\t&.circle {\n\t\tborder-radius: 50%;\n\t}\n\n\t&.rounded {\n\t\t&.xsm,\n\t\t&.sm {\n\t\t\tborder-radius: $avatar-border-radius-small;\n\t\t}\n\t\t&.regular,\n\t\t&.md,\n\t\t&.lg,\n\t\t&.xl {\n\t\t\tborder-radius: $avatar-border-radius-large;\n\t\t}\n\t}\n\n\t@include avatar-sizes;\n\n\timg {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n\t\tdisplay: block;\n\t}\n\n\t.fallback {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tfont-weight: var(--font-weight-medium);\n\t\ttext-transform: uppercase;\n\t}\n}\n"],"mappings":""}

package/dist/components/ds-avatar/ds-avatar.types.d.cts

@@ -1,44 +0,0 @@
-import { CSSProperties } from "react";
-
-//#region src/components/ds-avatar/ds-avatar.types.d.ts
-type DsAvatarSize = 'xsm' | 'sm' | 'regular' | 'md' | 'lg' | 'xl';
-type DsAvatarType = 'circle' | 'rounded';
-interface DsAvatarProps {
-  /**
-   * Image source URL
-   */
-  src?: string;
-  /**
-   * Alt text for the image
-   */
-  alt?: string;
-  /**
-   * Name to display in tooltip and as initials if image fails
-   */
-  name: string;
-  /**
-   * Size of the avatar
-   * @default 'regular'
-   */
-  size?: DsAvatarSize;
-  /**
-   * Shape of the avatar
-   * @default 'circle'
-   */
-  type?: DsAvatarType;
-  /**
-   * Custom class name
-   */
-  className?: string;
-  /**
-   * Custom inline styles
-   */
-  style?: CSSProperties;
-  /**
-   * Callback when the status of the image changes
-   */
-  onStatusChange?: (status: 'error' | 'loaded') => void;
-}
-//#endregion
-export { DsAvatarProps, DsAvatarSize, DsAvatarType };
-//# sourceMappingURL=ds-avatar.types.d.cts.map

package/dist/components/ds-avatar/ds-avatar.types.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-avatar.types.d.cts","names":[],"sources":["../../../src/components/ds-avatar/ds-avatar.types.ts"],"sourcesContent":[],"mappings":";;;KAEY,YAAA;KACA,YAAA;AADA,UAGK,aAAA,CAHO;EACZ;AAEZ;;EAsBQ,GAAA,CAAA,EAAA,MAAA;EAQC;;;;;;;;;;;;SAbD;;;;;SAKA;;;;;;;;UAQC"}

package/dist/components/ds-avatar/ds-avatar.types.d.ts

@@ -1,44 +0,0 @@
-import { CSSProperties } from "react";
-
-//#region src/components/ds-avatar/ds-avatar.types.d.ts
-type DsAvatarSize = 'xsm' | 'sm' | 'regular' | 'md' | 'lg' | 'xl';
-type DsAvatarType = 'circle' | 'rounded';
-interface DsAvatarProps {
-  /**
-   * Image source URL
-   */
-  src?: string;
-  /**
-   * Alt text for the image
-   */
-  alt?: string;
-  /**
-   * Name to display in tooltip and as initials if image fails
-   */
-  name: string;
-  /**
-   * Size of the avatar
-   * @default 'regular'
-   */
-  size?: DsAvatarSize;
-  /**
-   * Shape of the avatar
-   * @default 'circle'
-   */
-  type?: DsAvatarType;
-  /**
-   * Custom class name
-   */
-  className?: string;
-  /**
-   * Custom inline styles
-   */
-  style?: CSSProperties;
-  /**
-   * Callback when the status of the image changes
-   */
-  onStatusChange?: (status: 'error' | 'loaded') => void;
-}
-//#endregion
-export { DsAvatarProps, DsAvatarSize, DsAvatarType };
-//# sourceMappingURL=ds-avatar.types.d.ts.map

package/dist/components/ds-avatar/ds-avatar.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-avatar.types.d.ts","names":[],"sources":["../../../src/components/ds-avatar/ds-avatar.types.ts"],"sourcesContent":[],"mappings":";;;KAEY,YAAA;KACA,YAAA;AADA,UAGK,aAAA,CAHO;EACZ;AAEZ;;EAsBQ,GAAA,CAAA,EAAA,MAAA;EAQC;;;;;;;;;;;;SAbD;;;;;SAKA;;;;;;;;UAQC"}

package/dist/components/ds-avatar/index.cjs

@@ -1 +0,0 @@
-const require_ds_avatar = require('./ds-avatar.cjs');

package/dist/components/ds-avatar/index.d.ts

@@ -1,2 +0,0 @@
-import { DsAvatarProps, DsAvatarSize, DsAvatarType } from "./ds-avatar.types.js";
-import { DsAvatar } from "./ds-avatar.js";

package/dist/components/ds-avatar/index.js

@@ -1 +0,0 @@
-import { DsAvatar } from "./ds-avatar.js";