@drivenets/design-system 0.0.1 → 0.0.3

package/dist/components/ds-button/versions/ds-button-new/ds-button-new.js

@@ -0,0 +1,33 @@
+import ds_icon_default from "../../../ds-icon/ds-icon.js";
+import ds_button_new_module_default from "./ds-button-new.module.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+
+//#region src/components/ds-button/versions/ds-button-new/ds-button-new.tsx
+const isIconOnly = (children) => {
+	if (Children.count(children) !== 1) return false;
+	const onlyChild = Children.toArray(children)[0];
+	return isValidElement(onlyChild) && onlyChild.type === ds_icon_default;
+};
+/**
+* Design system Button component
+*/
+const DsButton = ({ buttonType, variant = "filled", size = "medium", disabled = false, className, contentClassName, children, ...props }) => {
+	const type = buttonType ?? (variant === "ghost" ? "secondary" : "primary");
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: classNames(ds_button_new_module_default.button, { [ds_button_new_module_default.iconButton]: isIconOnly(children) }, ds_button_new_module_default[`${type}-${variant}`], ds_button_new_module_default[size], { [ds_button_new_module_default.disabled]: disabled }, className),
+		disabled,
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			className: classNames(ds_button_new_module_default.content, contentClassName),
+			children
+		})
+	});
+};
+var ds_button_new_default = DsButton;
+
+//#endregion
+export { ds_button_new_default as default };
+//# sourceMappingURL=ds-button-new.js.map

package/dist/components/ds-button/versions/ds-button-new/ds-button-new.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-button-new.js","names":["DsIcon","DsButton: React.FC<DsButtonProps>","styles"],"sources":["../../../../../src/components/ds-button/versions/ds-button-new/ds-button-new.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport type React from 'react';\nimport { Children, isValidElement } from 'react';\nimport styles from './ds-button-new.module.scss';\nimport type { DsButtonProps } from './ds-button-new.types';\nimport DsIcon from '../../../ds-icon/ds-icon';\n\nconst isIconOnly = (children: React.ReactNode) => {\n\tif (Children.count(children) !== 1) {\n\t\treturn false;\n\t}\n\n\tconst childArray = Children.toArray(children);\n\tconst onlyChild = childArray[0];\n\n\treturn isValidElement(onlyChild) && onlyChild.type === DsIcon;\n};\n\n/**\n * Design system Button component\n */\nconst DsButton: React.FC<DsButtonProps> = ({\n\tbuttonType,\n\tvariant = 'filled',\n\tsize = 'medium',\n\tdisabled = false,\n\tclassName,\n\tcontentClassName,\n\tchildren,\n\t...props\n}) => {\n\tconst type = buttonType ?? (variant === 'ghost' ? 'secondary' : 'primary');\n\tconst buttonClass = classNames(\n\t\tstyles.button,\n\t\t{ [styles.iconButton]: isIconOnly(children) },\n\t\tstyles[`${type}-${variant}`],\n\t\tstyles[size],\n\t\t{ [styles.disabled]: disabled },\n\t\tclassName,\n\t);\n\n\treturn (\n\t\t<button type=\"button\" className={buttonClass} disabled={disabled} {...props}>\n\t\t\t<span className={classNames(styles.content, contentClassName)}>{children}</span>\n\t\t</button>\n\t);\n};\n\nexport default DsButton;\n"],"mappings":";;;;;;;AAOA,MAAM,cAAc,aAA8B;AACjD,KAAI,SAAS,MAAM,SAAS,KAAK,EAChC,QAAO;CAIR,MAAM,YADa,SAAS,QAAQ,SAAS,CAChB;AAE7B,QAAO,eAAe,UAAU,IAAI,UAAU,SAASA;;;;;AAMxD,MAAMC,YAAqC,EAC1C,YACA,UAAU,UACV,OAAO,UACP,WAAW,OACX,WACA,kBACA,UACA,GAAG,YACE;CACL,MAAM,OAAO,eAAe,YAAY,UAAU,cAAc;AAUhE,QACC,oBAAC;EAAO,MAAK;EAAS,WAVH,WACnBC,6BAAO,QACP,GAAGA,6BAAO,aAAa,WAAW,SAAS,EAAE,EAC7CA,6BAAO,GAAG,KAAK,GAAG,YAClBA,6BAAO,OACP,GAAGA,6BAAO,WAAW,UAAU,EAC/B,UACA;EAGwD;EAAU,GAAI;YACrE,oBAAC;GAAK,WAAW,WAAWA,6BAAO,SAAS,iBAAiB;GAAG;IAAgB;GACxE;;AAIX,4BAAe"}

package/dist/components/ds-button/versions/ds-button-new/ds-button-new.module.cjs

