@orangelogic/design-system 2.78.0 → 2.79.0

package/library/components/format-time.js

@@ -1,22 +1,12 @@
 import { n as l, C as h } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as y } from "../chunks/component.styles.DMSLciL5.js";
+import { c as y } from "../chunks/component.styles.CRO4Odto.js";
 import { U as r, D as u, L as D, F as d, g as S, f as F, c as U, a as g, S as _ } from "../chunks/time.D_uFZqqe.js";
 import { c as b } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as N } from "../chunks/i18n.BUW7B9hr.js";
 import { w as m } from "../chunks/watch.BCJD77bD.js";
 import { i as L, x as f } from "../chunks/lit-element.jLBm65_O.js";
 import { r as M } from "../chunks/state.CSDxrqLd.js";
-const T = L`
-  :host {
-    display: contents;
-  }
-    
-  .format-time {
-    color: var(--cx-format-time-color, inherit);
-    font-size: var(--cx-format-time-font-size, inherit);
-    font-weight: var(--cx-format-time-font-weight, inherit);
-  }
-`;
+const T = L`:host{display:contents}.format-time{color:var(--cx-format-time-color,inherit);font-size:var(--cx-format-time-font-size,inherit);font-weight:var(--cx-format-time-font-weight,inherit)}`;
 var w = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (t, e, s, a) => {
   for (var o = a > 1 ? void 0 : a ? P(e, s) : e, p = t.length - 1, c; p >= 0; p--)
     (c = t[p]) && (o = (a ? c(e, s, o) : c(o)) || o);

package/library/components/grid-item.js

@@ -1,5 +1,5 @@
 import { n, C as m } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as u } from "../chunks/component.styles.DMSLciL5.js";
+import { c as u } from "../chunks/component.styles.CRO4Odto.js";
 import { c as d } from "../chunks/custom-element.L4WJXn1j.js";
 import { w as x } from "../chunks/watch.BCJD77bD.js";
 import { i as h, x as g } from "../chunks/lit-element.jLBm65_O.js";
