@orangelogic/design-system 2.19.0-pr77202.21

package/library/components/visually-hidden.d.ts

@@ -0,0 +1,3 @@
+export * from '../packages/atoms/src/components/visually-hidden/visually-hidden'
+import _default from '../packages/atoms/src/components/visually-hidden/visually-hidden'
+export default _default

package/library/components/visually-hidden.js

@@ -0,0 +1,32 @@
+import { i as p, C as l, x as m, c } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as d } from "../chunks/component.styles.DtouHn2g.js";
+const h = p`
+  :host(:not(:focus-within)) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    clip: rect(0 0 0 0) !important;
+    clip-path: inset(50%) !important;
+    border: none !important;
+    overflow: hidden !important;
+    white-space: nowrap !important;
+    padding: 0 !important;
+  }
+`;
+var u = Object.getOwnPropertyDescriptor, x = (r, n, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? u(n, a) : n, e = r.length - 1, s; e >= 0; e--)
+    (s = r[e]) && (t = s(t) || t);
+  return t;
+};
+let o = class extends l {
+  render() {
+    return m` <slot></slot> `;
+  }
+};
+o.styles = [d, h];
+o = x([
+  c("cx-visually-hidden")
+], o);
+export {
+  o as default
+};

package/library/css/ol-base.css

@@ -0,0 +1,200 @@
+:root {
+  /*
+   * Border radius
+   */
+
+  --cx-border-radius-small  : 4px;     /* 4px */
+  --cx-border-radius-medium : 6px;     /* 6px */
+  --cx-border-radius-large  : 8px;     /* 8px */
+  --cx-border-radius-x-large: 12px;    /* 16px */
+  --cx-border-radius-circle : 50%;
+  --cx-border-radius-pill   : 9999px;
+
+  /*
+   * Typography
+   */
+
+  /* Fonts */
+  --cx-font-mono: sfmono-regular, consolas, 'Liberation Mono', menlo, monospace;
+  --cx-font-sans: 'Fira Sans', -apple-system, blinkmacsystemfont, 'Segoe UI',
+    roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol';
+  --cx-font-serif: georgia, 'Times New Roman', serif;
+
+  /* Font sizes */
+  --cx-font-size-2x-small    : 10px;  /* 10px */
+  --cx-font-size-x-small     : 12px;  /* 12px */
+  --cx-font-size-small       : 14px;  /* 14px */
+  --cx-font-size-medium      : 16px;  /* 16px */
+  --cx-font-size-medium-large: 18px;  /* 18px */
+  --cx-font-size-large       : 20px;  /* 20px */
+  --cx-font-size-x-large     : 24px;  /* 24px */
+  --cx-font-size-2x-large    : 28px;  /* 28px */
+  --cx-font-size-3x-large    : 32px;  /* 32px */
+  --cx-font-size-4x-large    : 72px;  /* 72px */
+
+  /* Font weights */
+  --cx-font-weight-light   : 300;  /* Light */
+  --cx-font-weight-regular : 400;  /* Regular */
+  --cx-font-weight-medium  : 500;  /* Medium */
+  --cx-font-weight-semibold: 600;  /* Semi-bold */
+  --cx-font-weight-bold    : 700;  /* Bold */
+
+  /* Letter spacings */
+  --cx-letter-spacing-denser: -0.03em;
+  --cx-letter-spacing-dense : -0.015em;
+  --cx-letter-spacing-normal: normal;
+  --cx-letter-spacing-loose : 0.075em;
+  --cx-letter-spacing-looser: 0.15em;
+
+  /* Line heights */
+  --cx-line-height-3x-large    : 36px;
+  --cx-line-height-2x-large    : 32px;
+  --cx-line-height-x-large     : 28px;
+  --cx-line-height-large       : 24px;
+  --cx-line-height-medium      : 20px;
+  --cx-line-height-small       : 18px;
+
+  /* Paragraph spacing */
+  --paragraph-spacing-large : 1.125em;
+  --paragraph-spacing-medium: 1em;
+  --paragraph-spacing-small : 0.75em;
+
+  /* Focus rings */
+  --cx-focus-ring-style : solid;
+  --cx-focus-ring-width : 3px;
+  --cx-focus-ring-offset: 1px;
+
+  /* Global */
+  --cx-heading-font-family: var(--cx-font-sans);            /* Added */
+  --cx-heading-font-weight: var(--cx-font-weight-regular);  /* Added */
+  --cx-heading-line-height: var(--cx-line-height-medium);   /* Added */
+  --cx-heading-1-font-size: var(--cx-font-size-2x-large);   /* Added */
+  --cx-heading-2-font-size: var(--cx-font-size-x-large);    /* Added */
+  --cx-heading-3-font-size: var(--cx-font-size-large);      /* Added */
+  --cx-heading-4-font-size: var(--cx-font-size-medium);     /* Added */
+  --cx-heading-5-font-size: var(--cx-font-size-small);      /* Added */
+  --cx-heading-6-font-size: var(--cx-font-size-x-small);    /* Added */
+
+  /*
+   * Forms
+   */
+
+  /* Buttons */
+  --cx-button-border-radius-large      : var(--cx-border-radius-medium);
+  --cx-button-border-radius-medium     : var(--cx-border-radius-medium);
+  --cx-button-border-radius-small      : var(--cx-border-radius-medium);
+  --cx-button-font-size-large          : var(--cx-font-size-medium);
+  --cx-button-font-size-medium         : var(--cx-font-size-small);
+  --cx-button-font-size-small          : var(--cx-font-size-x-small);
+  --cx-button-padding-horizontal-large : var(--cx-spacing-large);         /* Added */
+  --cx-button-padding-horizontal-medium: var(--cx-spacing-medium);        /* Added */
+  --cx-button-padding-horizontal-small : var(--cx-spacing-small);         /* Added */
+  --cx-button-text-transform           : uppercase;                       /* Added */
+
+  /* Inputs */
+  --cx-input-border-radius-large    : var(--cx-border-radius-large);
+  --cx-input-border-radius-medium   : var(--cx-border-radius-large);
+  --cx-input-border-radius-small    : var(--cx-border-radius-large);
+  --cx-input-border-width           : 1px;
+  --cx-input-focus-ring-offset      : 0;
+  --cx-input-font-family            : var(--cx-font-sans);
+  --cx-input-font-size-large        : var(--cx-font-size-large);
+  --cx-input-font-size-medium       : var(--cx-font-size-medium);
+  --cx-input-font-size-small        : var(--cx-font-size-small);
+  --cx-input-font-weight            : var(--cx-font-weight-regular);
+  --cx-input-height-x-large         : 48px;
+  --cx-input-height-large           : 40px;
+  --cx-input-height-medium          : 32px;
+  --cx-input-height-small           : 24px;
+  --cx-input-letter-spacing         : var(--cx-letter-spacing-normal);
+  --cx-input-required-content       : '*';
+  --cx-input-required-content-offset: -2px;
+  --cx-input-spacing-large          : var(--cx-spacing-large);
+  --cx-input-spacing-medium         : var(--cx-spacing-medium);
+  --cx-input-spacing-small          : var(--cx-spacing-small);
+
+
+  /* Labels */
+  --cx-input-label-font-size-large    : var(--cx-font-size-medium);
+  --cx-input-label-font-size-medium   : var(--cx-font-size-small);
+  --cx-input-label-font-size-small    : var(--cx-font-size-x-small);
+  --cx-input-label-text-transform     : none;
+  --cx-radio-label-text-transform     : none;
+  --cx-checkbox-label-text-transform  : none;
+  --cx-radio-card-label-text-transform: none;
+
+
+  /* Help text */
+  --cx-input-help-text-font-size-large : var(--cx-font-size-medium);
+  --cx-input-help-text-font-size-medium: var(--cx-font-size-small);
+  --cx-input-help-text-font-size-small : var(--cx-font-size-x-small);
+
+  /* Toggles (checkboxes, radios, switches) */
+  --cx-toggle-size-small : 16px;  /* 16px */
+  --cx-toggle-size-medium: 20px;  /* 20px */
+  --cx-toggle-size-large : 22px;  /* 22px */
+
+  /*
+   * Panels
+   */
+
+  --cx-panel-border-width: 1px;
+
+  /*
+   * Spacings
+   */
+
+  --cx-spacing-3x-small: 2px;   /* 2px */
+  --cx-spacing-2x-small: 4px;   /* 4px */
+  --cx-spacing-x-small : 8px;   /* 8px */
+  --cx-spacing-small   : 12px;  /* 12px */
+  --cx-spacing-medium  : 16px;  /* 16px */
+  --cx-spacing-large   : 20px;  /* 20px */
+  --cx-spacing-x-large : 28px;  /* 28px */
+  --cx-spacing-2x-large: 36px;  /* 36px */
+  --cx-spacing-3x-large: 48px;  /* 48px */
+  --cx-spacing-4x-large: 72px;  /* 72px */
+
+  /*
+   * Tooltips
+   */
+
+  --cx-tooltip-arrow-size      : 0;
+  --cx-tooltip-border-radius   : var(--cx-border-radius-medium);
+  --cx-tooltip-font-family     : var(--cx-font-sans);
+  --cx-tooltip-font-size       : var(--cx-font-size-small);
+  --cx-tooltip-font-weight     : var(--cx-font-weight-regular);
+  --cx-tooltip-line-height     : var(--cx-line-height-medium);
+  --cx-tooltip-padding         : var(--cx-spacing-2x-small) var(--cx-spacing-x-small);
+  --cx-tooltip-background-color: #27272A;
+  --cx-tooltip-color           : #FFF;
+
+  /*
+   * Transitions
+   */
+
+  --cx-transition-x-slow: 1000ms;
+  --cx-transition-slow  : 500ms;
+  --cx-transition-medium: 250ms;
+  --cx-transition-fast  : 150ms;
+  --cx-transition-x-fast: 50ms;
+
+  /*
+   * Z-indexes
+   */
+
+  --cx-z-index-drawer  : 700;
+  --cx-z-index-dialog  : 800;
+  --cx-z-index-dropdown: 900;
+  --cx-z-index-toast   : 950;
+  --cx-z-index-tooltip : 1000;
+}
+
+.medium-zoom-overlay {
+  z-index: 900;
+}
+
+.medium-zoom-image {
+  z-index: 1000;
+}