@@ -0,0 +1,25 @@
+
+//#region src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss
+var ds_button_new_module_default = {
+	"button": "_button_1a5ak_1",
+	"content": "_content_1a5ak_1",
+	"small": "_small_1a5ak_1",
+	"medium": "_medium_1a5ak_1",
+	"large": "_large_1a5ak_1",
+	"iconButton": "_iconButton_1a5ak_1",
+	"primary-filled": "_primary-filled_1a5ak_1",
+	"secondary-filled": "_secondary-filled_1a5ak_1",
+	"tertiary-filled": "_tertiary-filled_1a5ak_1",
+	"secondary-ghost": "_secondary-ghost_1a5ak_1",
+	"tertiary-ghost": "_tertiary-ghost_1a5ak_1",
+	"primary-danger": "_primary-danger_1a5ak_1",
+	"secondary-danger": "_secondary-danger_1a5ak_1",
+	"tertiary-danger": "_tertiary-danger_1a5ak_1",
+	"primary-dark": "_primary-dark_1a5ak_1",
+	"secondary-dark": "_secondary-dark_1a5ak_1",
+	"secondary-light-dark": "_secondary-light-dark_1a5ak_1",
+	"tertiary-dark": "_tertiary-dark_1a5ak_1"
+};
+
+//#endregion
+exports.default = ds_button_new_module_default;

package/dist/components/ds-button/versions/ds-button-new/ds-button-new.module.js

@@ -0,0 +1,25 @@
+//#region src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss
+var ds_button_new_module_default = {
+	"button": "_button_1a5ak_1",
+	"content": "_content_1a5ak_1",
+	"small": "_small_1a5ak_1",
+	"medium": "_medium_1a5ak_1",
+	"large": "_large_1a5ak_1",
+	"iconButton": "_iconButton_1a5ak_1",
+	"primary-filled": "_primary-filled_1a5ak_1",
+	"secondary-filled": "_secondary-filled_1a5ak_1",
+	"tertiary-filled": "_tertiary-filled_1a5ak_1",
+	"secondary-ghost": "_secondary-ghost_1a5ak_1",
+	"tertiary-ghost": "_tertiary-ghost_1a5ak_1",
+	"primary-danger": "_primary-danger_1a5ak_1",
+	"secondary-danger": "_secondary-danger_1a5ak_1",
+	"tertiary-danger": "_tertiary-danger_1a5ak_1",
+	"primary-dark": "_primary-dark_1a5ak_1",
+	"secondary-dark": "_secondary-dark_1a5ak_1",
+	"secondary-light-dark": "_secondary-light-dark_1a5ak_1",
+	"tertiary-dark": "_tertiary-dark_1a5ak_1"
+};
+
+//#endregion
+export { ds_button_new_module_default as default };
+//# sourceMappingURL=ds-button-new.module.js.map

