@licklist/design 0.78.36 → 0.78.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/index.js +1 -0
  2. package/dist/v2/components/Button/GhostButton.scss.js +1 -1
  3. package/dist/v2/components/InputCheckbox/InputCheckbox.d.ts +7 -0
  4. package/dist/v2/components/InputCheckbox/InputCheckbox.d.ts.map +1 -0
  5. package/dist/v2/components/InputCheckbox/InputCheckbox.js +85 -0
  6. package/dist/v2/components/InputCheckbox/InputCheckbox.scss.js +6 -0
  7. package/dist/v2/components/InputCheckbox/index.d.ts +3 -0
  8. package/dist/v2/components/InputCheckbox/index.d.ts.map +1 -0
  9. package/dist/v2/components/NewTable/NewTable.scss.js +1 -1
  10. package/dist/v2/components/QuickFilter/QuickFilter.scss.js +1 -1
  11. package/dist/v2/components/index.d.ts +2 -0
  12. package/dist/v2/components/index.d.ts.map +1 -1
  13. package/dist/v2/dashboard-analytics/metric-card/MetricCard.d.ts +1 -1
  14. package/dist/v2/dashboard-analytics/metric-card/MetricCard.d.ts.map +1 -1
  15. package/dist/v2/dashboard-analytics/metric-card/MetricCard.js +2 -1
  16. package/dist/v2/dashboard-analytics/metric-card/MetricCard.scss.js +1 -1
  17. package/dist/v2/pages/Settings/components/SidebarCustomisation.js +1 -0
  18. package/dist/v2/pages/Settings/components/SidebarNavItem.js +1 -0
  19. package/package.json +1 -1
  20. package/src/v2/components/Button/GhostButton.scss +1 -1
  21. package/src/v2/components/Customer/CustomerDetail.scss +82 -207
  22. package/src/v2/components/Customer/CustomersList.scss +30 -11
  23. package/src/v2/components/InputCheckbox/InputCheckbox.scss +53 -0
  24. package/src/v2/components/InputCheckbox/InputCheckbox.tsx +24 -0
  25. package/src/v2/components/InputCheckbox/index.ts +2 -0
  26. package/src/v2/components/NewTable/NewTable.scss +4 -3
  27. package/src/v2/components/QuickFilter/QuickFilter.scss +0 -1
  28. package/src/v2/components/index.ts +3 -0
  29. package/src/v2/dashboard-analytics/metric-card/MetricCard.scss +16 -1
  30. package/src/v2/dashboard-analytics/metric-card/MetricCard.tsx +14 -11
package/dist/index.js CHANGED
@@ -217,6 +217,7 @@ export { DeleteModal } from './v2/components/Modal/DeleteModal.js';
217
217
  export { FormField } from './v2/components/FormField/FormField.js';
218
218
  export { NewInput } from './v2/components/NewInput/NewInput.js';
219
219
  export { Checkbox } from './v2/components/Checkbox/Checkbox.js';
220
+ export { InputCheckbox } from './v2/components/InputCheckbox/InputCheckbox.js';
220
221
  export { WYSIWYGEditor } from './v2/components/WYSIWYGEditor/WYSIWYGEditor.js';
221
222
  export { NewPageHeader } from './v2/components/NewPageHeader/NewPageHeader.js';
222
223
  export { SectionHeader } from './v2/components/SectionHeader/SectionHeader.js';
@@ -1,6 +1,6 @@
1
1
  import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = ".ghost-button{align-items:center;background:#0000;border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:6px;color:var(--labels-main-label-primary,#121e52);cursor:pointer;display:inline-flex;font-family:var(--font-family-sans);font-weight:500;gap:6px;justify-content:center;transition:background-color .2s ease;white-space:nowrap}.ghost-button:not(.active):hover:not(:disabled){background-color:var(--surfaces-main-background-tertiary,#e8e9ef)}.ghost-button:disabled{cursor:default;opacity:.5}.ghost-button:focus-visible{outline:2px solid var(--fills-main-fill-action,#6200ee);outline-offset:2px}.ghost-button.active{background-color:var(--fill-primary,#6200ee);border-color:var(--border-selected,#121e52)}.ghost-button.active,.ghost-button.active .ghost-button__text{color:var(--neutral-white,#fff)}.ghost-button--sm{font-size:13px;height:28px;padding:0 8px}.ghost-button--md{font-size:14px;height:36px;padding:0 12px 0 8px}.ghost-button__icon{align-items:center;display:flex;flex-shrink:0;justify-content:center}.ghost-button__icon svg{height:20px;width:20px}";
3
+ var css_248z = ".ghost-button{align-items:center;background:#0000;border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:6px;color:var(--labels-main-label-primary,#121e52);cursor:pointer;display:inline-flex;font-family:var(--font-family-sans);font-weight:500;gap:6px;justify-content:center;transition:background-color .2s ease;white-space:nowrap}.ghost-button:not(.active):hover:not(:disabled){background-color:var(--surfaces-main-background-tertiary,#e8e9ef)}.ghost-button:disabled{cursor:default;opacity:.5}.ghost-button:focus-visible{outline:2px solid var(--fills-main-fill-action,#6200ee);outline-offset:2px}.ghost-button.active{background-color:var(--fill-primary,#6200ee);border-color:var(--border-selected,#121e52)}.ghost-button.active,.ghost-button.active .ghost-button__text{color:var(--neutral-white,#fff)}.ghost-button--sm{font-size:11px;height:28px;padding:0 8px}.ghost-button--md{font-size:14px;height:36px;padding:0 12px 0 8px}.ghost-button__icon{align-items:center;display:flex;flex-shrink:0;justify-content:center}.ghost-button__icon svg{height:20px;width:20px}";
4
4
  styleInject(css_248z);
5
5
 
6
6
  export { css_248z as default };
