@clubmed/trident-ui 2.0.0-beta.11 → 2.0.0-beta.13

package/examples/frame-demo.d.ts

@@ -0,0 +1 @@
+export default function FrameDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/frame-demo.js

@@ -0,0 +1,18 @@
+"use client";
+import { Frame as e } from "../ui/Frame.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/examples/frame-demo.tsx
+function n() {
+	return /* @__PURE__ */ t(e, {
+		format: "horizontal",
+		src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4",
+		alt: "Mountain landscape",
+		title: "Mountain Resort",
+		subtitle: "Winter",
+		className: "max-w-380"
+	});
+}
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=frame-demo.js.map

package/examples/frame-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-demo.js","names":[],"sources":["../../lib/examples/frame-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Frame } from '@/ui/Frame';\n\nexport default function FrameDemo() {\n  return (\n    <Frame\n      format=\"horizontal\"\n      src=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4\"\n      alt=\"Mountain landscape\"\n      title=\"Mountain Resort\"\n      subtitle=\"Winter\"\n      className=\"max-w-380\"\n    />\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAY;AAClC,QACE,kBAAC,GAAD;EACE,QAAO;EACP,KAAI;EACJ,KAAI;EACJ,OAAM;EACN,UAAS;EACT,WAAU;EACV,CAAA"}

package/examples/frame-horizontal-demo.d.ts

@@ -0,0 +1 @@
+export default function FrameHorizontalDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/frame-horizontal-demo.js

@@ -0,0 +1,18 @@
+"use client";
+import { Frame as e } from "../ui/Frame.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/examples/frame-horizontal-demo.tsx
+function n() {
+	return /* @__PURE__ */ t(e, {
+		format: "horizontal",
+		src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4",
+		alt: "Mountain landscape",
+		title: "Alpine Adventures",
+		subtitle: "Explore",
+		className: "max-w-380"
+	});
+}
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=frame-horizontal-demo.js.map

package/examples/frame-horizontal-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-horizontal-demo.js","names":[],"sources":["../../lib/examples/frame-horizontal-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Frame } from '@/ui/Frame';\n\nexport default function FrameHorizontalDemo() {\n  return (\n    <Frame\n      format=\"horizontal\"\n      src=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4\"\n      alt=\"Mountain landscape\"\n      title=\"Alpine Adventures\"\n      subtitle=\"Explore\"\n      className=\"max-w-380\"\n    />\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAsB;AAC5C,QACE,kBAAC,GAAD;EACE,QAAO;EACP,KAAI;EACJ,KAAI;EACJ,OAAM;EACN,UAAS;EACT,WAAU;EACV,CAAA"}

package/examples/frame-vertical-demo.d.ts

@@ -0,0 +1 @@
+export default function FrameVerticalDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/frame-vertical-demo.js

@@ -0,0 +1,18 @@
+"use client";
+import { Frame as e } from "../ui/Frame.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/examples/frame-vertical-demo.tsx
+function n() {
+	return /* @__PURE__ */ t(e, {
+		format: "vertical",
+		src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4",
+		alt: "Mountain landscape",
+		title: "Ski Resort",
+		subtitle: "Winter",
+		className: "max-w-280"
+	});
+}
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=frame-vertical-demo.js.map

package/examples/frame-vertical-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-vertical-demo.js","names":[],"sources":["../../lib/examples/frame-vertical-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Frame } from '@/ui/Frame';\n\nexport default function FrameVerticalDemo() {\n  return (\n    <Frame\n      format=\"vertical\"\n      src=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4\"\n      alt=\"Mountain landscape\"\n      title=\"Ski Resort\"\n      subtitle=\"Winter\"\n      className=\"max-w-280\"\n    />\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAoB;AAC1C,QACE,kBAAC,GAAD;EACE,QAAO;EACP,KAAI;EACJ,KAAI;EACJ,OAAM;EACN,UAAS;EACT,WAAU;EACV,CAAA"}

package/examples/frame-with-tag-demo.d.ts

@@ -0,0 +1 @@
+export default function FrameWithTagDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/frame-with-tag-demo.js

@@ -0,0 +1,23 @@
+"use client";
+import { Tag as e } from "../ui/Tag.js";
+import { Frame as t } from "../ui/Frame.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region lib/examples/frame-with-tag-demo.tsx
+function r() {
+	return /* @__PURE__ */ n(t, {
+		format: "horizontal",
+		src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4",
+		alt: "Mountain landscape",
+		title: "Mountain Resort",
+		subtitle: "Winter",
+		className: "max-w-380",
+		children: /* @__PURE__ */ n(e, {
+			label: "Best Seller",
+			className: "mx-12 mt-12 self-start px-8 sm:mx-24 sm:mt-24 sm:px-16"
+		})
+	});
+}
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=frame-with-tag-demo.js.map

package/examples/frame-with-tag-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-with-tag-demo.js","names":[],"sources":["../../lib/examples/frame-with-tag-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Frame } from '@/ui/Frame';\nimport { Tag } from '@/ui/Tag';\n\nexport default function FrameWithTagDemo() {\n  return (\n    <Frame\n      format=\"horizontal\"\n      src=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4\"\n      alt=\"Mountain landscape\"\n      title=\"Mountain Resort\"\n      subtitle=\"Winter\"\n      className=\"max-w-380\"\n    >\n      <Tag label=\"Best Seller\" className=\"mx-12 mt-12 self-start px-8 sm:mx-24 sm:mt-24 sm:px-16\" />\n    </Frame>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAmB;AACzC,QACE,kBAAC,GAAD;EACE,QAAO;EACP,KAAI;EACJ,KAAI;EACJ,OAAM;EACN,UAAS;EACT,WAAU;YAEV,kBAAC,GAAD;GAAK,OAAM;GAAc,WAAU;GAA2D,CAAA;EACxF,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "2.0.0-beta.11",
+  "version": "2.0.0-beta.13",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [

package/styles/components.css

@@ -90,10 +90,4 @@
       transition-duration: 0ms !important;
     }
   }
-
-  @property --1fr {
-    syntax: '<length>';
-    initial-value: 0px;
-    inherits: false;
-  }
 }

