@licklist/design 0.78.5-dev.75 → 0.78.5-dev.77

package/dist/index.d.ts

@@ -71,5 +71,6 @@ export * from './v2/dashboard-analytics';
 export { DashboardLayout, type DashboardLayoutProps, type DestinationType, ProviderSidebar, type ProviderSidebarProps, type NavItem, AdminSidebar, type AdminSidebarProps, TopNavigation, type TopNavigationProps, DashboardFooter, type DashboardFooterProps, } from './v2/navigation/DashboardLayout';
 export * from './v2/pages/Settings';
 export * from './v2/pages/ZonesResources';
+export * from './v2/pages/SettingsSubPage';
 export * from './v2/components';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -249,6 +249,7 @@ export { SettingsTabs } from './v2/pages/Settings/SettingsTabs.js';
 export { SidebarCustomisation, defaultSidebarItems } from './v2/pages/Settings/components/SidebarCustomisation.js';
 export { SidebarNavItem } from './v2/pages/Settings/components/SidebarNavItem.js';
 export { ZonesResourcesPage } from './v2/pages/ZonesResources/ZonesResourcesPage.js';
+export { SettingsSubPage } from './v2/pages/SettingsSubPage/SettingsSubPage.js';
 export { IconButton } from './v2/components/IconButton/IconButton.js';
 export { Badge } from './v2/components/Badge/Badge.js';
 export { QuickFilter } from './v2/components/QuickFilter/QuickFilter.js';

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-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)}.metric-card--no-icon{padding:16px}@media (min-width:768px){.metric-card--no-icon{min-height:80px;padding:12px 16px}}.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/dist/v2/index.d.ts

@@ -28,6 +28,8 @@ export { UserPanel } from './components/UserPanel';
 export type { UserPanelProps } from './components/UserPanel';
 export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './components/ZoneCard';
 export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, ResourceRowLabels, AddResourceButtonProps } from './components/ZoneCard';
+export { SettingsSubPage } from './pages/SettingsSubPage';
+export type { SettingsSubPageProps } from './pages/SettingsSubPage';
 export { ZonesResourcesPage } from './pages/ZonesResources';
 export type { ZonesResourcesPageProps } from './pages/ZonesResources';
 export { DataTable } from './components/DataTable';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/v2/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/v2/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAOH,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAGlE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAGtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAG1D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAG1D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAIpE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAGlE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAExD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAGzE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAG5D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAC3G,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,eAAe,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAA;AAG3L,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAGnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,YAAY,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAA;AAGrE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAGzH,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAG7H,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AACxC,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAG9D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAGpE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAG7E,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAGlE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGxE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAQnF,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAG9D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAClE,YAAY,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAG5E,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAEpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACpE,YAAY,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAA;AAE9E,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAGlE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAClE,YAAY,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAE5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACpE,YAAY,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAA;AAE9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACpE,YAAY,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAA;AAG9E,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAC9D,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAA;AAGxE,OAAO,EACH,eAAe,EACf,eAAe,EACf,YAAY,EACZ,aAAa,EACb,eAAe,EAEf,QAAQ,EACR,SAAS,EACT,aAAa,EACb,WAAW,EACX,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,YAAY,GACf,MAAM,8BAA8B,CAAA;AACrC,YAAY,EACR,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,OAAO,EACP,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EACvB,MAAM,8BAA8B,CAAA;AAGrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAGtD,cAAc,SAAS,CAAA;AAMvB,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAMvD,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAOzD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACxH,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,WAAW,EAAE,yBAAyB,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAGtJ,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAC5G,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AAM1I;;;;;;;;;;;;GAYG"}

package/dist/v2/pages/SettingsSubPage/SettingsSubPage.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './SettingsSubPage.scss';
+export interface SettingsSubPageProps {
+    title?: string;
+    backLabel?: string;
+    onBack?: () => void;
+    actionLabel?: string;
+    onAction?: () => void;
+    children?: React.ReactNode;
+}
+export declare const SettingsSubPage: React.FC<SettingsSubPageProps>;
+//# sourceMappingURL=SettingsSubPage.d.ts.map

package/dist/v2/pages/SettingsSubPage/SettingsSubPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsSubPage.d.ts","sourceRoot":"","sources":["../../../../src/v2/pages/SettingsSubPage/SettingsSubPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,wBAAwB,CAAA;AAE/B,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAiC1D,CAAA"}

