@traefik-labs/faency 12.0.7

package/dist/components/SidePanel/SidePanel.cjs

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const DialogPrimitive = require("@radix-ui/react-dialog");
+const reactIcons = require("@radix-ui/react-icons");
+const VisuallyHiddenPrimitive = require("@radix-ui/react-visually-hidden");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const Overlay = require("../Overlay.cjs");
+const IconButton = require("../IconButton/IconButton.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const DialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DialogPrimitive);
+const fadeIn = stitches_config.keyframes({
+  from: { opacity: "0" },
+  to: { opacity: "1" }
+});
+const fadeOut = stitches_config.keyframes({
+  from: { opacity: "1" },
+  to: { opacity: "0" }
+});
+const SidePanelOverlay = stitches_config.styled(DialogPrimitive__namespace.Overlay, Overlay.overlayStyles, {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  '&[data-state="open"]': {
+    animation: `${fadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
+  },
+  '&[data-state="closed"]': {
+    animation: `${fadeOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
+  }
+});
+const slideIn = stitches_config.keyframes({
+  from: { transform: "$$transformValue" },
+  to: { transform: "translate3d(0,0,0)" }
+});
+const slideOut = stitches_config.keyframes({
+  from: { transform: "translate3d(0,0,0)" },
+  to: { transform: "$$transformValue" }
+});
+const StyledContent = stitches_config.styled(DialogPrimitive__namespace.Content, {
+  backgroundColor: "$sidePanelBackground",
+  boxShadow: "inset 0 0 0 1px $colors$deepBlue4",
+  position: "fixed",
+  top: 0,
+  bottom: 0,
+  width: 375,
+  p: "$4",
+  '&[data-state="open"]': {
+    animation: `${slideIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
+  },
+  '&[data-state="closed"]': {
+    animation: `${slideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
+  },
+  variants: {
+    side: {
+      top: {
+        $$transformValue: "translate3d(0,-100%,0)",
+        width: "100%",
+        height: 250,
+        bottom: "auto"
+      },
+      right: {
+        $$transformValue: "translate3d(100%,0,0)",
+        right: 0,
+        maxWidth: "50%"
+      },
+      bottom: {
+        $$transformValue: "translate3d(0,100%,0)",
+        width: "100%",
+        height: 250,
+        bottom: 0,
+        top: "auto"
+      },
+      left: {
+        $$transformValue: "translate3d(-100%,0,0)",
+        left: 0,
+        maxWidth: "50%"
+      }
+    }
+  },
+  defaultVariants: {
+    side: "right"
+  }
+});
+const StyledCloseButton = stitches_config.styled(DialogPrimitive__namespace.Close, {
+  position: "absolute",
+  top: "$2",
+  right: "$2",
+  cursor: "pointer"
+});
+const SidePanelCloseIconButton = React.forwardRef((props, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledCloseButton, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { ref: forwardedRef, css: { color: "$hiContrast" }, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross1Icon, {}) }) }));
+const SidePanel = React.forwardRef(
+  ({
+    description,
+    noOverlay = false,
+    noCloseIcon = false,
+    children,
+    onOpenChange,
+    open = false,
+    defaultOpen = false,
+    ...props
+  }, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open, onOpenChange, defaultOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
+    !noOverlay && /* @__PURE__ */ jsxRuntime.jsx(SidePanelOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(StyledContent, { ...props, ref: forwardedRef, children: [
+      description ? /* @__PURE__ */ jsxRuntime.jsx(VisuallyHiddenPrimitive.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { children: description }) }) : null,
+      children,
+      !noCloseIcon && /* @__PURE__ */ jsxRuntime.jsx(SidePanelCloseIconButton, {})
+    ] })
+  ] }) })
+);
+exports.SidePanel = SidePanel;
+//# sourceMappingURL=SidePanel.cjs.map

