@orangelogic/design-system 2.19.0-ci.5

package/library/chunks/capitalize.CNStXZBq.js

@@ -0,0 +1,41 @@
+import { t as i } from "./toString.CL_lYXbK.js";
+function R(r, e, u) {
+  var o = -1, f = r.length;
+  e < 0 && (e = -e > f ? 0 : f + e), u = u > f ? f : u, u < 0 && (u += f), f = e > u ? 0 : u - e >>> 0, e >>>= 0;
+  for (var s = Array(f); ++o < f; )
+    s[o] = r[o + e];
+  return s;
+}
+function v(r, e, u) {
+  var o = r.length;
+  return u = u === void 0 ? o : u, !e && u >= o ? r : R(r, e, u);
+}
+var p = "\\ud800-\\udfff", C = "\\u0300-\\u036f", h = "\\ufe20-\\ufe2f", A = "\\u20d0-\\u20ff", S = C + h + A, $ = "\\ufe0e\\ufe0f", M = "\\u200d", y = RegExp("[" + M + p + S + $ + "]");
+function t(r) {
+  return y.test(r);
+}
+function k(r) {
+  return r.split("");
+}
+var c = "\\ud800-\\udfff", x = "\\u0300-\\u036f", U = "\\ufe20-\\ufe2f", j = "\\u20d0-\\u20ff", F = x + U + j, H = "\\ufe0e\\ufe0f", J = "[" + c + "]", a = "[" + F + "]", n = "\\ud83c[\\udffb-\\udfff]", O = "(?:" + a + "|" + n + ")", l = "[^" + c + "]", d = "(?:\\ud83c[\\udde6-\\uddff]){2}", b = "[\\ud800-\\udbff][\\udc00-\\udfff]", T = "\\u200d", g = O + "?", m = "[" + H + "]?", V = "(?:" + T + "(?:" + [l, d, b].join("|") + ")" + m + g + ")*", w = m + g + V, z = "(?:" + [l + a + "?", a, d, b, J].join("|") + ")", E = RegExp(n + "(?=" + n + ")|" + z + w, "g");
+function W(r) {
+  return r.match(E) || [];
+}
+function Z(r) {
+  return t(r) ? W(r) : k(r);
+}
+function q(r) {
+  return function(e) {
+    e = i(e);
+    var u = t(e) ? Z(e) : void 0, o = u ? u[0] : e.charAt(0), f = u ? v(u, 1).join("") : e.slice(1);
+    return o[r]() + f;
+  };
+}
+var L = q("toUpperCase");
+function P(r) {
+  return L(i(r).toLowerCase());
+}
+export {
+  R as b,
+  P as c
+};

package/library/chunks/choose.BTbF6BAn.js

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e = (t, o, n) => {
+  for (const r of o) if (r[0] === t) return (0, r[1])();
+  return n?.();
+};
+export {
+  e as r
+};

package/library/chunks/class-map.DqNfBvJI.js

