npm - @drivenets/design-system - Versions diffs - 0.0.4 → 0.1.0 - Mend

@drivenets/design-system 0.0.4 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (235) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,23 @@
 # @drivenets/design-system
+## 0.1.0
+### Minor Changes
+- 631b216: Add `DsToggle` component
+- 4f9a5c1: Added `DsDateInput` component
+- 117b26d: Prevent button from being stretched
+- 1efac4c: Add 'DsDivider' component
+- e8f00ab: Action menu within 2 levels hierarchy
+- fbc439a: Fix `DsTable` filters exports
+## 0.0.5
+### Patch Changes
+- 2c5317f: Add `DsSegmentGroup` component
+- 3a2973f: Add readme
 ## 0.0.4
 ### Patch Changes

package/README.md ADDED Viewed

@@ -0,0 +1,51 @@
+# DriveNets Design System
+Official DriveNets Design System for application development in React.
+## Installation
+First, install the package via your preferred package manager:
+```bash
+npm install @drivenets/design-system
+# or
+pnpm install @drivenets/design-system
+# or
+yarn add @drivenets/design-system
+```
+Then, import the css styles in your application root (e.g., `main.tsx` or `App.tsx`):
+```TSX
+import '@drivenets/design-system/index.min.css';
+```
+You'll also need to import the relevant fonts in your `index.html` file.
+We recommend using our provided Vite plugin to automatically include the necessary font links. You can find more information about the plugin in the [Vite Plugin README](https://github.com/drivenets/design-system/tree/main/packages/vite-plugin).
+Or you can manually add the following lines to the `<head>` section of your `index.html` file:
+```HTML
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0..1,0&display=block" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0..1,0&display=block" />
+```
+## Usage
+You can now use the DriveNets Design System components in your React application. Here's a simple example:
+```typescript
+import { DsButton } from '@drivenets/design-system';
+export const App = () => {
+  return (
+      <DsButton onClick={() => alert('Button clicked!')}>Click Me</DsButton>
+  );
+};
+```

package/dist/components/ds-alert-banner/ds-alert-banner.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { DsAlertBannerProps } from "./ds-alert-banner.types.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 import { CSSProperties, ReactNode } from "react";
 //#region src/components/ds-alert-banner/ds-alert-banner.d.ts
@@ -19,7 +19,7 @@ declare const DsAlertBanner: {
     className,
     style,
     children
-  }: DsAlertBannerProps): react_jsx_runtime0.JSX.Element | null;
+  }: DsAlertBannerProps): react_jsx_runtime14.JSX.Element | null;
   Title: ({
     style,
     className,
@@ -28,7 +28,7 @@ declare const DsAlertBanner: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime0.JSX.Element;
+  }) => react_jsx_runtime14.JSX.Element;
   Body: ({
     style,
     className,
@@ -37,7 +37,7 @@ declare const DsAlertBanner: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime0.JSX.Element;
+  }) => react_jsx_runtime14.JSX.Element;
   Actions: ({
     style,
     className,
@@ -46,7 +46,7 @@ declare const DsAlertBanner: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime0.JSX.Element;
+  }) => react_jsx_runtime14.JSX.Element;
 };
 //#endregion
 export { DsAlertBanner };

package/dist/components/ds-alert-banner/ds-alert-banner.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ds-alert-banner.d.ts","names":[],"sources":["../../../src/components/ds-alert-banner/ds-alert-banner.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAGkE;cAQ5D;;;;;;;;;;;KAUH,qBAAkB,~~kBAAA~~,CAAA,GAAA,CAAA,OAAA;;;;;;YAoDZ;;cAEE;QACV,~~kBAAA~~,CAAA,GAAA,CAAA;;;;;;YAWQ;IAlEN,SAAA,CAAA,EAAA,MAAA;IAAkB,QAAA,EAoEV,SApEU;QAqEpB,~~kBAAA~~,CAAA,GAAA,CAAA;;;;;EAdA;YAyBQ;IA5BA,SAAA,CAAA,EAAA,MAAA;IAEE,QAAA,EA4BA,SA5BA;EACV,CAAA,EAAA,GA4BA,~~kBAAA~~,CAAA,GAAA,CAAA,OA5BA"}
1	+ {"version":3,"file":"ds-alert-banner.d.ts","names":[],"sources":["../../../src/components/ds-alert-banner/ds-alert-banner.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAGkE;cAQ5D;;;;;;;;;;;KAUH,qBAAkB,mBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;YAoDZ;;cAEE;QACV,mBAAA,CAAA,GAAA,CAAA;;;;;;YAWQ;IAlEN,SAAA,CAAA,EAAA,MAAA;IAAkB,QAAA,EAoEV,SApEU;QAqEpB,mBAAA,CAAA,GAAA,CAAA;;;;;EAdA;YAyBQ;IA5BA,SAAA,CAAA,EAAA,MAAA;IAEE,QAAA,EA4BA,SA5BA;EACV,CAAA,EAAA,GA4BA,mBAAA,CAAA,GAAA,CAAA,OA5BA"}

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

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

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

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

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

@@ -1,24 +1,24 @@
 //#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"
+	"button": "_button_1fx5c_1",
+	"content": "_content_1fx5c_1",
+	"small": "_small_1fx5c_1",
+	"medium": "_medium_1fx5c_1",
+	"large": "_large_1fx5c_1",
+	"iconButton": "_iconButton_1fx5c_1",
+	"primary-filled": "_primary-filled_1fx5c_1",
+	"secondary-filled": "_secondary-filled_1fx5c_1",
+	"tertiary-filled": "_tertiary-filled_1fx5c_1",
+	"secondary-ghost": "_secondary-ghost_1fx5c_1",
+	"tertiary-ghost": "_tertiary-ghost_1fx5c_1",
+	"primary-danger": "_primary-danger_1fx5c_1",
+	"secondary-danger": "_secondary-danger_1fx5c_1",
+	"tertiary-danger": "_tertiary-danger_1fx5c_1",
+	"primary-dark": "_primary-dark_1fx5c_1",
+	"secondary-dark": "_secondary-dark_1fx5c_1",
+	"secondary-light-dark": "_secondary-light-dark_1fx5c_1",
+	"tertiary-dark": "_tertiary-dark_1fx5c_1"
 };
 //#endregion

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

