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

package/dist/v2/components/Modal/DeleteModal.scss.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".delete-modal{border-radius:12px!important;font-family:var(--font-family-sans,\"Geist\",sans-serif);gap:0!important;max-width:800px!important;padding:0!important;width:95%!important}.delete-modal>button[class*=absolute]{display:none}.delete-modal__content{padding:48px}.delete-modal__title{color:var(--label-primary,#14215a)!important;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:32px!important;font-weight:700!important;letter-spacing:normal!important;line-height:40px!important;margin:0 0 24px;padding:48px 48px 0}.delete-modal__description-group{display:flex;flex-direction:column;gap:24px;margin-bottom:32px}.delete-modal__description{color:var(--label-secondary,#626a90);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:20px;font-weight:400;line-height:28px;margin:0}.delete-modal__confirmation{margin-bottom:40px}.delete-modal__label{color:var(--label-primary,#14215a);display:block;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:20px;font-weight:600;margin-bottom:16px}.delete-modal__label strong{font-weight:700}.delete-modal__actions{align-items:center;display:flex!important;flex-direction:row!important;gap:16px;padding:0 48px 48px}.delete-modal__button{align-items:center;border:none;border-radius:12px;cursor:pointer;display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:20px;font-weight:600;justify-content:center;min-height:64px;outline:none;padding:12px 32px;transition:all .2s ease-in-out}.delete-modal__button:disabled{cursor:not-allowed;opacity:.6}.delete-modal__button--delete{background-color:var(--red-dark,#cc3c35);color:#fff}.delete-modal__button--delete:disabled{opacity:.5}.delete-modal__button--delete:hover:not(:disabled){background-color:#b33630}.delete-modal__button--cancel{background-color:initial;border:2px solid var(--border-secondary,#d2d5e3);color:var(--label-primary,#14215a)}.delete-modal__button--cancel:hover:not(:disabled){background-color:var(--surface-secondary,#f8f8fa)}@media (max-width:768px){.delete-modal{max-width:90%!important;width:90%!important}.delete-modal__title{font-size:24px!important;line-height:32px!important;margin-bottom:16px;padding:32px 24px 0}.delete-modal__content{padding:32px 24px}.delete-modal__description-group{gap:16px;margin-bottom:24px}.delete-modal__description{font-size:16px;line-height:24px}.delete-modal__confirmation{margin-bottom:32px}.delete-modal__label{font-size:16px;margin-bottom:12px}.delete-modal__actions{gap:12px;padding:0 24px 32px}.delete-modal__button{font-size:16px;min-height:52px;padding:10px 24px}}@media (max-width:480px){.delete-modal{max-width:95%!important;width:95%!important}.delete-modal__title{font-size:20px!important;line-height:28px!important;margin-bottom:12px;padding:24px 16px 0}.delete-modal__content{padding:24px 16px}.delete-modal__description-group{gap:12px;margin-bottom:20px}.delete-modal__description{font-size:14px;line-height:20px}.delete-modal__confirmation{margin-bottom:24px}.delete-modal__label{font-size:14px;margin-bottom:10px}.delete-modal__actions{flex-direction:column!important;gap:8px;padding:0 16px 24px}.delete-modal__button{font-size:14px;min-height:48px;padding:8px 20px;width:100%}}";
+var css_248z = ".delete-modal{border-radius:12px!important;font-family:var(--font-family-sans,\"Geist\",sans-serif);gap:0!important;max-width:800px!important;padding:0!important;width:95%!important}.delete-modal>button[class*=absolute]{display:none}.delete-modal__content{padding:48px}.delete-modal__title{color:var(--label-primary,#14215a)!important;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:32px!important;font-weight:700!important;letter-spacing:normal!important;line-height:40px!important;margin:0 0 24px;padding:48px 48px 0}.delete-modal__description-group{display:flex;flex-direction:column;gap:24px;margin-bottom:32px}.delete-modal__description{color:var(--label-secondary,#626a90);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:20px;font-weight:400;line-height:28px;margin:0}.delete-modal__confirmation{margin-bottom:40px}.delete-modal__label{color:var(--label-primary,#14215a);display:block;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:20px;font-weight:600;margin-bottom:16px}.delete-modal__label strong{font-weight:700}.delete-modal__actions{align-items:center;display:flex!important;flex-direction:row!important;gap:16px;padding:0 48px 48px}.delete-modal__button{align-items:center;border:none;border-radius:12px;cursor:pointer;display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:20px;font-weight:600;justify-content:center;min-height:64px;outline:none;padding:12px 32px;transition:all .2s ease-in-out}.delete-modal__button:disabled{cursor:not-allowed;opacity:.6}.delete-modal__button--delete{background-color:var(--red-dark,#cc3c35);color:#fff}.delete-modal__button--delete:disabled{opacity:.5}.delete-modal__button--delete:hover:not(:disabled){background-color:#b33630}.delete-modal__button--cancel{background-color:transparent;border:2px solid var(--border-secondary,#d2d5e3);color:var(--label-primary,#14215a)}.delete-modal__button--cancel:hover:not(:disabled){background-color:var(--surface-secondary,#f8f8fa)}@media (max-width:768px){.delete-modal{max-width:90%!important;width:90%!important}.delete-modal__title{font-size:24px!important;line-height:32px!important;margin-bottom:16px;padding:32px 24px 0}.delete-modal__content{padding:32px 24px}.delete-modal__description-group{gap:16px;margin-bottom:24px}.delete-modal__description{font-size:16px;line-height:24px}.delete-modal__confirmation{margin-bottom:32px}.delete-modal__label{font-size:16px;margin-bottom:12px}.delete-modal__actions{gap:12px;padding:0 24px 32px}.delete-modal__button{font-size:16px;min-height:52px;padding:10px 24px}}@media (max-width:480px){.delete-modal{max-width:95%!important;width:95%!important}.delete-modal__title{font-size:20px!important;line-height:28px!important;margin-bottom:12px;padding:24px 16px 0}.delete-modal__content{padding:24px 16px}.delete-modal__description-group{gap:12px;margin-bottom:20px}.delete-modal__description{font-size:14px;line-height:20px}.delete-modal__confirmation{margin-bottom:24px}.delete-modal__label{font-size:14px;margin-bottom:10px}.delete-modal__actions{flex-direction:column!important;gap:8px;padding:0 16px 24px}.delete-modal__button{font-size:14px;min-height:48px;padding:8px 20px;width:100%}}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist/v2/components/NPSScore/NPSScore.scss.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".nps-score{box-sizing:border-box;margin-top:24px;width:100%}.nps-score__container{background:var(--surface-secondary);border:1px solid var(--border-primary);border-radius:16px;padding:24px}.nps-score__question{color:var(--label-primary);font-family:var(--font-family-sans);font-size:18px;font-weight:600;line-height:24px;margin:0 0 16px}.nps-score__labels{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.nps-score__label{align-items:center;display:flex;gap:8px}.nps-score__label span{color:var(--label-secondary);font-family:var(--font-family-sans);font-size:14px;font-weight:500}.nps-score__label--desktop{display:none}@media (min-width:768px){.nps-score__label--desktop{display:flex}}.nps-score__label--mobile{display:flex;justify-content:flex-end;margin-top:12px}@media (min-width:768px){.nps-score__label--mobile{display:none}}.nps-score__label-icon{color:var(--fill-secondary);flex-shrink:0}.nps-score__buttons{display:grid;gap:8px;grid-template-columns:repeat(5,1fr)}@media (min-width:768px){.nps-score__buttons{grid-template-columns:repeat(10,1fr)}}.nps-score__button{background:var(--surface-primary);border:1px solid var(--border-primary);border-radius:12px;color:var(--label-primary);cursor:pointer;font-family:var(--font-family-sans);font-size:18px;font-weight:600;height:48px;transition:all .2s ease}.nps-score__button:hover:not(.nps-score__button--selected){background:var(--surface-primary-hover)}.nps-score__button--selected{background:var(--fill-primary);border-color:#0000;color:var(--label-primary-alt)}.nps-score__expanded{animation:nps-fade-in .2s ease;display:flex;flex-direction:column;gap:16px;margin-top:16px}.nps-score__field--roles{padding-top:16px}.nps-score__field-label{color:var(--label-primary);display:block;font-family:var(--font-family-sans);font-size:14px;font-weight:500;margin-bottom:8px}.nps-score__field-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.nps-score__optional{color:var(--label-secondary)}.nps-score__optional,.nps-score__textarea{font-family:var(--font-family-sans);font-size:14px}.nps-score__textarea{background:var(--surface-primary);border:1px solid var(--border-primary);border-radius:8px;box-sizing:border-box;color:var(--label-primary);min-height:100px;padding:12px;resize:vertical;width:100%}.nps-score__textarea::placeholder{color:var(--label-secondary)}.nps-score__textarea:focus{border-color:var(--fill-primary);outline:none}.nps-score__textarea--error{border-color:var(--fill-danger)}.nps-score__hint{color:var(--label-secondary)}.nps-score__error,.nps-score__hint{font-family:var(--font-family-sans);font-size:14px;margin:4px 0 0}.nps-score__error{color:var(--fill-danger)}.nps-score__add-comment{background:none;border:none;cursor:pointer;font-family:var(--font-family-sans);font-size:14px;font-weight:500;padding:0;text-decoration:underline;transition:color .2s ease}.nps-score__add-comment,.nps-score__add-comment:hover{color:var(--label-action)}.nps-score__roles{display:grid;gap:8px;grid-template-columns:1fr}@media (min-width:640px){.nps-score__roles{gap:4px;grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.nps-score__roles{grid-template-columns:repeat(3,1fr)}}.nps-score__role{align-items:center;cursor:pointer;display:flex;gap:8px;position:relative}.nps-score__role-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--surface-primary);border:2px solid var(--border-primary);border-radius:50%;cursor:pointer;flex-shrink:0;height:20px;margin:0;position:relative;transition:border-color .2s ease;width:20px}.nps-score__role-input:before{background:var(--fill-primary);border-radius:50%;content:\"\";height:10px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:10px}.nps-score__role-input:checked{border-color:var(--fill-primary)}.nps-score__role-input:checked:before{transform:translate(-50%,-50%) scale(1)}.nps-score__role-input:focus{box-shadow:0 0 0 2px var(--border-action);outline:none}.nps-score__role-radio{display:none}.nps-score__role-label{color:var(--label-primary);font-family:var(--font-family-sans);font-size:14px}.nps-score__success{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:32px;text-align:center}.nps-score__success-icon{color:var(--fill-status-success);margin-bottom:16px}.nps-score__success-title{color:var(--label-primary);font-family:var(--font-family-sans);font-size:24px;font-weight:600;margin:0 0 8px}.nps-score__success-message{color:var(--label-secondary);font-family:var(--font-family-sans);font-size:14px;margin:0}@keyframes nps-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}";
+var css_248z = ".nps-score{box-sizing:border-box;margin-top:24px;width:100%}.nps-score__container{background:var(--surface-secondary);border:1px solid var(--border-primary);border-radius:16px;padding:24px}.nps-score__question{color:var(--label-primary);font-family:var(--font-family-sans);font-size:18px;font-weight:600;line-height:24px;margin:0 0 16px}.nps-score__labels{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.nps-score__label{align-items:center;display:flex;gap:8px}.nps-score__label span{color:var(--label-secondary);font-family:var(--font-family-sans);font-size:14px;font-weight:500}.nps-score__label--desktop{display:none}@media (min-width:768px){.nps-score__label--desktop{display:flex}}.nps-score__label--mobile{display:flex;justify-content:flex-end;margin-top:12px}@media (min-width:768px){.nps-score__label--mobile{display:none}}.nps-score__label-icon{color:var(--fill-secondary);flex-shrink:0}.nps-score__buttons{display:grid;gap:8px;grid-template-columns:repeat(5,1fr)}@media (min-width:768px){.nps-score__buttons{grid-template-columns:repeat(10,1fr)}}.nps-score__button{background:var(--surface-primary);border:1px solid var(--border-primary);border-radius:12px;color:var(--label-primary);cursor:pointer;font-family:var(--font-family-sans);font-size:18px;font-weight:600;height:48px;transition:all .2s ease}.nps-score__button:hover:not(.nps-score__button--selected){background:var(--surface-primary-hover)}.nps-score__button--selected{background:var(--fill-primary);border-color:transparent;color:var(--label-primary-alt)}.nps-score__expanded{animation:nps-fade-in .2s ease;display:flex;flex-direction:column;gap:16px;margin-top:16px}.nps-score__field--roles{padding-top:16px}.nps-score__field-label{color:var(--label-primary);display:block;font-family:var(--font-family-sans);font-size:14px;font-weight:500;margin-bottom:8px}.nps-score__field-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.nps-score__optional{color:var(--label-secondary)}.nps-score__optional,.nps-score__textarea{font-family:var(--font-family-sans);font-size:14px}.nps-score__textarea{background:var(--surface-primary);border:1px solid var(--border-primary);border-radius:8px;box-sizing:border-box;color:var(--label-primary);min-height:100px;padding:12px;resize:vertical;width:100%}.nps-score__textarea::placeholder{color:var(--label-secondary)}.nps-score__textarea:focus{border-color:var(--fill-primary);outline:none}.nps-score__textarea--error{border-color:var(--fill-danger)}.nps-score__hint{color:var(--label-secondary)}.nps-score__error,.nps-score__hint{font-family:var(--font-family-sans);font-size:14px;margin:4px 0 0}.nps-score__error{color:var(--fill-danger)}.nps-score__add-comment{background:none;border:none;cursor:pointer;font-family:var(--font-family-sans);font-size:14px;font-weight:500;padding:0;text-decoration:underline;transition:color .2s ease}.nps-score__add-comment,.nps-score__add-comment:hover{color:var(--label-action)}.nps-score__roles{display:grid;gap:8px;grid-template-columns:1fr}@media (min-width:640px){.nps-score__roles{gap:4px;grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.nps-score__roles{grid-template-columns:repeat(3,1fr)}}.nps-score__role{align-items:center;cursor:pointer;display:flex;gap:8px;position:relative}.nps-score__role-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--surface-primary);border:2px solid var(--border-primary);border-radius:50%;cursor:pointer;flex-shrink:0;height:20px;margin:0;position:relative;transition:border-color .2s ease;width:20px}.nps-score__role-input:before{background:var(--fill-primary);border-radius:50%;content:\"\";height:10px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:10px}.nps-score__role-input:checked{border-color:var(--fill-primary)}.nps-score__role-input:checked:before{transform:translate(-50%,-50%) scale(1)}.nps-score__role-input:focus{box-shadow:0 0 0 2px var(--border-action);outline:none}.nps-score__role-radio{display:none}.nps-score__role-label{color:var(--label-primary);font-family:var(--font-family-sans);font-size:14px}.nps-score__success{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:32px;text-align:center}.nps-score__success-icon{color:var(--fill-status-success);margin-bottom:16px}.nps-score__success-title{color:var(--label-primary);font-family:var(--font-family-sans);font-size:24px;font-weight:600;margin:0 0 8px}.nps-score__success-message{color:var(--label-secondary);font-family:var(--font-family-sans);font-size:14px;margin:0}@keyframes nps-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist/v2/components/NewTabs/NewTabs.scss.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".new-tabs{align-items:center;align-self:stretch;border-bottom:1px solid var(--border-primary,#e8e9ef);display:flex;justify-content:space-between;margin:20px 0;padding-bottom:0;padding-left:0;padding-top:0}.new-tabs__container{display:flex;gap:0}.new-tabs__tab{background:none;border:none;color:var(--label-selected,#121e52);cursor:pointer;font-family:var(--font-family-sans);font-size:15px;font-style:normal;font-weight:600;line-height:18px;margin-bottom:0;margin-right:24px;padding:12px 4px;position:relative;transition:color .15s cubic-bezier(.4,0,.2,1)}.new-tabs__tab:after{background-color:initial;border-radius:4px;bottom:0;content:\"\";height:3px;left:50%;position:absolute;transform:translateX(-50%);transition-duration:.25s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.new-tabs__tab:hover:not(:disabled):after{background-color:var(--fill-action-secondary,#6200ee);width:50%}.new-tabs__tab:hover:not(:disabled){color:var(--fill-action-secondary,#6200ee)}.new-tabs__tab--active:after{background-color:var(--fills-main-fill-primary,#14215a)}.new-tabs__tab--active{color:var(--fills-main-fill-primary,#14215a)}.new-tabs__tab:disabled{cursor:not-allowed;opacity:.5}";
+var css_248z = ".new-tabs{align-items:center;align-self:stretch;border-bottom:1px solid var(--border-primary,#e8e9ef);display:flex;justify-content:space-between;margin:20px 0;padding-bottom:0;padding-left:0;padding-top:0}.new-tabs__container{display:flex;gap:0}.new-tabs__tab{background:none;border:none;color:var(--label-selected,#121e52);cursor:pointer;font-family:var(--font-family-sans);font-size:15px;font-style:normal;font-weight:600;line-height:18px;margin-bottom:0;margin-right:24px;padding:12px 4px;position:relative;transition:color .15s cubic-bezier(.4,0,.2,1)}.new-tabs__tab:after{background-color:transparent;border-radius:4px;bottom:0;content:\"\";height:3px;left:50%;position:absolute;transform:translateX(-50%);transition-duration:.25s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.new-tabs__tab:hover:not(:disabled):after{background-color:var(--fill-action-secondary,#6200ee);width:50%}.new-tabs__tab:hover:not(:disabled){color:var(--fill-action-secondary,#6200ee)}.new-tabs__tab--active:after{background-color:var(--fills-main-fill-primary,#14215a)}.new-tabs__tab--active{color:var(--fills-main-fill-primary,#14215a)}.new-tabs__tab:disabled{cursor:not-allowed;opacity:.5}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist/v2/components/PeriodCard/PeriodCard.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import './PeriodCard.scss';
+export interface PeriodCardValue {
+    days: string[];
+    is24Hours: boolean;
+    startTime?: string;
+    endTime?: string;
+    maxCapacity: number;
+    minCapacity: number | null;
+}
+export interface PeriodCardLabels {
+    badge?: string;
+    sectionTitle?: string;
+    minValue?: string;
+    maxValue?: string;
+    days?: string;
+    time?: string;
+    alignToggle?: string;
+    startTime?: string;
+    endTime?: string;
+}
+export interface PeriodCardProps {
+    /** Controlled value for built-in sections. Not needed when using children. */
+    value?: PeriodCardValue;
+    /** Called when built-in sections change. Not needed when using children. */
+    onChange?: (value: PeriodCardValue) => void;
+    onDelete?: () => void;
+    labels?: PeriodCardLabels;
+    dayLabels?: string[];
+    /** Plain text title rendered at the top (e.g. "Period 1"). Mutually exclusive with badge header. */
+    title?: string;
+    /** Hide the badge + delete header row (useful with title) */
+    hideHeader?: boolean;
+    /** Hide the min/max capacity section */
+    hideCapacity?: boolean;
+    /** Hide the days selection section */
+    hideDays?: boolean;
+    /** Hide the time section */
+    hideTime?: boolean;
+    /** Make the min value field optional (shows "(optional)" label) */
+    minOptional?: boolean;
+    /** Custom icon for the badge. Defaults to ClockIcon */
+    badgeIcon?: React.ReactNode;
+    /** Custom content. When provided, built-in sections (capacity, days, time) are not rendered. */
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const PeriodCard: React.FC<PeriodCardProps>;
+export interface PeriodCardSectionProps {
+    label?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const PeriodCardSection: React.FC<PeriodCardSectionProps>;
+export interface PeriodCardTimeRangeProps {
+    startTime: string;
+    endTime: string;
+    onStartTimeChange: (value: string) => void;
+    onEndTimeChange: (value: string) => void;
+    startLabel?: string;
+    endLabel?: string;
+    separator?: string;
+    className?: string;
+}
+export declare const PeriodCardTimeRange: React.FC<PeriodCardTimeRangeProps>;
+//# sourceMappingURL=PeriodCard.d.ts.map

package/dist/v2/components/PeriodCard/PeriodCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeriodCard.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/PeriodCard/PeriodCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,mBAAmB,CAAA;AAE1B,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAwBD,MAAM,WAAW,eAAe;IAC9B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,oGAAoG;IACpG,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,uDAAuD;IACvD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,gGAAgG;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0LhD,CAAA;AAID,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAW9D,CAAA;AAID,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAyBlE,CAAA"}

package/dist/v2/components/PeriodCard/PeriodCard.js

@@ -0,0 +1,351 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import 'react';
+import { NewInput } from '../NewInput/NewInput.js';
+import { Checkbox } from '../Checkbox/Checkbox.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import { ClockIcon } from '../../icons/index.js';
+import './PeriodCard.scss.js';
+
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var DEFAULT_LABELS = {
+    badge: 'Period',
+    sectionTitle: 'Override',
+    minValue: 'Min',
+    maxValue: 'Max',
+    days: 'Days',
+    time: 'Time',
+    alignToggle: 'Align with Opening Hours',
+    startTime: 'Start Time',
+    endTime: 'End Time'
+};
+var DAY_OPTIONS = [
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+    'Sunday'
+];
+var PeriodCard = function(param) {
+    var value = param.value, onChange = param.onChange, onDelete = param.onDelete, labelsProp = param.labels, dayLabels = param.dayLabels, title = param.title, _param_hideHeader = param.hideHeader, hideHeader = _param_hideHeader === void 0 ? false : _param_hideHeader, _param_hideCapacity = param.hideCapacity, hideCapacity = _param_hideCapacity === void 0 ? false : _param_hideCapacity, _param_hideDays = param.hideDays, hideDays = _param_hideDays === void 0 ? false : _param_hideDays, _param_hideTime = param.hideTime, hideTime = _param_hideTime === void 0 ? false : _param_hideTime, _param_minOptional = param.minOptional, minOptional = _param_minOptional === void 0 ? true : _param_minOptional, badgeIcon = param.badgeIcon, children = param.children, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className;
+    var labels = _object_spread({}, DEFAULT_LABELS, labelsProp);
+    var days = dayLabels || DAY_OPTIONS;
+    var hasChildren = !!children;
+    var updateField = function(updates) {
+        if (value && onChange) {
+            onChange(_object_spread({}, value, updates));
+        }
+    };
+    var toggleDay = function(day) {
+        if (!value) return;
+        var current = value.days || [];
+        var updated = current.includes(day) ? current.filter(function(d) {
+            return d !== day;
+        }) : _to_consumable_array(current).concat([
+            day
+        ]);
+        updateField({
+            days: updated
+        });
+    };
+    var toggleAlignHours = function(checked) {
+        if (checked) {
+            updateField({
+                is24Hours: true,
+                startTime: undefined,
+                endTime: undefined
+            });
+        } else {
+            updateField({
+                is24Hours: false,
+                startTime: '09:00',
+                endTime: '17:00'
+            });
+        }
+    };
+    var leftDays = days.slice(0, 4);
+    var rightDays = days.slice(4);
+    var _value_is24Hours;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "period-card ".concat(className),
+        children: [
+            title && /*#__PURE__*/ jsxs("div", {
+                className: "period-card__title-row",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "period-card__title",
+                        children: title
+                    }),
+                    onDelete && /*#__PURE__*/ jsx(IconButton, {
+                        icon: "delete",
+                        onClick: onDelete
+                    })
+                ]
+            }),
+            !hideHeader && !title && /*#__PURE__*/ jsxs("div", {
+                className: "period-card__header",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "period-card__badge-group",
+                        children: [
+                            badgeIcon || /*#__PURE__*/ jsx(ClockIcon, {
+                                width: 20,
+                                height: 20
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "period-card__badge",
+                                children: labels.badge
+                            })
+                        ]
+                    }),
+                    onDelete && /*#__PURE__*/ jsx(IconButton, {
+                        icon: "delete",
+                        onClick: onDelete
+                    })
+                ]
+            }),
+            hasChildren ? children : /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    !hideCapacity && value && /*#__PURE__*/ jsxs("div", {
+                        className: "period-card__section",
+                        children: [
+                            /*#__PURE__*/ jsx("label", {
+                                className: "period-card__section-label",
+                                children: labels.sectionTitle
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "period-card__row",
+                                children: [
+                                    /*#__PURE__*/ jsx(NewInput, {
+                                        label: labels.minValue,
+                                        optional: minOptional,
+                                        type: "number",
+                                        min: 0,
+                                        value: value.minCapacity === null || value.minCapacity === 0 ? '' : value.minCapacity,
+                                        onChange: function(e) {
+                                            return updateField({
+                                                minCapacity: e.target.value === '' ? null : parseInt(e.target.value, 10) || 0
+                                            });
+                                        }
+                                    }),
+                                    /*#__PURE__*/ jsx(NewInput, {
+                                        label: labels.maxValue,
+                                        type: "number",
+                                        min: 1,
+                                        value: value.maxCapacity === 0 ? '' : value.maxCapacity,
+                                        onChange: function(e) {
+                                            return updateField({
+                                                maxCapacity: e.target.value === '' ? 0 : parseInt(e.target.value, 10) || 0
+                                            });
+                                        }
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    !hideDays && value && /*#__PURE__*/ jsxs("div", {
+                        className: "period-card__section",
+                        children: [
+                            /*#__PURE__*/ jsx("label", {
+                                className: "period-card__section-label",
+                                children: labels.days
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "period-card__days-grid",
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "period-card__days-col",
+                                        children: leftDays.map(function(day) {
+                                            var _value_days;
+                                            return /*#__PURE__*/ jsx(DayCheckbox, {
+                                                label: day,
+                                                checked: ((_value_days = value.days) === null || _value_days === void 0 ? void 0 : _value_days.includes(day)) || false,
+                                                onChange: function() {
+                                                    return toggleDay(day);
+                                                }
+                                            }, day);
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "period-card__days-col",
+                                        children: rightDays.map(function(day) {
+                                            var _value_days;
+                                            return /*#__PURE__*/ jsx(DayCheckbox, {
+                                                label: day,
+                                                checked: ((_value_days = value.days) === null || _value_days === void 0 ? void 0 : _value_days.includes(day)) || false,
+                                                onChange: function() {
+                                                    return toggleDay(day);
+                                                }
+                                            }, day);
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    !hideTime && value && /*#__PURE__*/ jsxs("div", {
+                        className: "period-card__section",
+                        children: [
+                            /*#__PURE__*/ jsx("label", {
+                                className: "period-card__section-label",
+                                children: labels.time
+                            }),
+                            /*#__PURE__*/ jsx(Checkbox, {
+                                label: labels.alignToggle,
+                                checked: (_value_is24Hours = value.is24Hours) !== null && _value_is24Hours !== void 0 ? _value_is24Hours : true,
+                                onChange: function(e) {
+                                    return toggleAlignHours(e.target.checked);
+                                }
+                            }),
+                            !value.is24Hours && /*#__PURE__*/ jsxs("div", {
+                                className: "period-card__row period-card__row--time",
+                                children: [
+                                    /*#__PURE__*/ jsx(NewInput, {
+                                        label: labels.startTime,
+                                        type: "time",
+                                        value: value.startTime || '09:00',
+                                        onChange: function(e) {
+                                            return updateField({
+                                                startTime: e.target.value
+                                            });
+                                        }
+                                    }),
+                                    /*#__PURE__*/ jsx(NewInput, {
+                                        label: labels.endTime,
+                                        type: "time",
+                                        value: value.endTime || '17:00',
+                                        onChange: function(e) {
+                                            return updateField({
+                                                endTime: e.target.value
+                                            });
+                                        }
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+var PeriodCardSection = function(param) {
+    var label = param.label, children = param.children, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "period-card__section ".concat(className),
+        children: [
+            label && /*#__PURE__*/ jsx("label", {
+                className: "period-card__section-label",
+                children: label
+            }),
+            children
+        ]
+    });
+};
+PeriodCardSection.displayName = 'PeriodCardSection';
+var PeriodCardTimeRange = function(param) {
+    var startTime = param.startTime, endTime = param.endTime, onStartTimeChange = param.onStartTimeChange, onEndTimeChange = param.onEndTimeChange, startLabel = param.startLabel, endLabel = param.endLabel, _param_separator = param.separator, separator = _param_separator === void 0 ? 'to' : _param_separator, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "period-card__time-range ".concat(className),
+        children: [
+            /*#__PURE__*/ jsx(NewInput, {
+                label: startLabel,
+                type: "time",
+                value: startTime,
+                onChange: function(e) {
+                    return onStartTimeChange(e.target.value);
+                }
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "period-card__time-separator",
+                children: separator
+            }),
+            /*#__PURE__*/ jsx(NewInput, {
+                label: endLabel,
+                type: "time",
+                value: endTime,
+                onChange: function(e) {
+                    return onEndTimeChange(e.target.value);
+                }
+            })
+        ]
+    });
+};
+PeriodCardTimeRange.displayName = 'PeriodCardTimeRange';
+var DayCheckbox = function(param) {
+    var label = param.label, checked = param.checked, onChange = param.onChange;
+    return /*#__PURE__*/ jsxs("label", {
+        className: "day-checkbox",
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                type: "checkbox",
+                className: "day-checkbox__input",
+                checked: checked,
+                onChange: onChange
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "day-checkbox__box"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "day-checkbox__label",
+                children: label
+            })
+        ]
+    });
+};
+PeriodCard.displayName = 'PeriodCard';
+
+export { PeriodCard, PeriodCardSection, PeriodCardTimeRange };

package/dist/v2/components/PeriodCard/PeriodCard.scss.js

@@ -0,0 +1,6 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".period-card{background:var(--surface-secondary,#f5f6fa);border-radius:8px;display:flex;flex-direction:column;gap:16px;padding:16px}.period-card__title-row{align-items:center;display:flex;justify-content:space-between}.period-card__title{color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans);font-size:16px;font-weight:600}.period-card__header{align-items:center;display:flex;justify-content:space-between}.period-card__badge-group{align-items:center;color:var(--label-secondary,#6b7a99);display:flex;gap:8px}.period-card__badge{border:1px solid var(--border-primary,#e2e2e2);border-radius:999px;color:var(--label-secondary,#6b7a99);font-family:var(--font-family-sans);font-size:12px;padding:2px 10px}.period-card__section{display:flex;flex-direction:column;gap:8px}.period-card__section-label{color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans);font-size:14px;font-weight:600}.period-card__row{display:grid;gap:16px;grid-template-columns:1fr 1fr}@media (max-width:768px){.period-card__row{gap:12px;grid-template-columns:1fr}}.period-card__row--time{margin-top:8px}.period-card__days-grid{display:grid;gap:8px;grid-template-columns:1fr 1fr}.period-card__days-col{display:flex;flex-direction:column;gap:8px}.period-card__time-range{align-items:end;display:grid;gap:12px;grid-template-columns:1fr auto 1fr}@media (max-width:768px){.period-card__time-range{gap:8px;grid-template-columns:1fr}}.period-card__time-separator{color:var(--label-secondary,#6b7a99);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:14px;padding-bottom:10px}.day-checkbox{align-items:center;cursor:pointer;display:flex;gap:6px;-webkit-user-select:none;user-select:none}.day-checkbox__input{height:0;opacity:0;position:absolute;width:0}.day-checkbox__box{background:var(--surface-primary,#fff);border:1px solid var(--border-primary,#e2e2e2);border-radius:3px;height:16px;min-width:16px;position:relative;transition:all .15s ease;width:16px}.day-checkbox__box:after{border:solid #fff;border-width:0 2px 2px 0;content:\"\";height:9px;left:4.5px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);width:5px}.day-checkbox__input:checked+.day-checkbox__box{background:var(--fill-selected,#14215a);border-color:var(--fill-selected,#14215a)}.day-checkbox__input:checked+.day-checkbox__box:after{opacity:1}.day-checkbox__label{color:var(--label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:14px}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/dist/v2/components/PeriodCard/index.d.ts

@@ -0,0 +1,3 @@
+export { PeriodCard, PeriodCardSection, PeriodCardTimeRange } from './PeriodCard';
+export type { PeriodCardProps, PeriodCardValue, PeriodCardLabels, PeriodCardSectionProps, PeriodCardTimeRangeProps, } from './PeriodCard';
+//# sourceMappingURL=index.d.ts.map

package/dist/v2/components/PeriodCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/PeriodCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AACjF,YAAY,EACV,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,cAAc,CAAA"}

package/dist/v2/components/ReorderRow/ReorderRow.d.ts

@@ -0,0 +1,24 @@
+import React, { HTMLAttributes } from 'react';
+import './ReorderRow.scss';
+export interface DragHandleRenderProps {
+    /** Spread onto the drag handle element for dnd-kit or similar */
+    attributes?: HTMLAttributes<HTMLElement>;
+    listeners?: Record<string, (...args: any[]) => any> | undefined;
+}
+export interface ReorderRowProps {
+    label: string;
+    subtitle?: string;
+    /** Render prop for the drag handle — receives attributes/listeners to spread */
+    dragHandleProps?: DragHandleRenderProps;
+    /** Hide the drag handle (e.g. when not in reorder mode) */
+    hideDragHandle?: boolean;
+    /** Content between the drag handle and label (e.g. color dot, icon) */
+    leftContent?: React.ReactNode;
+    /** Right-side content (e.g. action menu, capacity badge) */
+    rightContent?: React.ReactNode;
+    onClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const ReorderRow: React.ForwardRefExoticComponent<ReorderRowProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ReorderRow.d.ts.map

package/dist/v2/components/ReorderRow/ReorderRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReorderRow.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/ReorderRow/ReorderRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE7C,OAAO,mBAAmB,CAAA;AAE1B,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IAExC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,GAAG,SAAS,CAAA;CAChE;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gFAAgF;IAChF,eAAe,CAAC,EAAE,qBAAqB,CAAA;IACvC,2DAA2D;IAC3D,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,uEAAuE;IACvE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,4DAA4D;IAC5D,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAED,eAAO,MAAM,UAAU,wFA0DtB,CAAA"}

package/dist/v2/components/ReorderRow/ReorderRow.js

@@ -0,0 +1,109 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { GripVerticalIcon } from '../../icons/index.js';
+import './ReorderRow.scss.js';
+
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+var ReorderRow = /*#__PURE__*/ React__default.forwardRef(function(param, ref) {
+    var label = param.label, subtitle = param.subtitle, dragHandleProps = param.dragHandleProps, _param_hideDragHandle = param.hideDragHandle, hideDragHandle = _param_hideDragHandle === void 0 ? false : _param_hideDragHandle, leftContent = param.leftContent, rightContent = param.rightContent, onClick = param.onClick, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className, style = param.style;
+    var handleKeyDown = onClick ? function(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick();
+        }
+    } : undefined;
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        style: style,
+        className: "reorder-row ".concat(onClick ? 'reorder-row--clickable' : '', " ").concat(className),
+        onClick: onClick,
+        onKeyDown: handleKeyDown,
+        role: onClick ? 'button' : undefined,
+        tabIndex: onClick ? 0 : undefined,
+        children: [
+            !hideDragHandle && /*#__PURE__*/ jsx("div", _object_spread_props(_object_spread({
+                className: "reorder-row__drag-handle"
+            }, dragHandleProps === null || dragHandleProps === void 0 ? void 0 : dragHandleProps.attributes, dragHandleProps === null || dragHandleProps === void 0 ? void 0 : dragHandleProps.listeners), {
+                children: GripVerticalIcon({
+                    width: 20,
+                    height: 20
+                })
+            })),
+            leftContent && /*#__PURE__*/ jsx("div", {
+                className: "reorder-row__left",
+                children: leftContent
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "reorder-row__content",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "reorder-row__label",
+                        children: label
+                    }),
+                    subtitle && /*#__PURE__*/ jsx("span", {
+                        className: "reorder-row__subtitle",
+                        children: subtitle
+                    })
+                ]
+            }),
+            rightContent && /*#__PURE__*/ jsx("div", {
+                className: "reorder-row__right",
+                children: rightContent
+            })
+        ]
+    });
+});
+ReorderRow.displayName = 'ReorderRow';
+
+export { ReorderRow };

package/dist/v2/components/ReorderRow/ReorderRow.scss.js

@@ -0,0 +1,6 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".reorder-row{align-items:center;background:var(--surface-secondary,#f5f6fa);border-radius:8px;display:flex;gap:12px;padding:12px 16px}.reorder-row--clickable{cursor:pointer}.reorder-row--clickable:hover{background:var(--surface-secondary-hover,#edeef3)}.reorder-row__drag-handle{align-items:center;color:var(--label-secondary,#6b7a99);cursor:grab;display:flex;flex-shrink:0}.reorder-row__drag-handle:active{cursor:grabbing}.reorder-row__left{align-items:center;display:flex;flex-shrink:0}.reorder-row__content{display:flex;flex:1;flex-direction:column;min-width:0}.reorder-row__label{color:var(--label-primary,#121e52);font-size:14px;font-weight:600;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reorder-row__label,.reorder-row__subtitle{font-family:var(--font-family-sans,\"Geist\",system-ui,sans-serif)}.reorder-row__subtitle{color:var(--label-secondary,#6b7a99);font-size:13px;font-weight:400;line-height:16px;margin-top:2px}.reorder-row__right{align-items:center;display:flex;flex-shrink:0;gap:8px}";
+styleInject(css_248z);
+
+export { css_248z as default };