@puzzle-ui/ui 0.4.0 → 0.5.0

package/dist/components/forms/token-input/token-input.css

@@ -0,0 +1,145 @@
+.puzzle-token-input {
+  align-items: flex-start;
+  gap: var(--puzzle-space-2, .5rem);
+  flex-direction: column;
+  width: fit-content;
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+}
+
+.puzzle-token-input__label {
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+}
+
+.puzzle-token-input__slots {
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  direction: ltr;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  display: flex;
+}
+
+.puzzle-token-input__slot {
+  box-sizing: border-box;
+  border: var(--puzzle-border-width, 1px) solid var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-md, .5rem);
+  background: var(--puzzle-color-surface);
+  width: 2.5rem;
+  min-width: 0;
+  height: 2.75rem;
+  color: var(--puzzle-color-text);
+  font: inherit;
+  font-size: 1.125rem;
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  caret-color: var(--puzzle-color-ring);
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: border-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        box-shadow var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        background-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease);
+  outline: none;
+  flex: none;
+  padding: 0;
+  line-height: 1;
+  display: block;
+}
+
+.puzzle-token-input__slot:hover:not(:disabled) {
+  border-color: var(--puzzle-color-text-muted);
+}
+
+.puzzle-token-input__slot:focus {
+  border-color: var(--puzzle-color-ring);
+}
+
+.puzzle-token-input__slot:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--puzzle-color-ring), transparent 82%);
+}
+
+.puzzle-token-input[data-invalid="true"] .puzzle-token-input__slot {
+  border-color: var(--puzzle-color-danger);
+}
+
+.puzzle-token-input[data-invalid="true"] .puzzle-token-input__slot:focus-visible {
+  outline-color: var(--puzzle-color-danger);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--puzzle-color-danger), transparent 82%);
+}
+
+.puzzle-token-input[data-disabled="true"] {
+  cursor: not-allowed;
+}
+
+.puzzle-token-input[data-disabled="true"] .puzzle-token-input__slot {
+  opacity: .6;
+  cursor: not-allowed;
+  background: var(--puzzle-color-surface-sunken);
+}
+
+.puzzle-token-input[data-readonly="true"] .puzzle-token-input__slot {
+  cursor: default;
+}
+
+.puzzle-token-input[data-size="sm"] .puzzle-token-input__slot {
+  width: 2rem;
+  height: 2.25rem;
+  font-size: var(--puzzle-font-size-sm, .875rem);
+}
+
+.puzzle-token-input[data-size="md"] .puzzle-token-input__slot {
+  width: 2.5rem;
+  height: 2.75rem;
+}
+
+.puzzle-token-input[data-size="lg"] .puzzle-token-input__slot {
+  width: 3rem;
+  height: 3.25rem;
+  font-size: 1.375rem;
+}
+
+@media (width <= 360px) {
+  .puzzle-token-input__slots {
+    gap: var(--puzzle-space-1, .25rem);
+  }
+
+  .puzzle-token-input[data-size="md"] .puzzle-token-input__slot {
+    width: 2.25rem;
+  }
+}
+
+@media (forced-colors: active) {
+  .puzzle-token-input__slot {
+    color: fieldtext;
+    forced-color-adjust: auto;
+    background: field;
+    border-color: fieldtext;
+  }
+
+  .puzzle-token-input__slot:focus-visible {
+    outline-offset: 2px;
+    outline: 2px solid highlight;
+  }
+
+  .puzzle-token-input__slot:disabled {
+    color: graytext;
+    border-color: graytext;
+  }
+
+  .puzzle-token-input[data-invalid="true"] .puzzle-token-input__slot {
+    border-color: mark;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-token-input__slot {
+    transition: none;
+  }
+}

package/dist/components/forms/token-input/token-input.types.d.cts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, ReactNode, Ref } from "react";
+type TokenInputMode = "numeric" | "alphanumeric";
+type TokenInputSize = "sm" | "md" | "lg";
+type TokenInputProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "id" | "onChange" | "onFocus" | "onBlur" | "onKeyDown"> & {
+  /** Number of characters in the token. Defaults to 6. */
+  length?: number;
+  /** Controlled token value. */
+  value?: string;
+  /** Initial value for uncontrolled usage. */
+  defaultValue?: string;
+  /** Called whenever the token value changes. */
+  onValueChange?: (value: string) => void;
+  /** Called when the token transitions from incomplete to complete. */
+  onComplete?: (value: string) => void;
+  /** Allowed characters. Defaults to numeric. */
+  mode?: TokenInputMode;
+  /** Masks the entered characters. */
+  mask?: boolean;
+  /** Disables all inputs. */
+  disabled?: boolean;
+  /** Makes all inputs read-only. */
+  readOnly?: boolean;
+  /** Marks every character input as required. */
+  required?: boolean;
+  /** Visual size of the individual character slots. */
+  size?: TokenInputSize;
+  /** Visible label associated with the first input. */
+  label?: ReactNode;
+  /** ID applied to the first native input. */
+  id?: string;
+  /** Name used for native form submission. */
+  name?: string;
+  /** Associates the hidden form input with a form. */
+  form?: string;
+  /** Input mode for the native character inputs. */
+  inputMode?: InputHTMLAttributes<HTMLInputElement>["inputMode"];
+  /** Autocomplete mode for the first character input. */
+  autoComplete?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
+  /** Ref forwarded to the first native input. */
+  ref?: Ref<HTMLInputElement>;
+  /** Called when an individual character input receives focus. */
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  /** Called when an individual character input loses focus. */
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  /** Called when an individual character input receives a key event. */
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+};
+export type { TokenInputMode, TokenInputProps, TokenInputSize };

