@tetjana/flowmakers-ds 0.1.5 → 0.1.7

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

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

package/dist/components/Checkbox.figma.d.ts

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

package/dist/components/Input.figma.d.ts

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

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

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

package/dist/components/Toggle.figma.d.ts

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

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+import './tokens/colors.css';
+import './tokens/typography.css';
+import './tokens/spacing.css';
 export { Button } from './components/Button';
 export { Input } from './components/Input';
 export { Tag } from './components/Tag';

package/dist/styles.css

@@ -1 +1 @@
-.fm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;cursor:pointer;font-family:Nunito Sans,sans-serif;font-weight:700;font-size:14px;line-height:1;white-space:nowrap;transition:background .15s,border-color .15s,border-width .15s,opacity .15s,box-shadow .15s;text-decoration:none;box-sizing:border-box;position:relative}.fm-btn--sm{height:32px;padding:0 12px;border-radius:10px;font-size:12px}.fm-btn--md{height:42px;padding:10px 16px;border-radius:12px}.fm-btn--lg{height:52px;padding:12px 24px;border-radius:12px;font-size:16px}.fm-btn--full{width:100%}.fm-btn--primary{background:#121212;color:#fff;border:none}.fm-btn--primary:hover:not(:disabled){background:#121212;box-shadow:inset 0 0 0 100px #ffffff0d}.fm-btn--primary:active:not(:disabled){background:#2a2a2a}.fm-btn--primary:focus-visible{outline:2px solid #ffa8f1;outline-offset:2px}.fm-btn--hero{background:#121212;color:#fff;border:1.5px solid transparent;padding:10px 16px;border-radius:12px;height:42px}.fm-btn--hero:hover:not(:disabled){border-color:#ffa8f1;background:#121212}.fm-btn--hero:active:not(:disabled){border-color:#ffa8f1;background:#121212}.fm-btn--hero:focus-visible{border-color:#ffa8f1;outline:none}.fm-btn--hero:disabled{background:#dcdcdc;color:#91939f;border-color:transparent}.fm-btn--secondary{background:#fff;color:#18181b;border:1px solid #d9d9de;border-radius:12px;height:42px;padding:10px 16px}.fm-btn--secondary:hover:not(:disabled){border-width:1.5px;border-color:#ffa8f1;background:#fff}.fm-btn--secondary:active:not(:disabled){border-width:1px;border-color:#ffa8f1;background:#f7f7f8}.fm-btn--secondary:focus-visible{border-width:1px;border-color:#ffa8f1;outline:none;background:#fff}.fm-btn--secondary:disabled{color:#91939f;border-color:#d9d9de;border-width:1px;background:#fff;cursor:not-allowed}.fm-btn--secondary-large{background:#fff;color:#18181b;border:1px solid #d9d9de;border-radius:12px;height:52px;padding:12px 24px;font-size:16px}.fm-btn--secondary-large:hover:not(:disabled){border-width:1.5px;border-color:#ffa8f1;background:#fff}.fm-btn--secondary-large:active:not(:disabled){border-width:1px;border-color:#ffa8f1;background:#f7f7f8}.fm-btn--secondary-large:focus-visible{border-width:1px;border-color:#ffa8f1;outline:none;background:#fff}.fm-btn--secondary-large:disabled{color:#91939f;border-color:#d9d9de;border-width:1px;background:#fff;cursor:not-allowed}.fm-btn--ghost{background:transparent;color:#18181b;border:none}.fm-btn--ghost:hover:not(:disabled){background:#f7f7f8}.fm-btn--ghost:active:not(:disabled){background:#eeeef0}.fm-btn--ghost-icon{background:transparent;color:#18181b;border:none;padding:8px;border-radius:10px;height:auto}.fm-btn--ghost-icon:hover:not(:disabled){background:#f7f7f8}.fm-btn--disabled,.fm-btn:disabled{cursor:not-allowed;opacity:1}.fm-btn__icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}.fm-input-wrapper{display:flex;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.fm-input__label{font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:400;color:#5d5e6c;line-height:1.4;white-space:nowrap}.fm-input__field{display:flex;align-items:center;gap:8px;height:42px;padding:10px 16px;border-radius:12px;border:1px solid #b8b9c1;background:#fff;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;width:100%}.fm-input__el{flex:1;border:none;outline:none;background:transparent;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4;min-width:0}.fm-input__el::placeholder{color:#b8b9c1}.fm-input-wrapper--hover .fm-input__field{border-color:#5d5e6c;box-shadow:0 4px 5.3px #d9d9de}.fm-input-wrapper--focused .fm-input__field{border-color:#ffa8f1}.fm-input-wrapper--filled .fm-input__field{border-color:#5d5e6c}.fm-input-wrapper--error .fm-input__field{border-color:#ff383c}.fm-input-wrapper--success .fm-input__field{border-color:#34c759}.fm-input-wrapper--disabled .fm-input__field{background:#f7f7f8;cursor:not-allowed;border-color:#b8b9c1}.fm-input-wrapper--disabled .fm-input__el{cursor:not-allowed;color:#91939f}.fm-input__el:focus{outline:none}.fm-input__field:focus-within{border-color:#ffa8f1}.fm-input-wrapper--error .fm-input__field:focus-within{border-color:#ff383c}.fm-input-wrapper--success .fm-input__field:focus-within{border-color:#34c759}.fm-input__icon{display:inline-flex;align-items:center;color:#b8b9c1;flex-shrink:0}.fm-input__message{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:400;line-height:1.2;margin:0}.fm-input__message--error{color:#ff383c}.fm-input__message--success{color:#34c759}.fm-tag{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:9999px;font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap;box-sizing:border-box}.fm-tag--grey{background:#eeeef0;color:#4c4d58}.fm-tag--green{background:#d9f2e7;color:#1b6153}.fm-tag--yellow{background:#fff0d4;color:#c54e09}.fm-tag--purple{background:#eeecfb;color:#6d45bc}.fm-tag--pink{background:#ffe7fc;color:#b51692}.fm-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.fm-toggle__input{position:absolute;opacity:0;width:0;height:0}.fm-toggle__track{position:relative;width:64px;height:28px;border-radius:100px;background:#d9d9de;transition:background .25s;flex-shrink:0;overflow:hidden}.fm-toggle__input:checked~.fm-toggle__track{background:linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc)}.fm-toggle__thumb{position:absolute;top:50%;transform:translateY(-50%);left:2px;width:24px;height:24px;border-radius:100px;background:#fff;transition:left .25s;box-shadow:0 1px 3px #00000026}.fm-toggle__input:checked~.fm-toggle__track .fm-toggle__thumb{left:calc(100% - 26px)}.fm-toggle--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.fm-toggle__label{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4}.fm-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.fm-checkbox__input{position:absolute;opacity:0;width:0;height:0}.fm-checkbox__box{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;border:1.5px solid #b8b9c1;background:#fff;flex-shrink:0;overflow:hidden;transition:background .15s,border-color .15s;box-sizing:border-box}.fm-checkbox--large .fm-checkbox__box{width:22px;height:22px;border-radius:6px}.fm-checkbox__input:checked+.fm-checkbox__box{background:#0d6fff;border-color:#0d6fff}.fm-checkbox__input:indeterminate+.fm-checkbox__box{background:#0d6fff;border-color:#0d6fff}.fm-checkbox__minus{width:10px;height:2px;background:#fff;border-radius:1px}.fm-checkbox:not(.fm-checkbox--disabled):hover .fm-checkbox__box{border-color:#5d5e6c}.fm-checkbox--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.fm-checkbox__label{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4}.fm-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-m, 16px);border-radius:var(--radius-xl, 20px) var(--radius-xl, 20px) 0 0;width:100%}.fm-header--purple{background:var(--primary-fill-100, #eeecfb)}.fm-header--grey{background:var(--nature-fill-50, #f7f7f8)}.fm-header__slot{display:flex;align-items:center}.fm-header__title-block{display:flex;flex-direction:column;gap:var(--space-xs, 8px);flex:1;padding:0 var(--space-xs, 8px)}.fm-header__title{font-family:var(--font-family-headings, "Manrope", sans-serif);font-size:var(--font-size-18, 18px);font-weight:var(--weight-bold, 700);color:var(--bw-fill-black, #121212);line-height:.9;margin:0}.fm-header__subtitle{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-medium, 400);color:var(--bw-fill-400, #989898);line-height:1.4;margin:0}.fm-footer{display:flex;flex-direction:column;width:100%}.fm-footer--light{background:var(--nature-fill-50, #f7f7f8);color:var(--bw-fill-black, #121212)}.fm-footer--dark{background:var(--nature-fill-950, #18181b);color:#ffffffbf}.fm-footer__top{display:flex;gap:var(--space-3xl, 48px);padding:var(--space-xl, 24px);align-items:flex-start}.fm-footer__cta-block{display:flex;flex-direction:column;gap:var(--space-xl, 24px);flex-shrink:0}.fm-footer__headline{font-family:var(--font-family-headings, "Manrope", sans-serif);font-size:var(--font-size-30, 30px);font-weight:var(--weight-bold, 700);line-height:.94;margin:0}.fm-footer__cta-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 var(--space-m, 16px);border-radius:var(--radius-m, 12px);font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-bold, 700);cursor:pointer;transition:background .15s}.fm-footer--light .fm-footer__cta-btn{background:var(--bw-fill-black, #121212);color:var(--bw-fill-white, #ffffff);border:none}.fm-footer--dark .fm-footer__cta-btn{background:transparent;color:#ffffffbf;border:1.5px solid var(--pink-fill-300, #ffa8f1)}.fm-footer__sections{display:flex;gap:var(--space-3xl, 48px);flex:1;justify-content:space-between;flex-wrap:wrap}.fm-footer__section{display:flex;flex-direction:column;gap:var(--space-xl, 24px)}.fm-footer__section-title{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-16, 16px);font-weight:var(--weight-semibold, 600);margin:0}.fm-footer__section-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-m, 16px)}.fm-footer__link{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-light, 300);text-decoration:none;line-height:1.4;color:inherit}.fm-footer__link:hover{text-decoration:underline}.fm-footer__bottom{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xl, 24px);border-top:1px solid rgba(255,255,255,.05)}.fm-footer__copyright{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-medium, 400);line-height:1.4;margin:0}
+:root{--bw-fill-white: #ffffff;--bw-fill-black: #121212;--bw-fill-50: #f7f7f8;--bw-fill-100: #eeeef0;--bw-fill-200: #dcdcdc;--bw-fill-300: #b8b9c1;--bw-fill-400: #989898;--bw-fill-500: #7c7c7c;--bw-fill-600: #5d5e6c;--bw-fill-700: #4c4d58;--bw-fill-950: #18181b;--bw-transparent-white-5: rgba(255,255,255,.05);--bw-transparent-white-75: rgba(255,255,255,.75);--primary-fill-100: #eeecfb;--primary-fill-200: #d8d3f6;--primary-fill-300: #b9aff0;--primary-fill-400: #9b8ae9;--primary-fill-500: #7d65e1;--primary-fill-600: #6d45bc;--primary-fill-700: #6d45bc;--primary-fill-800: #4e2f8e;--primary-fill-900: #2f1a60;--pink-fill-100: #ffe7fc;--pink-fill-200: #ffcef9;--pink-fill-300: #ffa8f1;--pink-fill-400: #ff7de7;--pink-fill-500: #e040d0;--pink-fill-600: #c620b8;--pink-fill-700: #b51692;--green-fill-100: #d9f2e7;--green-fill-200: #b3e5cf;--green-fill-300: #7dd1ae;--green-fill-400: #47bc8d;--green-fill-500: #27a872;--green-fill-600: #1e8a5d;--green-fill-700: #1b6153;--yellow-fill-100: #fff0d4;--yellow-fill-200: #ffe0a8;--yellow-fill-300: #ffc96b;--yellow-fill-400: #ffb02e;--yellow-fill-500: #f59100;--yellow-fill-600: #d97400;--yellow-fill-700: #c54e09;--nature-fill-50: #f7f7f8;--nature-fill-100: #eeeef0;--nature-fill-200: #dcdcde;--nature-fill-300: #b8b9c1;--nature-fill-400: #989898;--nature-fill-500: #7c7c7c;--nature-fill-600: #5d5e6c;--nature-fill-700: #4c4d58;--nature-fill-800: #2e2f3a;--nature-fill-900: #1e1f28;--nature-fill-950: #18181b}:root{--font-family-headings: "Manrope", sans-serif;--font-family-body: "Nunito Sans", sans-serif;--font-size-10: 10px;--font-size-12: 12px;--font-size-14: 14px;--font-size-16: 16px;--font-size-18: 18px;--font-size-20: 20px;--font-size-24: 24px;--font-size-30: 30px;--font-size-36: 36px;--font-size-48: 48px;--weight-light: 300;--weight-regular: 400;--weight-medium: 400;--weight-semibold: 600;--weight-bold: 700;--line-height-tight: .9;--line-height-snug: 1;--line-height-normal: 1.2;--line-height-relaxed:1.4}.text-display{font-family:var(--font-family-headings);font-size:var(--font-size-48);font-weight:var(--weight-bold);line-height:var(--line-height-tight)}.text-h1{font-family:var(--font-family-headings);font-size:var(--font-size-36);font-weight:var(--weight-bold);line-height:var(--line-height-tight)}.text-h2{font-family:var(--font-family-headings);font-size:var(--font-size-30);font-weight:var(--weight-bold);line-height:.94}.text-h3{font-family:var(--font-family-headings);font-size:var(--font-size-24);font-weight:var(--weight-bold);line-height:var(--line-height-tight)}.text-h4{font-family:var(--font-family-headings);font-size:var(--font-size-18);font-weight:var(--weight-bold);line-height:var(--line-height-tight)}.text-body-lg{font-family:var(--font-family-body);font-size:var(--font-size-16);font-weight:var(--weight-medium);line-height:var(--line-height-relaxed)}.text-body-md{font-family:var(--font-family-body);font-size:var(--font-size-14);font-weight:var(--weight-medium);line-height:var(--line-height-relaxed)}.text-body-sm{font-family:var(--font-family-body);font-size:var(--font-size-12);font-weight:var(--weight-medium);line-height:var(--line-height-normal)}.text-subtitle{font-family:var(--font-family-body);font-size:var(--font-size-16);font-weight:var(--weight-semibold);line-height:1}.text-button{font-family:var(--font-family-body);font-size:var(--font-size-14);font-weight:var(--weight-bold);line-height:1}.text-tiny{font-family:var(--font-family-body);font-size:var(--font-size-12);font-weight:var(--weight-bold);line-height:var(--line-height-normal)}:root{--space-xxs: 4px;--space-xs: 8px;--space-s: 10px;--space-sm: 12px;--space-m: 16px;--space-l: 20px;--space-xl: 24px;--space-2xl: 32px;--space-3xl: 48px;--radius-xs: 8px;--radius-s: 10px;--radius-m: 12px;--radius-l: 16px;--radius-xl: 20px;--radius-full: 9999px}.fm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;cursor:pointer;font-family:Nunito Sans,sans-serif;font-weight:700;font-size:14px;line-height:1;white-space:nowrap;transition:background .15s,border-color .15s,border-width .15s,opacity .15s,box-shadow .15s;text-decoration:none;box-sizing:border-box;position:relative}.fm-btn--sm{height:32px;padding:0 12px;border-radius:10px;font-size:12px}.fm-btn--md{height:42px;padding:10px 16px;border-radius:12px}.fm-btn--lg{height:52px;padding:12px 24px;border-radius:12px;font-size:16px}.fm-btn--full{width:100%}.fm-btn--primary{background:#121212;color:#fff;border:none}.fm-btn--primary:hover:not(:disabled){background:#121212;box-shadow:inset 0 0 0 100px #ffffff0d}.fm-btn--primary:active:not(:disabled){background:#2a2a2a}.fm-btn--primary:focus-visible{outline:2px solid #ffa8f1;outline-offset:2px}.fm-btn--hero{background:#121212;color:#fff;border:1.5px solid transparent;padding:10px 16px;border-radius:12px;height:42px}.fm-btn--hero:hover:not(:disabled){border-color:#ffa8f1;background:#121212}.fm-btn--hero:active:not(:disabled){border-color:#ffa8f1;background:#121212}.fm-btn--hero:focus-visible{border-color:#ffa8f1;outline:none}.fm-btn--hero:disabled{background:#dcdcdc;color:#91939f;border-color:transparent}.fm-btn--secondary{background:#fff;color:#18181b;border:1px solid #d9d9de;border-radius:12px;height:42px;padding:10px 16px}.fm-btn--secondary:hover:not(:disabled){border-width:1.5px;border-color:#ffa8f1;background:#fff}.fm-btn--secondary:active:not(:disabled){border-width:1px;border-color:#ffa8f1;background:#f7f7f8}.fm-btn--secondary:focus-visible{border-width:1px;border-color:#ffa8f1;outline:none;background:#fff}.fm-btn--secondary:disabled{color:#91939f;border-color:#d9d9de;border-width:1px;background:#fff;cursor:not-allowed}.fm-btn--secondary-large{background:#fff;color:#18181b;border:1px solid #d9d9de;border-radius:12px;height:52px;padding:12px 24px;font-size:16px}.fm-btn--secondary-large:hover:not(:disabled){border-width:1.5px;border-color:#ffa8f1;background:#fff}.fm-btn--secondary-large:active:not(:disabled){border-width:1px;border-color:#ffa8f1;background:#f7f7f8}.fm-btn--secondary-large:focus-visible{border-width:1px;border-color:#ffa8f1;outline:none;background:#fff}.fm-btn--secondary-large:disabled{color:#91939f;border-color:#d9d9de;border-width:1px;background:#fff;cursor:not-allowed}.fm-btn--ghost{background:transparent;color:#18181b;border:none}.fm-btn--ghost:hover:not(:disabled){background:#f7f7f8}.fm-btn--ghost:active:not(:disabled){background:#eeeef0}.fm-btn--ghost-icon{background:transparent;color:#18181b;border:none;padding:8px;border-radius:10px;height:auto}.fm-btn--ghost-icon:hover:not(:disabled){background:#f7f7f8}.fm-btn--disabled,.fm-btn:disabled{cursor:not-allowed;opacity:1}.fm-btn__icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}.fm-input-wrapper{display:flex;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.fm-input__label{font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:400;color:#5d5e6c;line-height:1.4;white-space:nowrap}.fm-input__field{display:flex;align-items:center;gap:8px;height:42px;padding:10px 16px;border-radius:12px;border:1px solid #b8b9c1;background:#fff;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;width:100%}.fm-input__el{flex:1;border:none;outline:none;background:transparent;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4;min-width:0}.fm-input__el::placeholder{color:#b8b9c1}.fm-input-wrapper--hover .fm-input__field{border-color:#5d5e6c;box-shadow:0 4px 5.3px #d9d9de}.fm-input-wrapper--focused .fm-input__field{border-color:#ffa8f1}.fm-input-wrapper--filled .fm-input__field{border-color:#5d5e6c}.fm-input-wrapper--error .fm-input__field{border-color:#ff383c}.fm-input-wrapper--success .fm-input__field{border-color:#34c759}.fm-input-wrapper--disabled .fm-input__field{background:#f7f7f8;cursor:not-allowed;border-color:#b8b9c1}.fm-input-wrapper--disabled .fm-input__el{cursor:not-allowed;color:#91939f}.fm-input__el:focus{outline:none}.fm-input__field:focus-within{border-color:#ffa8f1}.fm-input-wrapper--error .fm-input__field:focus-within{border-color:#ff383c}.fm-input-wrapper--success .fm-input__field:focus-within{border-color:#34c759}.fm-input__icon{display:inline-flex;align-items:center;color:#b8b9c1;flex-shrink:0}.fm-input__message{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:400;line-height:1.2;margin:0}.fm-input__message--error{color:#ff383c}.fm-input__message--success{color:#34c759}.fm-tag{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:9999px;font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap;box-sizing:border-box}.fm-tag--grey{background:#eeeef0;color:#4c4d58}.fm-tag--green{background:#d9f2e7;color:#1b6153}.fm-tag--yellow{background:#fff0d4;color:#c54e09}.fm-tag--purple{background:#eeecfb;color:#6d45bc}.fm-tag--pink{background:#ffe7fc;color:#b51692}.fm-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.fm-toggle__input{position:absolute;opacity:0;width:0;height:0}.fm-toggle__track{position:relative;width:64px;height:28px;border-radius:100px;background:#d9d9de;transition:background .25s;flex-shrink:0;overflow:hidden}.fm-toggle__input:checked~.fm-toggle__track{background:linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc)}.fm-toggle__thumb{position:absolute;top:50%;transform:translateY(-50%);left:2px;width:24px;height:24px;border-radius:100px;background:#fff;transition:left .25s;box-shadow:0 1px 3px #00000026}.fm-toggle__input:checked~.fm-toggle__track .fm-toggle__thumb{left:calc(100% - 26px)}.fm-toggle--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.fm-toggle__label{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4}.fm-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.fm-checkbox__input{position:absolute;opacity:0;width:0;height:0}.fm-checkbox__box{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;border:1.5px solid #b8b9c1;background:#fff;flex-shrink:0;overflow:hidden;transition:background .15s,border-color .15s;box-sizing:border-box}.fm-checkbox--large .fm-checkbox__box{width:22px;height:22px;border-radius:6px}.fm-checkbox__input:checked+.fm-checkbox__box{background:#0d6fff;border-color:#0d6fff}.fm-checkbox__input:indeterminate+.fm-checkbox__box{background:#0d6fff;border-color:#0d6fff}.fm-checkbox__minus{width:10px;height:2px;background:#fff;border-radius:1px}.fm-checkbox:not(.fm-checkbox--disabled):hover .fm-checkbox__box{border-color:#5d5e6c}.fm-checkbox--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.fm-checkbox__label{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4}.fm-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-m, 16px);border-radius:var(--radius-xl, 20px) var(--radius-xl, 20px) 0 0;width:100%}.fm-header--purple{background:var(--primary-fill-100, #eeecfb)}.fm-header--grey{background:var(--nature-fill-50, #f7f7f8)}.fm-header__slot{display:flex;align-items:center}.fm-header__title-block{display:flex;flex-direction:column;gap:var(--space-xs, 8px);flex:1;padding:0 var(--space-xs, 8px)}.fm-header__title{font-family:var(--font-family-headings, "Manrope", sans-serif);font-size:var(--font-size-18, 18px);font-weight:var(--weight-bold, 700);color:var(--bw-fill-black, #121212);line-height:.9;margin:0}.fm-header__subtitle{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-medium, 400);color:var(--bw-fill-400, #989898);line-height:1.4;margin:0}.fm-footer{display:flex;flex-direction:column;width:100%}.fm-footer--light{background:var(--nature-fill-50, #f7f7f8);color:var(--bw-fill-black, #121212)}.fm-footer--dark{background:var(--nature-fill-950, #18181b);color:#ffffffbf}.fm-footer__top{display:flex;gap:var(--space-3xl, 48px);padding:var(--space-xl, 24px);align-items:flex-start}.fm-footer__cta-block{display:flex;flex-direction:column;gap:var(--space-xl, 24px);flex-shrink:0}.fm-footer__headline{font-family:var(--font-family-headings, "Manrope", sans-serif);font-size:var(--font-size-30, 30px);font-weight:var(--weight-bold, 700);line-height:.94;margin:0}.fm-footer__cta-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 var(--space-m, 16px);border-radius:var(--radius-m, 12px);font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-bold, 700);cursor:pointer;transition:background .15s}.fm-footer--light .fm-footer__cta-btn{background:var(--bw-fill-black, #121212);color:var(--bw-fill-white, #ffffff);border:none}.fm-footer--dark .fm-footer__cta-btn{background:transparent;color:#ffffffbf;border:1.5px solid var(--pink-fill-300, #ffa8f1)}.fm-footer__sections{display:flex;gap:var(--space-3xl, 48px);flex:1;justify-content:space-between;flex-wrap:wrap}.fm-footer__section{display:flex;flex-direction:column;gap:var(--space-xl, 24px)}.fm-footer__section-title{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-16, 16px);font-weight:var(--weight-semibold, 600);margin:0}.fm-footer__section-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-m, 16px)}.fm-footer__link{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-light, 300);text-decoration:none;line-height:1.4;color:inherit}.fm-footer__link:hover{text-decoration:underline}.fm-footer__bottom{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xl, 24px);border-top:1px solid rgba(255,255,255,.05)}.fm-footer__copyright{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-medium, 400);line-height:1.4;margin:0}

package/guidelines/Guidelines.md

@@ -0,0 +1,36 @@
+# FlowMakers Design System Guidelines
+
+This project uses the **FlowMakers Design System** installed via `@tetjana/flowmakers-ds`.
+
+## IMPORTANT — Always read first:
+- All files starting with `overview-` in this folder
+- All files in the `design-tokens/` folder:
+  - `design-tokens/colors.md`
+  - `design-tokens/typography.md`
+  - `design-tokens/spacing.md`
+
+## Read before using a component:
+Open `guidelines/components/{ComponentName}.md` BEFORE writing any code with that component.
+
+## Available components
+- `Button` → `guidelines/components/button.md`
+- `Input` → `guidelines/components/input.md`
+- `Tag` → `guidelines/components/tag.md`
+- `Toggle` → `guidelines/components/toggle.md`
+- `Checkbox` → `guidelines/components/checkbox.md`
+- `Header` → `guidelines/components/header.md`
+- `Footer` → `guidelines/components/footer.md`
+
+## Rules
+1. **Always prefer FlowMakers components** over native HTML elements (e.g. use `<Button>` not `<button>`)
+2. **Never override component styles** with inline styles or className unless strictly necessary
+3. **Always use CSS variables** from the design tokens for colors, spacing, and typography
+4. **Fonts**: Manrope (headings) and Nunito Sans (body/UI) — import from Google Fonts
+5. **Always import styles**: `import '@tetjana/flowmakers-ds/styles'` must be in the entry file
+
+## Steps before writing code
+1. Read `overview-components.md`
+2. Read all files in `design-tokens/`
+3. Identify which components you need
+4. Read each component's `.md` file in `guidelines/components/`
+5. Write the code using only FlowMakers components and tokens

package/guidelines/components/button.md

@@ -0,0 +1,50 @@
+# Button
+
+**Import**: `import { Button } from '@tetjana/flowmakers-ds'`
+
+## Variants
+| Variant          | Appearance                          | Use for                          |
+|------------------|-------------------------------------|----------------------------------|
+| `primary`        | Black bg, white text                | Main CTA actions                 |
+| `hero`           | Black bg, pink border on hover      | Landing page main CTA            |
+| `secondary`      | Transparent, black border           | Secondary actions                |
+| `secondary-large`| Same but taller (52px)              | Prominent secondary actions      |
+| `ghost`          | No border, no bg                    | Tertiary, low-emphasis actions   |
+| `ghost-icon`     | Icon-only ghost button              | Toolbar icons, small actions     |
+
+## Sizes
+| Size  | Height | Use for              |
+|-------|--------|----------------------|
+| `sm`  | 32px   | Compact UI, tables   |
+| `md`  | 42px   | Default (most cases) |
+| `lg`  | 52px   | Landing pages        |
+
+## Props
+| Prop        | Type            | Default     | Description               |
+|-------------|-----------------|-------------|---------------------------|
+| `variant`   | ButtonVariant   | `'primary'` | Visual style              |
+| `size`      | ButtonSize      | `'md'`      | Height/padding            |
+| `leftIcon`  | ReactNode       | —           | Icon before text          |
+| `rightIcon` | ReactNode       | —           | Icon after text           |
+| `fullWidth` | boolean         | `false`     | Stretch to container      |
+| `disabled`  | boolean         | `false`     | Disabled state            |
+
+## Examples
+```tsx
+// Primary
+<Button>Почати тренування</Button>
+
+// Secondary with icon
+<Button variant="secondary" leftIcon={<PlusIcon />}>Додати</Button>
+
+// Disabled
+<Button disabled>Недоступно</Button>
+
+// Full width
+<Button fullWidth>Зареєструватись</Button>
+```
+
+## Do NOT
+- Do not use native `<button>` — always use `<Button>`
+- Do not add className to change colors
+- Do not use `primary` for destructive actions — use a red-tinted secondary instead

package/guidelines/components/checkbox.md

@@ -0,0 +1,51 @@
+# Checkbox
+
+**Import**: `import { Checkbox } from '@tetjana/flowmakers-ds'`
+
+## Description
+Чекбокс для вибору одного або кількох варіантів. Підтримує indeterminate стан.
+
+## Props
+| Prop            | Type                       | Required | Default   | Description                          |
+|-----------------|----------------------------|----------|-----------|--------------------------------------|
+| `checked`       | boolean                    | no       | `false`   | Checked state                        |
+| `indeterminate` | boolean                    | no       | `false`   | Mixed state (overrides checked icon) |
+| `onChange`      | (checked: boolean) => void | no       | —         | Called when user clicks              |
+| `label`         | string                     | no       | —         | Text label next to checkbox          |
+| `size`          | `'small'` \| `'large'`    | no       | `'small'` | Box size (16px vs 22px)              |
+| `disabled`      | boolean                    | no       | `false`   | Prevents interaction                 |
+
+## Visual
+- **Unchecked** → white box, grey border
+- **Checked** → blue fill (`#0d6fff`), white checkmark SVG
+- **Indeterminate** → blue fill, white minus bar
+- **Disabled** → 50% opacity, no pointer events
+
+## Examples
+```tsx
+// Simple checkbox with label
+const [agreed, setAgreed] = useState(false);
+<Checkbox
+  checked={agreed}
+  onChange={setAgreed}
+  label="Я погоджуюсь з умовами використання"
+/>
+
+// Large size
+<Checkbox size="large" checked={selected} onChange={setSelected} label="Вибрати всіх" />
+
+// Indeterminate (partial selection)
+<Checkbox
+  indeterminate={someSelected && !allSelected}
+  checked={allSelected}
+  onChange={toggleAll}
+  label="Вибрати всіх"
+/>
+
+// Disabled
+<Checkbox checked={true} disabled label="Незмінний параметр" />
+```
+
+## Do NOT
+- Do NOT use for on/off single switches — use `Toggle` instead
+- Do NOT rely on CSS classes for checked state — always use `checked` prop

package/guidelines/components/footer.md

@@ -0,0 +1,63 @@
+# Footer
+
+**Import**: `import { Footer } from '@tetjana/flowmakers-ds'`
+
+## Description
+Footer сторінки з CTA-блоком та секціями посилань. Підтримує light і dark теми.
+
+## Props
+| Prop          | Type              | Required | Default                                   | Description                              |
+|---------------|-------------------|----------|-------------------------------------------|------------------------------------------|
+| `variant`     | `'light'` \| `'dark'` | no   | `'light'`                                 | Light (white bg) or dark (black bg)      |
+| `headline`    | string            | no       | `'Є ідеї чи пропозиції?'`                | CTA heading on the left side             |
+| `ctaLabel`    | string            | no       | `'Написати нам'`                          | CTA button text                          |
+| `onCtaClick`  | () => void        | no       | —                                         | CTA button click handler                 |
+| `sections`    | FooterSection[]   | no       | `[]`                                      | Link columns (title + links)             |
+| `copyright`   | string            | no       | `'© 2024 Made by FlowMakers...'`         | Bottom copyright line                    |
+
+## Types
+```tsx
+interface FooterLink    { label: string; href: string; }
+interface FooterSection { title: string; links: FooterLink[]; }
+```
+
+## Visual
+- **Light**: white/grey bg, black text, black CTA button
+- **Dark**: `#18181b` bg, white text (75% opacity), outlined CTA with pink border
+
+## Examples
+```tsx
+// Minimal light footer
+<Footer />
+
+// Dark footer with sections
+<Footer
+  variant="dark"
+  headline="Долучайся до FlowMakers"
+  ctaLabel="Розпочати безкоштовно"
+  onCtaClick={() => navigate('/register')}
+  sections={[
+    {
+      title: 'Продукт',
+      links: [
+        { label: 'Про нас',    href: '/about' },
+        { label: 'Функції',    href: '/features' },
+        { label: 'Тарифи',     href: '/pricing' },
+      ],
+    },
+    {
+      title: 'Підтримка',
+      links: [
+        { label: 'FAQ',        href: '/faq' },
+        { label: 'Контакти',   href: '/contact' },
+      ],
+    },
+  ]}
+  copyright="© 2025 FlowMakers. Всі права захищені."
+/>
+```
+
+## Do NOT
+- Do NOT add more than 3–4 sections — it breaks the layout
+- Do NOT use Footer inside a card or modal — it is a page-level component
+- Do NOT put interactive forms inside Footer — keep it to links and CTA only

package/guidelines/components/header.md

@@ -0,0 +1,57 @@
+# Header
+
+**Import**: `import { Header } from '@tetjana/flowmakers-ds'`
+
+## Description
+Заголовок картки/віджета з title, необов'язковим subtitle і слотами для іконок/дій зліва і справа.
+Використовується як верхня частина інформаційних блоків і дашборд-карток.
+
+## Props
+| Prop        | Type                    | Required | Default    | Description                           |
+|-------------|-------------------------|----------|------------|---------------------------------------|
+| `title`     | string                  | ✅ yes   | —          | Main heading text                     |
+| `subtitle`  | string                  | no       | —          | Secondary text below the title        |
+| `color`     | `'purple'` \| `'grey'` | no       | `'purple'` | Background color                      |
+| `leftSlot`  | ReactNode               | no       | —          | Icon or element on the left           |
+| `rightSlot` | ReactNode               | no       | —          | Action button or icon on the right    |
+
+## Color backgrounds
+| Color    | Background token        | Hex       | Use for                              |
+|----------|-------------------------|-----------|--------------------------------------|
+| `purple` | `--primary-fill-100`   | `#eeecfb` | Default, most widgets and cards      |
+| `grey`   | `--nature-fill-50`     | `#f7f7f8` | Secondary cards, settings sections   |
+
+## Visual
+- Rounded top corners (`border-radius: 20px 20px 0 0`)
+- Uses **Manrope Bold 18px** for title
+- Uses **Nunito Sans Regular 14px** for subtitle in muted grey
+
+## Examples
+```tsx
+// Basic
+<Header title="Мій профіль" />
+
+// With subtitle
+<Header title="Аналітика" subtitle="Ваш прогрес за останній місяць" />
+
+// Grey background with icons
+<Header
+  color="grey"
+  title="Налаштування"
+  leftSlot={<SettingsIcon />}
+  rightSlot={<Button variant="ghost-icon"><EditIcon /></Button>}
+/>
+
+// Full widget pattern (Header + content inside a card)
+<div style={{ borderRadius: '20px', border: '1px solid var(--bw-fill-100)' }}>
+  <Header title="Оцінки" subtitle="Останні результати" />
+  <div style={{ padding: '16px' }}>
+    {/* widget content */}
+  </div>
+</div>
+```
+
+## Do NOT
+- Do NOT use Header as a page `<h1>` — it is for widget/card headers only
+- Do NOT put long text in subtitle — keep it to one short line
+- Do NOT change background via className — use the `color` prop

package/guidelines/components/input.md

@@ -0,0 +1,39 @@
+# Input
+
+**Import**: `import { Input } from '@tetjana/flowmakers-ds'`
+
+## States
+`default` → `hover` → `focused` → `filled` → `error` / `success`
+
+## Props
+| Prop             | Type        | Default     | Description                   |
+|------------------|-------------|-------------|-------------------------------|
+| `label`          | string      | —           | Label above the input         |
+| `placeholder`    | string      | —           | Placeholder text              |
+| `state`          | InputState  | `'default'` | Visual state                  |
+| `errorMessage`   | string      | —           | Shown when state=error        |
+| `successMessage` | string      | —           | Shown when state=success      |
+| `leftIcon`       | ReactNode   | —           | Icon inside left side         |
+| `rightIcon`      | ReactNode   | —           | Icon inside right side        |
+| `disabled`       | boolean     | `false`     | Disabled state                |
+
+## Examples
+```tsx
+// Email input
+<Input label="Електронна пошта" placeholder="Введіть Вашу електронну пошту" type="email" />
+
+// With error
+<Input
+  label="Пароль"
+  type="password"
+  state="error"
+  errorMessage="Невірний пароль"
+/>
+
+// With success
+<Input label="Email" state="success" successMessage="Email підтверджено" />
+```
+
+## Do NOT
+- Do not use native `<input>` for form fields — always use `<Input>`
+- Do not manually change border color with CSS — use the `state` prop

package/guidelines/components/tag.md

@@ -0,0 +1,27 @@
+# Tag
+
+**Import**: `import { Tag } from '@tetjana/flowmakers-ds'`
+
+## Colors
+| Color    | Background        | Text              | Use for                     |
+|----------|-------------------|-------------------|-----------------------------|
+| `grey`   | `#eeeef0`         | `#4c4d58`         | Neutral labels, duration    |
+| `green`  | `#d9f2e7`         | `#1b6153`         | Success, available, done    |
+| `yellow` | `#fff0d4`         | `#c54e09`         | Warning, in progress        |
+| `purple` | `#eeecfb`         | `#6d45bc`         | Category, feature label     |
+| `pink`   | `#ffe7fc`         | `#b51692`         | Special, premium            |
+
+## Props
+| Prop       | Type      | Default  | Description          |
+|------------|-----------|----------|----------------------|
+| `color`    | TagColor  | `'grey'` | Color variant        |
+| `children` | ReactNode | —        | Tag label text       |
+
+## Examples
+```tsx
+<Tag>5 хв</Tag>
+<Tag color="green">Завершено</Tag>
+<Tag color="yellow">В процесі</Tag>
+<Tag color="purple">AI</Tag>
+<Tag color="pink">Premium</Tag>
+```

package/guidelines/components/toggle.md

@@ -0,0 +1,41 @@
+# Toggle
+
+**Import**: `import { Toggle } from '@tetjana/flowmakers-ds'`
+
+## Description
+Перемикач on/off. Обов'язково потребує контрольованого стану (`checked` + `onChange`).
+
+## Props
+| Prop        | Type                       | Required | Default | Description                   |
+|-------------|----------------------------|----------|---------|-------------------------------|
+| `checked`   | boolean                    | ✅ yes   | —       | Current on/off state          |
+| `onChange`  | (checked: boolean) => void | ✅ yes   | —       | Called when user toggles      |
+| `label`     | string                     | no       | —       | Text label next to the toggle |
+| `disabled`  | boolean                    | no       | `false` | Prevents interaction          |
+
+## Visual
+- **Off** → grey track, white thumb
+- **On** → gradient track (pink→yellow→mint→purple), white thumb, animated
+- **Disabled** → 50% opacity, no pointer events
+
+## Examples
+```tsx
+// Controlled toggle with useState
+const [enabled, setEnabled] = useState(false);
+<Toggle
+  checked={enabled}
+  onChange={setEnabled}
+  label="Отримувати сповіщення"
+/>
+
+// Disabled
+<Toggle checked={false} onChange={() => {}} disabled label="Недоступно" />
+
+// Without label (icon-only row)
+<Toggle checked={active} onChange={setActive} />
+```
+
+## Do NOT
+- Do NOT use without `checked` + `onChange` — the component is always controlled
+- Do NOT use for multi-option selection — use `Checkbox` instead
+- Do NOT change the track color via CSS — the gradient is part of the brand style

package/guidelines/design-tokens/colors.md

@@ -0,0 +1,42 @@
+# Color Tokens
+
+All colors are CSS variables. Import `@tetjana/flowmakers-ds/styles` to use them.
+
+## Primary palette (Purple)
+| Token                       | Value     | Use for                              |
+|-----------------------------|-----------|--------------------------------------|
+| `--primary-fill-100`        | `#eeecfb` | Light purple backgrounds, tag bg     |
+| `--primary-fill-500`        | `#7d65e1` | Focus rings, active checkboxes       |
+| `--primary-fill-600`        | `#6d45bc` | Hover states on purple elements      |
+| `--primary-fill-700`        | `#6d45bc` | Purple tag text                      |
+
+## Black & White
+| Token                       | Value     | Use for                              |
+|-----------------------------|-----------|--------------------------------------|
+| `--bw-fill-black`           | `#121212` | Primary buttons, headings, body text |
+| `--bw-fill-white`           | `#ffffff` | Backgrounds, button text on dark     |
+| `--bw-fill-50`              | `#f7f7f8` | Page background, grey header         |
+| `--bw-fill-100`             | `#eeeef0` | Hover backgrounds                    |
+| `--bw-fill-200`             | `#dcdcdc` | Disabled button background           |
+| `--bw-fill-300`             | `#b8b9c1` | Input borders (default)              |
+| `--bw-fill-400`             | `#989898` | Subtitle, secondary text             |
+| `--bw-fill-500`             | `#7c7c7c` | Muted text                           |
+
+## Accent colors
+| Token                       | Value     | Use for                              |
+|-----------------------------|-----------|--------------------------------------|
+| `--pink-fill-100`           | `#ffe7fc` | Pink tag background                  |
+| `--pink-fill-300`           | `#ffa8f1` | Hero button hover border             |
+| `--pink-fill-700`           | `#b51692` | Pink tag text                        |
+| `--green-fill-100`          | `#d9f2e7` | Green tag background, success tint   |
+| `--green-fill-500`          | `#27a872` | Success input border                 |
+| `--green-fill-700`          | `#1b6153` | Green tag text                       |
+| `--yellow-fill-100`         | `#fff0d4` | Yellow tag background, warning tint  |
+| `--yellow-fill-700`         | `#c54e09` | Yellow tag text                      |
+
+## Decision tree
+- Need a background? → Start with `--bw-fill-50` or `--primary-fill-100`
+- Need text on white? → Use `--bw-fill-black`
+- Need muted/secondary text? → Use `--bw-fill-400`
+- Need a border? → Use `--bw-fill-300` (default) or `--primary-fill-500` (focused)
+- Need a status color? → Use the matching `--green`, `--yellow`, or `--pink` token

package/guidelines/design-tokens/spacing.md

@@ -0,0 +1,41 @@
+# Spacing & Border Radius Tokens
+
+All tokens are CSS variables available after `import '@tetjana/flowmakers-ds/styles'`.
+
+## Spacing scale
+| Token          | Value | Use for                                           |
+|----------------|-------|---------------------------------------------------|
+| `--space-xxs`  | 4px   | Icon gaps, tiny internal padding                  |
+| `--space-xs`   | 8px   | Between icon and text, small card gaps            |
+| `--space-s`    | 10px  | Button padding (sm), tight list items             |
+| `--space-sm`   | 12px  | Between label and input, small section gaps       |
+| `--space-m`    | 16px  | Default padding inside cards, between form fields |
+| `--space-l`    | 20px  | Card/widget internal padding                      |
+| `--space-xl`   | 24px  | Section padding, between major blocks             |
+| `--space-2xl`  | 32px  | Large gaps, between sections                      |
+| `--space-3xl`  | 48px  | Between major page sections                       |
+
+## Border radius scale
+| Token          | Value  | Use for                                      |
+|----------------|--------|----------------------------------------------|
+| `--radius-xs`  | 8px    | Small chips, badges, compact inputs          |
+| `--radius-s`   | 10px   | Buttons (sm), small cards                    |
+| `--radius-m`   | 12px   | Buttons (md/lg), inputs, standard cards      |
+| `--radius-l`   | 16px   | Large cards, modals                          |
+| `--radius-xl`  | 20px   | Widget containers, Header component          |
+| `--radius-full`| 9999px | Pills, Tags, Toggle track, Avatar circles    |
+
+## Rules
+- Always use `--space-*` tokens instead of hardcoded pixel values
+- For card padding: use `var(--space-m, 16px)` as the default fallback
+- For inner component spacing: `--space-xs` (8px) or `--space-sm` (12px)
+- For section-level gaps: `--space-xl` (24px) or `--space-2xl` (32px)
+
+## Example
+```css
+.my-card {
+  padding: var(--space-m);
+  border-radius: var(--radius-l);
+  gap: var(--space-sm);
+}
+```

package/guidelines/design-tokens/typography.md

@@ -0,0 +1,23 @@
+# Typography Tokens
+
+## Font families
+- **Headings**: `Manrope` (Bold 700) — page titles, widget titles, display text
+- **Body & UI**: `Nunito Sans` — all other text (labels, body, buttons, captions)
+
+## Font size scale
+| Token                | Value  | Class          | Use for                        |
+|----------------------|--------|----------------|--------------------------------|
+| `--font-size-12`     | 12px   | `.text-tiny`   | Tags, tiny labels, captions    |
+| `--font-size-14`     | 14px   | `.text-body-md`| Default body text, button text |
+| `--font-size-16`     | 16px   | `.text-body-lg`| Input labels, subtitles        |
+| `--font-size-18`     | 18px   | `.text-h4`     | Widget/card headings           |
+| `--font-size-24`     | 24px   | `.text-h3`     | Section headings               |
+| `--font-size-30`     | 30px   | `.text-h2`     | Page headings, footer headline |
+| `--font-size-36`+    | 36px+  | `.text-h1`     | Hero/landing headings          |
+
+## Rules
+- Always use **Manrope Bold** for headings (h1–h4)
+- Use **Nunito Sans Regular (400)** for body text
+- Use **Nunito Sans Bold (700)** for buttons and tags
+- Use **Nunito Sans SemiBold (600)** for subtitles and section labels
+- **Minimum body text size: 14px** — never use 12px for paragraph text

package/guidelines/overview-components.md

@@ -0,0 +1,19 @@
+# FlowMakers Components Overview
+
+All components are imported from `@tetjana/flowmakers-ds`.
+Always import the CSS too: `import '@tetjana/flowmakers-ds/styles'`
+
+| Component   | Purpose                                      | Guidelines file                          |
+|-------------|----------------------------------------------|------------------------------------------|
+| `Button`    | All clickable actions                        | [button.md](components/button.md)        |
+| `Input`     | Text fields, email, password, search         | [input.md](components/input.md)          |
+| `Tag`       | Labels, badges, status indicators            | [tag.md](components/tag.md)              |
+| `Toggle`    | Boolean on/off switches                      | [toggle.md](components/toggle.md)        |
+| `Checkbox`  | Multi-select options                         | [checkbox.md](components/checkbox.md)    |
+| `Header`    | Widget/card header with title and subtitle   | [header.md](components/header.md)        |
+| `Footer`    | Page footer with links and CTA               | [footer.md](components/footer.md)        |
+
+## General rules
+- Do NOT add `className` to override colors — use CSS variables instead
+- All components accept standard HTML attributes via spread props
+- Disabled state: always pass `disabled` prop, never CSS-only

package/package.json

@@ -1,36 +1,45 @@
 {
   "name": "@tetjana/flowmakers-ds",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "FlowMakers UI Design System — React components",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
-      "require": "./dist/index.js",
+      "require": "./dist/index.cjs.js",
       "types": "./dist/index.d.ts"
     },
     "./styles": "./dist/styles.css"
   },
-  "files": ["dist"],
+  "files": [
+    "dist",
+    "guidelines"
+  ],
   "scripts": {
     "build": "vite build && tsc --emitDeclarationOnly --declaration --outDir dist",
-    "dev":   "vite",
-    "lint":  "eslint src"
+    "dev": "vite",
+    "lint": "eslint src"
   },
   "peerDependencies": {
-    "react":     ">=18",
+    "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@types/react":        "^18.0.0",
-    "@types/react-dom":    "^18.0.0",
-    "@vitejs/plugin-react":"^4.0.0",
-    "typescript":          "^5.0.0",
-    "vite":                "^5.0.0",
-    "vite-plugin-dts":     "^3.0.0"
+    "@figma/code-connect": "^1.4.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0"
   },
-  "keywords": ["flowmakers", "design-system", "react", "ui"],
+  "keywords": [
+    "flowmakers",
+    "design-system",
+    "react",
+    "ui"
+  ],
   "license": "MIT"
 }