package/library/css/ol-dark.css

@@ -0,0 +1,152 @@
+@import url('./ol-base.css');
+
+.cx-theme-dark {
+  color-scheme: dark;
+
+  /*
+   * Theme Tokens
+   */
+
+  /* Primary */
+  --cx-color-primary-50 : #202E5F;                      /* Primary hover */
+  --cx-color-primary-100: #274195;
+  --cx-color-primary-200: #2744B4;
+  --cx-color-primary-300: #2852DD;
+  --cx-color-primary-400: #2F67F0;
+  --cx-color-primary-500: #2A77FA;                      /* Primary */
+  --cx-color-primary-600: #4D9CFF;
+  --cx-color-primary-700: #7EBDFF;
+  --cx-color-primary-800: #AAD3FF;
+  --cx-color-primary-900: #C6E2FF;
+  --cx-color-primary-950: #E7F6FF;
+  --cx-color-primary    : var(--cx-color-primary-500);
+
+  /* Success */
+  --cx-color-success-50 : #133F25;
+  --cx-color-success-100: #1B5D34;
+  --cx-color-success-200: #1C6A38;
+  --cx-color-success-300: #1D8541;
+  --cx-color-success-400: #20A84E;
+  --cx-color-success-500: #26B559;                      /* Primary */
+  --cx-color-success-600: #3ADF76;
+  --cx-color-success-700: #74F2A1;
+  --cx-color-success-800: #A8FBC5;
+  --cx-color-success-900: #C7FFDC;
+  --cx-color-success-950: #E8FFF1;
+  --cx-color-success    : var(--cx-color-success-600);
+
+  /* Warning */
+  --cx-color-warning-50 : #592C12;
+  --cx-color-warning-100: #833C14;
+  --cx-color-warning-200: #974413;
+  --cx-color-warning-300: #BA5810;
+  --cx-color-warning-400: #DF7C0F;
+  --cx-color-warning-500: #F29704;                      /* Primary */
+  --cx-color-warning-600: #FFBD11;
+  --cx-color-warning-700: #FFD239;
+  --cx-color-warning-800: #FFE675;
+  --cx-color-warning-900: #FFF5B2;
+  --cx-color-warning-950: #FFFFE3;
+  --cx-color-warning    : var(--cx-color-warning-600);
+
+  /* Danger */
+  --cx-color-danger-50 : #5F1B1B;
+  --cx-color-danger-100: #8A2423;
+  --cx-color-danger-200: #9E211F;
+  --cx-color-danger-300: #BF2320;
+  --cx-color-danger-400: #E22D2A;
+  --cx-color-danger-500: #F43230;                     /* Primary */
+  --cx-color-danger-600: #FE5C5C;
+  --cx-color-danger-700: #FF7272;
+  --cx-color-danger-800: #FFB6B6;
+  --cx-color-danger-900: #FFCECE;
+  --cx-color-danger-950: #FFEAEA;
+  --cx-color-danger    : var(--cx-color-danger-600);
+
+  /* Neutral */
+  --cx-color-neutral-0   : #1A1A1E;
+  --cx-color-neutral-50  : #242428;
+  --cx-color-neutral-100 : #2C2C31;
+  --cx-color-neutral-200 : #36363B;
+  --cx-color-neutral-300 : #43434A;
+  --cx-color-neutral-400 : #56565F;
+  --cx-color-neutral-500 : #6C6C74;
+  --cx-color-neutral-600 : #8E8E9A;
+  --cx-color-neutral-700 : #B6B6BE;
+  --cx-color-neutral-800 : #D3D3D9;
+  --cx-color-neutral-900 : #E8E8EC;                      /* Primary */
+  --cx-color-neutral-950 : #F2F2F2;
+  --cx-color-neutral-1000: #fff;
+  --cx-color-neutral     : var(--cx-color-neutral-700);
+
+  /*
+   * Elevations
+   */
+
+  --cx-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
+  --cx-shadow-small  : 0 1px 2px rgb(0 0 0 / 24%);
+  --cx-shadow-medium : 0 5px 17px hsl(240deg 5% 10% / 80%);
+  --cx-shadow-large  : 0 10px 35px hsl(240deg 5% 5% / 90%);
+  --cx-shadow-x-large: 0 4px 16px hsl(0deg 0% 0% 24%);
+
+  /* Focus rings */
+  --cx-focus-ring-color: var(--cx-color-primary-600);
+  --cx-focus-ring      : var(--cx-focus-ring-style) var(--cx-focus-ring-width)
+    var(--cx-focus-ring-color);
+
+  /*
+   * Forms
+   */
+
+  /* Inputs */
+  --cx-input-background-color                : var(--cx-color-neutral-0);
+  --cx-input-background-color-disabled       : var(--cx-color-neutral-100);
+  --cx-input-background-color-focus          : var(--cx-input-background-color);
+  --cx-input-background-color-hover          : var(--cx-input-background-color);
+  --cx-input-border-color                    : var(--cx-color-neutral-400);
+  --cx-input-border-color-disabled           : var(--cx-color-neutral-400);
+  --cx-input-border-color-focus              : var(--cx-color-primary-600);                                  /* Cortex: #6ac8ff */
+  --cx-input-border-color-hover              : var(--cx-color-primary-700);                                  /* Cortex: #81b0d4 */
+  --cx-input-color                           : var(--cx-color-neutral-900);
+  --cx-input-color-disabled                  : var(--cx-color-neutral-900);
+  --cx-input-color-focus                     : var(--cx-color-neutral-900);
+  --cx-input-color-hover                     : var(--cx-color-neutral-900);
+  --cx-input-filled-background-color         : var(--cx-color-neutral-100);
+  --cx-input-filled-background-color-disabled: var(--cx-color-neutral-100);
+  --cx-input-filled-background-color-focus   : var(--cx-color-neutral-100);
+  --cx-input-filled-background-color-hover   : var(--cx-color-neutral-100);
+  --cx-input-filled-color                    : var(--cx-color-neutral-800);
+  --cx-input-filled-color-disabled           : var(--cx-color-neutral-800);
+  --cx-input-filled-color-focus              : var(--cx-color-neutral-700);
+  --cx-input-filled-color-hover              : var(--cx-color-neutral-800);
+  --cx-input-focus-ring-color                : hsl(198.6deg 88.7% 48.4% / 40%);
+  --cx-input-help-text-color                 : var(--cx-color-neutral-600);
+  --cx-input-icon-color                      : var(--cx-color-neutral-500);
+  --cx-input-icon-color-focus                : var(--cx-color-neutral-600);
+  --cx-input-icon-color-hover                : var(--cx-color-neutral-600);
+  --cx-input-invalid-border-color            : var(--cx-color-danger);
+  --cx-input-invalid-color                   : var(--cx-color-danger-700);
+  --cx-input-invalid-shadow                  : 0 0 0 var(--cx-focus-ring-width) var(--cx-color-danger-300);
+  --cx-input-label-color                     : var(--cx-color-neutral-700);
+  --cx-input-placeholder-color               : var(--cx-color-neutral-400);
+  --cx-input-placeholder-color-disabled      : var(--cx-color-neutral-600);
+  --cx-input-required-content-color          : var(--cx-input-label-color);
+
+  /*
+   * Overlays
+   */
+
+  --cx-overlay-background-color: hsl(0deg 0% 0% / 43%);
+
+  /*
+   * Panels
+   */
+
+  --cx-panel-background-color: var(--cx-color-neutral-0);
+  --cx-panel-border-color    : var(--cx-color-neutral-200);
+
+  /*
+   * Menu
+   */
+  --cx-menu-item-background-color-hover: var(--cx-color-neutral-100);
+}