package/dist/components/forms/token-input/token-input.types.d.ts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, ReactNode, Ref } from "react";
+type TokenInputMode = "numeric" | "alphanumeric";
+type TokenInputSize = "sm" | "md" | "lg";
+type TokenInputProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "id" | "onChange" | "onFocus" | "onBlur" | "onKeyDown"> & {
+  /** Number of characters in the token. Defaults to 6. */
+  length?: number;
+  /** Controlled token value. */
+  value?: string;
+  /** Initial value for uncontrolled usage. */
+  defaultValue?: string;
+  /** Called whenever the token value changes. */
+  onValueChange?: (value: string) => void;
+  /** Called when the token transitions from incomplete to complete. */
+  onComplete?: (value: string) => void;
+  /** Allowed characters. Defaults to numeric. */
+  mode?: TokenInputMode;
+  /** Masks the entered characters. */
+  mask?: boolean;
+  /** Disables all inputs. */
+  disabled?: boolean;
+  /** Makes all inputs read-only. */
+  readOnly?: boolean;
+  /** Marks every character input as required. */
+  required?: boolean;
+  /** Visual size of the individual character slots. */
+  size?: TokenInputSize;
+  /** Visible label associated with the first input. */
+  label?: ReactNode;
+  /** ID applied to the first native input. */
+  id?: string;
+  /** Name used for native form submission. */
+  name?: string;
+  /** Associates the hidden form input with a form. */
+  form?: string;
+  /** Input mode for the native character inputs. */
+  inputMode?: InputHTMLAttributes<HTMLInputElement>["inputMode"];
+  /** Autocomplete mode for the first character input. */
+  autoComplete?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
+  /** Ref forwarded to the first native input. */
+  ref?: Ref<HTMLInputElement>;
+  /** Called when an individual character input receives focus. */
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  /** Called when an individual character input loses focus. */
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  /** Called when an individual character input receives a key event. */
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+};
+export type { TokenInputMode, TokenInputProps, TokenInputSize };

package/dist/components/forms/token-input/token-input.utils.cjs

@@ -0,0 +1,30 @@
+// src/components/forms/token-input/token-input.utils.ts
+const sanitizeToken = (value, length, mode = "numeric") => {
+	return (mode === "numeric" ? value.replace(/[^0-9]/g, "") : value.replace(/[^a-zA-Z0-9]/g, "")).slice(0, Math.max(0, length));
+};
+const getNextActiveIndex = (value, length) => Math.min(value.length, length - 1);
+const getPreviousActiveIndex = (index) => Math.max(0, index - 1);
+const isTokenComplete = (value, length) => value.length === length;
+const removeTokenCharacter = (value, index) => value.slice(0, index) + value.slice(index + 1);
+const replaceTokenCharacter = (value, index, character, length, mode) => {
+	const normalized = sanitizeToken(character, length, mode);
+	if (!normalized) return removeTokenCharacter(value, index);
+	return sanitizeToken(value.slice(0, index) + normalized[0] + value.slice(index + 1), length, mode);
+};
+const insertTokenCharacters = (value, index, insertedValue, length, mode) => {
+	const normalized = sanitizeToken(insertedValue, length, mode);
+	if (!normalized) return value;
+	if (normalized.length >= length) return normalized.slice(0, length);
+	if (normalized.length === 1) return replaceTokenCharacter(value, index, normalized, length, mode);
+	const start = Math.max(0, Math.min(index, length));
+	return sanitizeToken(value.slice(0, start) + normalized + value.slice(start + normalized.length), length, mode);
+};
+exports.getNextActiveIndex = getNextActiveIndex;
+exports.getPreviousActiveIndex = getPreviousActiveIndex;
+exports.insertTokenCharacters = insertTokenCharacters;
+exports.isTokenComplete = isTokenComplete;
+exports.removeTokenCharacter = removeTokenCharacter;
+exports.replaceTokenCharacter = replaceTokenCharacter;
+exports.sanitizeToken = sanitizeToken;
+
+//# sourceMappingURL=token-input.utils.cjs.map