package/dist/components/ds-button/versions/ds-button-new/ds-button-new.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-button-new.module.js","names":[],"sources":["../../../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss","../../../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss"],"sourcesContent":["@use '../../../../styles/typography';\n\n$button-size-small: 28px;\n$button-size-default: 32px;\n$button-size-large: 40px;\n\n.button {\n\t@include typography.body-sm-md;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twhite-space: nowrap;\n\tcursor: pointer;\n\tbackground: none;\n\toutline: none;\n\tpadding-block: 0;\n\tpadding-inline: 0;\n\talign-self: stretch;\n\tborder: 2px solid transparent;\n\tborder-radius: var(--exo-spacing-2x-small);\n\n\t.content {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: var(--exo-spacing-2x-small);\n\t\tpadding: 0 var(--spacing-sm);\n\t\tborder: 1px solid transparent;\n\t\tborder-radius: var(--exo-spacing-2x-small);\n\t\tflex-grow: 1;\n\t}\n\n\t&.small .content {\n\t\t@include typography.body-xs-md;\n\t\theight: $button-size-small;\n\t}\n\n\t&.medium .content {\n\t\theight: $button-size-default;\n\t}\n\n\t&.large .content {\n\t\t@include typography.body-md-md;\n\t\theight: $button-size-large;\n\t}\n\n\t&.iconButton {\n\t\taspect-ratio: 1 / 1;\n\t\talign-items: stretch;\n\n\t\t.content {\n\t\t\tflex: 1;\n\t\t\tpadding: 0;\n\t\t}\n\n\t\t&.large .content {\n\t\t\theight: $button-size-large;\n\t\t\twidth: $button-size-large;\n\t\t}\n\n\t\t&.medium .content {\n\t\t\theight: $button-size-default;\n\t\t\twidth: $button-size-default;\n\t\t}\n\n\t\t&.small .content {\n\t\t\theight: $button-size-small;\n\t\t\twidth: $button-size-small;\n\t\t}\n\t}\n\n\t&.primary-filled {\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-font-on-action);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background-selected);\n\t\t}\n\n\t\t&:hover {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-selected-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tborder-color: var(--color-background-selected);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tborder-radius: calc(var(--exo-spacing-2x-small) / 2);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-disable);\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.secondary-filled {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-action);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-border);\n\t\t}\n\n\t\t&:hover {\n\t\t\t&:not(:disabled) {\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background-action-hover);\n\t\t\t\t\tbackground: var(--color-background-action-hover-weak);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\tbackground: var(--color-background);\n\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background-action-secondary);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-action-hover);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-action-hover-weak);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-disable);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.tertiary-filled {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-action);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-border);\n\t\t\t\tbackground: var(--color-background-action-hover-weak);\n\t\t\t}\n\t\t}\n\n\t\t&:active {\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-border);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-action-hover);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-action-hover-weak);\n\t\t\t\tborder-radius: calc(var(--exo-spacing-2x-small) / 2);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-disable);\n\t\t}\n\t}\n\n\t&.secondary-ghost {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-selected);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background-action-secondary);\n\t\t\tborder-color: var(--color-background-selected);\n\t\t}\n\n\t\t&:hover {\n\t\t\t&:not(:disabled) {\n\t\t\t\t.content {\n\t\t\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background-action-secondary);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-selected);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-disable);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.tertiary-ghost {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-selected);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:active {\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-border);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-selected);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-disable);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.primary-danger {\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-font-on-action);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background-danger-strong);\n\t\t}\n\n\t\t&:hover {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-danger-strong-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tborder-color: var(--color-background-danger-strong);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tborder-radius: calc(var(--exo-spacing-2x-small) / 2);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-disable);\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.secondary-danger {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-danger-strong);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-danger-strong);\n\t\t}\n\n\t\t&:hover {\n\t\t\t&:not(:disabled) {\n\t\t\t\tcolor: var(--color-background-danger-strong-hover);\n\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background-danger-strong-hover);\n\t\t\t\t\tbackground: var(--color-background-danger-weak);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background-action-secondary);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-danger-strong);\n\n\t\t\t.content {\n\t\t\t\tcolor: var(--color-background-danger-strong-hover);\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-danger-weak);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-disable);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.tertiary-danger {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-background-danger-strong);\n\n\t\t.content {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-danger-strong-hover);\n\t\t\t\tbackground: var(--color-background-danger-weak);\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\tbackground: var(--color-background);\n\n\t\t\t\t.content {\n\t\t\t\t\tborder-color: var(--color-background);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background);\n\t\t\tborder-color: var(--color-background-danger-strong);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background);\n\t\t\t\tbackground: var(--color-background-danger-weak);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tbackground: var(--color-background);\n\t\t\tcolor: var(--color-background-disable);\n\t\t}\n\t}\n\n\t&.primary-dark {\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-font-on-action);\n\n\t\t.content {\n\t\t\tbackground: var(--color-dark-buttons-primary);\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-dark-buttons-primary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:active:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-dark-buttons-primary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: var(--color-background-brand);\n\t\t\tborder-color: var(--color-dark-buttons-primary);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-font-on-action);\n\t\t\t\tborder-radius: calc(var(--exo-spacing-2x-small) / 2);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-background-action-inverse);\n\t\t\t\tcolor: var(--color-background-deselected);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.secondary-dark {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-dark-buttons-primary-hover);\n\n\t\t.content {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: var(--color-dark-buttons-primary-hover);\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-dark-buttons-secondary-background);\n\t\t\t\tborder-color: var(--color-dark-buttons-secondary-hover);\n\t\t\t\tcolor: var(--color-dark-buttons-secondary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:active:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: transparent;\n\t\t\t\tborder-color: var(--color-dark-buttons-secondary-hover);\n\t\t\t\tcolor: var(--color-dark-buttons-secondary-hover);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: var(--color-dark-buttons-secondary-hover);\n\n\t\t\t.content {\n\t\t\t\tborder-color: transparent;\n\t\t\t\tbackground: var(--color-dark-buttons-secondary-background);\n\t\t\t\tcolor: var(--color-dark-buttons-secondary-hover);\n\t\t\t\tborder-radius: calc(var(--exo-spacing-2x-small) / 2);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-deselected);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-deselected);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.secondary-light-dark {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-dark-buttons-secondary-light);\n\n\t\t.content {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: var(--color-dark-buttons-secondary-light);\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-dark-buttons-secondary-light-hover-background);\n\t\t\t\tborder-color: var(--color-border);\n\t\t\t\tcolor: var(--color-dark-buttons-tertiary);\n\t\t\t}\n\t\t}\n\n\t\t&:active:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: transparent;\n\t\t\t\tborder-color: var(--color-background-secondary);\n\t\t\t\tcolor: var(--color-font-on-action);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: var(--color-dark-buttons-tertiary);\n\t\t\tborder-radius: var(--spacing-2xs);\n\n\t\t\t.content {\n\t\t\t\tbackground: var(--Dark-Buttons-secondary-light-hover-background);\n\t\t\t\tcolor: var(--color-dark-buttons-tertiary);\n\t\t\t\tborder-radius: var(--exo-spacing-2x-small);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-deselected);\n\n\t\t\t.content {\n\t\t\t\tborder-color: var(--color-background-deselected);\n\t\t\t}\n\t\t}\n\t}\n\n\t&.tertiary-dark {\n\t\tbackground: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--color-dark-buttons-tertiary);\n\n\t\t.content {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: var(--color-dark-buttons-secondary-light-hover-background);\n\t\t\t\tborder-color: var(--color-border);\n\t\t\t\tcolor: var(--color-dark-buttons-tertiary);\n\t\t\t}\n\t\t}\n\n\t\t&:active:not(:disabled) {\n\t\t\t.content {\n\t\t\t\tbackground: transparent;\n\t\t\t\tborder-color: var(--color-background-secondary);\n\t\t\t\tcolor: var(--color-font-on-action);\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: var(--color-dark-buttons-tertiary);\n\t\t\tborder-radius: var(--spacing-2xs);\n\n\t\t\t.content {\n\t\t\t\tbackground: var(--Dark-Buttons-secondary-light-hover-background);\n\t\t\t\tcolor: var(--color-dark-buttons-tertiary);\n\t\t\t\tborder-radius: var(--exo-spacing-2x-small);\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: not-allowed;\n\t\t\tcolor: var(--color-background-deselected);\n\t\t}\n\t}\n}\n"],"mappings":""}

