@drivenets/design-system 0.3.0 → 0.4.0

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

@@ -0,0 +1,27 @@
+//#region src/components/ds-autocomplete/ds-autocomplete.module.scss
+var ds_autocomplete_module_default = {
+	"root": "_root_1ah6z_1",
+	"control": "_control_1ah6z_1",
+	"input": "_input_1ah6z_1",
+	"iconButton": "_iconButton_1ah6z_1",
+	"startAdornment": "_startAdornment_1ah6z_1",
+	"iconContainer": "_iconContainer_1ah6z_1",
+	"clearButton": "_clearButton_1ah6z_1",
+	"trigger": "_trigger_1ah6z_1",
+	"positioner": "_positioner_1ah6z_1",
+	"content": "_content_1ah6z_1",
+	"expand": "_expand_1ah6z_1",
+	"collapse": "_collapse_1ah6z_1",
+	"itemGroup": "_itemGroup_1ah6z_1",
+	"item": "_item_1ah6z_1",
+	"indicator": "_indicator_1ah6z_1",
+	"itemIcon": "_itemIcon_1ah6z_1",
+	"itemText": "_itemText_1ah6z_1",
+	"noMatches": "_noMatches_1ah6z_1",
+	"disabled": "_disabled_1ah6z_1",
+	"invalid": "_invalid_1ah6z_1"
+};
+
+//#endregion
+export { ds_autocomplete_module_default as default };
+//# sourceMappingURL=ds-autocomplete.module.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

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

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

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

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

@@ -1 +1 @@
-{"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":["@import './mixins';\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":""}
+{"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-group/ds-avatar-group.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ds-avatar-group.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar-group/ds-avatar-group.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar/_mixins.scss"],"sourcesContent":["@import '../ds-avatar/mixins';\n\n.avatarGroup {\n\tdisplay: flex;\n\talign-items: center;\n\n\t.avatarItem {\n\t\tborder: $avatar-border-width solid var(--color-background);\n\n\t\t&:not(:first-child) {\n\t\t\tmargin-left: $avatar-overlap-default;\n\t\t}\n\n\t\t&.xsm:not(:first-child) {\n\t\t\tmargin-left: $avatar-overlap-xsm;\n\t\t}\n\n\t\t&.sm:not(:first-child) {\n\t\t\tmargin-left: $avatar-overlap-sm;\n\t\t}\n\t}\n\n\t.moreAvatar {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tbackground-color: var(--color-background);\n\t\tcolor: var(--color-font-action);\n\t\tborder: $avatar-border-width solid var(--color-background);\n\t\tmargin-left: $avatar-overlap-default;\n\t\tfont-weight: var(--font-weight-medium);\n\t\tz-index: 1;\n\t\tcursor: default;\n\t\tflex-shrink: 0;\n\n\t\t&.circle {\n\t\t\tborder-radius: 50%;\n\t\t}\n\n\t\t&.rounded {\n\t\t\t&.xsm,\n\t\t\t&.sm {\n\t\t\t\tborder-radius: $avatar-border-radius-small;\n\t\t\t}\n\t\t\t&.regular,\n\t\t\t&.md,\n\t\t\t&.lg,\n\t\t\t&.xl {\n\t\t\t\tborder-radius: $avatar-border-radius-large;\n\t\t\t}\n\t\t}\n\n\t\t@include avatar-sizes;\n\n\t\t&.xsm {\n\t\t\tmargin-left: $avatar-overlap-xsm;\n\t\t}\n\n\t\t&.sm {\n\t\t\tmargin-left: $avatar-overlap-sm;\n\t\t}\n\t}\n\n\t.tooltipList {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--spacing-3xs);\n\t\tpadding: var(--spacing-3xs) 0;\n\t}\n}\n"],"mappings":""}
+{"version":3,"file":"ds-avatar-group.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar-group/ds-avatar-group.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar/_mixins.scss"],"sourcesContent":["@use '../ds-avatar/mixins' as *;\n\n.avatarGroup {\n\tdisplay: flex;\n\talign-items: center;\n\n\t.avatarItem {\n\t\tborder: $avatar-border-width solid var(--color-background);\n\n\t\t&:not(:first-child) {\n\t\t\tmargin-left: $avatar-overlap-default;\n\t\t}\n\n\t\t&.xsm:not(:first-child) {\n\t\t\tmargin-left: $avatar-overlap-xsm;\n\t\t}\n\n\t\t&.sm:not(:first-child) {\n\t\t\tmargin-left: $avatar-overlap-sm;\n\t\t}\n\t}\n\n\t.moreAvatar {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tbackground-color: var(--color-background);\n\t\tcolor: var(--color-font-action);\n\t\tborder: $avatar-border-width solid var(--color-background);\n\t\tmargin-left: $avatar-overlap-default;\n\t\tfont-weight: var(--font-weight-medium);\n\t\tz-index: 1;\n\t\tcursor: default;\n\t\tflex-shrink: 0;\n\n\t\t&.circle {\n\t\t\tborder-radius: 50%;\n\t\t}\n\n\t\t&.rounded {\n\t\t\t&.xsm,\n\t\t\t&.sm {\n\t\t\t\tborder-radius: $avatar-border-radius-small;\n\t\t\t}\n\t\t\t&.regular,\n\t\t\t&.md,\n\t\t\t&.lg,\n\t\t\t&.xl {\n\t\t\t\tborder-radius: $avatar-border-radius-large;\n\t\t\t}\n\t\t}\n\n\t\t@include avatar-sizes;\n\n\t\t&.xsm {\n\t\t\tmargin-left: $avatar-overlap-xsm;\n\t\t}\n\n\t\t&.sm {\n\t\t\tmargin-left: $avatar-overlap-sm;\n\t\t}\n\t}\n\n\t.tooltipList {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--spacing-3xs);\n\t\tpadding: var(--spacing-3xs) 0;\n\t}\n}\n"],"mappings":""}

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

