@traefik-labs/faency 12.2.1 → 12.2.3

package/dist/components/SidePanel/SidePanel.cjs

@@ -1,129 +1,110 @@
-"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 require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_stitches_config = require("../../stitches.config.cjs");
+const require_IconButton = require("../IconButton/IconButton.cjs");
+const require_Overlay = require("../Overlay.cjs");
+let _radix_ui_react_icons = require("@radix-ui/react-icons");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
+_radix_ui_react_dialog = require_runtime.__toESM(_radix_ui_react_dialog, 1);
+let _radix_ui_react_visually_hidden = require("@radix-ui/react-visually-hidden");
+//#region components/SidePanel/SidePanel.tsx
+var fadeIn = require_stitches_config.keyframes({
+	from: { opacity: "0" },
+	to: { opacity: "1" }
 });
-const fadeOut = stitches_config.keyframes({
-  from: { opacity: "1" },
-  to: { opacity: "0" }
+var fadeOut = require_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)`
-  }
+var SidePanelOverlay = require_stitches_config.styled(_radix_ui_react_dialog.Overlay, require_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)" }
+var slideIn = require_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" }
+var slideOut = require_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"
-  }
+var StyledContent = require_stitches_config.styled(_radix_ui_react_dialog.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"
+var StyledCloseButton = require_stitches_config.styled(_radix_ui_react_dialog.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, {})
-    ] })
-  ] }) })
-);
+var SidePanelCloseIconButton = react.default.forwardRef((props, forwardedRef) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCloseButton, {
+	asChild: true,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+		ref: forwardedRef,
+		css: { color: "$hiContrast" },
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_icons.Cross1Icon, {})
+	})
+}));
+var SidePanel = react.default.forwardRef(({ description, noOverlay = false, noCloseIcon = false, children, onOpenChange, open = false, defaultOpen = false, ...props }, forwardedRef) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Root, {
+	open,
+	onOpenChange,
+	defaultOpen,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [!noOverlay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidePanelOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledContent, {
+		...props,
+		ref: forwardedRef,
+		children: [
+			description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_visually_hidden.VisuallyHidden, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Description, { children: description })
+			}) : null,
+			children,
+			!noCloseIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidePanelCloseIconButton, {})
+		]
+	})] })
+}));
+//#endregion
 exports.SidePanel = SidePanel;
-//# sourceMappingURL=SidePanel.cjs.map
+
+//# sourceMappingURL=SidePanel.cjs.map

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

@@ -1 +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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"}
+{"version":3,"file":"SidePanel.cjs","names":[],"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"],"mappings":";;;;;;;;;;;;AASA,IAAM,SAAS,wBAAA,UAAU;CACvB,MAAM,EAAE,SAAS,KAAK;CACtB,IAAI,EAAE,SAAS,KAAK;CACrB,CAAC;AAEF,IAAM,UAAU,wBAAA,UAAU;CACxB,MAAM,EAAE,SAAS,KAAK;CACtB,IAAI,EAAE,SAAS,KAAK;CACrB,CAAC;AAEF,IAAM,mBAAmB,wBAAA,OAAO,uBAAgB,SAAS,gBAAA,eAAe;CACtE,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;CAEN,0BAAwB,EACtB,WAAW,GAAG,OAAO,wCACtB;CAED,4BAA0B,EACxB,WAAW,GAAG,QAAQ,wCACvB;CACF,CAAC;AAEF,IAAM,UAAU,wBAAA,UAAU;CACxB,MAAM,EAAE,WAAW,oBAAoB;CACvC,IAAI,EAAE,WAAW,sBAAsB;CACxC,CAAC;AAEF,IAAM,WAAW,wBAAA,UAAU;CACzB,MAAM,EAAE,WAAW,sBAAsB;CACzC,IAAI,EAAE,WAAW,oBAAoB;CACtC,CAAC;AAEF,IAAM,gBAAgB,wBAAA,OAAO,uBAAgB,SAAS;CACpD,iBAAiB;CACjB,WAAW;CACX,UAAU;CACV,KAAK;CACL,QAAQ;CACR,OAAO;CACP,GAAG;CAEH,0BAAwB,EACtB,WAAW,GAAG,QAAQ,wCACvB;CAED,4BAA0B,EACxB,WAAW,GAAG,SAAS,wCACxB;CAED,UAAU,EACR,MAAM;EACJ,KAAK;GACH,kBAAkB;GAClB,OAAO;GACP,QAAQ;GACR,QAAQ;GACT;EACD,OAAO;GACL,kBAAkB;GAClB,OAAO;GACP,UAAU;GACX;EACD,QAAQ;GACN,kBAAkB;GAClB,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,KAAK;GACN;EACD,MAAM;GACJ,kBAAkB;GAClB,MAAM;GACN,UAAU;GACX;EACF,EACF;CAED,iBAAiB,EACf,MAAM,SACP;CACF,CAAC;AAEF,IAAM,oBAAoB,wBAAA,OAAO,uBAAgB,OAAO;CACtD,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;CACT,CAAC;AAMF,IAAM,2BAA2B,MAAA,QAAM,YAGpC,OAAO,iBACR,iBAAA,GAAA,kBAAA,KAAC,mBAAD;CAAmB,SAAA;WACjB,iBAAA,GAAA,kBAAA,KAAC,mBAAA,YAAD;EAAY,KAAK;EAAc,KAAK,EAAE,OAAO,eAAe;EAAE,GAAI;YAChE,iBAAA,GAAA,kBAAA,KAAC,sBAAA,YAAD,EAAc,CAAA;EACH,CAAA;CACK,CAAA,CACpB;AAeF,IAAa,YAAY,MAAA,QAAM,YAE3B,EACE,aACA,YAAY,OACZ,cAAc,OACd,UACA,cACA,OAAO,OACP,cAAc,OACd,GAAG,SAEL,iBAEA,iBAAA,GAAA,kBAAA,KAAC,uBAAgB,MAAjB;CAA4B;CAAoB;CAA2B;WACzE,iBAAA,GAAA,kBAAA,MAAC,uBAAgB,QAAjB,EAAA,UAAA,CACG,CAAC,aAAa,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAoB,CAAA,EACnC,iBAAA,GAAA,kBAAA,MAAC,eAAD;EAAe,GAAI;EAAO,KAAK;YAA/B;GACG,cACC,iBAAA,GAAA,kBAAA,KAAC,gCAAA,gBAAD;IAAgB,SAAA;cACd,iBAAA,GAAA,kBAAA,KAAC,uBAAgB,aAAjB,EAAA,UAA8B,aAA0C,CAAA;IACzD,CAAA,GACf;GACH;GACA,CAAC,eAAe,iBAAA,GAAA,kBAAA,KAAC,0BAAD,EAA4B,CAAA;GAC/B;IACO,EAAA,CAAA;CACJ,CAAA,CAE1B"}

package/dist/components/SidePanel/SidePanel.js

@@ -1,112 +1,107 @@
+import { keyframes, styled } from "../../stitches.config.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { overlayStyles } from "../Overlay.js";
+import { Cross1Icon } from "@radix-ui/react-icons";
+import React from "react";
 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" }
+//#region components/SidePanel/SidePanel.tsx
+var fadeIn = keyframes({
+	from: { opacity: "0" },
+	to: { opacity: "1" }
 });
-const fadeOut = keyframes({
-  from: { opacity: "1" },
-  to: { opacity: "0" }
+var 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)`
-  }
+var 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)" }
+var slideIn = keyframes({
+	from: { transform: "$$transformValue" },
+	to: { transform: "translate3d(0,0,0)" }
 });