@@ -28,169 +28,7 @@ const w = (t) => {
   return (r ? Object.keys(t).sort((e, a) => e.localeCompare(a)) : Object.keys(t)).forEach((e) => {
     i += `${w(e)}:${t[e]};`;
   }), i;
-}, C = h`
-  :host {
-    display: block;
-    box-sizing: border-box !important;
-    min-width: 0;
-    padding: calc(var(--cx-grid-row-spacing) / 2)
-      calc(var(--cx-grid-column-spacing) / 2);
-    width: calc(
-      100% * var(--cx-grid-item-xs) / var(--cx-grid-columns) -
-        (var(--cx-grid-columns) - var(--cx-grid-item-xs)) *
-        (var(--cx-flex-column-spacing) / var(--cx-grid-columns))
-    );
-  }
-
-  .grid-item--fill {
-    height: 100%;
-  }
-
-  :host([xs='auto']) {
-    width: auto;
-  }
-
-  :host([xs='']) {
-    flex: 1;
-    width: auto;
-  }
-
-  @media (min-width: 600px) {
-    :host([sm]:not([use-container])) {
-      width: calc(
-        100% * var(--cx-grid-item-sm) / var(--cx-grid-columns) -
-          (var(--cx-grid-columns) - var(--cx-grid-item-sm)) *
-          (var(--cx-flex-column-spacing) / var(--cx-grid-columns))
-      );
-    }
-    :host([sm='auto']:not([use-container])) {
-      width: auto;
-    }
-    :host([sm='']:not([use-container])) {
-      flex: 1;
-      width: auto;
-    }
-  }
-
-  @media (min-width: 900px) {
-    :host([md]:not([use-container])) {
-      width: calc(
-        100% * var(--cx-grid-item-md) / var(--cx-grid-columns) -
-          (var(--cx-grid-columns) - var(--cx-grid-item-md)) *
-          (var(--cx-flex-column-spacing) / var(--cx-grid-columns))
-      );
-    }
-    :host([md='auto']:not([use-container])) {
-      width: auto;
-    }
-    :host([md='']:not([use-container])) {
-      flex: 1;
-      width: auto;
-    }
-  }
-
-  @media (min-width: 1200px) {
-    :host([lg]:not([use-container])) {
-      width: calc(
-        100% * var(--cx-grid-item-lg) / var(--cx-grid-columns) -
-          (var(--cx-grid-columns) - var(--cx-grid-item-lg)) *
-          (var(--cx-flex-column-spacing) / var(--cx-grid-columns))
-      );
-    }
-    :host([lg='auto']:not([use-container])) {
-      width: auto;
-    }
-    :host([lg='']:not([use-container])) {
-      flex: 1;
-      width: auto;
-    }
-  }
-
-  @media (min-width: 1536px) {
-    :host([xl]:not([use-container])) {
-      width: calc(
-        100% * var(--cx-grid-item-xl) / var(--cx-grid-columns) -
-          (var(--cx-grid-columns) - var(--cx-grid-item-xl)) *
-          (var(--cx-flex-column-spacing) / var(--cx-grid-columns))
-      );
-    }
-    :host([xl='auto']:not([use-container])) {
-      width: auto;
-    }
-    :host([xl='']:not([use-container])) {
-      flex: 1;
-      width: auto;
-    }
-  }
-
-  @container (min-width: 600px) {
-    :host([sm][use-container]) {
-      width: calc(
-        100% * var(--cx-grid-item-sm) / var(--cx-grid-columns) -
-          (var(--cx-grid-columns) - var(--cx-grid-item-sm)) *
-          (var(--cx-flex-column-spacing) / var(--cx-grid-columns))
-      );
-    }
-    :host([sm='auto'][use-container]) {
-      width: auto;
-    }
-    :host([sm=''][use-container]) {
-      flex: 1;
-      width: auto;
-    }
-  }
-
-  @container (min-width: 900px) {
-    :host([md][use-container]) {
-      width: calc(
-        100% * var(--cx-grid-item-md) / var(--cx-grid-columns) -
-          (var(--cx-grid-columns) - var(--cx-grid-item-md)) *
-          (var(--cx-flex-column-spacing) / var(--cx-grid-columns))
-      );
-    }
-    :host([md='auto'][use-container]) {
-      width: auto;
-    }
-    :host([md=''][use-container]) {
-      flex: 1;
-      width: auto;
-    }
-  }
-
-  @container (min-width: 1200px) {
-    :host([lg][use-container]) {
-      width: calc(
-        100% * var(--cx-grid-item-lg) / var(--cx-grid-columns) -
-          (var(--cx-grid-columns) - var(--cx-grid-item-lg)) *
-          (var(--cx-flex-column-spacing) / var(--cx-grid-columns))
-      );
-    }
-    :host([lg='auto'][use-container]) {
-      width: auto;
-    }
-    :host([lg=''][use-container]) {
-      flex: 1;
-      width: auto;
-    }
-  }
-
-  @container (min-width: 1536px) {
-    :host([xl][use-container]) {
-      width: calc(
-        100% * var(--cx-grid-item-xl) / var(--cx-grid-columns) -
-          (var(--cx-grid-columns) - var(--cx-grid-item-xl)) *
-          (var(--cx-flex-column-spacing) / var(--cx-grid-columns))
-      );
-    }
-    :host([xl='auto'][use-container]) {
-      width: auto;
-    }
-    :host([xl=''][use-container]) {
-      flex: 1;
-      width: auto;
-    }
-  }
-`;
+}, C = h`:host{min-width:0;padding:calc(var(--cx-grid-row-spacing) / 2) calc(var(--cx-grid-column-spacing) / 2);width:calc(100% * var(--cx-grid-item-xs) / var(--cx-grid-columns) - (var(--cx-grid-columns) - var(--cx-grid-item-xs)) * (var(--cx-flex-column-spacing) / var(--cx-grid-columns)));display:block;box-sizing:border-box!important}.grid-item--fill{height:100%}:host([xs=auto]){width:auto}:host([xs=""]){flex:1;width:auto}@media (width>=600px){:host([sm]:not([use-container])){width:calc(100% * var(--cx-grid-item-sm) / var(--cx-grid-columns) - (var(--cx-grid-columns) - var(--cx-grid-item-sm)) * (var(--cx-flex-column-spacing) / var(--cx-grid-columns)))}:host([sm=auto]:not([use-container])){width:auto}:host([sm=""]:not([use-container])){flex:1;width:auto}}@media (width>=900px){:host([md]:not([use-container])){width:calc(100% * var(--cx-grid-item-md) / var(--cx-grid-columns) - (var(--cx-grid-columns) - var(--cx-grid-item-md)) * (var(--cx-flex-column-spacing) / var(--cx-grid-columns)))}:host([md=auto]:not([use-container])){width:auto}:host([md=""]:not([use-container])){flex:1;width:auto}}@media (width>=1200px){:host([lg]:not([use-container])){width:calc(100% * var(--cx-grid-item-lg) / var(--cx-grid-columns) - (var(--cx-grid-columns) - var(--cx-grid-item-lg)) * (var(--cx-flex-column-spacing) / var(--cx-grid-columns)))}:host([lg=auto]:not([use-container])){width:auto}:host([lg=""]:not([use-container])){flex:1;width:auto}}@media (width>=1536px){:host([xl]:not([use-container])){width:calc(100% * var(--cx-grid-item-xl) / var(--cx-grid-columns) - (var(--cx-grid-columns) - var(--cx-grid-item-xl)) * (var(--cx-flex-column-spacing) / var(--cx-grid-columns)))}:host([xl=auto]:not([use-container])){width:auto}:host([xl=""]:not([use-container])){flex:1;width:auto}}@container (width>=600px){:host([sm][use-container]){width:calc(100% * var(--cx-grid-item-sm) / var(--cx-grid-columns) - (var(--cx-grid-columns) - var(--cx-grid-item-sm)) * (var(--cx-flex-column-spacing) / var(--cx-grid-columns)))}:host([sm=auto][use-container]){width:auto}:host([sm=""][use-container]){flex:1;width:auto}}@container (width>=900px){:host([md][use-container]){width:calc(100% * var(--cx-grid-item-md) / var(--cx-grid-columns) - (var(--cx-grid-columns) - var(--cx-grid-item-md)) * (var(--cx-flex-column-spacing) / var(--cx-grid-columns)))}:host([md=auto][use-container]){width:auto}:host([md=""][use-container]){flex:1;width:auto}}@container (width>=1200px){:host([lg][use-container]){width:calc(100% * var(--cx-grid-item-lg) / var(--cx-grid-columns) - (var(--cx-grid-columns) - var(--cx-grid-item-lg)) * (var(--cx-flex-column-spacing) / var(--cx-grid-columns)))}:host([lg=auto][use-container]){width:auto}:host([lg=""][use-container]){flex:1;width:auto}}@container (width>=1536px){:host([xl][use-container]){width:calc(100% * var(--cx-grid-item-xl) / var(--cx-grid-columns) - (var(--cx-grid-columns) - var(--cx-grid-item-xl)) * (var(--cx-flex-column-spacing) / var(--cx-grid-columns)))}:host([xl=auto][use-container]){width:auto}:host([xl=""][use-container]){flex:1;width:auto}}`;
 var _ = Object.defineProperty, O = Object.getOwnPropertyDescriptor, c = (t, r, i, s) => {
   for (var e = s > 1 ? void 0 : s ? O(r, i) : r, a = t.length - 1, l; a >= 0; a--)
     (l = t[a]) && (e = (s ? l(r, i, e) : l(e)) || e);
@@ -205,15 +43,10 @@ let o = class extends m {
     t["--cx-grid-item-xs"] = this.xs, t["--cx-grid-item-sm"] = this.sm || this.xs, t["--cx-grid-item-md"] = this.md || this.sm || this.xs, t["--cx-grid-item-lg"] = this.lg || this.md || this.sm || this.xs, t["--cx-grid-item-xl"] = this.xl || this.lg || this.md || this.sm || this.xs, this.setAttribute("style", b(t));
   }
   render() {
-    return g`<div
-      class=${p({
+    return g`<div class=${p({
       "grid-item": !0,
       "grid-item--fill": this.fill
-    })}
-      part="base"
-    >
-      <slot part="content"></slot>
-    </div>`;
+    })} part="base"><slot part="content"></slot></div>`;
   }
 };
 o.styles = [u, C];

