@traefik-labs/faency 12.0.7

package/dist/components/DateTimePickerInput/DateTimePickerInput.cjs

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("@floating-ui/react");
+const reactIcons = require("@radix-ui/react-icons");
+const dateFns = require("date-fns");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const Input = require("../Input/Input.cjs");
+const DateTimePicker = require("../DateTimePicker/DateTimePicker.cjs");
+const Card = require("../Card/Card.cjs");
+const StyledWrapper = stitches_config.styled("div", {
+  display: "flex",
+  position: "relative",
+  width: "100%",
+  "& .firefox-patch": {
+    display: "none"
+  },
+  "@supports (-moz-appearance: none)": {
+    "& .firefox-patch": {
+      display: "block",
+      width: "20px",
+      height: "20px",
+      position: "absolute",
+      right: "17px",
+      top: "6px",
+      background: "$inputBg",
+      "&::before": {
+        boxSizing: "border-box",
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none"
+      },
+      "&::after": {
+        boxSizing: "border-box",
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none"
+      },
+      "&:focus-visible": {
+        "&::before": {
+          backgroundColor: "$inputFocusBg"
+        },
+        "&::after": {
+          backgroundColor: "$primary",
+          opacity: 0.15
+        }
+      }
+    },
+    "@hover": {
+      "&:hover .firefox-patch": {
+        "&::before": {
+          backgroundColor: "$inputHoverBg"
+        },
+        "&::after": {
+          backgroundColor: "$primary",
+          opacity: 0.05
+        }
+      }
+    }
+  }
+});
+const DateTimePickerInput = React.forwardRef(
+  ({
+    inputCSS,
+    inputProps,
+    onChange,
+    pickerCSS,
+    pickerPlacement,
+    showDatePresets,
+    showTimePicker,
+    ...pickerProps
+  }, fowardedRef) => {
+    const formatStr = "yyyy-MM-dd'T'HH:mm";
+    const arrowRef = React.useRef(null);
+    const [inputValue, setInputValue] = React.useState("");
+    const [selectedDates, onDatesChange] = React.useState([]);
+    const [isPickerOpen, setIsPickerOpen] = React.useState(false);
+    const { refs, floatingStyles, context } = react.useFloating({
+      open: isPickerOpen,
+      onOpenChange: setIsPickerOpen,
+      placement: pickerPlacement,
+      middleware: [
+        react.offset(10),
+        react.flip(),
+        react.shift(),
+        react.arrow({
+          element: arrowRef
+        })
+      ],
+      whileElementsMounted: react.autoUpdate
+    });
+    const click = react.useClick(context);
+    const dismiss = react.useDismiss(context);
+    const role = react.useRole(context);
+    const { getReferenceProps, getFloatingProps } = react.useInteractions([click, dismiss, role]);
+    const { onClick: onFirefoxPatchClick } = getReferenceProps();
+    return /* @__PURE__ */ jsxRuntime.jsxs(StyledWrapper, { ref: fowardedRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input.Input,
+        {
+          startAdornment: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CalendarIcon, {}),
+          ...getReferenceProps(),
+          ...inputProps,
+          css: { "& input::-webkit-calendar-picker-indicator": { display: "none" }, ...inputCSS },
+          onChange: (evt) => {
+            const value = evt.currentTarget.value;
+            setInputValue(value);
+            try {
+              const newDates = value.split(",").map((d) => dateFns.parse(d.trim(), formatStr, /* @__PURE__ */ new Date()));
+              onDatesChange(newDates);
+              if (onChange) onChange(newDates);
+            } catch (err) {
+            }
+          },
+          ref: refs.setReference,
+          type: "datetime-local",
+          value: inputValue
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "firefox-patch",
+          onClick: onFirefoxPatchClick
+        }
+      ),
+      isPickerOpen && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, { context, initialFocus: -1, modal: false, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Card.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          DateTimePicker.DateTimePicker,
+          {
+            ...pickerProps,
+            css: pickerCSS,
+            onDatesChange: (d) => {
+              onDatesChange(d);
+              setInputValue(d.map((date) => dateFns.format(date, formatStr)).join(", "));
+              if (onChange) onChange(d);
+            },
+            onFastTravelClick: () => setIsPickerOpen(false),
+            onTimeButtonClick: () => setIsPickerOpen(false),
+            selectedDates,
+            showDatePresets,
+            showTimePicker
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.FloatingArrow, { ref: arrowRef, context, fill: "var(--colors-01dp)" })
+      ] }) })
+    ] });
+  }
+);
+exports.DateTimePickerInput = DateTimePickerInput;
+//# sourceMappingURL=DateTimePickerInput.cjs.map