package/dist/components/SidePanel/SidePanel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.cjs","sources":["../../../components/SidePanel/SidePanel.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden';\nimport React, { ComponentProps } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { IconButton } from '../IconButton';\nimport { overlayStyles } from '../Overlay';\n\nconst fadeIn = keyframes({\n  from: { opacity: '0' },\n  to: { opacity: '1' },\n});\n\nconst fadeOut = keyframes({\n  from: { opacity: '1' },\n  to: { opacity: '0' },\n});\n\nconst SidePanelOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {\n  position: 'fixed',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n\n  '&[data-state=\"open\"]': {\n    animation: `${fadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  '&[data-state=\"closed\"]': {\n    animation: `${fadeOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n});\n\nconst slideIn = keyframes({\n  from: { transform: '$$transformValue' },\n  to: { transform: 'translate3d(0,0,0)' },\n});\n\nconst slideOut = keyframes({\n  from: { transform: 'translate3d(0,0,0)' },\n  to: { transform: '$$transformValue' },\n});\n\nconst StyledContent = styled(DialogPrimitive.Content, {\n  backgroundColor: '$sidePanelBackground',\n  boxShadow: 'inset 0 0 0 1px $colors$deepBlue4',\n  position: 'fixed',\n  top: 0,\n  bottom: 0,\n  width: 375,\n  p: '$4',\n\n  '&[data-state=\"open\"]': {\n    animation: `${slideIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  '&[data-state=\"closed\"]': {\n    animation: `${slideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  variants: {\n    side: {\n      top: {\n        $$transformValue: 'translate3d(0,-100%,0)',\n        width: '100%',\n        height: 250,\n        bottom: 'auto',\n      },\n      right: {\n        $$transformValue: 'translate3d(100%,0,0)',\n        right: 0,\n        maxWidth: '50%',\n      },\n      bottom: {\n        $$transformValue: 'translate3d(0,100%,0)',\n        width: '100%',\n        height: 250,\n        bottom: 0,\n        top: 'auto',\n      },\n      left: {\n        $$transformValue: 'translate3d(-100%,0,0)',\n        left: 0,\n        maxWidth: '50%',\n      },\n    },\n  },\n\n  defaultVariants: {\n    side: 'right',\n  },\n});\n\nconst StyledCloseButton = styled(DialogPrimitive.Close, {\n  position: 'absolute',\n  top: '$2',\n  right: '$2',\n  cursor: 'pointer',\n});\n\ninterface SidePanelCloseButtonProps\n  extends VariantProps<typeof IconButton>,\n    ComponentProps<typeof IconButton> {}\n\nconst SidePanelCloseIconButton = React.forwardRef<\n  React.ElementRef<typeof IconButton>,\n  SidePanelCloseButtonProps\n>((props, forwardedRef) => (\n  <StyledCloseButton asChild>\n    <IconButton ref={forwardedRef} css={{ color: '$hiContrast' }} {...props}>\n      <Cross1Icon />\n    </IconButton>\n  </StyledCloseButton>\n));\n\ntype SidePanelContentVariants = VariantProps<typeof StyledContent>;\ntype SidePanelContentPrimitiveProps = React.ComponentProps<typeof DialogPrimitive.Content>;\ntype SidePanelProps = SidePanelContentPrimitiveProps &\n  SidePanelContentVariants & {\n    css?: CSS;\n    description?: string;\n    noOverlay?: boolean;\n    noCloseIcon?: boolean;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange(open: boolean): void;\n  };\n\nexport const SidePanel = React.forwardRef<React.ElementRef<typeof StyledContent>, SidePanelProps>(\n  (\n    {\n      description,\n      noOverlay = false,\n      noCloseIcon = false,\n      children,\n      onOpenChange,\n      open = false,\n      defaultOpen = false,\n      ...props\n    },\n    forwardedRef,\n  ) => (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>\n      <DialogPrimitive.Portal>\n        {!noOverlay && <SidePanelOverlay />}\n        <StyledContent {...props} ref={forwardedRef}>\n          {description ? (\n            <VisuallyHidden asChild>\n              <DialogPrimitive.Description>{description}</DialogPrimitive.Description>\n            </VisuallyHidden>\n          ) : null}\n          {children}\n          {!noCloseIcon && <SidePanelCloseIconButton />}\n        </StyledContent>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  ),\n);\n"],"names":["keyframes","styled","DialogPrimitive","overlayStyles","jsx","IconButton","Cross1Icon","jsxs","VisuallyHidden"],"mappings":"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"}