package/dist/components/forms/token-input/token-input.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-input.utils.cjs","names":[],"sources":["../../../../src/components/forms/token-input/token-input.utils.ts"],"sourcesContent":["import type { TokenInputMode } from \"./token-input.types\";\n\nconst sanitizeToken = (\n  value: string,\n  length: number,\n  mode: TokenInputMode = \"numeric\",\n): string => {\n  const normalized =\n    mode === \"numeric\"\n      ? value.replace(/[^0-9]/g, \"\")\n      : value.replace(/[^a-zA-Z0-9]/g, \"\");\n\n  return normalized.slice(0, Math.max(0, length));\n};\n\nconst getNextActiveIndex = (value: string, length: number): number =>\n  Math.min(value.length, length - 1);\n\nconst getPreviousActiveIndex = (index: number): number =>\n  Math.max(0, index - 1);\n\nconst isTokenComplete = (value: string, length: number): boolean =>\n  value.length === length;\n\nconst removeTokenCharacter = (value: string, index: number): string =>\n  value.slice(0, index) + value.slice(index + 1);\n\nconst replaceTokenCharacter = (\n  value: string,\n  index: number,\n  character: string,\n  length: number,\n  mode: TokenInputMode,\n): string => {\n  const normalized = sanitizeToken(character, length, mode);\n\n  if (!normalized) {\n    return removeTokenCharacter(value, index);\n  }\n\n  return sanitizeToken(\n    value.slice(0, index) + normalized[0] + value.slice(index + 1),\n    length,\n    mode,\n  );\n};\n\nconst insertTokenCharacters = (\n  value: string,\n  index: number,\n  insertedValue: string,\n  length: number,\n  mode: TokenInputMode,\n): string => {\n  const normalized = sanitizeToken(insertedValue, length, mode);\n\n  if (!normalized) {\n    return value;\n  }\n\n  // A complete token always replaces the existing token.\n  if (normalized.length >= length) {\n    return normalized.slice(0, length);\n  }\n\n  // A single character replaces the current position.\n  if (normalized.length === 1) {\n    return replaceTokenCharacter(value, index, normalized, length, mode);\n  }\n\n  // Multiple characters are inserted at the current position.\n  const start = Math.max(0, Math.min(index, length));\n\n  return sanitizeToken(\n    value.slice(0, start) + normalized + value.slice(start + normalized.length),\n    length,\n    mode,\n  );\n};\n\nexport {\n  sanitizeToken,\n  getNextActiveIndex,\n  getPreviousActiveIndex,\n  isTokenComplete,\n  removeTokenCharacter,\n  replaceTokenCharacter,\n  insertTokenCharacters,\n};\n"],"mappings":";AAEA,MAAM,iBACJ,OACA,QACA,OAAuB,cACZ;CAMX,QAJE,SAAS,YACL,MAAM,QAAQ,WAAW,EAAE,IAC3B,MAAM,QAAQ,iBAAiB,EAAE,EAAA,CAErB,MAAM,GAAG,KAAK,IAAI,GAAG,MAAM,CAAC;AAChD;AAEA,MAAM,sBAAsB,OAAe,WACzC,KAAK,IAAI,MAAM,QAAQ,SAAS,CAAC;AAEnC,MAAM,0BAA0B,UAC9B,KAAK,IAAI,GAAG,QAAQ,CAAC;AAEvB,MAAM,mBAAmB,OAAe,WACtC,MAAM,WAAW;AAEnB,MAAM,wBAAwB,OAAe,UAC3C,MAAM,MAAM,GAAG,KAAK,IAAI,MAAM,MAAM,QAAQ,CAAC;AAE/C,MAAM,yBACJ,OACA,OACA,WACA,QACA,SACW;CACX,MAAM,aAAa,cAAc,WAAW,QAAQ,IAAI;CAExD,IAAI,CAAC,YACH,OAAO,qBAAqB,OAAO,KAAK;CAG1C,OAAO,cACL,MAAM,MAAM,GAAG,KAAK,IAAI,WAAW,KAAK,MAAM,MAAM,QAAQ,CAAC,GAC7D,QACA,IACF;AACF;AAEA,MAAM,yBACJ,OACA,OACA,eACA,QACA,SACW;CACX,MAAM,aAAa,cAAc,eAAe,QAAQ,IAAI;CAE5D,IAAI,CAAC,YACH,OAAO;CAIT,IAAI,WAAW,UAAU,QACvB,OAAO,WAAW,MAAM,GAAG,MAAM;CAInC,IAAI,WAAW,WAAW,GACxB,OAAO,sBAAsB,OAAO,OAAO,YAAY,QAAQ,IAAI;CAIrE,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,MAAM,CAAC;CAEjD,OAAO,cACL,MAAM,MAAM,GAAG,KAAK,IAAI,aAAa,MAAM,MAAM,QAAQ,WAAW,MAAM,GAC1E,QACA,IACF;AACF"}

package/dist/components/forms/token-input/token-input.utils.js

@@ -0,0 +1,24 @@
+// src/components/forms/token-input/token-input.utils.ts
+const sanitizeToken = (value, length, mode = "numeric") => {
+	return (mode === "numeric" ? value.replace(/[^0-9]/g, "") : value.replace(/[^a-zA-Z0-9]/g, "")).slice(0, Math.max(0, length));
+};
+const getNextActiveIndex = (value, length) => Math.min(value.length, length - 1);
+const getPreviousActiveIndex = (index) => Math.max(0, index - 1);
+const isTokenComplete = (value, length) => value.length === length;
+const removeTokenCharacter = (value, index) => value.slice(0, index) + value.slice(index + 1);
+const replaceTokenCharacter = (value, index, character, length, mode) => {
+	const normalized = sanitizeToken(character, length, mode);
+	if (!normalized) return removeTokenCharacter(value, index);
+	return sanitizeToken(value.slice(0, index) + normalized[0] + value.slice(index + 1), length, mode);
+};
+const insertTokenCharacters = (value, index, insertedValue, length, mode) => {
+	const normalized = sanitizeToken(insertedValue, length, mode);
+	if (!normalized) return value;
+	if (normalized.length >= length) return normalized.slice(0, length);
+	if (normalized.length === 1) return replaceTokenCharacter(value, index, normalized, length, mode);
+	const start = Math.max(0, Math.min(index, length));
+	return sanitizeToken(value.slice(0, start) + normalized + value.slice(start + normalized.length), length, mode);
+};
+export { getNextActiveIndex, getPreviousActiveIndex, insertTokenCharacters, isTokenComplete, removeTokenCharacter, replaceTokenCharacter, sanitizeToken };
+
+//# sourceMappingURL=token-input.utils.js.map