package/dist/components/ds-button/versions/ds-button-new/ds-button-new.types.d.cts

@@ -0,0 +1,38 @@
+import React from "react";
+
+//#region src/components/ds-button/versions/ds-button-new/ds-button-new.types.d.ts
+declare const buttonTypes: readonly ["primary", "secondary", "secondary-light", "tertiary"];
+type ButtonType = (typeof buttonTypes)[number];
+declare const buttonVariants: readonly ["filled", "ghost", "danger", "dark"];
+type ButtonVariant = (typeof buttonVariants)[number];
+declare const buttonSizes: readonly ["large", "medium", "small"];
+type ButtonSize = (typeof buttonSizes)[number];
+interface DsButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Type of the button
+   * @default 'primary'
+   */
+  buttonType?: ButtonType;
+  /**
+   * Visual variant of the button
+   * @default 'filled'
+   */
+  variant?: ButtonVariant;
+  /**
+   * Size of the button
+   * @default 'medium'
+   */
+  size?: ButtonSize;
+  /**
+   * Whether the button is disabled
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Class name for the button content
+   */
+  contentClassName?: string;
+}
+//#endregion
+export { DsButtonProps };
+//# sourceMappingURL=ds-button-new.types.d.cts.map

package/dist/components/ds-button/versions/ds-button-new/ds-button-new.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-button-new.types.d.cts","names":[],"sources":["../../../../../src/components/ds-button/versions/ds-button-new/ds-button-new.types.ts"],"sourcesContent":[],"mappings":";;;cAEa;KACD,UAAA,WAAqB;AADpB,cAGA,cAH8E,EAAA,SAAA,CAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAC/E,KAGA,aAAA,GAHU,CAAA,OAGc,cAHQ,CAAA,CAAA,MAAA,CAAA;AAE/B,cAGA,WAH+D,EAAA,SAAA,CAAA,OAAA,EAAA,QAAA,EAAA,OAAA,CAAA;AAChE,KAGA,UAAA,GAHa,CAAA,OAGQ,WAHG,CAAA,CAAA,MAAc,CAAA;AAErC,UAGI,aAAA,SAAsB,KAAA,CAAM,oBAHmB,CAGE,iBAHF,CAAA,CAAA;EACpD;AAEZ;;;EAWW,UAAA,CAAA,EANG,UAMH;EAMH;;;;YANG;;;;;SAMH"}

package/dist/components/ds-button/versions/ds-button-new/ds-button-new.types.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+
+//#region src/components/ds-button/versions/ds-button-new/ds-button-new.types.d.ts
+declare const buttonTypes: readonly ["primary", "secondary", "secondary-light", "tertiary"];
+type ButtonType = (typeof buttonTypes)[number];
+declare const buttonVariants: readonly ["filled", "ghost", "danger", "dark"];
+type ButtonVariant = (typeof buttonVariants)[number];
+declare const buttonSizes: readonly ["large", "medium", "small"];
+type ButtonSize = (typeof buttonSizes)[number];
+interface DsButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Type of the button
+   * @default 'primary'
+   */
+  buttonType?: ButtonType;
+  /**
+   * Visual variant of the button
+   * @default 'filled'
+   */
+  variant?: ButtonVariant;
+  /**
+   * Size of the button
+   * @default 'medium'
+   */
+  size?: ButtonSize;
+  /**
+   * Whether the button is disabled
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Class name for the button content
+   */
+  contentClassName?: string;
+}
+//#endregion
+export { DsButtonProps };
+//# sourceMappingURL=ds-button-new.types.d.ts.map