package/library/css/ol-light.css

@@ -0,0 +1,153 @@
+@import url('./ol-base.css');
+
+:root,
+.cx-theme-light {
+  color-scheme: light;
+
+  /*
+   * Theme Tokens
+   */
+
+  /* Primary */
+  --cx-color-primary-50 : #E5F1FF;
+  --cx-color-primary-100: #DBEAFE;
+  --cx-color-primary-200: #BFDBFE;
+  --cx-color-primary-300: #93C5FD;
+  --cx-color-primary-400: #60A5FA;
+  --cx-color-primary-500: #3B82F6;                      /* Primary */
+  --cx-color-primary-600: #2563EB;
+  --cx-color-primary-700: #1D4ED8;
+  --cx-color-primary-800: #1E40AF;
+  --cx-color-primary-900: #1E3A8A;
+  --cx-color-primary-950: #152149;
+  --cx-color-primary    : var(--cx-color-primary-600);
+
+  /* Success */
+  --cx-color-success-50 : #F0FDF4;
+  --cx-color-success-100: #DCFCE7;
+  --cx-color-success-200: #BBF7D0;
+  --cx-color-success-300: #86EFAC;
+  --cx-color-success-400: #4ADE80;
+  --cx-color-success-500: #22C55E;                      /* Primary */
+  --cx-color-success-600: #16A34A;
+  --cx-color-success-700: #15803D;
+  --cx-color-success-800: #166534;
+  --cx-color-success-900: #14532D;
+  --cx-color-success-950: #0C311B;
+  --cx-color-success    : var(--cx-color-success-600);
+
+  /* Warning */
+  --cx-color-warning-50 : #FFFBEB;
+  --cx-color-warning-100: #FEF3C7;
+  --cx-color-warning-200: #FDE68A;
+  --cx-color-warning-300: #FCD34D;
+  --cx-color-warning-400: #FBBF24;
+  --cx-color-warning-500: #F59E0B;                      /* Primary */
+  --cx-color-warning-600: #D97706;
+  --cx-color-warning-700: #B45309;
+  --cx-color-warning-800: #92400E;
+  --cx-color-warning-900: #78350F;
+  --cx-color-warning-950: #4A230B;
+  --cx-color-warning    : var(--cx-color-warning-600);
+
+  /* Danger */
+  --cx-color-danger-50 : #FEF2F2;
+  --cx-color-danger-100: #FEE2E2;
+  --cx-color-danger-200: #FECACA;
+  --cx-color-danger-300: #FCA5A5;
+  --cx-color-danger-400: #F87171;
+  --cx-color-danger-500: #EF4444;                     /* Primary */
+  --cx-color-danger-600: #DC2626;
+  --cx-color-danger-700: #B91C1C;
+  --cx-color-danger-800: #991B1B;
+  --cx-color-danger-900: #7F1D1D;
+  --cx-color-danger-950: #501414;
+  --cx-color-danger    : var(--cx-color-danger-600);
+
+  /* Neutral */
+  --cx-color-neutral-0   : #FFF;
+  --cx-color-neutral-50  : #F9F9F9;
+  --cx-color-neutral-100 : #F4F4F5;
+  --cx-color-neutral-200 : #E4E4E7;
+  --cx-color-neutral-300 : #D4D4D8;
+  --cx-color-neutral-400 : #A1A1AA;
+  --cx-color-neutral-500 : #71717A;
+  --cx-color-neutral-600 : #52525B;
+  --cx-color-neutral-700 : #3F3F46;                      /* Primary */
+  --cx-color-neutral-800 : #27272A;
+  --cx-color-neutral-900 : #18181B;
+  --cx-color-neutral-950 : #131316;
+  --cx-color-neutral-1000: #000;
+  --cx-color-neutral     : var(--cx-color-neutral-600);
+
+  /*
+   * Elevations
+   */
+
+  --cx-shadow-x-small: 0 1px 2px hsl(240deg 3.8% 46.1% / 6%);
+  --cx-shadow-small  : 0 1px 2px hsl(240deg 3.8% 46.1% / 12%);
+  --cx-shadow-medium : 0px 0px 7px 0px rgb(203 222 255 / 70%);
+  --cx-shadow-large  : 0px 0px 2px 0px rgb(0 0 0 / 6%), 0px 0px 3px 0px rgb(0 0 0 / 8%), 0px 5px 9px 0px rgb(0 0 0 / 6%), 0px 3px 5px 0px rgb(0 0 0 / 6%);
+  --cx-shadow-x-large: 0 4px 16px hsl(240deg 3.8% 46.1% / 12%);
+
+  /* Focus rings */
+  --cx-focus-ring-color: var(--cx-color-primary);
+  --cx-focus-ring      : var(--cx-focus-ring-style) var(--cx-focus-ring-width)
+    var(--cx-focus-ring-color);
+
+  /*
+   * Forms
+   */
+
+  /* Inputs */
+  --cx-input-background-color                : var(--cx-color-neutral-0);
+  --cx-input-background-color-disabled       : var(--cx-color-neutral-100);
+  --cx-input-background-color-focus          : var(--cx-input-background-color);
+  --cx-input-background-color-hover          : var(--cx-input-background-color);
+  --cx-input-border-color                    : var(--cx-color-neutral-300);
+  --cx-input-border-color-disabled           : var(--cx-color-neutral-300);
+  --cx-input-border-color-focus              : var(--cx-color-primary);
+  --cx-input-border-color-hover              : var(--cx-color-primary-300);
+  --cx-input-color                           : var(--cx-color-neutral-900);
+  --cx-input-color-disabled                  : var(--cx-color-neutral-900);
+  --cx-input-color-focus                     : var(--cx-color-neutral-900);
+  --cx-input-color-hover                     : var(--cx-color-neutral-900);
+  --cx-input-filled-background-color         : var(--cx-color-neutral-100);
+  --cx-input-filled-background-color-disabled: var(--cx-color-neutral-100);
+  --cx-input-filled-background-color-focus   : var(--cx-color-neutral-100);
+  --cx-input-filled-background-color-hover   : var(--cx-color-neutral-100);
+  --cx-input-filled-color                    : var(--cx-color-neutral-800);
+  --cx-input-filled-color-disabled           : var(--cx-color-neutral-800);
+  --cx-input-filled-color-focus              : var(--cx-color-neutral-700);
+  --cx-input-filled-color-hover              : var(--cx-color-neutral-800);
+  --cx-input-focus-ring-color                : hsl(198.6deg 88.7% 48.4% / 40%);
+  --cx-input-help-text-color                 : var(--cx-color-neutral-500);
+  --cx-input-icon-color                      : var(--cx-color-neutral-500);
+  --cx-input-icon-color-focus                : var(--cx-color-neutral-600);
+  --cx-input-icon-color-hover                : var(--cx-color-neutral-600);
+  --cx-input-invalid-border-color            : var(--cx-color-danger);
+  --cx-input-invalid-color                   : var(--cx-color-danger-700);
+  --cx-input-invalid-shadow                  : 0 0 0 var(--cx-focus-ring-width) var(--cx-color-danger-300);
+  --cx-input-label-color                     : var(--cx-color-neutral-700);
+  --cx-input-placeholder-color               : var(--cx-color-neutral-400);
+  --cx-input-placeholder-color-disabled      : var(--cx-color-neutral-600);
+  --cx-input-required-content-color          : var(--cx-color-danger-500);
+
+  /*
+   * Overlays
+   */
+
+  --cx-overlay-background-color: hsl(240deg 3.8% 46.1% / 33%);
+
+  /*
+   * Panels
+   */
+
+  --cx-panel-background-color: var(--cx-color-neutral-0);
+  --cx-panel-border-color    : var(--cx-color-neutral-200);
+
+  /*
+   * Menu
+   */
+  --cx-menu-item-background-color-hover: var(--cx-color-primary-50);
+}