package/dist/components/DateTimePickerInput/DateTimePickerInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePickerInput.cjs","sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  flip,\n  FloatingArrow,\n  FloatingFocusManager,\n  offset,\n  Placement,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n  display: 'flex',\n  position: 'relative',\n  width: '100%',\n\n  '& .firefox-patch': {\n    display: 'none',\n  },\n\n  '@supports (-moz-appearance: none)': {\n    '& .firefox-patch': {\n      display: 'block',\n      width: '20px',\n      height: '20px',\n      position: 'absolute',\n      right: '17px',\n      top: '6px',\n      background: '$inputBg',\n\n      '&::before': {\n        boxSizing: 'border-box',\n        content: '\"\"',\n        position: 'absolute',\n        inset: 0,\n        pointerEvents: 'none',\n      },\n      '&::after': {\n        boxSizing: 'border-box',\n        content: '\"\"',\n        position: 'absolute',\n        inset: 0,\n        pointerEvents: 'none',\n      },\n\n      '&:focus-visible': {\n        '&::before': {\n          backgroundColor: '$inputFocusBg',\n        },\n        '&::after': {\n          backgroundColor: '$primary',\n          opacity: 0.15,\n        },\n      },\n    },\n\n    '@hover': {\n      '&:hover .firefox-patch': {\n        '&::before': {\n          backgroundColor: '$inputHoverBg',\n        },\n        '&::after': {\n          backgroundColor: '$primary',\n          opacity: 0.05,\n        },\n      },\n    },\n  },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n  inputCSS?: CSS;\n  inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n  onChange?: (d: Date[]) => void;\n  pickerCSS?: CSS;\n  pickerPlacement?: Placement;\n  showDatePresets?: boolean;\n  showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n  React.ElementRef<typeof StyledWrapper>,\n  DateTimePickerInputProps\n>(\n  (\n    {\n      inputCSS,\n      inputProps,\n      onChange,\n      pickerCSS,\n      pickerPlacement,\n      showDatePresets,\n      showTimePicker,\n      ...pickerProps\n    },\n    fowardedRef,\n  ) => {\n    const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n    const arrowRef = useRef(null);\n\n    const [inputValue, setInputValue] = useState<string>('');\n    const [selectedDates, onDatesChange] = useState<Date[]>([]);\n    const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n    const { refs, floatingStyles, context } = useFloating({\n      open: isPickerOpen,\n      onOpenChange: setIsPickerOpen,\n      placement: pickerPlacement,\n      middleware: [\n        offset(10),\n        flip(),\n        shift(),\n        arrow({\n          element: arrowRef,\n        }),\n      ],\n      whileElementsMounted: autoUpdate,\n    });\n\n    const click = useClick(context);\n    const dismiss = useDismiss(context);\n    const role = useRole(context);\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\n    const { onClick: onFirefoxPatchClick } = getReferenceProps();\n\n    return (\n      <StyledWrapper ref={fowardedRef}>\n        <Input\n          startAdornment={<CalendarIcon />}\n          {...getReferenceProps()}\n          {...inputProps}\n          css={{ '& input::-webkit-calendar-picker-indicator': { display: 'none' }, ...inputCSS }}\n          onChange={(evt) => {\n            const value = evt.currentTarget.value;\n            setInputValue(value);\n            try {\n              const newDates = (value as string)\n                .split(',')\n                .map((d) => parse(d.trim(), formatStr, new Date()));\n              onDatesChange(newDates);\n              if (onChange) onChange(newDates);\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars\n            } catch (err) {\n              // empty\n            }\n          }}\n          ref={refs.setReference as Ref<InputHandle>}\n          type=\"datetime-local\"\n          value={inputValue}\n        />\n        <div\n          className=\"firefox-patch\"\n          onClick={onFirefoxPatchClick as MouseEventHandler<HTMLDivElement>}\n        />\n        {isPickerOpen && (\n          <FloatingFocusManager context={context} initialFocus={-1} modal={false}>\n            <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n              <Card>\n                <DateTimePicker\n                  {...pickerProps}\n                  css={pickerCSS}\n                  onDatesChange={(d) => {\n                    onDatesChange(d);\n                    setInputValue(d.map((date) => format(date, formatStr)).join(', '));\n                    if (onChange) onChange(d);\n                  }}\n                  onFastTravelClick={() => setIsPickerOpen(false)}\n                  onTimeButtonClick={() => setIsPickerOpen(false)}\n                  selectedDates={selectedDates}\n                  showDatePresets={showDatePresets}\n                  showTimePicker={showTimePicker}\n                />\n              </Card>\n              <FloatingArrow ref={arrowRef} context={context} fill=\"var(--colors-01dp)\" />\n            </div>\n          </FloatingFocusManager>\n        )}\n      </StyledWrapper>\n    );\n  },\n);\n"],"names":["styled","useRef","useState","useFloating","offset","flip","shift","arrow","autoUpdate","useClick","useDismiss","useRole","useInteractions","jsxs","jsx","Input","CalendarIcon","parse","FloatingFocusManager","Card","DateTimePicker","format","FloatingArrow"],"mappings":"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"}

package/dist/components/DateTimePickerInput/DateTimePickerInput.js

@@ -0,0 +1,154 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useFloating, autoUpdate, offset, flip, shift, arrow, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingArrow } from "@floating-ui/react";
+import { CalendarIcon } from "@radix-ui/react-icons";
+import { parse, format } from "date-fns";
+import React, { useRef, useState } from "react";
+import { styled } from "../../stitches.config.js";
+import { Input } from "../Input/Input.js";
+import { DateTimePicker } from "../DateTimePicker/DateTimePicker.js";
+import { Card } from "../Card/Card.js";
+const StyledWrapper = styled("div", {
+  display: "flex",
+  position: "relative",
+  width: "100%",
+  "& .firefox-patch": {
+    display: "none"
+  },
+  "@supports (-moz-appearance: none)": {
+    "& .firefox-patch": {
+      display: "block",
+      width: "20px",
+      height: "20px",
+      position: "absolute",
+      right: "17px",
+      top: "6px",
+      background: "$inputBg",
+      "&::before": {
+        boxSizing: "border-box",
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none"
+      },
+      "&::after": {
+        boxSizing: "border-box",
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none"
+      },
+      "&:focus-visible": {
+        "&::before": {
+          backgroundColor: "$inputFocusBg"
+        },
+        "&::after": {
+          backgroundColor: "$primary",
+          opacity: 0.15
+        }
+      }
+    },
+    "@hover": {
+      "&:hover .firefox-patch": {
+        "&::before": {
+          backgroundColor: "$inputHoverBg"
+        },
+        "&::after": {
+          backgroundColor: "$primary",
+          opacity: 0.05
+        }
+      }
+    }
+  }
+});
+const DateTimePickerInput = React.forwardRef(
+  ({
+    inputCSS,
+    inputProps,
+    onChange,
+    pickerCSS,
+    pickerPlacement,
+    showDatePresets,
+    showTimePicker,
+    ...pickerProps
+  }, fowardedRef) => {
+    const formatStr = "yyyy-MM-dd'T'HH:mm";
+    const arrowRef = useRef(null);
+    const [inputValue, setInputValue] = useState("");
+    const [selectedDates, onDatesChange] = useState([]);
+    const [isPickerOpen, setIsPickerOpen] = useState(false);
+    const { refs, floatingStyles, context } = useFloating({
+      open: isPickerOpen,
+      onOpenChange: setIsPickerOpen,
+      placement: pickerPlacement,
+      middleware: [
+        offset(10),
+        flip(),
+        shift(),
+        arrow({
+          element: arrowRef
+        })
+      ],
+      whileElementsMounted: autoUpdate
+    });
+    const click = useClick(context);
+    const dismiss = useDismiss(context);
+    const role = useRole(context);
+    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
+    const { onClick: onFirefoxPatchClick } = getReferenceProps();
+    return /* @__PURE__ */ jsxs(StyledWrapper, { ref: fowardedRef, children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          startAdornment: /* @__PURE__ */ jsx(CalendarIcon, {}),
+          ...getReferenceProps(),
+          ...inputProps,
+          css: { "& input::-webkit-calendar-picker-indicator": { display: "none" }, ...inputCSS },
+          onChange: (evt) => {
+            const value = evt.currentTarget.value;
+            setInputValue(value);
+            try {
+              const newDates = value.split(",").map((d) => parse(d.trim(), formatStr, /* @__PURE__ */ new Date()));
+              onDatesChange(newDates);
+              if (onChange) onChange(newDates);
+            } catch (err) {
+            }
+          },
+          ref: refs.setReference,
+          type: "datetime-local",
+          value: inputValue
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "firefox-patch",
+          onClick: onFirefoxPatchClick
+        }
+      ),
+      isPickerOpen && /* @__PURE__ */ jsx(FloatingFocusManager, { context, initialFocus: -1, modal: false, children: /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: [
+        /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(
+          DateTimePicker,
+          {
+            ...pickerProps,
+            css: pickerCSS,
+            onDatesChange: (d) => {
+              onDatesChange(d);
+              setInputValue(d.map((date) => format(date, formatStr)).join(", "));
+              if (onChange) onChange(d);
+            },
+            onFastTravelClick: () => setIsPickerOpen(false),
+            onTimeButtonClick: () => setIsPickerOpen(false),
+            selectedDates,
+            showDatePresets,
+            showTimePicker
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FloatingArrow, { ref: arrowRef, context, fill: "var(--colors-01dp)" })
+      ] }) })
+    ] });
+  }
+);
+export {
+  DateTimePickerInput
+};
+//# sourceMappingURL=DateTimePickerInput.js.map

package/dist/components/DateTimePickerInput/DateTimePickerInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePickerInput.js","sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  flip,\n  FloatingArrow,\n  FloatingFocusManager,\n  offset,\n  Placement,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n  display: 'flex',\n  position: 'relative',\n  width: '100%',\n\n  '& .firefox-patch': {\n    display: 'none',\n  },\n\n  '@supports (-moz-appearance: none)': {\n    '& .firefox-patch': {\n      display: 'block',\n      width: '20px',\n      height: '20px',\n      position: 'absolute',\n      right: '17px',\n      top: '6px',\n      background: '$inputBg',\n\n      '&::before': {\n        boxSizing: 'border-box',\n        content: '\"\"',\n        position: 'absolute',\n        inset: 0,\n        pointerEvents: 'none',\n      },\n      '&::after': {\n        boxSizing: 'border-box',\n        content: '\"\"',\n        position: 'absolute',\n        inset: 0,\n        pointerEvents: 'none',\n      },\n\n      '&:focus-visible': {\n        '&::before': {\n          backgroundColor: '$inputFocusBg',\n        },\n        '&::after': {\n          backgroundColor: '$primary',\n          opacity: 0.15,\n        },\n      },\n    },\n\n    '@hover': {\n      '&:hover .firefox-patch': {\n        '&::before': {\n          backgroundColor: '$inputHoverBg',\n        },\n        '&::after': {\n          backgroundColor: '$primary',\n          opacity: 0.05,\n        },\n      },\n    },\n  },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n  inputCSS?: CSS;\n  inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n  onChange?: (d: Date[]) => void;\n  pickerCSS?: CSS;\n  pickerPlacement?: Placement;\n  showDatePresets?: boolean;\n  showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n  React.ElementRef<typeof StyledWrapper>,\n  DateTimePickerInputProps\n>(\n  (\n    {\n      inputCSS,\n      inputProps,\n      onChange,\n      pickerCSS,\n      pickerPlacement,\n      showDatePresets,\n      showTimePicker,\n      ...pickerProps\n    },\n    fowardedRef,\n  ) => {\n    const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n    const arrowRef = useRef(null);\n\n    const [inputValue, setInputValue] = useState<string>('');\n    const [selectedDates, onDatesChange] = useState<Date[]>([]);\n    const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n    const { refs, floatingStyles, context } = useFloating({\n      open: isPickerOpen,\n      onOpenChange: setIsPickerOpen,\n      placement: pickerPlacement,\n      middleware: [\n        offset(10),\n        flip(),\n        shift(),\n        arrow({\n          element: arrowRef,\n        }),\n      ],\n      whileElementsMounted: autoUpdate,\n    });\n\n    const click = useClick(context);\n    const dismiss = useDismiss(context);\n    const role = useRole(context);\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\n    const { onClick: onFirefoxPatchClick } = getReferenceProps();\n\n    return (\n      <StyledWrapper ref={fowardedRef}>\n        <Input\n          startAdornment={<CalendarIcon />}\n          {...getReferenceProps()}\n          {...inputProps}\n          css={{ '& input::-webkit-calendar-picker-indicator': { display: 'none' }, ...inputCSS }}\n          onChange={(evt) => {\n            const value = evt.currentTarget.value;\n            setInputValue(value);\n            try {\n              const newDates = (value as string)\n                .split(',')\n                .map((d) => parse(d.trim(), formatStr, new Date()));\n              onDatesChange(newDates);\n              if (onChange) onChange(newDates);\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars\n            } catch (err) {\n              // empty\n            }\n          }}\n          ref={refs.setReference as Ref<InputHandle>}\n          type=\"datetime-local\"\n          value={inputValue}\n        />\n        <div\n          className=\"firefox-patch\"\n          onClick={onFirefoxPatchClick as MouseEventHandler<HTMLDivElement>}\n        />\n        {isPickerOpen && (\n          <FloatingFocusManager context={context} initialFocus={-1} modal={false}>\n            <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n              <Card>\n                <DateTimePicker\n                  {...pickerProps}\n                  css={pickerCSS}\n                  onDatesChange={(d) => {\n                    onDatesChange(d);\n                    setInputValue(d.map((date) => format(date, formatStr)).join(', '));\n                    if (onChange) onChange(d);\n                  }}\n                  onFastTravelClick={() => setIsPickerOpen(false)}\n                  onTimeButtonClick={() => setIsPickerOpen(false)}\n                  selectedDates={selectedDates}\n                  showDatePresets={showDatePresets}\n                  showTimePicker={showTimePicker}\n                />\n              </Card>\n              <FloatingArrow ref={arrowRef} context={context} fill=\"var(--colors-01dp)\" />\n            </div>\n          </FloatingFocusManager>\n        )}\n      </StyledWrapper>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/components/Dialog/Dialog.cjs

@@ -0,0 +1,93 @@
+"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 React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const Elevation = require("../Elevation/Elevation.cjs");
+const Overlay = require("../Overlay.cjs");
+const IconButton = require("../IconButton/IconButton.cjs");
+const Card = require("../Card/Card.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 DialogOverlay = stitches_config.styled(DialogPrimitive__namespace.Overlay, Overlay.overlayStyles, {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+});
+function Dialog({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props, children });
+}
+const StyledContent = stitches_config.styled(DialogPrimitive__namespace.Content, Card.Card, {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  minWidth: 200,
+  maxHeight: "85vh",
+  padding: "$4",
+  marginTop: "-5vh",
+  backgroundColor: "$dialogBackground",
+  boxShadow: "inset 0 0 0 1px $colors$deepBlue4",
+  borderRadius: "$3",
+  // animation: `${fadeIn} 125ms linear, ${moveDown} 125ms cubic-bezier(0.22, 1, 0.36, 1)`,
+  willChange: "transform",
+  overflow: "auto",
+  "&::before": {
+    boxShadow: "none"
+  },
+  "&:focus": {
+    outline: "none"
+  },
+  variants: {
+    elevation: Elevation.elevationVariants
+  },
+  defaultVariants: {
+    elevation: 5
+  }
+});
+const StyledCloseButton = stitches_config.styled(DialogPrimitive__namespace.Close, {
+  position: "absolute",
+  top: "$2",
+  right: "$2",
+  cursor: "pointer"
+});
+const DialogCloseIconButton = 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 DialogContent = React.forwardRef(({ children, ...props }, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsxs(StyledContent, { ...props, ref: forwardedRef, children: [
+  children,
+  /* @__PURE__ */ jsxRuntime.jsx(DialogCloseIconButton, {})
+] }));
+const DialogClosePrimitive = DialogPrimitive__namespace.Close;
+const DialogDescription = DialogPrimitive__namespace.Description;
+const DialogPortal = DialogPrimitive__namespace.Portal;
+const DialogTitle = DialogPrimitive__namespace.Title;
+const DialogTrigger = DialogPrimitive__namespace.Trigger;
+exports.Dialog = Dialog;
+exports.DialogCloseIconButton = DialogCloseIconButton;
+exports.DialogClosePrimitive = DialogClosePrimitive;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogPortal = DialogPortal;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
+exports.StyledContent = StyledContent;
+//# sourceMappingURL=Dialog.cjs.map

package/dist/components/Dialog/Dialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.cjs","sources":["../../../components/Dialog/Dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport React, { ComponentProps } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { elevationVariants } from '../Elevation/Elevation';\nimport { IconButton } from '../IconButton';\nimport { overlayStyles } from '../Overlay';\n\ntype DialogProps = React.ComponentProps<typeof DialogPrimitive.Root> & {\n  children: React.ReactNode;\n};\n\nexport const DialogOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {\n  position: 'fixed',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n});\n\nexport function Dialog({ children, ...props }: DialogProps) {\n  return <DialogPrimitive.Root {...props}>{children}</DialogPrimitive.Root>;\n}\n\nexport const StyledContent = styled(DialogPrimitive.Content, Card, {\n  position: 'fixed',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  minWidth: 200,\n  maxHeight: '85vh',\n  padding: '$4',\n  marginTop: '-5vh',\n  backgroundColor: '$dialogBackground',\n  boxShadow: 'inset 0 0 0 1px $colors$deepBlue4',\n  borderRadius: '$3',\n  // animation: `${fadeIn} 125ms linear, ${moveDown} 125ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  willChange: 'transform',\n  overflow: 'auto',\n\n  '&::before': {\n    boxShadow: 'none',\n  },\n\n  '&:focus': {\n    outline: 'none',\n  },\n\n  variants: {\n    elevation: elevationVariants,\n  },\n  defaultVariants: {\n    elevation: 5,\n  },\n});\n\nconst StyledCloseButton = styled(DialogPrimitive.Close, {\n  position: 'absolute',\n  top: '$2',\n  right: '$2',\n  cursor: 'pointer',\n});\n\ninterface DialogCloseButtonProps\n  extends VariantProps<typeof IconButton>,\n    ComponentProps<typeof IconButton> {}\nexport const DialogCloseIconButton = React.forwardRef<\n  React.ElementRef<typeof IconButton>,\n  DialogCloseButtonProps\n>((props, forwardedRef) => (\n  <StyledCloseButton asChild>\n    <IconButton ref={forwardedRef} css={{ color: '$hiContrast' }} {...props}>\n      <Cross1Icon />\n    </IconButton>\n  </StyledCloseButton>\n));\n\ntype DialogContentPrimitiveProps = React.ComponentProps<typeof DialogPrimitive.Content>;\ntype DialogContentProps = DialogContentPrimitiveProps &\n  VariantProps<typeof StyledContent> & { css?: CSS };\n\nexport const DialogContent = React.forwardRef<\n  React.ElementRef<typeof StyledContent>,\n  DialogContentProps\n>(({ children, ...props }, forwardedRef) => (\n  <StyledContent {...props} ref={forwardedRef}>\n    {children}\n    <DialogCloseIconButton />\n  </StyledContent>\n));\n\nexport const DialogClosePrimitive = DialogPrimitive.Close;\nexport const DialogDescription = DialogPrimitive.Description;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogTitle = DialogPrimitive.Title;\nexport const DialogTrigger = DialogPrimitive.Trigger;\n"],"names":["styled","DialogPrimitive","overlayStyles","Card","elevationVariants","jsx","IconButton","Cross1Icon","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,gBAAgBA,gBAAAA,OAAOC,2BAAgB,SAASC,QAAAA,eAAe;AAAA,EAC1E,UAAU;AAAA,EACV,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAEM,SAAS,OAAO,EAAE,UAAU,GAAG,SAAsB;AAC1D,wCAAQD,2BAAgB,MAAhB,EAAsB,GAAG,OAAQ,UAAS;AACpD;AAEO,MAAM,gBAAgBD,gBAAAA,OAAOC,2BAAgB,SAASE,KAAAA,MAAM;AAAA,EACjE,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,cAAc;AAAA;AAAA,EAEd,YAAY;AAAA,EACZ,UAAU;AAAA,EAEV,aAAa;AAAA,IACX,WAAW;AAAA,EAAA;AAAA,EAGb,WAAW;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAGX,UAAU;AAAA,IACR,WAAWC,UAAAA;AAAAA,EAAA;AAAA,EAEb,iBAAiB;AAAA,IACf,WAAW;AAAA,EAAA;AAEf,CAAC;AAED,MAAM,oBAAoBJ,gBAAAA,OAAOC,2BAAgB,OAAO;AAAA,EACtD,UAAU;AAAA,EACV,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AACV,CAAC;AAKM,MAAM,wBAAwB,MAAM,WAGzC,CAAC,OAAO,iBACRI,2BAAAA,IAAC,mBAAA,EAAkB,SAAO,MACxB,UAAAA,2BAAAA,IAACC,WAAAA,YAAA,EAAW,KAAK,cAAc,KAAK,EAAE,OAAO,cAAA,GAAkB,GAAG,OAChE,UAAAD,2BAAAA,IAACE,WAAAA,YAAA,CAAA,CAAW,EAAA,CACd,EAAA,CACF,CACD;AAMM,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,UAAU,GAAG,MAAA,GAAS,iBACzBC,2BAAAA,KAAC,eAAA,EAAe,GAAG,OAAO,KAAK,cAC5B,UAAA;AAAA,EAAA;AAAA,iCACA,uBAAA,CAAA,CAAsB;AAAA,GACzB,CACD;AAEM,MAAM,uBAAuBP,2BAAgB;AAC7C,MAAM,oBAAoBA,2BAAgB;AAC1C,MAAM,eAAeA,2BAAgB;AACrC,MAAM,cAAcA,2BAAgB;AACpC,MAAM,gBAAgBA,2BAAgB;;;;;;;;;;;"}

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Cross1Icon } from "@radix-ui/react-icons";
+import React from "react";
+import { styled } from "../../stitches.config.js";
+import { elevationVariants } from "../Elevation/Elevation.js";
+import { overlayStyles } from "../Overlay.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Card } from "../Card/Card.js";
+const DialogOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+});
+function Dialog({ children, ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props, children });
+}
+const StyledContent = styled(DialogPrimitive.Content, Card, {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  minWidth: 200,
+  maxHeight: "85vh",
+  padding: "$4",
+  marginTop: "-5vh",
+  backgroundColor: "$dialogBackground",
+  boxShadow: "inset 0 0 0 1px $colors$deepBlue4",
+  borderRadius: "$3",
+  // animation: `${fadeIn} 125ms linear, ${moveDown} 125ms cubic-bezier(0.22, 1, 0.36, 1)`,
+  willChange: "transform",
+  overflow: "auto",
+  "&::before": {
+    boxShadow: "none"
+  },
+  "&:focus": {
+    outline: "none"
+  },
+  variants: {
+    elevation: elevationVariants
+  },
+  defaultVariants: {
+    elevation: 5
+  }
+});
+const StyledCloseButton = styled(DialogPrimitive.Close, {
+  position: "absolute",
+  top: "$2",
+  right: "$2",
+  cursor: "pointer"
+});
+const DialogCloseIconButton = React.forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(StyledCloseButton, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { ref: forwardedRef, css: { color: "$hiContrast" }, ...props, children: /* @__PURE__ */ jsx(Cross1Icon, {}) }) }));
+const DialogContent = React.forwardRef(({ children, ...props }, forwardedRef) => /* @__PURE__ */ jsxs(StyledContent, { ...props, ref: forwardedRef, children: [
+  children,
+  /* @__PURE__ */ jsx(DialogCloseIconButton, {})
+] }));
+const DialogClosePrimitive = DialogPrimitive.Close;
+const DialogDescription = DialogPrimitive.Description;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogTitle = DialogPrimitive.Title;
+const DialogTrigger = DialogPrimitive.Trigger;
+export {
+  Dialog,
+  DialogCloseIconButton,
+  DialogClosePrimitive,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  StyledContent
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/components/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../components/Dialog/Dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport React, { ComponentProps } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { elevationVariants } from '../Elevation/Elevation';\nimport { IconButton } from '../IconButton';\nimport { overlayStyles } from '../Overlay';\n\ntype DialogProps = React.ComponentProps<typeof DialogPrimitive.Root> & {\n  children: React.ReactNode;\n};\n\nexport const DialogOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {\n  position: 'fixed',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n});\n\nexport function Dialog({ children, ...props }: DialogProps) {\n  return <DialogPrimitive.Root {...props}>{children}</DialogPrimitive.Root>;\n}\n\nexport const StyledContent = styled(DialogPrimitive.Content, Card, {\n  position: 'fixed',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  minWidth: 200,\n  maxHeight: '85vh',\n  padding: '$4',\n  marginTop: '-5vh',\n  backgroundColor: '$dialogBackground',\n  boxShadow: 'inset 0 0 0 1px $colors$deepBlue4',\n  borderRadius: '$3',\n  // animation: `${fadeIn} 125ms linear, ${moveDown} 125ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  willChange: 'transform',\n  overflow: 'auto',\n\n  '&::before': {\n    boxShadow: 'none',\n  },\n\n  '&:focus': {\n    outline: 'none',\n  },\n\n  variants: {\n    elevation: elevationVariants,\n  },\n  defaultVariants: {\n    elevation: 5,\n  },\n});\n\nconst StyledCloseButton = styled(DialogPrimitive.Close, {\n  position: 'absolute',\n  top: '$2',\n  right: '$2',\n  cursor: 'pointer',\n});\n\ninterface DialogCloseButtonProps\n  extends VariantProps<typeof IconButton>,\n    ComponentProps<typeof IconButton> {}\nexport const DialogCloseIconButton = React.forwardRef<\n  React.ElementRef<typeof IconButton>,\n  DialogCloseButtonProps\n>((props, forwardedRef) => (\n  <StyledCloseButton asChild>\n    <IconButton ref={forwardedRef} css={{ color: '$hiContrast' }} {...props}>\n      <Cross1Icon />\n    </IconButton>\n  </StyledCloseButton>\n));\n\ntype DialogContentPrimitiveProps = React.ComponentProps<typeof DialogPrimitive.Content>;\ntype DialogContentProps = DialogContentPrimitiveProps &\n  VariantProps<typeof StyledContent> & { css?: CSS };\n\nexport const DialogContent = React.forwardRef<\n  React.ElementRef<typeof StyledContent>,\n  DialogContentProps\n>(({ children, ...props }, forwardedRef) => (\n  <StyledContent {...props} ref={forwardedRef}>\n    {children}\n    <DialogCloseIconButton />\n  </StyledContent>\n));\n\nexport const DialogClosePrimitive = DialogPrimitive.Close;\nexport const DialogDescription = DialogPrimitive.Description;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogTitle = DialogPrimitive.Title;\nexport const DialogTrigger = DialogPrimitive.Trigger;\n"],"names":[],"mappings":";;;;;;;;;AAcO,MAAM,gBAAgB,OAAO,gBAAgB,SAAS,eAAe;AAAA,EAC1E,UAAU;AAAA,EACV,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAEM,SAAS,OAAO,EAAE,UAAU,GAAG,SAAsB;AAC1D,6BAAQ,gBAAgB,MAAhB,EAAsB,GAAG,OAAQ,UAAS;AACpD;AAEO,MAAM,gBAAgB,OAAO,gBAAgB,SAAS,MAAM;AAAA,EACjE,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,cAAc;AAAA;AAAA,EAEd,YAAY;AAAA,EACZ,UAAU;AAAA,EAEV,aAAa;AAAA,IACX,WAAW;AAAA,EAAA;AAAA,EAGb,WAAW;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAGX,UAAU;AAAA,IACR,WAAW;AAAA,EAAA;AAAA,EAEb,iBAAiB;AAAA,IACf,WAAW;AAAA,EAAA;AAEf,CAAC;AAED,MAAM,oBAAoB,OAAO,gBAAgB,OAAO;AAAA,EACtD,UAAU;AAAA,EACV,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AACV,CAAC;AAKM,MAAM,wBAAwB,MAAM,WAGzC,CAAC,OAAO,iBACR,oBAAC,mBAAA,EAAkB,SAAO,MACxB,UAAA,oBAAC,YAAA,EAAW,KAAK,cAAc,KAAK,EAAE,OAAO,cAAA,GAAkB,GAAG,OAChE,UAAA,oBAAC,YAAA,CAAA,CAAW,EAAA,CACd,EAAA,CACF,CACD;AAMM,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,UAAU,GAAG,MAAA,GAAS,iBACzB,qBAAC,eAAA,EAAe,GAAG,OAAO,KAAK,cAC5B,UAAA;AAAA,EAAA;AAAA,sBACA,uBAAA,CAAA,CAAsB;AAAA,GACzB,CACD;AAEM,MAAM,uBAAuB,gBAAgB;AAC7C,MAAM,oBAAoB,gBAAgB;AAC1C,MAAM,eAAe,gBAAgB;AACrC,MAAM,cAAc,gBAAgB;AACpC,MAAM,gBAAgB,gBAAgB;"}

package/dist/components/Dialog/Dialog.themes.cjs

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

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

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

package/dist/components/Dialog/Dialog.themes.js

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

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

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

package/dist/components/DropdownMenu/DropdownMenu.cjs

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const DropdownMenuPrimitive = require("@radix-ui/react-dropdown-menu");
+const reactIcons = require("@radix-ui/react-icons");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const styles = require("./styles.cjs");
+const Box = require("../Box/Box.cjs");
+const Panel = require("../Panel/Panel.cjs");
+const Flex = require("../Flex/Flex.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 DropdownMenuPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DropdownMenuPrimitive);
+const DropdownMenu = DropdownMenuPrimitive__namespace.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+const DropdownMenuContent = stitches_config.styled(DropdownMenuPrimitive__namespace.Content, styles.menuCss, Panel.panelStyles);
+const DropdownMenuSeparator = stitches_config.styled(DropdownMenuPrimitive__namespace.Separator, styles.separatorCss);
+const DropdownMenuItem = stitches_config.styled(DropdownMenuPrimitive__namespace.Item, styles.itemCss);
+const StyledDropdownMenuRadioItem = stitches_config.styled(DropdownMenuPrimitive__namespace.RadioItem, styles.itemCss);
+const DropdownMenuRadioItem = React.forwardRef(({ children, ...props }, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsxs(StyledDropdownMenuRadioItem, { ...props, ref: forwardedRef, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { as: "span", css: { position: "absolute", left: "$1" }, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Flex, { css: { width: "$3", height: "$3", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Box.Box,
+    {
+      css: {
+        width: "$1",
+        height: "$1",
+        backgroundColor: "currentColor",
+        borderRadius: "$round"
+      }
+    }
+  ) }) }) }),
+  children
+] }));
+const StyledDropdownMenuCheckboxItem = stitches_config.styled(DropdownMenuPrimitive__namespace.CheckboxItem, styles.itemCss);
+const DropdownMenuCheckboxItem = React.forwardRef(({ children, ...props }, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsxs(StyledDropdownMenuCheckboxItem, { ...props, ref: forwardedRef, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { as: "span", css: { position: "absolute", left: "$1" }, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, {}) }) }),
+  children
+] }));
+const DropdownMenuLabel = stitches_config.styled(DropdownMenuPrimitive__namespace.Label, styles.labelCss);
+const DropdownMenuRadioGroup = stitches_config.styled(DropdownMenuPrimitive__namespace.RadioGroup, {});
+const DropdownMenuGroup = stitches_config.styled(DropdownMenuPrimitive__namespace.Group, {});
+const DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuGroup = DropdownMenuGroup;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuLabel = DropdownMenuLabel;
+exports.DropdownMenuPortal = DropdownMenuPortal;
+exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
+exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
+//# sourceMappingURL=DropdownMenu.cjs.map