package/dist/components/forms/token-input/token-input.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-input.utils.js","names":[],"sources":["../../../../src/components/forms/token-input/token-input.utils.ts"],"sourcesContent":["import type { TokenInputMode } from \"./token-input.types\";\n\nconst sanitizeToken = (\n  value: string,\n  length: number,\n  mode: TokenInputMode = \"numeric\",\n): string => {\n  const normalized =\n    mode === \"numeric\"\n      ? value.replace(/[^0-9]/g, \"\")\n      : value.replace(/[^a-zA-Z0-9]/g, \"\");\n\n  return normalized.slice(0, Math.max(0, length));\n};\n\nconst getNextActiveIndex = (value: string, length: number): number =>\n  Math.min(value.length, length - 1);\n\nconst getPreviousActiveIndex = (index: number): number =>\n  Math.max(0, index - 1);\n\nconst isTokenComplete = (value: string, length: number): boolean =>\n  value.length === length;\n\nconst removeTokenCharacter = (value: string, index: number): string =>\n  value.slice(0, index) + value.slice(index + 1);\n\nconst replaceTokenCharacter = (\n  value: string,\n  index: number,\n  character: string,\n  length: number,\n  mode: TokenInputMode,\n): string => {\n  const normalized = sanitizeToken(character, length, mode);\n\n  if (!normalized) {\n    return removeTokenCharacter(value, index);\n  }\n\n  return sanitizeToken(\n    value.slice(0, index) + normalized[0] + value.slice(index + 1),\n    length,\n    mode,\n  );\n};\n\nconst insertTokenCharacters = (\n  value: string,\n  index: number,\n  insertedValue: string,\n  length: number,\n  mode: TokenInputMode,\n): string => {\n  const normalized = sanitizeToken(insertedValue, length, mode);\n\n  if (!normalized) {\n    return value;\n  }\n\n  // A complete token always replaces the existing token.\n  if (normalized.length >= length) {\n    return normalized.slice(0, length);\n  }\n\n  // A single character replaces the current position.\n  if (normalized.length === 1) {\n    return replaceTokenCharacter(value, index, normalized, length, mode);\n  }\n\n  // Multiple characters are inserted at the current position.\n  const start = Math.max(0, Math.min(index, length));\n\n  return sanitizeToken(\n    value.slice(0, start) + normalized + value.slice(start + normalized.length),\n    length,\n    mode,\n  );\n};\n\nexport {\n  sanitizeToken,\n  getNextActiveIndex,\n  getPreviousActiveIndex,\n  isTokenComplete,\n  removeTokenCharacter,\n  replaceTokenCharacter,\n  insertTokenCharacters,\n};\n"],"mappings":";AAEA,MAAM,iBACJ,OACA,QACA,OAAuB,cACZ;CAMX,QAJE,SAAS,YACL,MAAM,QAAQ,WAAW,EAAE,IAC3B,MAAM,QAAQ,iBAAiB,EAAE,EAAA,CAErB,MAAM,GAAG,KAAK,IAAI,GAAG,MAAM,CAAC;AAChD;AAEA,MAAM,sBAAsB,OAAe,WACzC,KAAK,IAAI,MAAM,QAAQ,SAAS,CAAC;AAEnC,MAAM,0BAA0B,UAC9B,KAAK,IAAI,GAAG,QAAQ,CAAC;AAEvB,MAAM,mBAAmB,OAAe,WACtC,MAAM,WAAW;AAEnB,MAAM,wBAAwB,OAAe,UAC3C,MAAM,MAAM,GAAG,KAAK,IAAI,MAAM,MAAM,QAAQ,CAAC;AAE/C,MAAM,yBACJ,OACA,OACA,WACA,QACA,SACW;CACX,MAAM,aAAa,cAAc,WAAW,QAAQ,IAAI;CAExD,IAAI,CAAC,YACH,OAAO,qBAAqB,OAAO,KAAK;CAG1C,OAAO,cACL,MAAM,MAAM,GAAG,KAAK,IAAI,WAAW,KAAK,MAAM,MAAM,QAAQ,CAAC,GAC7D,QACA,IACF;AACF;AAEA,MAAM,yBACJ,OACA,OACA,eACA,QACA,SACW;CACX,MAAM,aAAa,cAAc,eAAe,QAAQ,IAAI;CAE5D,IAAI,CAAC,YACH,OAAO;CAIT,IAAI,WAAW,UAAU,QACvB,OAAO,WAAW,MAAM,GAAG,MAAM;CAInC,IAAI,WAAW,WAAW,GACxB,OAAO,sBAAsB,OAAO,OAAO,YAAY,QAAQ,IAAI;CAIrE,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,MAAM,CAAC;CAEjD,OAAO,cACL,MAAM,MAAM,GAAG,KAAK,IAAI,aAAa,MAAM,MAAM,QAAQ,WAAW,MAAM,GAC1E,QACA,IACF;AACF"}

package/dist/components/layout/aspect-ratio/aspect-ratio.css

@@ -0,0 +1,14 @@
+.puzzle-aspect-ratio {
+  box-sizing: border-box;
+  aspect-ratio: 1;
+  width: 100%;
+  display: block;
+  position: relative;
+}
+
+.puzzle-aspect-ratio > * {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+}

package/dist/components/layout/aspect-ratio/aspect-ratio.utils.cjs