package/dist/components/ds-button/versions/ds-button-new/ds-button-new.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-button-new.types.d.ts","names":[],"sources":["../../../../../src/components/ds-button/versions/ds-button-new/ds-button-new.types.ts"],"sourcesContent":[],"mappings":";;;cAEa;KACD,UAAA,WAAqB;AADpB,cAGA,cAH8E,EAAA,SAAA,CAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAC/E,KAGA,aAAA,GAHU,CAAA,OAGc,cAHQ,CAAA,CAAA,MAAA,CAAA;AAE/B,cAGA,WAH+D,EAAA,SAAA,CAAA,OAAA,EAAA,QAAA,EAAA,OAAA,CAAA;AAChE,KAGA,UAAA,GAHa,CAAA,OAGQ,WAHG,CAAA,CAAA,MAAc,CAAA;AAErC,UAGI,aAAA,SAAsB,KAAA,CAAM,oBAHmB,CAGE,iBAHF,CAAA,CAAA;EACpD;AAEZ;;;EAWW,UAAA,CAAA,EANG,UAMH;EAMH;;;;YANG;;;;;SAMH"}

package/dist/components/ds-button/versions/ds-button-new/index.cjs

@@ -0,0 +1 @@
+const require_ds_button_new = require('./ds-button-new.cjs');

package/dist/components/ds-button/versions/ds-button-new/index.js

@@ -0,0 +1 @@
+import ds_button_new_default from "./ds-button-new.js";

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

@@ -0,0 +1,52 @@
+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_checkbox_module = require('./ds-checkbox.module.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let __radix_ui_react_checkbox = require("@radix-ui/react-checkbox");
+__radix_ui_react_checkbox = require_rolldown_runtime.__toESM(__radix_ui_react_checkbox);
+
+//#region src/components/ds-checkbox/ds-checkbox.tsx
+/**
+* Design system Checkbox component
+*/
+const DsCheckbox = ({ id, label, labelInfo, className, checked, defaultChecked, onCheckedChange, ...props }) => {
+	const generatedId = (0, react.useId)();
+	const checkboxId = id || generatedId;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)(require_ds_checkbox_module.default.container, className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_checkbox.Root, {
+			className: require_ds_checkbox_module.default.checkboxRoot,
+			id: checkboxId,
+			checked,
+			defaultChecked,
+			onCheckedChange,
+			...props,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_ds_checkbox_module.default.checkboxWrapper,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_checkbox.Indicator, {
+					className: require_ds_checkbox_module.default.checkboxIndicator,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+						icon: checked === "indeterminate" ? "check_indeterminate_small" : "check_small",
+						size: "small",
+						variant: "outlined"
+					})
+				})
+			})
+		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			className: require_ds_checkbox_module.default.label,
+			htmlFor: checkboxId,
+			children: [label, labelInfo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_ds_checkbox_module.default.labelInfo,
+				children: labelInfo
+			})]
+		})]
+	});
+};
+var ds_checkbox_default = DsCheckbox;
+
+//#endregion
+exports.default = ds_checkbox_default;

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

@@ -0,0 +1,12 @@
+import { DsCheckboxProps } from "./ds-checkbox.types.cjs";
+import React from "react";
+
+//#region src/components/ds-checkbox/ds-checkbox.d.ts
+
+/**
+ * Design system Checkbox component
+ */
+declare const DsCheckbox: React.FC<DsCheckboxProps>;
+//#endregion
+export { DsCheckbox };
+//# sourceMappingURL=ds-checkbox.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-checkbox.d.cts","names":[],"sources":["../../../src/components/ds-checkbox/ds-checkbox.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAK2D;cAMrD,YAAY,KAAA,CAAM,GAAG"}

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

@@ -0,0 +1,12 @@
+import { DsCheckboxProps } from "./ds-checkbox.types.js";
+import React from "react";
+
+//#region src/components/ds-checkbox/ds-checkbox.d.ts
+
+/**
+ * Design system Checkbox component
+ */
+declare const DsCheckbox: React.FC<DsCheckboxProps>;
+//#endregion
+export { DsCheckbox };
+//# sourceMappingURL=ds-checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-checkbox.d.ts","names":[],"sources":["../../../src/components/ds-checkbox/ds-checkbox.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAK2D;cAMrD,YAAY,KAAA,CAAM,GAAG"}

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