@@ -0,0 +1,7 @@
1
+ import React, { InputHTMLAttributes } from 'react';
2
+ import './InputCheckbox.scss';
3
+ export interface InputCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
4
+ label?: string | React.ReactNode;
5
+ }
6
+ export declare const InputCheckbox: React.ForwardRefExoticComponent<InputCheckboxProps & React.RefAttributes<HTMLInputElement>>;
7
+ //# sourceMappingURL=InputCheckbox.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InputCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/InputCheckbox/InputCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,mBAAmB,EAAc,MAAM,OAAO,CAAA;AAC9D,OAAO,sBAAsB,CAAA;AAE7B,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3D,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;CACjC;AAED,eAAO,MAAM,aAAa,6FAazB,CAAA"}
@@ -0,0 +1,85 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { forwardRef } from 'react';
3
+ import './InputCheckbox.scss.js';
4
+
5
+ function _define_property(obj, key, value) {
6
+ if (key in obj) {
7
+ Object.defineProperty(obj, key, {
8
+ value: value,
9
+ enumerable: true,
10
+ configurable: true,
11
+ writable: true
12
+ });
13
+ } else {
14
+ obj[key] = value;
15
+ }
16
+ return obj;
17
+ }
18
+ function _object_spread(target) {
19
+ for(var i = 1; i < arguments.length; i++){
20
+ var source = arguments[i] != null ? arguments[i] : {};
21
+ var ownKeys = Object.keys(source);
22
+ if (typeof Object.getOwnPropertySymbols === "function") {
23
+ ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
24
+ return Object.getOwnPropertyDescriptor(source, sym).enumerable;
25
+ }));
26
+ }
27
+ ownKeys.forEach(function(key) {
28
+ _define_property(target, key, source[key]);
29
+ });
30
+ }
31
+ return target;
32
+ }
33
+ function _object_without_properties(source, excluded) {
34
+ if (source == null) return {};
35
+ var target = _object_without_properties_loose(source, excluded);
36
+ var key, i;
37
+ if (Object.getOwnPropertySymbols) {
38
+ var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
39
+ for(i = 0; i < sourceSymbolKeys.length; i++){
40
+ key = sourceSymbolKeys[i];
41
+ if (excluded.indexOf(key) >= 0) continue;
42
+ if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
43
+ target[key] = source[key];
44
+ }
45
+ }
46
+ return target;
47
+ }
48
+ function _object_without_properties_loose(source, excluded) {
49
+ if (source == null) return {};
50
+ var target = {};
51
+ var sourceKeys = Object.keys(source);
52
+ var key, i;
53
+ for(i = 0; i < sourceKeys.length; i++){
54
+ key = sourceKeys[i];
55
+ if (excluded.indexOf(key) >= 0) continue;
56
+ target[key] = source[key];
57
+ }
58
+ return target;
59
+ }
60
+ var InputCheckbox = /*#__PURE__*/ forwardRef(function(_param, ref) {
61
+ var label = _param.label, _param_className = _param.className, className = _param_className === void 0 ? '' : _param_className, props = _object_without_properties(_param, [
62
+ "label",
63
+ "className"
64
+ ]);
65
+ return /*#__PURE__*/ jsxs("label", {
66
+ className: "input-checkbox ".concat(className),
67
+ children: [
68
+ /*#__PURE__*/ jsx("input", _object_spread({
69
+ ref: ref,
70
+ type: "checkbox",
71
+ className: "input-checkbox__input"
72
+ }, props)),
73
+ /*#__PURE__*/ jsx("span", {
74
+ className: "input-checkbox__box"
75
+ }),
76
+ label && /*#__PURE__*/ jsx("span", {
77
+ className: "input-checkbox__label",
78
+ children: label
79
+ })
80
+ ]
81
+ });
82
+ });
83
+ InputCheckbox.displayName = 'InputCheckbox';
84
+
85
+ export { InputCheckbox };
@@ -0,0 +1,6 @@
1
+ import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
2
+
3
+ var css_248z = ".input-checkbox{align-items:center;cursor:pointer;display:flex;gap:6px;-webkit-user-select:none;user-select:none}.input-checkbox__input{height:0;opacity:0;position:absolute;width:0}.input-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}.input-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}.input-checkbox__input:checked+.input-checkbox__box{background:var(--fill-selected,#14215a);border-color:var(--fill-selected,#14215a)}.input-checkbox__input:checked+.input-checkbox__box:after{opacity:1}.input-checkbox__label{color:var(--label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:14px}";
4
+ styleInject(css_248z);
5
+
6
+ export { css_248z as default };
@@ -0,0 +1,3 @@
1
+ export { InputCheckbox } from './InputCheckbox';
2
+ export type { InputCheckboxProps } from './InputCheckbox';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/InputCheckbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA"}
@@ -1,6 +1,6 @@
1
1
  import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = ".new-table-wrapper{overflow-x:auto;overflow-y:visible;width:100%}.new-table-wrapper.action-menu-open{overflow:visible!important}.new-table{border-collapse:collapse;text-align:left;width:100%}.new-table__head{background-color:var(--surface-secondary,#f8f8fa)}.new-table__header-cell{border-bottom:1px solid var(--border-primary,#e8e9ef);color:var(--label-secondary,#9399b3);font-size:var(--text-small-size,13px);font-weight:500;padding:16px 24px;white-space:nowrap}.new-table__body{background-color:var(--neutral-white,#fff)}.new-table__row{border-bottom:1px solid var(--border-primary,#e8e9ef);overflow:visible;transition:background-color .2s ease}.new-table__row.action-menu-open{overflow:visible!important;position:relative;z-index:20}.new-table__row.action-menu-open .new-table__cell{overflow:visible!important}.new-table__row:last-child{border-bottom:none}.new-table__row--clickable{cursor:pointer}.new-table__row--clickable:hover{background-color:var(--surface-primary-hover,#f8f8fa)}.new-table__cell{color:var(--label-primary,#121e52);font-size:var(--text-base-size,14px);overflow:visible;padding:16px 24px;vertical-align:middle}.new-table__no-data-cell{color:#9399b3;font-size:16px;font-weight:500;padding:64px 24px;text-align:center}@media (max-width:768px){.new-table-wrapper{-webkit-overflow-scrolling:touch}.new-table{min-width:600px}.new-table__header-cell{font-size:12px;padding:12px 16px}.new-table__cell{font-size:13px;padding:12px 16px}.new-table__no-data-cell{font-size:14px;padding:48px 16px}}@media (max-width:480px){.new-table{min-width:500px}.new-table__cell,.new-table__header-cell{padding:10px 12px}.new-table__header-cell{font-size:11px}.new-table__cell{font-size:12px}.new-table__no-data-cell{font-size:13px;padding:32px 12px}}";
3
+ var css_248z = ".new-table-wrapper{overflow-x:auto;overflow-y:visible;width:100%}.new-table-wrapper.action-menu-open{overflow:visible!important}.new-table{border-collapse:collapse;min-width:100%;table-layout:fixed;text-align:left}.new-table__head{background-color:var(--surface-secondary,#f8f8fa)}.new-table__header-cell{border-bottom:1px solid var(--border-primary,#e8e9ef);color:var(--label-secondary,#9399b3);font-size:var(--text-small-size,13px);font-weight:500;padding:16px 24px;white-space:nowrap}.new-table__body{background-color:var(--neutral-white,#fff)}.new-table__row{border-bottom:1px solid var(--border-primary,#e8e9ef);overflow:visible;transition:background-color .2s ease}.new-table__row.action-menu-open{overflow:visible!important;position:relative;z-index:20}.new-table__row.action-menu-open .new-table__cell{overflow:visible!important}.new-table__row:last-child{border-bottom:none}.new-table__row--clickable{cursor:pointer}.new-table__row--clickable:hover{background-color:var(--surface-primary-hover,#f8f8fa)}.new-table__cell{color:var(--label-primary,#121e52);font-size:var(--text-base-size,14px);overflow:visible;padding:16px 24px;vertical-align:middle}.new-table__no-data-cell{color:#9399b3;font-size:16px;font-weight:500;padding:64px 24px;text-align:center}@media (max-width:768px){.new-table-wrapper{-webkit-overflow-scrolling:touch}.new-table{min-width:100%}.new-table__header-cell{font-size:12px;padding:12px 16px}.new-table__cell{font-size:13px;padding:12px 16px}.new-table__no-data-cell{font-size:14px;padding:48px 16px}}@media (max-width:480px){.new-table{min-width:100%}.new-table__cell,.new-table__header-cell{padding:10px 12px}.new-table__header-cell{font-size:11px}.new-table__cell{font-size:12px}.new-table__no-data-cell{font-size:13px;padding:32px 12px}}";
4
4
  styleInject(css_248z);