@@ -0,0 +1,11 @@
+// src/components/layout/aspect-ratio/aspect-ratio.utils.ts
+const getAspectRatioStyle = (ratio, style) => {
+	if (!Number.isFinite(ratio) || ratio <= 0) throw new RangeError("AspectRatio: ratio must be a positive finite number.");
+	return {
+		...style,
+		aspectRatio: ratio
+	};
+};
+exports.getAspectRatioStyle = getAspectRatioStyle;
+
+//# sourceMappingURL=aspect-ratio.utils.cjs.map

package/dist/components/layout/aspect-ratio/aspect-ratio.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.utils.cjs","names":[],"sources":["../../../../src/components/layout/aspect-ratio/aspect-ratio.utils.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nconst getAspectRatioStyle = (\n  ratio: number,\n  style?: CSSProperties,\n): CSSProperties => {\n  if (!Number.isFinite(ratio) || ratio <= 0) {\n    throw new RangeError(\n      \"AspectRatio: ratio must be a positive finite number.\",\n    );\n  }\n\n  return {\n    ...style,\n    aspectRatio: ratio,\n  };\n};\n\nexport { getAspectRatioStyle };\n"],"mappings":";AAEA,MAAM,uBACJ,OACA,UACkB;CAClB,IAAI,CAAC,OAAO,SAAS,KAAK,KAAK,SAAS,GACtC,MAAM,IAAI,WACR,sDACF;CAGF,OAAO;EACL,GAAG;EACH,aAAa;CACf;AACF"}

package/dist/components/layout/aspect-ratio/aspect-ratio.utils.js

@@ -0,0 +1,11 @@
+// src/components/layout/aspect-ratio/aspect-ratio.utils.ts
+const getAspectRatioStyle = (ratio, style) => {
+	if (!Number.isFinite(ratio) || ratio <= 0) throw new RangeError("AspectRatio: ratio must be a positive finite number.");
+	return {
+		...style,
+		aspectRatio: ratio
+	};
+};
+export { getAspectRatioStyle };
+
+//# sourceMappingURL=aspect-ratio.utils.js.map

package/dist/components/layout/aspect-ratio/aspect-ratio.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.utils.js","names":[],"sources":["../../../../src/components/layout/aspect-ratio/aspect-ratio.utils.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nconst getAspectRatioStyle = (\n  ratio: number,\n  style?: CSSProperties,\n): CSSProperties => {\n  if (!Number.isFinite(ratio) || ratio <= 0) {\n    throw new RangeError(\n      \"AspectRatio: ratio must be a positive finite number.\",\n    );\n  }\n\n  return {\n    ...style,\n    aspectRatio: ratio,\n  };\n};\n\nexport { getAspectRatioStyle };\n"],"mappings":";AAEA,MAAM,uBACJ,OACA,UACkB;CAClB,IAAI,CAAC,OAAO,SAAS,KAAK,KAAK,SAAS,GACtC,MAAM,IAAI,WACR,sDACF;CAGF,OAAO;EACL,GAAG;EACH,aAAa;CACf;AACF"}

package/dist/components/layout/aspect-ratio/index.cjs

@@ -0,0 +1,16 @@
+const require_aspect_ratio_utils = require("./aspect-ratio.utils.cjs");
+;/* empty css                   */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/layout/aspect-ratio/index.tsx
+const AspectRatio = ({ as, ratio = 1, className, style, children, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as ?? "div", {
+		className: (0, _puzzle_ui_core.cn)("puzzle-aspect-ratio", className),
+		style: require_aspect_ratio_utils.getAspectRatioStyle(ratio, style),
+		...rest,
+		children
+	});
+};
+exports.AspectRatio = AspectRatio;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/layout/aspect-ratio/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn","getAspectRatioStyle"],"sources":["../../../../src/components/layout/aspect-ratio/index.tsx"],"sourcesContent":["import type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  ElementType,\n  ReactNode,\n} from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { getAspectRatioStyle } from \"./aspect-ratio.utils\";\nimport \"./aspect-ratio.css\";\n\ntype AspectRatioOwnProps<C extends ElementType> = {\n  as?: C;\n  ratio?: number;\n  className?: string;\n  style?: CSSProperties;\n  children?: ReactNode;\n};\n\ntype AspectRatioProps<C extends ElementType = \"div\"> = AspectRatioOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof AspectRatioOwnProps<C> | \"as\">;\n\nconst AspectRatio = <C extends ElementType = \"div\">({\n  as,\n  ratio = 1,\n  className,\n  style,\n  children,\n  ...rest\n}: AspectRatioProps<C>) => {\n  const Component = (as ?? \"div\") as ElementType;\n\n  return (\n    <Component\n      className={cn(\"puzzle-aspect-ratio\", className)}\n      style={getAspectRatioStyle(ratio, style)}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport { AspectRatio, type AspectRatioProps };\n"],"mappings":";;;;;AAqBA,MAAM,eAA8C,EAClD,IACA,QAAQ,GACR,WACA,OACA,UACA,GAAG,WACsB;CAGzB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAHiB,MAAM,OAGvB;EACE,YAAA,GAAWA,gBAAAA,GAAAA,CAAG,uBAAuB,SAAS;EAC9C,OAAOC,2BAAAA,oBAAoB,OAAO,KAAK;EACvC,GAAI;EAEH;CACQ,CAAA;AAEf"}

package/dist/components/layout/aspect-ratio/index.d.cts