package/dist/components/SidePanel/SidePanel.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Cross1Icon } from "@radix-ui/react-icons";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import React from "react";
+import { styled, keyframes } from "../../stitches.config.js";
+import { overlayStyles } from "../Overlay.js";
+import { IconButton } from "../IconButton/IconButton.js";
+const fadeIn = keyframes({
+  from: { opacity: "0" },
+  to: { opacity: "1" }
+});
+const fadeOut = keyframes({
+  from: { opacity: "1" },
+  to: { opacity: "0" }
+});
+const SidePanelOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  '&[data-state="open"]': {
+    animation: `${fadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
+  },
+  '&[data-state="closed"]': {
+    animation: `${fadeOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
+  }
+});
+const slideIn = keyframes({
+  from: { transform: "$$transformValue" },
+  to: { transform: "translate3d(0,0,0)" }
+});
+const slideOut = keyframes({
+  from: { transform: "translate3d(0,0,0)" },
+  to: { transform: "$$transformValue" }
+});
+const StyledContent = styled(DialogPrimitive.Content, {
+  backgroundColor: "$sidePanelBackground",
+  boxShadow: "inset 0 0 0 1px $colors$deepBlue4",
+  position: "fixed",
+  top: 0,
+  bottom: 0,
+  width: 375,
+  p: "$4",
+  '&[data-state="open"]': {
+    animation: `${slideIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
+  },
+  '&[data-state="closed"]': {
+    animation: `${slideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
+  },
+  variants: {
+    side: {
+      top: {
+        $$transformValue: "translate3d(0,-100%,0)",
+        width: "100%",
+        height: 250,
+        bottom: "auto"
+      },
+      right: {
+        $$transformValue: "translate3d(100%,0,0)",
+        right: 0,
+        maxWidth: "50%"
+      },
+      bottom: {
+        $$transformValue: "translate3d(0,100%,0)",
+        width: "100%",
+        height: 250,
+        bottom: 0,
+        top: "auto"
+      },
+      left: {
+        $$transformValue: "translate3d(-100%,0,0)",
+        left: 0,
+        maxWidth: "50%"
+      }
+    }
+  },
+  defaultVariants: {
+    side: "right"
+  }
+});
+const StyledCloseButton = styled(DialogPrimitive.Close, {
+  position: "absolute",
+  top: "$2",
+  right: "$2",
+  cursor: "pointer"
+});
+const SidePanelCloseIconButton = React.forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(StyledCloseButton, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { ref: forwardedRef, css: { color: "$hiContrast" }, ...props, children: /* @__PURE__ */ jsx(Cross1Icon, {}) }) }));
+const SidePanel = React.forwardRef(
+  ({
+    description,
+    noOverlay = false,
+    noCloseIcon = false,
+    children,
+    onOpenChange,
+    open = false,
+    defaultOpen = false,
+    ...props
+  }, forwardedRef) => /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, onOpenChange, defaultOpen, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    !noOverlay && /* @__PURE__ */ jsx(SidePanelOverlay, {}),
+    /* @__PURE__ */ jsxs(StyledContent, { ...props, ref: forwardedRef, children: [
+      description ? /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(DialogPrimitive.Description, { children: description }) }) : null,
+      children,
+      !noCloseIcon && /* @__PURE__ */ jsx(SidePanelCloseIconButton, {})
+    ] })
+  ] }) })
+);
+export {
+  SidePanel
+};
+//# sourceMappingURL=SidePanel.js.map

package/dist/components/SidePanel/SidePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.js","sources":["../../../components/SidePanel/SidePanel.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden';\nimport React, { ComponentProps } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { IconButton } from '../IconButton';\nimport { overlayStyles } from '../Overlay';\n\nconst fadeIn = keyframes({\n  from: { opacity: '0' },\n  to: { opacity: '1' },\n});\n\nconst fadeOut = keyframes({\n  from: { opacity: '1' },\n  to: { opacity: '0' },\n});\n\nconst SidePanelOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {\n  position: 'fixed',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n\n  '&[data-state=\"open\"]': {\n    animation: `${fadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  '&[data-state=\"closed\"]': {\n    animation: `${fadeOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n});\n\nconst slideIn = keyframes({\n  from: { transform: '$$transformValue' },\n  to: { transform: 'translate3d(0,0,0)' },\n});\n\nconst slideOut = keyframes({\n  from: { transform: 'translate3d(0,0,0)' },\n  to: { transform: '$$transformValue' },\n});\n\nconst StyledContent = styled(DialogPrimitive.Content, {\n  backgroundColor: '$sidePanelBackground',\n  boxShadow: 'inset 0 0 0 1px $colors$deepBlue4',\n  position: 'fixed',\n  top: 0,\n  bottom: 0,\n  width: 375,\n  p: '$4',\n\n  '&[data-state=\"open\"]': {\n    animation: `${slideIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  '&[data-state=\"closed\"]': {\n    animation: `${slideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  variants: {\n    side: {\n      top: {\n        $$transformValue: 'translate3d(0,-100%,0)',\n        width: '100%',\n        height: 250,\n        bottom: 'auto',\n      },\n      right: {\n        $$transformValue: 'translate3d(100%,0,0)',\n        right: 0,\n        maxWidth: '50%',\n      },\n      bottom: {\n        $$transformValue: 'translate3d(0,100%,0)',\n        width: '100%',\n        height: 250,\n        bottom: 0,\n        top: 'auto',\n      },\n      left: {\n        $$transformValue: 'translate3d(-100%,0,0)',\n        left: 0,\n        maxWidth: '50%',\n      },\n    },\n  },\n\n  defaultVariants: {\n    side: 'right',\n  },\n});\n\nconst StyledCloseButton = styled(DialogPrimitive.Close, {\n  position: 'absolute',\n  top: '$2',\n  right: '$2',\n  cursor: 'pointer',\n});\n\ninterface SidePanelCloseButtonProps\n  extends VariantProps<typeof IconButton>,\n    ComponentProps<typeof IconButton> {}\n\nconst SidePanelCloseIconButton = React.forwardRef<\n  React.ElementRef<typeof IconButton>,\n  SidePanelCloseButtonProps\n>((props, forwardedRef) => (\n  <StyledCloseButton asChild>\n    <IconButton ref={forwardedRef} css={{ color: '$hiContrast' }} {...props}>\n      <Cross1Icon />\n    </IconButton>\n  </StyledCloseButton>\n));\n\ntype SidePanelContentVariants = VariantProps<typeof StyledContent>;\ntype SidePanelContentPrimitiveProps = React.ComponentProps<typeof DialogPrimitive.Content>;\ntype SidePanelProps = SidePanelContentPrimitiveProps &\n  SidePanelContentVariants & {\n    css?: CSS;\n    description?: string;\n    noOverlay?: boolean;\n    noCloseIcon?: boolean;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange(open: boolean): void;\n  };\n\nexport const SidePanel = React.forwardRef<React.ElementRef<typeof StyledContent>, SidePanelProps>(\n  (\n    {\n      description,\n      noOverlay = false,\n      noCloseIcon = false,\n      children,\n      onOpenChange,\n      open = false,\n      defaultOpen = false,\n      ...props\n    },\n    forwardedRef,\n  ) => (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>\n      <DialogPrimitive.Portal>\n        {!noOverlay && <SidePanelOverlay />}\n        <StyledContent {...props} ref={forwardedRef}>\n          {description ? (\n            <VisuallyHidden asChild>\n              <DialogPrimitive.Description>{description}</DialogPrimitive.Description>\n            </VisuallyHidden>\n          ) : null}\n          {children}\n          {!noCloseIcon && <SidePanelCloseIconButton />}\n        </StyledContent>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  ),\n);\n"],"names":[],"mappings":"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"}

