@licklist/design 0.78.5-dev.107 → 0.78.5-dev.108

package/dist/v2/shadcn/styles/globals.css

@@ -0,0 +1,112 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* ─── Bridge: shadcn CSS variables → BKIT design tokens ───────────────────
+     * shadcn components use HSL values via Tailwind (e.g. bg-primary = hsl(var(--primary))).
+     * We keep HSL values here that approximate BKIT tokens, so shadcn components
+     * look correct. The BKIT SCSS tokens (_colors.scss) remain the source of truth
+     * for all custom v2 components.
+     * ────────────────────────────────────────────────────────────────────────── */
+
+    /* Backgrounds / Surfaces */
+    --background: 0 0% 100%;            /* #FFFFFF = --surface-primary */
+    --foreground: 228 65% 20%;          /* #121E52 = --label-primary */
+
+    /* Card */
+    --card: 0 0% 100%;                  /* #FFFFFF = --surface-primary */
+    --card-foreground: 228 65% 20%;     /* #121E52 = --label-primary */
+
+    /* Popover */
+    --popover: 0 0% 100%;              /* #FFFFFF */
+    --popover-foreground: 228 65% 20%; /* #121E52 */
+
+    /* Primary = BKIT purple (#6200EE) */
+    --primary: 270 100% 47%;           /* #6200EE = --actions-regular */
+    --primary-foreground: 0 0% 100%;   /* #FFFFFF */
+
+    /* Secondary = BKIT action soft (#EFE6FD) */
+    --secondary: 270 90% 95%;          /* ~--surface-action-soft */
+    --secondary-foreground: 270 100% 47%; /* #6200EE = --label-action */
+
+    /* Muted = BKIT surface-secondary (#F8F8FA) */
+    --muted: 240 14% 97%;              /* #F8F8FA = --surface-secondary */
+    --muted-foreground: 227 16% 47%;   /* #626A90 = --label-secondary */
+
+    /* Accent = hover states */
+    --accent: 240 14% 97%;             /* #F8F8FA */
+    --accent-foreground: 228 65% 20%;  /* #121E52 */
+
+    /* Destructive = BKIT red (#E0423A) */
+    --destructive: 3 73% 55%;          /* #E0423A = --errors-regular */
+    --destructive-foreground: 0 0% 100%; /* #FFFFFF */
+
+    /* Border / Input = BKIT --border-primary (#E8E9EF) */
+    --border: 234 20% 93%;             /* #E8E9EF */
+    --input: 234 20% 93%;              /* #E8E9EF */
+
+    /* Ring = BKIT purple for focus rings */
+    --ring: 270 100% 47%;              /* #6200EE */
+
+    --radius: 0.5rem;
+
+    /* Chart colors */
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+
+    /* BKIT design token fallbacks — used by shadcn Switch and other components
+       that reference BKIT semantic tokens directly. These are overridden when the
+       full BKIT token stylesheet (_colors.scss) is also loaded. */
+    --fill-primary: #14215A;
+    --fill-selected: #6200EE;
+    --surface-tertiary: #E8E9EF;
+    --surface-primary: #FFFFFF;
+    --surface-secondary: #F8F8FA;
+    --border-primary: #E8E9EF;
+    --label-primary: #121E52;
+    --label-secondary: #626A90;
+    --label-action: #6200EE;
+    --surface-action-soft: #EFE6FD;
+  }
+
+  .dark {
+    --background: 228 50% 10%;
+    --foreground: 240 14% 97%;
+    --card: 228 50% 10%;
+    --card-foreground: 240 14% 97%;
+    --popover: 228 50% 10%;
+    --popover-foreground: 240 14% 97%;
+    --primary: 240 14% 97%;
+    --primary-foreground: 228 65% 20%;
+    --secondary: 228 25% 18%;
+    --secondary-foreground: 240 14% 97%;
+    --muted: 228 25% 18%;
+    --muted-foreground: 228 16% 65%;
+    --accent: 228 25% 18%;
+    --accent-foreground: 240 14% 97%;
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 240 14% 97%;
+    --border: 228 25% 18%;
+    --input: 228 25% 18%;
+    --ring: 228 27% 84%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/dist/v2/styles/form/NewInput.scss.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ":root{--font-family-sans:\"Geist\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;--font-family-mono:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--heading-xxl-size:44px;--heading-xxl-line:48px;--heading-xxl-weight:600;--heading-xl-size:32px;--heading-xl-line:36px;--heading-xl-weight:700;--heading-h1-size:24px;--heading-h1-line:28px;--heading-h1-weight:600;--heading-h2-size:20px;--heading-h2-line:24px;--heading-h2-weight:600;--heading-h3-size:17px;--heading-h3-line:20px;--heading-h3-weight:600;--heading-h4-size:15px;--heading-h4-line:18px;--heading-h4-weight:600;--heading-h5-size:13px;--heading-h5-line:16px;--heading-h5-weight:500;--heading-h6-size:11px;--heading-h6-line:14px;--heading-h6-weight:500;--heading-xxl-mobile-size:32px;--heading-xxl-mobile-line:36px;--heading-xxl-mobile-weight:600;--heading-xl-mobile-size:26px;--heading-xl-mobile-line:30px;--heading-xl-mobile-weight:700;--heading-h1-mobile-size:20px;--heading-h1-mobile-line:23px;--heading-h1-mobile-weight:600;--heading-h2-mobile-size:18px;--heading-h2-mobile-line:22px;--heading-h2-mobile-weight:600;--heading-h3-mobile-size:16px;--heading-h3-mobile-line:18px;--heading-h3-mobile-weight:600;--heading-h4-mobile-size:14px;--heading-h4-mobile-line:16px;--heading-h4-mobile-weight:600;--heading-h5-mobile-size:13px;--heading-h5-mobile-line:16px;--heading-h5-mobile-weight:500;--heading-h6-mobile-size:11px;--heading-h6-mobile-line:14px;--heading-h6-mobile-weight:500;--text-xl-size:20px;--text-xl-line:26px;--text-xl-weight:400;--text-large-size:18px;--text-large-line:24px;--text-large-weight:400;--text-regular-size:15px;--text-regular-line:20px;--text-regular-weight:400;--text-small-size:13px;--text-small-line:16px;--text-small-weight:400;--text-small-emphasis-weight:500;--text-small-bold-weight:600;--text-xs-size:10px;--text-xs-line:13px;--text-xs-weight:500;--text-xs-bold-weight:600}.new-form-input{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:var(--spacing-sm);min-width:0;overflow:hidden;width:100%}.new-form-input__label{align-items:center;color:var(--label-primary);display:flex;font-size:15px;font-weight:600;justify-content:space-between;line-height:20px;width:100%}.new-form-input__label,.new-form-input__label-optional{font-family:var(--font-family-sans,\"Geist\",sans-serif);font-style:normal}.new-form-input__label-optional{color:var(--label-secondary);font-size:13px;font-weight:400;line-height:16px}.new-form-input__input{background-color:var(--surfaces-main-background-secondary);background:var(--surface-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-md);box-sizing:border-box;color:var(--labels-main-label-primary,#121e52);color:var(--label-primary,#121e52);flex:1 1 0;font-family:var(--font-family-sans);font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);line-height:var(--text-regular-line);min-height:40px;min-width:0;padding:8px 10px;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__input{font-size:16px}}.new-form-input__input:focus{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input[type=date]::-webkit-datetime-edit-day-field,.new-form-input__input[type=date]::-webkit-datetime-edit-month-field,.new-form-input__input[type=date]::-webkit-datetime-edit-text,.new-form-input__input[type=date]::-webkit-datetime-edit-year-field,.new-form-input__input[type=time]::-webkit-datetime-edit-ampm-field,.new-form-input__input[type=time]::-webkit-datetime-edit-hour-field,.new-form-input__input[type=time]::-webkit-datetime-edit-minute-field,.new-form-input__input[type=time]::-webkit-datetime-edit-text{color:var(--label-primary,#121e52)}.new-form-input__textarea{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px);min-height:120px;padding:8px 10px;resize:vertical;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__textarea{font-size:16px}}.new-form-input__textarea:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__textarea::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon{align-items:center;background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--border-primary,#e8e9ef);border-radius:var(--radius-md,4px);display:flex;gap:var(--spacing-sm,8px);min-height:52px;padding:8px 10px;transition:all .2s ease;width:100%}.new-form-input__input-with-icon:focus-within{border-color:var(--border-selected,#6200ee)}.new-form-input__input-with-icon .icon{align-items:center;display:flex;flex-shrink:0;height:24px;justify-content:center;order:-1;width:24px}.new-form-input__input-with-icon--right .icon{order:1}.new-form-input__input-with-icon input{background:#0000;border:none;color:var(--label-primary);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px)}@media (max-width:768px){.new-form-input__input-with-icon input{font-size:16px}}.new-form-input__input-with-icon input:focus{outline:none}.new-form-input__input-with-icon input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon input[type=date]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}.new-form-input__input-with-icon input[type=date]::-webkit-inner-spin-button,.new-form-input__input-with-icon input[type=date]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.new-form-input__verification-code{display:flex;gap:var(--spacing-sm,8px);height:62px}.new-form-input__verification-code .code-input{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-lg-size,18px);font-weight:var(--heading-h3-weight,600);text-align:center;transition:all .2s ease}.new-form-input__verification-code .code-input:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__helper-text{color:var(--label-secondary,#626a90);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);font-style:normal;font-weight:400;line-height:var(--text-regular-line,20px);margin-top:2px;min-width:max-content;white-space:nowrap}@media (max-width:768px){.new-form-input__helper-text{word-wrap:break-word;min-width:unset;white-space:normal}}.new-form-input__error-text{color:var(--labels-status-label-error,#ef4444);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:11px;font-style:normal;font-weight:400;line-height:14px;margin-top:2px}.new-form-input--active .new-form-input__input{border-color:var(--border-selected,#6200ee)}.new-form-input--error .new-form-input__input{border-color:var(--borders-status-border-error,#ef4444)}.new-form-input--disabled{opacity:var(--opacity-50,.5);pointer-events:none}.new-form-input--on-surface .new-form-input__input,.new-form-input--on-surface .new-form-input__input-with-icon,.new-form-input--on-surface .new-form-input__textarea{background-color:var(--surface-primary,#fff);background:var(--surface-primary,#fff)}.new-form-input--on-surface .new-form-input__input-with-icon:focus,.new-form-input--on-surface .new-form-input__input-with-icon:focus-within,.new-form-input--on-surface .new-form-input__input:focus,.new-form-input--on-surface .new-form-input__input:focus-within,.new-form-input--on-surface .new-form-input__textarea:focus,.new-form-input--on-surface .new-form-input__textarea:focus-within{background-color:var(--surface-primary,#fff)}.new-form-input.dob-input .new-form-input__label{color:var(--label-secondary,#626a90)}.surface-context--secondary .new-form-input__input,.surface-context--secondary .new-form-input__input-with-icon,.surface-context--secondary .new-form-input__textarea{background-color:var(--surface-primary,#fff);background:var(--surface-primary,#fff)}.surface-context--secondary .new-form-input__input-with-icon:focus,.surface-context--secondary .new-form-input__input-with-icon:focus-within,.surface-context--secondary .new-form-input__input:focus,.surface-context--secondary .new-form-input__input:focus-within,.surface-context--secondary .new-form-input__textarea:focus,.surface-context--secondary .new-form-input__textarea:focus-within{background-color:var(--surface-primary,#fff)}";
+var css_248z = ":root{--font-family-sans:\"Geist\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;--font-family-mono:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--heading-xxl-size:44px;--heading-xxl-line:48px;--heading-xxl-weight:600;--heading-xl-size:32px;--heading-xl-line:36px;--heading-xl-weight:700;--heading-h1-size:24px;--heading-h1-line:28px;--heading-h1-weight:600;--heading-h2-size:20px;--heading-h2-line:24px;--heading-h2-weight:600;--heading-h3-size:17px;--heading-h3-line:20px;--heading-h3-weight:600;--heading-h4-size:15px;--heading-h4-line:18px;--heading-h4-weight:600;--heading-h5-size:13px;--heading-h5-line:16px;--heading-h5-weight:500;--heading-h6-size:11px;--heading-h6-line:14px;--heading-h6-weight:500;--heading-xxl-mobile-size:32px;--heading-xxl-mobile-line:36px;--heading-xxl-mobile-weight:600;--heading-xl-mobile-size:26px;--heading-xl-mobile-line:30px;--heading-xl-mobile-weight:700;--heading-h1-mobile-size:20px;--heading-h1-mobile-line:23px;--heading-h1-mobile-weight:600;--heading-h2-mobile-size:18px;--heading-h2-mobile-line:22px;--heading-h2-mobile-weight:600;--heading-h3-mobile-size:16px;--heading-h3-mobile-line:18px;--heading-h3-mobile-weight:600;--heading-h4-mobile-size:14px;--heading-h4-mobile-line:16px;--heading-h4-mobile-weight:600;--heading-h5-mobile-size:13px;--heading-h5-mobile-line:16px;--heading-h5-mobile-weight:500;--heading-h6-mobile-size:11px;--heading-h6-mobile-line:14px;--heading-h6-mobile-weight:500;--text-xl-size:20px;--text-xl-line:26px;--text-xl-weight:400;--text-large-size:18px;--text-large-line:24px;--text-large-weight:400;--text-regular-size:15px;--text-regular-line:20px;--text-regular-weight:400;--text-small-size:13px;--text-small-line:16px;--text-small-weight:400;--text-small-emphasis-weight:500;--text-small-bold-weight:600;--text-xs-size:10px;--text-xs-line:13px;--text-xs-weight:500;--text-xs-bold-weight:600}.new-form-input{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:var(--spacing-sm);min-width:0;overflow:hidden;width:100%}.new-form-input__label{align-items:center;color:var(--label-primary);display:flex;font-size:15px;font-weight:600;justify-content:space-between;line-height:20px;width:100%}.new-form-input__label,.new-form-input__label-optional{font-family:var(--font-family-sans,\"Geist\",sans-serif);font-style:normal}.new-form-input__label-optional{color:var(--label-secondary);font-size:13px;font-weight:400;line-height:16px}.new-form-input__input{background-color:var(--surfaces-main-background-secondary);background:var(--surface-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-md);box-sizing:border-box;color:var(--labels-main-label-primary,#121e52);color:var(--label-primary,#121e52);flex:1 1 0;font-family:var(--font-family-sans);font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);line-height:var(--text-regular-line);min-height:40px;min-width:0;padding:8px 10px;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__input{font-size:16px}}.new-form-input__input:focus{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input[type=date]::-webkit-datetime-edit-day-field,.new-form-input__input[type=date]::-webkit-datetime-edit-month-field,.new-form-input__input[type=date]::-webkit-datetime-edit-text,.new-form-input__input[type=date]::-webkit-datetime-edit-year-field,.new-form-input__input[type=time]::-webkit-datetime-edit-ampm-field,.new-form-input__input[type=time]::-webkit-datetime-edit-hour-field,.new-form-input__input[type=time]::-webkit-datetime-edit-minute-field,.new-form-input__input[type=time]::-webkit-datetime-edit-text{color:var(--label-primary,#121e52)}.new-form-input__textarea{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px);min-height:120px;padding:8px 10px;resize:vertical;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__textarea{font-size:16px}}.new-form-input__textarea:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__textarea::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon{align-items:center;background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--border-primary,#e8e9ef);border-radius:var(--radius-md,4px);display:flex;gap:var(--spacing-sm,8px);min-height:52px;padding:8px 10px;transition:all .2s ease;width:100%}.new-form-input__input-with-icon:focus-within{border-color:var(--border-selected,#6200ee)}.new-form-input__input-with-icon .icon{align-items:center;display:flex;flex-shrink:0;height:24px;justify-content:center;order:-1;width:24px}.new-form-input__input-with-icon--right .icon{order:1}.new-form-input__input-with-icon input{background:transparent;border:none;color:var(--label-primary);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px)}@media (max-width:768px){.new-form-input__input-with-icon input{font-size:16px}}.new-form-input__input-with-icon input:focus{outline:none}.new-form-input__input-with-icon input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon input[type=date]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}.new-form-input__input-with-icon input[type=date]::-webkit-inner-spin-button,.new-form-input__input-with-icon input[type=date]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.new-form-input__verification-code{display:flex;gap:var(--spacing-sm,8px);height:62px}.new-form-input__verification-code .code-input{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-lg-size,18px);font-weight:var(--heading-h3-weight,600);text-align:center;transition:all .2s ease}.new-form-input__verification-code .code-input:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__helper-text{color:var(--label-secondary,#626a90);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);font-style:normal;font-weight:400;line-height:var(--text-regular-line,20px);margin-top:2px;min-width:max-content;white-space:nowrap}@media (max-width:768px){.new-form-input__helper-text{word-wrap:break-word;min-width:unset;white-space:normal}}.new-form-input__error-text{color:var(--labels-status-label-error,#ef4444);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:11px;font-style:normal;font-weight:400;line-height:14px;margin-top:2px}.new-form-input--active .new-form-input__input{border-color:var(--border-selected,#6200ee)}.new-form-input--error .new-form-input__input{border-color:var(--borders-status-border-error,#ef4444)}.new-form-input--disabled{opacity:var(--opacity-50,.5);pointer-events:none}.new-form-input--on-surface .new-form-input__input,.new-form-input--on-surface .new-form-input__input-with-icon,.new-form-input--on-surface .new-form-input__textarea{background-color:var(--surface-primary,#fff);background:var(--surface-primary,#fff)}.new-form-input--on-surface .new-form-input__input-with-icon:focus,.new-form-input--on-surface .new-form-input__input-with-icon:focus-within,.new-form-input--on-surface .new-form-input__input:focus,.new-form-input--on-surface .new-form-input__input:focus-within,.new-form-input--on-surface .new-form-input__textarea:focus,.new-form-input--on-surface .new-form-input__textarea:focus-within{background-color:var(--surface-primary,#fff)}.new-form-input.dob-input .new-form-input__label{color:var(--label-secondary,#626a90)}.surface-context--secondary .new-form-input__input,.surface-context--secondary .new-form-input__input-with-icon,.surface-context--secondary .new-form-input__textarea{background-color:var(--surface-primary,#fff);background:var(--surface-primary,#fff)}.surface-context--secondary .new-form-input__input-with-icon:focus,.surface-context--secondary .new-form-input__input-with-icon:focus-within,.surface-context--secondary .new-form-input__input:focus,.surface-context--secondary .new-form-input__input:focus-within,.surface-context--secondary .new-form-input__textarea:focus,.surface-context--secondary .new-form-input__textarea:focus-within{background-color:var(--surface-primary,#fff)}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.107",
+  "version": "0.78.5-dev.108",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.36.1-dev.51",
+    "@licklist/core": "0.36.1-dev.49",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.36.4-dev.19",
+    "@licklist/plugins": "0.36.4-dev.18",
     "clsx": "2.1.1",
     "i18next": "25.3.2",
     "lodash": "4.17.21",
@@ -65,9 +65,9 @@
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@hookform/resolvers": "^5.2.2",
-    "@licklist/core": "0.36.1-dev.51",
+    "@licklist/core": "0.36.1-dev.49",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.36.4-dev.19",
+    "@licklist/plugins": "0.36.4-dev.18",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
@@ -229,7 +229,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-swc3": "0.11.2",
     "rollup-plugin-typescript2": "0.31.0",
-    "sass": "1.99.0",
+    "sass": "^1.93.2",
     "sass-loader": "10.1.1",
     "storybook": "9.1.13",
     "style-loader": "2.0.0",

package/rollup.config.js

@@ -25,11 +25,7 @@ export default [
       svgr(),
       postcss({
         extensions: ['.css', '.scss'],
-        use: {
-          sass: {
-            silenceDeprecations: ['legacy-js-api', 'import', 'global-builtin'],
-          },
-        },
+        use: ['sass'],
         extract: false,
         minimize: true,
         inject(cssVariableName) {
@@ -77,16 +73,6 @@ export default [
         isModule: true,
       }),
     ],
-    external: [
-      'tslib',
-      'style-inject',
-      /^react-bootstrap(\/|$)/,
-      /^react-phone-number-input(\/|$)/,
-      /^react-date-range(\/|$)/,
-      /^react-icons(\/|$)/,
-      /^react-loading-skeleton(\/|$)/,
-      /^emojibase-data(\/|$)/,
-      /node_modules/,
-    ],
+    external: ['tslib', 'style-inject', /node_modules/],
   },
 ]

package/src/iframe/payment/payment-status-page/PaymentStatusPage.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
-import { PaymentStatusBody } from './component/PaymentStatusBody'
+import { PaymentStatusBody } from './component'
 import { LoaderIndicator } from '../../../static/loader/LoaderIndicator'
 import { Page, PageBody } from '../../page'
 import { BookingSummary, BookingSummaryFooter } from '../../order-process'

package/src/product-set/form/ProductsControl.tsx

@@ -12,8 +12,7 @@ import { useTranslation } from 'react-i18next'
 import { generateUuid } from '@licklist/core/dist/Services'
 import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
 import { CategoryType } from '@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper'
-import { ProductControl, ProductControlProps } from '../product/ProductControl'
-import { ProductSetFormValues } from './ProductSetForm'
+import { ProductControl, ProductControlProps, ProductSetFormValues } from '..'
 import { SortableTree } from '../../sortable-tree'
 import { CreateProductSetItem } from '../item/CreateProductSetItem'
 import { Product } from '../types'

package/src/v2/components/DataTable/DataTable.tsx

@@ -1,29 +1,7 @@
 import React from 'react'
 import { ActionMenu } from '../ActionMenu'
 import { IconChevronDown } from '../../icons'
-// Native checkbox used instead of shadcn
-const Checkbox = React.forwardRef<HTMLInputElement, { checked?: boolean | 'indeterminate'; onCheckedChange?: (v: boolean) => void; className?: string; onClick?: (e: React.MouseEvent) => void }>(
-  ({ checked, onCheckedChange, className, onClick, ...props }, ref) => {
-    const inputRef = React.useRef<HTMLInputElement>(null)
-    React.useImperativeHandle(ref, () => inputRef.current!)
-    React.useEffect(() => {
-      if (inputRef.current) {
-        inputRef.current.indeterminate = checked === 'indeterminate'
-      }
-    }, [checked])
-    return (
-      <input
-        ref={inputRef}
-        type="checkbox"
-        checked={checked === true}
-        onChange={(e) => onCheckedChange?.(e.target.checked)}
-        onClick={onClick}
-        className={className}
-        {...props}
-      />
-    )
-  }
-)
+import { Checkbox } from '../../shadcn/components/ui/checkbox'
 import './DataTable.scss'
 
 // ─── Types ────────────────────────────────────────────────────────────────────

package/src/v2/components/Modal/DeleteModal.tsx

@@ -1,5 +1,13 @@
 import React, { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '../../shadcn/components/ui/dialog'
 import { NewInput } from '../NewInput'
 import './DeleteModal.scss'
 
@@ -43,19 +51,19 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
 
   const isConfirmDisabled = inputValue !== confirmationText || isDeleting
 
-  if (!isOpen) return null
-
   return (
-    <div className="delete-modal__overlay" onClick={onClose}>
-      <div className="delete-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="delete-modal__header">
-          <h2 className="delete-modal__title">{title}</h2>
-        </div>
+    <Dialog open={isOpen} onOpenChange={(open) => { if (!open) onClose() }}>
+      <DialogContent className="delete-modal">
+        <DialogHeader>
+          <DialogTitle className="delete-modal__title">{title}</DialogTitle>
+        </DialogHeader>
 
         <div className="delete-modal__content">
           <div className="delete-modal__description-group">
             {description && (
-              <p className="delete-modal__description">{description}</p>
+              <DialogDescription className="delete-modal__description">
+                {description}
+              </DialogDescription>
             )}
             {description_1 && (
               <p className="delete-modal__description">{description_1}</p>
@@ -76,7 +84,7 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
           </div>
         </div>
 
-        <div className="delete-modal__actions">
+        <DialogFooter className="delete-modal__actions">
           <button
             type="button"
             className="delete-modal__button delete-modal__button--delete"
@@ -93,8 +101,8 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
           >
             {t('cancel')}
           </button>
-        </div>
-      </div>
-    </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   )
 }

package/src/v2/components/PeriodCard/PeriodCard.scss

@@ -0,0 +1,157 @@
+.period-card {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  border-radius: 8px;
+  background: var(--surface-secondary, #f5f6fa);
+
+  &__title-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__title {
+    font-family: var(--font-family-sans);
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--labels-main-label-primary, #121e52);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__badge-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--label-secondary, #6b7a99);
+  }
+
+  &__badge {
+    font-family: var(--font-family-sans);
+    font-size: 12px;
+    color: var(--label-secondary, #6b7a99);
+    border: 1px solid var(--border-primary, #e2e2e2);
+    border-radius: 999px;
+    padding: 2px 10px;
+  }
+
+  &__section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__section-label {
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--labels-main-label-primary, #121e52);
+  }
+
+  &__row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+      gap: 12px;
+    }
+
+    &--time {
+      margin-top: 8px;
+    }
+  }
+
+  &__days-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+
+  &__days-col {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__time-range {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: end;
+    gap: 12px;
+
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+      gap: 8px;
+    }
+  }
+
+  &__time-separator {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    color: var(--label-secondary, #6b7a99);
+    padding-bottom: 10px;
+  }
+}
+
+// Small square checkboxes for day selection
+.day-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  &__box {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    border: 1px solid var(--border-primary, #e2e2e2);
+    border-radius: 3px;
+    background: var(--surface-primary, #fff);
+    transition: all 0.15s ease;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 1px;
+      left: 4.5px;
+      width: 5px;
+      height: 9px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+      opacity: 0;
+    }
+  }
+
+  &__input:checked + &__box {
+    background: var(--fill-selected, #14215a);
+    border-color: var(--fill-selected, #14215a);
+
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  &__label {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    color: var(--label-primary, #121e52);
+  }
+}