@@ -0,0 +1,11 @@
+import { CSSProperties, ComponentPropsWithRef, ElementType, ReactNode } from "react";
+type AspectRatioOwnProps<C extends ElementType> = {
+  as?: C;
+  ratio?: number;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+};
+type AspectRatioProps<C extends ElementType = "div"> = AspectRatioOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof AspectRatioOwnProps<C> | "as">;
+declare const AspectRatio: <C extends ElementType = "div">({ as, ratio, className, style, children, ...rest }: AspectRatioProps<C>) => import("react").JSX.Element;
+export { AspectRatio, type AspectRatioProps };

package/dist/components/layout/aspect-ratio/index.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, ComponentPropsWithRef, ElementType, ReactNode } from "react";
+type AspectRatioOwnProps<C extends ElementType> = {
+  as?: C;
+  ratio?: number;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+};
+type AspectRatioProps<C extends ElementType = "div"> = AspectRatioOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof AspectRatioOwnProps<C> | "as">;
+declare const AspectRatio: <C extends ElementType = "div">({ as, ratio, className, style, children, ...rest }: AspectRatioProps<C>) => import("react").JSX.Element;
+export { AspectRatio, type AspectRatioProps };

package/dist/components/layout/aspect-ratio/index.js

@@ -0,0 +1,16 @@
+import { getAspectRatioStyle } from "./aspect-ratio.utils.js";
+import "./aspect-ratio.css";
+import { cn } from "@puzzle-ui/core";
+import { jsx } from "react/jsx-runtime";
+// src/components/layout/aspect-ratio/index.tsx
+const AspectRatio = ({ as, ratio = 1, className, style, children, ...rest }) => {
+	return /* @__PURE__ */ jsx(as ?? "div", {
+		className: cn("puzzle-aspect-ratio", className),
+		style: getAspectRatioStyle(ratio, style),
+		...rest,
+		children
+	});
+};
+export { AspectRatio };
+
+//# sourceMappingURL=index.js.map

package/dist/components/layout/aspect-ratio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/aspect-ratio/index.tsx"],"sourcesContent":["import type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  ElementType,\n  ReactNode,\n} from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { getAspectRatioStyle } from \"./aspect-ratio.utils\";\nimport \"./aspect-ratio.css\";\n\ntype AspectRatioOwnProps<C extends ElementType> = {\n  as?: C;\n  ratio?: number;\n  className?: string;\n  style?: CSSProperties;\n  children?: ReactNode;\n};\n\ntype AspectRatioProps<C extends ElementType = \"div\"> = AspectRatioOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof AspectRatioOwnProps<C> | \"as\">;\n\nconst AspectRatio = <C extends ElementType = \"div\">({\n  as,\n  ratio = 1,\n  className,\n  style,\n  children,\n  ...rest\n}: AspectRatioProps<C>) => {\n  const Component = (as ?? \"div\") as ElementType;\n\n  return (\n    <Component\n      className={cn(\"puzzle-aspect-ratio\", className)}\n      style={getAspectRatioStyle(ratio, style)}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport { AspectRatio, type AspectRatioProps };\n"],"mappings":";;;;;AAqBA,MAAM,eAA8C,EAClD,IACA,QAAQ,GACR,WACA,OACA,UACA,GAAG,WACsB;CAGzB,OACE,oBAHiB,MAAM,OAGvB;EACE,WAAW,GAAG,uBAAuB,SAAS;EAC9C,OAAO,oBAAoB,OAAO,KAAK;EACvC,GAAI;EAEH;CACQ,CAAA;AAEf"}

package/dist/components/layout/container/container.css

@@ -2,6 +2,7 @@
   --_container-gutter: var(--puzzle-container-gutter, clamp(1rem, 3vw, 3rem));
   box-sizing: border-box;
   width: 100%;
+  max-width: var(--puzzle-container-width, 80rem);
   padding-inline: var(--_container-gutter);
   min-width: 0;
   margin-inline: auto;

package/dist/components/layout/page-layout/page-layout.css

@@ -32,6 +32,7 @@
   order: 0;
   flex: var(--puzzle-page-main-flex);
   box-sizing: border-box;
+  background-color: var(--puzzle-color-background);
   min-width: 0;
 }
 

package/dist/components/layout/scroll-area/index.cjs