@@ -0,0 +1,32 @@
+import { T as i } from "./custom-element.fmLrnDZr.js";
+import { e as o, i as a, t as h } from "./directive.oAbCiebi.js";
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const l = o(class extends a {
+  constructor(s) {
+    if (super(s), s.type !== h.ATTRIBUTE || s.name !== "class" || s.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
+  }
+  render(s) {
+    return " " + Object.keys(s).filter((e) => s[e]).join(" ") + " ";
+  }
+  update(s, [e]) {
+    if (this.st === void 0) {
+      this.st = /* @__PURE__ */ new Set(), s.strings !== void 0 && (this.nt = new Set(s.strings.join(" ").split(/\s/).filter((t) => t !== "")));
+      for (const t in e) e[t] && !this.nt?.has(t) && this.st.add(t);
+      return this.render(e);
+    }
+    const r = s.element.classList;
+    for (const t of this.st) t in e || (r.remove(t), this.st.delete(t));
+    for (const t in e) {
+      const n = !!e[t];
+      n === this.st.has(t) || this.nt?.has(t) || (n ? (r.add(t), this.st.add(t)) : (r.remove(t), this.st.delete(t)));
+    }
+    return i;
+  }
+});
+export {
+  l as e
+};

package/library/chunks/color-swatch-group.fL5ADbZF.js

@@ -0,0 +1,568 @@
+import z from "../components/space.js";
+import { C as $ } from "./table.BarE1-gL.js";
+import { C as A } from "./typography.trna8y2b.js";
+import { x as h, B as k, i as F, n as p, C as R, c as S } from "./custom-element.fmLrnDZr.js";
+import { C as x, a as m } from "./color-swatch.JL7CbNRm.js";
+import { c as W } from "./component.styles.DtouHn2g.js";
+import { c as w } from "./capitalize.CNStXZBq.js";
+import { d as D } from "./debounce.DZNkg8Q5.js";
+import { L as E } from "./i18n.C6c6_pqI.js";
+import { w as y } from "./watch.BCJD77bD.js";
+import { r as d } from "./state.Dt9F_SuS.js";
+import { e as M } from "./query.BBf1UFkC.js";
+import { r as N } from "./query-all.i3PyvTUQ.js";
+import { e as b } from "./class-map.DqNfBvJI.js";
+import { i as C } from "./guard.L-Ctqt3S.js";
+import { o as O } from "./if-defined.CKupVaWs.js";
+import { c as H } from "./repeat.B1pVpmRx.js";
+import { o as f } from "./style-map.lEJHEwk3.js";
+import { n as G } from "./when.Dr1es41R.js";
+var s = /* @__PURE__ */ ((e) => (e.Circles = "circles", e.Grid = "grid", e.Table = "table", e))(s || {}), l = /* @__PURE__ */ ((e) => (e.Desktop = "desktop", e.Mobile = "mobile", e.Tablet = "tablet", e))(l || {});
+const B = {
+  canvasWidth: "",
+  height: "",
+  id: "desktop",
+  maxWidth: "",
+  name: w(
+    "desktop"
+    /* Desktop */
+  )
+}, I = {
+  canvasWidth: "770px",
+  height: "",
+  id: "tablet",
+  maxWidth: "1280px",
+  name: w(
+    "tablet"
+    /* Tablet */
+  )
+}, K = {
+  canvasWidth: "320px",
+  height: "",
+  id: "mobile",
+  maxWidth: "480px",
+  name: w(
+    "mobile"
+    /* Mobile */
+  )
+}, xe = [B, I, K];
+var V = /* @__PURE__ */ ((e) => (e.All = "ALL", e.CanDelete = "CanDelete", e.CanDownload = "CanDownload", e.CanFind = "CanFind", e.CanManageRights = "CanManageRights", e.CanMove = "CanMove", e.CanRead = "CanRead", e.CanReadAll = "CanReadAll", e.CanReadAndWrite = "CanReadAndWrite", e.CanReadLarge = "CanReadLarge", e.CanReadMedium = "CanReadMedium", e.CanReadOriginal = "CanReadOriginal", e.CanShare = "CanShare", e.CanUpload = "CanUpload", e.CanWrite = "CanWrite", e.None = "NONE", e))(V || {}), L = /* @__PURE__ */ ((e) => (e.All = "all", e.Audio = "audio", e.Image = "image", e.Other = "other", e.Video = "video", e))(L || {}), T = /* @__PURE__ */ ((e) => (e.Content = "content", e.Template = "template", e))(T || {}), U = /* @__PURE__ */ ((e) => (e.Administrator = "Administrator", e.Designer = "Designer", e.Editor = "Editor", e))(U || {}), j = /* @__PURE__ */ ((e) => (e.Accordion = "BlockAccordion", e.Analytics = "BlockAnalytics", e.Button = "BlockButton", e.Carousel = "BlockCarousel", e.ColorSwatches = "BlockColorSwatches", e.Column = "BlockCell", e.ColumnGroup = "BlockColumns", e.Divider = "BlockDivider", e.FontKit = "BlockFontKit", e.Gallery = "BlockGallery", e.Header = "BlockHeader", e.Image = "BlockImage", e.RichText = "BlockRichText", e.SearchBox = "BlockSearchBox", e.TabGroup = "BlockTabs", e.Text = "BlockText", e.Video = "BlockVideo", e))(j || {}), Y = /* @__PURE__ */ ((e) => (e.Carousel = "carousel", e.Gallery = "gallery", e))(Y || {});
+function P(e, t = [350, 696, 1024]) {
+  const r = getComputedStyle(e), o = [
+    Number.parseFloat(r.getPropertyValue("--breakpoint-mobile").trim()),
+    Number.parseFloat(r.getPropertyValue("--breakpoint-tablet").trim()),
+    1 / 0
+  ];
+  return Number.isNaN(o[0]) ? o[0] = t[0] : o[0]++, Number.isNaN(o[1]) ? o[1] = t[1] : o[1]++, o;
+}
+function X(e) {
+  const t = window.innerWidth;
+  return t > e[1] ? l.Desktop : t > e[0] && t <= e[1] ? l.Tablet : l.Mobile;
+}
+const v = 165, q = ["HEX", "RGB", "CMYK", "PMS"], J = {
+  resizable: !1
+}, _ = [
+  {
+    field: "hex",
+    formatter: (e) => {
+      const t = document.createElement("div");
+      t.style.display = "flex", t.style.alignItems = "center", t.style.justifyContent = "center", t.style.width = "100%", t.style.height = "100%", t.style.userSelect = "none";
+      const r = document.createElement("div");
+      return r.style.backgroundColor = e.getValue(), r.style.width = "64px", r.style.height = "32px", r.style.borderRadius = "var(--cx-border-radius-large)", r.style.padding = "0 var(--cx-spacing-medium)", t.appendChild(r), t;
+    },
+    headerHozAlign: "center",
+    headerSort: !1,
+    hozAlign: "center",
+    title: "Name",
+    width: 80
+  },
+  {
+    field: "name",
+    headerHozAlign: "center",
+    headerSort: !1,
+    hozAlign: "left",
+    widthGrow: 3
+  },
+  {
+    field: "hex",
+    headerHozAlign: "center",
+    headerSort: !1,
+    hozAlign: "center",
+    minWidth: 130,
+    title: "Hex"
+  },
+  {
+    field: "rgb",
+    headerHozAlign: "center",
+    headerSort: !1,
+    hozAlign: "center",
+    minWidth: 130,
+    title: "RGB"
+  },
+  {
+    field: "cmyk",
+    headerHozAlign: "center",
+    headerSort: !1,
+    hozAlign: "center",
+    minWidth: 150,
+    title: "CMYK"
+  },
+  {
+    field: "pms",
+    headerHozAlign: "center",
+    headerSort: !1,
+    hozAlign: "center",
+    responsive: 0,
+    title: "PMS",
+    widthGrow: 2
+  }
+];
+function u(e, t, r) {
+  const o = t.getValue() ?? "";
+  if (!o)
+    return null;
+  const n = h`
+    <cx-copy-button
+      copy-label=${e.term("clickToCopy")}
+      focus-copy-label=${e.term("pressEnterOrCtrlCToCopy")}
+      hoist
+      label=${`${r}, ${t.getField()} ${e.term("code")} ${o}. ${e.term("clickOrPressCtrlCToCopy")}`}
+      no-icon
+      tooltip-distance="0"
+      value=${o}
+      style=${f({
+    "--button-background-color": "transparent",
+    "--button-font-size": "var(--cx-font-size-large)",
+    "--button-padding": "0",
+    "max-width": "100%"
+  })}
+    >
+      <span
+        style=${f({
+    display: "inline-block",
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    verticalAlign: "middle",
+    whiteSpace: "nowrap"
+  })}
+      >
+        ${o}
+      </span>
+    </cx-copy-button>
+  `, c = document.createDocumentFragment();
+  return k(n, c), c.firstElementChild;
+}
+const Q = (e, t) => [
+  ..._.slice(0, 2),
+  {
+    field: "hex",
+    formatter: (r) => u(e, r, t),
+    headerHozAlign: "center",
+    headerSort: !1,
+    hozAlign: "center",
+    minWidth: 130,
+    title: "Hex"
+  },
+  {
+    field: "rgb",
+    formatter: (r) => u(e, r, t),
+    headerHozAlign: "center",
+    headerSort: !1,
+    hozAlign: "center",
+    minWidth: 130,
+    title: "RGB"
+  },
+  {
+    field: "cmyk",
+    formatter: (r) => u(e, r, t),
+    headerHozAlign: "center",
+    headerSort: !1,
+    hozAlign: "center",
+    minWidth: 150,
+    title: "CMYK"
+  },
+  {
+    field: "pms",
+    formatter: (r) => u(e, r, t),
+    headerHozAlign: "center",
+    headerSort: !1,
+    hozAlign: "center",
+    title: "PMS",
+    widthGrow: 2
+  }
+], Z = F`
+  :host {
+    --grid-gap: var(--cx-spacing-medium);
+    --padding: 0;
+
+    display: block;
+    padding: var(--cx-focus-ring-width);
+    width: 100%;
+    min-width: 0;
+    overflow: auto;
+  }
+
+  .color-swatch-group__swatches {
+    padding: var(--padding, 0);
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+  }
+
+  .color-swatch-group__table-container {
+    max-width: 100%;
+  }
+
+  .color-swatch-group__table-container:focus-visible {
+    outline: var(--cx-focus-ring);
+    outline-offset: var(--cx-focus-ring-offset);
+  }
+
+  .color-swatch-group__swatches--circles--horizontal
+    > cx-color-swatch:not(:first-child) {
+    margin-left: var(--swatch-group-horizontal-gap, -100px);
+  }
+
+  .color-swatch-group__swatches--circles--vertical
+    > cx-color-swatch:not(:first-child) {
+    margin-top: var(--swatch-group-vertical-gap, -50px);
+  }
+
+  .color-swatch-group__swatches--circles--horizontal__item {
+    /** No padding for positive gap value - which give no overlapping */
+    --swatch-content-padding: 0
+      min(calc(var(--swatch-group-horizontal-gap, -100px) * -0.5), 0) 0 0;
+  }
+
+  .color-swatch-group__swatches--circles--vertical__item {
+    /** No padding for positive gap value - which give no overlapping */
+    --swatch-content-padding: 0 0
+      min(calc(var(--swatch-group-vertical-gap, -50px) * -0.5), 0) 0;
+  }
+
+  .color-swatch-group__swatches--circles--vertical__item--mobile {
+    --swatch-size: 100%;
+  }
+
+  .color-swatch-group__swatches--grid {
+    display: grid;
+    gap: var(--grid-gap, var(--cx-spacing-medium));
+  }
+
+  .color-swatch-group__table {
+    --body-background-color: transparent;
+    --row-background-color: transparent;
+    --row-even-background-color: transparent;
+    --row-hover-background-color: var(--cx-color-neutral-50);
+    --row-even-hover-background-color: var(--cx-color-neutral-50);
+    --header-background-color: transparent;
+    --group-row-background-color: transparent;
+    --cell-border-color: transparent;
+
+    --header-font-size: var(--cx-font-size-large);
+    --header-font-weight: var(--cx-font-weight-semibold);
+    --header-border-right: none;
+
+    --cell-font-size: var(--cx-font-size-large);
+    --cell-font-weight: var(--cx-font-weight-regular);
+    --cell-line-height: 40px;
+    --cell-hover-background-color: transparent;
+
+    --placeholder-font-size: var(--cx-font-size-medium-large);
+
+    --min-height: none;
+    --cell-horizontal-padding: var(--cx-spacing-2x-small);
+    --header-horizontal-padding: var(--cx-spacing-2x-small);
+    --header-border-bottom: 1px solid var(--cx-color-neutral-200);
+    --hover-menu-background-color: var(--row-hover-background-color);
+    --outer-border-color: transparent;
+  }
+
+  .color-swatch-group__table::part(table) {
+    background-color: transparent;
+  }
+`;
+var ee = Object.defineProperty, te = Object.getOwnPropertyDescriptor, i = (e, t, r, o) => {
+  for (var n = o > 1 ? void 0 : o ? te(t, r) : t, c = e.length - 1, g; c >= 0; c--)
+    (g = e[c]) && (n = (o ? g(t, r, n) : g(n)) || n);
+  return o && n && ee(t, r, n), n;
+};
+let a = class extends R {
+  constructor() {
+    super(), this.localize = new E(this), this.variant = s.Table, this.data = [], this.maxCol = 4, this.canCopy = !1, this.showCodes = ["HEX", "RGB", "CMYK", "PMS"], this.breakpoints = [350, 696, 1024], this.deviceType = l.Desktop, this.currentCol = 0, this.isFocused = !1, this.canFocusContainer = !0, this.isContainerFocused = !1, this.handleWindowResize = this.handleWindowResize.bind(this);
+  }
+  runFirstUpdated() {
+    this.setAttribute("role", "region"), this.setAttribute("aria-label", this.localize.term("colorSwatches")), this.setAttribute(
+      "aria-roledescription",
+      this.localize.term("colorSwatches")
+    ), this.breakpoints = P(this, this.breakpoints), window.addEventListener("resize", this.handleWindowResize), this.handleResize();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("resize", this.handleWindowResize);
+  }
+  handleWindowResize() {
+    this.handleResize();
+  }
+  handleResize() {
+    const e = window.innerWidth;
+    switch (this.variant) {
+      case s.Grid: {
+        const t = Number.parseFloat(
+          getComputedStyle(this.containerEl).getPropertyValue("--grid-gap")
+        );
+        this.currentCol = Math.floor(
+          (e + t) / (v + t)
+        );
+        break;
+      }
+      case s.Circles: {
+        this.deviceType = X(this.breakpoints);
+        break;
+      }
+    }
+  }
+  handleKeyDown(e) {
+    !(e.target instanceof x) && !e.target?.closest(
+      "[data-table-container]"
+    ) || (e.key === "Enter" || e.key === " ") && (this.isFocused = !0);
+  }
+  handleFocusIn() {
+    this.isContainerFocused = !0;
+  }
+  handleFocusOut(e) {
+    this.isContainerFocused = !1, requestAnimationFrame(() => {
+      (e.target === this || !this.shadowRoot?.activeElement) && (this.isFocused = !1);
+    });
+  }
+  /**
+   * Filter out the columns that are not in the showCodes
+   */
+  getTableColumns(e) {
+    const t = this.canCopy ? Q(this.localize, e) : _;
+    return [
+      ...t.slice(0, 2),
+      ...t.slice(2).filter(
+        (r) => this.showCodes.includes(r.field.toUpperCase())
+      )
+    ];
+  }
+  /**
+   * Categorize the color swatches by palette
+   */
+  categorizeByPalette() {
+    return Object.values(
+      this.data.reduce((e, t) => {
+        const r = t.palette?.trim() ? t.palette : "No Palette";
+        return e[r] || (e[r] = { colors: [], palette: r }), e[r].colors.push(t), e;
+      }, {})
+    );
+  }
+  handleIsFocusedChange() {
+    if (this.isFocused)
+      for (const e of this.tableEls)
+        e.removeAttribute("tabindex");
+    else
+      for (const e of this.tableEls)
+        e.setAttribute("tabindex", "-1");
+    this.isContainerFocused || (this.canFocusContainer = !this.isFocused);
+  }
+  /**
+   * Get current direction of the color swatch group
+   */
+  get currentDirection() {
+    return this.variant === s.Circles && this.deviceType !== l.Desktop ? "vertical" : "horizontal";
+  }
+  /**
+   * Get the variant of the color swatch
+   */
+  get swatchVariant() {
+    switch (this.variant) {
+      case s.Circles:
+        return this.deviceType === l.Tablet ? m.Oval : m.Circle;
+      case s.Grid:
+        return m.GridItem;
+      default:
+        return;
+    }
+  }
+  render() {
+    const e = this.currentDirection;
+    return h`
+      ${G(
+      this.variant === s.Table,
+      () => h`
+          <cx-space
+            class="color-swatch-group__swatches"
+            direction="vertical"
+            spacing="2x-small"
+          >
+            ${C(
+        [this.data, this.canCopy],
+        () => this.categorizeByPalette().map(
+          (t) => h`
+                  <div
+                    tabindex=${O(
+            this.canFocusContainer ? "0" : void 0
+          )}
+                    data-table-container
+                    class="color-swatch-group__table-container"
+                    @focusin=${this.handleFocusIn}
+                    @focusout=${this.handleFocusOut}
+                    @keydown=${this.handleKeyDown}
+                  >
+                    <cx-typography variant="h3">
+                      ${this.localize.term("shadesPalette", t.palette)}
+                    </cx-typography>
+                    <cx-table
+                      part="table"
+                      tabindex=${this.isFocused ? void 0 : "-1"}
+                      no-selectable
+                      layout="fitColumns"
+                      .columns=${C(
+            [this.showCodes, this.canCopy, this.localize],
+            () => this.getTableColumns(t.palette)
+          )}
+                      .columnDefaults=${J}
+                      .rowHeight=${48}
+                      .data=${t.colors ?? []}
+                      class="color-swatch-group__table"
+                    ></cx-table>
+                  </div>
+                `
+        )
+      )}
+          </cx-space>
+        `,
+      () => h`
+          <cx-space
+            part="color-swatch"
+            role="list"
+            aria-label=${this.localize.term("listOfColors")}
+            aria-roledescription=${this.localize.term("listOfColors")}
+            direction=${e}
+            justify-content="flex-start"
+            wrap=${this.variant === "circles" ? "nowrap" : "wrap"}
+            class=${b({
+        "color-swatch-group__swatches": !0,
+        "color-swatch-group__swatches--grid": this.variant === s.Grid,
+        [`color-swatch-group__swatches--circles--${e}`]: this.variant === s.Circles
+      })}
+            style=${f({
+        gridTemplateColumns: this.currentCol >= this.maxCol ? `repeat(${this.maxCol}, 1fr)` : `repeat(auto-fit, minmax(${v}px, 1fr))`
+      })}
+          >
+            ${H(
+        this.data,
+        (t) => t.name,
+        (t, r) => h`<cx-color-swatch
+                  part="color-swatch-item"
+                  role="listitem"
+                  aria-label=${this.localize.term(
+          "colorOfTotal",
+          r + 1,
+          this.data.length
+        )}
+                  hex=${t.hex}
+                  rgb=${t.rgb}
+                  cmyk=${t.cmyk}
+                  pms=${t.pms}
+                  name=${t.name}
+                  variant=${this.swatchVariant}
+                  ?can-copy=${this.canCopy}
+                  ?can-focus-code-only=${this.isFocused}
+                  .showCodes=${this.showCodes}
+                  no-auto-convert
+                  class=${b({
+          [`color-swatch-group__swatches--circles--${e}__item`]: this.variant === s.Circles,
+          "color-swatch-group__swatches--circles--vertical__item--mobile": this.variant === s.Circles && this.deviceType === l.Mobile
+        })}
+                  @keydown=${this.handleKeyDown}
+                  @focusout=${this.handleFocusOut}
+                ></cx-color-swatch>`
+      )}
+          </cx-space>
+        `
+    )}
+    `;
+  }
+};
+a.styles = [W, Z];
+a.dependencies = {
+  "cx-color-swatch": x,
+  "cx-space": z,
+  "cx-table": $,
+  "cx-typography": A
+};
+i([
+  M(".color-swatch-group__swatches")
+], a.prototype, "containerEl", 2);
+i([
+  N("cx-table")
+], a.prototype, "tableEls", 2);
+i([
+  p({ reflect: !0, type: String })
+], a.prototype, "variant", 2);
+i([
+  p({ reflect: !0, type: Array })
+], a.prototype, "data", 2);
+i([
+  p({ attribute: "max-col", reflect: !0, type: Number })
+], a.prototype, "maxCol", 2);
+i([
+  p({ attribute: "can-copy", reflect: !0, type: Boolean })
+], a.prototype, "canCopy", 2);
+i([
+  p({
+    attribute: "show-codes",
+    converter: {
+      fromAttribute: (e) => (e?.split(" ") ?? []).filter((r) => q.includes(r)),
+      toAttribute: (e) => e.join(" ")
+    },
+    reflect: !0
+  })
+], a.prototype, "showCodes", 2);
+i([
+  d()
+], a.prototype, "breakpoints", 2);
+i([
+  d()
+], a.prototype, "deviceType", 2);
+i([
+  d()
+], a.prototype, "currentCol", 2);
+i([
+  d()
+], a.prototype, "isFocused", 2);
+i([
+  d()
+], a.prototype, "canFocusContainer", 2);
+i([
+  d()
+], a.prototype, "isContainerFocused", 2);
+i([
+  D(100)
+], a.prototype, "handleWindowResize", 1);
+i([
+  y("variant", { waitUntilFirstUpdate: !0 })
+], a.prototype, "handleResize", 1);
+i([
+  y("isFocused", { waitUntilFirstUpdate: !0 })
+], a.prototype, "handleIsFocusedChange", 1);
+a = i([
+  S("cx-color-swatch-group")
+], a);
+export {
+  L as A,
+  j as B,
+  a as C,
+  l as D,
+  T as E,
+  V as P,
+  U as T,
+  X as a,
+  Y as b,
+  s as c,
+  xe as d,
+  P as g
+};