@@ -1,8 +1,8 @@
 import { DsButtonUnifiedProps } from "./ds-button.types.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/components/ds-button/ds-button.d.ts
-declare const DsButton: (props: DsButtonUnifiedProps) => react_jsx_runtime0.JSX.Element;
+declare const DsButton: (props: DsButtonUnifiedProps) => react_jsx_runtime11.JSX.Element;
 //#endregion
 export { DsButton };
 //# sourceMappingURL=ds-button.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ds-button.d.cts","names":[],"sources":["../../../src/components/ds-button/ds-button.tsx"],"sourcesContent":[],"mappings":";;;;cAIM,kBAAmB,yBAAoB,kBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"ds-button.d.cts","names":[],"sources":["../../../src/components/ds-button/ds-button.tsx"],"sourcesContent":[],"mappings":";;;;cAIM,kBAAmB,yBAAoB,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -1,235 +1,34 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_ds_icon = require('../ds-icon/ds-icon.cjs');
-require('../ds-icon/index.cjs');
-const require_ds_typography = require('../ds-typography/ds-typography.cjs');
-const require_ds_confirmation_module = require('./ds-confirmation.module.cjs');
+const require_ds_modal = require('../ds-modal/ds-modal.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_portal = require("@ark-ui/react/portal");
-let __ark_ui_react_dialog = require("@ark-ui/react/dialog");
 
 //#region src/components/ds-confirmation/ds-confirmation.tsx
 /**
-* Composable confirmation modal dialog.
+* @deprecated DsConfirmation is deprecated. Use DsModal instead.
+* @see {@link ../ds-modal} for the replacement component.
 */
-const DsConfirmation = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(15);
-	const { open, onOpenChange, style, className, children } = t0;
-	let t1;
-	if ($[0] !== onOpenChange) {
-		t1 = (details) => {
-			onOpenChange(details.open);
-		};
-		$[0] = onOpenChange;
-		$[1] = t1;
-	} else t1 = $[1];
-	const handleOpenChange = t1;
-	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Backdrop, { className: require_ds_confirmation_module.default.overlay });
-		$[2] = t2;
-	} else t2 = $[2];
-	let t3;
-	if ($[3] !== className) {
-		t3 = (0, classnames.default)(require_ds_confirmation_module.default.modal, className);
-		$[3] = className;
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] !== children || $[6] !== style) {
-		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style,
-			className: require_ds_confirmation_module.default.content,
-			children
-		});
-		$[5] = children;
-		$[6] = style;
-		$[7] = t4;
-	} else t4 = $[7];
-	let t5;
-	if ($[8] !== t3 || $[9] !== t4) {
-		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_portal.Portal, { children: [t2, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Content, {
-			className: t3,
-			children: t4
-		}) })] });
-		$[8] = t3;
-		$[9] = t4;
-		$[10] = t5;
-	} else t5 = $[10];
-	let t6;
-	if ($[11] !== handleOpenChange || $[12] !== open || $[13] !== t5) {
-		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Root, {
-			open,
-			onOpenChange: handleOpenChange,
-			modal: true,
+const DsConfirmation = (props) => {
+	const $ = (0, react_compiler_runtime.c)(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_modal.default, {
+			columns: 4,
 			closeOnEscape: true,
 			closeOnInteractOutside: true,
-			children: t5
-		});
-		$[11] = handleOpenChange;
-		$[12] = open;
-		$[13] = t5;
-		$[14] = t6;
-	} else t6 = $[14];
-	return t6;
-};
-const Header = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(6);
-	const { style, className, children } = t0;
-	let t1;
-	if ($[0] !== className) {
-		t1 = (0, classnames.default)(require_ds_confirmation_module.default.header, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style,
-			className: t1,
-			children
-		});
-		$[2] = children;
-		$[3] = style;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
-};
-const Title = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(8);
-	const { style, className, children } = t0;
-	let t1;
-	if ($[0] !== className) {
-		t1 = (0, classnames.default)(require_ds_confirmation_module.default.title, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== children) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
-			variant: "heading4",
-			children
-		});
-		$[2] = children;
-		$[3] = t2;
-	} else t2 = $[3];
-	let t3;
-	if ($[4] !== style || $[5] !== t1 || $[6] !== t2) {
-		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Title, {
-			className: t1,
-			style,
-			asChild: true,
-			children: t2
-		});
-		$[4] = style;
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	return t3;
-};
-const CloseTrigger = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(4);
-	const { style, className } = t0;
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-			icon: "close",
-			size: "small"
-		});
-		$[0] = t1;
-	} else t1 = $[0];
-	let t2;
-	if ($[1] !== className || $[2] !== style) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.CloseTrigger, {
-			style,
-			className,
-			children: t1
-		});
-		$[1] = className;
-		$[2] = style;
-		$[3] = t2;
-	} else t2 = $[3];
-	return t2;
-};
-const Body = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(6);
-	const { style, className, children } = t0;
-	let t1;
-	if ($[0] !== className) {
-		t1 = (0, classnames.default)(require_ds_confirmation_module.default.body, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style,
-			className: t1,
-			children
-		});
-		$[2] = children;
-		$[3] = style;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
-};
-const Footer = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(6);
-	const { style, className, children } = t0;
-	let t1;
-	if ($[0] !== className) {
-		t1 = (0, classnames.default)(require_ds_confirmation_module.default.footer, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style,
-			className: t1,
-			children
-		});
-		$[2] = children;
-		$[3] = style;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
-};
-const Actions = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(6);
-	const { style, className, children } = t0;
-	let t1;
-	if ($[0] !== className) {
-		t1 = (0, classnames.default)(require_ds_confirmation_module.default.actions, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style,
-			className: t1,
-			children
+			...props
 		});