@@ -0,0 +1,27 @@
+const require_scroll_area_utils = require("./scroll-area.utils.cjs");
+;/* empty css                  */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/layout/scroll-area/index.tsx
+const ScrollArea = ({ orientation = "vertical", children, className, role, tabIndex, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }) => {
+	const overflow = require_scroll_area_utils.getScrollAreaOverflow(orientation);
+	const accessibleName = ariaLabel || ariaLabelledBy;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		role: role ?? (accessibleName ? "region" : void 0),
+		tabIndex: tabIndex ?? 0,
+		className: (0, _puzzle_ui_core.cn)("puzzle-scroll-area", className),
+		"data-orientation": orientation,
+		style: {
+			...overflow,
+			...props.style
+		},
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		children
+	});
+};
+exports.ScrollArea = ScrollArea;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/layout/scroll-area/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["getScrollAreaOverflow","cn"],"sources":["../../../../src/components/layout/scroll-area/index.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { getScrollAreaOverflow } from \"./scroll-area.utils\";\nimport type { ScrollAreaOrientation } from \"./scroll-area.utils\";\nimport \"./scroll-area.css\";\n\ntype ScrollAreaProps = Omit<ComponentPropsWithRef<\"div\">, \"children\"> & {\n  /**\n   * Content rendered inside the scrollable viewport.\n   */\n  children?: ReactNode;\n\n  /**\n   * The axis or axes that can scroll.\n   * @default \"vertical\"\n   */\n  orientation?: ScrollAreaOrientation;\n};\n\nconst ScrollArea = ({\n  orientation = \"vertical\",\n  children,\n  className,\n  role,\n  tabIndex,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ref,\n  ...props\n}: ScrollAreaProps) => {\n  const overflow = getScrollAreaOverflow(orientation);\n  const accessibleName = ariaLabel || ariaLabelledBy;\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      role={role ?? (accessibleName ? \"region\" : undefined)}\n      tabIndex={tabIndex ?? 0}\n      className={cn(\"puzzle-scroll-area\", className)}\n      data-orientation={orientation}\n      style={{ ...overflow, ...props.style }}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport { ScrollArea, type ScrollAreaProps, type ScrollAreaOrientation };\n"],"mappings":";;;;;AAmBA,MAAM,cAAc,EAClB,cAAc,YACd,UACA,WACA,MACA,UACA,cAAc,WACd,mBAAmB,gBACnB,KACA,GAAG,YACkB;CACrB,MAAM,WAAWA,0BAAAA,sBAAsB,WAAW;CAClD,MAAM,iBAAiB,aAAa;CAEpC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,MAAM,SAAS,iBAAiB,WAAW,KAAA;EAC3C,UAAU,YAAY;EACtB,YAAA,GAAWC,gBAAAA,GAAAA,CAAG,sBAAsB,SAAS;EAC7C,oBAAkB;EAClB,OAAO;GAAE,GAAG;GAAU,GAAG,MAAM;EAAM;EACrC,cAAY;EACZ,mBAAiB;EAEhB;CACE,CAAA;AAET"}

package/dist/components/layout/scroll-area/index.d.cts

@@ -0,0 +1,15 @@
+import { ScrollAreaOrientation } from "./scroll-area.utils.cjs";
+import { ComponentPropsWithRef, ReactNode } from "react";
+type ScrollAreaProps = Omit<ComponentPropsWithRef<"div">, "children"> & {
+  /**
+   * Content rendered inside the scrollable viewport.
+   */
+  children?: ReactNode;
+  /**
+   * The axis or axes that can scroll.
+   * @default "vertical"
+   */
+  orientation?: ScrollAreaOrientation;
+};
+declare const ScrollArea: ({ orientation, children, className, role, tabIndex, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: ScrollAreaProps) => import("react").JSX.Element;
+export { ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps };

package/dist/components/layout/scroll-area/index.d.ts

@@ -0,0 +1,15 @@
+import { ScrollAreaOrientation } from "./scroll-area.utils.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+type ScrollAreaProps = Omit<ComponentPropsWithRef<"div">, "children"> & {
+  /**
+   * Content rendered inside the scrollable viewport.
+   */
+  children?: ReactNode;
+  /**
+   * The axis or axes that can scroll.
+   * @default "vertical"
+   */
+  orientation?: ScrollAreaOrientation;
+};
+declare const ScrollArea: ({ orientation, children, className, role, tabIndex, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: ScrollAreaProps) => import("react").JSX.Element;
+export { ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps };

package/dist/components/layout/scroll-area/index.js

@@ -0,0 +1,27 @@
+import { getScrollAreaOverflow } from "./scroll-area.utils.js";
+import "./scroll-area.css";
+import { cn } from "@puzzle-ui/core";
+import { jsx } from "react/jsx-runtime";
+// src/components/layout/scroll-area/index.tsx
+const ScrollArea = ({ orientation = "vertical", children, className, role, tabIndex, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }) => {
+	const overflow = getScrollAreaOverflow(orientation);
+	const accessibleName = ariaLabel || ariaLabelledBy;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		role: role ?? (accessibleName ? "region" : void 0),
+		tabIndex: tabIndex ?? 0,
+		className: cn("puzzle-scroll-area", className),
+		"data-orientation": orientation,
+		style: {
+			...overflow,
+			...props.style
+		},
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		children
+	});
+};
+export { ScrollArea };
+
+//# sourceMappingURL=index.js.map

package/dist/components/layout/scroll-area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/scroll-area/index.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { getScrollAreaOverflow } from \"./scroll-area.utils\";\nimport type { ScrollAreaOrientation } from \"./scroll-area.utils\";\nimport \"./scroll-area.css\";\n\ntype ScrollAreaProps = Omit<ComponentPropsWithRef<\"div\">, \"children\"> & {\n  /**\n   * Content rendered inside the scrollable viewport.\n   */\n  children?: ReactNode;\n\n  /**\n   * The axis or axes that can scroll.\n   * @default \"vertical\"\n   */\n  orientation?: ScrollAreaOrientation;\n};\n\nconst ScrollArea = ({\n  orientation = \"vertical\",\n  children,\n  className,\n  role,\n  tabIndex,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ref,\n  ...props\n}: ScrollAreaProps) => {\n  const overflow = getScrollAreaOverflow(orientation);\n  const accessibleName = ariaLabel || ariaLabelledBy;\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      role={role ?? (accessibleName ? \"region\" : undefined)}\n      tabIndex={tabIndex ?? 0}\n      className={cn(\"puzzle-scroll-area\", className)}\n      data-orientation={orientation}\n      style={{ ...overflow, ...props.style }}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport { ScrollArea, type ScrollAreaProps, type ScrollAreaOrientation };\n"],"mappings":";;;;;AAmBA,MAAM,cAAc,EAClB,cAAc,YACd,UACA,WACA,MACA,UACA,cAAc,WACd,mBAAmB,gBACnB,KACA,GAAG,YACkB;CACrB,MAAM,WAAW,sBAAsB,WAAW;CAClD,MAAM,iBAAiB,aAAa;CAEpC,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,MAAM,SAAS,iBAAiB,WAAW,KAAA;EAC3C,UAAU,YAAY;EACtB,WAAW,GAAG,sBAAsB,SAAS;EAC7C,oBAAkB;EAClB,OAAO;GAAE,GAAG;GAAU,GAAG,MAAM;EAAM;EACrC,cAAY;EACZ,mBAAiB;EAEhB;CACE,CAAA;AAET"}