package/library/fonts.d.ts

@@ -0,0 +1 @@
+export * from './apps/cortex/src/fonts'

package/library/molecules.d.ts

@@ -0,0 +1 @@
+export * from './packages/molecules/src/library-index'

package/library/organisms.d.ts

@@ -0,0 +1 @@
+export * from './packages/organisms/src/library-index'

package/library/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@orangelogic/design-system",
+  "type": "module",
+  "version": "2.19.0-pr77202.21",
+  "license": "UNLICENSED",
+  "types": "library/types.d.ts",
+  "scripts": {
+    "analyze": "vite build && open bundle-stats/stats.html",
+    "copy-entry-file": "node ./scripts/copy-entry-file.js",
+    "build-worker": "vite build --config ./vite.worker.config.js",
+    "build": "vite build --config vite.config.ts && bun run build-worker && node ./scripts/remove-index-html-file.js && node ./scripts/copy-entry-file.js",
+    "start": "vite",
+    "open": "npx playwright test --project=chromium --ui",
+    "playwright": "npx playwright test --project=chromium",
+    "build-library": "bun run build && vite build --config ./vite.library.config.js",
+    "publish": "./scripts/publish-if-needed.js"
+  },
+  "bin": {
+    "design-system": "library/index.js"
+  },
+  "files": [
+    "library"
+  ],
+  "exports": {
+    ".": {
+      "import": "./library/components/atoms.js",
+      "types": "./library/types.d.ts"
+    },
+    "./components/*": {
+      "import": "./library/components/*",
+      "types": "./library/components/*.d.ts"
+    },
+    "./react-types": "./library/react-web-component.js",
+    "./css/*": "./library/css/*",
+    "./assets/*": "./library/assets/*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/library/packages/atoms/src/animations/attention_seekers/bounce.d.ts

@@ -0,0 +1,16 @@
+export declare const bounce: ({
+    easing: string;
+    offset: number;
+    transform: string;
+    'transition-timing-function'?: undefined;
+} | {
+    offset: number;
+    transform: string;
+    'transition-timing-function': string;
+    easing?: undefined;
+} | {
+    offset: number;
+    transform: string;
+    easing?: undefined;
+    'transition-timing-function'?: undefined;
+})[];

package/library/packages/atoms/src/animations/attention_seekers/flash.d.ts

@@ -0,0 +1,4 @@
+export declare const flash: {
+    offset: number;
+    opacity: string;
+}[];

package/library/packages/atoms/src/animations/attention_seekers/headShake.d.ts

@@ -0,0 +1,4 @@
+export declare const headShake: {
+    offset: number;
+    transform: string;
+}[];

package/library/packages/atoms/src/animations/attention_seekers/heartBeat.d.ts

@@ -0,0 +1,4 @@
+export declare const heartBeat: {
+    offset: number;
+    transform: string;
+}[];

package/library/packages/atoms/src/animations/attention_seekers/jello.d.ts

@@ -0,0 +1,4 @@
+export declare const jello: {
+    offset: number;
+    transform: string;
+}[];

package/library/packages/atoms/src/animations/attention_seekers/pulse.d.ts

@@ -0,0 +1,4 @@
+export declare const pulse: {
+    offset: number;
+    transform: string;
+}[];

package/library/packages/atoms/src/animations/attention_seekers/rubberBand.d.ts

@@ -0,0 +1,4 @@
+export declare const rubberBand: {
+    offset: number;
+    transform: string;
+}[];

package/library/packages/atoms/src/animations/attention_seekers/shake.d.ts

@@ -0,0 +1,4 @@
+export declare const shake: {
+    offset: number;
+    transform: string;
+}[];

package/library/packages/atoms/src/animations/attention_seekers/shakeX.d.ts

@@ -0,0 +1,4 @@
+export declare const shakeX: {
+    offset: number;
+    transform: string;
+}[];

package/library/packages/atoms/src/animations/attention_seekers/shakeY.d.ts

@@ -0,0 +1,4 @@
+export declare const shakeY: {
+    offset: number;
+    transform: string;
+}[];

package/library/packages/atoms/src/animations/attention_seekers/swing.d.ts

@@ -0,0 +1,4 @@
+export declare const swing: {
+    offset: number;
+    transform: string;
+}[];

package/library/packages/atoms/src/animations/attention_seekers/tada.d.ts

@@ -0,0 +1,4 @@
+export declare const tada: {
+    offset: number;
+    transform: string;
+}[];