-		$[2] = children;
-		$[3] = style;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
 };
-DsConfirmation.Header = Header;
-DsConfirmation.Title = Title;
-DsConfirmation.CloseTrigger = CloseTrigger;
-DsConfirmation.Body = Body;
-DsConfirmation.Footer = Footer;
-DsConfirmation.Actions = Actions;
+DsConfirmation.Header = require_ds_modal.default.Header;
+DsConfirmation.Title = require_ds_modal.default.Title;
+DsConfirmation.CloseTrigger = require_ds_modal.default.CloseTrigger;
+DsConfirmation.Body = require_ds_modal.default.Body;
+DsConfirmation.Footer = require_ds_modal.default.Footer;
+DsConfirmation.Actions = require_ds_modal.default.Actions;
 
 //#endregion
 exports.DsConfirmation = DsConfirmation;

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

@@ -1,71 +1,66 @@
 import { DsConfirmationProps } from "./ds-confirmation.types.cjs";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
-import { CSSProperties, ReactNode } from "react";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react0 from "react";
 
 //#region src/components/ds-confirmation/ds-confirmation.d.ts
 /**
- * Composable confirmation modal dialog.
+ * @deprecated DsConfirmation is deprecated. Use DsModal instead.
+ * @see {@link ../ds-modal} for the replacement component.
  */
 declare const DsConfirmation: {
-  ({
-    open,
-    onOpenChange,
-    style,
-    className,
-    children
-  }: DsConfirmationProps): react_jsx_runtime8.JSX.Element;
+  (props: DsConfirmationProps): react_jsx_runtime4.JSX.Element;
   Header: ({
     style,
     className,
     children
   }: {
-    style?: CSSProperties;
+    style?: react0.CSSProperties;
     className?: string;
-    children: ReactNode;
-  }) => react_jsx_runtime8.JSX.Element;
+    children: react0.ReactNode;
+  }) => react_jsx_runtime4.JSX.Element;
   Title: ({
     style,
     className,
     children
   }: {
-    style?: CSSProperties;
+    style?: react0.CSSProperties;
     className?: string;
-    children: ReactNode;
-  }) => react_jsx_runtime8.JSX.Element;
+    children: react0.ReactNode;
+  }) => react_jsx_runtime4.JSX.Element;
   CloseTrigger: ({
     style,
     className
   }: {
-    style?: CSSProperties;
+    style?: react0.CSSProperties;
     className?: string;
-  }) => react_jsx_runtime8.JSX.Element;
+  }) => react_jsx_runtime4.JSX.Element;
   Body: ({
     style,
     className,
     children
   }: {
-    style?: CSSProperties;
+    style?: react0.CSSProperties;
     className?: string;
-    children: ReactNode;
-  }) => react_jsx_runtime8.JSX.Element;
+    children: react0.ReactNode;
+  }) => react_jsx_runtime4.JSX.Element;
   Footer: ({
     style,
     className,
     children
   }: {
-    style?: CSSProperties;
+    style?: react0.CSSProperties;
     className?: string;
-    children: ReactNode;
-  }) => react_jsx_runtime8.JSX.Element;
+    children: react0.ReactNode;
+  }) => react_jsx_runtime4.JSX.Element;
   Actions: ({
     style,
     className,
     children
   }: {
-    style?: CSSProperties;
+    style?: react0.CSSProperties;
     className?: string;
-    children: ReactNode;
-  }) => react_jsx_runtime8.JSX.Element;
+    children: react0.ReactNode;
+  }) => react_jsx_runtime4.JSX.Element;
 };
 //#endregion
 export { DsConfirmation };

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