package/dist/components/layout/scroll-area/scroll-area.css

@@ -0,0 +1,25 @@
+.puzzle-scroll-area {
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  scrollbar-color: var(--puzzle-color-border) transparent;
+  min-width: 0;
+  min-height: 0;
+  display: block;
+}
+
+.puzzle-scroll-area::-webkit-scrollbar {
+  width: .5rem;
+  height: .5rem;
+}
+
+.puzzle-scroll-area::-webkit-scrollbar-track {
+  background: none;
+}
+
+.puzzle-scroll-area::-webkit-scrollbar-thumb {
+  background-color: var(--puzzle-color-border);
+  background-clip: content-box;
+  border: 2px solid #0000;
+  border-radius: 999px;
+}

package/dist/components/layout/scroll-area/scroll-area.utils.cjs

@@ -0,0 +1,8 @@
+// src/components/layout/scroll-area/scroll-area.utils.ts
+const getScrollAreaOverflow = (orientation) => ({
+	overflowX: orientation === "horizontal" || orientation === "both" ? "auto" : "hidden",
+	overflowY: orientation === "vertical" || orientation === "both" ? "auto" : "hidden"
+});
+exports.getScrollAreaOverflow = getScrollAreaOverflow;
+
+//# sourceMappingURL=scroll-area.utils.cjs.map

package/dist/components/layout/scroll-area/scroll-area.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.utils.cjs","names":[],"sources":["../../../../src/components/layout/scroll-area/scroll-area.utils.ts"],"sourcesContent":["type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\";\n\ntype ScrollAreaOverflow = {\n  overflowX: \"auto\" | \"hidden\";\n  overflowY: \"auto\" | \"hidden\";\n};\n\nconst getScrollAreaOverflow = (\n  orientation: ScrollAreaOrientation,\n): ScrollAreaOverflow => ({\n  overflowX:\n    orientation === \"horizontal\" || orientation === \"both\" ? \"auto\" : \"hidden\",\n  overflowY:\n    orientation === \"vertical\" || orientation === \"both\" ? \"auto\" : \"hidden\",\n});\n\nexport {\n  getScrollAreaOverflow,\n  type ScrollAreaOrientation,\n  type ScrollAreaOverflow,\n};\n"],"mappings":";AAOA,MAAM,yBACJ,iBACwB;CACxB,WACE,gBAAgB,gBAAgB,gBAAgB,SAAS,SAAS;CACpE,WACE,gBAAgB,cAAc,gBAAgB,SAAS,SAAS;AACpE"}

package/dist/components/layout/scroll-area/scroll-area.utils.d.cts

@@ -0,0 +1,2 @@
+type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+export type { ScrollAreaOrientation };

package/dist/components/layout/scroll-area/scroll-area.utils.d.ts

@@ -0,0 +1,2 @@
+type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+export type { ScrollAreaOrientation };

package/dist/components/layout/scroll-area/scroll-area.utils.js

@@ -0,0 +1,8 @@
+// src/components/layout/scroll-area/scroll-area.utils.ts
+const getScrollAreaOverflow = (orientation) => ({
+	overflowX: orientation === "horizontal" || orientation === "both" ? "auto" : "hidden",
+	overflowY: orientation === "vertical" || orientation === "both" ? "auto" : "hidden"
+});
+export { getScrollAreaOverflow };
+
+//# sourceMappingURL=scroll-area.utils.js.map

package/dist/components/layout/scroll-area/scroll-area.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.utils.js","names":[],"sources":["../../../../src/components/layout/scroll-area/scroll-area.utils.ts"],"sourcesContent":["type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\";\n\ntype ScrollAreaOverflow = {\n  overflowX: \"auto\" | \"hidden\";\n  overflowY: \"auto\" | \"hidden\";\n};\n\nconst getScrollAreaOverflow = (\n  orientation: ScrollAreaOrientation,\n): ScrollAreaOverflow => ({\n  overflowX:\n    orientation === \"horizontal\" || orientation === \"both\" ? \"auto\" : \"hidden\",\n  overflowY:\n    orientation === \"vertical\" || orientation === \"both\" ? \"auto\" : \"hidden\",\n});\n\nexport {\n  getScrollAreaOverflow,\n  type ScrollAreaOrientation,\n  type ScrollAreaOverflow,\n};\n"],"mappings":";AAOA,MAAM,yBACJ,iBACwB;CACxB,WACE,gBAAgB,gBAAgB,gBAAgB,SAAS,SAAS;CACpE,WACE,gBAAgB,cAAc,gBAAgB,SAAS,SAAS;AACpE"}