@tcn/ui 0.0.4 → 0.1.1

package/src/themes/themes/ergo/__stories__/utils.ts

@@ -0,0 +1,92 @@
+interface HSL {
+  h: string;
+  s: string;
+  l: string;
+  a?: string;
+}
+
+export function parseHSL(color: string): HSL {
+  if (!color) return { h: '46', s: '46%', l: '89%', a: '100%' };
+
+  // Handle hsl() format: "hsl(46, 46%, 89%)"
+  if (color.startsWith('hsl(')) {
+    const match = color.match(
+      /hsl\((\d+(?:\.\d+)?),\s*(\d+(?:\.\d+)?)%?,\s*(\d+(?:\.\d+)?)%?\)/
+    );
+    if (match) {
+      return {
+        h: match[1],
+        s: match[2].includes('%') ? match[2] : `${match[2]}%`,
+        l: match[3].includes('%') ? match[3] : `${match[3]}%`,
+      };
+    }
+  }
+
+  if (color.startsWith('hsla(')) {
+    const match = color.match(
+      /hsla\((\d+(?:\.\d+)?),\s*(\d+(?:\.\d+)?)%?,\s*(\d+(?:\.\d+)?)%?,\s*(\d+(?:\.\d+)?)\)/
+    );
+    if (match) {
+      return {
+        h: match[1],
+        s: match[2].includes('%') ? match[2] : `${match[2]}%`,
+        l: match[3].includes('%') ? match[3] : `${match[3]}%`,
+        a: match[4].includes('%') ? match[4] : `${match[4]}%`,
+      };
+    }
+  }
+
+  // Handle hex format (Storybook color picker often returns hex)
+  if (color.startsWith('#')) {
+    const r = parseInt(color.slice(1, 3), 16) / 255;
+    const g = parseInt(color.slice(3, 5), 16) / 255;
+    const b = parseInt(color.slice(5, 7), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r:
+          h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+          break;
+        case g:
+          h = ((b - r) / d + 2) / 6;
+          break;
+        case b:
+          h = ((r - g) / d + 4) / 6;
+          break;
+      }
+    }
+    return {
+      h: Math.round(h * 360).toString(),
+      s: `${Math.round(s * 100)}%`,
+      l: `${Math.round(l * 100)}%`,
+      a: '100%',
+    };
+  }
+
+  // Default fallback
+  return { h: '46', s: '46%', l: '89%', a: '100%' };
+}
+
+export function getContrastText(material: HSL) {
+  const l = parseFloat(material.l);
+
+  // If background is light, return off-black for contrast.
+  // If background is dark, return off-white for contrast.
+  if (l > 50) {
+    // dark text for light background: "off-black"
+    return { h: '0', s: '0%', l: '12%' }; // near black, but not pure black
+  } else {
+    // light text for dark background: "off-white"
+    return { h: '0', s: '0%', l: '95%' }; // near white, but not pure white
+  }
+}
+
+export function formatHSLString(hsl: HSL) {
+  return `${hsl.h}, ${hsl.s}, ${hsl.l}`;
+}

package/src/themes/themes/ergo/ergo_theme.css