5
5
 
6
6
  export { css_248z as default };
@@ -1,6 +1,6 @@
1
1
  import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = ".quick-filter{align-items:center;display:flex;gap:12px}.quick-filter__label{color:var(--label-secondary,#9399b3);font-size:var(--text-small-size,13px);font-weight:500;white-space:nowrap}.quick-filter__options{-ms-overflow-style:none;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.quick-filter__options::-webkit-scrollbar{display:none}.quick-filter__options .ghost-button{border-radius:100px;flex-shrink:0;font-family:var(--font-family-mono,\"Geist Mono\",monospace)}@media (max-width:768px){.quick-filter{align-items:center;display:flex;flex-direction:row;gap:12px;width:100%}.quick-filter__label{font-size:12px}.quick-filter__options{display:flex;flex:1;flex-wrap:nowrap;gap:6px;margin:0;min-width:0;overflow-x:auto;padding:0}.quick-filter__options .ghost-button{border-radius:100px;flex-shrink:0}}@media (max-width:480px){.quick-filter{gap:8px}.quick-filter__label{font-size:11px}.quick-filter__options{gap:4px}}";
3
+ var css_248z = ".quick-filter{align-items:center;display:flex;gap:12px}.quick-filter__label{color:var(--label-secondary,#9399b3);font-size:var(--text-small-size,13px);font-weight:500;white-space:nowrap}.quick-filter__options{-ms-overflow-style:none;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none}.quick-filter__options::-webkit-scrollbar{display:none}.quick-filter__options .ghost-button{border-radius:100px;flex-shrink:0;font-family:var(--font-family-mono,\"Geist Mono\",monospace)}@media (max-width:768px){.quick-filter{align-items:center;display:flex;flex-direction:row;gap:12px;width:100%}.quick-filter__label{font-size:12px}.quick-filter__options{display:flex;flex:1;flex-wrap:nowrap;gap:6px;margin:0;min-width:0;overflow-x:auto;padding:0}.quick-filter__options .ghost-button{border-radius:100px;flex-shrink:0}}@media (max-width:480px){.quick-filter{gap:8px}.quick-filter__label{font-size:11px}.quick-filter__options{gap:4px}}";
4
4
  styleInject(css_248z);
5
5
 
6
6
  export { css_248z as default };
@@ -18,6 +18,8 @@ export { NewInput } from './NewInput';
18
18
  export type { NewInputProps } from './NewInput';
19
19
  export { Checkbox } from './Checkbox';
20
20
  export type { CheckboxProps } from './Checkbox';
21
+ export { InputCheckbox } from './InputCheckbox';
22
+ export type { InputCheckboxProps } from './InputCheckbox';
21
23
  export { WYSIWYGEditor } from './WYSIWYGEditor';
22
24
  export type { WYSIWYGEditorProps } from './WYSIWYGEditor';
23
25
  export { NewPageHeader } from './NewPageHeader';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/v2/components/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/v2/components/index.ts"],"names":[],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import './MetricCard.scss';