@@ -1,23 +1,23 @@
 //#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"
+	"button": "_button_1fx5c_1",
+	"content": "_content_1fx5c_1",
+	"small": "_small_1fx5c_1",
+	"medium": "_medium_1fx5c_1",
+	"large": "_large_1fx5c_1",
+	"iconButton": "_iconButton_1fx5c_1",
+	"primary-filled": "_primary-filled_1fx5c_1",
+	"secondary-filled": "_secondary-filled_1fx5c_1",
+	"tertiary-filled": "_tertiary-filled_1fx5c_1",
+	"secondary-ghost": "_secondary-ghost_1fx5c_1",
+	"tertiary-ghost": "_tertiary-ghost_1fx5c_1",
+	"primary-danger": "_primary-danger_1fx5c_1",
+	"secondary-danger": "_secondary-danger_1fx5c_1",
+	"tertiary-danger": "_tertiary-danger_1fx5c_1",
+	"primary-dark": "_primary-dark_1fx5c_1",
+	"secondary-dark": "_secondary-dark_1fx5c_1",
+	"secondary-light-dark": "_secondary-light-dark_1fx5c_1",
+	"tertiary-dark": "_tertiary-dark_1fx5c_1"
 };
 //#endregion

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

	@@ -1 +1 @@
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":""}
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\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-confirmation/ds-confirmation.d.cts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { DsConfirmationProps } from "./ds-confirmation.types.cjs";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 import { CSSProperties, ReactNode } from "react";
 //#region src/components/ds-confirmation/ds-confirmation.d.ts
@@ -13,7 +13,7 @@ declare const DsConfirmation: {
     style,
     className,
     children
-  }: DsConfirmationProps): react_jsx_runtime3.JSX.Element;
+  }: DsConfirmationProps): react_jsx_runtime4.JSX.Element;
   Header: ({
     style,
     className,
@@ -22,7 +22,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime3.JSX.Element;
+  }) => react_jsx_runtime4.JSX.Element;
   Title: ({
     style,
     className,
@@ -31,14 +31,14 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime3.JSX.Element;
+  }) => react_jsx_runtime4.JSX.Element;
   CloseTrigger: ({
     style,
     className
   }: {
     style?: CSSProperties;
     className?: string;
-  }) => react_jsx_runtime3.JSX.Element;
+  }) => react_jsx_runtime4.JSX.Element;
   Body: ({
     style,
     className,
@@ -47,7 +47,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime3.JSX.Element;
+  }) => react_jsx_runtime4.JSX.Element;
   Footer: ({
     style,
     className,
@@ -56,7 +56,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime3.JSX.Element;
+  }) => react_jsx_runtime4.JSX.Element;
   Actions: ({
     style,
     className,
@@ -65,7 +65,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime3.JSX.Element;
+  }) => react_jsx_runtime4.JSX.Element;
 };
 //#endregion
 export { DsConfirmation };

package/dist/components/ds-confirmation/ds-confirmation.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { DsConfirmationProps } from "./ds-confirmation.types.js";
-import * as react_jsx_runtime27 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 import { CSSProperties, ReactNode } from "react";
 //#region src/components/ds-confirmation/ds-confirmation.d.ts
@@ -13,7 +13,7 @@ declare const DsConfirmation: {
     style,
     className,
     children
-  }: DsConfirmationProps): react_jsx_runtime27.JSX.Element;
+  }: DsConfirmationProps): react_jsx_runtime19.JSX.Element;
   Header: ({
     style,
     className,
@@ -22,7 +22,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime27.JSX.Element;
+  }) => react_jsx_runtime19.JSX.Element;
   Title: ({
     style,
     className,
@@ -31,14 +31,14 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime27.JSX.Element;
+  }) => react_jsx_runtime19.JSX.Element;
   CloseTrigger: ({
     style,
     className
   }: {
     style?: CSSProperties;
     className?: string;
-  }) => react_jsx_runtime27.JSX.Element;
+  }) => react_jsx_runtime19.JSX.Element;
   Body: ({
     style,
     className,
@@ -47,7 +47,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime27.JSX.Element;
+  }) => react_jsx_runtime19.JSX.Element;
   Footer: ({
     style,
     className,
@@ -56,7 +56,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime27.JSX.Element;
+  }) => react_jsx_runtime19.JSX.Element;
   Actions: ({
     style,
     className,
@@ -65,7 +65,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime27.JSX.Element;
+  }) => react_jsx_runtime19.JSX.Element;
 };
 //#endregion
 export { DsConfirmation };