do-ui-design-system 1.0.10 → 1.0.12

package/dist/atoms/Chip/Chip.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import type { iProps } from './iProps.ts';
+type $$ComponentProps = {
+    label?: iProps['label'];
+    ariaLabel?: iProps['ariaLabel'];
+    role?: iProps['role'];
+    tabIndex?: iProps['tabIndex'];
+    id?: iProps['id'];
+    maxLength?: iProps['maxLength'];
+    variant?: iProps['variant'];
+    customClass?: iProps['customClass'];
+    dataTestId?: iProps['dataTestId'];
+    children?: Snippet;
+};
+/**
+ * Chip
+ *  ```Svelte
+ *    <Chip label={label} aria-label={ariaLabel} role={role} tabindex={tabIndex} id={id} maxLength={maxLength} variant={variant} customClass={customClass} data-testid={dataTestId}>
+ *        {@render children()} // render custom content inside Chip tags
+ *    </Chip>
+ *  	```
+ * - `label?`: string
+ * - `ariaLabel?`: string
+ * - `role?`: 'status' | 'note' | 'button'
+ * - `tabIndex?`: -1 | 0 | number
+ * - `id?`: string
+ * - `maxLength?`: number | null - max length of the text, if exceeded it will be truncated and "…" will be added
+ * - `variant?`: 'do-chip-primary' | 'do-chip-secondary' | 'do-chip-accent'
+ *    - `customClass?`: string - additional custom class for styling
+ * - `dataTestId?`: string
+ */
+declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;
+//# sourceMappingURL=Chip.svelte.d.ts.map

package/dist/atoms/Chip/Chip.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Chip/Chip.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEzC,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAwCH;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/atoms/Chip/iProps.d.ts

@@ -0,0 +1,12 @@
+export interface iProps {
+    label?: string;
+    ariaLabel?: string;
+    role?: 'status' | 'note' | 'button';
+    tabIndex?: -1 | 0 | number;
+    id?: string;
+    maxLength?: number | null | undefined;
+    variant?: 'do-chip-primary' | 'do-chip-secondary' | 'do-chip-accent';
+    customClass?: string;
+    dataTestId?: string;
+}
+//# sourceMappingURL=iProps.d.ts.map

package/dist/atoms/Chip/iProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Chip/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACtC,OAAO,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,gBAAgB,CAAC;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/atoms/Chip/iProps.js

@@ -0,0 +1 @@
+export {};

package/dist/atoms/Icons/Icon.svelte

@@ -1,27 +1,57 @@
 <script lang="ts">
-    import { type iProps } from "./iProps.ts";
+	import type { iProps } from './iProps.ts';
 
-    export let name: iProps['name'] = "icon-contrast";
-    export let color: iProps['color'] = "inherit";
-    export let size: iProps['size'] = "inherit";
-    export let customStyles: iProps['customStyles'] = '';
-    export let customClass: iProps['customClass'] = '';
+	let {
+		name = 'icon-contrast',
+		color = 'inherit',
+		size = 'inherit',
+		ariaHidden,
+		role,
+		ariaLabel,
+		title,
+		tabIndex,
+		id,
+		customStyles,
+		customClass
+	}: {
+		name: iProps['name'];
+		color?: iProps['color'];
+		size?: iProps['size'];
+		ariaHidden?: iProps['ariaHidden'];
+		role?: iProps['role'];
+		ariaLabel?: iProps['ariaLabel'];
+		title?: iProps['title'];
+		tabIndex?: iProps['tabIndex'];
+		id?: iProps['id'];
+		customStyles?: iProps['customStyles'];
+		customClass?: iProps['customClass'];
+	} = $props();
+</script>
 
