do-ui-design-system 1.0.0 → 1.0.2

package/dist/atoms/Button/Button.svelte

@@ -8,26 +8,41 @@
 	export let disabled: iProps['disabled'] = false;
 	export let loading: iProps['loading'] = false;
 	export let type: iProps['type'] = 'button';
+	export let circle: iProps['circle'] = false;
+	export let customStyles: iProps['customStyles'] = '';
+	export let customClass: iProps['class'] = '';
+
+	$: borderRadius = circle
+    ? 'border-radius:24px; padding: 6px; border: none;'
+    : rounded
+    ? 'border-radius:3rem;'
+    : '';
+
+	$: mergedStyles = `${borderRadius} ${customStyles}`.trim();
 </script>
 
 <!-- @component
   ```Svelte
   <Button variant?={variant} size?={size} label?={label} disabled?={disabled} loading?={loading} type?={type}/>
   	```
-	- `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-link' | 'do-btn-tertiary' | 'do-btn-accent'
+	- `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-link' | 'do-btn-link-accent'
 	- `size?`: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg'
 	- `label?`: string
 	- `disabled?`: boolean
 	- `rounded?`: boolean
 	- `loading?`: boolean
 	- `type?`: 'button' | 'submit' | 'reset'
+	- `circle?`: boolean
+	- `type?`: any CSS style
+	- `customClass?`: string
+	- `customStyles?`: any CSS style
 -->
 
 <button
 	{...$$restProps}
 	{type}
-	style="{rounded ? 'border-radius:3rem;' : ''}"
-	class={['do-btn', `${variant}`, `${size}`].join(' ')}
+	style={mergedStyles}
+	class={['do-btn', `${variant}`, `${size}`, `${customClass}`].join(' ')}
 	{disabled}
 	on:click
 >

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

@@ -20,23 +20,30 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * ```Svelte
  *  <Button variant?={variant} size?={size} label?={label} disabled?={disabled} loading?={loading} type?={type}/>
  *  	```
- * - `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-link' | 'do-btn-tertiary' | 'do-btn-accent'
+ * - `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-link' | 'do-btn-link-accent'
  * - `size?`: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg'
  * - `label?`: string
  * - `disabled?`: boolean
  * - `rounded?`: boolean
  * - `loading?`: boolean
  * - `type?`: 'button' | 'submit' | 'reset'
+ * - `circle?`: boolean
+ * - `type?`: any CSS style
+ * - `customClass?`: string
+ * - `customStyles?`: any CSS style
  */
 declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     [x: string]: any;
-    variant?: "do-btn-primary" | "do-btn-secondary" | "do-btn-tertiary" | "do-btn-link" | "do-btn-accent" | undefined;
+    variant?: "do-btn-primary" | "do-btn-secondary" | "do-btn-tertiary" | "do-btn-link" | "do-btn-accent" | "do-btn-link-accent" | undefined;
     size?: "do-btn-sm" | "do-btn-md" | "do-btn-lg" | undefined;
     rounded?: boolean | undefined;
     label?: string | undefined;
     disabled?: boolean | undefined;
     loading?: boolean | undefined;
     type?: "submit" | "reset" | "button" | undefined;