@@ -1 +1 @@
-{"version":3,"file":"ds-confirmation.d.cts","names":[],"sources":["../../../src/components/ds-confirmation/ds-confirmation.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAYa,cAAA,cAyBZ,EAAA;;;;;;;KAzBkF,sBAAmB,kBAAA,CAAA,GAAA,CAAA;;;;;EAAnB;YAgC1E;;cAEE;EAlCwE,CAAA,EAAA,GAmClF,kBAAA,CAAA,GAAA,CAAA,OAnCkF;EAAmB,KAAA,EAAA,CAAA;IAAA,KAAA;IAAA,SAAA;IAAA;EAgC7F,CAhC6F,EAAA;YA8C7F;;cAEE;EAhBF,CAAA,EAAA,GAiBR,kBAAA,CAAA,GAAA,CAAA,OAjBQ;EAEE,YAAA,EAAA,CAAA;IAAA,KAAA;IAAA;GAAA,EAAA;IACV,KAAA,CAAA,EAoBqD,aApBrD;;QAoBwF,kBAAA,CAAA,GAAA,CAAA;;;;;;IAThF,KAAA,CAAA,EAoBA,aApBA;IAEE,SAAA,CAAA,EAAA,MAAA;IACV,QAAA,EAmBU,SAnBV;QAoBA,kBAAA,CAAA,GAAA,CAAA;;;;;;IAdqD,KAAA,CAAA,EAyB7C,aAzB6C;IAAmC,SAAA,CAAA,EAAA,MAAA;cA2B9E;QACV,kBAAA,CAAA,GAAA,CAAA;;;;;;IAjBQ,KAAA,CAAA,EA4BA,aA5BA;IAEE,SAAA,CAAA,EAAA,MAAA;IACV,QAAA,EA2BU,SA3BV;QA4BA,kBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"ds-confirmation.d.cts","names":[],"sources":["../../../src/components/ds-confirmation/ds-confirmation.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAOa,cAAA,cAEZ,EAAA;EAFqC,CAAA,KAAA,EAAA,mBAAA,CAAA,EAAmB,kBAAA,CAAA,GAAA,CAAA,OAAnB;EAAmB,MAAA,EAAA,CAAA;IAAA,KAAA;IAAA,SAAA;IAAA;GAAA,EAAA;mBAU44B;;cAAA,MAAA,CAAA;sCAAA;EAAA,KAAA,EAAA,CAAA;IAAA,KAAA;IAAA,SAAA;IAAA;GAAA,EAAA;mBAA+N;;cAAA,MAAA,CAAA;;cAAA,EAAA,CAAA;IAAA,KAAA;IAAA;GAAA,EAAA;IAAA,KAAA,CAAA,SAAgS,aAAhS;;;;;;;;IAAgS,KAAA,CAAA,SAA4O,aAA5O;;cAA4O,MAAA,CAAA;;;;;;;IAAA,KAAA,CAAA,SAA8N,aAA9N;IAAA,SAAA,CAAA,EAAA,MAAA;cAA8N,MAAA,CAAA;;;;;;;mBAAiO;IAAjO,SAAA,CAAA,EAAA,MAAA;IAAA,QAAA,EAAiO,MAAA,CAAA,SAAjO"}