3
3
  interface MetricCardProps {
4
- icon: string;
4
+ icon?: string;
5
5
  title: string;
6
6
  value: string;
7
7
  performance?: {
@@ -1 +1 @@
1
- {"version":3,"file":"MetricCard.d.ts","sourceRoot":"","sources":["../../../../src/v2/dashboard-analytics/metric-card/MetricCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,mBAAmB,CAAC;AAE3B,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE;QACZ,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;QAC/B,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqDhD,CAAC;AAEF,YAAY,EAAE,eAAe,EAAE,CAAC"}
1
+ {"version":3,"file":"MetricCard.d.ts","sourceRoot":"","sources":["../../../../src/v2/dashboard-analytics/metric-card/MetricCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,mBAAmB,CAAC;AAE3B,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE;QACZ,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;QAC/B,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwDhD,CAAC;AAEF,YAAY,EAAE,eAAe,EAAE,CAAC"}
@@ -11,12 +11,13 @@ var MetricCard = function(param) {
11
11
  (className === null || className === void 0 ? void 0 : className.includes('h-20')) && 'h-20',
12
12
  (className === null || className === void 0 ? void 0 : className.includes('h-16')) && 'h-16',
13
13
  showStatusDot && 'status-active',
14
+ !icon && 'metric-card--no-icon',
14
15
  className
15
16
  ].filter(Boolean).join(' ');
16
17
  return /*#__PURE__*/ jsxs("div", {
17
18
  className: cardClasses,
18
19
  children: [
19
- /*#__PURE__*/ jsx("div", {
20
+ icon && /*#__PURE__*/ jsx("div", {
20
21
  className: "metric-card__icon-wrapper",
21
22
  children: /*#__PURE__*/ jsx("img", {
22
23
  src: icon,
@@ -1,6 +1,6 @@
1
1
  import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- 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-regular-emphasis-weight:500;--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}.heading-desktop-xxl{font-size:var(--heading-xxl-size);font-weight:var(--heading-xxl-weight);line-height:var(--heading-xxl-line)}.heading-desktop-xl,.heading-desktop-xxl{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-desktop-xl{font-size:var(--heading-xl-size);font-weight:var(--heading-xl-weight);line-height:var(--heading-xl-line)}.heading-desktop-h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line)}.heading-desktop-h1,.heading-desktop-h2{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-desktop-h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line)}.heading-desktop-h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line)}.heading-desktop-h3,.heading-desktop-h4{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-desktop-h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line)}.heading-desktop-h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line)}.heading-desktop-h5,.heading-desktop-h6{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-desktop-h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line)}.heading-mobile-xxl{font-size:var(--heading-xxl-mobile-size);font-weight:var(--heading-xxl-mobile-weight);line-height:var(--heading-xxl-mobile-line)}.heading-mobile-xl,.heading-mobile-xxl{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-mobile-xl{font-size:var(--heading-xl-mobile-size);font-weight:var(--heading-xl-mobile-weight);line-height:var(--heading-xl-mobile-line)}.heading-mobile-h1{font-size:var(--heading-h1-mobile-size);font-weight:var(--heading-h1-mobile-weight);line-height:var(--heading-h1-mobile-line)}.heading-mobile-h1,.heading-mobile-h2{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-mobile-h2{font-size:var(--heading-h2-mobile-size);font-weight:var(--heading-h2-mobile-weight);line-height:var(--heading-h2-mobile-line)}.heading-mobile-h3{font-size:var(--heading-h3-mobile-size);font-weight:var(--heading-h3-mobile-weight);line-height:var(--heading-h3-mobile-line)}.heading-mobile-h3,.heading-mobile-h4{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-mobile-h4{font-size:var(--heading-h4-mobile-size);font-weight:var(--heading-h4-mobile-weight);line-height:var(--heading-h4-mobile-line)}.heading-mobile-h5{font-size:var(--heading-h5-mobile-size);font-weight:var(--heading-h5-mobile-weight);line-height:var(--heading-h5-mobile-line)}.heading-mobile-h5,.heading-mobile-h6{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-mobile-h6{font-size:var(--heading-h6-mobile-size);font-weight:var(--heading-h6-mobile-weight);line-height:var(--heading-h6-mobile-line)}.body-desktop-xl{font-size:var(--text-xl-size);font-weight:var(--text-xl-weight);line-height:var(--text-xl-line)}.body-desktop-large,.body-desktop-xl{font-family:var(--font-family-sans)!important;letter-spacing:0}.body-desktop-large{font-size:var(--text-large-size);font-weight:var(--text-large-weight);line-height:var(--text-large-line)}.body-desktop-regular{font-weight:var(--text-regular-weight)}.body-desktop-regular,.body-desktop-regular-emphasis{font-family:var(--font-family-sans)!important;font-size:var(--text-regular-size);letter-spacing:0;line-height:var(--text-regular-line)}.body-desktop-regular-emphasis{font-weight:var(--text-regular-emphasis-weight)}.body-desktop-small{font-weight:var(--text-small-weight)}.body-desktop-small,.body-desktop-small-emphasis{font-family:var(--font-family-sans)!important;font-size:var(--text-small-size);letter-spacing:0;line-height:var(--text-small-line)}.body-desktop-small-emphasis{font-weight:var(--text-small-emphasis-weight)}.body-desktop-small-bold{font-family:var(--font-family-sans)!important;font-size:var(--text-small-size);font-weight:var(--text-small-bold-weight);letter-spacing:0;line-height:var(--text-small-line)}.body-desktop-xs{font-weight:var(--text-xs-weight)}.body-desktop-xs,.body-desktop-xs-bold{font-family:var(--font-family-sans)!important;font-size:var(--text-xs-size);letter-spacing:0;line-height:var(--text-xs-line)}.body-desktop-xs-bold{font-weight:var(--text-xs-bold-weight)}.typography-story,[id*=v2-design-system-typography] *{font-family:var(--font-family-sans)!important}.typography-story{margin:0 auto;max-width:1200px;padding:2rem}.typography-story *{font-family:inherit!important}.story-header{margin-bottom:3rem}.story-header h1{color:var(--label-primary,#121e52);font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line);margin:0 0 .5rem}.story-header h1,.story-header p{font-family:var(--font-family-sans);letter-spacing:0}.story-header p{color:var(--label-secondary,#626a90);font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);line-height:var(--text-regular-line);margin:0}.typography-section{margin-bottom:3rem}.typography-section__title{border-bottom:2px solid var(--border-primary,#e8e9ef);color:var(--label-primary,#121e52);font-family:var(--font-family-sans);font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);letter-spacing:0;line-height:var(--heading-h2-line);margin:0 0 2rem;padding-bottom:1rem}.typography-example,.typography-grid{display:grid;gap:2rem}.typography-example{align-items:center;background:var(--surface-primary,#fff);border:1px solid var(--border-primary,#e8e9ef);border-radius:8px;grid-template-columns:1fr auto;padding:1.5rem}.typography-sample{color:var(--label-primary,#121e52)}.typography-info{min-width:200px;text-align:right}.typography-name{color:var(--label-primary,#121e52);font-family:var(--font-family-sans);font-size:var(--text-small-size);font-weight:var(--text-small-emphasis-weight);letter-spacing:0;line-height:var(--text-small-line);margin-bottom:.25rem}.typography-specs{display:flex;gap:1rem;justify-content:flex-end;margin-bottom:.25rem}.typography-size,.typography-weight{background:var(--surface-secondary,#f8f8fa);border-radius:4px;font-family:var(--font-family-sans);font-family:var(--font-family-mono);padding:.25rem .5rem}.typography-description,.typography-size,.typography-weight{color:var(--label-secondary,#626a90);font-size:var(--text-xs-size);font-weight:var(--text-xs-weight);letter-spacing:0;line-height:var(--text-xs-line)}.typography-description{font-family:var(--font-family-sans);font-style:italic}@media (max-width:768px){.typography-story{padding:1rem}.typography-example{gap:1rem;grid-template-columns:1fr}.typography-info{text-align:left}.typography-specs{justify-content:flex-start}}.metric-card{align-items:flex-start;align-self:stretch;background-color:var(--surface-primary);border:1px solid var(--border-primary);border-radius:var(--radius-reg,8px);display:flex;gap:var(--padding-reg,16px);padding:8px;position:relative}.metric-card.no-border{border:none;border-radius:0}.metric-card.inline-metric{align-items:center;flex-direction:row;height:80px}.metric-card.h-20{height:80px}.metric-card.h-16{height:64px}.metric-card.status-active{animation:shadow-pulse 2s ease-in-out infinite}@media (min-width:768px){.metric-card{flex-direction:column;gap:1rem;min-height:160px;padding:1rem .5rem 1rem 1rem}}.metric-card__icon-wrapper{align-items:center;align-self:stretch;background-color:var(--surface-secondary);border-radius:4px;display:flex;flex-direction:column;gap:8px;justify-content:center;padding:var(--padding-md,8px) var(--padding-md,8px);width:48px}.metric-card__icon{aspect-ratio:1;height:100%;object-fit:contain;width:100%}.metric-card__content{display:flex;flex:1;flex-direction:column;gap:8px}.metric-card__header{display:flex;flex-direction:column;gap:4px}.metric-card__title{align-self:stretch;color:var(--label-secondary);font-family:Geist,sans-serif;font-size:13px;font-style:normal;font-weight:500;line-height:16px}.metric-card__value{color:var(--label-primary);font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line)}.metric-card__performance,.metric-card__value{font-family:var(--font-family-sans);letter-spacing:0}.metric-card__performance{align-items:center;display:flex;font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);gap:.25rem;line-height:var(--heading-h6-line)}.metric-card__performance-icon{align-items:center;display:flex;flex-shrink:0}.metric-card__performance-icon svg{height:16px;width:16px}.metric-card__performance-text{font-family:var(--font-family-sans);font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);letter-spacing:0;line-height:var(--heading-h6-line)}@keyframes shadow-pulse{0%,to{border-color:var(--success-regular);box-shadow:0 2px 12px #52c22b4d}50%{border-color:var(--border-primary);box-shadow:0 2px 12px #52c22b00}}";
3
+ 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-regular-emphasis-weight:500;--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}.heading-desktop-xxl{font-size:var(--heading-xxl-size);font-weight:var(--heading-xxl-weight);line-height:var(--heading-xxl-line)}.heading-desktop-xl,.heading-desktop-xxl{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-desktop-xl{font-size:var(--heading-xl-size);font-weight:var(--heading-xl-weight);line-height:var(--heading-xl-line)}.heading-desktop-h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line)}.heading-desktop-h1,.heading-desktop-h2{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-desktop-h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line)}.heading-desktop-h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line)}.heading-desktop-h3,.heading-desktop-h4{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-desktop-h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line)}.heading-desktop-h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line)}.heading-desktop-h5,.heading-desktop-h6{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-desktop-h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line)}.heading-mobile-xxl{font-size:var(--heading-xxl-mobile-size);font-weight:var(--heading-xxl-mobile-weight);line-height:var(--heading-xxl-mobile-line)}.heading-mobile-xl,.heading-mobile-xxl{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-mobile-xl{font-size:var(--heading-xl-mobile-size);font-weight:var(--heading-xl-mobile-weight);line-height:var(--heading-xl-mobile-line)}.heading-mobile-h1{font-size:var(--heading-h1-mobile-size);font-weight:var(--heading-h1-mobile-weight);line-height:var(--heading-h1-mobile-line)}.heading-mobile-h1,.heading-mobile-h2{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-mobile-h2{font-size:var(--heading-h2-mobile-size);font-weight:var(--heading-h2-mobile-weight);line-height:var(--heading-h2-mobile-line)}.heading-mobile-h3{font-size:var(--heading-h3-mobile-size);font-weight:var(--heading-h3-mobile-weight);line-height:var(--heading-h3-mobile-line)}.heading-mobile-h3,.heading-mobile-h4{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-mobile-h4{font-size:var(--heading-h4-mobile-size);font-weight:var(--heading-h4-mobile-weight);line-height:var(--heading-h4-mobile-line)}.heading-mobile-h5{font-size:var(--heading-h5-mobile-size);font-weight:var(--heading-h5-mobile-weight);line-height:var(--heading-h5-mobile-line)}.heading-mobile-h5,.heading-mobile-h6{font-family:var(--font-family-sans)!important;letter-spacing:0}.heading-mobile-h6{font-size:var(--heading-h6-mobile-size);font-weight:var(--heading-h6-mobile-weight);line-height:var(--heading-h6-mobile-line)}.body-desktop-xl{font-size:var(--text-xl-size);font-weight:var(--text-xl-weight);line-height:var(--text-xl-line)}.body-desktop-large,.body-desktop-xl{font-family:var(--font-family-sans)!important;letter-spacing:0}.body-desktop-large{font-size:var(--text-large-size);font-weight:var(--text-large-weight);line-height:var(--text-large-line)}.body-desktop-regular{font-weight:var(--text-regular-weight)}.body-desktop-regular,.body-desktop-regular-emphasis{font-family:var(--font-family-sans)!important;font-size:var(--text-regular-size);letter-spacing:0;line-height:var(--text-regular-line)}.body-desktop-regular-emphasis{font-weight:var(--text-regular-emphasis-weight)}.body-desktop-small{font-weight:var(--text-small-weight)}.body-desktop-small,.body-desktop-small-emphasis{font-family:var(--font-family-sans)!important;font-size:var(--text-small-size);letter-spacing:0;line-height:var(--text-small-line)}.body-desktop-small-emphasis{font-weight:var(--text-small-emphasis-weight)}.body-desktop-small-bold{font-family:var(--font-family-sans)!important;font-size:var(--text-small-size);font-weight:var(--text-small-bold-weight);letter-spacing:0;line-height:var(--text-small-line)}.body-desktop-xs{font-weight:var(--text-xs-weight)}.body-desktop-xs,.body-desktop-xs-bold{font-family:var(--font-family-sans)!important;font-size:var(--text-xs-size);letter-spacing:0;line-height:var(--text-xs-line)}.body-desktop-xs-bold{font-weight:var(--text-xs-bold-weight)}.typography-story,[id*=v2-design-system-typography] *{font-family:var(--font-family-sans)!important}.typography-story{margin:0 auto;max-width:1200px;padding:2rem}.typography-story *{font-family:inherit!important}.story-header{margin-bottom:3rem}.story-header h1{color:var(--label-primary,#121e52);font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line);margin:0 0 .5rem}.story-header h1,.story-header p{font-family:var(--font-family-sans);letter-spacing:0}.story-header p{color:var(--label-secondary,#626a90);font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);line-height:var(--text-regular-line);margin:0}.typography-section{margin-bottom:3rem}.typography-section__title{border-bottom:2px solid var(--border-primary,#e8e9ef);color:var(--label-primary,#121e52);font-family:var(--font-family-sans);font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);letter-spacing:0;line-height:var(--heading-h2-line);margin:0 0 2rem;padding-bottom:1rem}.typography-example,.typography-grid{display:grid;gap:2rem}.typography-example{align-items:center;background:var(--surface-primary,#fff);border:1px solid var(--border-primary,#e8e9ef);border-radius:8px;grid-template-columns:1fr auto;padding:1.5rem}.typography-sample{color:var(--label-primary,#121e52)}.typography-info{min-width:200px;text-align:right}.typography-name{color:var(--label-primary,#121e52);font-family:var(--font-family-sans);font-size:var(--text-small-size);font-weight:var(--text-small-emphasis-weight);letter-spacing:0;line-height:var(--text-small-line);margin-bottom:.25rem}.typography-specs{display:flex;gap:1rem;justify-content:flex-end;margin-bottom:.25rem}.typography-size,.typography-weight{background:var(--surface-secondary,#f8f8fa);border-radius:4px;font-family:var(--font-family-sans);font-family:var(--font-family-mono);padding:.25rem .5rem}.typography-description,.typography-size,.typography-weight{color:var(--label-secondary,#626a90);font-size:var(--text-xs-size);font-weight:var(--text-xs-weight);letter-spacing:0;line-height:var(--text-xs-line)}.typography-description{font-family:var(--font-family-sans);font-style:italic}@media (max-width:768px){.typography-story{padding:1rem}.typography-example{gap:1rem;grid-template-columns:1fr}.typography-info{text-align:left}.typography-specs{justify-content:flex-start}}.metric-card{align-items:flex-start;align-self:stretch;background-color:var(--surface-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-reg,8px);display:flex;gap:var(--padding-reg,16px);padding:8px;position:relative}.metric-card.no-border{border:none;border-radius:0}.metric-card.inline-metric{align-items:center;flex-direction:row;height:80px}.metric-card.h-20{height:80px}.metric-card.h-16{height:64px}.metric-card.status-active{animation:shadow-pulse 2s ease-in-out infinite}@media (min-width:768px){.metric-card{flex-direction:column;gap:1rem;min-height:160px;padding:1rem .5rem 1rem 1rem}}.metric-card__icon-wrapper{align-items:center;align-self:stretch;background-color:var(--surface-secondary);border-radius:4px;display:flex;flex-direction:column;gap:8px;justify-content:center;padding:var(--padding-md,8px) var(--padding-md,8px);width:48px}.metric-card__icon{aspect-ratio:1;height:100%;object-fit:contain;width:100%}.metric-card__content{display:flex;flex:1;flex-direction:column;gap:8px}.metric-card__header{display:flex;flex-direction:column;gap:4px}.metric-card__title{align-self:stretch;color:var(--label-secondary);font-family:Geist,sans-serif;font-size:13px;font-style:normal;font-weight:500;line-height:16px}.metric-card__value{color:var(--label-primary);font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line)}.metric-card__performance,.metric-card__value{font-family:var(--font-family-sans);letter-spacing:0}.metric-card__performance{align-items:center;display:flex;font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);gap:.25rem;line-height:var(--heading-h6-line)}.metric-card__performance-icon{align-items:center;display:flex;flex-shrink:0}.metric-card__performance-icon svg{height:16px;width:16px}.metric-card__performance-text{font-family:var(--font-family-sans);font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);letter-spacing:0;line-height:var(--heading-h6-line)}.metric-card--no-icon{height:auto;min-height:auto;padding:24px}.metric-card--no-icon .metric-card__content{gap:4px;justify-content:flex-start}.metric-card--no-icon .metric-card__header{gap:8px}@keyframes shadow-pulse{0%,to{border-color:var(--success-regular);box-shadow:0 2px 12px #52c22b4d}50%{border-color:var(--border-primary);box-shadow:0 2px 12px #52c22b00}}";
4
4
  styleInject(css_248z);
5
5
 
6
6
  export { css_248z as default };
@@ -14,6 +14,7 @@ import '../../../components/Modal/DeleteModal.scss.js';
14
14
  import '../../../components/NewInput/NewInput.js';
15
15
  import '../../../components/FormField/FormField.js';
16
16
  import '../../../components/Checkbox/Checkbox.js';
17
+ import '../../../components/InputCheckbox/InputCheckbox.js';
17
18
  import '../../../components/WYSIWYGEditor/WYSIWYGEditor.scss.js';
18
19
  import '../../../components/NewPageHeader/NewPageHeader.scss.js';
19
20
  import '../../../components/SectionHeader/SectionHeader.scss.js';
@@ -11,6 +11,7 @@ import '../../../components/Modal/DeleteModal.scss.js';
11
11
  import '../../../components/NewInput/NewInput.js';
12
12
  import { FormField } from '../../../components/FormField/FormField.js';
13
13
  import '../../../components/Checkbox/Checkbox.js';
14
+ import '../../../components/InputCheckbox/InputCheckbox.js';
14
15
  import '../../../components/WYSIWYGEditor/WYSIWYGEditor.scss.js';
15
16
  import '../../../components/NewPageHeader/NewPageHeader.scss.js';
16
17
  import '../../../components/SectionHeader/SectionHeader.scss.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@licklist/design",
3
- "version": "0.78.36",
3
+ "version": "0.78.38",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
@@ -40,7 +40,7 @@
40
40
  &--sm {
41
41
  height: 28px;
42
42
  padding: 0 8px 0 8px;
43
- font-size: 13px;
43
+ font-size: 11px;
44
44
  }
45
45
 
46
46
  &--md {
@@ -1,137 +1,118 @@
1
1
  .customer-detail {
2
2
  padding: 40px;
3
- background-color: #fff;
3
+ background-color: var(--surface-primary);
4
4
  min-height: 100vh;
5
5
  font-family: var(--font-family-sans, 'Geist', sans-serif);
6
6
 
7
7
  &__back {
8
- color: #6200EE;
9
- font-weight: 500;
10
- cursor: pointer;
11
- margin-bottom: 30px;
8
+ margin-bottom: 16px;
12
9
  display: inline-flex;
13
10
  align-items: center;
14
11
  gap: 8px;
15
- font-size: 14px;
16
12
  padding: 8px 16px;
17
13
  border-radius: 8px;
14
+ border: 1px solid var(--border-primary);
15
+ background: transparent;
16
+ color: var(--purple-500);
17
+ font-weight: 500;
18
+ font-size: 14px;
19
+ cursor: pointer;
18
20
  transition: all 0.2s ease;
19
- border: 1px solid transparent;
20
21
 
21
- &:hover {
22
- background-color: #F3E5FF;
23
- border: 1px solid #E0C7FF;
22
+ svg {
23
+ width: 24px;
24
+ height: 24px;
25
+ color: var(--purple-500);
24
26
  }
25
- }
26
-
27
- &__header {
28
- margin-bottom: 40px;
29
- }
30
-
31
- &__name {
32
- font-size: 32px;
33
- font-weight: 700;
34
- color: #121E52;
35
- margin: 0 0 16px 0;
36
- }
37
27
 
38
- &__badges-row {
39
- display: flex;
40
- justify-content: space-between;
41
- align-items: center;
42
- }
28
+ span {
29
+ color: var(--purple-500);
30
+ font-weight: 500;
31
+ font-size: 14px;
32
+ }
43
33
 
44
- &__badges {
45
- display: flex;
46
- gap: 12px;
47
- align-items: center;
34
+ &:hover {
35
+ background-color: var(--surface-action-soft);
36
+ border: 1px solid var(--border-primary);
37
+ }
48
38
  }
49
39
 
50
- &__id-badge {
51
- background-color: #F4F5F9;
52
- color: #121E52;
53
- padding: 4px 12px;
54
- border-radius: 100px;
55
- font-size: 12px;
40
+ &__name {
41
+ font-size: 24px;
56
42
  font-weight: 600;
57
- border: 1px solid #E2E4ED;
43
+ color: var(--label-primary);
44
+ margin: 0 0 22px 0;
45
+ line-height: 1.2;
58
46
  }
59
47
 
60
- &__edit {
61
- display: inline-flex;
62
- align-items: center;
63
- gap: 8px;
64
- color: #121E52;
65
- font-weight: 600;
66
- cursor: pointer;
67
- font-size: 14px;
68
- padding: 8px 16px;
69
- border-radius: 8px;
70
- transition: all 0.2s ease;
71
- border: 1px solid transparent;
72
-
73
- &:hover {
74
- background-color: #E8EAF0;
75
- border: 1px solid #D1D5E0;
76
- }
48
+ &__header {
49
+ margin-bottom: 40px;
77
50
  }
78
51
 
79
- &__grid {
52
+ &__summary-row {
80
53
  display: grid;
81
- grid-template-columns: 1fr 1fr;
82
- gap: 24px;
83
- margin-bottom: 24px;
54
+ grid-template-columns: repeat(4, 1fr);
55
+ gap: 16px;
56
+ margin-bottom: 32px;
84
57
  }
85
58
 
86
59
  &__card {
87
- background: #FFFFFF;
88
- border: 1px solid #E2E4ED;
60
+ background: var(--surface-primary);
61
+ border: 1px solid var(--border-primary);
89
62
  border-radius: 12px;
90
- padding: 24px;
63
+ padding: 32px;
64
+ margin-bottom: 24px;
65
+
66
+ &--details {
67
+ margin-bottom: 32px;
68
+ }
91
69
 
92
70
  &--full {
93
71
  grid-column: 1 / -1;
94
72
  }
95
73
  }
96
74
 
75
+ &__card-header {
76
+ display: flex;
77
+ justify-content: space-between;
78
+ align-items: flex-start;
79
+ margin-bottom: 32px;
80
+ }
81
+
97
82
  &__card-title {
98
- font-size: 18px;
83
+ font-size: 20px;
99
84
  font-weight: 700;
100
- color: #121E52;
101
- margin: 0 0 24px 0;
85
+ color: var(--label-primary);
86
+ margin: 0;
87
+ }
88
+
89
+ &__grid {
90
+ display: grid;
91
+ grid-template-columns: 1fr 1fr;
92
+ column-gap: 64px;
93
+ row-gap: 24px;
102
94
  }
103
95
 
104
96
  &__info-group {
105
97
  display: flex;
106
98
  flex-direction: column;
107
99
  gap: 4px;
108
- margin-bottom: 16px;
109
-
110
- &:last-child {
111
- margin-bottom: 0;
112
- }
113
100
 
114
101
  label {
115
102
  font-size: 12px;
116
- color: #9399B3;
117
- margin: 0;
118
- }
119
-
120
- span {
121
- font-size: 14px;
122
- font-weight: 500;
123
- display: inline-flex;
124
- align-items: center;
103
+ font-weight: 600;
104
+ color: var(--label-secondary);
105
+ margin: 2px;
106
+ text-transform: none;
125
107
  }
126
108
  }
127
109
 
128
-
129
110
  &__minor-row {
130
111
  display: flex;
131
112
  justify-content: space-between;
132
113
  align-items: center;
133
114
  padding: 16px 0;
134
- border-bottom: 1px solid #F4F5F9;
115
+ border-bottom: 1px solid var(--surface-tertiary);
135
116
 
136
117
  &:last-child {
137
118
  border-bottom: none;
@@ -152,12 +133,12 @@
152
133
  &__minor-name {
153
134
  font-size: 14px;
154
135
  font-weight: 600;
155
- color: #121E52;
136
+ color: var(--label-primary);
156
137
  }
157
138
 
158
139
  &__minor-age {
159
140
  font-size: 12px;
160
- color: #9399B3;
141
+ color: var(--label-secondary);
161
142
  }
162
143
 
163
144
  &__minor-status-group {
@@ -168,151 +149,45 @@
168
149
 
169
150
  &__minor-expires {
170
151
  font-size: 12px;
171
- color: #9399B3;
172
- }
173
-
174
- &__footer {
175
- margin-top: 40px;
176
- font-size: 12px;
177
- color: #9399B3;
152
+ color: var(--label-secondary);
178
153
  }
179
154
  }
180
155
 
181
156
  // Mobile styles
182
- @media (max-width: 768px) {
157
+ @media (max-width: 1024px) {
183
158
  .customer-detail {
184
- padding: 20px 16px;
185
-
186
- &__back {
187
- font-size: 13px;
188
- padding: 6px 12px;
189
- margin-bottom: 20px;
190
- }
191
-
192
- &__header {
193
- margin-bottom: 24px;
194
- }
195
-
196
- &__name {
197
- font-size: 24px;
198
- margin-bottom: 12px;
199
- }
200
-
201
- &__badges-row {
202
- flex-direction: row;
203
- justify-content: space-between;
204
- align-items: center;
205
- gap: 12px;
206
- width: 100%;
207
- }
208
-
209
- &__badges {
210
- flex-wrap: wrap;
211
- flex: 1;
212
- }
213
-
214
- &__id-badge {
215
- font-size: 11px;
216
- padding: 3px 10px;
217
- }
218
-
219
- &__edit {
220
- font-size: 13px;
221
- padding: 6px 12px;
222
- align-self: center;
223
- margin-left: auto;
224
- }
225
-
226
- &__grid {
227
- grid-template-columns: 1fr;
228
- gap: 16px;
229
- margin-bottom: 16px;
230
- }
231
-
232
- &__card {
233
- padding: 20px;
234
-
235
- &--full {
236
- grid-column: 1;
237
- }
238
- }
239
-
240
- &__card-title {
241
- font-size: 16px;
242
- margin-bottom: 16px;
243
- }
244
-
245
- &__info-group {
246
- margin-bottom: 14px;
247
-
248
- label {
249
- font-size: 11px;
250
- }
251
-
252
- span {
253
- font-size: 13px;
254
- }
255
- }
256
-
257
- &__minor-row {
258
- flex-direction: column;
259
- align-items: flex-start;
260
- gap: 12px;
261
- padding: 12px 0;
262
- }
263
-
264
- &__minor-name {
265
- font-size: 13px;
266
- }
267
-
268
- &__minor-age,
269
- &__minor-expires {
270
- font-size: 11px;
271
- }
272
-
273
- &__minor-status-group {
274
- width: 100%;
275
- justify-content: space-between;
276
- }
277
-
278
- &__footer {
279
- margin-top: 24px;
280
- font-size: 11px;
159
+ &__summary-row {
160
+ grid-template-columns: 1fr 1fr;
281
161
  }
282
162
  }
283
163
  }
284
164
 
285
- // Extra small mobile devices
286
- @media (max-width: 480px) {
165
+ @media (max-width: 768px) {
287
166
  .customer-detail {
288
- padding: 16px 12px;
167
+ padding: 20px 0;
289
168
 
290
- &__back {
291
- font-size: 12px;
292
- padding: 4px 8px;
293
- margin-bottom: 16px;
169
+ &__summary-row {
170
+ grid-template-columns: 1fr;
171
+ gap: 16px;
294
172
  }
295
173
 
296
- &__name {
297
- font-size: 20px;
174
+ &__grid {
175
+ grid-template-columns: 1fr;
176
+ row-gap: 16px;
298
177
  }
299
178
 
300
179
  &__card {
301
- padding: 16px;
302
- border-radius: 8px;
303
- }
304
-
305
- &__card-title {
306
- font-size: 15px;
307
- margin-bottom: 12px;
180
+ padding: 24px;
308
181
  }
309
182
 
310
- &__badges {
183
+ &__minor-status-group {
184
+ flex-direction: column;
185
+ align-items: flex-end;
311
186
  gap: 8px;
312
187
  }
313
188
 
314
- &__minor-row {
315
- padding: 10px 0;
189
+ &__minor-expires {
190
+ order: 2;
316
191
  }
317
192
  }
318
193
  }
@@ -97,7 +97,7 @@
97
97
  &__content {
98
98
  display: flex;
99
99
  flex-direction: column;
100
- gap: 32px;
100
+ gap: 16px;
101
101
  padding: 0 32px 32px;
102
102
  }
103
103
 
@@ -178,17 +178,18 @@
178
178
  // Cells styling (usually specific to the table in this page)
179
179
  .entity-cell {
180
180
  &__name {
181
+ font-size: 15px;
181
182
  font-weight: 600;
182
- color: #121E52;
183
+ color: var(--label-primary);
183
184
  }
184
185
  &__sub {
185
186
  font-size: 13px;
186
- color: #9399B3;
187
+ color: var(--label-secondary);
187
188
  display: block !important;
188
189
  }
189
190
  &__id {
190
191
  font-size: 13px;
191
- color: #9399B3;
192
+ color: var(--label-secondary);
192
193
  display: none !important;
193
194
  }
194
195
 
@@ -586,11 +587,16 @@
586
587
  display: grid;
587
588
  grid-template-areas:
588
589
  "customer bookings"
589
- "divider divider"
590
590
  "next last"
591
- "status status"
592
- "actions actions";
593
- grid-template-columns: 1fr auto;
591
+ "divider divider"
592
+ "status actions";
593
+
594
+ :is(.waivers-page--compact) & {
595
+ grid-template-areas:
596
+ "customer customer"
597
+ "divider divider"
598
+ "status actions";
599
+ }
594
600
  border: 1px solid var(--border-primary, #E8E9EF);
595
601
  border-radius: 12px;
596
602
  margin-bottom: 16px;
@@ -619,11 +625,24 @@
619
625
  &.tw-text-right {
620
626
  grid-area: actions;
621
627
  text-align: right;
622
- padding-top: 12px;
623
- border-top: 1px solid var(--border-primary, #E8E9EF);
624
- margin-top: 4px;
628
+ padding: 0;
625
629
  display: flex;
626
630
  justify-content: flex-end;
631
+ align-items: center;
632
+
633
+ :is(.waivers-page--compact) & {
634
+ padding-top: 0;
635
+ border-top: none;
636
+ margin-top: 0;
637
+ }
638
+
639
+ &.waiver-col {
640
+ grid-area: status;
641
+ justify-content: flex-start;
642
+ border-top: none;
643
+ padding-top: 0;
644
+ margin-top: 0;
645
+ }
627
646
  }
628
647
 
629
648
  &:first-child {
@@ -0,0 +1,53 @@
1
+ .input-checkbox {
2
+ display: flex;
3
+ align-items: center;
4
+ gap: 6px;
5
+ cursor: pointer;
6
+ user-select: none;
7
+
8
+ &__input {
9
+ position: absolute;
10
+ opacity: 0;
11
+ width: 0;
12
+ height: 0;
13
+ }
14
+
15
+ &__box {
16
+ width: 16px;
17
+ height: 16px;
18
+ min-width: 16px;
19
+ border: 1px solid var(--border-primary, #e2e2e2);
20
+ border-radius: 3px;
21
+ background: var(--surface-primary, #fff);
22
+ transition: all 0.15s ease;
23
+ position: relative;
24
+
25
+ &::after {
26
+ content: '';
27
+ position: absolute;
28
+ top: 1px;
29
+ left: 4.5px;
30
+ width: 5px;
31
+ height: 9px;
32
+ border: solid white;
33
+ border-width: 0 2px 2px 0;
34
+ transform: rotate(45deg);
35
+ opacity: 0;
36
+ }
37
+ }
38
+
39
+ &__input:checked + &__box {
40
+ background: var(--fill-selected, #14215a);
41
+ border-color: var(--fill-selected, #14215a);
42
+
43
+ &::after {
44
+ opacity: 1;
45
+ }
46
+ }
47
+
48
+ &__label {
49
+ font-family: var(--font-family-sans, 'Geist', sans-serif);
50
+ font-size: 14px;
51
+ color: var(--label-primary, #121e52);
52
+ }
53
+ }
@@ -0,0 +1,24 @@
1
+ import React, { InputHTMLAttributes, forwardRef } from 'react'
2
+ import './InputCheckbox.scss'
3
+
4
+ export interface InputCheckboxProps
5
+ extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
6
+ label?: string | React.ReactNode
7
+ }
8
+
9
+ export const InputCheckbox = forwardRef<HTMLInputElement, InputCheckboxProps>(
10
+ ({ label, className = '', ...props }, ref) => (
11
+ <label className={`input-checkbox ${className}`}>
12
+ <input
13
+ ref={ref}
14
+ type="checkbox"
15
+ className="input-checkbox__input"
16
+ {...props}
17
+ />
18
+ <span className="input-checkbox__box" />
19
+ {label && <span className="input-checkbox__label">{label}</span>}
20
+ </label>
21
+ ),
22
+ )
23
+
24
+ InputCheckbox.displayName = 'InputCheckbox'
@@ -0,0 +1,2 @@
1
+ export { InputCheckbox } from './InputCheckbox'
2
+ export type { InputCheckboxProps } from './InputCheckbox'
@@ -9,9 +9,10 @@
9
9
  }
10
10
 
11
11
  .new-table {
12
- width: 100%;
12
+ min-width: 100%;
13
13
  border-collapse: collapse;
14
14
  text-align: left;
15
+ table-layout: fixed;
15
16
 
16
17
  &__head {
17
18
  background-color: var(--surface-secondary, #F8F8FA);
@@ -81,7 +82,7 @@
81
82
  }
82
83
 
83
84
  .new-table {
84
- min-width: 600px; // Ensure table doesn't collapse too much
85
+ min-width: 100%; // Ensure table doesn't collapse too much
85
86
 
86
87
  &__header-cell {
87
88
  padding: 12px 16px;
@@ -102,7 +103,7 @@
102
103
 
103
104
  @media (max-width: 480px) {
104
105
  .new-table {
105
- min-width: 500px;
106
+ min-width: 100%;
106
107
 
107
108
  &__header-cell,
108
109
  &__cell {
@@ -17,7 +17,6 @@
17
17
  gap: 8px;
18
18
  -ms-overflow-style: none; /* IE and Edge */
19
19
  scrollbar-width: none; /* Firefox */
20
- padding-bottom: 2px; /* Prevent button shadows/borders from being cut off during scroll if any */
21
20
 
22
21
  &::-webkit-scrollbar {
23
22
  display: none; /* Chrome, Safari and Opera */
@@ -30,6 +30,9 @@ export type { NewInputProps } from './NewInput'
30
30
  export { Checkbox } from './Checkbox'
31
31
  export type { CheckboxProps } from './Checkbox'
32
32
 
33
+ export { InputCheckbox } from './InputCheckbox'
34
+ export type { InputCheckboxProps } from './InputCheckbox'
35
+
33
36
  export { WYSIWYGEditor } from './WYSIWYGEditor'
34
37
  export type { WYSIWYGEditorProps } from './WYSIWYGEditor'
35
38
 
@@ -7,7 +7,7 @@
7
7
  gap: var(--padding-reg, 16px);
8
8
  align-self: stretch;
9
9
  padding: 8px;
10
- background-color: var(--surface-primary);
10
+ background-color: var(--surface-secondary);
11
11
  border: 1px solid var(--border-primary);
12
12
  border-radius: var(--radius-reg, 8px);
13
13
 
@@ -111,6 +111,21 @@
111
111
  &__performance-text {
112
112
  @include typography('heading.h6');
113
113
  }
114
+
115
+ &--no-icon {
116
+ padding: 24px;
117
+ min-height: auto;
118
+ height: auto;
119
+
120
+ .metric-card__content {
121
+ justify-content: flex-start;
122
+ gap: 4px;
123
+ }
124
+
125
+ .metric-card__header {
126
+ gap: 8px;
127
+ }
128
+ }
114
129
  }
115
130
 
116
131
  @keyframes shadow-pulse {
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import './MetricCard.scss';
3
3
 
4
4
  interface MetricCardProps {
5
- icon: string;
5
+ icon?: string;
6
6
  title: string;
7
7
  value: string;
8
8
  performance?: {
@@ -29,19 +29,22 @@ export const MetricCard: React.FC<MetricCardProps> = ({
29
29
  className?.includes('h-20') && 'h-20',
30
30
  className?.includes('h-16') && 'h-16',
31
31
  showStatusDot && 'status-active',
32
+ !icon && 'metric-card--no-icon',
32
33
  className
33
34
  ].filter(Boolean).join(' ');
34
35
 
35
36
  return (
36
37
  <div className={cardClasses}>
37
- <div className="metric-card__icon-wrapper">
38
- <img
39
- src={icon}
40
- className="metric-card__icon"
41
- alt={title}
42
- />
43
- </div>
44
-
38
+ {icon && (
39
+ <div className="metric-card__icon-wrapper">
40
+ <img
41
+ src={icon}
42
+ className="metric-card__icon"
43
+ alt={title}
44
+ />
45
+ </div>
46
+ )}
47
+
45
48
  <div className="metric-card__content">
46
49
  <div className="metric-card__header">
47
50
  <div className="metric-card__title">
@@ -51,7 +54,7 @@ export const MetricCard: React.FC<MetricCardProps> = ({
51
54
  {value}
52
55
  </div>
53
56
  </div>
54
-
57
+
55
58
  {performance && (
56
59
  <div className="metric-card__performance" style={{ color: performance.color }}>
57
60
  {performance.icon && (
@@ -69,4 +72,4 @@ export const MetricCard: React.FC<MetricCardProps> = ({
69
72
  );
70
73
  };
71
74
 
72
- export type { MetricCardProps };
75
+ export type { MetricCardProps };