do-ui-design-system 1.0.1 → 1.0.3

package/dist/atoms/Button/Button.svelte

@@ -8,6 +8,17 @@
 	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
@@ -21,13 +32,17 @@
 	- `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

@@ -27,6 +27,10 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * - `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;
@@ -37,6 +41,9 @@ declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     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

@@ -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,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;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

@@ -36,8 +36,13 @@
 	border-radius: 3rem;
 }
 
+.btn-circle {
+	border-radius: var(--radius-circle);
+}
+
 .do-btn:disabled {
 	opacity: 40%;
+	pointer-events: none;
 }
 
 .do-btn-primary {
@@ -130,6 +135,22 @@
 	animation: rotation 1s linear infinite;
 }
 
+.do-chip-primary {
+color: var(--do-chip-content);
+background-color: var(--do-chip-bg);
+}
+
+.do-chip-btn-primary {
+	color: var(--do-chip-content);
+background-color: var(--do-chip-bg);
+}
+
+.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);

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

@@ -4,6 +4,7 @@
 	--color-tertiary: #eff6ff;
 	--color-accent: #1d4ed8;
 
+	/*buttons variables*/
 	--do-color-primary: #27272a;
 	--do-color-primary-content: #fafafa;
 	--do-color-primary-hover: #F4F4F5;
@@ -39,6 +40,13 @@
 	--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;
@@ -48,6 +56,7 @@
 	--radius-selector: 0.25rem;
 	--radius-field: 0.25rem;
 	--radius-box: 0.25rem;
+	--radius-circle: 50%;
 
 	/*styles*/
 	--do-text-base: #27272a;

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

@@ -1,45 +1,53 @@
-:root, [data-do-theme='light'] {
+:root,
+[data-do-theme='light'] {
 	--color-primary: #fafafa;
 	--color-secondary: #27272a;
-	--color-accent: #DBEAFE;
-	--color-tertiary: #1d4ed8; 
+	--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: #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-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: #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-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-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: #27272a;
 	--do-color-link-content: none;
-	--do-color-link-hover-content: #18181B;
+	--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;
+	--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;
@@ -49,6 +57,7 @@
 	--radius-selector: 0.25rem;
 	--radius-field: 0.25rem;
 	--radius-box: 0.25rem;
+	--radius-circle: 50%;
 
 	/*styles*/
 	--do-text-base: #27272a;

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}
+				class={iCustomClass}
+				styles={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.1",
+	"version": "1.0.3",
 	"description": "Design system en Svelte + CSS + Storybook",
 	"author": "Data Observatory",
 	"license": "MIT",