-const slideOut = keyframes({
-  from: { transform: "translate3d(0,0,0)" },
-  to: { transform: "$$transformValue" }
+var 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"
-  }
+var 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"
+var 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
+var SidePanelCloseIconButton = React.forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(StyledCloseButton, {
+	asChild: true,
+	children: /* @__PURE__ */ jsx(IconButton, {
+		ref: forwardedRef,
+		css: { color: "$hiContrast" },
+		...props,
+		children: /* @__PURE__ */ jsx(Cross1Icon, {})
+	})
+}));
+var 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, {})
+		]
+	})] })
+}));
+//#endregion
+export { SidePanel };
+
+//# sourceMappingURL=SidePanel.js.map

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

@@ -1 +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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"}
+{"version":3,"file":"SidePanel.js","names":[],"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"],"mappings":";;;;;;;;;AASA,IAAM,SAAS,UAAU;CACvB,MAAM,EAAE,SAAS,KAAK;CACtB,IAAI,EAAE,SAAS,KAAK;CACrB,CAAC;AAEF,IAAM,UAAU,UAAU;CACxB,MAAM,EAAE,SAAS,KAAK;CACtB,IAAI,EAAE,SAAS,KAAK;CACrB,CAAC;AAEF,IAAM,mBAAmB,OAAO,gBAAgB,SAAS,eAAe;CACtE,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;CAEN,0BAAwB,EACtB,WAAW,GAAG,OAAO,wCACtB;CAED,4BAA0B,EACxB,WAAW,GAAG,QAAQ,wCACvB;CACF,CAAC;AAEF,IAAM,UAAU,UAAU;CACxB,MAAM,EAAE,WAAW,oBAAoB;CACvC,IAAI,EAAE,WAAW,sBAAsB;CACxC,CAAC;AAEF,IAAM,WAAW,UAAU;CACzB,MAAM,EAAE,WAAW,sBAAsB;CACzC,IAAI,EAAE,WAAW,oBAAoB;CACtC,CAAC;AAEF,IAAM,gBAAgB,OAAO,gBAAgB,SAAS;CACpD,iBAAiB;CACjB,WAAW;CACX,UAAU;CACV,KAAK;CACL,QAAQ;CACR,OAAO;CACP,GAAG;CAEH,0BAAwB,EACtB,WAAW,GAAG,QAAQ,wCACvB;CAED,4BAA0B,EACxB,WAAW,GAAG,SAAS,wCACxB;CAED,UAAU,EACR,MAAM;EACJ,KAAK;GACH,kBAAkB;GAClB,OAAO;GACP,QAAQ;GACR,QAAQ;GACT;EACD,OAAO;GACL,kBAAkB;GAClB,OAAO;GACP,UAAU;GACX;EACD,QAAQ;GACN,kBAAkB;GAClB,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,KAAK;GACN;EACD,MAAM;GACJ,kBAAkB;GAClB,MAAM;GACN,UAAU;GACX;EACF,EACF;CAED,iBAAiB,EACf,MAAM,SACP;CACF,CAAC;AAEF,IAAM,oBAAoB,OAAO,gBAAgB,OAAO;CACtD,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;CACT,CAAC;AAMF,IAAM,2BAA2B,MAAM,YAGpC,OAAO,iBACR,oBAAC,mBAAD;CAAmB,SAAA;WACjB,oBAAC,YAAD;EAAY,KAAK;EAAc,KAAK,EAAE,OAAO,eAAe;EAAE,GAAI;YAChE,oBAAC,YAAD,EAAc,CAAA;EACH,CAAA;CACK,CAAA,CACpB;AAeF,IAAa,YAAY,MAAM,YAE3B,EACE,aACA,YAAY,OACZ,cAAc,OACd,UACA,cACA,OAAO,OACP,cAAc,OACd,GAAG,SAEL,iBAEA,oBAAC,gBAAgB,MAAjB;CAA4B;CAAoB;CAA2B;WACzE,qBAAC,gBAAgB,QAAjB,EAAA,UAAA,CACG,CAAC,aAAa,oBAAC,kBAAD,EAAoB,CAAA,EACnC,qBAAC,eAAD;EAAe,GAAI;EAAO,KAAK;YAA/B;GACG,cACC,oBAAC,gBAAD;IAAgB,SAAA;cACd,oBAAC,gBAAgB,aAAjB,EAAA,UAA8B,aAA0C,CAAA;IACzD,CAAA,GACf;GACH;GACA,CAAC,eAAe,oBAAC,0BAAD,EAA4B,CAAA;GAC/B;IACO,EAAA,CAAA;CACJ,CAAA,CAE1B"}

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

