se-design 0.0.97 → 0.0.99

package/dist/index7.js

@@ -1,43 +1,24 @@
-import { j as o } from "./index24.js";
-import { useState as l } from "react";
-const p = ({
-  initialState: a,
-  onToggle: r,
-  disabled: s
-}) => {
-  const [e, c] = l(a || !1), n = () => {
-    const t = !e;
-    c(t), r && r(t);
-  };
-  return /* @__PURE__ */ o.jsxs(
-    "label",
-    {
-      className: `block w-8 h-4 p-0.5 rounded-full cursor-pointer bg-[var(--color-gray-500)]
-        ${e ? " bg-[var(--color-green-500)]" : ""}
-        ${s ? " opacity-50 cursor-not-allowed" : ""}
-      `,
-      children: [
-        /* @__PURE__ */ o.jsx(
-          "input",
-          {
-            className: "opacity-0 hidden",
-            type: "checkbox",
-            checked: e,
-            onChange: n,
-            disabled: s
-          }
-        ),
-        /* @__PURE__ */ o.jsx(
-          "span",
-          {
-            className: `block w-3 h-3 rounded-full bg-[var(--color-white)] transform transition-transform ${e ? "translate-x-4" : ""}`
-          }
-        )
-      ]
+import s from "react";
+const d = (e) => {
+  const {
+    label: o,
+    className: r,
+    textColor: t = "var(--color-gray-700)",
+    bgColor: a = "var(--color-blue-300)",
+    textTransform: l = "none",
+    fontWeight: n = ""
+  } = e;
+  return /* @__PURE__ */ s.createElement("span", {
+    className: `se-design-badge inline-block px-1 text-sm rounded leading-5 ${r}`,
+    style: {
+      color: t,
+      backgroundColor: a,
+      textTransform: l,
+      fontWeight: n
     }
-  );
+  }, o);
 };
 export {
-  p as Toggle
+  d as Badge
 };
 //# sourceMappingURL=index7.js.map

package/dist/index7.js.map

@@ -1 +1 @@
-{"version":3,"file":"index7.js","sources":["../src/components/Toggle/index.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ToggleProps } from \"./Toggle.types\";\n\nexport const Toggle: React.FC<ToggleProps> = ({\n  initialState,\n  onToggle,\n  disabled,\n}) => {\n  const [checked, setChecked] = useState(initialState || false);\n\n  const handleToggle = () => {\n    const newChecked = !checked;\n    setChecked(newChecked);\n    if (onToggle) {\n      onToggle(newChecked);\n    }\n  };\n\n  return (\n    <label\n      className={`block w-8 h-4 p-0.5 rounded-full cursor-pointer bg-[var(--color-gray-500)]\n        ${checked ? \" bg-[var(--color-green-500)]\" : \"\"}\n        ${disabled ? \" opacity-50 cursor-not-allowed\" : \"\"}\n      `}\n    >\n      <input\n        className=\"opacity-0 hidden\"\n        type=\"checkbox\"\n        checked={checked}\n        onChange={handleToggle}\n        disabled={disabled}\n      />\n      <span\n        className={`block w-3 h-3 rounded-full bg-[var(--color-white)] transform transition-transform ${\n          checked ? \"translate-x-4\" : \"\"\n        }`}\n      ></span>\n    </label>\n  );\n};\n"],"names":["Toggle","initialState","onToggle","disabled","checked","setChecked","useState","handleToggle","newChecked","jsxs","jsx"],"mappings":";;AAGO,MAAMA,IAAgC,CAAC;AAAA,EAC5C,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIC,EAASL,KAAgB,EAAK,GAEtDM,IAAe,MAAM;AACzB,UAAMC,IAAa,CAACJ;AACpB,IAAAC,EAAWG,CAAU,GACjBN,KACFA,EAASM,CAAU;AAAA,EAEvB;AAGE,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,UACPL,IAAU,iCAAiC,EAAE;AAAA,UAC7CD,IAAW,mCAAmC,EAAE;AAAA;AAAA,MAGpD,UAAA;AAAA,QAAAO,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAAN;AAAA,YACA,UAAUG;AAAA,YACV,UAAAJ;AAAA,UAAA;AAAA,QACF;AAAA,QACAO,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,qFACTN,IAAU,kBAAkB,EAC9B;AAAA,UAAA;AAAA,QAAA;AAAA,MACD;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"index7.js","sources":["../src/components/Badge/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\ntype BadgeProps = {\n  label: string;\n  textColor?: string;\n  bgColor?: string;\n  className?: string;\n  textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';\n  fontWeight?: 'bold' | 'normal';\n};\n\nexport const Badge: FC<BadgeProps> = (props) => {\n  const { label, className, textColor = 'var(--color-gray-700)', bgColor = 'var(--color-blue-300)', textTransform = 'none', fontWeight = '' } = props;\n  return (\n    <span className={`se-design-badge inline-block px-1 text-sm rounded leading-5 ${className}`} style={{ color: textColor, backgroundColor: bgColor, textTransform, fontWeight }}>\n      {label}\n    </span>\n  );\n};\n"],"names":["React__default","Badge","props","label","className","textColor","bgColor","textTransform","fontWeight","React","createElement","style","color","backgroundColor"],"mappings":"AAWO,OAAAA,OAAA;AAAA,MAAMC,IAAyBC,CAAUA,MAAA;AACxC,QAAA;AAAA,IAAEC,OAAAA;AAAAA,IAAOC,WAAAA;AAAAA,IAAWC,WAAAA,IAAY;AAAA,IAAyBC,SAAAA,IAAU;AAAA,IAAyBC,eAAAA,IAAgB;AAAA,IAAQC,YAAAA,IAAa;AAAA,EAAA,IAAON;AAE5IO,SAAAA,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMN,WAAW,+DAA+DA,CAAS;AAAA,IAAIO,OAAO;AAAA,MAAEC,OAAOP;AAAAA,MAAWQ,iBAAiBP;AAAAA,MAASC,eAAAA;AAAAA,MAAeC,YAAAA;AAAAA,IAAAA;AAAAA,KAC9JL,CACG;AAEV;"}

package/dist/index8.js

@@ -1,6 +1,49 @@
-import { j as s } from "./index24.js";
-const o = ({ label: e }) => /* @__PURE__ */ s.jsx("span", { className: "inline-block px-1.5 py-1 text-xs font-bold rounded-sm bg-yellow-400 uppercase leading-4", children: e });
+import t from "react";
+import { Icon as u } from "./index4.js";
+const y = (r) => {
+  const {
+    label: l,
+    icon: e,
+    iconPosition: o = "right",
+    iconRotation: s = "0",
+    textTransform: i = "none",
+    textColor: c = "var(--color-gray-700)",
+    bgColor: m = "var(--color-blue-300)",
+    fontWeight: g = "",
+    size: n = "md",
+    onClick: d = () => {
+    }
+  } = r, x = {
+    0: "",
+    90: "rotate-90",
+    180: "rotate-180",
+    270: "-rotate-90"
+  }, p = {
+    sm: "px-1",
+    md: "px-1.5 py-1",
+    lg: "px-1.5 py-1"
+  }, f = {
+    sm: "text-xs leading-5 font-normal leading-5",
+    md: "text-sm leading-5 font-normal leading-5",
+    lg: "text-base leading-5 font-normal leading-5"
+  }, a = (b) => /* @__PURE__ */ t.createElement(u, {
+    name: b,
+    className: `transition-transform duration-200 ${x[s]}`
+  });
+  return /* @__PURE__ */ t.createElement("div", {
+    className: `se-design-label-chip text-[var(--color-gray-700)] w-fit flex items-center gap-1 text-base font-normal rounded-[6px] leading-4 cursor-pointer ${p[n]}`,
+    style: {
+      color: c,
+      backgroundColor: m,
+      textTransform: i,
+      fontWeight: g
+    },
+    onClick: d
+  }, o === "left" && e && a(e), /* @__PURE__ */ t.createElement("span", {
+    className: `inline-block ${f[n]}`
+  }, l), o === "right" && e && a(e));
+};
 export {
-  o as Tag
+  y as LabelChip
 };
 //# sourceMappingURL=index8.js.map

package/dist/index8.js.map

@@ -1 +1 @@
-{"version":3,"file":"index8.js","sources":["../src/components/Tag/index.tsx"],"sourcesContent":["import { FC } from 'react';\n\ntype TagProps = {\n  label: string;\n};\n\nexport const Tag: FC<TagProps> = ({ label }) => {\n  return (\n    <span className=\"inline-block px-1.5 py-1 text-xs font-bold rounded-sm bg-yellow-400 uppercase leading-4\">\n      {label}\n    </span>\n  );\n};\n"],"names":["jsxRuntimeExports","Tag","label","jsx"],"mappings":"AAMO,SAAA,KAAAA,SAAA;AAAA,MAAMC,IAAoB,CAAC,EAAE,OAAAC,QAE/BC,gBAAAA,EAAAA,IAAA,QAAA,EAAK,WAAU,2FACb,UACHD,GAAA;"}
+{"version":3,"file":"index8.js","sources":["../src/components/LabelChip/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Icon } from 'components/Icon';\n\ntype LabelChipProps = {\n  label: string;\n  icon?: string;\n  iconPosition?: 'left' | 'right';\n  iconRotation?: '0' | '90' | '180' | '270';\n  textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';\n  textColor?: string;\n  bgColor?: string;\n  fontWeight?: 'bold' | 'normal';\n  size?: 'sm' | 'md' | 'lg';\n  onClick?: () => void;\n};\n\nexport const LabelChip: FC<LabelChipProps> = (props) => {\n  const { label, icon, iconPosition = 'right', iconRotation = '0', textTransform = 'none', textColor = 'var(--color-gray-700)', bgColor = 'var(--color-blue-300)', fontWeight = '', size = 'md', onClick = () => {} } = props;\n\n  const iconRotationClasses = {\n    '0': '',\n    '90': 'rotate-90',\n    '180': 'rotate-180',\n    '270': '-rotate-90'\n  }\n\n  const sizeClasses = {\n    sm: 'px-1',\n    md: 'px-1.5 py-1',\n    lg: 'px-1.5 py-1'\n  }\n  const labelClasses = {\n    sm: 'text-xs leading-5 font-normal leading-5',\n    md: 'text-sm leading-5 font-normal leading-5',\n    lg: 'text-base leading-5 font-normal leading-5'\n  }\n\n  const getIconJsx = (icon: string) => {\n    return (\n      <Icon\n        name={icon}\n        className={`transition-transform duration-200 ${iconRotationClasses[iconRotation]}`}\n      />\n    )\n  }\n  return (\n    <div className={`se-design-label-chip text-[var(--color-gray-700)] w-fit flex items-center gap-1 text-base font-normal rounded-[6px] leading-4 cursor-pointer ${sizeClasses[size]}`} style={{ color: textColor, backgroundColor: bgColor, textTransform, fontWeight }} onClick={onClick}>\n      {iconPosition === 'left' && icon && getIconJsx(icon)}\n      <span className={`inline-block ${labelClasses[size]}`}>{label}</span>\n      {iconPosition === 'right' && icon && getIconJsx(icon)}\n    </div>\n  );\n};\n"],"names":["React__default","Icon","LabelChip","props","label","icon","iconPosition","iconRotation","textTransform","textColor","bgColor","fontWeight","size","onClick","iconRotationClasses","sizeClasses","sm","md","lg","labelClasses","getIconJsx","React","createElement","name","className","style","color","backgroundColor"],"mappings":"AAgBO,OAAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAAiCC,CAAUA,MAAA;AAChD,QAAA;AAAA,IAAEC,OAAAA;AAAAA,IAAOC,MAAAA;AAAAA,IAAMC,cAAAA,IAAe;AAAA,IAASC,cAAAA,IAAe;AAAA,IAAKC,eAAAA,IAAgB;AAAA,IAAQC,WAAAA,IAAY;AAAA,IAAyBC,SAAAA,IAAU;AAAA,IAAyBC,YAAAA,IAAa;AAAA,IAAIC,MAAAA,IAAO;AAAA,IAAMC,SAAAA,IAAUA,MAAM;AAAA,IAAA;AAAA,EAAC,IAAMV,GAEhNW,IAAsB;AAAA,IAC1B,GAAK;AAAA,IACL,IAAM;AAAA,IACN,KAAO;AAAA,IACP,KAAO;AAAA,EACT,GAEMC,IAAc;AAAA,IAClBC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,EACN,GACMC,IAAe;AAAA,IACnBH,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,EACN,GAEME,IAAaA,CAACf,MAEhBgB,gBAAAA,EAAAC,cAACrB,GAAI;AAAA,IACHsB,MAAMlB;AAAAA,IACNmB,WAAW,qCAAqCV,EAAoBP,CAAY,CAAC;AAAA,EAAA,CAClF;AAIHc,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,WAAW,gJAAgJT,EAAYH,CAAI,CAAC;AAAA,IAAIa,OAAO;AAAA,MAAEC,OAAOjB;AAAAA,MAAWkB,iBAAiBjB;AAAAA,MAASF,eAAAA;AAAAA,MAAeG,YAAAA;AAAAA,IAAW;AAAA,IAAGE,SAAAA;AAAAA,EAAAA,GACpQP,MAAiB,UAAUD,KAAQe,EAAWf,CAAI,GACnDiB,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAME,WAAW,gBAAgBL,EAAaP,CAAI,CAAC;AAAA,EAAA,GAAKR,CAAY,GACnEE,MAAiB,WAAWD,KAAQe,EAAWf,CAAI,CACjD;AAET;"}

package/dist/index9.js

@@ -1,28 +1,37 @@
-import { j as o } from "./index24.js";
-import { Icon as m } from "./index5.js";
-const d = (a) => {
-  const { label: e, icon: t, backgroundType: s = "transparent", iconPosition: n = "right", iconRotation: i = "0" } = a, c = {
-    transparent: "",
-    opaque: "bg-[var(--color-blue-300)]"
-  }, l = {
-    0: "",
-    90: "rotate-90",
-    180: "rotate-180",
-    270: "-rotate-90"
-  }, r = (p) => /* @__PURE__ */ o.jsx(
-    m,
-    {
-      name: p,
-      className: `transition-transform duration-200 ${l[i]}`
-    }
-  );
-  return /* @__PURE__ */ o.jsxs("div", { className: `text-[var(--color-gray-700)] flex items-center gap-1 px-1.5 py-1 text-base font-normal rounded-[6px] leading-4 cursor-pointe ${c[s]}`, children: [
-    n === "left" && t && r(t),
-    /* @__PURE__ */ o.jsx("span", { className: "inline-block", children: e }),
-    n === "right" && t && r(t)
-  ] });
+import e from "react";
+import { Button as c } from "./index3.js";
+const u = (l) => {
+  const {
+    title: t,
+    content: n,
+    successButtonType: a,
+    cancelButtonType: s,
+    successButtonText: o,
+    cancelButtonText: m,
+    cancelAction: r,
+    successAction: i
+  } = l;
+  return /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-modal fixed inset-0 flex items-start justify-center z-50 backdrop-brightness-50"
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "modal-content flex flex-col gap-3 bg-[var(--color-white)] rounded shadow-lg p-8 mt-14 w-[500px]"
+  }, t && /* @__PURE__ */ e.createElement("div", {
+    className: "text-lg font-semibold"
+  }, t), /* @__PURE__ */ e.createElement("p", {
+    className: "leading-normal"
+  }, n), /* @__PURE__ */ e.createElement("div", {
+    className: "flex items-center justify-end gap-4 pt-2"
+  }, /* @__PURE__ */ e.createElement(c, {
+    type: s,
+    onClick: r,
+    label: m
+  }), /* @__PURE__ */ e.createElement(c, {
+    type: a,
+    onClick: i,
+    label: o
+  }))));
 };
 export {
-  d as LabelChip
+  u as Modal
 };
 //# sourceMappingURL=index9.js.map

package/dist/index9.js.map

@@ -1 +1 @@
-{"version":3,"file":"index9.js","sources":["../src/components/LabelChip/index.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { Icon } from 'components/Icon';\n\ntype LabelChipProps = {\n  label: string;\n  backgroundType?: 'transparent' | 'opaque';\n  icon?: string;\n  iconPosition?: 'left' | 'right';\n  iconRotation?: '0' | '90' | '180' | '270';\n};\n\nexport const LabelChip: FC<LabelChipProps> = (props) => {\n  const { label, icon, backgroundType = 'transparent', iconPosition = 'right', iconRotation = '0'} = props;\n  const backgroundClasses = {\n    'transparent': '',\n    'opaque': 'bg-[var(--color-blue-300)]'\n  }\n  const iconRotationClasses = {\n    '0': '',\n    '90': 'rotate-90',\n    '180': 'rotate-180',\n    '270': '-rotate-90'\n  }\n\n  const getIconJsx = (icon: string) => {\n    return (\n      <Icon\n        name={icon}\n        className={`transition-transform duration-200 ${iconRotationClasses[iconRotation]}`}\n      />\n    )\n  }\n  return (\n    <div className={`text-[var(--color-gray-700)] flex items-center gap-1 px-1.5 py-1 text-base font-normal rounded-[6px] leading-4 cursor-pointe ${backgroundClasses[backgroundType]}`}>\n      {iconPosition === 'left' && icon && getIconJsx(icon)}\n      <span className=\"inline-block\">{label}</span>\n      {iconPosition === 'right' && icon && getIconJsx(icon)}\n    </div>\n  );\n};\n"],"names":["jsxRuntimeExports","Icon","LabelChip","props","label","icon","backgroundType","iconPosition","iconRotation","backgroundClasses","iconRotationClasses","getIconJsx","jsx"],"mappings":"AAWa,SAAA,KAAAA,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAAC,IAAgC,CAACC,MAAU;AAChD,QAAA,EAAE,OAAAC,GAAO,MAAAC,GAAM,gBAAAC,IAAiB,eAAe,cAAAC,IAAe,SAAS,cAAAC,IAAe,IAAA,IAAOL,GAC7FM,IAAoB;AAAA,IACxB,aAAe;AAAA,IACf,QAAU;AAAA,EACZ,GACMC,IAAsB;AAAA,IAC1B,GAAK;AAAA,IACL,IAAM;AAAA,IACN,KAAO;AAAA,IACP,KAAO;AAAA,EACT,GAEMC,IAAa,CAACN,MAEhBO,gBAAAA,EAAA;AAAA,IAACX;AAAA,IAAA;AAAA,MACC,MAAMI;AAAAA,MACN,WAAW,qCAAqCK,EAAoBF,CAAY,CAAC;AAAA,IAAA;AAAA,EACnF;AAGJ,gCACG,OAAI,EAAA,WAAW,gIAAgIC,EAAkBH,CAAc,CAAC,IAC9K,UAAA;AAAA,IAAiBC,MAAA,UAAUF,KAAQM,EAAWN,CAAI;AAAA,IAClDO,gBAAAA,EAAA,IAAA,QAAA,EAAK,WAAU,gBAAgB,UAAMR,GAAA;AAAA,IACrCG,MAAiB,WAAWF,KAAQM,EAAWN,CAAI;AAAA,EAAA,GACtD;AAEJ;"}
+{"version":3,"file":"index9.js","sources":["../src/components/Modal/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Button } from 'src/components/Button';\n\nexport interface ModalProps {\n  title?: string;\n  content: string;\n  successButtonText: string;\n  cancelButtonText: string;\n  successButtonType: 'primary' | 'secondary' | 'negative' | 'negative-secondary';\n  cancelButtonType: 'primary' | 'secondary' | 'negative' | 'negative-secondary';\n  cancelAction?: () => void;\n  successAction?: () => void;\n}\n\nexport const Modal: FC<ModalProps> = (props) => {\n  const {\n    title,\n    content,\n    successButtonType,\n    cancelButtonType,\n    successButtonText,\n    cancelButtonText,\n    cancelAction,\n    successAction\n  } = props;\n\n  return (\n    <div className=\"se-design-modal fixed inset-0 flex items-start justify-center z-50 backdrop-brightness-50\">\n      <div className=\"modal-content flex flex-col gap-3 bg-[var(--color-white)] rounded shadow-lg p-8 mt-14 w-[500px]\">\n        {title && <div className=\"text-lg font-semibold\">{title}</div>}\n        <p className=\"leading-normal\">{content}</p>\n        <div className=\"flex items-center justify-end gap-4 pt-2\">\n          <Button type={cancelButtonType} onClick={cancelAction} label={cancelButtonText} />\n          <Button type={successButtonType} onClick={successAction} label={successButtonText} />\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React__default","Button","Modal","props","title","content","successButtonType","cancelButtonType","successButtonText","cancelButtonText","cancelAction","successAction","React","createElement","className","type","onClick","label"],"mappings":"AAcO,OAAAA,OAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,MAAMC,IAAyBC,CAAUA,MAAA;AACxC,QAAA;AAAA,IACJC,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,mBAAAA;AAAAA,IACAC,kBAAAA;AAAAA,IACAC,mBAAAA;AAAAA,IACAC,kBAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,eAAAA;AAAAA,EAAAA,IACER;AAGFS,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EACZV,GAAAA,KAASS,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAyBV,GAAAA,CAAW,GAC7DQ,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IAAGC,WAAU;AAAA,EAAkBT,GAAAA,CAAW,GAC1CO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAACZ,GAAM;AAAA,IAACc,MAAMR;AAAAA,IAAkBS,SAASN;AAAAA,IAAcO,OAAOR;AAAAA,EAAAA,CAAmB,GACjFI,gBAAAA,EAAAA,cAACZ,GAAM;AAAA,IAACc,MAAMT;AAAAA,IAAmBU,SAASL;AAAAA,IAAeM,OAAOT;AAAAA,EAAoB,CAAA,CACjF,CACF,CACF;AAET;"}

package/dist/typographyMixin.scss

@@ -0,0 +1,79 @@
+// Mixin for typography
+  @mixin heading_semibold {
+    font-size: 24px;
+    line-height: 28px;
+    font-weight: 600;
+  }
+
+  @mixin heading_one_regular {
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 400;
+  }
+
+  @mixin heading_two_regular{
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 400;
+  }
+
+  @mixin heading_semibold {
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 600;
+  }
+
+  @mixin subheading_regular {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 400;
+  }
+
+  @mixin subheading_semibold {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 600;
+  }
+
+  @mixin body_text_large_regular {
+    font-size: 18px;
+    line-height: 22px;
+    font-weight: 400;
+  }
+
+  @mixin body_text_normal_regular {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+  }
+
+  @mixin body_text_normal_semibold {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 600;
+  }
+
+  @mixin body_text_small_semibold {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 600;
+  }
+
+  @mixin body_text_small_regular {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+  }
+
+  @mixin caption_regular {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+  }
+
+  @mixin caption_semibold {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 600;
+  }
+ 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "se-design",
-  "version": "0.0.97",
+  "version": "0.0.99",
   "type": "module",
   "module": "dist/index.js",
   "exports": {
@@ -8,11 +8,10 @@
       "import": "./dist/index.js"
     },
     "./style.css": "./dist/assets/style.css",
-    "./colors.css": "./dist/assets/colors.css"
+    "./typographyMixin.scss": "./dist/typographyMixin.scss"
   },
   "files": [
-    "dist",
-    "dist/assets"
+    "dist"
   ],
   "scripts": {
     "dev": "vite",
@@ -31,6 +30,7 @@
     "access": "public"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.26.3",
     "@chromatic-com/storybook": "^1.6.1",
     "@storybook/addon-essentials": "^8.2.7",
     "@storybook/addon-interactions": "^8.2.7",
@@ -63,5 +63,11 @@
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.5.10"
-  }
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "browserslist": [
+    "supports es6-module"
+  ]
 }