+    circle?: boolean | undefined;
+    customStyles?: string | undefined;
+    customClass?: import("svelte/elements").ClassValue | null | undefined;
 }, {
     default: {};
 }>, {

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

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/Button.svelte.ts"],"names":[],"mappings":"AA4BA,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;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;cAA4G,CAAC;AACvG,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/Button.svelte.ts"],"names":[],"mappings":"AAuCA,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;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;cAA4G,CAAC;AACvG,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

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

@@ -1,6 +1,6 @@
 import type { HTMLButtonAttributes } from 'svelte/elements';
 export interface iProps extends HTMLButtonAttributes {
-    variant?: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-link' | 'do-btn-accent';
+    variant?: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-link' | 'do-btn-accent' | 'do-btn-link-accent';
     type?: 'button' | 'submit' | 'reset';
     size?: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg';
     rounded?: boolean;
@@ -8,5 +8,8 @@ export interface iProps extends HTMLButtonAttributes {
     disabled?: boolean;
     loading?: boolean;
     loadingIcon?: undefined;
+    circle?: boolean;
+    customStyles?: string;
+    customClass?: string;
 }
 //# sourceMappingURL=iProps.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,CAAC;IACtG,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;CACxB"}
+{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,GAAG,oBAAoB,CAAC;IAC7H,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/atoms/Icons/Icon.svelte

@@ -4,6 +4,8 @@
     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'] = '';
 
   </script>
 
@@ -14,10 +16,12 @@
     - `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
   -->
 
   <i    
     {...$$restProps}
-    class={`${name}`}
-    style={`color:${color};font-size:${size};`}
+    class={[`${name}`, `${customClass}`].join(' ')}
+    style={[`color:${color};font-size:${size};line-height:1;`, `${customStyles}`].join(' ')}
   ></i> 

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

@@ -19,12 +19,16 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
  * - `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
  */
 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>;

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;AAgB1C,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;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI;;WAlB0D,MAAM,CAAC,MAAM,CAAC;;;;;kBAkB8B,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,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"}

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

@@ -4,5 +4,7 @@ export interface iProps extends HTMLLabelAttributes {
     name: IconNames | "";
     color?: string;
     size?: string;
+    customClass?: string;
+    customStyles?: string;
 }
 //# sourceMappingURL=iProps.d.ts.map

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;CACjB"}
+{"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"}

package/dist/do-theme/button.css

@@ -5,14 +5,14 @@
 	font-weight: 500;
 	padding: 0.375rem 1rem;
 	border: 1px solid;
-    border-radius: 0.25rem;
+	border-radius: 0.25rem;
 	line-height: 140%;
 	cursor: pointer;
 	transition: all 0.2s;
 }
 
 .do-btn .do-btn__icon {
-	display: inline-flex; 
+	display: inline-flex;
 	transform: scale(130%);
 }
 
@@ -36,98 +36,126 @@
 	border-radius: 3rem;
 }
 
+.btn-circle {
+	border-radius: var(--radius-circle);
+}
+
+.do-btn:disabled {
+	opacity: 40%;
+	pointer-events: none;
+}
+
 .do-btn-primary {
 	background-color: var(--do-color-primary);
 	border-color: var(--do-color-primary-border);
-	color: var(--do-text-contrast);
+	color: var(--do-color-primary-content);
 }
 
 .do-btn-primary:hover {
 	background-color: var(--do-color-primary-hover);
 	border-color: var(--do-color-primary-border-hover);
-	color: var(--do-color-primary);
-}
-
-.do-btn-primary:disabled {
-	background-color: var(--do-color-primary-disabled);
-	border-color: var(--do-transparent);
-	color: var(--do-color-primary-content);
+	color: var(--do-color-primary-content-hover);
 }
 
 .do-btn-secondary {
 	background-color: var(--do-color-secondary);
 	border-color: var(--do-color-secondary-border);
-	color: var(--do-text-base);
+	color: var(--do-color-secondary-content);
 }
 
 .do-btn-secondary:hover {
-	color: var(--color-primary-content);
+	color: var(--do-color-secondary-content-hover);
 	border-color: var(--do-transparent);
 	background-color: var(--do-color-secondary-hover);
 }
 
-.do-btn-secondary:is(:disabled, [disabled], .do-btn-disabled):is(:disabled, [disabled], .do-btn-disabled) {
-	border-color: var(--do-transparent);
-	background-color: var(--do-transparent);
+.do-btn-tertiary {
+	background-color: var(--do-color-tertiary);
+	border-color: var(--do-color-tertiary-border);
+	color: var(--do-color-tertiary-content);
+}
+
+.do-btn-tertiary:hover,
+.do-btn-tertiary:focus {
+	background-color: var(--do-color-tertiary-content);
+	border-color: var(--do-color-tertiary-content);
+	color: var(--do-color-tertiary-hover-content);
+}
+
+.do-btn-accent {
+	background-color: var(--do-color-accent);
+	border-color: var(--do-color-accent-border);
+	color: var(--do-color-accent-content);
+}
+
+.do-btn-accent:hover,
+.do-btn-accent:focus {
+	color: var(--do-color-accent-hover-content);
+	border: 1px solid var(--do-color-accent-hover-border);
+	background-color: var(--do-color-accent-hover);
 }
 
 .do-btn-link {
 	border-color: var(--do-transparent);
 	background-color: var(--do-transparent);
+	color: var(--do-color-link);
+	text-underline-offset: 4px;
 }
 
 .do-btn-link span {
 	text-decoration: underline;
 }
 
-.do-btn-link:hover, .do-btn-link:focus {
-	color: var(--do-color-primary-content);
-	border-color: var(--do-transparent);
-	background-color: var(--color-primary);
+.do-btn-link:hover,
+.do-btn-link:focus {
+	color: var(--do-color-link-hover-content);
+	border-color: 1px solid var(--do-color-link-hover-border);
+	background-color: var(--do-transparent);
 }
 
-.do-btn-link:is(:disabled, [disabled], .do-btn-disabled):is(:disabled, [disabled], .do-btn-disabled) {
+.do-btn-link-accent {
 	border-color: var(--do-transparent);
 	background-color: var(--do-transparent);
-	/* text-decoration: underline; */
+	color: var(--do-color-link-secondary);
+	text-underline-offset: 4px;
 }
 
-.do-btn-accent {
-	background-color: var(--do-color-accent);
-	border-color: var(--do-color-accent-border);
-	color: var(--do-text-contrast);
+.do-btn-link-accent span {
+	text-decoration: underline;
 }
-.do-btn-accent:is(:disabled, [disabled], .do-btn-disabled):is(:disabled, [disabled], .do-btn-disabled) {
-	color: var(--color-neutral);
-	border: 1px solid var(--do-transparent);
-	background-color: var(--do-color-accent-disabled);
+
+.do-btn-link-accent:hover,
+.do-btn-link-accent:focus {
+	color: var(--do-color-primary-content);
+	border-color: var(--do-color-primary-border);
+	background-color: var(--do-color-link-secondary-hover);
 }
-.do-btn-accent:hover, .do-btn-accent:focus {
-	color: var(--do-color-accent);
-	border: 1px solid #dbeafe;
-	background-color: var(--color-accent-content);
+
+.do-loader {
+	animation: rotation 1s linear infinite;
 }
 
-.do-btn-tertiary {
-	background-color: var(--do-color-tertiary);
-	border-color: var(--do-color-tertiary-border);
-	color: var(--do-color-tertiary-content);
+.do-chip-primary {
+color: var(--do-chip-content);
+background-color: var(--do-chip-bg);
 }
-.do-btn-tertiary:hover, .do-btn-tertiary:focus {
-	background-color: var(--do-color-tertiary-content);
-	border-color: var(--do-color-tertiary-content);
-	color: var(--do-text-contrast);
+
+.do-chip-btn-primary {
+	color: var(--do-chip-content);
+background-color: var(--do-chip-bg);
 }
 
-.do-loader {
-	animation: rotation 1s linear infinite;
+.do-chip-primary:hover,
+.do-chip-primary:focus {
+	color: var(--do-chip-content-hover);
+	background-color: var(--do-chip-bg-hover);
 }
 
 @keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} 
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

package/dist/do-theme/var-dark.css

@@ -1,43 +1,65 @@
-:root {
-    --color-primary:#27272A;
-    --color-primary-content: #FAFAFA;
-    --color-secondary: #FAFAFA;
-    --color-secondary-content: #27272A;
-    --color-neutral: #FAFAFA;
-    --color-neutral-content: none;
-    --color-accent: #1D4ED8;
-    --color-accent-content: #EFF6FF;
-    --color-info: oklch(70% 0.2 220);
-    --color-info-content: oklch(98% 0.01 220);
-    --color-success: oklch(65% 0.25 140);
-    --color-success-content: oklch(98% 0.01 140);
-    --color-warning: oklch(80% 0.25 80);
-    --color-warning-content: oklch(20% 0.05 80);
-    --color-error: oklch(65% 0.3 30);
-    --color-error-content: oklch(98% 0.01 30);
-
-    
-    /* base sizes */
-    --size-selector: 0.25rem;
-    --size-field: 0.25rem;
-    
-    /* border radius */
-    --radius-selector: 0.25rem;
-    --radius-field: 0.25rem;
-    --radius-box: 0.25rem;
-    
-    /*variables DO*/
-    /*hover color*/
-    --do-color-primary-hover: #f5f5f5;
-    --do-color-secondary-hover: #3e3e45;
-    /*disabled color*/
-    --do-color-primary-disabled: #a4a4a6;
-    --do-color-accent-disabled: #a4b6ed;
-    /*buttons border color*/
-    --do-color-border-primary: #3F3F46;
-    --do-color-border-secondary: #F4F4F5;
-    --do-color-border-accent: #2563EB;
-    --do-color-border-accent-hover: #3B82F6;
-    /*styles*/
-    --do-transparent: transparent;
-}
+[data-do-theme='dark'] {
+	--color-primary: #27272a;
+	--color-secondary: #fafafa;
+	--color-tertiary: #eff6ff;
+	--color-accent: #1d4ed8;
+
+	/*buttons variables*/
+	--do-color-primary: #27272a;
+	--do-color-primary-content: #fafafa;
+	--do-color-primary-hover: #F4F4F5;
+	--do-color-primary-content-hover: #27272a;
+	--do-color-primary-border: #52525b;
+	--do-color-primary-border-hover: #e4e4e7;
+
+	--do-color-secondary: #fafafa;
+	--do-color-secondary-content: #27272a;
+	--do-color-secondary-hover: #71717A;
+	--do-color-secondary-border: #f4f4f5;
+	--do-color-secondary-border-hover: #71717a;
+
+	--do-color-tertiary: #eff6ff;
+	--do-color-tertiary-content: #1d4ed8;
+	--do-color-tertiary-border: #dbeafe;
+	--do-color-tertiary-hover: #1D4ED8;
+	--do-color-tertiary-hover-content: #FAFAFA;
+	--do-color-tertiary-hover-border: #1D4ED8;
+
+	--do-color-accent: #1d4ed8;
+	--do-color-accent-content: #eff6ff;
+	--do-color-accent-border: #2563eb;
+	--do-color-accent-hover-border: #3b82f6;
+	--do-color-accent-hover-content: #1D4ED8;
+
+	--do-color-link: #fafafa;
+	--do-color-link-content: none;
+	--do-color-link-hover-content: #fafafa;
+	--do-color-link-hover-border: #52525B;
+
+	--do-color-link-secondary: #1d4ed8;
+	--do-color-link-secondary-content: none;
+	--do-color-link-secondary-hover: #1D4ED8;
+
+	/*chip colors*/
+	--do-chip-content: #FAFAFA;
+	--do-chip-bg: #71717A;
+	--do-chip-content-hover: #FAFAFA;
+	--do-chip-bg-hover: #27272A;
+	
+
+
+	/* base sizes */
+	--size-selector: 0.25rem;
+	--size-field: 0.25rem;
+
+	/* border radius */
+	--radius-selector: 0.25rem;
+	--radius-field: 0.25rem;
+	--radius-box: 0.25rem;
+	--radius-circle: 50%;
+
+	/*styles*/
+	--do-text-base: #27272a;
+	--do-text-contrast: #fff;
+	--do-transparent: transparent;
+}

package/dist/do-theme/var-light.css

@@ -1,42 +1,66 @@
-:root {
-    --do-color-primary: #27272A;
-    --do-color-primary-content: #FAFAFA;
-    --do-color-primary-content-hover: #f5f5f5;
-    --do-color-primary-border: #52525B;
-    --do-color-primary-border-hover: #E4E4E7;
-    --do-color-primary-disabled: #a4a4a6;
-
-    --do-color-secondary: #FAFAFA;
-    --do-color-secondary-content: #27272A;
-    --do-color-secondary-content-hover: #3e3e45;
-    --do-color-secondary-border: #F4F4F5;
-    --do-color-secondary-border-hover: #71717A;
-
-    --do-color-tertiary: #EFF6FF;
-    --do-color-tertiary-content: #1D4ED8;
-    --do-color-tertiary-border: #DBEAFE;
-
-    --do-color-link: #FAFAFA;
-    --do-color-link-content: none;
-
-    --do-color-accent: #1D4ED8;
-    --do-color-accent-content: #EFF6FF;
-    --do-color-accent-border: #2563EB;
-    --do-color-accent-border-hover: #3B82F6;
-    --do-color-accent-disabled: #a4b6ed;
-
-    
-    /* base sizes */
-    --size-selector: 0.25rem;
-    --size-field: 0.25rem;
-    
-    /* border radius */
-    --radius-selector: 0.25rem;
-    --radius-field: 0.25rem;
-    --radius-box: 0.25rem;
-
-    /*styles*/
-    --do-text-base: #27272A;
-    --do-text-contrast: #fff;
-    --do-transparent: transparent;
-}
+:root,
+[data-do-theme='light'] {
+	--color-primary: #fafafa;
+	--color-secondary: #27272a;
+	--color-accent: #dbeafe;
+	--color-tertiary: #1d4ed8;
+
+	/*buttons variables*/
+	--do-color-primary: #fafafa;
+	--do-color-primary-content: #18181b;
+	--do-color-primary-border: #f4f4f5;
+	--do-color-primary-hover: #d4d4d8;
+	--do-color-primary-content-hover: #27272a;
+	--do-color-primary-border-hover: #e4e4e7;
+
+	--do-color-secondary: #27272a;
+	--do-color-secondary-content: #fafafa;
+	--do-color-secondary-border: #52525b;
+	--do-color-secondary-hover: #52525b;
+	--do-color-secondary-content-hover: #fafafa;
+	--do-color-secondary-border-hover: #71717a;
+
+	--do-color-tertiary: #1e40af;
+	--do-color-tertiary-content: #eff6ff;
+	--do-color-tertiary-border: #1d4ed8;
+	--do-color-tertiary-hover: #eff6ff;
+	--do-color-tertiary-hover-content: #1e40af;
+	--do-color-tertiary-hover-border: #dbeafe;
+
+	--do-color-accent: #eff6ff;
+	--do-color-accent-content: #1d4ed8;
+	--do-color-accent-border: #dbeafe;
+	--do-color-accent-hover: #dbeafe;
+	--do-color-accent-hover-content: #1e40af;
+	--do-color-accent-hover-border: #dbeafe;
+
+	--do-color-link: #27272a;
+	--do-color-link-content: none;
+	--do-color-link-hover-content: #18181b;
+	--do-color-link-hover-border: rgba(0, 0, 0, 0.2);
+
+	--do-color-link-secondary: #1d4ed8;
+	--do-color-link-secondary-content: none;
+	--do-color-link-secondary-hover: #eff6ff;
+
+	/*chip variables*/
+	--do-chip-content: #3f3f46;
+	--do-chip-bg: #fafafa;
+	--do-chip-content-hover: #fafafa;
+	--do-chip-bg-hover: #27272a;
+
+	/* base sizes */
+	--size-selector: 0.25rem;
+	--size-field: 0.25rem;
+
+	/* border radius */
+	--radius-selector: 0.25rem;
+	--radius-field: 0.25rem;
+	--radius-box: 0.25rem;
+	--radius-circle: 50%;
+
+	/*styles*/
+	--do-text-base: #27272a;
+	--do-text-contrast: #fff;
+	--do-transparent: transparent;
+}

package/dist/molecules/Chip/ActionChip.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import IconButton from '../IconButton/IconButton.svelte';
+	import type { iProps } from './iProps.ts';
+
+	export let label: iProps['label'] = 'Label';
+	export let iconName: iProps['iconName'] = 'icon-close';
+	export let containerCustomClass: iProps['containerCustomClass'] = '';
+	export let containerCustomStyles: iProps['containerCustomStyles'] = '';
+	export let iCustomStyles: iProps['iCustomStyles'] = '';
+	export let iCustomClass: iProps['iCustomClass'] = '';
+	export let btnCustomClass: iProps['btnCustomClass'] = '';
+	export let btnCustomStyles: iProps['btnCustomStyles'] = '';
+	export let labelStyles: iProps['labelStyles'] = '';
+	export let labelClass: iProps['labelClass'] = '';
+</script>
+
+<!-- @component
+  ```Svelte
+  <Chip label={label} iconName={iconName} />
+  	```
+	- `label`: string
+	- `iconName`: one of the .icon classes suggested by the component.
+	- `containerCustomClass?`: string
+	- `containerCustomStyles?`: any CSS style
+	- `iCustomClass?`: string
+	- `iCustomStyles?`: any CSS style
+	- `btnCustomClass?`: string
+	- `btnCustomStyles?`: any CSS style
+	- `labelStyles?`: any CSS style
+	- `labelClass?`: string
+-->
+
+<div
+	class={[`do-chip-primary`, `${containerCustomClass}`].join(' ')}
+	style={[
+		`display: inline-flex; padding: 6px 10px; align-items: center; gap: 4px; border-radius: 24px; border: 1px solid var(--Zinc-400, #A1A1AA);`,
+		`${containerCustomStyles}`
+	].join(' ')}
+>
+	<span class={labelClass} style={[`padding-left: 10px`, `${labelStyles}`].join(' ')}>{label}</span>
+	<IconButton
+		{...$$restProps}
+		{iconName}
+		circle
+		on:click
+		btnCustomClass={[`do-chip-btn-primary`, `${btnCustomClass}`].join(' ')}
+		btnCustomStyles={btnCustomStyles}
+		iCustomClass={iCustomClass}
+		iCustomStyles={iCustomStyles}
+	/>
+</div>

package/dist/molecules/Chip/ActionChip.svelte.d.ts

@@ -0,0 +1,49 @@
+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;
+}
+/**
+ * ```Svelte
+ *  <Chip label={label} iconName={iconName} />
+ *  	```
+ * - `label`: string
+ * - `iconName`: one of the .icon classes suggested by the component.
+ * - `containerCustomClass?`: string
+ * - `containerCustomStyles?`: any CSS style
+ * - `iCustomClass?`: string
+ * - `iCustomStyles?`: any CSS style
+ * - `btnCustomClass?`: string
+ * - `btnCustomStyles?`: any CSS style
+ * - `labelStyles?`: any CSS style
+ * - `labelClass?`: string
+ */
+declare const ActionChip: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    label?: iProps["label"] | undefined;
+    iconName?: iProps["iconName"] | undefined;
+    containerCustomClass?: string | undefined;
+    containerCustomStyles?: string | undefined;
+    iCustomStyles?: string | undefined;
+    iCustomClass?: string | undefined;
+    btnCustomClass?: string | undefined;
+    btnCustomStyles?: string | undefined;
+    labelStyles?: string | undefined;
+    labelClass?: string | undefined;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ActionChip = InstanceType<typeof ActionChip>;
+export default ActionChip;
+//# sourceMappingURL=ActionChip.svelte.d.ts.map

package/dist/molecules/Chip/ActionChip.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionChip.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/Chip/ActionChip.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AA8B1C,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;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,UAAU;;YAzBgU,MAAM,CAAC,OAAO,CAAC;eAAa,MAAM,CAAC,UAAU,CAAC;;;;;;;;;;;;;kBAyBxQ,CAAC;AACrG,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,15 @@
+import type { IconNames } from "../../do-theme/icomoon/iconList.ts";
+import type { HTMLButtonAttributes } from "svelte/elements";
+export interface iProps extends HTMLButtonAttributes {
+    label: string;
+    iconName: IconNames;
+    containerCustomClass?: string;
+    containerCustomStyles?: string;
+    iCustomClass?: string;
+    iCustomStyles?: string;
+    btnCustomClass?: string;
+    btnCustomStyles?: string;
+    labelStyles?: string;
+    labelClass?: string;
+}
+//# sourceMappingURL=iProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/Chip/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/molecules/Chip/iProps.js

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

package/dist/molecules/IconButton/IconButton.svelte

@@ -12,6 +12,11 @@
 	export let iconColor: iProps['iconColor'] = 'inherit';
 	export let iconPosition: iProps['iconPosition'] = 'end';
 	export let rounded: iProps['rounded'] = false;
+	export let circle: iProps['circle'] = false;
+	export let btnCustomClass: iProps['btnCustomClass'] = '';
+	export let iCustomClass: iProps['iCustomClass'] = '';
+	export let btnCustomStyles: iProps['btnCustomStyles'] = '';
+	export let iCustomStyles: iProps['iCustomStyles'] = '';
 </script>
 
 <!-- @component
@@ -28,18 +33,40 @@
 		- `iconSize?`: rem units
 		- `iconColor?`: hex units #000
 		- `iconPosition?`: 'start' | 'end'
+		- `circle?`: boolean
+		- `btnCustomClass?`: string
+		- `iCustomClass?`: string
+		- `btnCustomStyles?`: any CSS style
+		- `iCustomStyles?`: any CSS style
 		```
   -->
 
-<Button {...$$restProps} {variant} {size} {disabled} {rounded} on:click>
+<Button
+	{...$$restProps}
+	{variant}
+	{size}
+	{disabled}
+	{rounded}
+	{circle}
+	customClass={btnCustomClass}
+	customStyles={btnCustomStyles}
+	on:click
+>
 	{#if loading}
-		<i class="icon-loading do-loader" style={iconPosition === 'start' ? 'order:1;' : 'order:2;'}></i>
+		<i class="icon-loading do-loader" style={iconPosition === 'start' ? 'order:1;' : 'order:2;'}
+		></i>
 	{:else}
-		<div class="do-btn__icon" style="{`${iconPosition === 'start' ? 'order:1;' : 'order:2;'}`}">
-			<Icon name={iconName} size={iconSize} color={iconColor}/>
+		<div class="do-btn__icon" style={`${iconPosition === 'start' ? 'order:1;' : 'order:2;'}`}>
+			<Icon
+				name={iconName}
+				size={iconSize}
+				color={iconColor}
+				customClass={iCustomClass}
+				customStyles={iCustomStyles}
+			/>
 		</div>
 	{/if}
 	{#if label}
 		<span style={iconPosition === 'start' ? 'order:2;' : 'order:1;'}>{label}</span>
 	{/if}
-</Button>
+</Button>

package/dist/molecules/IconButton/IconButton.svelte.d.ts

@@ -26,6 +26,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
  * - `iconSize?`: rem units
  * - `iconColor?`: hex units #000
  * - `iconPosition?`: 'start' | 'end'
+ * - `circle?`: boolean
+ * - `btnCustomClass?`: string
+ * - `iCustomClass?`: string
+ * - `btnCustomStyles?`: any CSS style
+ * - `iCustomStyles?`: any CSS style
  * ```
  */
 declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
@@ -40,6 +45,11 @@ declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
     iconColor?: string | undefined;
     iconPosition?: "start" | "end" | undefined;
     rounded?: boolean | undefined;
+    circle?: boolean | undefined;
+    btnCustomClass?: string | undefined;
+    iCustomClass?: string | undefined;
+    btnCustomStyles?: string | undefined;
+    iCustomStyles?: string | undefined;
 }, {
     click: MouseEvent;
 } & {

package/dist/molecules/IconButton/IconButton.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/IconButton.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAkC1C,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;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,UAAU;;;;;;;eA1BgW,MAAM,CAAC,UAAU,CAAC;;;;;;;;;kBA0B5Q,CAAC;AACrG,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/IconButton.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAwC1C,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;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,UAAU;;;;;;;eA/Bif,MAAM,CAAC,UAAU,CAAC;;;;;;;;;;;;;;kBA+B7Z,CAAC;AACrG,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}

package/dist/molecules/IconButton/iProps.d.ts

@@ -11,5 +11,11 @@ export interface iProps extends HTMLButtonAttributes {
     iconColor?: string;
     iconPosition?: 'start' | 'end';
     rounded?: boolean;
+    circle?: boolean;
+    customClass?: string;
+    btnCustomClass?: string;
+    iCustomClass?: string;
+    btnCustomStyles?: string;
+    iCustomStyles?: string;
 }
 //# sourceMappingURL=iProps.d.ts.map

package/dist/molecules/IconButton/iProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,CAAC;IACtG,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB"}
+{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,CAAC;IACtG,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "do-ui-design-system",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"description": "Design system en Svelte + CSS + Storybook",
 	"author": "Data Observatory",
 	"license": "MIT",
@@ -59,6 +59,7 @@
 		"@storybook/addon-docs": "^8.6.12",
 		"@storybook/addon-essentials": "^8.6.11",
 		"@storybook/addon-svelte-csf": "^5.0.0-next.0",
+		"@storybook/addons": "^7.6.17",
 		"@storybook/blocks": "^8.6.11",
 		"@storybook/experimental-addon-test": "^8.6.11",
 		"@storybook/svelte": "^8.6.12",
@@ -68,8 +69,8 @@
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"@tailwindcss/vite": "^4.0.0",
 		"@tailwindcss/postcss": "^4.1.4",
+		"@tailwindcss/vite": "^4.0.0",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.4",
 		"@vitest/browser": "^3.1.1",
@@ -88,7 +89,7 @@
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"publint": "^0.3.2",
-		"storybook": "^8.6.11",
+		"storybook": "^8.6.14",
 		"svelte": "^5.25.10",
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^4.1.4",