@ck-ui/component-library 0.0.3 → 0.0.4

package/dist/assets/Theme.css

@@ -1 +1 @@
-:root{--ckcl-primary: #0d63fe;--ckcl-text: #ffffff;--ckcl-font-family: "Inter", sans-serif;--ckcl-radius: 6px;--ckcl-spacing-sm: .5rem;--ckcl-spacing-md: 1rem}
+@charset "UTF-8";:root{--ckcl-primary-600: #1058EC;--ckcl-primary-500: #3A72E4;--ckcl-primary-400: #89AAEF;--ckcl-primary-300: #B0C6F4;--ckcl-primary-200: #D8E3FA;--ckcl-primary-100: #F8FBFF;--ckcl-black-500: #2B2B2B;--ckcl-black-400: #808080;--ckcl-black-300: #AAAAAA;--ckcl-black-200: #D5D5D5;--ckcl-black-100: #F4F4F4;--ckcl-white: #FFFFFF;--ckcl-red-500: #DA1E28;--ckcl-red-400: #E9787E;--ckcl-red-300: #F0A5A9;--ckcl-red-200: #F8D2D4;--ckcl-red-100: #FDF4F4;--ckcl-yellow-500: #FFCC02;--ckcl-yellow-400: #FEEAA5;--ckcl-yellow-300: #FFF1C3;--ckcl-yellow-200: #FFF8E1;--ckcl-yellow-100: #FFFDF7;--ckcl-green-500: #24A147;--ckcl-green-400: #7CC791;--ckcl-green-300: #A7D9B5;--ckcl-green-200: #D3ECDA;--ckcl-green-100: #F4FAF6;--ckcl-font-family-base: Inter;--ckcl-fs-3xs: 10px;--ckcl-fs-2xs: 11px;--ckcl-fs-xs: 12px;--ckcl-fs-sm: 14px;--ckcl-fs-md: 16px;--ckcl-fs-lg: 18px;--ckcl-fs-xl: 24px;--ckcl-font-weight-regular: 400;--ckcl-font-weight-medium: 500;--ckcl-font-weight-semibold: 600;--ckcl-font-weight-bold: 700;--ckcl-leading-xs: 14px;--ckcl-leading-sm: 16px;--ckcl-leading-md: 19px;--ckcl-leading-lg: 22px;--ckcl-leading-xl: 25px;--ckcl-leading-2xl: 33px;--ckcl-spacing-2xs: 2px;--ckcl-spacing-xs: 4px;--ckcl-spacing-sm: 8px;--ckcl-spacing-md: 16px;--ckcl-spacing-slg: 20px;--ckcl-spacing-lg: 24px;--ckcl-spacing-xl: 28px;--ckcl-spacing-2xl: 32px;--ckcl-spacing-3xl: 48px;--ckcl-tag-neutral-bg: #F4F4F4;--ckcl-tag-neutral-border: #AAAAAA;--ckcl-tag-error-bg: #FDF4F4;--ckcl-tag-error-border: #E9787E;--ckcl-tag-success-bg: #F4FAF6;--ckcl-tag-success-border: #7CC791;--ckcl-tag-inprogress-bg: #F8FBFF;--ckcl-tag-inprogress-border: #B0C6F4;--ckcl-tag-alert-bg: #FFFDF7;--ckcl-tag-alert-border: #FEEAA5}[class*=ckcl]{box-sizing:border-box}body .ckcl-font-family-base{font-family:var(--ckcl-font-family-base, "Inter"),sans-serif}body .ckcl-h1-reg{font-size:var(--ckcl-fs-xl, 24px);font-weight:var(--ckcl-font-weight-regular, 400);line-height:var(--ckcl-leading-2xl, 33px)}body .ckcl-h1-med{font-size:var(--ckcl-fs-xl, 24px);font-weight:var(--ckcl-font-weight-medium, 500);line-height:var(--ckcl-leading-2xl, 33px)}body .ckcl-h1-semibold{font-size:var(--ckcl-fs-xl, 24px);font-weight:var(--ckcl-font-weight-semibold, 600);line-height:var(--ckcl-leading-2xl, 33px)}body .ckcl-h1-bold{font-size:var(--ckcl-fs-xl, 24px);font-weight:var(--ckcl-font-weight-bold, 700);line-height:var(--ckcl-leading-2xl, 33px)}body .ckcl-h2-reg{font-size:var(--ckcl-fs-lg, 18px);font-weight:var(--ckcl-font-weight-regular, 400);line-height:var(--ckcl-leading-xl, 25px)}body .ckcl-h2-med{font-size:var(--ckcl-fs-lg, 18px);font-weight:var(--ckcl-font-weight-medium, 500);line-height:var(--ckcl-leading-xl, 25px)}body .ckcl-h2-semibold{font-size:var(--ckcl-fs-lg, 18px);font-weight:var(--ckcl-font-weight-semibold, 600);line-height:var(--ckcl-leading-xl, 25px)}body .ckcl-h2-bold{font-size:var(--ckcl-fs-lg, 18px);font-weight:var(--ckcl-font-weight-bold, 700);line-height:var(--ckcl-leading-xl, 25px)}body .ckcl-h3-reg{font-size:var(--ckcl-fs-md, 16px);font-weight:var(--ckcl-font-weight-regular, 400);line-height:var(--ckcl-leading-lg, 22px)}body .ckcl-h3-med{font-size:var(--ckcl-fs-md, 16px);font-weight:var(--ckcl-font-weight-medium, 500);line-height:var(--ckcl-leading-lg, 22px)}body .ckcl-h3-semibold{font-size:var(--ckcl-fs-md, 16px);font-weight:var(--ckcl-font-weight-semibold, 600);line-height:var(--ckcl-leading-lg, 22px)}body .ckcl-h3-bold{font-size:var(--ckcl-fs-md, 16px);font-weight:var(--ckcl-font-weight-bold, 700);line-height:var(--ckcl-leading-lg, 22px)}body .ckcl-body-lg-reg{font-size:var(--ckcl-fs-sm, 14px);font-weight:var(--ckcl-font-weight-regular, 400);line-height:var(--ckcl-leading-md, 19px)}body .ckcl-body-lg-med{font-size:var(--ckcl-fs-sm, 14px);font-weight:var(--ckcl-font-weight-medium, 500);line-height:var(--ckcl-leading-md, 19px)}body .ckcl-body-lg-semibold{font-size:var(--ckcl-fs-sm, 14px);font-weight:var(--ckcl-font-weight-semibold, 600);line-height:var(--ckcl-leading-md, 19px)}body .ckcl-body-lg-bold{font-size:var(--ckcl-fs-sm, 14px);font-weight:var(--ckcl-font-weight-bold, 700);line-height:var(--ckcl-leading-md, 19px)}body .ckcl-body-sm-reg{font-size:var(--ckcl-fs-xs, 12px);font-weight:var(--ckcl-font-weight-regular, 400);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-body-sm-med{font-size:var(--ckcl-fs-xs, 12px);font-weight:var(--ckcl-font-weight-medium, 500);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-body-sm-semibold{font-size:var(--ckcl-fs-xs, 12px);font-weight:var(--ckcl-font-weight-semibold, 600);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-body-sm-bold{font-size:var(--ckcl-fs-xs, 12px);font-weight:var(--ckcl-font-weight-bold, 700);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-body-xs-reg{font-size:var(--ckcl-fs-2xs, 11px);font-weight:var(--ckcl-font-weight-regular, 400);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-body-xs-med{font-size:var(--ckcl-fs-2xs, 11px);font-weight:var(--ckcl-font-weight-medium, 500);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-body-xs-semibold{font-size:var(--ckcl-fs-2xs, 11px);font-weight:var(--ckcl-font-weight-semibold, 600);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-body-xs-bold{font-size:var(--ckcl-fs-2xs, 11px);font-weight:var(--ckcl-font-weight-bold, 700);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-cap-reg{font-size:var(--ckcl-fs-3xs, 10px);font-weight:var(--ckcl-font-weight-regular, 400);line-height:var(--ckcl-leading-xs, 14px)}body .ckcl-cap-med{font-size:var(--ckcl-fs-3xs, 10px);font-weight:var(--ckcl-font-weight-medium, 500);line-height:var(--ckcl-leading-xs, 14px)}body .ckcl-cap-semibold{font-size:var(--ckcl-fs-3xs, 10px);font-weight:var(--ckcl-font-weight-semibold, 600);line-height:var(--ckcl-leading-xs, 14px)}body .ckcl-cap-bold{font-size:var(--ckcl-fs-3xs, 10px);font-weight:var(--ckcl-font-weight-bold, 700);line-height:var(--ckcl-leading-xs, 14px)}body .ckcl-primary-600{color:var(--ckcl-primary-600, #1058EC)}body .ckcl-primary-500{color:var(--ckcl-primary-500, #3A72E4)}body .ckcl-primary-400{color:var(--ckcl-primary-400, #89AAEF)}body .ckcl-primary-300{color:var(--ckcl-primary-300, #B0C6F4)}body .ckcl-primary-200{color:var(--ckcl-primary-200, #D8E3FA)}body .ckcl-primary-100{color:var(--ckcl-primary-100, #F8FBFF)}body .ckcl-black-500{color:var(--ckcl-black-500, #2B2B2B)}body .ckcl-black-400{color:var(--ckcl-black-400, #808080)}body .ckcl-black-300{color:var(--ckcl-primary-300, #B0C6F4)}body .ckcl-black-200{color:var(--ckcl-primary-200, #D8E3FA)}body .ckcl-black-100{color:var(--ckcl-primary-100, #F8FBFF)}body .ckcl-white{color:var(--ckcl-white, #FFFFFF)}body .ckcl-red-500{color:var(--ckcl-red-500, #DA1E28)}body .ckcl-red-400{color:var(--ckcl-red-400, #E9787E)}body .ckcl-red-300{color:var(--ckcl-red-300, #F0A5A9)}body .ckcl-red-200{color:var(--ckcl-red-200, #F8D2D4)}body .ckcl-red-100{color:var(--ckcl-red-100, #FDF4F4)}body .ckcl-yellow-500{color:var(--ckcl-yellow-500, #FFCC02)}body .ckcl-yellow-400{color:var(--ckcl-yellow-400, #FEEAA5)}body .ckcl-yellow-300{color:var(--ckcl-yellow-300, #FFF1C3)}body .ckcl-yellow-200{color:var(--ckcl-yellow-200, #FFF8E1)}body .ckcl-yellow-100{color:var(--ckcl-yellow-100, #FFFDF7)}body .ckcl-green-500{color:var(--ckcl-green-500, #24A147)}body .ckcl-green-400{color:var(--ckcl-green-400, #7CC791)}body .ckcl-green-300{color:var(--ckcl-green-300, #A7D9B5)}body .ckcl-green-200{color:var(--ckcl-green-200, #D3ECDA)}body .ckcl-green-100{color:var(--ckcl-green-100, #F4FAF6)}body .ckcl-fs-3xs{font-size:var(--ckcl-fs-3xs, 10px)}body .ckcl-fs-2xs{font-size:var(--ckcl-fs-2xs, 11px)}body .ckcl-fs-xs{font-size:var(--ckcl-fs-xs, 12px)}body .ckcl-fs-sm{font-size:var(--ckcl-fs-sm, 14px)}body .ckcl-fs-md{font-size:var(--ckcl-fs-md, 16px)}body .ckcl-fs-lg{font-size:var(--ckcl-fs-lg, 18px)}body .ckcl-fs-xl{font-size:var(--ckcl-fs-xl, 24px)}body .ckcl-primary-bg-600{background-color:var(--ckcl-primary-600, #1058EC)}body .ckcl-primary-bg-500{background-color:var(--ckcl-primary-500, #3A72E4)}body .ckcl-primary-bg-400{background-color:var(--ckcl-primary-400, #89AAEF)}body .ckcl-primary-bg-300{background-color:var(--ckcl-primary-300, #B0C6F4)}body .ckcl-primary-bg-200{background-color:var(--ckcl-primary-200, #D8E3FA)}body .ckcl-primary-bg-100{background-color:var(--ckcl-primary-100, #F8FBFF)}body .ckcl-black-bg-500{background-color:var(--ckcl-black-500, #2B2B2B)}body .ckcl-black-bg-400{background-color:var(--ckcl-black-400, #808080)}body .ckcl-black-bg-300{background-color:var(--ckcl-primary-300, #B0C6F4)}body .ckcl-black-bg-200{background-color:var(--ckcl-primary-200, #D8E3FA)}body .ckcl-black-bg-100{background-color:var(--ckcl-primary-100, #F8FBFF)}body .ckcl-red-bg-500{background-color:var(--ckcl-red-500, #DA1E28)}body .ckcl-red-bg-400{background-color:var(--ckcl-red-400, #E9787E)}body .ckcl-red-bg-300{background-color:var(--ckcl-red-300, #F0A5A9)}body .ckcl-red-bg-200{background-color:var(--ckcl-red-200, #F8D2D4)}body .ckcl-red-bg-100{background-color:var(--ckcl-red-100, #FDF4F4)}body .ckcl-yellow-bg-500{background-color:var(--ckcl-yellow-500, #FFCC02)}body .ckcl-yellow-bg-400{background-color:var(--ckcl-yellow-400, #FEEAA5)}body .ckcl-yellow-bg-300{background-color:var(--ckcl-yellow-300, #FFF1C3)}body .ckcl-yellow-bg-200{background-color:var(--ckcl-yellow-200, #FFF8E1)}body .ckcl-yellow-bg-100{background-color:var(--ckcl-yellow-100, #FFFDF7)}body .ckcl-green-bg-500{background-color:var(--ckcl-green-500, #24A147)}body .ckcl-green-bg-400{background-color:var(--ckcl-green-400, #7CC791)}body .ckcl-green-bg-300{background-color:var(--ckcl-green-300, #A7D9B5)}body .ckcl-green-bg-200{background-color:var(--ckcl-green-200, #D3ECDA)}body .ckcl-green-bg-100{background-color:var(--ckcl-green-100, #F4FAF6)}

package/dist/assets/index.css

@@ -1 +1 @@
-._input_zg0ml_1{padding:1rem}
+._ckcl-tag_1vgmh_1{font-family:var(--ckcl-font-family-base, "Inter"),sans-serif;display:flex;align-items:center;width:fit-content;border-radius:40px;white-space:nowrap}._x-small_1vgmh_11{padding:var(--ckcl-spacing-2xs, 2px) var(--ckcl-spacing-sm, 8px);height:var(--ckcl-spacing-slg, 20px)}._small_1vgmh_16{padding:var(--ckcl-spacing-xs, 4px) var(--ckcl-spacing-sm, 8px);height:var(--ckcl-spacing-lg, 24px)}._medium_1vgmh_21{padding:var(--ckcl-spacing-xs, 4px) var(--ckcl-spacing-sm, 8px);height:var(--ckcl-spacing-xl, 28px)}._large_1vgmh_26{padding:var(--ckcl-spacing-xs, 4px) var(--ckcl-spacing-sm, 8px);height:var(--ckcl-spacing-2xl, 32px)}._neutral_1vgmh_32{background-color:var(--ckcl-tag-neutral-bg, #F4F4F4);border:1px solid var(--ckcl-tag-neutral-border, #AAAAAA);color:var(--ckcl-black-500, #2B2B2B);border-radius:40px}._error_1vgmh_39{background-color:var(--ckcl-tag-error-bg, #FDF4F4);border:1px solid var(--ckcl-tag-error-border, #E9787E);color:var(--ckcl-black-500, #2B2B2B);border-radius:40px}._success_1vgmh_46{background-color:var(--ckcl-tag-success-bg, #F4FAF6);border:1px solid var(--ckcl-tag-success-border, #7CC791);color:var(--ckcl-black-500, #2B2B2B);border-radius:40px}._in-progress_1vgmh_53{background-color:var(--ckcl-tag-inprogress-bg, #F8FBFF);border:1px solid var(--ckcl-tag-inprogress-border, #B0C6F4);color:var(--ckcl-black-500, #2B2B2B);border-radius:40px}._alert_1vgmh_60{background-color:var(--ckcl-tag-alert-bg, #FFFDF7);border:1px solid var(--ckcl-tag-alert-border, #FEEAA5);color:var(--ckcl-black-500, #2B2B2B);border-radius:40px}

package/dist/assets/index2.css

@@ -1 +1 @@
-._button_1o5se_1{background-color:var(--ckcl-primary);color:var(--ckcl-text);font-family:var(--ckcl-font-family);padding:var(--ckcl-spacing-sm) var(--ckcl-spacing-md);border:none;border-radius:var(--ckcl-radius);font-weight:700;cursor:pointer;transition:background .2s}
+._ckcl-switch-wrapper_1utaq_1{font-family:var(--ckcl-font-family-base, "Inter"),sans-serif}._ckcl-switch-wrapper_1utaq_1 ._ckcl-switch_1utaq_1{position:relative;display:inline-block;cursor:pointer;width:var(--ckcl-spacing-xl, 28px);height:var(--ckcl-spacing-md, 16px)}._ckcl-switch-wrapper_1utaq_1 ._ckcl-switch_1utaq_1 ._slider_1utaq_11:before{width:var(--ckcl-fs-xs, 12px);height:var(--ckcl-fs-xs, 12px);left:2px;top:12%}._ckcl-switch-wrapper_1utaq_1 ._ckcl-switch_1utaq_1 input:checked+._slider_1utaq_11:before{transform:translate(var(--ckcl-fs-xs, 12px))}._ckcl-switch-wrapper_1utaq_1 ._ckcl-switch_1utaq_1 ._slider_1utaq_11{position:absolute;inset:0;background-color:var(--ckcl-black-400, #808080);transition:.4s;border-radius:var(--ckcl-spacing-md, 16px)}._ckcl-switch-wrapper_1utaq_1 ._ckcl-switch_1utaq_1 ._slider_1utaq_11:before{position:absolute;content:"";background-color:var(--ckcl-white, #FFFFFF);transition:.4s;border-radius:50%}._ckcl-switch-wrapper_1utaq_1 ._ckcl-switch_1utaq_1 input:checked+._slider_1utaq_11{background-color:var(--ckcl-primary-500, #3A72E4)}._ckcl-switch-wrapper_1utaq_1 ._ckcl-switch_1utaq_1 input:disabled+._slider_1utaq_11{background-color:var(--ckcl-black-200, #D5D5D5);cursor:not-allowed}._ckcl-switch-wrapper_1utaq_1 ._ckcl-switch_1utaq_1 input:checked:disabled+._slider_1utaq_11{background-color:var(--ckcl-primary-300, #B0C6F4);cursor:not-allowed}

package/dist/assets/index3.css

@@ -0,0 +1 @@
+._input_zg0ml_1{padding:1rem}

package/dist/assets/index4.css

@@ -0,0 +1 @@
+._ckcl-copy_qj0vq_1{font-family:var(--ckcl-font-family-base, "Inter"),sans-serif;cursor:pointer;display:inline-block;align-items:center;-webkit-user-select:none;user-select:none}._icon_qj0vq_9{padding:var(--ckcl-spacing-xs, 4px) var(--ckcl-spacing-xs, 4px)}._small_qj0vq_14,._medium_qj0vq_18,._large_qj0vq_22{font-size:var(--ckcl-fs-xs, 12px)}

package/dist/assets/index5.css

@@ -0,0 +1 @@
+._ckcl-button_zsbft_1{font-family:var(--ckcl-font-family-base, "Inter"),sans-serif;display:inline-flex;align-items:center;transition:all .3s ease;cursor:pointer;border-radius:var(--ckcl-spacing-xs, 4px);white-space:nowrap;text-decoration:none}._x-small_zsbft_13{padding:var(--ckcl-spacing-xs, 4px) var(--ckcl-spacing-sm, 8px);height:var(--ckcl-spacing-slg, 20px)}._small_zsbft_18{padding:var(--ckcl-spacing-xs, 4px) var(--ckcl-spacing-sm, 8px);height:var(--ckcl-spacing-lg, 24px)}._medium_zsbft_23{padding:var(--ckcl-spacing-xs, 4px) var(--ckcl-spacing-sm, 8px);height:var(--ckcl-spacing-xl, 28px)}._large_zsbft_28{padding:var(--ckcl-spacing-xs, 4px) var(--ckcl-spacing-sm, 8px);height:var(--ckcl-spacing-2xl, 32px)}._primary_zsbft_34{background-color:var(--ckcl-primary-500, #3A72E4);border:1px solid var(--ckcl-primary-500, #3A72E4);color:var(--ckcl-white, #FFFFFF)}._primary_zsbft_34:hover{background-color:var(--ckcl-primary-600, #1058EC);border:1px solid var(--ckcl-primary-600, #1058EC);color:var(--ckcl-white, #FFFFFF)}._primary_zsbft_34:disabled{background-color:var(--ckcl-black-300, #AAAAAA);color:var(--ckcl-white, #FFFFFF);border-color:var(--ckcl-black-300, #AAAAAA);cursor:not-allowed}._secondary_zsbft_52{background-color:transparent;border:1px solid var(--ckcl-primary-600, #1058EC);color:var(--ckcl-primary-600, #1058EC)}._secondary_zsbft_52:hover{background-color:var(--ckcl-primary-200, #D8E3FA);border:1px solid var(--ckcl-primary-600, #1058EC)}._secondary_zsbft_52:disabled{background-color:var(--ckcl-black-100, #F4F4F4);color:var(--ckcl-black-400, #808080);border-color:var(--ckcl-black-200, #D5D5D5);cursor:not-allowed}._tertiary_zsbft_69{background-color:var(--ckcl-white, #FFFFFF);border:none;color:var(--ckcl-primary-600, #1058EC)}._tertiary_zsbft_69:hover{text-decoration:underline}._tertiary_zsbft_69:disabled{color:var(--ckcl-black-400, #808080);cursor:not-allowed;text-decoration:none}

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from './index';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+//# sourceMappingURL=Button.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAG7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC"}

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

@@ -1,2 +1,10 @@
-export declare function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    Icon?: React.ReactNode;
+    iconPosition?: "left" | "right";
+    variant?: "primary" | "secondary" | "tertiary";
+    size?: "x-small" | "small" | "medium" | "large";
+    isSubmit?: boolean;
+}
+export declare function Button({ children, className, variant, size, isSubmit, ...restProps }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/index.tsx"],"names":[],"mappings":"AAEA,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,2CAI1E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/index.tsx"],"names":[],"mappings":"AAGA,UAAU,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACzE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,SAAc,EACd,OAAmB,EACnB,IAAe,EACf,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,WAAW,2CAoBb"}

package/dist/components/Button/index.js

@@ -1,11 +1,33 @@
 import { jsx as n } from "react/jsx-runtime";
-import '../../assets/index2.css';const u = "_button_1o5se_1", e = {
-  button: u
+import '../../assets/index5.css';const o = "_small_zsbft_18", u = "_medium_zsbft_23", b = "_large_zsbft_28", i = "_primary_zsbft_34", y = "_secondary_zsbft_52", d = "_tertiary_zsbft_69", s = {
+  "ckcl-button": "_ckcl-button_zsbft_1",
+  "x-small": "_x-small_zsbft_13",
+  small: o,
+  medium: u,
+  large: b,
+  primary: i,
+  secondary: y,
+  tertiary: d
 };
-function c(t) {
-  const { className: o = "", ...s } = t;
-  return /* @__PURE__ */ n("button", { className: `${o} ${e.button}`, ...s });
+function p({
+  children: m,
+  className: l = "",
+  variant: e = "primary",
+  size: r = "medium",
+  isSubmit: a,
+  ..._
+}) {
+  const c = (t) => t === "x-small" ? "ckcl-body-xs-med" : t === "small" || t === "medium" || t === "large" ? "ckcl-body-sm-med" : "";
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      className: `${l} ${s["ckcl-button"]} ${s[e]} ${s[r]} ${c(r)}`,
+      type: a ? "submit" : "button",
+      ..._,
+      children: m
+    }
+  );
 }
 export {
-  c as Button
+  p as Button
 };

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Copy } from './index';
+declare const meta: Meta<typeof Copy>;
+export default meta;
+type Story = StoryObj<typeof Copy>;
+export declare const CopyText: Story;
+//# sourceMappingURL=Copy.stories.d.ts.map

package/dist/components/Copy/Copy.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Copy.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Copy/Copy.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAK/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAG3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC"}

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

@@ -0,0 +1,8 @@
+interface CopyProps extends React.HTMLAttributes<HTMLSpanElement> {
+    Icon: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+}
+export declare function Copy({ children, Icon, className, size, onClick, ...restProps }: CopyProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Copy/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Copy/index.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC/D,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,SAAc,EACd,IAAe,EACf,OAAO,EACP,GAAG,SAAS,EACb,EAAE,SAAS,2CAYX"}

package/dist/components/Copy/index.js

@@ -0,0 +1,31 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import '../../assets/index4.css';const a = "_icon_qj0vq_9", q = "_small_qj0vq_14", r = "_medium_qj0vq_18", t = "_large_qj0vq_22", c = {
+  "ckcl-copy": "_ckcl-copy_qj0vq_1",
+  icon: a,
+  small: q,
+  medium: r,
+  large: t
+};
+function j({
+  children: s,
+  Icon: l,
+  className: o = "",
+  size: m = "medium",
+  onClick: n,
+  ..._
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: `${o} ${c["ckcl-copy"]} ${c[m]}`,
+      ..._,
+      children: [
+        s,
+        /* @__PURE__ */ i("span", { className: c.icon, onClick: n, children: l })
+      ]
+    }
+  );
+}
+export {
+  j as Copy
+};

package/dist/components/Input/index.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import '../../assets/index.css';const r = {};
+import '../../assets/index3.css';const r = {};
 function c(t) {
   const { className: s, ...n } = t;
   return /* @__PURE__ */ o("input", { className: `${s} ${r.button}`, ...n });

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Switch } from './index';
+declare const meta: Meta<typeof Switch>;
+export default meta;
+type Story = StoryObj<typeof Switch>;
+export declare const DefaultSwitch: Story;
+export declare const CheckedSwitch: Story;
+export declare const DisabledSwitch: Story;
+export declare const DisabledCheckedSwitch: Story;
+//# sourceMappingURL=Switch.stories.d.ts.map

package/dist/components/Switch/Switch.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAG7B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,aAAa,EAAE,KAW3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAW3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAYnC,CAAC"}

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

@@ -0,0 +1,7 @@
+interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    checked: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare function Switch({ checked, onChange, className, disabled, ...restProps }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/index.tsx"],"names":[],"mappings":"AAEA,UAAU,WAAY,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,SAAc,EACd,QAAgB,EAChB,GAAG,SAAS,EACb,EAAE,WAAW,2CAeb"}

package/dist/components/Switch/index.js

@@ -0,0 +1,30 @@
+import { jsx as c, jsxs as i } from "react/jsx-runtime";
+import '../../assets/index2.css';const p = "_slider_1utaq_11", s = {
+  "ckcl-switch-wrapper": "_ckcl-switch-wrapper_1utaq_1",
+  "ckcl-switch": "_ckcl-switch_1utaq_1",
+  slider: p
+};
+function n({
+  checked: e,
+  onChange: l,
+  className: t = "",
+  disabled: r = !1,
+  ...a
+}) {
+  return /* @__PURE__ */ c("label", { className: `${s["ckcl-switch-wrapper"]} ${t}`, children: /* @__PURE__ */ i("span", { className: `${s["ckcl-switch"]}`, children: [
+    /* @__PURE__ */ c(
+      "input",
+      {
+        type: "checkbox",
+        checked: e,
+        onChange: l,
+        disabled: r,
+        ...a
+      }
+    ),
+    /* @__PURE__ */ c("span", { className: s.slider })
+  ] }) });
+}
+export {
+  n as Switch
+};

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Tag } from './index';
+declare const meta: Meta<typeof Tag>;
+export default meta;
+type Story = StoryObj<typeof Tag>;
+export declare const Neutral: Story;
+export declare const Error: Story;
+export declare const Success: Story;
+export declare const Inprogress: Story;
+export declare const Alert: Story;
+//# sourceMappingURL=Tag.stories.d.ts.map

package/dist/components/Tag/Tag.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,SAAS,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAG1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAElC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMjB,CAAC"}

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

@@ -0,0 +1,11 @@
+type TagStatus = "TIMEOUT" | "FAILED" | "RUNBOOK_TIMEOUT" | "COMPLETED" | "IN_PROGRESS" | "INITIATED";
+type AllStatuses = TagStatus | string;
+interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    tagStatus: AllStatuses;
+    children: React.ReactNode;
+    className?: string;
+    size?: "x-small" | "small" | "medium" | "large";
+}
+export declare function Tag({ tagStatus, children, className, size, ...restProps }: TagProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Tag/index.tsx"],"names":[],"mappings":"AAGA,KAAK,SAAS,GACV,SAAS,GACT,QAAQ,GACR,iBAAiB,GACjB,WAAW,GACX,aAAa,GACb,WAAW,CAAC;AAGhB,KAAK,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;AAGtC,UAAU,QAAS,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC9D,SAAS,EAAE,WAAW,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACjD;AAYD,wBAAgB,GAAG,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,SAAc,EACd,IAAe,EACf,GAAG,SAAS,EACb,EAAE,QAAQ,2CAyBV"}

package/dist/components/Tag/index.js

@@ -0,0 +1,40 @@
+import { jsx as o } from "react/jsx-runtime";
+import '../../assets/index.css';const g = "_small_1vgmh_16", n = "_medium_1vgmh_21", u = "_large_1vgmh_26", i = "_neutral_1vgmh_32", v = "_error_1vgmh_39", h = "_success_1vgmh_46", d = "_alert_1vgmh_60", s = {
+  "ckcl-tag": "_ckcl-tag_1vgmh_1",
+  "x-small": "_x-small_1vgmh_11",
+  small: g,
+  medium: n,
+  large: u,
+  neutral: i,
+  error: v,
+  success: h,
+  "in-progress": "_in-progress_1vgmh_53",
+  alert: d
+}, T = {
+  TIMEOUT: "error",
+  FAILED: "error",
+  RUNBOOK_TIMEOUT: "error",
+  COMPLETED: "success",
+  IN_PROGRESS: "in-progress",
+  INITIATED: "in-progress"
+};
+function E({
+  tagStatus: e,
+  children: c,
+  className: _ = "",
+  size: l = "medium",
+  ...m
+}) {
+  const t = T[e] || e || "neutral", a = (r) => r === "x-small" ? "ckcl-body-xs-reg" : r === "small" ? "ckcl-body-sm-reg" : r === "medium" || r === "large" ? "ckcl-body-lg-reg" : "";
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: `${_} ${s["ckcl-tag"]} ${s[t]} ${s[l]} ${a(l)}`,
+      ...m,
+      children: c
+    }
+  );
+}
+export {
+  E as Tag
+};

package/dist/main.d.ts

@@ -1,5 +1,7 @@
 export { Button } from './components/Button';
 export { Input } from './components/Input';
 export { Label } from './components/Label';
+export { Tag } from './components/Tag';
+export { Switch } from './components/Switch';
 export * from './theme/Theme';
 //# sourceMappingURL=main.d.ts.map

package/dist/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../lib/main.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,cAAc,eAAe,CAAC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../lib/main.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,cAAc,eAAe,CAAC"}

package/dist/main.js

@@ -1,10 +1,14 @@
 import { Button as e } from "./components/Button/index.js";
 import { Input as m } from "./components/Input/index.js";
 import { Label as f } from "./components/Label/index.js";
-import { CKThemeProvider as n } from "./theme/Theme.js";
+import { Tag as a } from "./components/Tag/index.js";
+import { Switch as i } from "./components/Switch/index.js";
+import { CKThemeProvider as u } from "./theme/Theme.js";
 export {
   e as Button,
-  n as CKThemeProvider,
+  u as CKThemeProvider,
   m as Input,
-  f as Label
+  f as Label,
+  i as Switch,
+  a as Tag
 };

package/dist/theme/theme.css

@@ -1 +1 @@
-:root{--ckcl-primary: #0d63fe;--ckcl-text: #ffffff;--ckcl-font-family: "Inter", sans-serif;--ckcl-radius: 6px;--ckcl-spacing-sm: 0.5rem;--ckcl-spacing-md: 1rem}
+:root{--ckcl-primary-600: #1058EC;--ckcl-primary-500: #3A72E4;--ckcl-primary-400: #89AAEF;--ckcl-primary-300: #B0C6F4;--ckcl-primary-200: #D8E3FA;--ckcl-primary-100: #F8FBFF;--ckcl-black-500: #2B2B2B;--ckcl-black-400: #808080;--ckcl-black-300: #AAAAAA;--ckcl-black-200: #D5D5D5;--ckcl-black-100: #F4F4F4;--ckcl-white: #FFFFFF;--ckcl-red-500: #DA1E28;--ckcl-red-400: #E9787E;--ckcl-red-300: #F0A5A9;--ckcl-red-200: #F8D2D4;--ckcl-red-100: #FDF4F4;--ckcl-yellow-500: #FFCC02;--ckcl-yellow-400: #FEEAA5;--ckcl-yellow-300: #FFF1C3;--ckcl-yellow-200: #FFF8E1;--ckcl-yellow-100: #FFFDF7;--ckcl-green-500: #24A147;--ckcl-green-400: #7CC791;--ckcl-green-300: #A7D9B5;--ckcl-green-200: #D3ECDA;--ckcl-green-100: #F4FAF6;--ckcl-font-family-base: Inter;--ckcl-fs-3xs: 10px;--ckcl-fs-2xs: 11px;--ckcl-fs-xs: 12px;--ckcl-fs-sm: 14px;--ckcl-fs-md: 16px;--ckcl-fs-lg: 18px;--ckcl-fs-xl: 24px;--ckcl-font-weight-regular: 400;--ckcl-font-weight-medium: 500;--ckcl-font-weight-semibold: 600;--ckcl-font-weight-bold: 700;--ckcl-leading-xs: 14px;--ckcl-leading-sm: 16px;--ckcl-leading-md: 19px;--ckcl-leading-lg: 22px;--ckcl-leading-xl: 25px;--ckcl-leading-2xl: 33px;--ckcl-spacing-2xs: 2px;--ckcl-spacing-xs: 4px;--ckcl-spacing-sm: 8px;--ckcl-spacing-md: 16px;--ckcl-spacing-slg: 20px;--ckcl-spacing-lg: 24px;--ckcl-spacing-xl: 28px;--ckcl-spacing-2xl: 32px;--ckcl-spacing-3xl: 48px;--ckcl-tag-neutral-bg: #F4F4F4;--ckcl-tag-neutral-border: #AAAAAA;--ckcl-tag-error-bg: #FDF4F4;--ckcl-tag-error-border: #E9787E;--ckcl-tag-success-bg: #F4FAF6;--ckcl-tag-success-border: #7CC791;--ckcl-tag-inprogress-bg: #F8FBFF;--ckcl-tag-inprogress-border: #B0C6F4;--ckcl-tag-alert-bg: #FFFDF7;--ckcl-tag-alert-border: #FEEAA5}[class*=ckcl]{box-sizing:border-box}body .ckcl-font-family-base{font-family:var(--ckcl-font-family-base, "Inter"),sans-serif}body .ckcl-h1-reg{font-size:var(--ckcl-fs-xl, 24px);font-weight:var(--ckcl-font-weight-regular, 400);line-height:var(--ckcl-leading-2xl, 33px)}body .ckcl-h1-med{font-size:var(--ckcl-fs-xl, 24px);font-weight:var(--ckcl-font-weight-medium, 500);line-height:var(--ckcl-leading-2xl, 33px)}body .ckcl-h1-semibold{font-size:var(--ckcl-fs-xl, 24px);font-weight:var(--ckcl-font-weight-semibold, 600);line-height:var(--ckcl-leading-2xl, 33px)}body .ckcl-h1-bold{font-size:var(--ckcl-fs-xl, 24px);font-weight:var(--ckcl-font-weight-bold, 700);line-height:var(--ckcl-leading-2xl, 33px)}body .ckcl-h2-reg{font-size:var(--ckcl-fs-lg, 18px);font-weight:var(--ckcl-font-weight-regular, 400);line-height:var(--ckcl-leading-xl, 25px)}body .ckcl-h2-med{font-size:var(--ckcl-fs-lg, 18px);font-weight:var(--ckcl-font-weight-medium, 500);line-height:var(--ckcl-leading-xl, 25px)}body .ckcl-h2-semibold{font-size:var(--ckcl-fs-lg, 18px);font-weight:var(--ckcl-font-weight-semibold, 600);line-height:var(--ckcl-leading-xl, 25px)}body .ckcl-h2-bold{font-size:var(--ckcl-fs-lg, 18px);font-weight:var(--ckcl-font-weight-bold, 700);line-height:var(--ckcl-leading-xl, 25px)}body .ckcl-h3-reg{font-size:var(--ckcl-fs-md, 16px);font-weight:var(--ckcl-font-weight-regular, 400);line-height:var(--ckcl-leading-lg, 22px)}body .ckcl-h3-med{font-size:var(--ckcl-fs-md, 16px);font-weight:var(--ckcl-font-weight-medium, 500);line-height:var(--ckcl-leading-lg, 22px)}body .ckcl-h3-semibold{font-size:var(--ckcl-fs-md, 16px);font-weight:var(--ckcl-font-weight-semibold, 600);line-height:var(--ckcl-leading-lg, 22px)}body .ckcl-h3-bold{font-size:var(--ckcl-fs-md, 16px);font-weight:var(--ckcl-font-weight-bold, 700);line-height:var(--ckcl-leading-lg, 22px)}body .ckcl-body-lg-reg{font-size:var(--ckcl-fs-sm, 14px);font-weight:var(--ckcl-font-weight-regular, 400);line-height:var(--ckcl-leading-md, 19px)}body .ckcl-body-lg-med{font-size:var(--ckcl-fs-sm, 14px);font-weight:var(--ckcl-font-weight-medium, 500);line-height:var(--ckcl-leading-md, 19px)}body .ckcl-body-lg-semibold{font-size:var(--ckcl-fs-sm, 14px);font-weight:var(--ckcl-font-weight-semibold, 600);line-height:var(--ckcl-leading-md, 19px)}body .ckcl-body-lg-bold{font-size:var(--ckcl-fs-sm, 14px);font-weight:var(--ckcl-font-weight-bold, 700);line-height:var(--ckcl-leading-md, 19px)}body .ckcl-body-sm-reg{font-size:var(--ckcl-fs-xs, 12px);font-weight:var(--ckcl-font-weight-regular, 400);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-body-sm-med{font-size:var(--ckcl-fs-xs, 12px);font-weight:var(--ckcl-font-weight-medium, 500);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-body-sm-semibold{font-size:var(--ckcl-fs-xs, 12px);font-weight:var(--ckcl-font-weight-semibold, 600);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-body-sm-bold{font-size:var(--ckcl-fs-xs, 12px);font-weight:var(--ckcl-font-weight-bold, 700);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-body-xs-reg{font-size:var(--ckcl-fs-2xs, 11px);font-weight:var(--ckcl-font-weight-regular, 400);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-body-xs-med{font-size:var(--ckcl-fs-2xs, 11px);font-weight:var(--ckcl-font-weight-medium, 500);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-body-xs-semibold{font-size:var(--ckcl-fs-2xs, 11px);font-weight:var(--ckcl-font-weight-semibold, 600);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-body-xs-bold{font-size:var(--ckcl-fs-2xs, 11px);font-weight:var(--ckcl-font-weight-bold, 700);line-height:var(--ckcl-leading-sm, 16px)}body .ckcl-cap-reg{font-size:var(--ckcl-fs-3xs, 10px);font-weight:var(--ckcl-font-weight-regular, 400);line-height:var(--ckcl-leading-xs, 14px)}body .ckcl-cap-med{font-size:var(--ckcl-fs-3xs, 10px);font-weight:var(--ckcl-font-weight-medium, 500);line-height:var(--ckcl-leading-xs, 14px)}body .ckcl-cap-semibold{font-size:var(--ckcl-fs-3xs, 10px);font-weight:var(--ckcl-font-weight-semibold, 600);line-height:var(--ckcl-leading-xs, 14px)}body .ckcl-cap-bold{font-size:var(--ckcl-fs-3xs, 10px);font-weight:var(--ckcl-font-weight-bold, 700);line-height:var(--ckcl-leading-xs, 14px)}body .ckcl-primary-600{color:var(--ckcl-primary-600, #1058EC)}body .ckcl-primary-500{color:var(--ckcl-primary-500, #3A72E4)}body .ckcl-primary-400{color:var(--ckcl-primary-400, #89AAEF)}body .ckcl-primary-300{color:var(--ckcl-primary-300, #B0C6F4)}body .ckcl-primary-200{color:var(--ckcl-primary-200, #D8E3FA)}body .ckcl-primary-100{color:var(--ckcl-primary-100, #F8FBFF)}body .ckcl-black-500{color:var(--ckcl-black-500, #2B2B2B)}body .ckcl-black-400{color:var(--ckcl-black-400, #808080)}body .ckcl-black-300{color:var(--ckcl-primary-300, #B0C6F4)}body .ckcl-black-200{color:var(--ckcl-primary-200, #D8E3FA)}body .ckcl-black-100{color:var(--ckcl-primary-100, #F8FBFF)}body .ckcl-white{color:var(--ckcl-white, #FFFFFF)}body .ckcl-red-500{color:var(--ckcl-red-500, #DA1E28)}body .ckcl-red-400{color:var(--ckcl-red-400, #E9787E)}body .ckcl-red-300{color:var(--ckcl-red-300, #F0A5A9)}body .ckcl-red-200{color:var(--ckcl-red-200, #F8D2D4)}body .ckcl-red-100{color:var(--ckcl-red-100, #FDF4F4)}body .ckcl-yellow-500{color:var(--ckcl-yellow-500, #FFCC02)}body .ckcl-yellow-400{color:var(--ckcl-yellow-400, #FEEAA5)}body .ckcl-yellow-300{color:var(--ckcl-yellow-300, #FFF1C3)}body .ckcl-yellow-200{color:var(--ckcl-yellow-200, #FFF8E1)}body .ckcl-yellow-100{color:var(--ckcl-yellow-100, #FFFDF7)}body .ckcl-green-500{color:var(--ckcl-green-500, #24A147)}body .ckcl-green-400{color:var(--ckcl-green-400, #7CC791)}body .ckcl-green-300{color:var(--ckcl-green-300, #A7D9B5)}body .ckcl-green-200{color:var(--ckcl-green-200, #D3ECDA)}body .ckcl-green-100{color:var(--ckcl-green-100, #F4FAF6)}body .ckcl-fs-3xs{font-size:var(--ckcl-fs-3xs, 10px)}body .ckcl-fs-2xs{font-size:var(--ckcl-fs-2xs, 11px)}body .ckcl-fs-xs{font-size:var(--ckcl-fs-xs, 12px)}body .ckcl-fs-sm{font-size:var(--ckcl-fs-sm, 14px)}body .ckcl-fs-md{font-size:var(--ckcl-fs-md, 16px)}body .ckcl-fs-lg{font-size:var(--ckcl-fs-lg, 18px)}body .ckcl-fs-xl{font-size:var(--ckcl-fs-xl, 24px)}body .ckcl-primary-bg-600{background-color:var(--ckcl-primary-600, #1058EC)}body .ckcl-primary-bg-500{background-color:var(--ckcl-primary-500, #3A72E4)}body .ckcl-primary-bg-400{background-color:var(--ckcl-primary-400, #89AAEF)}body .ckcl-primary-bg-300{background-color:var(--ckcl-primary-300, #B0C6F4)}body .ckcl-primary-bg-200{background-color:var(--ckcl-primary-200, #D8E3FA)}body .ckcl-primary-bg-100{background-color:var(--ckcl-primary-100, #F8FBFF)}body .ckcl-black-bg-500{background-color:var(--ckcl-black-500, #2B2B2B)}body .ckcl-black-bg-400{background-color:var(--ckcl-black-400, #808080)}body .ckcl-black-bg-300{background-color:var(--ckcl-primary-300, #B0C6F4)}body .ckcl-black-bg-200{background-color:var(--ckcl-primary-200, #D8E3FA)}body .ckcl-black-bg-100{background-color:var(--ckcl-primary-100, #F8FBFF)}body .ckcl-red-bg-500{background-color:var(--ckcl-red-500, #DA1E28)}body .ckcl-red-bg-400{background-color:var(--ckcl-red-400, #E9787E)}body .ckcl-red-bg-300{background-color:var(--ckcl-red-300, #F0A5A9)}body .ckcl-red-bg-200{background-color:var(--ckcl-red-200, #F8D2D4)}body .ckcl-red-bg-100{background-color:var(--ckcl-red-100, #FDF4F4)}body .ckcl-yellow-bg-500{background-color:var(--ckcl-yellow-500, #FFCC02)}body .ckcl-yellow-bg-400{background-color:var(--ckcl-yellow-400, #FEEAA5)}body .ckcl-yellow-bg-300{background-color:var(--ckcl-yellow-300, #FFF1C3)}body .ckcl-yellow-bg-200{background-color:var(--ckcl-yellow-200, #FFF8E1)}body .ckcl-yellow-bg-100{background-color:var(--ckcl-yellow-100, #FFFDF7)}body .ckcl-green-bg-500{background-color:var(--ckcl-green-500, #24A147)}body .ckcl-green-bg-400{background-color:var(--ckcl-green-400, #7CC791)}body .ckcl-green-bg-300{background-color:var(--ckcl-green-300, #A7D9B5)}body .ckcl-green-bg-200{background-color:var(--ckcl-green-200, #D3ECDA)}body .ckcl-green-bg-100{background-color:var(--ckcl-green-100, #F4FAF6)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ck-ui/component-library",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -14,6 +14,7 @@
   ],
   "scripts": {
     "dev": "vite",
+    "dev:lib": "vite build --watch",
     "build": "tsc -b ./tsconfig.lib.json && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
@@ -21,7 +22,9 @@
     "version:patch": "npm version patch && npm run publish:org",
     "version:minor": "npm version minor && npm run publish:org",
     "version:major": "npm version major && npm run publish:org",
-    "publish:org": "npm publish --access public"
+    "publish:org": "npm publish --access public",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "publishConfig": {
     "access": "public"
@@ -35,6 +38,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/react-vite": "^9.0.17",
     "@types/node": "^24.0.13",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2",
@@ -42,9 +47,13 @@
     "eslint": "^9.30.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-storybook": "^9.0.17",
     "glob": "^11.0.3",
     "globals": "^16.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.89.2",
+    "storybook": "^9.0.17",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",
     "vite": "^7.0.4",