-  </script>
-
-  <!-- @component
+<!-- @component
     ```Svelte
       <Icon name={icon} color?={color} size?={size}/>
     ```
     - `name`: one of the .icon classes suggested by the component.
     - `color?`: Any color style (ex. #000).
     - `size?`: Any size style (ex. 1rem).
+	- `ariaHidden?`: boolean
+	- `role?`: 'img' | 'presentation' | 'none'
+	- `ariaLabel?`: string
+	- `title?`: string
+	- `tabIndex?`: -1 | 0 | number
+	- `id?`: string
     - `customClass?`: string
     - `customStyles?`: any CSS style
   -->
 
-  <i    
-    {...$$restProps}
-    class={[`${name}`, `${customClass}`].join(' ')}
-    style={[`color:${color};font-size:${size};line-height:1;`, `${customStyles}`].join(' ')}
-  ></i> 
+<i
+	aria-hidden={ariaHidden}
+	{role}
+	aria-label={ariaLabel}
+	{title}
+	{...tabIndex === 0 ? { tabindex: 0 } : {}}
+	{id}
+	class={[`${name}`, `${customClass}`].join(' ')}
+	style={[`color:${color};font-size:${size};line-height:1;`, `${customStyles}`].join(' ')}
+></i>

package/dist/atoms/Icons/Icon.svelte.d.ts

@@ -1,37 +1,34 @@
-import { type iProps } from "./iProps.ts";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+import type { iProps } from './iProps.ts';
+type $$ComponentProps = {
+    name: iProps['name'];
+    color?: iProps['color'];
+    size?: iProps['size'];
+    ariaHidden?: iProps['ariaHidden'];
+    role?: iProps['role'];
+    ariaLabel?: iProps['ariaLabel'];
+    title?: iProps['title'];
+    tabIndex?: iProps['tabIndex'];
+    id?: iProps['id'];
+    customStyles?: iProps['customStyles'];
+    customClass?: iProps['customClass'];
+};
 /**
  * ```Svelte
- *   <Icon name={icon} color?={color} size?={size}/>
- * ```
- * - `name`: one of the .icon classes suggested by the component.
- * - `color?`: Any color style (ex. #000).
- * - `size?`: Any size style (ex. 1rem).
- * - `customClass?`: string
- * - `customStyles?`: any CSS style
+ *      <Icon name={icon} color?={color} size?={size}/>
+ *    ```
+ *    - `name`: one of the .icon classes suggested by the component.
+ *    - `color?`: Any color style (ex. #000).
+ *    - `size?`: Any size style (ex. 1rem).
+ * - `ariaHidden?`: boolean
+ * - `role?`: 'img' | 'presentation' | 'none'
+ * - `ariaLabel?`: string
+ * - `title?`: string
+ * - `tabIndex?`: -1 | 0 | number
+ * - `id?`: string
+ *    - `customClass?`: string
+ *    - `customStyles?`: any CSS style
  */
-declare const Icon: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    name?: iProps["name"] | undefined;
-    color?: string | undefined;
-    size?: string | undefined;
-    customStyles?: string | undefined;
-    customClass?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Icon = InstanceType<typeof Icon>;
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
 export default Icon;
 //# sourceMappingURL=Icon.svelte.d.ts.map

package/dist/atoms/Icons/Icon.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Icons/Icon.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,aAAa,CAAC;AAkB1C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD;;;;;;;;;GASG;AACH,QAAA,MAAM,IAAI;;WApBkH,MAAM,CAAC,MAAM,CAAC;;;;;;;kBAoB1B,CAAC;AAC/F,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Icons/Icon.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEzC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;CACpC,CAAC;AAyBH;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/atoms/Icons/iProps.d.ts

@@ -1,9 +1,15 @@
-import type { HTMLLabelAttributes } from "svelte/elements";
-import { type IconNames } from "./../../do-theme/icomoon/iconList.ts";
+import type { HTMLLabelAttributes } from 'svelte/elements';
+import { type IconNames } from './../../do-theme/icomoon/iconList.ts';
 export interface iProps extends HTMLLabelAttributes {
-    name: IconNames | "";
+    name: IconNames | '';
     color?: string;
     size?: string;
+    ariaHidden?: boolean;
+    role?: 'img' | 'presentation' | 'none';
+    ariaLabel?: string;
+    title?: string;
+    tabIndex?: -1 | 0 | number;
+    id?: string;
     customClass?: string;
     customStyles?: string;
 }

package/dist/atoms/Icons/iProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Icons/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAEtE,MAAM,WAAW,MAAO,SAAQ,mBAAmB;IAC/C,IAAI,EAAE,SAAS,GAAG,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB"}
+{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Icons/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAEtE,MAAM,WAAW,MAAO,SAAQ,mBAAmB;IAClD,IAAI,EAAE,SAAS,GAAG,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,GAAG,cAAc,GAAG,MAAM,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/atoms/Icons/iProps.js

@@ -1 +1 @@
-import {} from "./../../do-theme/icomoon/iconList.ts";
+import {} from './../../do-theme/icomoon/iconList.ts';

package/dist/atoms/index.d.ts

@@ -1,6 +1,7 @@
-import Button from "./Button/Button.svelte";
-import Icon from "./Icons/Icon.svelte";
-import Badge from "./Badge/Badge.svelte";
-import Counter from "./Counter/Counter.svelte";
-export { Button, Icon, Badge, Counter };
+import Badge from './Badge/Badge.svelte';
+import Button from './Button/Button.svelte';
+import Card from './Card/Card.svelte';
+import Chip from './Chip/Chip.svelte';
+import Icon from './Icons/Icon.svelte';
+export { Card, Chip, Badge, Button, Icon };
 //# sourceMappingURL=index.d.ts.map

package/dist/atoms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,KAAK,MAAM,sBAAsB,CAAC;AACzC,OAAO,OAAO,MAAM,0BAA0B,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,sBAAsB,CAAC;AACzC,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,IAAI,MAAM,qBAAqB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC"}

package/dist/atoms/index.js

@@ -1,5 +1,6 @@
-import Button from "./Button/Button.svelte";
-import Icon from "./Icons/Icon.svelte";
-import Badge from "./Badge/Badge.svelte";
-import Counter from "./Counter/Counter.svelte";
-export { Button, Icon, Badge, Counter };
+import Badge from './Badge/Badge.svelte';
+import Button from './Button/Button.svelte';
+import Card from './Card/Card.svelte';
+import Chip from './Chip/Chip.svelte';
+import Icon from './Icons/Icon.svelte';
+export { Card, Chip, Badge, Button, Icon };

package/dist/do-theme/badge.css

@@ -1,54 +1,23 @@
-.do-badge-wrapper {
-  position: relative;
-  display: inline-block;
-}
-
 .do-badge {
 	display: inline-flex;
-	padding: 6px 10px;
+	padding: 2px 6px;
+	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	border: 1px solid;
-	gap: 4px;
-	border-radius: 24px;
+	border-radius: 48px;
 	font-size: 12px;
 	font-style: normal;
-	font-weight: 500;
+	font-weight: 400;
 	line-height: normal;
-  white-space: nowrap;
-}
-
-.do-badge-tooltip {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  background: var(--do-badge-tooltip-bg);
-  color: var(--do-badge-tooltip-content);
-  font-size: 12px;
-  padding: 4px 8px;
-  border-radius: 4px;
-  white-space: nowrap;
-  margin-top: 4px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease-in-out;
-  z-index: 10;
-}
-
-.do-badge-wrapper:hover .do-badge-tooltip {
-  opacity: 1;
-  pointer-events: auto;
+	align-self: stretch;
 }
 
 .do-badge-primary {
-	color: var(--do-badge-primary-content);
-	border-color: var(--do-badge-primary-border);
-	background-color: var(--do-badge-primary-bg);
+    color: var(--do-badge-primary-content);
+    background-color: var(--do-badge-primary-bg);
 }
 
-.do-badge-primary:hover,
-.do-badge-primary:focus {
-	color: var(--do-badge-primary-hover-content);
-	border-color: var(--do-badge-primary-border);
-	background-color: var(--do-badge-primary-hover-bg);
-}
+.do-badge-accent {
+	color: var(--do-badge-accent-content);
+	background-color: var(--do-badge-accent-bg);
+}

package/dist/do-theme/button.css

@@ -151,6 +151,19 @@ background-color: var(--do-chip-bg);
 	background-color: var(--do-chip-bg-hover);
 }
 
+.do-btn-ghost {
+	background-color: transparent;
+	border-color: none;
+	color: inherit;
+}
+
+.do-btn-ghost:hover {
+	background-color: transparent;
+	border-color: none;
+	backdrop-filter: blur(0.5rem);
+	color: #FFF8;
+}
+
 @keyframes rotation {
 	0% {
 		transform: rotate(0deg);

package/dist/do-theme/card.css

@@ -0,0 +1,18 @@
+.do-card {
+    background-color: var(--do-card-primary-bg);
+    border-radius: 4px;
+    border: 1px solid var(--do-card-primary-border);
+    padding: 0.75rem;
+    box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.10);
+    color: var(--do-text-base);
+}
+
+.do-card-primary {
+    background-color: var(--do-card-primary-bg);
+    border: 1px solid var(--do-card-primary-border);
+}
+
+.do-card-secondary {
+    background-color: var(--do-card-secondary-bg);
+    border: 1px solid var(--do-card-secondary-border);
+}

package/dist/do-theme/chip.css

@@ -0,0 +1,67 @@
+.do-chip--wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.do-chip {
+	display: inline-flex;
+	padding: 6px 10px;
+	justify-content: center;
+	align-items: center;
+	border: 1px solid;
+	gap: 4px;
+	border-radius: 24px;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: normal;
+  white-space: nowrap;
+}
+
+.do-chip__tooltip {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: var(--do-chip-tooltip-bg);
+  color: var(--do-chip-tooltip-content);
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  margin-top: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in-out;
+  z-index: 10;
+}
+
+.do-chip--wrapper:hover .do-chip__tooltip {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.do-chip-primary {
+	color: var(--do-chip-primary-content);
+	border: 1px solid var(--do-chip-primary-border);
+	background-color: var(--do-chip-primary-bg);
+}
+
+.do-chip-primary:hover,
+.do-chip-primary:focus {
+	color: var(--do-chip-primary-hover-content);
+	border-color: var(--do-chip-primary-border);
+	background-color: var(--do-chip-primary-hover-bg);
+}
+
+.do-chip-accent {
+	color: var(--do-chip-accent-content);
+	border-color: var(--do-chip-accent-border);
+	background-color: var(--do-chip-accent-bg);
+}
+
+.do-chip-accent:hover,
+.do-chip-accent:focus {
+	color: var(--do-chip-accent-hover-content);
+	border-color: var(--do-chip-accent-border);
+	background-color: var(--do-chip-accent-hover-bg);
+}

package/dist/do-theme/font.css

@@ -1,5 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
+/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap'); 
+Estas fuentes están importadas en la cabecera de index para evitar errores de compilación*/
 
 * {
 	font-family: 'Inter', sans-serif;
@@ -43,7 +44,7 @@ h6 {
 	font-size: 0.75rem;
 }
 
-p {
+p, li {
 	font-size: 0.75rem;
 	font-weight: 400;
 }
@@ -91,7 +92,7 @@ h6.do-text-grotesk {
 	h6 {
 		font-size: 0.75rem;
 	}
-	p {
+	p, li {
 		font-size: 0.875rem;
 	}
 
@@ -139,7 +140,7 @@ h6.do-text-grotesk {
 	h6 {
 		font-size: 0.75rem;
 	}
-	p {
+	p, li {
 		font-size: 1rem;
 	}