@@ -146,7 +146,8 @@ legend {
 
   --status-color-disabled: #7f7f7f;
   --status-color-info: #008cff;
-  --status-color-warning: #ff0000;
+  --status-color-warning: #ffff00;
+  --status-color-positive: #00ff00;
   --status-color-error: #ff0000;
 
   --async-color-initial: #c0c0c0;
@@ -184,24 +185,280 @@ legend {
   --foreground-color-tertiary: #222222;
   --foreground-color-quaternary: #222222;
 
-  --accent-color: #008cff;
+  --material-disabled: #d3d3d3;
+  --material-secondary-dark: 197 29.1% 40.4%;
+  --material-tan: 33, 22%, 84%;
 
   --shape-radius-small: 2px;
   --shape-radius-medium: 4px;
   --shape-radius-large: 8px;
+
+  --accent-color: #cd6b2c;
+
+  --action: 23, 65%, 49%;
+  --on-action: 0, 0%, 100%;
+  --material: 0, 0%, 100%;
+  --on-material: 213, 35.6%, 34.7%;
 }
 
 * {
   position: relative;
   box-sizing: border-box;
 }
+/* ===== Actions ===== */
+
+.tcn-interactive {
+  cursor: pointer;
+  user-select: none;
+  transition:
+    transform 0.1s,
+    background 0.1s,
+    color 0.1s;
+
+  --act: hsl(var(--action));
+  --on-act: hsl(var(--on-action));
+  /* Could use hsl here if we made three color variables for each of the hsl values */
+  --act-down: color-mix(in srgb, var(--act), black 8%);
+  --act-raised: color-mix(in srgb, var(--act), white 8%);
+  --act-faint: hsla(var(--action), 0.2);
+  --on-mat: hsl(var(--on-material));
+  --on-mat-faint: hsla(var(--on-material), 0.2);
+  --mat: hsl(var(--material));
+  --mat-down: color-mix(in srgb, var(--mat), black 8%);
+  --mat-raised: color-mix(in srgb, var(--mat), white 8%);
+}
+
+.tcn-interactive[data-is-disabled="true"] {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.tcn-interactive[data-hierarchy="primary"] {
+  background: var(--act);
+  color: var(--on-act);
+  border: 1px solid var(--act);
+}
+
+.tcn-interactive[data-hierarchy="primary"]:focus-visible {
+  outline: 2px dashed var(--act);
+}
+
+.tcn-interactive[data-hierarchy="primary"][data-is-disabled="true"] {
+  background: var(--material-disabled);
+  color: white;
+  border: 1px solid var(--material-disabled);
+}
+
+.tcn-interactive[data-hierarchy="primary"]:hover {
+  background: var(--act-raised);
+}
+
+.tcn-interactive[data-hierarchy="primary"]:active {
+  background: var(--act-down);
+}
+
+.tcn-interactive[data-hierarchy="secondary"] {
+  background: transparent;
+  color: var(--on-mat);
+  border: 1px solid var(--on-mat);
+}
+
+.tcn-interactive[data-hierarchy="secondary"]:focus-visible {
+  outline: 2px dashed var(--on-mat);
+}
+
+.tcn-interactive[data-hierarchy="secondary"][data-is-disabled="true"] {
+  color: var(--material-disabled);
+  border: 1px solid var(--material-disabled);
+}
+
+.tcn-interactive[data-hierarchy="secondary"]:hover {
+  background: var(--on-mat-faint);
+}
+
+.tcn-interactive[data-hierarchy="secondary"]:active {
+  background: var(--mat-down);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"] {
+  background: transparent;
+  color: var(--on-mat);
+  border: 1px solid transparent;
+}
+
+.tcn-interactive[data-hierarchy="tertiary"]:focus-visible {
+  outline: 2px dashed var(--on-mat);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"][data-is-disabled="true"] {
+  color: var(--material-disabled);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"]:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--on-mat);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+  color: var(--on-mat);
+  background: var(--on-mat-faint);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"]:active {
+  background: var(--mat-down);
+}
+
+/* Button */
+.tcn-button {
+  border-radius: 4px;
+}
+
+.tcn-button[data-size="sm"] {
+  padding: 0px 8px;
+  min-height: 22px;
+}
+
+.tcn-button[data-size="md"] {
+  padding: 0px 12px;
+  min-height: 26px;
+}
+
+.tcn-button[data-size="lg"] {
+  padding: 0px 16px;
+  min-height: 32px;
+}
+
+.tcn-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+}
+
+.tcn-button:active {
+  transform: translateY(1px);
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}
+
+.tcn-slim-button {
+  height: auto;
+  width: auto;
+  padding: 0;
+}
+
+.tcn-slim-button[data-size="sm"] {
+  min-height: 12px;
+  min-width: 12px;
+  padding: 0;
+  .tcn-icon {
+    min-height: 10px;
+    min-width: 10px;
+  }
+}
+
+.tcn-slim-button[data-size="md"] {
+  min-height: 18px;
+  min-width: 18px;
+  padding: 0;
+  .tcn-icon {
+    min-height: 14px;
+    min-width: 14px;
+  }
+}
+
+.tcn-slim-button[data-size="lg"] {
+  min-height: 24px;
+  min-width: 24px;
+  padding: 0;
+  .tcn-icon {
+    min-height: 20px;
+    min-width: 20px;
+  }
+}
+
+/* ===== Materials ===== */
+
+/* White on Gray */
+.material-status-disabled {
+  --action: 0, 0%, 100%;
+  --on-action: 0, 0%, 49.8%;
+  --material: 0, 0%, 49.8%;
+  --on-material: 0, 0%, 100%;
+}
+
+/* White on Vivid Blue */
+.material-status-info {
+  --action: 0, 0%, 100%;
+  --on-action: 207, 100%, 50%;
+  --material: 207, 100%, 50%;
+  --on-material: 0, 0%, 100%;
+}
+
+/* Navy on Yellow */
+.material-status-warning {
+  --action: 213, 35.6%, 34.7%;
+  --on-action: 60, 100%, 50%;
+  --material: 60, 100%, 50%;
+  --on-material: 213, 35.6%, 34.7%;
+}
+
+/* White on Red  */
+.material-status-error {
+  --action: 0, 0%, 100%;
+  --on-action: 0, 100%, 50%;
+  --material: 0, 100%, 50%;
+  --on-material: 0, 0%, 100%;
+}
+
+/* Navy on Light Grey */
+.material-async-initial {
+  --action: 213, 35.6%, 34.7%;
+  --on-action: 0, 0%, 75.3%;
+  --material: 0, 0%, 75.3%;
+  --on-material: 213, 35.6%, 34.7%;
+}
+
+/* White on Loading Blue */
+.material-async-pending {
+  --action: 0, 0%, 100%;
+  --on-action: 207, 100%, 50%;
+  --material: 207, 100%, 50%;
+  --on-material: 0, 0%, 100%;
+}
+
+/* White on Vivid Green */
+.material-async-success {
+  --action: 0, 0%, 100%;
+  --on-action: 120, 100%, 50%;
+  --material: 120, 100%, 50%;
+  --on-material: 0, 0%, 100%;
+}
+
+/* White on Red */
+.material-async-failed {
+  --action: 0, 0%, 100%;
+  --on-action: 0, 100%, 50%;
+  --material: 0, 100%, 50%;
+  --on-material: 0, 0%, 100%;
+}
+
+.material {
+  background-color: hsl(var(--material));
+  color: hsl(var(--on-material));
+}
 
 /* ===== SURFACES ===== */
+.tcn-list {
+  gap: var(--gap-medium);
+  .tcn-item {
+    height: 24px;
+    padding: 0px var(--padding-medium);
+    border-radius: var(--shape-radius-medium);
+  }
+}
 
 .tcn-veil {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
+/* TODO: FIX Borders on modal header and footer -- when there are multiple header/footers */
 /* MODAL: */
 .tcn-modal {
   --v-inset: var(--padding-large);
@@ -210,29 +467,22 @@ legend {
   /* TODO: This should be a variable */
   border: 1px solid rgba(170, 170, 170, 1);
   overflow: hidden;
+
+  :where(.tcn-typography) {
+    color: inherit;
+  }
+
   :where(.tcn-header) {
+    --material: var(--material-secondary-dark);
+    --on-material: 0, 0%, 100%;
+    --action: var(--material-tan);
+    --on-action: 0, 0%, 100%;
+    background-color: hsl(var(--material));
+    color: hsl(var(--on-material));
     min-height: 40px;
-    /* TODO: This should be a variable */
-    background-color: rgb(73, 116, 133);
-    color: white;
     padding: 0 var(--v-inset);
     gap: var(--gap-medium);
 
-    :where(.tcn-title) {
-      color: white;
-    }
-
-    :where(.tcn-button) {
-      padding: 0;
-      min-width: 18px;
-      min-height: 18px;
-      color: white;
-    }
-
-    :where(.tcn-button)[data-hierarchy="tertiary"] {
-      color: white;
-    }
-
     :where(.tcn-divider) {
       padding: 4px 0;
       :where(.tcn-divider-line) {
@@ -273,10 +523,10 @@ legend {
   --v-inset: var(--padding-large);
   background-color: var(--background-color-primary);
   border-radius: var(--shape-radius-medium);
+  overflow: hidden;
 
   :where(.tcn-header) {
     min-height: 40px;
-    border-bottom: 1px solid var(--foreground-color-primary);
     padding: 0 var(--v-inset);
     gap: var(--gap-medium);
 
@@ -284,12 +534,6 @@ legend {
       font-weight: 700;
     }
 
-    :where(.tcn-button) {
-      padding: 0;
-      min-width: 18px;
-      min-height: 18px;
-    }
-
     :where(.tcn-divider) {
       padding: 4px 0;
       :where(.tcn-divider-line) {
@@ -300,16 +544,20 @@ legend {
     }
   }
 
+  /* Border appears on body only when it follows header or utility-bar */
+  :where(.tcn-header) + :where(.tcn-body),
+  :where(.tcn-utility-bar) + :where(.tcn-body) {
+    border-top: 1px solid var(--foreground-color-primary);
+  }
+
+  /* Border appears on footer only when it follows body */
+  :where(.tcn-body) + :where(.tcn-footer) {
+    border-top: 1px solid var(--foreground-color-primary);
+  }
+
   :where(.tcn-utility-bar) {
     min-height: 32px;
-    border-bottom: 1px solid var(--foreground-color-primary);
     padding: 0 var(--v-inset);
-
-    :where(.tcn-button) {
-      padding: 0;
-      min-width: 18px;
-      min-height: 18px;
-    }
   }
 
   :where(.tcn-body) {
@@ -320,7 +568,22 @@ legend {
   :where(.tcn-footer) {
     gap: var(--gap-medium);
     min-height: 40px;
-    border-top: 1px solid var(--foreground-color-primary);
     padding: 0 var(--v-inset);
   }
 }
+
+/* Card */
+.tcn-card {
+  padding: 0;
+  gap: 0px;
+  border: 1px solid var(--foreground-color-primary);
+  border-radius: var(--shape-radius-medium);
+  overflow: hidden;
+  :where(.tcn-header) {
+    /* TODO: Color header */
+    min-height: 32px;
+  }
+  :where(.tcn-body) {
+    padding: var(--padding-medium) var(--v-inset);
+  }
+}

package/src/typography/title/title.tsx

@@ -78,7 +78,7 @@ export function Title({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={clsx(styles['title'], 'title', 'tcn-title', className)}
+      className={clsx(styles['title'], 'title', 'tcn-typography', 'tcn-title', className)}
       style={style}
       data-size={size}
     >

package/tsconfig.json

@@ -3,9 +3,6 @@
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "paths": {
-      "~tooling/*": [
-        "../tooling/src/*"
-      ],
       "~aip-160/*": [
         "../aip-160/src/*"
       ],

package/dist/card.css

@@ -1 +0,0 @@
-._card_a3c9492{box-shadow:0 2px 10px #00000040;padding:16px;gap:8px}

package/dist/portal-qqIp4SIl.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"portal-qqIp4SIl.js","sources":["../src/overlay/portal/portal.tsx"],"sourcesContent":["import React, { useState, useLayoutEffect } from 'react';\nimport { usePortalPlatform } from './portal_platform_context.js';\n\nexport interface PortalProps {\n  children: React.ReactNode | React.ReactNode[];\n  zIndex?: number;\n}\n\nexport const Portal = ({ children, zIndex }: PortalProps) => {\n  const portalPlatform = usePortalPlatform();\n\n  const [portal] = useState(() => {\n    return portalPlatform.createPortal();\n  });\n\n  useLayoutEffect(() => {\n    portal.setZIndex(zIndex);\n  }, [portal, zIndex]);\n\n  useLayoutEffect(() => {\n    portalPlatform.mountPortal(portal);\n    return () => portalPlatform.unmountPortal(portal);\n  }, [portal, portalPlatform]);\n\n  return portal.render(children);\n};\n"],"names":["Portal","children","zIndex","portalPlatform","usePortalPlatform","portal","useState","useLayoutEffect"],"mappings":";;AAQO,MAAMA,IAAS,CAAC,EAAE,UAAAC,GAAU,QAAAC,QAA0B;AAC3D,QAAMC,IAAiBC,EAAA,GAEjB,CAACC,CAAM,IAAIC,EAAS,MACjBH,EAAe,aAAA,CACvB;AAED,SAAAI,EAAgB,MAAM;AACpB,IAAAF,EAAO,UAAUH,CAAM;AAAA,EACzB,GAAG,CAACG,GAAQH,CAAM,CAAC,GAEnBK,EAAgB,OACdJ,EAAe,YAAYE,CAAM,GAC1B,MAAMF,EAAe,cAAcE,CAAM,IAC/C,CAACA,GAAQF,CAAc,CAAC,GAEpBE,EAAO,OAAOJ,CAAQ;AAC/B;"}

package/dist/themes/stylesheets/reset.css

@@ -1 +0,0 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}legend{all:unset;display:block;margin:0;padding:0;font:inherit;color:inherit}

package/dist/themes/themes/ergo/ergo_theme.css

@@ -1 +0,0 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}legend{all:unset;display:block;margin:0;padding:0;font:inherit;color:inherit}:root{--scalar: 1;--gap-small: 4px;--gap-medium: 8px;--gap-large: 16px;--padding-small: 4px;--padding-medium: 8px;--padding-large: 16px;--status-color-disabled: #7f7f7f;--status-color-info: #008cff;--status-color-warning: #ff0000;--status-color-error: #ff0000;--async-color-initial: #c0c0c0;--async-color-pending: #008cff;--async-color-success: #00ff00;--async-color-failed: #ff0000;--primary-color-faint: #c0c0c0;--primary-color: #008cff;--primary-color-strong: #008cff;--secondary-color-faint: #c0c0c0;--secondary-color: #008cff;--secondary-color-strong: #008cff;--tertiary-color-faint: #c0c0c0;--tertiary-color: #008cff;--tertiary-color-strong: #008cff;--quaternary-color-faint: #c0c0c0;--quaternary-color: #008cff;--quaternary-color-strong: #008cff;--font-color: #395578;--font-family: "Lato", sans-serif;--font-size: 12px;--background-color-primary: #ffffff;--background-color-secondary: #ffffff;--background-color-tertiary: #ffffff;--background-color-quaternary: #ffffff;--foreground-color-primary: #aaa;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--accent-color: #008cff;--shape-radius-small: 2px;--shape-radius-medium: 4px;--shape-radius-large: 8px}*{position:relative;box-sizing:border-box}.tcn-veil{background-color:#00000080}.tcn-modal{--v-inset: var(--padding-large);background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);border:1px solid rgba(170,170,170,1);overflow:hidden}.tcn-modal :where(.tcn-header){min-height:40px;background-color:#497485;color:#fff;padding:0 var(--v-inset);gap:var(--gap-medium)}.tcn-modal :where(.tcn-header) :where(.tcn-title){color:#fff}.tcn-modal :where(.tcn-header) :where(.tcn-button){padding:0;min-width:18px;min-height:18px;color:#fff}.tcn-modal :where(.tcn-header) :where(.tcn-button)[data-hierarchy=tertiary]{color:#fff}.tcn-modal :where(.tcn-header) :where(.tcn-divider){padding:4px 0}.tcn-modal :where(.tcn-header) :where(.tcn-divider) :where(.tcn-divider-line){width:1.5px;min-height:18px;height:auto}.tcn-modal :where(.tcn-utility-bar){min-height:32px;border-bottom:1px solid var(--foreground-color-primary);padding:0 var(--v-inset)}.tcn-modal :where(.tcn-utility-bar) :where(.tcn-button){padding:0;min-width:18px;min-height:18px}.tcn-modal :where(.tcn-body){padding:0 var(--v-inset);gap:var(--gap-medium)}.tcn-modal :where(.tcn-footer){gap:var(--gap-medium);min-height:40px;border-top:1px solid var(--foreground-color-primary);padding:0 var(--v-inset)}.tcn-panel{--v-inset: var(--padding-large);background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium)}.tcn-panel :where(.tcn-header){min-height:40px;border-bottom:1px solid var(--foreground-color-primary);padding:0 var(--v-inset);gap:var(--gap-medium)}.tcn-panel :where(.tcn-header) :where(.tcn-title){font-weight:700}.tcn-panel :where(.tcn-header) :where(.tcn-button){padding:0;min-width:18px;min-height:18px}.tcn-panel :where(.tcn-header) :where(.tcn-divider){padding:4px 0}.tcn-panel :where(.tcn-header) :where(.tcn-divider) :where(.tcn-divider-line){width:1.5px;min-height:18px;height:auto}.tcn-panel :where(.tcn-utility-bar){min-height:32px;border-bottom:1px solid var(--foreground-color-primary);padding:0 var(--v-inset)}.tcn-panel :where(.tcn-utility-bar) :where(.tcn-button){padding:0;min-width:18px;min-height:18px}.tcn-panel :where(.tcn-body){padding:0 var(--v-inset);gap:var(--gap-medium)}.tcn-panel :where(.tcn-footer){gap:var(--gap-medium);min-height:40px;border-top:1px solid var(--foreground-color-primary);padding:0 var(--v-inset)}

package/dist/themes/themes/windows_98/windows_98.css

@@ -1 +0,0 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}legend{all:unset;display:block;margin:0;padding:0;font:inherit;color:inherit}*{position:relative;box-sizing:border-box}:root{--scalar: 1;--gap-small: 2px;--gap-medium: 4px;--gap-large: 8px;--padding-small: 2px;--padding-medium: 4px;--padding-large: 8px;--status-color-disabled: #7f7f7f;--status-color-info: #000080;--status-color-warning: #000080;--status-color-error: #be0000;--async-color-initial: #c0c0c0;--async-color-pending: #000080;--async-color-success: #00ff00;--async-color-failed: #be0000;--primary-color-faint: #c0c0c0;--primary-color: #000080;--primary-color-strong: #000080;--secondary-color-faint: #c0c0c0;--secondary-color: #000080;--secondary-color-strong: #000080;--tertiary-color-faint: #c0c0c0;--tertiary-color: #000080;--tertiary-color-strong: #000080;--quaternary-color-faint: #c0c0c0;--quaternary-color: #000080;--quaternary-color-strong: #000080;--font-color: #222222;--font-family: "Pixelated MS Sans Serif", Arial;--font-size: 12px;--background-color-primary: #c0c0c0;--background-color-secondary: #c0c0c0;--background-color-tertiary: #c0c0c0;--background-color-quaternary: #c0c0c0;--foreground-color-primary: #222222;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--accent-color: #000080}.title[data-size=sm]{font-size:10px}.title[data-size=md]{font-size:12px}.title[data-size=lg]{font-size:14px}.body-text[data-size=sm]{font-size:10px}.body-text[data-size=md]{font-size:11px}.body-text[data-size=lg]{font-size:12px}.button-text{position:relative;opacity:1;font-size:12px!important}.button,.button[data-hierarchy=primary],.button[data-hierarchy=secondary],.button[data-hierarchy=primary]:hover,.button[data-hierarchy=secondary]:hover{background:silver;border:none;border-radius:0;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;box-sizing:border-box;color:#222;min-height:23px;min-width:0;padding:0 12px;font-size:12px;text-decoration:none;outline:none}.button[data-hierarchy=primary]>*,.button[data-hierarchy=secondary]>*{position:relative}.button[data-hierarchy=primary]:active>*,.button[data-hierarchy=secondary]:active>*{position:relative;top:0;left:1px}.button[data-hierarchy=primary]:focus:not(:active):before,.button[data-hierarchy=secondary]:focus:not(:active):before{content:"";position:absolute;inset:1px 2px 2px 1px;outline:1px dotted #222;outline-offset:-3px}.button[data-hierarchy=primary],.button[data-hierarchy=primary]:hover{box-shadow:inset -2px -2px #0a0a0a,inset 1px 1px #0a0a0a,inset -3px -3px gray,inset 2px 2px #fff,inset 3px 3px silver}.button[data-hierarchy=primary]:active,.button[data-hierarchy=secondary]:active{background:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px silver,inset 2px 2px gray;color:#222;border:none;text-decoration:none}.button[data-hierarchy=primary]:focus,.button[data-hierarchy=secondary]:focus,.button[data-hierarchy=primary]:focus:not(:active),.button[data-hierarchy=secondary]:focus:not(:active){background:silver;border:none;text-decoration:none}.button[data-hierarchy=tertiary]{padding:0 4px;background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:navy;min-height:auto;min-width:auto;text-decoration:none}.button[data-hierarchy=tertiary]:hover{background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:navy;min-height:auto;min-width:auto;text-decoration:none}.button[data-hierarchy=tertiary]:active{background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:#00008099;min-height:auto;min-width:auto;text-decoration:none}.button[data-hierarchy=tertiary]:focus,.button[data-hierarchy=tertiary]:focus:not(:active){background:none;outline:1px dotted #000080;outline-offset:0;border:none;text-decoration:none}.button[data-hierarchy=secondary][data-is-disabled=true]{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver}.button[data-hierarchy=primary][data-is-disabled=true]{box-shadow:inset -2px -2px #717171,inset 1px 1px #717171,inset -3px -3px #999,inset 2px 2px #fff,inset 3px 3px silver}.button[data-hierarchy=primary][data-is-disabled=true],.button[data-hierarchy=secondary][data-is-disabled=true],.button[data-hierarchy=tertiary][data-is-disabled=true]{color:#7f7f7f;cursor:not-allowed}.button.select,.button.select:hover{position:relative;padding-inline-end:20px;padding-inline-start:4px}.button.select:dir(ltr):after{content:"";position:absolute;right:calc(4px * var(--scalar, 1));top:50%;transform:translateY(-50%);width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.button.select:dir(rtl):after{content:"";position:absolute;left:calc(4px * var(--scalar, 1));top:50%;transform:translateY(-50%);width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));background-color:#222;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.slim-button,.slim-button[data-hierarchy=primary],.slim-button[data-hierarchy=secondary],.slim-button[data-hierarchy=primary]:hover,.slim-button[data-hierarchy=secondary]:hover{padding:2px;min-width:0;min-height:0;height:auto;width:auto}.slim-button[data-size=sm],.slim-button[data-hierarchy=primary][data-size=sm],.slim-button[data-hierarchy=secondary][data-size=sm],.slim-button[data-hierarchy=primary][data-size=sm]:hover,.slim-button[data-hierarchy=secondary][data-size=sm]:hover{padding:1px}.slim-button[data-size=md],.slim-button[data-hierarchy=primary][data-size=md],.slim-button[data-hierarchy=secondary][data-size=md],.slim-button[data-hierarchy=primary][data-size=md]:hover,.slim-button[data-hierarchy=secondary][data-size=md]:hover{padding:2px}.slim-button[data-size=lg],.slim-button[data-hierarchy=primary][data-size=lg],.slim-button[data-hierarchy=secondary][data-size=lg],.slim-button[data-hierarchy=primary][data-size=lg]:hover,.slim-button[data-hierarchy=secondary][data-size=lg]:hover{padding:4px}.select-group .button[data-hierarchy=primary],.select-group .button[data-hierarchy=primary]:hover,.select-group .button[data-hierarchy=primary]:focus{background-color:navy;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;color:#fff}.select-group .button:hover,.select-group .button:focus,.button-group .button:hover,.button-group .button:focus{z-index:1}.input,.textarea,.suggestion-list-search-input,.multi-combo-box-values-container,.multiselect-values-container{border-radius:0;outline:none;border:none;background-color:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;padding:3px 4px}.suggestion-list-search-input{box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a,0 -2px 0 2px silver}.input,.textarea,.suggestion-list-search-input{height:23px}.input:is(:focus,:focus-visible,:active,:hover),.input:is(:focus,:focus-visible,:active,:hover)[data-is-disabled=false],.textarea:is(:focus,:focus-visible,:active,:hover),.textarea:is(:focus,:focus-visible,:active,:hover)[data-is-disabled=false]{outline:none;border:none}.input[data-is-disabled=true],.textarea[data-is-disabled=true],.suggestion-list-search-input[data-is-disabled=true],.multiselect-values-container[data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.input[data-is-disabled=true],.textarea[data-is-disabled=true],.suggestion-list-search-input[data-is-disabled=true],.multiselect-values-container[data-is-disabled=true],.input[data-is-disabled=true]::placeholder,.textarea[data-is-disabled=true]::placeholder,.suggestion-list-search-input[data-is-disabled=true]::placeholder,.multiselect-values-container[data-is-disabled=true]::placeholder{color:#7f7f7f;cursor:not-allowed;background-color:silver}.select-group .button[data-hierarchy=primary]:active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px silver,inset 2px 2px gray;color:#fff}.select-group .button[data-hierarchy=primary]:focus:not(:active):before{outline:1px dotted #fcfcfc}.suggestion-list{padding:2px}.suggestion-item{padding:0;background:transparent;border:none;min-height:0}.suggestion-item:hover{background:navy;color:#fff}.suggestion-item[data-is-selected=true],.suggestion-item[data-is-focused=true]{padding:0;background:navy;color:#fff;border:none}.suggestion-list-search-input{border-radius:0;padding:4px;height:24px;min-height:24px}.title{color:#000}.header .title{color:#fff}.header[data-kind=window]{padding:4px;background:linear-gradient(90deg,navy,#1084d0);border:none;color:#fff}.header[data-kind=window]>.button{color:#222}.header[data-kind=toolbar],.header[data-kind=app],.header[data-kind=nav]{padding:4px 0;background:silver;color:#222;border-bottom:1px solid #808080;border-top:1px solid #f5f5f5;border-right:1px solid #808080;border-left:1px solid #f5f5f5;padding-inline-start:4px}.header[data-kind=panel]{padding:4px;background:linear-gradient(90deg,#7c7c7c,#aeaeae);border:none;color:#fff}.main[data-kind=window],.main[data-kind=app],.main[data-kind=nav],.main[data-kind=toolbar],.main[data-kind=section],.main[data-kind=panel],.main[data-kind=drawer],.main[data-kind=card],.panel,.h-panel,.v-panel,.sidebar-start[data-hierarchy],.sidebar-end[data-hierarchy]{border-radius:0;background:silver;color:#222;border-bottom:1px solid #808080;border-top:1px solid #f5f5f5;border-right:1px solid #808080;border-left:1px solid #f5f5f5}.column:after{content:"";position:absolute;bottom:var(--padding);top:var(--padding);right:0;width:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.column:last-child:after{display:none}.main[data-kind=panel],.sidebar-start[data-kind=panel],.sidebar-end[data-kind=panel]{padding:0}.sidebar-start[data-hierarchy=tertiary],.sidebar-start[data-hierarchy=secondary]{background:silver;color:#222}.sidebar-start[data-kind=nav],.v-nav{background:#fff;padding:2px;border-top:1px solid #808080;border-bottom:1px solid #f5f5f5;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.sidebar-end[data-hierarchy=tertiary],.sidebar-end[data-hierarchy=secondary]{background:silver;color:#222}.sidebar-end[data-hierarchy=primary],.sidebar-start[data-hierarchy=primary]{background:#fff;color:#222}.footer[data-kind=window]{padding:4px;background:silver;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver;color:#222}.window,.date-picker-popover,.date-picker-year-selector,.menu,.suggestion-list{border-radius:0;background:silver;padding:4px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #f5f5f5,inset -2px -2px gray,inset 2px 2px silver}.suggestion-list-header{background:silver}.date-picker-box{background:silver;padding:0}.date-picker-date,.date-picker-year-button{box-shadow:none!important}.date-picker-header{height:20px}.button.phone-number-input-select,.button.phone-number-input-select:hover{min-width:0}.phone-number-input[data-has-phone-book=false]{border-end-end-radius:0px;border-start-end-radius:0px}.button.phone-number-input-phone-book{max-width:23px!important;max-height:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important}.button.date-picker-year-select{padding-inline-end:20px}.button.date-picker-year-select:dir(ltr):after{width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E")}.button.date-picker-year-select:dir(rtl):after{width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E")}.time-box{border-radius:0;background:#fff;border:none;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver}.time-box-title-container{min-height:25px;height:25px}.field-set{padding:8px 12px 12px;margin-top:10px;border-radius:0;background:silver;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #f5f5f5,inset -2px -2px gray}.field-set>.field-set-body{background:transparent;padding:0;gap:8px}.field-set>.field-set-legend{position:relative;top:-7px;left:-4px;height:0}.field-set-legend-text{background:silver;padding:0;font-size:12px}.chip{background:silver;border-radius:0;color:#222;border:none;font-size:12px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.checkbox{outline:none;border-radius:0;background:#fff;border:none;background-position:center;background-repeat:no-repeat;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver}.checkbox:focus{outline:none}.checkbox[data-checked=true]{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E")}.checkbox[data-is-disabled=false]:active{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E")}.checkbox[data-is-disabled=true]{background-color:silver}.checkbox[data-checked=true][data-is-disabled=true]{background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23707070' stroke-width='2'/%3E%3C/svg%3E")}.radio,.radio[data-checked=true],.radio[checked=true]{width:14px;height:14px;min-width:14px;min-height:14px;border-inline-end:1px solid #fff;border-inline-start:1px solid #222;border-block-end:1px solid #fff;border-block-start:1px solid #222}.radio:focus{outline:none}.radio:before{content:"";background:transparent;position:absolute;border-radius:50%;inset:0;border-inline-end:1px solid #dfdfdf;border-inline-start:1px solid #808080;border-block-end:1px solid #dfdfdf;border-block-start:1px solid #808080}.radio[data-checked=true]:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40%;height:40%;background:#222;border-radius:50%}.switch:focus,.switch:focus-visible,.switch-wrapper[data-focused=true][data-is-checked=false],.switch-wrapper[data-focused=true][data-is-checked=true]{outline:none}.switch-wrapper{border-radius:0;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;border-color:silver;background-color:#fff;transition:background-color .2s ease-out;margin-top:2px;margin-bottom:3px}.switch-wrapper[data-is-checked=false]>.switch-icon{color:#222}.switch:after{content:"";cursor:pointer;position:absolute;top:0;transition:transform .2s ease-out;width:calc(16px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.switch-wrapper[data-is-checked=true][data-is-disabled=false]{background-color:var(--accent-color);border-color:silver}.switch-wrapper[data-is-disabled=true]{background-color:silver;border-color:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #7f7f7f}.switch[data-is-disabled=true]:after{box-shadow:inset -1px -1px #666,inset 1px 1px #fff,inset -2px -2px #949494,inset 2px 2px silver}.switch-wrapper[data-is-disabled=true]>.switch-icon{color:#707070}.slider::-webkit-slider-runnable-track{border-radius:0;height:5px;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}.slider::-webkit-slider-runnable-track [data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.slider::-webkit-slider-thumb{outline:none;width:calc(12px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;border:none;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.slider[data-is-disabled=false]:active::-webkit-slider-thumb{background-color:silver}.slider[data-is-disabled=true]::-webkit-slider-thumb{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver}.slider::-moz-range-track{border-radius:0;height:5px;border:none;background:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}.slider::-moz-range-track [data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.slider::-moz-range-thumb{outline:none;width:calc(12px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;border:none;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;cursor:pointer}.slider[data-is-disabled=false]:active::-moz-range-thumb,.slider[data-is-disabled=false]:focus::-moz-range-thumb{background-color:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;outline:none}.slider[data-is-disabled=true]::-moz-range-thumb{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver;cursor:not-allowed}.nav-item,.nav-item[data-is-selected],.menu-item{border-radius:0;font-size:12px}.nav-item,.menu-item .body-text{font-size:12px}.main[data-hierarchy=primary],.main[data-hierarchy=secondary],.main[data-hierarchy=tertiary]{background:silver;padding:0}.h-nav{border:none}.h-nav:after{content:"";position:absolute;left:0;right:0;bottom:0;height:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.footer{border:none}.footer:after{content:"";position:absolute;left:0;right:0;top:0;height:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}

package/src/surfaces/card/card.module.css

@@ -1,5 +0,0 @@
-.card {
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);
-  padding: 16px;
-  gap: 8px;
-}