@code0-tech/pictor 0.6.1 → 0.6.2

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright 2023-2026 Code0 UG (haftungsbeschränkt) i.G.
+Copyright 2023-2026 Code0 UG (haftungsbeschränkt)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/dist/assets/components/command/Command.style.css

@@ -1 +1 @@
-.command{z-index:100;display:flex;height:100%;width:100%;flex-direction:column;overflow:hidden;background:#070514;padding:.7rem}.command{background:#070514;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#bfbfbfbf;position:relative;box-sizing:border-box;border-radius:1rem}.command__dialog{padding:0;box-shadow:none}.command__list:focus{outline:none}.command__list{max-height:300px;overflow-y:auto;overflow-x:hidden}.command__input.input:focus,.command .input.input:hover:focus,.command .input.input:active:focus,.command .input.input:focus:focus,.command .input.input:focus-within:focus,.command .input.input:not(:focus):focus{outline:none}.command__input.input,.command .input.input:hover,.command .input.input:active,.command .input.input:focus,.command .input.input:focus-within,.command .input.input:not(:focus){width:100%;border:none!important;outline:none!important;background:transparent;box-shadow:none!important;display:flex;height:2rem;color:#ffffffbf;font-size:.8rem;border-radius:.65rem}.command__input.input::placeholder,.command .input.input:hover::placeholder,.command .input.input:active::placeholder,.command .input.input:focus::placeholder,.command .input.input:focus-within::placeholder,.command .input.input:not(:focus)::placeholder{color:#ffffff40}.command__input.input .input__right,.command .input.input:hover .input__right,.command .input.input:active .input__right,.command .input.input:focus .input__right,.command .input.input:focus-within .input__right,.command .input.input:not(:focus) .input__right{padding-right:0}.command__empty{padding:1rem 0 1.3rem;text-align:center;font-size:.8rem;color:#ffffff80}.command__empty{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.command [cmdk-group-heading]{padding:.35rem .7rem}.command__group{overflow:hidden;text-transform:uppercase;font-size:.7rem;padding:.35rem 0 0;color:#ffffff80}.command__group{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.command__item{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;font-size:.8rem;outline:none;color:#ffffffbf;border-radius:.65rem;padding:.35rem .35rem .35rem .8rem;gap:.7rem;text-transform:none}.command__item[data-disabled=true]{pointer-events:none;color:#ffffff40}.command__item[data-selected=true]{background:#201e2c;box-shadow:inset 0 1px 1px #ffffff1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:none;width:100%}.command__item svg{pointer-events:none;width:1rem;height:1rem;flex-shrink:0}.command__separator{height:1px;margin:.35rem 0;background:#201e2c}.command__shortcut{margin-left:auto;font-size:.7rem;letter-spacing:.1rem;padding:0 .35rem;border-radius:.375rem!important;color:#ffffff80;background:#070514}
+.command{display:flex;height:100%;width:100%;flex-direction:column;overflow:hidden;padding:.7rem;box-sizing:border-box}.command__dialog{padding:0}.command__list:focus{outline:none}.command__input.input:focus,.command .input.input:hover:focus,.command .input.input:active:focus,.command .input.input:focus:focus,.command .input.input:focus-within:focus,.command .input.input:not(:focus):focus{outline:none}.command__input.input,.command .input.input:hover,.command .input.input:active,.command .input.input:focus,.command .input.input:focus-within,.command .input.input:not(:focus){width:100%;border:none!important;outline:none!important;background:transparent;box-shadow:none!important;display:flex;height:2rem;color:#ffffffbf;font-size:.8rem;border-radius:.65rem}.command__input.input::placeholder,.command .input.input:hover::placeholder,.command .input.input:active::placeholder,.command .input.input:focus::placeholder,.command .input.input:focus-within::placeholder,.command .input.input:not(:focus)::placeholder{color:#ffffff40}.command__input.input .input__right,.command .input.input:hover .input__right,.command .input.input:active .input__right,.command .input.input:focus .input__right,.command .input.input:focus-within .input__right,.command .input.input:not(:focus) .input__right{padding-right:0}.command__empty{padding:1rem 0 1.3rem;text-align:center;font-size:.8rem;color:#ffffff80}.command__empty{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.command [cmdk-group-heading]{padding:.35rem .7rem}.command__group{overflow:hidden;text-transform:uppercase;font-size:.7rem;padding:.35rem 0 0;color:#ffffff80}.command__group{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.command__item{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;font-size:.8rem;outline:none;color:#ffffffbf;border-radius:.65rem;padding:.35rem .35rem .35rem .8rem;gap:.7rem;text-transform:none}.command__item[data-disabled=true]{pointer-events:none;color:#ffffff40}.command__item[data-selected=true]{background:#201e2c;box-shadow:inset 0 1px 1px #ffffff1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;width:100%}.command__item svg{pointer-events:none;width:1rem;height:1rem;flex-shrink:0}.command__separator{height:1px;margin:.35rem 0;background:#ffffff1a}.command__shortcut{margin-left:auto;font-size:.7rem;letter-spacing:.1rem;padding:0 .35rem;border-radius:.375rem!important;color:#ffffff80;background:#070514}

package/dist/assets/components/gantt/Gantt.style.css

@@ -0,0 +1 @@
+.gantt__item{position:absolute;top:0;bottom:0;background:transparent}.gantt__group-wrapper{top:0;bottom:0;height:100%;position:absolute;background:transparent}.gantt__header{position:sticky;height:fit-content;grid-column:1/-1;display:flex;top:0;background:#070514;border-bottom:1px solid rgba(255,255,255,.25);z-index:10}.gantt__header-column{position:absolute;height:100%;padding:8px;text-align:center;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transform:translate(-50%)}.gantt__header-label{text-wrap:nowrap;display:flex;align-items:center}.gantt__header-label-column{position:sticky;left:0;width:fit-content;height:100%;padding:8px;display:flex;align-items:center;justify-content:start;box-sizing:border-box;background:#070514;z-index:2}

package/dist/assets/components/layout/Layout.style.css

@@ -1 +1 @@
-.d-layout{position:relative;width:100%;height:100%;overflow:hidden;display:flex}.d-layout__inner{display:flex;flex-direction:column;width:100%;height:100%}.d-layout__top,.d-layout__bottom{flex:0 0 auto}.d-layout__middle{display:flex;flex:1 1 auto;min-height:0;height:100%;width:100%}.d-layout__splitter{background:#bfbfbf1a;position:relative;align-self:stretch}.d-layout__splitter[aria-orientation=vertical]{width:1px;height:auto}.d-layout__splitter[aria-orientation=horizontal]{width:100%;height:0}.d-layout__left,.d-layout__right{flex:0 0 auto}.d-layout__content{flex:1 1 auto;min-width:0;min-height:0;overflow:auto}
+.d-layout{position:relative;width:100%;height:100%;overflow:hidden;display:flex;box-sizing:border-box}.d-layout__inner{display:flex;flex-direction:column;width:100%;height:100%}.d-layout__top,.d-layout__bottom{flex:0 0 auto}.d-layout__middle{display:flex;flex:1 1 auto;min-height:0;height:100%;width:100%}.d-layout__splitter{background:#bfbfbf1a;position:relative;align-self:stretch}.d-layout__splitter[aria-orientation=vertical]{width:1px;height:auto}.d-layout__splitter[aria-orientation=horizontal]{width:100%;height:1px}.d-layout__left,.d-layout__right{flex:0 0 auto}.d-layout__content{flex:1 1 auto;min-width:0;min-height:0}

package/dist/components/alert/Alert.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { Code0Component, Color } from '../../utils';
-export interface AlertProps extends Code0Component<HTMLDivElement> {
+import { Component, Color } from '../../utils';
+export interface AlertProps extends Component<HTMLDivElement> {
     color?: Color;
     children: React.ReactNode;
 }

package/dist/components/alert/Alert.js

@@ -2,19 +2,20 @@ import { jsxs as z, jsx as r } from "react/jsx-runtime";
 import { c as C } from "../../_virtual/compiler-runtime.js";
 import "../../utils/contextStore.js";
 import "react";
-import { mergeCode0Props as I } from "../../utils/utils.js";
+import { mergeComponentProps as I } from "../../utils/component.js";
+import "js-md5";
 import { IconCircleX as h, IconAlertCircle as y, IconCircleCheck as x, IconInfoCircle as u, IconCircleDot as a } from "@tabler/icons-react";
 import '../../assets/components/alert/Alert.style.css';/* empty css                 */
-const k = (n) => {
+const w = (n) => {
   const e = C.c(10);
   let o, i, c, t;
   if (e[0] !== n) {
     const {
       color: f,
-      children: d,
-      ...p
+      children: p,
+      ...d
     } = n;
-    o = d, i = f === void 0 ? "secondary" : f;
+    o = p, i = f === void 0 ? "secondary" : f;
     let s;
     e[5] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (s = {
       primary: /* @__PURE__ */ r(a, { size: 16 }),
@@ -24,7 +25,7 @@ const k = (n) => {
       success: /* @__PURE__ */ r(x, { size: 16 }),
       warning: /* @__PURE__ */ r(y, { size: 16 }),
       error: /* @__PURE__ */ r(h, { size: 16 })
-    }, e[5] = s) : s = e[5], c = s, t = I(`alert alert--${i}`, p), e[0] = n, e[1] = o, e[2] = i, e[3] = c, e[4] = t;
+    }, e[5] = s) : s = e[5], c = s, t = I(`alert alert--${i}`, d), e[0] = n, e[1] = o, e[2] = i, e[3] = c, e[4] = t;
   } else
     o = e[1], i = e[2], c = e[3], t = e[4];
   const m = c[i];
@@ -35,5 +36,5 @@ const k = (n) => {
   ] }), e[6] = o, e[7] = t, e[8] = m, e[9] = l) : l = e[9], l;
 };
 export {
-  k as Alert
+  w as Alert
 };

package/dist/components/avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { Code0Component } from '../../utils/types';
-export interface AvatarProps extends Code0Component<HTMLDivElement> {
+import { Component } from '../../utils/component';
+export interface AvatarProps extends Component<HTMLDivElement> {
     identifier?: string;
     src?: string;
     size?: number;

package/dist/components/avatar/Avatar.js

@@ -1,53 +1,56 @@
-import { jsx as d } from "react/jsx-runtime";
-import { c as v } from "../../_virtual/compiler-runtime.js";
+import { jsx as p } from "react/jsx-runtime";
+import { c as d } from "../../_virtual/compiler-runtime.js";
+import { mergeComponentProps as y } from "../../utils/component.js";
 import '../../assets/components/avatar/Avatar.style.css';/* empty css                  */
-import { mergeCode0Props as y, hashToColor as z } from "../../utils/utils.js";
-import A from "avvvatars-react";
+import z from "avvvatars-react";
+import "../../utils/contextStore.js";
+import "react";
+import { hashToColor as A } from "../../utils/color.js";
 const $ = (m) => {
-  const t = v.c(3), {
+  const t = d.c(3), {
     src: e,
     size: i
   } = m;
-  let r;
-  return t[0] !== i || t[1] !== e ? (r = /* @__PURE__ */ d("img", { src: e, width: i, height: i, alt: "Avatar image" }), t[0] = i, t[1] = e, t[2] = r) : r = t[2], r;
+  let o;
+  return t[0] !== i || t[1] !== e ? (o = /* @__PURE__ */ p("img", { src: e, width: i, height: i, alt: "Avatar image" }), t[0] = i, t[1] = e, t[2] = o) : o = t[2], o;
 }, x = (m) => {
-  const t = v.c(12), {
+  const t = d.c(12), {
     identifier: e,
     size: i,
-    color: r,
+    color: o,
     type: s
   } = m;
-  let o;
-  t[0] !== r || t[1] !== e ? (o = r ?? z(e), t[0] = r, t[1] = e, t[2] = o) : o = t[2];
+  let r;
+  t[0] !== o || t[1] !== e ? (r = o ?? A(e), t[0] = o, t[1] = e, t[2] = r) : r = t[2];
   let l;
-  t[3] !== o ? (l = {
-    "--color": o
-  }, t[3] = o, t[4] = l) : l = t[4];
-  const c = l, n = s ?? "shape";
+  t[3] !== r ? (l = {
+    "--color": r
+  }, t[3] = r, t[4] = l) : l = t[4];
+  const n = l, c = s ?? "shape";
   let a;
-  t[5] !== e || t[6] !== i || t[7] !== n ? (a = /* @__PURE__ */ d(A, { style: n, value: e, size: i }), t[5] = e, t[6] = i, t[7] = n, t[8] = a) : a = t[8];
+  t[5] !== e || t[6] !== i || t[7] !== c ? (a = /* @__PURE__ */ p(z, { style: c, value: e, size: i }), t[5] = e, t[6] = i, t[7] = c, t[8] = a) : a = t[8];
   let f;
-  return t[9] !== c || t[10] !== a ? (f = /* @__PURE__ */ d("div", { style: c, children: a }), t[9] = c, t[10] = a, t[11] = f) : f = t[11], f;
-}, P = (m) => {
-  const t = v.c(16);
-  let e, i, r, s, o, l;
+  return t[9] !== n || t[10] !== a ? (f = /* @__PURE__ */ p("div", { style: n, children: a }), t[9] = n, t[10] = a, t[11] = f) : f = t[11], f;
+}, b = (m) => {
+  const t = d.c(16);
+  let e, i, o, s, r, l;
   if (t[0] !== m) {
     const {
       identifier: a,
       color: f,
       src: h,
-      size: p,
+      size: v,
       type: g,
       ...u
     } = m;
-    i = a, e = f, s = h, l = g, r = p === void 0 ? 32 : p, o = y(`avatar ${!i && s ? "avatar--image" : "avatar--identicon"}`, u), t[0] = m, t[1] = e, t[2] = i, t[3] = r, t[4] = s, t[5] = o, t[6] = l;
+    i = a, e = f, s = h, l = g, o = v === void 0 ? 32 : v, r = y(`avatar ${!i && s ? "avatar--image" : "avatar--identicon"}`, u), t[0] = m, t[1] = e, t[2] = i, t[3] = o, t[4] = s, t[5] = r, t[6] = l;
   } else
-    e = t[1], i = t[2], r = t[3], s = t[4], o = t[5], l = t[6];
-  let c;
-  t[7] !== e || t[8] !== i || t[9] !== r || t[10] !== s || t[11] !== l ? (c = i ? /* @__PURE__ */ d(x, { type: l, color: e, identifier: i, size: r }) : s ? /* @__PURE__ */ d($, { src: s, size: r }) : null, t[7] = e, t[8] = i, t[9] = r, t[10] = s, t[11] = l, t[12] = c) : c = t[12];
+    e = t[1], i = t[2], o = t[3], s = t[4], r = t[5], l = t[6];
   let n;
-  return t[13] !== o || t[14] !== c ? (n = /* @__PURE__ */ d("div", { ...o, children: c }), t[13] = o, t[14] = c, t[15] = n) : n = t[15], n;
+  t[7] !== e || t[8] !== i || t[9] !== o || t[10] !== s || t[11] !== l ? (n = i ? /* @__PURE__ */ p(x, { type: l, color: e, identifier: i, size: o }) : s ? /* @__PURE__ */ p($, { src: s, size: o }) : null, t[7] = e, t[8] = i, t[9] = o, t[10] = s, t[11] = l, t[12] = n) : n = t[12];
+  let c;
+  return t[13] !== r || t[14] !== n ? (c = /* @__PURE__ */ p("div", { ...r, children: n }), t[13] = r, t[14] = n, t[15] = c) : c = t[15], c;
 };
 export {
-  P as Avatar
+  b as Avatar
 };

package/dist/components/badge/Badge.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { Code0Component, Color } from '../../utils/types';
-export interface BadgeType extends Code0Component<HTMLSpanElement> {
+import { Color, Component } from '../../utils';
+export interface BadgeType extends Component<HTMLSpanElement> {
     children: React.ReactNode;
     color?: Color | string;
     border?: boolean;

package/dist/components/badge/Badge.js

@@ -1,19 +1,22 @@
 import { jsx as u } from "react/jsx-runtime";
 import { c as g } from "../../_virtual/compiler-runtime.js";
 import '../../assets/components/badge/Badge.style.css';/* empty css                 */
-import { mergeCode0Props as p } from "../../utils/utils.js";
-const M = (t) => {
+import "../../utils/contextStore.js";
+import "react";
+import { mergeComponentProps as p } from "../../utils/component.js";
+import "js-md5";
+const R = (e) => {
   const o = g.c(6);
-  let e, r;
-  if (o[0] !== t) {
+  let t, r;
+  if (o[0] !== e) {
     const {
-      color: n,
+      color: c,
       border: d,
       children: a,
       ...b
-    } = t;
-    e = a;
-    const s = n === void 0 ? "primary" : n;
+    } = e;
+    t = a;
+    const s = c === void 0 ? "primary" : c;
     r = p(`badge badge--${s} ${(d === void 0 ? !1 : d) ? "" : "badge--border"}`, {
       ...b,
       style: {
@@ -22,12 +25,12 @@ const M = (t) => {
         "--badge-color-border": l(s, 0.1),
         "--badge-color": l(s, 0.75)
       }
-    }), o[0] = t, o[1] = e, o[2] = r;
+    }), o[0] = e, o[1] = t, o[2] = r;
   } else
-    e = o[1], r = o[2];
-  let c;
-  return o[3] !== e || o[4] !== r ? (c = /* @__PURE__ */ u("span", { ...r, children: e }), o[3] = e, o[4] = r, o[5] = c) : c = o[5], c;
-}, i = (t) => Math.min(Math.max(t, 0), 1), m = (t) => {
+    t = o[1], r = o[2];
+  let n;
+  return o[3] !== t || o[4] !== r ? (n = /* @__PURE__ */ u("span", { ...r, children: t }), o[3] = t, o[4] = r, o[5] = n) : n = o[5], n;
+}, i = (e) => Math.min(Math.max(e, 0), 1), m = (e) => {
   if (typeof document > "u")
     return {
       r: 0,
@@ -36,10 +39,10 @@ const M = (t) => {
       a: 1
     };
   const o = document.createElement("span");
-  o.style.color = t, document.body.appendChild(o);
-  const e = getComputedStyle(o).color;
+  o.style.color = e, document.body.appendChild(o);
+  const t = getComputedStyle(o).color;
   document.body.removeChild(o);
-  const r = e.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/);
+  const r = t.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/);
   return r ? {
     r: Math.round(Number(r[1])),
     g: Math.round(Number(r[2])),
@@ -51,13 +54,13 @@ const M = (t) => {
     b: 0,
     a: 1
   };
-}, h = (t, o) => {
-  const e = i(o * 0.1), r = m(t), c = m("#070514"), n = (d, a) => Math.round(d * (1 - e) + a * e);
-  return `rgb(${n(r.r, c.r)}, ${n(r.g, c.g)}, ${n(r.b, c.b)})`;
-}, l = (t, o) => {
-  const e = m(t);
-  return `rgba(${e.r}, ${e.g}, ${e.b}, ${i(o)})`;
+}, h = (e, o) => {
+  const t = i(o * 0.1), r = m(e), n = m("#070514"), c = (d, a) => Math.round(d * (1 - t) + a * t);
+  return `rgb(${c(r.r, n.r)}, ${c(r.g, n.g)}, ${c(r.b, n.b)})`;
+}, l = (e, o) => {
+  const t = m(e);
+  return `rgba(${t.r}, ${t.g}, ${t.b}, ${i(o)})`;
 };
 export {
-  M as Badge
+  R as Badge
 };

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { Code0Component } from '../../utils/types';
-export interface BreadcrumbProps extends Code0Component<HTMLDivElement> {
+import { Component } from '../../utils';
+export interface BreadcrumbProps extends Component<HTMLDivElement> {
     splitter?: React.ReactNode;
     children?: React.ReactNode | React.ReactNode[];
 }

package/dist/components/breadcrumb/Breadcrumb.js

@@ -1,19 +1,21 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import e from "react";
-import { mergeCode0Props as p } from "../../utils/utils.js";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import t from "react";
+import "../../utils/contextStore.js";
+import { mergeComponentProps as l } from "../../utils/component.js";
+import "js-md5";
 import '../../assets/components/breadcrumb/Breadcrumb.style.css';/* empty css                      */
-import { IconChevronRight as d } from "@tabler/icons-react";
-const C = (m) => {
+import { IconChevronRight as a } from "@tabler/icons-react";
+const j = (m) => {
   const {
-    splitter: n = /* @__PURE__ */ r(d, { size: 16 }),
-    children: t,
-    ...c
-  } = m, i = e.Children.count(t);
-  return /* @__PURE__ */ r("div", { ...p("breadcrumb", c), children: e.Children.map(t, (s, o) => /* @__PURE__ */ l(e.Fragment, { children: [
-    s,
-    o < i - 1 ? /* @__PURE__ */ r("span", { className: "breadcrumb__splitter", children: n }) : null
-  ] }, o)) });
+    splitter: n = /* @__PURE__ */ r(a, { size: 16 }),
+    children: o,
+    ...i
+  } = m, c = t.Children.count(o);
+  return /* @__PURE__ */ r("div", { ...l("breadcrumb", i), children: t.Children.map(o, (p, e) => /* @__PURE__ */ s(t.Fragment, { children: [
+    p,
+    e < c - 1 ? /* @__PURE__ */ r("span", { className: "breadcrumb__splitter", children: n }) : null
+  ] }, e)) });
 };
 export {
-  C as Breadcrumb
+  j as Breadcrumb
 };

package/dist/components/button/Button.d.ts

@@ -1,11 +1,11 @@
 import { default as React, ReactNode } from 'react';
-import { Code0Component, Code0Sizes, Color } from '../../utils';
-export interface ButtonProps extends Code0Component<HTMLButtonElement> {
+import { Component, Sizes, Color } from '../../utils';
+export interface ButtonProps extends Component<HTMLButtonElement> {
     children: ReactNode | ReactNode[];
     color?: Color;
     variant?: "none" | "normal" | "outlined" | "filled";
     active?: boolean;
     disabled?: boolean;
-    paddingSize?: Code0Sizes;
+    paddingSize?: Sizes;
 }
 export declare const Button: React.FC<ButtonProps>;

package/dist/components/button/Button.js

@@ -3,11 +3,12 @@ import { c as h } from "../../_virtual/compiler-runtime.js";
 import '../../assets/components/button/Button.style.css';/* empty css                  */
 import z from "react";
 import "../../utils/contextStore.js";
-import { mergeCode0Props as S } from "../../utils/utils.js";
-const P = z.forwardRef((a, d) => {
+import { mergeComponentProps as S } from "../../utils/component.js";
+import "js-md5";
+const k = z.forwardRef((a, s) => {
   const t = h.c(11);
-  let o, r, e, i;
-  if (t[0] !== a || t[1] !== d) {
+  let o, n, e, i;
+  if (t[0] !== a || t[1] !== s) {
     const {
       children: f,
       variant: c,
@@ -15,17 +16,17 @@ const P = z.forwardRef((a, d) => {
       paddingSize: m,
       active: b,
       disabled: u,
-      ...v
+      ...p
     } = a;
     o = f;
-    const p = c === void 0 ? "normal" : c, $ = l === void 0 ? "secondary" : l, g = m === void 0 ? "xs" : m, x = b === void 0 ? !1 : b;
-    r = u === void 0 ? !1 : u, e = d, i = S(`button button--${$} ${x ? "button--active" : ""} ${r ? "button--disabled" : ""} button--${p} button--${g}`, v), t[0] = a, t[1] = d, t[2] = o, t[3] = r, t[4] = e, t[5] = i;
+    const v = c === void 0 ? "normal" : c, $ = l === void 0 ? "secondary" : l, g = m === void 0 ? "xs" : m, x = b === void 0 ? !1 : b;
+    n = u === void 0 ? !1 : u, e = s, i = S(`button button--${$} ${x ? "button--active" : ""} ${n ? "button--disabled" : ""} button--${v} button--${g}`, p), t[0] = a, t[1] = s, t[2] = o, t[3] = n, t[4] = e, t[5] = i;
   } else
-    o = t[2], r = t[3], e = t[4], i = t[5];
-  const s = r ? "true" : "false";
-  let n;
-  return t[6] !== o || t[7] !== e || t[8] !== i || t[9] !== s ? (n = /* @__PURE__ */ R("button", { ref: e, ...i, "aria-disabled": s, children: o }), t[6] = o, t[7] = e, t[8] = i, t[9] = s, t[10] = n) : n = t[10], n;
+    o = t[2], n = t[3], e = t[4], i = t[5];
+  const d = n ? "true" : "false";
+  let r;
+  return t[6] !== o || t[7] !== e || t[8] !== i || t[9] !== d ? (r = /* @__PURE__ */ R("button", { ref: e, ...i, "aria-disabled": d, children: o }), t[6] = o, t[7] = e, t[8] = i, t[9] = d, t[10] = r) : r = t[10], r;
 });
 export {
-  P as Button
+  k as Button
 };

package/dist/components/button-group/ButtonGroup.d.ts

@@ -1,7 +1,7 @@
 import { default as React, ReactElement } from 'react';
 import { ButtonProps } from '../button/Button';
-import { Code0Component, Color } from '../../utils/types';
-export interface ButtonGroupType extends Code0Component<HTMLDivElement> {
+import { Component, Color } from '../../utils';
+export interface ButtonGroupType extends Component<HTMLDivElement> {
     children: ReactElement<ButtonProps>[];
     color?: Color;
 }

package/dist/components/button-group/ButtonGroup.js

@@ -1,28 +1,31 @@
-import { jsx as i } from "react/jsx-runtime";
-import { c as m } from "../../_virtual/compiler-runtime.js";
+import { jsx as s } from "react/jsx-runtime";
+import { c as u } from "../../_virtual/compiler-runtime.js";
 import '../../assets/components/button-group/ButtonGroup.style.css';/* empty css                       */
-import { mergeCode0Props as p } from "../../utils/utils.js";
-const h = (c) => {
-  const t = m.c(10);
-  let o, e;
-  if (t[0] !== c) {
+import "../../utils/contextStore.js";
+import "react";
+import { mergeComponentProps as c } from "../../utils/component.js";
+import "js-md5";
+const v = (p) => {
+  const t = u.c(10);
+  let o, r;
+  if (t[0] !== p) {
     const {
-      children: l,
-      color: s,
-      ...n
-    } = c;
-    o = l, e = p(`button-group button-group--${s === void 0 ? "secondary" : s}`, n), t[0] = c, t[1] = o, t[2] = e;
+      children: n,
+      color: i,
+      ...l
+    } = p;
+    o = n, r = c(`button-group button-group--${i === void 0 ? "secondary" : i}`, l), t[0] = p, t[1] = o, t[2] = r;
   } else
-    o = t[1], e = t[2];
-  let r;
+    o = t[1], r = t[2];
+  let e;
   if (t[3] !== o) {
-    let l;
-    t[5] !== o.length ? (l = (s, n) => /* @__PURE__ */ i("div", { className: `${n == 0 || n == o.length - 1 ? n == 0 ? "button-group__first" : "button-group__last" : "button-group__item"}`, children: s }, s.key ?? `button-group-${n}`), t[5] = o.length, t[6] = l) : l = t[6], r = o.map(l), t[3] = o, t[4] = r;
+    let n;
+    t[5] !== o.length ? (n = (i, l) => /* @__PURE__ */ s("div", { className: `${l == 0 || l == o.length - 1 ? l == 0 ? "button-group__first" : "button-group__last" : "button-group__item"}`, children: i }, i.key ?? `button-group-${l}`), t[5] = o.length, t[6] = n) : n = t[6], e = o.map(n), t[3] = o, t[4] = e;
   } else
-    r = t[4];
-  let u;
-  return t[7] !== e || t[8] !== r ? (u = /* @__PURE__ */ i("div", { ...e, children: r }), t[7] = e, t[8] = r, t[9] = u) : u = t[9], u;
+    e = t[4];
+  let m;
+  return t[7] !== r || t[8] !== e ? (m = /* @__PURE__ */ s("div", { ...r, children: e }), t[7] = r, t[8] = e, t[9] = m) : m = t[9], m;
 };
 export {
-  h as ButtonGroup
+  v as ButtonGroup
 };

package/dist/components/card/Card.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ReactNode } from 'react';
-import { Code0Component, Code0Sizes, Color } from '../../utils/types';
-export interface Card extends Code0Component<HTMLDivElement> {
+import { Color, Component, Sizes } from '../../utils';
+export interface Card extends Component<HTMLDivElement> {
     children: ReactNode | ReactNode[];
     color?: Color;
     variant?: "none" | "normal" | "outlined" | "filled";
@@ -10,6 +10,6 @@ export interface Card extends Code0Component<HTMLDivElement> {
     outline?: boolean;
     outlineColor?: Color;
     dashed?: boolean;
-    paddingSize?: Code0Sizes;
+    paddingSize?: Sizes;
 }
 export declare const Card: React.FC<Card>;

package/dist/components/card/Card.js

@@ -1,10 +1,13 @@
-import { jsx as p, Fragment as j } from "react/jsx-runtime";
+import { jsx as f, Fragment as j } from "react/jsx-runtime";
 import { c as E } from "../../_virtual/compiler-runtime.js";
 import '../../assets/components/card/Card.style.css';/* empty css                */
-import { mergeCode0Props as F } from "../../utils/utils.js";
-const A = (e) => {
+import "../../utils/contextStore.js";
+import "react";
+import { mergeComponentProps as F } from "../../utils/component.js";
+import "js-md5";
+const G = (e) => {
   const o = E.c(6);
-  let r, d;
+  let r, t;
   if (o[0] !== e) {
     const {
       children: C,
@@ -16,27 +19,27 @@ const A = (e) => {
       outlineColor: s,
       outline: m,
       dashed: g,
-      paddingSize: v,
+      paddingSize: p,
       ...u
     } = e;
     r = C;
-    const h = i === void 0 ? "primary" : i, b = n === void 0 ? "normal" : n, $ = a === void 0 ? !1 : a, x = c === void 0 ? "secondary" : c, f = l === void 0 ? "secondary" : l, y = s === void 0 ? "secondary" : s, z = m === void 0 ? !1 : m, S = g === void 0 ? !1 : g;
-    d = F(`
+    const h = i === void 0 ? "primary" : i, b = n === void 0 ? "normal" : n, v = a === void 0 ? !1 : a, x = c === void 0 ? "secondary" : c, $ = l === void 0 ? "secondary" : l, y = s === void 0 ? "secondary" : s, z = m === void 0 ? !1 : m, S = g === void 0 ? !1 : g;
+    t = F(`
                     card 
                     card--${h} card--${b}
-                    card--${v === void 0 ? "xl" : v}
+                    card--${p === void 0 ? "xl" : p}
                     ${z ? `card--outline-${y}` : ""} 
-                    ${$ ? "card--gradient" : ""} 
-                    ${f ? `card--border-${f}` : ""} 
+                    ${v ? "card--gradient" : ""} 
+                    ${$ ? `card--border-${$}` : ""} 
                     ${S ? "card--border--dashed" : ""} 
-                    ${$ ? `card--gradient-${x}` : ""} 
+                    ${v ? `card--gradient-${x}` : ""} 
                    
-               `, u), o[0] = e, o[1] = r, o[2] = d;
+               `, u), o[0] = e, o[1] = r, o[2] = t;
   } else
-    r = o[1], d = o[2];
-  let t;
-  return o[3] !== r || o[4] !== d ? (t = /* @__PURE__ */ p(j, { children: /* @__PURE__ */ p("div", { ...d, children: r }) }), o[3] = r, o[4] = d, o[5] = t) : t = o[5], t;
+    r = o[1], t = o[2];
+  let d;
+  return o[3] !== r || o[4] !== t ? (d = /* @__PURE__ */ f(j, { children: /* @__PURE__ */ f("div", { ...t, children: r }) }), o[3] = r, o[4] = t, o[5] = d) : d = o[5], d;
 };
 export {
-  A as Card
+  G as Card
 };

package/dist/components/card/CardSection.d.ts

@@ -1,6 +1,6 @@
-import { Code0Component } from '../../utils/types';
+import { Component } from '../../utils';
 import { default as React, ReactNode } from 'react';
-export interface SectionType extends Code0Component<HTMLDivElement> {
+export interface SectionType extends Component<HTMLDivElement> {
     children: ReactNode | ReactNode[];
     image?: boolean;
     border?: boolean;

package/dist/components/card/CardSection.js

@@ -1,28 +1,31 @@
-import { jsx as a, Fragment as l } from "react/jsx-runtime";
+import { jsx as m, Fragment as l } from "react/jsx-runtime";
 import { c as f } from "../../_virtual/compiler-runtime.js";
-import { mergeCode0Props as v } from "../../utils/utils.js";
-const u = (i) => {
+import "../../utils/contextStore.js";
+import "react";
+import { mergeComponentProps as v } from "../../utils/component.js";
+import "js-md5";
+const j = (i) => {
   const e = f.c(6);
   let r, o;
   if (e[0] !== i) {
     const {
       image: c,
-      border: s,
-      hover: d,
-      children: n,
-      ...m
+      border: n,
+      hover: s,
+      children: a,
+      ...d
     } = i;
-    r = n, o = v(`
+    r = a, o = v(`
                                 card__section 
-                                ${(s === void 0 ? !1 : s) ? "card__section--border" : ""} 
+                                ${(n === void 0 ? !1 : n) ? "card__section--border" : ""} 
                                 ${(c === void 0 ? !1 : c) ? "card__section--image" : ""}
-                                ${(d === void 0 ? !1 : d) ? "card__section--hover" : ""}
-        `, m), e[0] = i, e[1] = r, e[2] = o;
+                                ${(s === void 0 ? !1 : s) ? "card__section--hover" : ""}
+        `, d), e[0] = i, e[1] = r, e[2] = o;
   } else
     r = e[1], o = e[2];
   let t;
-  return e[3] !== r || e[4] !== o ? (t = /* @__PURE__ */ a(l, { children: /* @__PURE__ */ a("div", { ...o, children: r }) }), e[3] = r, e[4] = o, e[5] = t) : t = e[5], t;
+  return e[3] !== r || e[4] !== o ? (t = /* @__PURE__ */ m(l, { children: /* @__PURE__ */ m("div", { ...o, children: r }) }), e[3] = r, e[4] = o, e[5] = t) : t = e[5], t;
 };
 export {
-  u as default
+  j as default
 };

package/dist/components/col/Col.d.ts

@@ -1,7 +1,7 @@
 import { default as React, ReactNode } from 'react';
-import { Code0Component } from '../../utils/types';
+import { Component } from '../../utils';
 export type ColBreakPointRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-export interface ColType extends Code0Component<HTMLDivElement> {
+export interface ColType extends Component<HTMLDivElement> {
     children: ReactNode | ReactNode[];
     xs?: ColBreakPointRange;
     sm?: ColBreakPointRange;