@@ -1,12 +1,15 @@
-"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
+//#region components/SidePanel/SidePanel.themes.ts
+var Theme;
+(function(_Theme) {
+	_Theme.getLight = () => ({ sidePanelBackground: "$deepBlue2" });
+	_Theme.getDark = () => ({ sidePanelBackground: "$deepBlue3" });
+})(Theme || (Theme = {}));
+//#endregion
+Object.defineProperty(exports, "Theme", {
+	enumerable: true,
+	get: function() {
+		return Theme;
+	}
+});
+
+//# sourceMappingURL=SidePanel.themes.cjs.map

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

@@ -1 +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;"}
+{"version":3,"file":"SidePanel.themes.cjs","names":[],"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"],"mappings":";AAIO,IAAA;;AAOQ,QAAA,kBAA2B,EACtC,qBAAqB,cACtB;AAEY,QAAA,iBAA0B,EACrC,qBAAqB,cACtB;yBACF"}

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

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

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

@@ -1 +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;"}
+{"version":3,"file":"SidePanel.themes.js","names":[],"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"],"mappings":";AAIO,IAAA;;AAOQ,QAAA,kBAA2B,EACtC,qBAAqB,cACtB;AAEY,QAAA,iBAA0B,EACrC,qBAAqB,cACtB;yBACF"}