package/dist/components/SidePanel/SidePanel.themes.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+exports.Theme = void 0;
+((Theme2) => {
+  Theme2.getLight = () => ({
+    sidePanelBackground: "$deepBlue2"
+  });
+  Theme2.getDark = () => ({
+    sidePanelBackground: "$deepBlue3"
+  });
+})(exports.Theme || (exports.Theme = {}));
+//# sourceMappingURL=SidePanel.themes.cjs.map

package/dist/components/SidePanel/SidePanel.themes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.themes.cjs","sources":["../../../components/SidePanel/SidePanel.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    sidePanelBackground: Property.Color;\n  };\n\n  type Factory = (primaryColor?: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    sidePanelBackground: '$deepBlue2',\n  });\n\n  export const getDark: Factory = () => ({\n    sidePanelBackground: '$deepBlue3',\n  });\n}\n"],"names":["Theme"],"mappings":";;AAIiBA,QAAAA,QAAAA;AAAAA,CAAV,CAAUA,WAAV;AAOQA,SAAA,WAAoB,OAAO;AAAA,IACtC,qBAAqB;AAAA,EAAA;AAGVA,SAAA,UAAmB,OAAO;AAAA,IACrC,qBAAqB;AAAA,EAAA;AACvB,GAbeA,QAAAA,UAAAA,gBAAA,CAAA,EAAA;"}

package/dist/components/SidePanel/SidePanel.themes.js

@@ -0,0 +1,13 @@
+var Theme;
+((Theme2) => {
+  Theme2.getLight = () => ({
+    sidePanelBackground: "$deepBlue2"
+  });
+  Theme2.getDark = () => ({
+    sidePanelBackground: "$deepBlue3"
+  });
+})(Theme || (Theme = {}));
+export {
+  Theme
+};
+//# sourceMappingURL=SidePanel.themes.js.map

package/dist/components/SidePanel/SidePanel.themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.themes.js","sources":["../../../components/SidePanel/SidePanel.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    sidePanelBackground: Property.Color;\n  };\n\n  type Factory = (primaryColor?: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    sidePanelBackground: '$deepBlue2',\n  });\n\n  export const getDark: Factory = () => ({\n    sidePanelBackground: '$deepBlue3',\n  });\n}\n"],"names":["Theme"],"mappings":"AAIO,IAAU;AAAA,CAAV,CAAUA,WAAV;AAOQA,SAAA,WAAoB,OAAO;AAAA,IACtC,qBAAqB;AAAA,EAAA;AAGVA,SAAA,UAAmB,OAAO;AAAA,IACrC,qBAAqB;AAAA,EAAA;AACvB,GAbe,UAAA,QAAA,CAAA,EAAA;"}