package/dist/assets/colors.css

@@ -1 +0,0 @@
-:root{--color-blue-50: #F5F9FD;--color-blue-100: #E9F2FC;--color-blue-200: #D6ECFB;--color-blue-300: #D7E6F9;--color-blue-400: #96CBF5;--color-blue-500: #1088E7;--color-blue-600: #0167C2;--color-gray-50: #F2F4F8;--color-gray-100: #EAEFF9;--color-gray-200: #E4E9F1;--color-gray-300: #E1E4EB;--color-gray-400: #C9D4E3;--color-gray-500: #A1B3CF;--color-gray-600: #92A1B9;--color-gray-700: #415575;--color-gray-800: #2D3A48;--color-gray-900: #1B2636;--color-green-50: #E5F7ED;--color-green-400: #7BE79C;--color-green-500: #56CF8A;--color-green-700: #219653;--color-yellow-50: #FFF2D7;--color-yellow-400: #954A29;--color-red-50: #FEEBE6;--color-red-400: #FE4773;--color-red-700: #CB384E;--color-white: #FFFFFF;--color-purple-50: #F6F3FF;--color-purple-100: #F5EBFD;--color-purple-200: #F1E4FF;--color-purple-300: #EAD5FF;--color-purple-800: #9335F0}

package/dist/assets/src/components/SidebarOverlay/style.css

@@ -1 +0,0 @@
-.sidebar-overlay-container{z-index:1;height:100%;transition:all .3s ease-in-out}.sidebar-overlay-container .overlay-content{height:100%;display:flex;flex-direction:column}.sidebar-overlay-container.left-aligned{left:0;transform:translate(-100%)}.sidebar-overlay-container.left-aligned.open-sidebar{transform:translate(0)}.sidebar-overlay-container.right-aligned{right:0;transform:translate(100%)}.sidebar-overlay-container.right-aligned.open-sidebar{transform:translate(0)}.sidebar-overlay-container.abs{position:absolute}.sidebar-overlay-container.fxd{position:fixed}.sidebar-overlay-container.right-aligned{box-shadow:0 0 24px #0000000d}.sidebar-overlay-container.left-aligned{box-shadow:7px 0 14px #00000017}.sidebar-overlay-container .close{height:100%}.sidebar-overlay-container .overlay-close{position:absolute;right:15px;cursor:pointer;margin-top:5px}

package/dist/assets/src/components/TableContentLoader/style.css

@@ -1 +0,0 @@
-.loader td{padding:1rem 1rem 1rem 0}.loader td div{height:20px;width:80%;border-radius:72px}.loader td:last-child div{width:100%}.loader .loading-animation{animation:shimmer 3s infinite linear;background:linear-gradient(to right,#f4f8fd 5%,#f0f3f7 25%,#f4f8fd 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}

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

@@ -1,26 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { ButtonProps } from '.';
-declare const meta: {
-    title: string;
-    component: import('react').FC<ButtonProps>;
-    args: {
-        onClick: import('@vitest/spy').Mock<(...args: any[]) => any>;
-    };
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<ButtonProps>;
-export declare const Primary: Story;
-export declare const Secondary: Story;
-export declare const Purchase: Story;
-export declare const PurchaseSecondary: Story;
-export declare const Negative: Story;
-export declare const NegativeSecondary: Story;
-export declare const Disabled: Story;
-export declare const PrimaryWithLeftIcon: Story;
-export declare const PrimaryWithRightIcon: Story;
-export declare const PrimarySmall: Story;
-export declare const SecondaryLink: Story;

package/dist/components/HamburgerMenu/HamburgerMenu.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { HamburgerMenu } from '.';
-declare const meta: Meta<typeof HamburgerMenu>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Hamburger: Story;

package/dist/components/Icon/Icon.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Icon } from '.';
-declare const meta: Meta<typeof Icon>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Pages: Story;

package/dist/components/Icon/Icon.types.d.ts

@@ -1,4 +0,0 @@
-export type IconProps = {
-    name: string;
-    className?: string;
-};

package/dist/components/KebabMenu/KebabMenu.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { KebabMenu } from './index';
-declare const meta: Meta<typeof KebabMenu>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const PrimaryKebabMenu: Story;
-export declare const SecondaryKebabMenu: Story;
-export declare const KebabMenuWithSelectedItem: Story;

package/dist/components/Modal/Modal.stories.d.ts

@@ -1,12 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { ModalProps } from '.';
-declare const meta: {
-    title: string;
-    component: import('react').FC<ModalProps>;
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<ModalProps>;
-export declare const Default: Story;
-export declare const modalWithPrimaryButton: Story;
-export declare const modalWithoutHeader: Story;

package/dist/components/SplitButton/SplitButton.stories.d.ts

@@ -1,13 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { SplitButtonProps } from '.';
-declare const meta: {
-    title: string;
-    component: import('react').FC<SplitButtonProps>;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<SplitButtonProps>;
-export declare const Primary: Story;

package/dist/components/Tag/index.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-type TagProps = {
-    label: string;
-};
-export declare const Tag: FC<TagProps>;
-export {};

package/dist/index43.js

@@ -1,8 +0,0 @@
-import e from "./index46.js";
-function p(o, t) {
-  o.prototype = Object.create(t.prototype), o.prototype.constructor = o, e(o, t);
-}
-export {
-  p as default
-};
-//# sourceMappingURL=index43.js.map

package/dist/index43.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index43.js","sources":["../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js"],"sourcesContent":["import setPrototypeOf from \"./setPrototypeOf.js\";\nfunction _inheritsLoose(t, o) {\n  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, setPrototypeOf(t, o);\n}\nexport { _inheritsLoose as default };"],"names":["_setPrototypeOf","_inheritsLoose","t","o","setPrototypeOf"],"mappings":"AACA,OAAAA,OAAA;AAAA,SAASC,EAAeC,GAAGC,GAAG;AAC5B,EAAAD,EAAE,YAAY,OAAO,OAAOC,EAAE,SAAS,GAAGD,EAAE,UAAU,cAAcA,GAAGE,EAAeF,GAAGC,CAAC;AAC5F;","x_google_ignoreList":[0]}