package/dist/v2/pages/SettingsSubPage/SettingsSubPage.js

@@ -0,0 +1,47 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import '../../components/Button/Button.scss.js';
+import { GhostButton } from '../../components/Button/GhostButton.js';
+import { NewPageHeader } from '../../components/NewPageHeader/NewPageHeader.js';
+import { ArrowLeftIcon, PlusIcon } from '../../icons/index.js';
+import './SettingsSubPage.scss.js';
+
+var SettingsSubPage = function(param) {
+    var _param_title = param.title, title = _param_title === void 0 ? '' : _param_title, _param_backLabel = param.backLabel, backLabel = _param_backLabel === void 0 ? 'Back to Settings' : _param_backLabel, onBack = param.onBack, actionLabel = param.actionLabel, onAction = param.onAction, children = param.children;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "settings-sub-page",
+        children: [
+            onBack && /*#__PURE__*/ jsx("div", {
+                className: "settings-sub-page__back",
+                children: /*#__PURE__*/ jsx(GhostButton, {
+                    onClick: onBack,
+                    icon: /*#__PURE__*/ jsx(ArrowLeftIcon, {}),
+                    children: backLabel
+                })
+            }),
+            /*#__PURE__*/ jsx(NewPageHeader, {
+                title: title,
+                showDivider: true
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "settings-sub-page__content",
+                children: [
+                    onAction && actionLabel && /*#__PURE__*/ jsx("div", {
+                        className: "settings-sub-page__action",
+                        children: /*#__PURE__*/ jsx(GhostButton, {
+                            onClick: onAction,
+                            icon: /*#__PURE__*/ jsx(PlusIcon, {
+                                width: 16,
+                                height: 16
+                            }),
+                            children: actionLabel
+                        })
+                    }),
+                    children
+                ]
+            })
+        ]
+    });
+};
+
+export { SettingsSubPage };

package/dist/v2/pages/SettingsSubPage/SettingsSubPage.scss.js

@@ -0,0 +1,6 @@
+import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".settings-sub-page{align-self:stretch;display:flex;flex-direction:column}.settings-sub-page__back{align-self:flex-start;padding:24px 32px 0}.settings-sub-page__back .ghost-button{border-color:var(--borders-main-border-primary,#e8e9ef);color:var(--fill-action,#5d5bf4)}.settings-sub-page__back .ghost-button:not(.active):hover:not(:disabled){background-color:var(--surface-action-soft,#f4f4fe);color:var(--fill-action,#5d5bf4)}.settings-sub-page__back .ghost-button .ghost-button__icon svg{height:24px;width:24px}@media (max-width:768px){.settings-sub-page__back{padding:16px 16px 0}}.settings-sub-page__content{padding:24px 32px}@media (max-width:768px){.settings-sub-page__content{padding:0}}.settings-sub-page__action{display:flex;justify-content:flex-end;margin-bottom:16px}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/dist/v2/pages/SettingsSubPage/index.d.ts

@@ -0,0 +1,3 @@
+export { SettingsSubPage } from './SettingsSubPage';
+export type { SettingsSubPageProps } from './SettingsSubPage';
+//# sourceMappingURL=index.d.ts.map

package/dist/v2/pages/SettingsSubPage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/pages/SettingsSubPage/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/v2/pages/ZonesResources/ZonesResourcesPage.d.ts

@@ -1,12 +1,9 @@
 import React from 'react';
