@licklist/design 0.78.37 → 0.78.38

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

@@ -1,6 +1,6 @@
 import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
 
-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}}";
+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}}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist/v2/dashboard-analytics/metric-card/MetricCard.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import './MetricCard.scss';
 interface MetricCardProps {
-    icon: string;
+    icon?: string;
     title: string;
     value: string;
     performance?: {

package/dist/v2/dashboard-analytics/metric-card/MetricCard.d.ts.map

@@ -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"}
+{"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"}

package/dist/v2/dashboard-analytics/metric-card/MetricCard.js

@@ -11,12 +11,13 @@ var MetricCard = function(param) {
         (className === null || className === void 0 ? void 0 : className.includes('h-20')) && 'h-20',
         (className === null || className === void 0 ? void 0 : className.includes('h-16')) && 'h-16',
         showStatusDot && 'status-active',
+        !icon && 'metric-card--no-icon',
         className
     ].filter(Boolean).join(' ');
     return /*#__PURE__*/ jsxs("div", {
         className: cardClasses,
         children: [
-            /*#__PURE__*/ jsx("div", {
+            icon && /*#__PURE__*/ jsx("div", {
                 className: "metric-card__icon-wrapper",
                 children: /*#__PURE__*/ jsx("img", {
                     src: icon,

package/dist/v2/dashboard-analytics/metric-card/MetricCard.scss.js

@@ -1,6 +1,6 @@
 import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
 
-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}}";
+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}}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.37",
+  "version": "0.78.38",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"

package/src/v2/components/Customer/CustomerDetail.scss

@@ -1,137 +1,118 @@
 .customer-detail {
   padding: 40px;
-  background-color: #fff;
+  background-color: var(--surface-primary);
   min-height: 100vh;
   font-family: var(--font-family-sans, 'Geist', sans-serif);
 
   &__back {
-    color: #6200EE;
-    font-weight: 500;
-    cursor: pointer;
-    margin-bottom: 30px;
+    margin-bottom: 16px;
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    font-size: 14px;
     padding: 8px 16px;
     border-radius: 8px;
+    border: 1px solid var(--border-primary);
+    background: transparent;
+    color: var(--purple-500);
+    font-weight: 500;
+    font-size: 14px;
+    cursor: pointer;
     transition: all 0.2s ease;
-    border: 1px solid transparent;
 
-    &:hover {
-      background-color: #F3E5FF;
-      border: 1px solid #E0C7FF;
+    svg {
+      width: 24px;
+      height: 24px;
+      color: var(--purple-500);
     }
-  }
-
-  &__header {
-    margin-bottom: 40px;
-  }
-
-  &__name {
-    font-size: 32px;
-    font-weight: 700;
-    color: #121E52;
-    margin: 0 0 16px 0;
-  }
 
-  &__badges-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
+    span {
+      color: var(--purple-500);
+      font-weight: 500;
+      font-size: 14px;
+    }
 
-  &__badges {
-    display: flex;
-    gap: 12px;
-    align-items: center;
+    &:hover {
+      background-color: var(--surface-action-soft);
+      border: 1px solid var(--border-primary);
+    }
   }
 
-  &__id-badge {
-    background-color: #F4F5F9;
-    color: #121E52;
-    padding: 4px 12px;
-    border-radius: 100px;
-    font-size: 12px;
+  &__name {
+    font-size: 24px;
     font-weight: 600;
-    border: 1px solid #E2E4ED;
+    color: var(--label-primary);
+    margin: 0 0 22px 0;
+    line-height: 1.2;
   }
 
-  &__edit {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    color: #121E52;
-    font-weight: 600;
-    cursor: pointer;
-    font-size: 14px;
-    padding: 8px 16px;
-    border-radius: 8px;
-    transition: all 0.2s ease;
-    border: 1px solid transparent;
-
-    &:hover {
-      background-color: #E8EAF0;
-      border: 1px solid #D1D5E0;
-    }
+  &__header {
+    margin-bottom: 40px;
   }
 
-  &__grid {
+  &__summary-row {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 24px;
-    margin-bottom: 24px;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+    margin-bottom: 32px;
   }
 
   &__card {
-    background: #FFFFFF;
-    border: 1px solid #E2E4ED;
+    background: var(--surface-primary);
+    border: 1px solid var(--border-primary);
     border-radius: 12px;
-    padding: 24px;
+    padding: 32px;
+    margin-bottom: 24px;
+
+    &--details {
+      margin-bottom: 32px;
+    }
 
     &--full {
       grid-column: 1 / -1;
     }
   }
 
+  &__card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 32px;
+  }
+
   &__card-title {
-    font-size: 18px;
+    font-size: 20px;
     font-weight: 700;
-    color: #121E52;
-    margin: 0 0 24px 0;
+    color: var(--label-primary);
+    margin: 0;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 64px;
+    row-gap: 24px;
   }
 
   &__info-group {
     display: flex;
     flex-direction: column;
     gap: 4px;
-    margin-bottom: 16px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
 
     label {
       font-size: 12px;
-      color: #9399B3;
-      margin: 0;
-    }
-
-    span {
-      font-size: 14px;
-      font-weight: 500;
-      display: inline-flex;
-      align-items: center;
+      font-weight: 600;
+      color: var(--label-secondary);
+      margin: 2px;
+      text-transform: none;
     }
   }
 
-
   &__minor-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 16px 0;
-    border-bottom: 1px solid #F4F5F9;
+    border-bottom: 1px solid var(--surface-tertiary);
 
     &:last-child {
       border-bottom: none;
@@ -152,12 +133,12 @@
   &__minor-name {
     font-size: 14px;
     font-weight: 600;
-    color: #121E52;
+    color: var(--label-primary);
   }
 
   &__minor-age {
     font-size: 12px;
-    color: #9399B3;
+    color: var(--label-secondary);
   }
 
   &__minor-status-group {
@@ -168,151 +149,45 @@
 
   &__minor-expires {
     font-size: 12px;
-    color: #9399B3;
-  }
-
-  &__footer {
-    margin-top: 40px;
-    font-size: 12px;
-    color: #9399B3;
+    color: var(--label-secondary);
   }
 }
 
 // Mobile styles
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
   .customer-detail {
-    padding: 20px 16px;
-
-    &__back {
-      font-size: 13px;
-      padding: 6px 12px;
-      margin-bottom: 20px;
-    }
-
-    &__header {
-      margin-bottom: 24px;
-    }
-
-    &__name {
-      font-size: 24px;
-      margin-bottom: 12px;
-    }
-
-    &__badges-row {
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      gap: 12px;
-      width: 100%;
-    }
-
-    &__badges {
-      flex-wrap: wrap;
-      flex: 1;
-    }
-
-    &__id-badge {
-      font-size: 11px;
-      padding: 3px 10px;
-    }
-
-    &__edit {
-      font-size: 13px;
-      padding: 6px 12px;
-      align-self: center;
-      margin-left: auto;
-    }
-
-    &__grid {
-      grid-template-columns: 1fr;
-      gap: 16px;
-      margin-bottom: 16px;
-    }
-
-    &__card {
-      padding: 20px;
-
-      &--full {
-        grid-column: 1;
-      }
-    }
-
-    &__card-title {
-      font-size: 16px;
-      margin-bottom: 16px;
-    }
-
-    &__info-group {
-      margin-bottom: 14px;
-
-      label {
-        font-size: 11px;
-      }
-
-      span {
-        font-size: 13px;
-      }
-    }
-
-    &__minor-row {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 12px;
-      padding: 12px 0;
-    }
-
-    &__minor-name {
-      font-size: 13px;
-    }
-
-    &__minor-age,
-    &__minor-expires {
-      font-size: 11px;
-    }
-
-    &__minor-status-group {
-      width: 100%;
-      justify-content: space-between;
-    }
-
-    &__footer {
-      margin-top: 24px;
-      font-size: 11px;
+    &__summary-row {
+      grid-template-columns: 1fr 1fr;
     }
   }
 }
 
-// Extra small mobile devices
-@media (max-width: 480px) {
+@media (max-width: 768px) {
   .customer-detail {
-    padding: 16px 12px;
+    padding: 20px 0;
 
-    &__back {
-      font-size: 12px;
-      padding: 4px 8px;
-      margin-bottom: 16px;
+    &__summary-row {
+      grid-template-columns: 1fr;
+      gap: 16px;
     }
 
-    &__name {
-      font-size: 20px;
+    &__grid {
+      grid-template-columns: 1fr;
+      row-gap: 16px;
     }
 
     &__card {
-      padding: 16px;
-      border-radius: 8px;
-    }
-
-    &__card-title {
-      font-size: 15px;
-      margin-bottom: 12px;
+      padding: 24px;
     }
 
-    &__badges {
+    &__minor-status-group {
+      flex-direction: column;
+      align-items: flex-end;
       gap: 8px;
     }
 
-    &__minor-row {
-      padding: 10px 0;
+    &__minor-expires {
+      order: 2;
     }
   }
 }

package/src/v2/components/Customer/CustomersList.scss

@@ -178,17 +178,18 @@
   // Cells styling (usually specific to the table in this page)
   .entity-cell {
     &__name {
+      font-size: 15px;
       font-weight: 600;
-      color: #121E52;
+      color: var(--label-primary);
     }
     &__sub {
       font-size: 13px;
-      color: #9399B3;
+      color: var(--label-secondary);
       display: block !important;
     }
     &__id {
       font-size: 13px;
-      color: #9399B3;
+      color: var(--label-secondary);
       display: none !important;
     }
 

package/src/v2/components/NewTable/NewTable.scss

@@ -9,9 +9,10 @@
 }
 
 .new-table {
-  width: 100%;
+  min-width: 100%;
   border-collapse: collapse;
   text-align: left;
+  table-layout: fixed;
 
   &__head {
     background-color: var(--surface-secondary, #F8F8FA);
@@ -81,7 +82,7 @@
   }
 
   .new-table {
-    min-width: 600px; // Ensure table doesn't collapse too much
+    min-width: 100%; // Ensure table doesn't collapse too much
 
     &__header-cell {
       padding: 12px 16px;
@@ -102,7 +103,7 @@
 
 @media (max-width: 480px) {
   .new-table {
-    min-width: 500px;
+    min-width: 100%;
 
     &__header-cell,
     &__cell {

package/src/v2/dashboard-analytics/metric-card/MetricCard.scss

@@ -7,7 +7,7 @@
   gap: var(--padding-reg, 16px);
   align-self: stretch;
   padding: 8px;
-  background-color: var(--surface-primary);
+  background-color: var(--surface-secondary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-reg, 8px);
 
@@ -111,6 +111,21 @@
   &__performance-text {
     @include typography('heading.h6');
   }
+
+  &--no-icon {
+    padding: 24px;
+    min-height: auto;
+    height: auto;
+
+    .metric-card__content {
+      justify-content: flex-start;
+      gap: 4px;
+    }
+
+    .metric-card__header {
+      gap: 8px;
+    }
+  }
 }
 
 @keyframes shadow-pulse {

package/src/v2/dashboard-analytics/metric-card/MetricCard.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import './MetricCard.scss';
 
 interface MetricCardProps {
-  icon: string;
+  icon?: string;
   title: string;
   value: string;
   performance?: {
@@ -29,19 +29,22 @@ export const MetricCard: React.FC<MetricCardProps> = ({
     className?.includes('h-20') && 'h-20',
     className?.includes('h-16') && 'h-16',
     showStatusDot && 'status-active',
+    !icon && 'metric-card--no-icon',
     className
   ].filter(Boolean).join(' ');
 
   return (
     <div className={cardClasses}>
-      <div className="metric-card__icon-wrapper">
-        <img
-          src={icon}
-          className="metric-card__icon"
-          alt={title}
-        />
-      </div>
-      
+      {icon && (
+        <div className="metric-card__icon-wrapper">
+          <img
+            src={icon}
+            className="metric-card__icon"
+            alt={title}
+          />
+        </div>
+      )}
+
       <div className="metric-card__content">
         <div className="metric-card__header">
           <div className="metric-card__title">
@@ -51,7 +54,7 @@ export const MetricCard: React.FC<MetricCardProps> = ({
             {value}
           </div>
         </div>
-        
+
         {performance && (
           <div className="metric-card__performance" style={{ color: performance.color }}>
             {performance.icon && (
@@ -69,4 +72,4 @@ export const MetricCard: React.FC<MetricCardProps> = ({
   );
 };
 
-export type { MetricCardProps };
+export type { MetricCardProps };