@@ -0,0 +1,50 @@
+import ds_icon_default from "../ds-icon/ds-icon.js";
+import "../ds-icon/index.js";
+import ds_checkbox_module_default from "./ds-checkbox.module.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+
+//#region src/components/ds-checkbox/ds-checkbox.tsx
+/**
+* Design system Checkbox component
+*/
+const DsCheckbox = ({ id, label, labelInfo, className, checked, defaultChecked, onCheckedChange, ...props }) => {
+	const generatedId = useId();
+	const checkboxId = id || generatedId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(ds_checkbox_module_default.container, className),
+		children: [/* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
+			className: ds_checkbox_module_default.checkboxRoot,
+			id: checkboxId,
+			checked,
+			defaultChecked,
+			onCheckedChange,
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				className: ds_checkbox_module_default.checkboxWrapper,
+				children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
+					className: ds_checkbox_module_default.checkboxIndicator,
+					children: /* @__PURE__ */ jsx(ds_icon_default, {
+						icon: checked === "indeterminate" ? "check_indeterminate_small" : "check_small",
+						size: "small",
+						variant: "outlined"
+					})
+				})
+			})
+		}), label && /* @__PURE__ */ jsxs("label", {
+			className: ds_checkbox_module_default.label,
+			htmlFor: checkboxId,
+			children: [label, labelInfo && /* @__PURE__ */ jsx("div", {
+				className: ds_checkbox_module_default.labelInfo,
+				children: labelInfo
+			})]
+		})]
+	});
+};
+var ds_checkbox_default = DsCheckbox;
+
+//#endregion
+export { ds_checkbox_default as default };
+//# sourceMappingURL=ds-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-checkbox.js","names":["DsCheckbox: React.FC<DsCheckboxProps>","styles","DsIcon"],"sources":["../../../src/components/ds-checkbox/ds-checkbox.tsx"],"sourcesContent":["import type React from 'react';\nimport { useId } from 'react';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport classNames from 'classnames';\nimport styles from './ds-checkbox.module.scss';\nimport type { DsCheckboxProps } from './ds-checkbox.types';\nimport { DsIcon } from '../ds-icon';\n\n/**\n * Design system Checkbox component\n */\nconst DsCheckbox: React.FC<DsCheckboxProps> = ({\n\tid,\n\tlabel,\n\tlabelInfo,\n\tclassName,\n\tchecked,\n\tdefaultChecked,\n\tonCheckedChange,\n\t...props\n}) => {\n\tconst generatedId = useId();\n\tconst checkboxId = id || generatedId;\n\n\treturn (\n\t\t<div className={classNames(styles.container, className)}>\n\t\t\t<CheckboxPrimitive.Root\n\t\t\t\tclassName={styles.checkboxRoot}\n\t\t\t\tid={checkboxId}\n\t\t\t\tchecked={checked}\n\t\t\t\tdefaultChecked={defaultChecked}\n\t\t\t\tonCheckedChange={onCheckedChange}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<div className={styles.checkboxWrapper}>\n\t\t\t\t\t<CheckboxPrimitive.Indicator className={styles.checkboxIndicator}>\n\t\t\t\t\t\t<DsIcon\n\t\t\t\t\t\t\ticon={checked === 'indeterminate' ? 'check_indeterminate_small' : 'check_small'}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</CheckboxPrimitive.Indicator>\n\t\t\t\t</div>\n\t\t\t</CheckboxPrimitive.Root>\n\t\t\t{label && (\n\t\t\t\t<label className={styles.label} htmlFor={checkboxId}>\n\t\t\t\t\t{label}\n\t\t\t\t\t{labelInfo && <div className={styles.labelInfo}>{labelInfo}</div>}\n\t\t\t\t</label>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default DsCheckbox;\n"],"mappings":";;;;;;;;;;;;AAWA,MAAMA,cAAyC,EAC9C,IACA,OACA,WACA,WACA,SACA,gBACA,iBACA,GAAG,YACE;CACL,MAAM,cAAc,OAAO;CAC3B,MAAM,aAAa,MAAM;AAEzB,QACC,qBAAC;EAAI,WAAW,WAAWC,2BAAO,WAAW,UAAU;aACtD,oBAAC,kBAAkB;GAClB,WAAWA,2BAAO;GAClB,IAAI;GACK;GACO;GACC;GACjB,GAAI;aAEJ,oBAAC;IAAI,WAAWA,2BAAO;cACtB,oBAAC,kBAAkB;KAAU,WAAWA,2BAAO;eAC9C,oBAACC;MACA,MAAM,YAAY,kBAAkB,8BAA8B;MAClE,MAAK;MACL,SAAQ;OACP;MAC2B;KACzB;IACkB,EACxB,SACA,qBAAC;GAAM,WAAWD,2BAAO;GAAO,SAAS;cACvC,OACA,aAAa,oBAAC;IAAI,WAAWA,2BAAO;cAAY;KAAgB;IAC1D;GAEJ;;AAIR,0BAAe"}

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