-import './ZonesResourcesPage.scss';
-export interface ZonesResourcesPageProps {
-    title?: string;
-    backLabel?: string;
-    onBack?: () => void;
-    actionLabel?: string;
-    onAction?: () => void;
-    children?: React.ReactNode;
+import type { SettingsSubPageProps } from '../SettingsSubPage';
+export interface ZonesResourcesPageProps extends SettingsSubPageProps {
 }
+/**
+ * @deprecated Use SettingsSubPage instead. This is kept for backwards compatibility.
+ */
 export declare const ZonesResourcesPage: React.FC<ZonesResourcesPageProps>;
 //# sourceMappingURL=ZonesResourcesPage.d.ts.map

package/dist/v2/pages/ZonesResources/ZonesResourcesPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZonesResourcesPage.d.ts","sourceRoot":"","sources":["../../../../src/v2/pages/ZonesResources/ZonesResourcesPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,2BAA2B,CAAA;AAElC,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAiChE,CAAA"}
+{"version":3,"file":"ZonesResourcesPage.d.ts","sourceRoot":"","sources":["../../../../src/v2/pages/ZonesResources/ZonesResourcesPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAE9D,MAAM,WAAW,uBAAwB,SAAQ,oBAAoB;CAAG;AAExE;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAYhE,CAAA"}

package/dist/v2/pages/ZonesResources/ZonesResourcesPage.js

@@ -1,47 +1,73 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import 'react';
-import '../../components/Button/Button.scss.js';
-import { GhostButton } from '../../components/Button/GhostButton.js';
-import { NewPageHeader } from '../../components/NewPageHeader/NewPageHeader.js';
-import { ArrowLeftIcon, PlusIcon } from '../../icons/index.js';
-import './ZonesResourcesPage.scss.js';
+import { SettingsSubPage } from '../SettingsSubPage/SettingsSubPage.js';
 
-var ZonesResourcesPage = function(param) {
-    var _param_title = param.title, title = _param_title === void 0 ? 'Zones & Resources' : _param_title, _param_backLabel = param.backLabel, backLabel = _param_backLabel === void 0 ? 'Back to Settings' : _param_backLabel, onBack = param.onBack, _param_actionLabel = param.actionLabel, actionLabel = _param_actionLabel === void 0 ? 'Add Zone' : _param_actionLabel, onAction = param.onAction, children = param.children;
-    return /*#__PURE__*/ jsxs("div", {
-        className: "zones-resources-page",
-        children: [
-            onBack && /*#__PURE__*/ jsx("div", {
-                className: "zones-resources-page__back",
-                children: /*#__PURE__*/ jsx(GhostButton, {
-                    onClick: onBack,
-                    icon: /*#__PURE__*/ jsx(ArrowLeftIcon, {}),
-                    children: backLabel
-                })
-            }),
-            /*#__PURE__*/ jsx(NewPageHeader, {
-                title: title,
-                showDivider: true
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: "zones-resources-page__content",
-                children: [
-                    onAction && /*#__PURE__*/ jsx("div", {
-                        className: "zones-resources-page__action",
-                        children: /*#__PURE__*/ jsx(GhostButton, {
-                            onClick: onAction,
-                            icon: /*#__PURE__*/ jsx(PlusIcon, {
-                                width: 16,
-                                height: 16
-                            }),
-                            children: actionLabel
-                        })
-                    }),
-                    children
-                ]
-            })
-        ]
-    });
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+/**
+ * @deprecated Use SettingsSubPage instead. This is kept for backwards compatibility.
+ */ var ZonesResourcesPage = function(_param) {
+    var _param_title = _param.title, title = _param_title === void 0 ? 'Zones & Resources' : _param_title, _param_actionLabel = _param.actionLabel, actionLabel = _param_actionLabel === void 0 ? 'Add Zone' : _param_actionLabel, props = _object_without_properties(_param, [
+        "title",
+        "actionLabel"
+    ]);
+    return /*#__PURE__*/ jsx(SettingsSubPage, _object_spread({
+        title: title,
+        actionLabel: actionLabel
+    }, props));
 };
 
 export { ZonesResourcesPage };

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

@@ -35,6 +35,7 @@
   &__input {
     @include typography('text.regular');
     flex: 1 0 0;
+    color: var(--label-primary, #121e52);
     background-color: var(--surfaces-main-background-secondary);
     border: 2px solid var(--border-primary);
     border-radius: var(--radius-md);
@@ -57,6 +58,17 @@
     &::placeholder {
       color: var(--labels-main-label-secondary, #626a90);
     }
+
+    &[type="date"]::-webkit-datetime-edit-text,
+    &[type="date"]::-webkit-datetime-edit-month-field,
+    &[type="date"]::-webkit-datetime-edit-day-field,
+    &[type="date"]::-webkit-datetime-edit-year-field,
+    &[type="time"]::-webkit-datetime-edit-text,
+    &[type="time"]::-webkit-datetime-edit-hour-field,
+    &[type="time"]::-webkit-datetime-edit-minute-field,
+    &[type="time"]::-webkit-datetime-edit-ampm-field {
+      color: var(--label-primary, #121e52);
+    }
   }
 
     &__textarea {

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

package/package.json

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

package/src/index.ts

@@ -84,4 +84,5 @@ export {
 } from './v2/navigation/DashboardLayout'
 export * from './v2/pages/Settings'
 export * from './v2/pages/ZonesResources'
+export * from './v2/pages/SettingsSubPage'
 export * from './v2/components'

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

@@ -5,7 +5,7 @@
   font-family: var(--font-family-sans, 'Geist', sans-serif);
 
   &__back {
-    margin-bottom: 30px;
+    margin-bottom: 16px;
     display: inline-flex;
     align-items: center;
     gap: 8px;
@@ -37,6 +37,14 @@
     }
   }
 
+  &__name {
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--label-primary);
+    margin: 0 0 22px 0;
+    line-height: 1.2;
+  }
+
   &__header {
     margin-bottom: 40px;
   }
@@ -44,33 +52,10 @@
   &__summary-row {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    gap: 24px;
+    gap: 16px;
     margin-bottom: 32px;
   }
 
-  &__summary-card {
-    background: var(--surface-secondary);
-    border: 1px solid var(--tone-light);
-    border-radius: 12px;
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    label {
-      font-size: 14px;
-      font-weight: 600;
-      color: var(--label-secondary);
-      margin: 0;
-    }
-  }
-
-  &__summary-value {
-    font-size: 28px;
-    font-weight: 700;
-    color: var(--label-primary);
-  }
-
   &__card {
     background: var(--surface-primary);
     border: 1px solid var(--border-primary);
@@ -120,14 +105,6 @@
       margin: 2px;
       text-transform: none;
     }
-
-    span {
-      font-size: 15px;
-      font-weight: 600;
-      color: var(--label-primary);
-      display: inline-flex;
-      align-items: center;
-    }
   }
 
   &__edit {
@@ -205,7 +182,7 @@
 
 @media (max-width: 768px) {
   .customer-detail {
-    padding: 20px 16px;
+    padding: 20px 0;
 
     &__summary-row {
       grid-template-columns: 1fr;

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

@@ -111,6 +111,24 @@
   &__performance-text {
     @include typography('heading.h6');
   }
+
+  &--no-icon {
+    padding: 16px;
+
+    @media (min-width: 768px) {
+      min-height: 80px;
+      padding: 12px 16px;
+    }
+
+    .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 };

package/src/v2/icons/Icons.stories.tsx

@@ -0,0 +1,253 @@
+import React from 'react'
+import {
+  DashboardIcon,
+  CompanyIcon,
+  VenueIcon,
+  MarketingIcon,
+  AdminIcon,
+  ProfileIcon,
+  CustomersIcon,
+  ReportsIcon,
+  AnalyticsIcon,
+  PaymentsIcon,
+  SettingsIcon,
+  LoyaltyIcon,
+  WaiversIcon,
+  CalendarIcon,
+  BookingsIcon,
+  BookingTypesIcon,
+  EditIcon,
+  CalendarSmallIcon,
+  SearchIcon,
+  RefreshIcon,
+  SendIcon,
+  ExternalLinkIcon,
+  ExportIcon,
+  ClearIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ArrowRightIcon,
+  ArrowLeftIcon,
+  InfoIcon,
+  TableHeaderArrowUpIcon,
+  TableHeaderArrowDownIcon,
+  ArrowUpIcon,
+  ArrowDownIcon,
+  GripVerticalIcon,
+  PlusIcon,
+  CloseIcon,
+  EllipsisIcon,
+  CircleIcon,
+  SecurityIcon,
+  NewPasswordIcon,
+  PasswordRequirementIcon,
+  VerifyEmailIcon,
+  PasswordTypeIcon,
+  BookedLogo,
+  DeleteIcon,
+  UserAddIcon,
+  UserImportIcon,
+  SlidersIcon,
+  ProviderPlusIcon,
+  ClockIcon,
+  WarningTriangleIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  UserGroupIcon,
+  UploadIcon,
+  ArrowDownSmallIcon,
+  ToggleCheckIcon,
+  ToggleCrossIcon,
+  TrendUpIcon,
+  TrendDownIcon,
+  TrendSteadyIcon,
+  TrendUpSmallIcon,
+  TrendDownSmallIcon,
+  TrendSteadySmallIcon,
+  NPSHappyIcon,
+  NPSNeutralIcon,
+  NPSSadIcon,
+  NPSSadFaceIcon,
+  NPSNeutralFaceIcon,
+  NPSHappyFaceIcon,
+  AnalyticsEmptyIcon,
+  PaymentsEmptyIcon,
+  ReportsEmptyIcon,
+  SelectCheckIcon,
+} from './index'
+
+export default {
+  title: 'v2/Icons',
+}
+
+const iconCardStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 8,
+  padding: 16,
+  border: '1px solid #E8E9EF',
+  borderRadius: 8,
+  minWidth: 120,
+  minHeight: 100,
+}
+
+const labelStyle: React.CSSProperties = {
+  fontSize: 11,
+  color: '#6B7280',
+  fontFamily: 'monospace',
+  textAlign: 'center',
+  wordBreak: 'break-all',
+}
+
+const gridStyle: React.CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
+  gap: 12,
+  padding: 24,
+}
+
+const sectionStyle: React.CSSProperties = {
+  marginBottom: 32,
+}
+
+const sectionTitleStyle: React.CSSProperties = {
+  fontSize: 16,
+  fontWeight: 600,
+  marginBottom: 12,
+  paddingLeft: 24,
+  color: '#111827',
+}
+
+const IconCard = ({ name, children }: { name: string; children: React.ReactNode }) => (
+  <div style={iconCardStyle}>
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      {children}
+    </div>
+    <span style={labelStyle}>{name}</span>
+  </div>
+)
+
+const Section = ({ title, children }: { title: string; children: React.ReactNode }) => (
+  <div style={sectionStyle}>
+    <h3 style={sectionTitleStyle}>{title}</h3>
+    <div style={gridStyle}>{children}</div>
+  </div>
+)
+
+export const AllIcons = () => (
+  <div>
+    <Section title="Navigation">
+      <IconCard name="DashboardIcon"><DashboardIcon /></IconCard>
+      <IconCard name="CompanyIcon"><CompanyIcon /></IconCard>
+      <IconCard name="VenueIcon"><VenueIcon /></IconCard>
+      <IconCard name="MarketingIcon"><MarketingIcon /></IconCard>
+      <IconCard name="AdminIcon"><AdminIcon /></IconCard>
+      <IconCard name="ProfileIcon"><ProfileIcon /></IconCard>
+      <IconCard name="CustomersIcon"><CustomersIcon /></IconCard>
+      <IconCard name="ReportsIcon"><ReportsIcon /></IconCard>
+      <IconCard name="AnalyticsIcon"><AnalyticsIcon /></IconCard>
+      <IconCard name="PaymentsIcon"><PaymentsIcon /></IconCard>
+      <IconCard name="SettingsIcon"><SettingsIcon /></IconCard>
+      <IconCard name="LoyaltyIcon"><LoyaltyIcon /></IconCard>
+      <IconCard name="WaiversIcon"><WaiversIcon /></IconCard>
+      <IconCard name="CalendarIcon"><CalendarIcon /></IconCard>
+      <IconCard name="BookingsIcon"><BookingsIcon /></IconCard>
+      <IconCard name="BookingTypesIcon"><BookingTypesIcon /></IconCard>
+    </Section>
+
+    <Section title="Actions">
+      <IconCard name="EditIcon"><EditIcon /></IconCard>
+      <IconCard name="SearchIcon"><SearchIcon /></IconCard>
+      <IconCard name="RefreshIcon"><RefreshIcon /></IconCard>
+      <IconCard name="SendIcon"><SendIcon /></IconCard>
+      <IconCard name="ExternalLinkIcon"><ExternalLinkIcon /></IconCard>
+      <IconCard name="ExportIcon"><ExportIcon /></IconCard>
+      <IconCard name="ClearIcon"><ClearIcon /></IconCard>
+      <IconCard name="DeleteIcon"><DeleteIcon /></IconCard>
+      <IconCard name="PlusIcon"><PlusIcon /></IconCard>
+      <IconCard name="CloseIcon"><CloseIcon /></IconCard>
+      <IconCard name="UploadIcon"><UploadIcon /></IconCard>
+    </Section>
+
+    <Section title="Arrows & Chevrons">
+      <IconCard name="ArrowLeftIcon"><ArrowLeftIcon /></IconCard>
+      <IconCard name="ArrowRightIcon"><ArrowRightIcon /></IconCard>
+      <IconCard name="ArrowUpIcon"><ArrowUpIcon /></IconCard>
+      <IconCard name="ArrowDownIcon"><ArrowDownIcon /></IconCard>
+      <IconCard name="ArrowDownSmallIcon"><ArrowDownSmallIcon /></IconCard>
+      <IconCard name="ChevronLeftIcon"><ChevronLeftIcon /></IconCard>
+      <IconCard name="ChevronRightIcon"><ChevronRightIcon /></IconCard>
+      <IconCard name="TableHeaderArrowUpIcon"><TableHeaderArrowUpIcon /></IconCard>
+      <IconCard name="TableHeaderArrowDownIcon"><TableHeaderArrowDownIcon /></IconCard>
+    </Section>
+
+    <Section title="Form & Input">
+      <IconCard name="CalendarSmallIcon"><CalendarSmallIcon /></IconCard>
+      <IconCard name="ClockIcon"><ClockIcon /></IconCard>
+      <IconCard name="InfoIcon"><InfoIcon /></IconCard>
+      <IconCard name="EllipsisIcon"><EllipsisIcon /></IconCard>
+      <IconCard name="CircleIcon"><CircleIcon /></IconCard>
+      <IconCard name="GripVerticalIcon"><GripVerticalIcon /></IconCard>
+      <IconCard name="SlidersIcon"><SlidersIcon /></IconCard>
+      <IconCard name="SelectCheckIcon"><SelectCheckIcon /></IconCard>
+      <IconCard name="ToggleCheckIcon"><ToggleCheckIcon /></IconCard>
+      <IconCard name="ToggleCrossIcon"><ToggleCrossIcon /></IconCard>
+    </Section>
+
+    <Section title="Users">
+      <IconCard name="UserAddIcon"><UserAddIcon /></IconCard>
+      <IconCard name="UserImportIcon"><UserImportIcon /></IconCard>
+      <IconCard name="UserGroupIcon"><UserGroupIcon /></IconCard>
+      <IconCard name="ProviderPlusIcon"><ProviderPlusIcon /></IconCard>
+    </Section>
+
+    <Section title="Status & Feedback">
+      <IconCard name="CheckCircleIcon"><CheckCircleIcon /></IconCard>
+      <IconCard name="XCircleIcon"><XCircleIcon /></IconCard>
+      <IconCard name="WarningTriangleIcon"><WarningTriangleIcon /></IconCard>
+      <IconCard name="SecurityIcon"><SecurityIcon /></IconCard>
+    </Section>
+
+    <Section title="Trends">
+      <IconCard name="TrendUpIcon"><TrendUpIcon /></IconCard>
+      <IconCard name="TrendDownIcon"><TrendDownIcon /></IconCard>
+      <IconCard name="TrendSteadyIcon"><TrendSteadyIcon /></IconCard>
+      <IconCard name="TrendUpSmallIcon"><TrendUpSmallIcon /></IconCard>
+      <IconCard name="TrendDownSmallIcon"><TrendDownSmallIcon /></IconCard>
+      <IconCard name="TrendSteadySmallIcon"><TrendSteadySmallIcon /></IconCard>
+    </Section>
+
+    <Section title="NPS">
+      <IconCard name="NPSHappyIcon"><NPSHappyIcon /></IconCard>
+      <IconCard name="NPSNeutralIcon"><NPSNeutralIcon /></IconCard>
+      <IconCard name="NPSSadIcon"><NPSSadIcon /></IconCard>
+      <IconCard name="NPSHappyFaceIcon"><NPSHappyFaceIcon /></IconCard>
+      <IconCard name="NPSNeutralFaceIcon"><NPSNeutralFaceIcon /></IconCard>
+      <IconCard name="NPSSadFaceIcon"><NPSSadFaceIcon /></IconCard>
+    </Section>
+
+    <Section title="Auth & Branding">
+      <IconCard name="NewPasswordIcon"><NewPasswordIcon /></IconCard>
+      <IconCard name="PasswordRequirementIcon"><PasswordRequirementIcon met={false} /></IconCard>
+      <IconCard name="PasswordRequirementIcon (met)"><PasswordRequirementIcon met /></IconCard>
+      <IconCard name="VerifyEmailIcon"><VerifyEmailIcon /></IconCard>
+      <IconCard name="PasswordTypeIcon"><PasswordTypeIcon /></IconCard>
+      <IconCard name="BookedLogo"><BookedLogo /></IconCard>
+    </Section>
+
+    <Section title="Empty States">
+      <IconCard name="AnalyticsEmptyIcon"><AnalyticsEmptyIcon /></IconCard>
+      <IconCard name="PaymentsEmptyIcon"><PaymentsEmptyIcon /></IconCard>
+      <IconCard name="ReportsEmptyIcon"><ReportsEmptyIcon /></IconCard>
+    </Section>
+
+  </div>
+)
+
+AllIcons.story = {
+  parameters: {
+    info: 'All v2 icons in the design system',
+  },
+}

package/src/v2/index.ts

@@ -53,7 +53,11 @@ export type { UserPanelProps } from './components/UserPanel'
 export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './components/ZoneCard'
 export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, ResourceRowLabels, AddResourceButtonProps } from './components/ZoneCard'
 
-// ZonesResources Page
+// SettingsSubPage (generic settings sub-page layout)
+export { SettingsSubPage } from './pages/SettingsSubPage'
+export type { SettingsSubPageProps } from './pages/SettingsSubPage'
+
+// ZonesResources Page (deprecated — use SettingsSubPage)
 export { ZonesResourcesPage } from './pages/ZonesResources'
 export type { ZonesResourcesPageProps } from './pages/ZonesResources'
 

package/src/v2/pages/SettingsSubPage/SettingsSubPage.scss

@@ -0,0 +1,43 @@
+.settings-sub-page {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+
+  &__back {
+    padding: 24px 32px 0 32px;
+    align-self: flex-start;
+
+    .ghost-button {
+      color: var(--fill-action, #5D5BF4);
+      border-color: var(--borders-main-border-primary, #E8E9EF);
+
+      &:not(.active):hover:not(:disabled) {
+        background-color: var(--surface-action-soft, #F4F4FE);
+        color: var(--fill-action, #5D5BF4);
+      }
+
+      .ghost-button__icon svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    @media (max-width: 768px) {
+      padding: 16px 16px 0 16px;
+    }
+  }
+
+  &__content {
+    padding: 24px 32px;
+
+    @media (max-width: 768px) {
+      padding: 0;
+    }
+  }
+
+  &__action {
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}

package/src/v2/pages/SettingsSubPage/SettingsSubPage.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { GhostButton } from '../../components/Button'
+import { NewPageHeader } from '../../components/NewPageHeader'
+import { ArrowLeftIcon, PlusIcon } from '../../icons'
+import './SettingsSubPage.scss'
+
+export interface SettingsSubPageProps {
+  title?: string
+  backLabel?: string
+  onBack?: () => void
+  actionLabel?: string
+  onAction?: () => void
+  children?: React.ReactNode
+}
+
+export const SettingsSubPage: React.FC<SettingsSubPageProps> = ({
+  title = '',
+  backLabel = 'Back to Settings',
+  onBack,
+  actionLabel,
+  onAction,
+  children,
+}) => {
+  return (
+    <div className="settings-sub-page">
+      {onBack && (
+        <div className="settings-sub-page__back">
+          <GhostButton onClick={onBack} icon={<ArrowLeftIcon />}>
+            {backLabel}
+          </GhostButton>
+        </div>
+      )}
+      <NewPageHeader
+        title={title}
+        showDivider
+      />
+      <div className="settings-sub-page__content">
+        {onAction && actionLabel && (
+          <div className="settings-sub-page__action">
+            <GhostButton onClick={onAction} icon={<PlusIcon width={16} height={16} />}>
+              {actionLabel}
+            </GhostButton>
+          </div>
+        )}
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/v2/pages/SettingsSubPage/index.ts

@@ -0,0 +1,2 @@
+export { SettingsSubPage } from './SettingsSubPage'
+export type { SettingsSubPageProps } from './SettingsSubPage'

package/src/v2/pages/ZonesResources/ZonesResourcesPage.tsx

@@ -1,49 +1,22 @@
 import React from 'react'
-import { GhostButton } from '../../components/Button'
-import { NewPageHeader } from '../../components/NewPageHeader'
-import { ArrowLeftIcon, PlusIcon } from '../../icons'
-import './ZonesResourcesPage.scss'
+import { SettingsSubPage } from '../SettingsSubPage'
+import type { SettingsSubPageProps } from '../SettingsSubPage'
 
-export interface ZonesResourcesPageProps {
-  title?: string
-  backLabel?: string
-  onBack?: () => void
-  actionLabel?: string
-  onAction?: () => void
-  children?: React.ReactNode
-}
+export interface ZonesResourcesPageProps extends SettingsSubPageProps {}
 
+/**
+ * @deprecated Use SettingsSubPage instead. This is kept for backwards compatibility.
+ */
 export const ZonesResourcesPage: React.FC<ZonesResourcesPageProps> = ({
   title = 'Zones & Resources',
-  backLabel = 'Back to Settings',
-  onBack,
   actionLabel = 'Add Zone',
-  onAction,
-  children,
+  ...props
 }) => {
   return (
-    <div className="zones-resources-page">
-      {onBack && (
-        <div className="zones-resources-page__back">
-          <GhostButton onClick={onBack} icon={<ArrowLeftIcon />}>
-            {backLabel}
-          </GhostButton>
-        </div>
-      )}
-      <NewPageHeader
-        title={title}
-        showDivider
-      />
-      <div className="zones-resources-page__content">
-        {onAction && (
-          <div className="zones-resources-page__action">
-            <GhostButton onClick={onAction} icon={<PlusIcon width={16} height={16} />}>
-              {actionLabel}
-            </GhostButton>
-          </div>
-        )}
-        {children}
-      </div>
-    </div>
+    <SettingsSubPage
+      title={title}
+      actionLabel={actionLabel}
+      {...props}
+    />
   )
 }

package/src/v2/styles/form/NewInput.scss

@@ -35,6 +35,7 @@
   &__input {
     @include typography('text.regular');
     flex: 1 0 0;
+    color: var(--label-primary, #121e52);
     background-color: var(--surfaces-main-background-secondary);
     border: 2px solid var(--border-primary);
     border-radius: var(--radius-md);
@@ -57,6 +58,17 @@
     &::placeholder {
       color: var(--labels-main-label-secondary, #626a90);
     }
+
+    &[type="date"]::-webkit-datetime-edit-text,
+    &[type="date"]::-webkit-datetime-edit-month-field,
+    &[type="date"]::-webkit-datetime-edit-day-field,
+    &[type="date"]::-webkit-datetime-edit-year-field,
+    &[type="time"]::-webkit-datetime-edit-text,
+    &[type="time"]::-webkit-datetime-edit-hour-field,
+    &[type="time"]::-webkit-datetime-edit-minute-field,
+    &[type="time"]::-webkit-datetime-edit-ampm-field {
+      color: var(--label-primary, #121e52);
+    }
   }
 
     &__textarea {

package/dist/v2/pages/ZonesResources/ZonesResourcesPage.scss.js

@@ -1,6 +0,0 @@
-import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".zones-resources-page{align-self:stretch;display:flex;flex-direction:column}.zones-resources-page__back{align-self:flex-start;padding:24px 32px 0}.zones-resources-page__back .ghost-button{border-color:var(--borders-main-border-primary,#e8e9ef);color:var(--fill-action,#5d5bf4)}.zones-resources-page__back .ghost-button:not(.active):hover:not(:disabled){background-color:var(--surface-action-soft,#f4f4fe);color:var(--fill-action,#5d5bf4)}.zones-resources-page__back .ghost-button .ghost-button__icon svg{height:24px;width:24px}@media (max-width:768px){.zones-resources-page__back{padding:16px 16px 0}}.zones-resources-page__content{padding:24px 32px}@media (max-width:768px){.zones-resources-page__content{padding:0}}.zones-resources-page__action{display:flex;justify-content:flex-end;margin-bottom:16px}";
-styleInject(css_248z);
-
-export { css_248z as default };