package/dist/components/Skeleton/Skeleton.cjs

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const stitches_config = require("../../stitches.config.cjs");
+const pulse = stitches_config.keyframes({
+  "0%": { opacity: 0 },
+  "100%": { opacity: "100%" }
+});
+const Skeleton = stitches_config.styled("div", {
+  backgroundColor: "$skeletonBackground",
+  position: "relative",
+  overflow: "hidden",
+  borderRadius: "3px",
+  height: "auto",
+  width: "auto",
+  "&:not(:empty)": {
+    "& > *": {
+      visibility: "hidden",
+      display: "block"
+    },
+    maxWidth: "fit-content"
+  },
+  "&::after": {
+    animationName: `${pulse}`,
+    animationDuration: "500ms",
+    animationDirection: "alternate",
+    animationIterationCount: "infinite",
+    animationTimingFunction: "ease-in-out",
+    backgroundColor: "$skeletonAnimation",
+    borderRadius: "inherit",
+    bottom: 0,
+    content: '""',
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0
+  },
+  variants: {
+    variant: {
+      square: {
+        borderRadius: "$2"
+      },
+      circle: {
+        borderRadius: "$round"
+      },
+      badge: {
+        borderRadius: "$pill",
+        display: "inline-flex"
+      },
+      button: {
+        borderRadius: "$3",
+        display: "inline-flex"
+      },
+      text: {
+        "&:empty:before": {
+          content: '"\\00a0"'
+          // adds a space character before element
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "text"
+  }
+});
+exports.Skeleton = Skeleton;
+//# sourceMappingURL=Skeleton.cjs.map

package/dist/components/Skeleton/Skeleton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.cjs","sources":["../../../components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { keyframes, styled, VariantProps } from '../../stitches.config';\n\nconst pulse = keyframes({\n  '0%': { opacity: 0 },\n  '100%': { opacity: '100%' },\n});\n\nexport const Skeleton = styled('div', {\n  backgroundColor: '$skeletonBackground',\n  position: 'relative',\n  overflow: 'hidden',\n  borderRadius: '3px',\n  height: 'auto',\n  width: 'auto',\n  '&:not(:empty)': {\n    '& > *': {\n      visibility: 'hidden',\n      display: 'block',\n    },\n    maxWidth: 'fit-content',\n  },\n\n  '&::after': {\n    animationName: `${pulse}`,\n    animationDuration: '500ms',\n    animationDirection: 'alternate',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'ease-in-out',\n    backgroundColor: '$skeletonAnimation',\n    borderRadius: 'inherit',\n    bottom: 0,\n    content: '\"\"',\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n\n  variants: {\n    variant: {\n      square: {\n        borderRadius: '$2',\n      },\n      circle: {\n        borderRadius: '$round',\n      },\n      badge: {\n        borderRadius: '$pill',\n        display: 'inline-flex',\n      },\n      button: {\n        borderRadius: '$3',\n        display: 'inline-flex',\n      },\n      text: {\n        '&:empty:before': {\n          content: '\"\\\\00a0\"', // adds a space character before element\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'text',\n  },\n});\n\nexport type SkeletonVariants = VariantProps<typeof Skeleton>;\nexport type SkeletonProps = SkeletonVariants & NonNullable<unknown>;\n"],"names":["keyframes","styled"],"mappings":";;;AAEA,MAAM,QAAQA,gBAAAA,UAAU;AAAA,EACtB,MAAM,EAAE,SAAS,EAAA;AAAA,EACjB,QAAQ,EAAE,SAAS,OAAA;AACrB,CAAC;AAEM,MAAM,WAAWC,gBAAAA,OAAO,OAAO;AAAA,EACpC,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,iBAAiB;AAAA,IACf,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,EAAA;AAAA,EAGZ,YAAY;AAAA,IACV,eAAe,GAAG,KAAK;AAAA,IACvB,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,yBAAyB;AAAA,IACzB,yBAAyB;AAAA,IACzB,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAGP,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,MAEhB,QAAQ;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,MAEhB,OAAO;AAAA,QACL,cAAc;AAAA,QACd,SAAS;AAAA,MAAA;AAAA,MAEX,QAAQ;AAAA,QACN,cAAc;AAAA,QACd,SAAS;AAAA,MAAA;AAAA,MAEX,MAAM;AAAA,QACJ,kBAAkB;AAAA,UAChB,SAAS;AAAA;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC;;"}

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,66 @@
+import { styled, keyframes } from "../../stitches.config.js";
+const pulse = keyframes({
+  "0%": { opacity: 0 },
+  "100%": { opacity: "100%" }
+});
+const Skeleton = styled("div", {
+  backgroundColor: "$skeletonBackground",
+  position: "relative",
+  overflow: "hidden",
+  borderRadius: "3px",
+  height: "auto",
+  width: "auto",
+  "&:not(:empty)": {
+    "& > *": {
+      visibility: "hidden",
+      display: "block"
+    },
+    maxWidth: "fit-content"
+  },
+  "&::after": {
+    animationName: `${pulse}`,
+    animationDuration: "500ms",
+    animationDirection: "alternate",
+    animationIterationCount: "infinite",
+    animationTimingFunction: "ease-in-out",
+    backgroundColor: "$skeletonAnimation",
+    borderRadius: "inherit",
+    bottom: 0,
+    content: '""',
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0
+  },
+  variants: {
+    variant: {
+      square: {
+        borderRadius: "$2"
+      },
+      circle: {
+        borderRadius: "$round"
+      },
+      badge: {
+        borderRadius: "$pill",
+        display: "inline-flex"
+      },
+      button: {
+        borderRadius: "$3",
+        display: "inline-flex"
+      },
+      text: {
+        "&:empty:before": {
+          content: '"\\00a0"'
+          // adds a space character before element
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "text"
+  }
+});
+export {
+  Skeleton
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { keyframes, styled, VariantProps } from '../../stitches.config';\n\nconst pulse = keyframes({\n  '0%': { opacity: 0 },\n  '100%': { opacity: '100%' },\n});\n\nexport const Skeleton = styled('div', {\n  backgroundColor: '$skeletonBackground',\n  position: 'relative',\n  overflow: 'hidden',\n  borderRadius: '3px',\n  height: 'auto',\n  width: 'auto',\n  '&:not(:empty)': {\n    '& > *': {\n      visibility: 'hidden',\n      display: 'block',\n    },\n    maxWidth: 'fit-content',\n  },\n\n  '&::after': {\n    animationName: `${pulse}`,\n    animationDuration: '500ms',\n    animationDirection: 'alternate',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'ease-in-out',\n    backgroundColor: '$skeletonAnimation',\n    borderRadius: 'inherit',\n    bottom: 0,\n    content: '\"\"',\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n\n  variants: {\n    variant: {\n      square: {\n        borderRadius: '$2',\n      },\n      circle: {\n        borderRadius: '$round',\n      },\n      badge: {\n        borderRadius: '$pill',\n        display: 'inline-flex',\n      },\n      button: {\n        borderRadius: '$3',\n        display: 'inline-flex',\n      },\n      text: {\n        '&:empty:before': {\n          content: '\"\\\\00a0\"', // adds a space character before element\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'text',\n  },\n});\n\nexport type SkeletonVariants = VariantProps<typeof Skeleton>;\nexport type SkeletonProps = SkeletonVariants & NonNullable<unknown>;\n"],"names":[],"mappings":";AAEA,MAAM,QAAQ,UAAU;AAAA,EACtB,MAAM,EAAE,SAAS,EAAA;AAAA,EACjB,QAAQ,EAAE,SAAS,OAAA;AACrB,CAAC;AAEM,MAAM,WAAW,OAAO,OAAO;AAAA,EACpC,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,iBAAiB;AAAA,IACf,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,EAAA;AAAA,EAGZ,YAAY;AAAA,IACV,eAAe,GAAG,KAAK;AAAA,IACvB,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,yBAAyB;AAAA,IACzB,yBAAyB;AAAA,IACzB,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAGP,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,MAEhB,QAAQ;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,MAEhB,OAAO;AAAA,QACL,cAAc;AAAA,QACd,SAAS;AAAA,MAAA;AAAA,MAEX,QAAQ;AAAA,QACN,cAAc;AAAA,QACd,SAAS;AAAA,MAAA;AAAA,MAEX,MAAM;AAAA,QACJ,kBAAkB;AAAA,UAChB,SAAS;AAAA;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC;"}

package/dist/components/Skeleton/Skeleton.themes.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+exports.Theme = void 0;
+((Theme2) => {
+  Theme2.getLight = () => ({
+    skeletonBackground: "$slate4",
+    skeletonAnimation: "$slate6"
+  });
+  Theme2.getDark = () => ({
+    skeletonBackground: "$deepBlue3",
+    skeletonAnimation: "$deepBlue4"
+  });
+})(exports.Theme || (exports.Theme = {}));
+//# sourceMappingURL=Skeleton.themes.cjs.map

package/dist/components/Skeleton/Skeleton.themes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.themes.cjs","sources":["../../../components/Skeleton/Skeleton.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    skeletonBackground: Property.Color;\n    skeletonAnimation: Property.Color;\n  };\n\n  type Factory = (primaryColor?: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    skeletonBackground: '$slate4',\n    skeletonAnimation: '$slate6',\n  });\n\n  export const getDark: Factory = () => ({\n    skeletonBackground: '$deepBlue3',\n    skeletonAnimation: '$deepBlue4',\n  });\n}\n"],"names":["Theme"],"mappings":";;AAIiBA,QAAAA,QAAAA;AAAAA,CAAV,CAAUA,WAAV;AAQQA,SAAA,WAAoB,OAAO;AAAA,IACtC,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,EAAA;AAGRA,SAAA,UAAmB,OAAO;AAAA,IACrC,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,EAAA;AACrB,GAhBeA,QAAAA,UAAAA,gBAAA,CAAA,EAAA;"}

package/dist/components/Skeleton/Skeleton.themes.js

@@ -0,0 +1,15 @@
+var Theme;
+((Theme2) => {
+  Theme2.getLight = () => ({
+    skeletonBackground: "$slate4",
+    skeletonAnimation: "$slate6"
+  });
+  Theme2.getDark = () => ({
+    skeletonBackground: "$deepBlue3",
+    skeletonAnimation: "$deepBlue4"
+  });
+})(Theme || (Theme = {}));
+export {
+  Theme
+};
+//# sourceMappingURL=Skeleton.themes.js.map

package/dist/components/Skeleton/Skeleton.themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.themes.js","sources":["../../../components/Skeleton/Skeleton.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    skeletonBackground: Property.Color;\n    skeletonAnimation: Property.Color;\n  };\n\n  type Factory = (primaryColor?: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    skeletonBackground: '$slate4',\n    skeletonAnimation: '$slate6',\n  });\n\n  export const getDark: Factory = () => ({\n    skeletonBackground: '$deepBlue3',\n    skeletonAnimation: '$deepBlue4',\n  });\n}\n"],"names":["Theme"],"mappings":"AAIO,IAAU;AAAA,CAAV,CAAUA,WAAV;AAQQA,SAAA,WAAoB,OAAO;AAAA,IACtC,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,EAAA;AAGRA,SAAA,UAAmB,OAAO;AAAA,IACrC,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,EAAA;AACrB,GAhBe,UAAA,QAAA,CAAA,EAAA;"}

package/dist/components/Switch/Switch.cjs

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const SwitchPrimitive = require("@radix-ui/react-switch");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const Elevation = require("../Elevation/Elevation.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const SwitchPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SwitchPrimitive);
+const THUMB_DIAMETER = 14;
+const LARGE_RATIO = 1.5;
+const THUMB_GAP = 2;
+const ROOT_WIDTH = 32;
+const ROOT_HEIGHT = 18;
+const StyledThumb = stitches_config.styled(SwitchPrimitive__namespace.Thumb, {
+  position: "absolute",
+  left: 0,
+  width: THUMB_DIAMETER,
+  height: THUMB_DIAMETER,
+  backgroundColor: "$switchThumb",
+  borderRadius: "$round",
+  boxShadow: "rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px;",
+  transition: "transform 100ms cubic-bezier(0.22, 1, 0.36, 1)",
+  transform: `translateX(${THUMB_GAP}px)`,
+  willChange: "transform",
+  '&[data-state="checked"]': {
+    transform: `translateX(${ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER}px)`
+  }
+});
+const StyledSwitch = stitches_config.styled(SwitchPrimitive__namespace.Root, {
+  all: "unset",
+  boxSizing: "border-box",
+  userSelect: "none",
+  "&::before": {
+    boxSizing: "border-box"
+  },
+  "&::after": {
+    boxSizing: "border-box"
+  },
+  // Reset
+  alignItems: "center",
+  display: "inline-flex",
+  justifyContent: "center",
+  lineHeight: "1",
+  margin: "0",
+  outline: "none",
+  WebkitTapHighlightColor: "rgba(0,0,0,0)",
+  backgroundColor: "$switchBackground",
+  borderRadius: "$pill",
+  position: "relative",
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer",
+      [`& ${StyledThumb}`]: {
+        ...Elevation.elevationVariants[1]
+      }
+    }
+  },
+  "&:focus": {
+    outline: "2px solid $switchFocusBorder",
+    [`& ${StyledThumb}`]: {
+      ...Elevation.elevationVariants[2]
+    }
+  },
+  "&:disabled": {
+    pointerEvents: "none",
+    opacity: 0.38
+  },
+  '&[data-state="checked"]': {
+    backgroundColor: "$switchActiveBackground"
+  },
+  variants: {
+    size: {
+      "1": {
+        width: ROOT_WIDTH,
+        height: ROOT_HEIGHT,
+        m: "$2"
+      },
+      "2": {
+        width: ROOT_WIDTH * LARGE_RATIO,
+        height: ROOT_HEIGHT * LARGE_RATIO,
+        [`& ${StyledThumb}`]: {
+          width: THUMB_DIAMETER * LARGE_RATIO,
+          height: THUMB_DIAMETER * LARGE_RATIO,
+          transform: `translateX(${LARGE_RATIO * THUMB_GAP})`,
+          '&[data-state="checked"]': {
+            transform: `translateX(${LARGE_RATIO * (ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER)}px)`
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "1"
+  }
+});
+const Switch = React.forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledSwitch, { ...props, ref: forwardedRef, children: /* @__PURE__ */ jsxRuntime.jsx(StyledThumb, {}) })
+);
+exports.Switch = Switch;
+//# sourceMappingURL=Switch.cjs.map

package/dist/components/Switch/Switch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.cjs","sources":["../../../components/Switch/Switch.tsx"],"sourcesContent":["import * as SwitchPrimitive from '@radix-ui/react-switch';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst THUMB_DIAMETER = 14; // @FIXME: shouldn't this size be part of theme ?\nconst LARGE_RATIO = 1.5;\nconst THUMB_GAP = 2; // Gap between thumb and background\nconst ROOT_WIDTH = 32;\nconst ROOT_HEIGHT = 18;\n\n// COMPONENTS\nconst StyledThumb = styled(SwitchPrimitive.Thumb, {\n  position: 'absolute',\n  left: 0,\n  width: THUMB_DIAMETER,\n  height: THUMB_DIAMETER,\n  backgroundColor: '$switchThumb',\n  borderRadius: '$round',\n  boxShadow: 'rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px;',\n  transition: 'transform 100ms cubic-bezier(0.22, 1, 0.36, 1)',\n  transform: `translateX(${THUMB_GAP}px)`,\n  willChange: 'transform',\n\n  '&[data-state=\"checked\"]': {\n    transform: `translateX(${ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER}px)`,\n  },\n});\n\nconst StyledSwitch = styled(SwitchPrimitive.Root, {\n  all: 'unset',\n  boxSizing: 'border-box',\n  userSelect: 'none',\n  '&::before': {\n    boxSizing: 'border-box',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n  },\n\n  // Reset\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  backgroundColor: '$switchBackground',\n  borderRadius: '$pill',\n  position: 'relative',\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      [`& ${StyledThumb}`]: {\n        ...elevationVariants[1],\n      },\n    },\n  },\n  '&:focus': {\n    outline: '2px solid $switchFocusBorder',\n    [`& ${StyledThumb}`]: {\n      ...elevationVariants[2],\n    },\n  },\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.38,\n  },\n  '&[data-state=\"checked\"]': {\n    backgroundColor: '$switchActiveBackground',\n  },\n\n  variants: {\n    size: {\n      '1': {\n        width: ROOT_WIDTH,\n        height: ROOT_HEIGHT,\n        m: '$2',\n      },\n      '2': {\n        width: ROOT_WIDTH * LARGE_RATIO,\n        height: ROOT_HEIGHT * LARGE_RATIO,\n        [`& ${StyledThumb}`]: {\n          width: THUMB_DIAMETER * LARGE_RATIO,\n          height: THUMB_DIAMETER * LARGE_RATIO,\n          transform: `translateX(${LARGE_RATIO * THUMB_GAP})`,\n\n          '&[data-state=\"checked\"]': {\n            transform: `translateX(${LARGE_RATIO * (ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER)}px)`,\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: '1',\n  },\n});\n\nexport type SwitchVariants = VariantProps<typeof StyledSwitch>;\ntype SwitchPrimitiveProps = Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, 'as'>;\nexport type SwitchProps = SwitchPrimitiveProps & SwitchVariants & { css?: CSS };\n\nexport const Switch = React.forwardRef<React.ElementRef<typeof StyledSwitch>, SwitchProps>(\n  (props, forwardedRef) => (\n    <StyledSwitch {...props} ref={forwardedRef}>\n      <StyledThumb />\n    </StyledSwitch>\n  )\n);\n"],"names":["styled","SwitchPrimitive","elevationVariants","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,iBAAiB;AACvB,MAAM,cAAc;AACpB,MAAM,YAAY;AAClB,MAAM,aAAa;AACnB,MAAM,cAAc;AAGpB,MAAM,cAAcA,gBAAAA,OAAOC,2BAAgB,OAAO;AAAA,EAChD,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW,cAAc,SAAS;AAAA,EAClC,YAAY;AAAA,EAEZ,2BAA2B;AAAA,IACzB,WAAW,cAAc,aAAa,YAAY,cAAc;AAAA,EAAA;AAEpE,CAAC;AAED,MAAM,eAAeD,gBAAAA,OAAOC,2BAAgB,MAAM;AAAA,EAChD,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,IACX,WAAW;AAAA,EAAA;AAAA,EAEb,YAAY;AAAA,IACV,WAAW;AAAA,EAAA;AAAA;AAAA,EAIb,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,yBAAyB;AAAA,EAEzB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,IACR,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,CAAC,KAAK,WAAW,EAAE,GAAG;AAAA,QACpB,GAAGC,UAAAA,kBAAkB,CAAC;AAAA,MAAA;AAAA,IACxB;AAAA,EACF;AAAA,EAEF,WAAW;AAAA,IACT,SAAS;AAAA,IACT,CAAC,KAAK,WAAW,EAAE,GAAG;AAAA,MACpB,GAAGA,UAAAA,kBAAkB,CAAC;AAAA,IAAA;AAAA,EACxB;AAAA,EAEF,cAAc;AAAA,IACZ,eAAe;AAAA,IACf,SAAS;AAAA,EAAA;AAAA,EAEX,2BAA2B;AAAA,IACzB,iBAAiB;AAAA,EAAA;AAAA,EAGnB,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,KAAK;AAAA,QACH,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,MAEL,KAAK;AAAA,QACH,OAAO,aAAa;AAAA,QACpB,QAAQ,cAAc;AAAA,QACtB,CAAC,KAAK,WAAW,EAAE,GAAG;AAAA,UACpB,OAAO,iBAAiB;AAAA,UACxB,QAAQ,iBAAiB;AAAA,UACzB,WAAW,cAAc,cAAc,SAAS;AAAA,UAEhD,2BAA2B;AAAA,YACzB,WAAW,cAAc,eAAe,aAAa,YAAY,eAAe;AAAA,UAAA;AAAA,QAClF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC;AAMM,MAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,OAAO,iBACNC,+BAAC,cAAA,EAAc,GAAG,OAAO,KAAK,cAC5B,UAAAA,2BAAAA,IAAC,aAAA,CAAA,CAAY,EAAA,CACf;AAEJ;;"}