package/ui/Frame.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Card } from './cards/Card';
+type FrameFormat = 'horizontal' | 'vertical';
+export interface FrameProps extends Omit<ComponentPropsWithoutRef<typeof Card>, 'theme' | 'format' | 'children'> {
+    format?: FrameFormat;
+    src: string;
+    alt: string;
+    coverLink?: boolean;
+    buttonAriaLabel?: string;
+    title: string;
+    subtitle?: string;
+    children?: ReactNode;
+}
+export declare function Frame({ format, src, alt, coverLink, buttonAriaLabel, title, subtitle, children, className, ...cardProps }: FrameProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/Frame.js

@@ -0,0 +1,39 @@
+import { Button as e } from "./buttons/Button.js";
+import { Card as t } from "./cards/Card.js";
+import { CardBackground as n } from "./cards/CardBackground.js";
+import { CardClickable as r } from "./cards/CardClickable.js";
+import { HeadingGroup as i } from "./heading/HeadingGroup.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region lib/ui/Frame.tsx
+function s({ format: s = "horizontal", src: c, alt: l, coverLink: u = !0, buttonAriaLabel: d = "View details", title: f, subtitle: p, children: m, className: h, ...g }) {
+	return /* @__PURE__ */ a(t, {
+		theme: "frame",
+		format: s,
+		className: h,
+		...g,
+		children: /* @__PURE__ */ o(n, {
+			src: c,
+			alt: l,
+			children: [m, /* @__PURE__ */ o(r, {
+				coverLink: u,
+				className: "w-full justify-between",
+				children: [/* @__PURE__ */ a(i, {
+					level: 2,
+					subtitle: p,
+					children: f
+				}), /* @__PURE__ */ a(e, {
+					color: "white",
+					theme: "outline",
+					variant: "circle",
+					icon: "ArrowDefaultRight",
+					"aria-label": d,
+					className: "pointer-events-auto shrink-0"
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { s as Frame };
+
+//# sourceMappingURL=Frame.js.map

package/ui/Frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Frame.js","names":[],"sources":["../../lib/ui/Frame.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport { Card } from '@/ui/cards/Card';\nimport { CardBackground } from '@/ui/cards/CardBackground';\nimport { CardClickable } from '@/ui/cards/CardClickable';\nimport { Button } from '@/ui/buttons/Button';\nimport { HeadingGroup } from '@/ui/heading/HeadingGroup';\n\ntype FrameFormat = 'horizontal' | 'vertical';\n\nexport interface FrameProps\n  extends Omit<ComponentPropsWithoutRef<typeof Card>, 'theme' | 'format' | 'children'> {\n  format?: FrameFormat;\n  src: string;\n  alt: string;\n  coverLink?: boolean;\n  buttonAriaLabel?: string;\n  title: string;\n  subtitle?: string;\n  children?: ReactNode;\n}\n\nexport function Frame({\n  format = 'horizontal',\n  src,\n  alt,\n  coverLink = true,\n  buttonAriaLabel = 'View details',\n  title,\n  subtitle,\n  children,\n  className,\n  ...cardProps\n}: FrameProps) {\n  return (\n    <Card theme=\"frame\" format={format} className={className} {...cardProps}>\n      <CardBackground src={src} alt={alt}>\n        {children}\n        <CardClickable coverLink={coverLink} className=\"w-full justify-between\">\n          <HeadingGroup level={2} subtitle={subtitle}>\n            {title}\n          </HeadingGroup>\n          <Button\n            color=\"white\"\n            theme=\"outline\"\n            variant=\"circle\"\n            icon=\"ArrowDefaultRight\"\n            aria-label={buttonAriaLabel}\n            className=\"pointer-events-auto shrink-0\"\n          />\n        </CardClickable>\n      </CardBackground>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;AAqBA,SAAgB,EAAM,EACpB,YAAS,cACT,QACA,QACA,eAAY,IACZ,qBAAkB,gBAClB,UACA,aACA,aACA,cACA,GAAG,KACU;AACb,QACE,kBAAC,GAAD;EAAM,OAAM;EAAgB;EAAmB;EAAW,GAAI;YAC5D,kBAAC,GAAD;GAAqB;GAAU;aAA/B,CACG,GACD,kBAAC,GAAD;IAA0B;IAAW,WAAU;cAA/C,CACE,kBAAC,GAAD;KAAc,OAAO;KAAa;eAC/B;KACY,CAAA,EACf,kBAAC,GAAD;KACE,OAAM;KACN,OAAM;KACN,SAAQ;KACR,MAAK;KACL,cAAY;KACZ,WAAU;KACV,CAAA,CACY;MACD;;EACZ,CAAA"}

package/ui/buttons/Button.type.d.ts

@@ -5,7 +5,7 @@ export interface ButtonProps extends PropsWithChildren {
     color?: Colors;
     icon?: IconicNames;
     iconWidth?: string;
-    size?: 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large' | 'primary' | 'secondary' | 'tertiary';
     theme?: 'outline' | 'solid';
     variant?: 'circle' | 'pill';
 }

package/ui/buttons/Button.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.type.js","names":[],"sources":["../../../lib/ui/buttons/Button.type.ts"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { IconicNames } from '@clubmed/trident-icons';\nimport type { Colors } from '../types/Colors';\nimport type { PropsWithChildren } from 'react';\n\nexport interface ButtonProps extends PropsWithChildren {\n  color?: Colors;\n  icon?: IconicNames;\n  iconWidth?: string;\n  size?: 'small' | 'medium' | 'large';\n  theme?: 'outline' | 'solid';\n  variant?: 'circle' | 'pill';\n}\n\ntype Params = {\n  color: ButtonProps['color'];\n  size: ButtonProps['size'];\n  theme: ButtonProps['theme'];\n  variant: ButtonProps['variant'];\n};\n\nexport const BUTTON_COLORS = {\n  black: 'button-black',\n  green: 'button-green',\n  lavender: 'button-lavender',\n  lightSand: 'button-lightSand',\n  marygold: 'button-marygold',\n  pearl: 'button-pearl',\n  orange: 'button-orange',\n  red: 'button-red',\n  saffron: 'button-saffron',\n  sand: 'button-sand',\n  sienna: 'button-sienna',\n  ultramarine: 'button-ultramarine',\n  verdigris: 'button-verdigris',\n  wave: 'button-wave',\n  white: 'button-white',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst colorGuard = (color: string | undefined): color is keyof typeof BUTTON_COLORS => {\n  return color != undefined && color in BUTTON_COLORS;\n};\n\nconst getButtonColor = (color: string | undefined) => {\n  if (colorGuard(color)) {\n    return BUTTON_COLORS[color];\n  }\n\n  return BUTTON_COLORS.saffron;\n};\n\nexport const BUTTON_THEMES = {\n  outline: 'button-outline',\n  solid: 'button-solid',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst themeGuard = (color: string | undefined): color is keyof typeof BUTTON_THEMES => {\n  return color != undefined && color in BUTTON_THEMES;\n};\n\nconst getButtonTheme = (theme: string | undefined) => {\n  if (themeGuard(theme)) {\n    return BUTTON_THEMES[theme];\n  }\n\n  return BUTTON_THEMES.solid;\n};\n\nexport const BUTTON_VARIANTS = {\n  circle: 'button-circle',\n  pill: 'button-pill',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst variantGuard = (color: string | undefined): color is keyof typeof BUTTON_VARIANTS => {\n  return color != undefined && color in BUTTON_VARIANTS;\n};\n\nconst getButtonVariant = (variant: string | undefined) => {\n  if (variantGuard(variant)) {\n    return BUTTON_VARIANTS[variant];\n  }\n\n  return BUTTON_VARIANTS.pill;\n};\n\nexport const BUTTON_SIZES = {\n  small: 'button-small',\n  medium: 'button-medium',\n  large: 'button-large',\n  primary: 'button-medium',\n  secondary: 'button-secondary',\n  tertiary: 'button-tertiary',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst sizeGuard = (color: string | undefined): color is keyof typeof BUTTON_SIZES => {\n  return color != undefined && color in BUTTON_SIZES;\n};\n\nconst getButtonSize = (size: ButtonProps['size']) => {\n  if (sizeGuard(size)) {\n    return BUTTON_SIZES[size];\n  }\n\n  return BUTTON_SIZES.medium;\n};\n\nexport const getButtonClasses = ({ color, size, theme, variant }: Params) => {\n  /* keep the \"flex\" class outside of \"button-*\" so that it can be overridden in responsive */\n  return clsx(\n    'flex',\n    'button',\n    getButtonTheme(theme),\n    getButtonColor(color),\n    getButtonVariant(variant),\n    getButtonSize(size),\n  );\n};\n"],"mappings":";;AAsBA,IAAa,IAAgB;CAC3B,OAAO;CACP,OAAO;CACP,UAAU;CACV,WAAW;CACX,UAAU;CACV,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,MAAM;CACN,QAAQ;CACR,aAAa;CACb,WAAW;CACX,MAAM;CACN,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,SAGV,IAAgB;CAC3B,SAAS;CACT,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,OAGV,IAAkB;CAC7B,QAAQ;CACR,MAAM;CACP,EAEK,KAAgB,MACb,KAAS,QAAa,KAAS,GAGlC,KAAoB,MACpB,EAAa,EAAQ,GAChB,EAAgB,KAGlB,EAAgB,MAGZ,IAAe;CAC1B,OAAO;CACP,QAAQ;CACR,OAAO;CACP,SAAS;CACT,WAAW;CACX,UAAU;CACX,EAEK,KAAa,MACV,KAAS,QAAa,KAAS,GAGlC,KAAiB,MACjB,EAAU,EAAK,GACV,EAAa,KAGf,EAAa,QAGT,KAAoB,EAAE,UAAO,SAAM,UAAO,iBAE9C,EACL,QACA,UACA,EAAe,EAAM,EACrB,EAAe,EAAM,EACrB,EAAiB,EAAQ,EACzB,EAAc,EAAK,CACpB"}
+{"version":3,"file":"Button.type.js","names":[],"sources":["../../../lib/ui/buttons/Button.type.ts"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { IconicNames } from '@clubmed/trident-icons';\nimport type { Colors } from '../types/Colors';\nimport type { PropsWithChildren } from 'react';\n\nexport interface ButtonProps extends PropsWithChildren {\n  color?: Colors;\n  icon?: IconicNames;\n  iconWidth?: string;\n  size?: 'small' | 'medium' | 'large' | 'primary' | 'secondary' | 'tertiary';\n  theme?: 'outline' | 'solid';\n  variant?: 'circle' | 'pill';\n}\n\ntype Params = {\n  color: ButtonProps['color'];\n  size: ButtonProps['size'];\n  theme: ButtonProps['theme'];\n  variant: ButtonProps['variant'];\n};\n\nexport const BUTTON_COLORS = {\n  black: 'button-black',\n  green: 'button-green',\n  lavender: 'button-lavender',\n  lightSand: 'button-lightSand',\n  marygold: 'button-marygold',\n  pearl: 'button-pearl',\n  orange: 'button-orange',\n  red: 'button-red',\n  saffron: 'button-saffron',\n  sand: 'button-sand',\n  sienna: 'button-sienna',\n  ultramarine: 'button-ultramarine',\n  verdigris: 'button-verdigris',\n  wave: 'button-wave',\n  white: 'button-white',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst colorGuard = (color: string | undefined): color is keyof typeof BUTTON_COLORS => {\n  return color != undefined && color in BUTTON_COLORS;\n};\n\nconst getButtonColor = (color: string | undefined) => {\n  if (colorGuard(color)) {\n    return BUTTON_COLORS[color];\n  }\n\n  return BUTTON_COLORS.saffron;\n};\n\nexport const BUTTON_THEMES = {\n  outline: 'button-outline',\n  solid: 'button-solid',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst themeGuard = (color: string | undefined): color is keyof typeof BUTTON_THEMES => {\n  return color != undefined && color in BUTTON_THEMES;\n};\n\nconst getButtonTheme = (theme: string | undefined) => {\n  if (themeGuard(theme)) {\n    return BUTTON_THEMES[theme];\n  }\n\n  return BUTTON_THEMES.solid;\n};\n\nexport const BUTTON_VARIANTS = {\n  circle: 'button-circle',\n  pill: 'button-pill',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst variantGuard = (color: string | undefined): color is keyof typeof BUTTON_VARIANTS => {\n  return color != undefined && color in BUTTON_VARIANTS;\n};\n\nconst getButtonVariant = (variant: string | undefined) => {\n  if (variantGuard(variant)) {\n    return BUTTON_VARIANTS[variant];\n  }\n\n  return BUTTON_VARIANTS.pill;\n};\n\nexport const BUTTON_SIZES = {\n  small: 'button-small',\n  medium: 'button-medium',\n  large: 'button-large',\n  primary: 'button-medium',\n  secondary: 'button-secondary',\n  tertiary: 'button-tertiary',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst sizeGuard = (color: string | undefined): color is keyof typeof BUTTON_SIZES => {\n  return color != undefined && color in BUTTON_SIZES;\n};\n\nconst getButtonSize = (size: ButtonProps['size']) => {\n  if (sizeGuard(size)) {\n    return BUTTON_SIZES[size];\n  }\n\n  return BUTTON_SIZES.medium;\n};\n\nexport const getButtonClasses = ({ color, size, theme, variant }: Params) => {\n  /* keep the \"flex\" class outside of \"button-*\" so that it can be overridden in responsive */\n  return clsx(\n    'flex',\n    'button',\n    getButtonTheme(theme),\n    getButtonColor(color),\n    getButtonVariant(variant),\n    getButtonSize(size),\n  );\n};\n"],"mappings":";;AAsBA,IAAa,IAAgB;CAC3B,OAAO;CACP,OAAO;CACP,UAAU;CACV,WAAW;CACX,UAAU;CACV,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,MAAM;CACN,QAAQ;CACR,aAAa;CACb,WAAW;CACX,MAAM;CACN,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,SAGV,IAAgB;CAC3B,SAAS;CACT,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,OAGV,IAAkB;CAC7B,QAAQ;CACR,MAAM;CACP,EAEK,KAAgB,MACb,KAAS,QAAa,KAAS,GAGlC,KAAoB,MACpB,EAAa,EAAQ,GAChB,EAAgB,KAGlB,EAAgB,MAGZ,IAAe;CAC1B,OAAO;CACP,QAAQ;CACR,OAAO;CACP,SAAS;CACT,WAAW;CACX,UAAU;CACX,EAEK,KAAa,MACV,KAAS,QAAa,KAAS,GAGlC,KAAiB,MACjB,EAAU,EAAK,GACV,EAAa,KAGf,EAAa,QAGT,KAAoB,EAAE,UAAO,SAAM,UAAO,iBAE9C,EACL,QACA,UACA,EAAe,EAAM,EACrB,EAAe,EAAM,EACrB,EAAiB,EAAQ,EACzB,EAAc,EAAK,CACpB"}