@@ -0,0 +1,13 @@
+
+//#region src/components/ds-checkbox/ds-checkbox.module.scss
+var ds_checkbox_module_default = {
+	"container": "_container_1ohle_1",
+	"labelInfo": "_labelInfo_1ohle_1",
+	"checkboxRoot": "_checkboxRoot_1ohle_1",
+	"checkboxWrapper": "_checkboxWrapper_1ohle_1",
+	"checkboxIndicator": "_checkboxIndicator_1ohle_1",
+	"label": "_label_1ohle_1"
+};
+
+//#endregion
+exports.default = ds_checkbox_module_default;

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

@@ -0,0 +1,13 @@
+//#region src/components/ds-checkbox/ds-checkbox.module.scss
+var ds_checkbox_module_default = {
+	"container": "_container_1ohle_1",
+	"labelInfo": "_labelInfo_1ohle_1",
+	"checkboxRoot": "_checkboxRoot_1ohle_1",
+	"checkboxWrapper": "_checkboxWrapper_1ohle_1",
+	"checkboxIndicator": "_checkboxIndicator_1ohle_1",
+	"label": "_label_1ohle_1"
+};
+
+//#endregion
+export { ds_checkbox_module_default as default };
+//# sourceMappingURL=ds-checkbox.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-checkbox.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-checkbox/ds-checkbox.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss"],"sourcesContent":["@use '../../styles/typography';\n\n.container {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tpadding-right: 1px;\n\tborder: 1px solid transparent;\n\tborder-radius: 4px;\n\n\t&:has([data-disabled]) {\n\t\tcursor: not-allowed;\n\t\tpointer-events: none;\n\n\t\t.labelInfo {\n\t\t\tcolor: var(--color-font-disabled);\n\t\t}\n\t}\n\n\t&:has(.checkboxRoot:focus-visible) {\n\t\tborder-color: var(--color-background-selected);\n\t}\n\n\t&:has([data-state='unchecked']:focus-visible) {\n\t\tborder-color: var(--color-background-selected-hover);\n\t}\n}\n\n.checkboxRoot {\n\tall: unset;\n\tposition: relative;\n\tborder-radius: 2px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\ttransition: all 0.2s ease-in-out;\n\tcursor: pointer;\n\n\t&[data-disabled] {\n\t\tborder-color: var(--color-background-disable);\n\t\tpointer-events: none;\n\n\t\t&[data-state='unchecked'] {\n\t\t\t.checkboxWrapper {\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\n\t\t&[data-state='checked'],\n\t\t&[data-state='indeterminate'] {\n\t\t\t.checkboxWrapper {\n\t\t\t\tborder-color: var(--color-background-disable);\n\t\t\t\tbackground-color: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n\n\t&[data-state='checked'] {\n\t\t.checkboxWrapper {\n\t\t\tborder-color: var(--color-background-selected);\n\t\t\tbackground-color: var(--color-background-selected);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t}\n\t}\n\n\t&[data-state='unchecked'] {\n\t\t.checkboxWrapper {\n\t\t\tborder-color: var(--color-background-deselected);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground: var(--color-background-action-hover-weak);\n\t\t}\n\t}\n\n\t&[data-state='indeterminate'] {\n\t\t.checkboxWrapper {\n\t\t\tborder-color: var(--color-background-selected);\n\t\t\tbackground-color: var(--color-background-selected);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground: var(--color-background-action-secondary-hover);\n\t\t}\n\t}\n\n\t.checkboxWrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\theight: 16px;\n\t\twidth: 16px;\n\t\tmargin: var(--spacing-4xs);\n\t\tborder: 2px solid transparent;\n\t\tborder-radius: 2px;\n\t}\n}\n\n.checkboxIndicator {\n\tflex: 1;\n\tcolor: white;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\tsvg {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n}\n\n.label {\n\t@include typography.body-sm-reg;\n\tcolor: var(--color-font-main);\n\tcursor: pointer;\n}\n\n.labelInfo {\n\t@include typography.body-xs-reg;\n\t@include typography.ellipsis;\n\tposition: absolute;\n\tcolor: var(--color-font-secondary);\n\tcursor: pointer;\n\twidth: 100%;\n}\n"],"mappings":""}

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

@@ -0,0 +1,31 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Root } from "@radix-ui/react-checkbox";
+
+//#region src/components/ds-checkbox/ds-checkbox.types.d.ts
+interface DsCheckboxProps extends ComponentPropsWithoutRef<typeof Root> {
+  /**
+   * Label for the checkbox
+   */
+  label?: ReactNode;
+  /**
+   * Additional label info for the checkbox
+   */
+  labelInfo?: ReactNode;
+  /**
+   * The controlled checked state of the checkbox
+   */
+  checked?: boolean | 'indeterminate';
+  /**
+   * The default checked state of the checkbox
+   */
+  defaultChecked?: boolean | 'indeterminate';
+  /**
+   * Event handler called when the checked state of the checkbox changes.
+   *
+   * @param checked
+   */
+  onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+}
+//#endregion
+export { DsCheckboxProps };
+//# sourceMappingURL=ds-checkbox.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-checkbox.types.d.cts","names":[],"sources":["../../../src/components/ds-checkbox/ds-checkbox.types.tsx"],"sourcesContent":[],"mappings":";;;;UAGiB,eAAA,SAAwB,gCAAgC;;AAAzE;;EAIS,KAAA,CAAA,EAAA,SAAA;EAII;;;cAAA"}

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