package/library/components/grid.js

@@ -1,41 +1,11 @@
 import { n as i, C as u } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as g } from "../chunks/component.styles.DMSLciL5.js";
+import { c as g } from "../chunks/component.styles.CRO4Odto.js";
 import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
 import { i as x, x as f } from "../chunks/lit-element.jLBm65_O.js";
 import { e as h } from "../chunks/query.BBf1UFkC.js";
 import { e as w } from "../chunks/class-map.BiVq-cVR.js";
 import { o as d } from "../chunks/style-map.llVFPd__.js";
-const S = x`
-  :host {
-    display: block;
-    box-sizing: border-box !important;
-  }
-
-  .grid {
-    display: flex;
-    flex-direction: row;
-  }
-
-  .grid--no-wrap {
-    flex-wrap: nowrap;
-  }
-
-  .grid--wrap {
-    flex-wrap: wrap;
-  }
-
-  .grid--wrap-reverse {
-    flex-wrap: wrap-reverse;
-  }
-
-  .grid--flex-gap {
-    gap: var(--cx-flex-row-spacing) var(--cx-flex-column-spacing);
-  }
-
-  .grid--container {
-    container-type: inline-size;
-  }
-`;
+const S = x`:host{display:block;box-sizing:border-box!important}.grid{flex-direction:row;display:flex}.grid--no-wrap{flex-wrap:nowrap}.grid--wrap{flex-wrap:wrap}.grid--wrap-reverse{flex-wrap:wrap-reverse}.grid--flex-gap{gap:var(--cx-flex-row-spacing) var(--cx-flex-column-spacing)}.grid--container{container-type:inline-size}`;
 var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (e, t, n, a) => {
   for (var s = a > 1 ? void 0 : a ? v(t, n) : t, p = e.length - 1, l; p >= 0; p--)
     (l = e[p]) && (s = (a ? l(t, n, s) : l(s)) || s);
@@ -65,26 +35,20 @@ let r = class extends u {
   }
   render() {
     const e = this.columnSpacingValue, t = this.rowSpacingValue;
-    return f`<div
-      class=${w({
+    return f`<div class=${w({
       grid: !0,
       "grid--container": this.useContainer,
       "grid--flex-gap": this.useFlexGap,
       "grid--no-wrap": this.wrap === "nowrap",
       "grid--wrap": this.wrap === "wrap",
       "grid--wrap-reverse": this.wrap === "wrap-reverse"
-    })}
-      style=${d({
+    })} style=${d({
       "--cx-flex-column-spacing": this.useFlexGap ? e : "0px",
       "--cx-flex-row-spacing": this.useFlexGap ? t : "0px",
       "--cx-grid-column-spacing": this.useFlexGap ? "0px" : e,
       "--cx-grid-columns": this.columns,
       "--cx-grid-row-spacing": this.useFlexGap ? "0px" : t
-    })}
-      part="base"
-    >
-      <slot part="content" @slotchange=${this.handleSlotChange}></slot>
-    </div>`;
+    })} part="base"><slot part="content" @slotchange=${this.handleSlotChange}></slot></div>`;
   }
 };
 r.styles = [g, S];

package/library/components/header.js

@@ -1,7 +1,7 @@
 import "./copy-button.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.DMSLciL5.js";
-import { C as x } from "../chunks/header.m7v3M94Z.js";
+import "../chunks/component.styles.CRO4Odto.js";
+import { C as x } from "../chunks/header.D68fIfe2.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.BUW7B9hr.js";
 import "../chunks/watch.BCJD77bD.js";

package/library/components/icon-button.js

@@ -1,6 +1,6 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.DMSLciL5.js";
-import { C } from "../chunks/icon-button.C3eqeQl9.js";
+import "../chunks/component.styles.CRO4Odto.js";
+import { C } from "../chunks/icon-button.BuhCp--_.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.BUW7B9hr.js";
 import "../chunks/state.CSDxrqLd.js";