@@ -0,0 +1,31 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Root } from "@radix-ui/react-checkbox";
+
+//#region src/components/ds-checkbox/ds-checkbox.types.d.ts
+interface DsCheckboxProps extends ComponentPropsWithoutRef<typeof Root> {
+  /**
+   * Label for the checkbox
+   */
+  label?: ReactNode;
+  /**
+   * Additional label info for the checkbox
+   */
+  labelInfo?: ReactNode;
+  /**
+   * The controlled checked state of the checkbox
+   */
+  checked?: boolean | 'indeterminate';
+  /**
+   * The default checked state of the checkbox
+   */
+  defaultChecked?: boolean | 'indeterminate';
+  /**
+   * Event handler called when the checked state of the checkbox changes.
+   *
+   * @param checked
+   */
+  onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+}
+//#endregion
+export { DsCheckboxProps };
+//# sourceMappingURL=ds-checkbox.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-checkbox.types.d.ts","names":[],"sources":["../../../src/components/ds-checkbox/ds-checkbox.types.tsx"],"sourcesContent":[],"mappings":";;;;UAGiB,eAAA,SAAwB,gCAAgC;;AAAzE;;EAIS,KAAA,CAAA,EAAA,SAAA;EAII;;;cAAA"}

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

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

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

@@ -0,0 +1,2 @@
+import { DsCheckboxProps } from "./ds-checkbox.types.js";
+import { DsCheckbox } from "./ds-checkbox.js";

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

@@ -0,0 +1 @@
+import ds_checkbox_default from "./ds-checkbox.js";

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

@@ -0,0 +1,60 @@
+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');
+require('../ds-typography/index.cjs');
+const require_ds_chip_module = require('./ds-chip.module.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ds-chip/ds-chip.tsx
+/**
+* Design system Chip component
+*/
+const DsChip = ({ ref, label, className, style = {}, onClick, onDelete, size = "medium", deleteIcon, selected = false }) => {
+	const chipClass = (0, classnames.default)(require_ds_chip_module.default.chip, {
+		[require_ds_chip_module.default.clickable]: onClick !== void 0,
+		[require_ds_chip_module.default.small]: size === "small"
+	}, className);
+	const handleDeleteClick = (event) => {
+		event.stopPropagation();
+		onDelete?.(event);
+	};
+	const handleKeyDown = (event) => {
+		if (onDelete && (event.key === "Backspace" || event.key === "Delete")) {
+			event.preventDefault();
+			onDelete(event);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: chipClass,
+		style,
+		onClick,
+		onKeyDown: handleKeyDown,
+		role: onClick || onDelete ? "button" : void 0,
+		tabIndex: onClick || onDelete ? 0 : void 0,
+		"aria-label": label,
+		"aria-pressed": onClick && selected ? "true" : void 0,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+			variant: size === "small" ? "body-xs-reg" : "body-sm-reg",
+			className: require_ds_chip_module.default.label,
+			children: label
+		}), onDelete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: require_ds_chip_module.default.deleteButton,
+			onClick: handleDeleteClick,
+			"aria-label": "Delete chip",
+			tabIndex: -1,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+				icon: deleteIcon || "cancel",
+				size: "tiny"
+			})
+		})]
+	});
+};
+var ds_chip_default = DsChip;
+
+//#endregion
+exports.default = ds_chip_default;

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

@@ -0,0 +1,12 @@
+import { DsChipProps } from "./ds-chip.types.cjs";
+import React from "react";
+
+//#region src/components/ds-chip/ds-chip.d.ts
+
+/**
+ * Design system Chip component
+ */
+declare const DsChip: React.FC<DsChipProps>;
+//#endregion
+export { DsChip };
+//# sourceMappingURL=ds-chip.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-chip.d.cts","names":[],"sources":["../../../src/components/ds-chip/ds-chip.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAGmD;cAO7C,QAAQ,KAAA,CAAM,GAAG"}

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

@@ -0,0 +1,12 @@
+import { DsChipProps } from "./ds-chip.types.js";
+import React from "react";
+
+//#region src/components/ds-chip/ds-chip.d.ts
+
+/**
+ * Design system Chip component
+ */
+declare const DsChip: React.FC<DsChipProps>;
+//#endregion
+export { DsChip };
+//# sourceMappingURL=ds-chip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-chip.d.ts","names":[],"sources":["../../../src/components/ds-chip/ds-chip.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAGmD;cAO7C,QAAQ,KAAA,CAAM,GAAG"}