@traefik-labs/faency 12.0.7

package/dist/components/List/List.cjs

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const Elevation = require("../Elevation/Elevation.cjs");
+const Flex = require("../Flex/Flex.cjs");
+const Button = require("../Button/Button.cjs");
+const LIST_ITEM_CONTENT_STYLES = {
+  bc: "transparent",
+  c: "inherit",
+  borderRadius: "inherit",
+  fontFamily: "$rubik",
+  fontSize: "$3",
+  fontVariantNumeric: "tabular-nums"
+};
+const StyledSpan = stitches_config.styled("span", Flex.Flex, {
+  // APPLY BUTTON STYLES
+  ...LIST_ITEM_CONTENT_STYLES,
+  // CUSTOM
+  p: "$1",
+  gap: "$1"
+});
+const StyledListItemButton = stitches_config.styled("button", Flex.Flex, {
+  ...Button.BUTTON_BASE_STYLES,
+  ...LIST_ITEM_CONTENT_STYLES,
+  outline: "none",
+  // CUSTOM
+  flexGrow: 1,
+  p: "$2",
+  "&::before": {
+    borderRadius: "inherit",
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0
+  },
+  "&::after": {
+    borderRadius: "inherit",
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0
+  },
+  "&:focus, &:focus-visible": {
+    boxShadow: "inset 0 0 0 2px $colors$listItemFocusBorder"
+  },
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer",
+      "&::before": {
+        backgroundColor: "$listItemHoverBg"
+      },
+      "&::after": {
+        backgroundColor: "$primary",
+        opacity: 0.05
+      }
+    }
+  },
+  "&:active": {
+    "&::before": {
+      backgroundColor: "$listItemActiveBg"
+    },
+    "&::after": {
+      backgroundColor: "$primary",
+      opacity: 0.05
+    }
+  }
+});
+const StyledLi = stitches_config.styled("li", {
+  m: "$2",
+  outline: "none",
+  position: "relative",
+  "&:focus-within": {
+    boxShadow: "none"
+  },
+  variants: {
+    elevation: Elevation.elevationVariants
+  },
+  defaultVariants: {
+    elevation: "0"
+  }
+});
+const StyledUl = stitches_config.styled("ul", {
+  m: "0 0 0 8px",
+  p: 0,
+  color: "$textDefault",
+  '&:has(li > span > input[type="checkbox"])': {
+    m: 0,
+    listStyle: "none",
+    li: {
+      marginLeft: 0,
+      span: {
+        input: {
+          margin: "0 3px 0 0"
+        }
+      }
+    }
+  }
+});
+const StyledOl = stitches_config.styled("ol", {
+  m: "0 0 0 8px",
+  p: 0,
+  color: "$textDefault",
+  "> li::marker": {
+    fontSize: "$3",
+    fontFamily: "$rubik"
+  }
+});
+const ListContext = React.createContext({
+  interactive: false
+});
+const Ul = React.forwardRef(
+  ({ interactive, ...props }, forwardedRef) => {
+    const contextValue = React.useMemo(() => ({ interactive: !!interactive }), [interactive]);
+    return /* @__PURE__ */ jsxRuntime.jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(StyledUl, { role: "list", ref: forwardedRef, ...props }) });
+  }
+);
+const Ol = React.forwardRef(
+  ({ interactive, ...props }, forwardedRef) => {
+    const contextValue = React.useMemo(() => ({ interactive: !!interactive }), [interactive]);
+    return /* @__PURE__ */ jsxRuntime.jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(StyledOl, { role: "list", ref: forwardedRef, ...props }) });
+  }
+);
+const ControlsWrapper = stitches_config.styled("div", {
+  position: "absolute",
+  top: 0,
+  right: "$2",
+  zIndex: 1,
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  overflow: "visible"
+});
+const Li = React.forwardRef(
+  ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {
+    const { interactive } = React.useContext(ListContext);
+    return /* @__PURE__ */ jsxRuntime.jsxs(StyledLi, { ...props, ref: forwardedRef, children: [
+      interactive ? /* @__PURE__ */ jsxRuntime.jsx(
+        StyledListItemButton,
+        {
+          align,
+          justify,
+          direction,
+          gap,
+          wrap,
+          children
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        StyledSpan,
+        {
+          align: align || "center",
+          justify,
+          direction,
+          gap,
+          wrap,
+          css: { flexGrow: 1 },
+          children
+        }
+      ),
+      !!controls && /* @__PURE__ */ jsxRuntime.jsx(ControlsWrapper, { children: controls })
+    ] });
+  }
+);
+exports.Li = Li;
+exports.Ol = Ol;
+exports.Ul = Ul;
+//# sourceMappingURL=List.cjs.map

package/dist/components/List/List.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.cjs","sources":["../../../components/List/List.tsx"],"sourcesContent":["import React, { ComponentProps, createContext, ReactNode, useContext, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { BUTTON_BASE_STYLES } from '../Button';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\n\nconst LIST_ITEM_CONTENT_STYLES = {\n  bc: 'transparent',\n  c: 'inherit',\n  borderRadius: 'inherit',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontVariantNumeric: 'tabular-nums',\n};\n\nconst StyledSpan = styled('span', Flex, {\n  // APPLY BUTTON STYLES\n  ...LIST_ITEM_CONTENT_STYLES,\n  // CUSTOM\n  p: '$1',\n  gap: '$1',\n});\n\nconst StyledListItemButton = styled('button', Flex, {\n  ...BUTTON_BASE_STYLES,\n  ...LIST_ITEM_CONTENT_STYLES,\n  outline: 'none',\n\n  // CUSTOM\n  flexGrow: 1,\n  p: '$2',\n  '&::before': {\n    borderRadius: 'inherit',\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    borderRadius: 'inherit',\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&:focus, &:focus-visible': {\n    boxShadow: 'inset 0 0 0 2px $colors$listItemFocusBorder',\n  },\n\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: '$listItemHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n  '&:active': {\n    '&::before': {\n      backgroundColor: '$listItemActiveBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.05,\n    },\n  },\n});\n\nconst StyledLi = styled('li', {\n  m: '$2',\n  outline: 'none',\n  position: 'relative',\n  '&:focus-within': {\n    boxShadow: 'none',\n  },\n  variants: {\n    elevation: elevationVariants,\n  },\n  defaultVariants: {\n    elevation: '0',\n  },\n});\n\nconst StyledUl = styled('ul', {\n  m: '0 0 0 8px',\n  p: 0,\n  color: '$textDefault',\n\n  '&:has(li > span > input[type=\"checkbox\"])': {\n    m: 0,\n    listStyle: 'none',\n    li: {\n      marginLeft: 0,\n      span: {\n        input: {\n          margin: '0 3px 0 0',\n        },\n      },\n    },\n  },\n});\n\nconst StyledOl = styled('ol', {\n  m: '0 0 0 8px',\n  p: 0,\n  color: '$textDefault',\n\n  '> li::marker': {\n    fontSize: '$3',\n    fontFamily: '$rubik',\n  },\n});\n\nconst ListContext = createContext({\n  interactive: false,\n});\n\nexport interface ListProps extends ComponentProps<typeof StyledUl>, VariantProps<typeof StyledUl> {\n  interactive?: boolean;\n}\nexport const Ul = React.forwardRef<React.ElementRef<typeof StyledUl>, ListProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);\n\n    return (\n      <ListContext.Provider value={contextValue}>\n        <StyledUl role=\"list\" ref={forwardedRef} {...props} />\n      </ListContext.Provider>\n    );\n  },\n);\n\nexport interface OrderedListProps\n  extends ComponentProps<typeof StyledOl>,\n    VariantProps<typeof StyledOl> {\n  interactive?: boolean;\n}\n\nexport const Ol = React.forwardRef<React.ElementRef<typeof StyledOl>, OrderedListProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);\n\n    return (\n      <ListContext.Provider value={contextValue}>\n        <StyledOl role=\"list\" ref={forwardedRef} {...props} />\n      </ListContext.Provider>\n    );\n  },\n);\n\nconst ControlsWrapper = styled('div', {\n  position: 'absolute',\n  top: 0,\n  right: '$2',\n  zIndex: 1,\n  height: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'visible',\n});\n\nexport interface ListItemProps\n  extends ComponentProps<typeof StyledLi>,\n    VariantProps<typeof StyledLi>,\n    VariantProps<typeof Flex> {\n  controls?: ReactNode;\n}\nexport const Li = React.forwardRef<React.ElementRef<typeof StyledLi>, ListItemProps>(\n  ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {\n    const { interactive } = useContext(ListContext);\n    return (\n      <StyledLi {...props} ref={forwardedRef}>\n        {interactive ? (\n          <StyledListItemButton\n            align={align}\n            justify={justify}\n            direction={direction}\n            gap={gap}\n            wrap={wrap}\n          >\n            {children}\n          </StyledListItemButton>\n        ) : (\n          <StyledSpan\n            align={align || 'center'}\n            justify={justify}\n            direction={direction}\n            gap={gap}\n            wrap={wrap}\n            css={{ flexGrow: 1 }}\n          >\n            {children}\n          </StyledSpan>\n        )}\n        {!!controls && <ControlsWrapper>{controls}</ControlsWrapper>}\n      </StyledLi>\n    );\n  },\n);\n"],"names":["styled","Flex","BUTTON_BASE_STYLES","elevationVariants","createContext","useMemo","jsx","useContext","jsxs"],"mappings":"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"}

package/dist/components/List/List.js

@@ -0,0 +1,169 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useContext, createContext, useMemo } from "react";
+import { styled } from "../../stitches.config.js";
+import { elevationVariants } from "../Elevation/Elevation.js";
+import { Flex } from "../Flex/Flex.js";
+import { BUTTON_BASE_STYLES } from "../Button/Button.js";
+const LIST_ITEM_CONTENT_STYLES = {
+  bc: "transparent",
+  c: "inherit",
+  borderRadius: "inherit",
+  fontFamily: "$rubik",
+  fontSize: "$3",
+  fontVariantNumeric: "tabular-nums"
+};
+const StyledSpan = styled("span", Flex, {
+  // APPLY BUTTON STYLES
+  ...LIST_ITEM_CONTENT_STYLES,
+  // CUSTOM
+  p: "$1",
+  gap: "$1"
+});
+const StyledListItemButton = styled("button", Flex, {
+  ...BUTTON_BASE_STYLES,
+  ...LIST_ITEM_CONTENT_STYLES,
+  outline: "none",
+  // CUSTOM
+  flexGrow: 1,
+  p: "$2",
+  "&::before": {
+    borderRadius: "inherit",
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0
+  },
+  "&::after": {
+    borderRadius: "inherit",
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0
+  },
+  "&:focus, &:focus-visible": {
+    boxShadow: "inset 0 0 0 2px $colors$listItemFocusBorder"
+  },
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer",
+      "&::before": {
+        backgroundColor: "$listItemHoverBg"
+      },
+      "&::after": {
+        backgroundColor: "$primary",
+        opacity: 0.05
+      }
+    }
+  },
+  "&:active": {
+    "&::before": {
+      backgroundColor: "$listItemActiveBg"
+    },
+    "&::after": {
+      backgroundColor: "$primary",
+      opacity: 0.05
+    }
+  }
+});
+const StyledLi = styled("li", {
+  m: "$2",
+  outline: "none",
+  position: "relative",
+  "&:focus-within": {
+    boxShadow: "none"
+  },
+  variants: {
+    elevation: elevationVariants
+  },
+  defaultVariants: {
+    elevation: "0"
+  }
+});
+const StyledUl = styled("ul", {
+  m: "0 0 0 8px",
+  p: 0,
+  color: "$textDefault",
+  '&:has(li > span > input[type="checkbox"])': {
+    m: 0,
+    listStyle: "none",
+    li: {
+      marginLeft: 0,
+      span: {
+        input: {
+          margin: "0 3px 0 0"
+        }
+      }
+    }
+  }
+});
+const StyledOl = styled("ol", {
+  m: "0 0 0 8px",
+  p: 0,
+  color: "$textDefault",
+  "> li::marker": {
+    fontSize: "$3",
+    fontFamily: "$rubik"
+  }
+});
+const ListContext = createContext({
+  interactive: false
+});
+const Ul = React.forwardRef(
+  ({ interactive, ...props }, forwardedRef) => {
+    const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);
+    return /* @__PURE__ */ jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(StyledUl, { role: "list", ref: forwardedRef, ...props }) });
+  }
+);
+const Ol = React.forwardRef(
+  ({ interactive, ...props }, forwardedRef) => {
+    const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);
+    return /* @__PURE__ */ jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(StyledOl, { role: "list", ref: forwardedRef, ...props }) });
+  }
+);
+const ControlsWrapper = styled("div", {
+  position: "absolute",
+  top: 0,
+  right: "$2",
+  zIndex: 1,
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  overflow: "visible"
+});
+const Li = React.forwardRef(
+  ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {
+    const { interactive } = useContext(ListContext);
+    return /* @__PURE__ */ jsxs(StyledLi, { ...props, ref: forwardedRef, children: [
+      interactive ? /* @__PURE__ */ jsx(
+        StyledListItemButton,
+        {
+          align,
+          justify,
+          direction,
+          gap,
+          wrap,
+          children
+        }
+      ) : /* @__PURE__ */ jsx(
+        StyledSpan,
+        {
+          align: align || "center",
+          justify,
+          direction,
+          gap,
+          wrap,
+          css: { flexGrow: 1 },
+          children
+        }
+      ),
+      !!controls && /* @__PURE__ */ jsx(ControlsWrapper, { children: controls })
+    ] });
+  }
+);
+export {
+  Li,
+  Ol,
+  Ul
+};
+//# sourceMappingURL=List.js.map

package/dist/components/List/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sources":["../../../components/List/List.tsx"],"sourcesContent":["import React, { ComponentProps, createContext, ReactNode, useContext, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { BUTTON_BASE_STYLES } from '../Button';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\n\nconst LIST_ITEM_CONTENT_STYLES = {\n  bc: 'transparent',\n  c: 'inherit',\n  borderRadius: 'inherit',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontVariantNumeric: 'tabular-nums',\n};\n\nconst StyledSpan = styled('span', Flex, {\n  // APPLY BUTTON STYLES\n  ...LIST_ITEM_CONTENT_STYLES,\n  // CUSTOM\n  p: '$1',\n  gap: '$1',\n});\n\nconst StyledListItemButton = styled('button', Flex, {\n  ...BUTTON_BASE_STYLES,\n  ...LIST_ITEM_CONTENT_STYLES,\n  outline: 'none',\n\n  // CUSTOM\n  flexGrow: 1,\n  p: '$2',\n  '&::before': {\n    borderRadius: 'inherit',\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    borderRadius: 'inherit',\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&:focus, &:focus-visible': {\n    boxShadow: 'inset 0 0 0 2px $colors$listItemFocusBorder',\n  },\n\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: '$listItemHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n  '&:active': {\n    '&::before': {\n      backgroundColor: '$listItemActiveBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.05,\n    },\n  },\n});\n\nconst StyledLi = styled('li', {\n  m: '$2',\n  outline: 'none',\n  position: 'relative',\n  '&:focus-within': {\n    boxShadow: 'none',\n  },\n  variants: {\n    elevation: elevationVariants,\n  },\n  defaultVariants: {\n    elevation: '0',\n  },\n});\n\nconst StyledUl = styled('ul', {\n  m: '0 0 0 8px',\n  p: 0,\n  color: '$textDefault',\n\n  '&:has(li > span > input[type=\"checkbox\"])': {\n    m: 0,\n    listStyle: 'none',\n    li: {\n      marginLeft: 0,\n      span: {\n        input: {\n          margin: '0 3px 0 0',\n        },\n      },\n    },\n  },\n});\n\nconst StyledOl = styled('ol', {\n  m: '0 0 0 8px',\n  p: 0,\n  color: '$textDefault',\n\n  '> li::marker': {\n    fontSize: '$3',\n    fontFamily: '$rubik',\n  },\n});\n\nconst ListContext = createContext({\n  interactive: false,\n});\n\nexport interface ListProps extends ComponentProps<typeof StyledUl>, VariantProps<typeof StyledUl> {\n  interactive?: boolean;\n}\nexport const Ul = React.forwardRef<React.ElementRef<typeof StyledUl>, ListProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);\n\n    return (\n      <ListContext.Provider value={contextValue}>\n        <StyledUl role=\"list\" ref={forwardedRef} {...props} />\n      </ListContext.Provider>\n    );\n  },\n);\n\nexport interface OrderedListProps\n  extends ComponentProps<typeof StyledOl>,\n    VariantProps<typeof StyledOl> {\n  interactive?: boolean;\n}\n\nexport const Ol = React.forwardRef<React.ElementRef<typeof StyledOl>, OrderedListProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);\n\n    return (\n      <ListContext.Provider value={contextValue}>\n        <StyledOl role=\"list\" ref={forwardedRef} {...props} />\n      </ListContext.Provider>\n    );\n  },\n);\n\nconst ControlsWrapper = styled('div', {\n  position: 'absolute',\n  top: 0,\n  right: '$2',\n  zIndex: 1,\n  height: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'visible',\n});\n\nexport interface ListItemProps\n  extends ComponentProps<typeof StyledLi>,\n    VariantProps<typeof StyledLi>,\n    VariantProps<typeof Flex> {\n  controls?: ReactNode;\n}\nexport const Li = React.forwardRef<React.ElementRef<typeof StyledLi>, ListItemProps>(\n  ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {\n    const { interactive } = useContext(ListContext);\n    return (\n      <StyledLi {...props} ref={forwardedRef}>\n        {interactive ? (\n          <StyledListItemButton\n            align={align}\n            justify={justify}\n            direction={direction}\n            gap={gap}\n            wrap={wrap}\n          >\n            {children}\n          </StyledListItemButton>\n        ) : (\n          <StyledSpan\n            align={align || 'center'}\n            justify={justify}\n            direction={direction}\n            gap={gap}\n            wrap={wrap}\n            css={{ flexGrow: 1 }}\n          >\n            {children}\n          </StyledSpan>\n        )}\n        {!!controls && <ControlsWrapper>{controls}</ControlsWrapper>}\n      </StyledLi>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/components/List/List.themes.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+exports.Theme = void 0;
+((Theme2) => {
+  Theme2.getLight = (primaryColor) => ({
+    listItemHoverBg: "$whiteA9",
+    listItemActiveBg: "$whiteA8",
+    listItemFocusBorder: primaryColor.helpers.pickScale(8)
+  });
+  Theme2.getDark = (primaryColor) => ({
+    listItemHoverBg: "$whiteA4",
+    listItemActiveBg: "$whiteA3",
+    listItemFocusBorder: primaryColor.helpers.pickScale(11)
+  });
+})(exports.Theme || (exports.Theme = {}));
+//# sourceMappingURL=List.themes.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.themes.cjs","sources":["../../../components/List/List.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  export type Colors = {\n    listItemHoverBg: Property.Color;\n    listItemActiveBg: Property.Color;\n    listItemFocusBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    listItemHoverBg: '$whiteA9',\n    listItemActiveBg: '$whiteA8',\n    listItemFocusBorder: primaryColor.helpers.pickScale(8),\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    listItemHoverBg: '$whiteA4',\n    listItemActiveBg: '$whiteA3',\n    listItemFocusBorder: primaryColor.helpers.pickScale(11),\n  });\n}\n"],"names":["Theme"],"mappings":";;AAIiBA,QAAAA,QAAAA;AAAAA,CAAV,CAAUA,WAAV;AASQA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,qBAAqB,aAAa,QAAQ,UAAU,CAAC;AAAA,EAAA;AAG1CA,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,qBAAqB,aAAa,QAAQ,UAAU,EAAE;AAAA,EAAA;AACxD,GAnBeA,QAAAA,UAAAA,gBAAA,CAAA,EAAA;"}

package/dist/components/List/List.themes.js

@@ -0,0 +1,17 @@
+var Theme;
+((Theme2) => {
+  Theme2.getLight = (primaryColor) => ({
+    listItemHoverBg: "$whiteA9",
+    listItemActiveBg: "$whiteA8",
+    listItemFocusBorder: primaryColor.helpers.pickScale(8)
+  });
+  Theme2.getDark = (primaryColor) => ({
+    listItemHoverBg: "$whiteA4",
+    listItemActiveBg: "$whiteA3",
+    listItemFocusBorder: primaryColor.helpers.pickScale(11)
+  });
+})(Theme || (Theme = {}));
+export {
+  Theme
+};
+//# sourceMappingURL=List.themes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.themes.js","sources":["../../../components/List/List.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  export type Colors = {\n    listItemHoverBg: Property.Color;\n    listItemActiveBg: Property.Color;\n    listItemFocusBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    listItemHoverBg: '$whiteA9',\n    listItemActiveBg: '$whiteA8',\n    listItemFocusBorder: primaryColor.helpers.pickScale(8),\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    listItemHoverBg: '$whiteA4',\n    listItemActiveBg: '$whiteA3',\n    listItemFocusBorder: primaryColor.helpers.pickScale(11),\n  });\n}\n"],"names":["Theme"],"mappings":"AAIO,IAAU;AAAA,CAAV,CAAUA,WAAV;AASQA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,qBAAqB,aAAa,QAAQ,UAAU,CAAC;AAAA,EAAA;AAG1CA,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,qBAAqB,aAAa,QAAQ,UAAU,EAAE;AAAA,EAAA;AACxD,GAnBe,UAAA,QAAA,CAAA,EAAA;"}

package/dist/components/Navigation/Navigation.cjs

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const Elevation = require("../Elevation/Elevation.cjs");
+const Flex = require("../Flex/Flex.cjs");
+const FlexWithOpacity = stitches_config.styled(Flex.Flex, {
+  opacity: 0.74,
+  variants: {
+    active: {
+      true: {
+        opacity: 1
+      }
+    }
+  }
+});
+const baseNavItemCss = stitches_config.css({
+  position: "relative",
+  display: "flex",
+  boxSizing: "border-box",
+  alignItems: "center",
+  backgroundColor: "$navButtonBg",
+  color: "$navButtonText",
+  border: "none",
+  minHeight: "$7",
+  width: "100%",
+  px: "$3",
+  py: "$2",
+  borderRadius: "$3",
+  cursor: "pointer",
+  fontFamily: "$rubik",
+  fontWeight: "$medium",
+  outline: "none",
+  fontSize: "$3",
+  mt: "$2",
+  "&::before": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: "$3"
+  },
+  "&::after": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: "$3"
+  },
+  [`&:focus > ${FlexWithOpacity}, &:hover > ${FlexWithOpacity}`]: {
+    opacity: 1
+  },
+  "&:focus": {
+    color: "$navButtonFocusText",
+    boxShadow: "inset 0 0 0 2px $colors$navButtonFocusBorder",
+    "&::before": {
+      backgroundColor: "$navButtonFocusBg"
+    },
+    "&::after": {
+      backgroundColor: "$navButtonFocusBg2",
+      opacity: 0.05
+    }
+  },
+  "@hover": {
+    "&:hover": {
+      color: "$navButtonHoverText",
+      "&::before": {
+        backgroundColor: "$navButtonHoverBg"
+      },
+      "&::after": {
+        backgroundColor: "$navButtonHoverBg2",
+        opacity: 0.05
+      }
+    }
+  },
+  "&:first-child": {
+    mt: 0
+  },
+  variants: {
+    active: {
+      true: {
+        color: "$navButtonActiveText",
+        "&::before": {
+          backgroundColor: "$navButtonActiveBg"
+        },
+        "&::after": {
+          backgroundColor: "$navButtonActiveBg2",
+          opacity: 0.05
+        },
+        "@hover": {
+          "&:hover": {
+            color: "$navButtonActiveText"
+          }
+        },
+        "&:focus": {
+          color: "$navButtonActiveText"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    active: false
+  }
+});
+const NavigationContainer = stitches_config.styled("div", {
+  display: "flex",
+  boxSizing: "border-box",
+  flexDirection: "column"
+});
+const NavigationDrawer = stitches_config.styled("nav", {
+  display: "flex",
+  boxSizing: "border-box",
+  padding: "$3",
+  maxWidth: "240px",
+  flexDirection: "column",
+  variants: {
+    elevation: Elevation.elevationVariants,
+    fullWidth: {
+      true: {
+        px: 0,
+        "> *, > div > *,": {
+          borderRadius: 0,
+          "&::before": {
+            borderRadius: 0
+          },
+          "&::after": {
+            borderRadius: 0
+          },
+          "&:focus": {
+            border: "none",
+            boxShadow: "none"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    elevation: 1,
+    fullWidth: false
+  }
+});
+const StyledLink = stitches_config.styled("a", baseNavItemCss, {
+  textDecoration: "none"
+});
+const StyledButton = stitches_config.styled("button", baseNavItemCss);
+const NavigationItemWrapper = (props) => props.as === "a" ? /* @__PURE__ */ jsxRuntime.jsx(StyledLink, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(StyledButton, { type: "button", ...props });
+const NavigationItem = ({
+  startAdornment,
+  endAdornment,
+  children,
+  ...restProps
+}) => {
+  const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);
+  const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(NavigationItemWrapper, { ...restProps, children: [
+    hasStartAdornment && /* @__PURE__ */ jsxRuntime.jsx(FlexWithOpacity, { css: { pr: "$2", ml: "-$1" }, active: restProps.active, children: startAdornment }),
+    /* @__PURE__ */ jsxRuntime.jsx(FlexWithOpacity, { css: { flexGrow: 1 }, active: restProps.active, children }),
+    hasEndAdornment && /* @__PURE__ */ jsxRuntime.jsx(Flex.Flex, { css: { pl: "$2", mr: "-$1" }, children: endAdornment })
+  ] });
+};
+const NavigationLink = (props) => /* @__PURE__ */ jsxRuntime.jsx(NavigationItem, { as: "a", ...props });
+exports.NavigationContainer = NavigationContainer;
+exports.NavigationDrawer = NavigationDrawer;
+exports.NavigationItem = NavigationItem;
+exports.NavigationLink = NavigationLink;
+//# sourceMappingURL=Navigation.cjs.map

package/dist/components/Navigation/Navigation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.cjs","sources":["../../../components/Navigation/Navigation.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react';\n\nimport { CSS, css, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\n\nconst FlexWithOpacity = styled(Flex, {\n  opacity: 0.74,\n\n  variants: {\n    active: {\n      true: {\n        opacity: 1,\n      },\n    },\n  },\n});\n\nconst baseNavItemCss = css({\n  position: 'relative',\n  display: 'flex',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  backgroundColor: '$navButtonBg',\n  color: '$navButtonText',\n  border: 'none',\n  minHeight: '$7',\n  width: '100%',\n  px: '$3',\n  py: '$2',\n  borderRadius: '$3',\n  cursor: 'pointer',\n  fontFamily: '$rubik',\n  fontWeight: '$medium',\n  outline: 'none',\n  fontSize: '$3',\n  mt: '$2',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    borderRadius: '$3',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    borderRadius: '$3',\n  },\n\n  [`&:focus > ${FlexWithOpacity}, &:hover > ${FlexWithOpacity}`]: {\n    opacity: 1,\n  },\n\n  '&:focus': {\n    color: '$navButtonFocusText',\n    boxShadow: 'inset 0 0 0 2px $colors$navButtonFocusBorder',\n\n    '&::before': {\n      backgroundColor: '$navButtonFocusBg',\n    },\n    '&::after': {\n      backgroundColor: '$navButtonFocusBg2',\n      opacity: 0.05,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      color: '$navButtonHoverText',\n\n      '&::before': {\n        backgroundColor: '$navButtonHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$navButtonHoverBg2',\n        opacity: 0.05,\n      },\n    },\n  },\n\n  '&:first-child': {\n    mt: 0,\n  },\n\n  variants: {\n    active: {\n      true: {\n        color: '$navButtonActiveText',\n\n        '&::before': {\n          backgroundColor: '$navButtonActiveBg',\n        },\n        '&::after': {\n          backgroundColor: '$navButtonActiveBg2',\n          opacity: 0.05,\n        },\n\n        '@hover': {\n          '&:hover': {\n            color: '$navButtonActiveText',\n          },\n        },\n\n        '&:focus': {\n          color: '$navButtonActiveText',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    active: false,\n  },\n});\n\nexport const NavigationContainer = styled('div', {\n  display: 'flex',\n  boxSizing: 'border-box',\n  flexDirection: 'column',\n});\n\nexport type NavigationContainerVariants = VariantProps<typeof NavigationContainer>;\nexport type NavigationContainerProps = NavigationContainerVariants & NonNullable<unknown>;\n\nexport const NavigationDrawer = styled('nav', {\n  display: 'flex',\n  boxSizing: 'border-box',\n  padding: '$3',\n  maxWidth: '240px',\n  flexDirection: 'column',\n  variants: {\n    elevation: elevationVariants,\n    fullWidth: {\n      true: {\n        px: 0,\n        '> *, > div > *,': {\n          borderRadius: 0,\n\n          '&::before': {\n            borderRadius: 0,\n          },\n\n          '&::after': {\n            borderRadius: 0,\n          },\n\n          '&:focus': {\n            border: 'none',\n            boxShadow: 'none',\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    elevation: 1,\n    fullWidth: false,\n  },\n});\n\nexport type NavigationDrawerVariants = VariantProps<typeof NavigationDrawer>;\nexport type NavigationDrawerProps = NavigationDrawerVariants & NonNullable<unknown>;\n\nconst StyledLink = styled('a', baseNavItemCss, {\n  textDecoration: 'none',\n});\n\ntype StyledLinkProps = VariantProps<typeof StyledLink> & React.ComponentProps<typeof StyledLink>;\n\nconst StyledButton = styled('button', baseNavItemCss);\n\ntype StyledButtonProps = VariantProps<typeof StyledButton> &\n  React.ComponentProps<typeof StyledButton>;\ninterface NavigationItemBaseProps {\n  css?: CSS;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n  children?: ReactNode;\n  active?: boolean;\n}\n\ntype NavigationItemButtonProps = NavigationItemBaseProps &\n  StyledButtonProps & {\n    as?: 'button';\n  };\ntype NavigationItemLinkProps = NavigationItemBaseProps &\n  StyledLinkProps &\n  React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    as: 'a';\n  };\n\nexport type NavigationItemProps = NavigationItemButtonProps | NavigationItemLinkProps;\n\nconst NavigationItemWrapper = (props: NavigationItemProps): JSX.Element =>\n  props.as === 'a' ? <StyledLink {...props} /> : <StyledButton type=\"button\" {...props} />;\n\nexport const NavigationItem = ({\n  startAdornment,\n  endAdornment,\n  children,\n  ...restProps\n}: NavigationItemProps): JSX.Element => {\n  const hasStartAdornment = useMemo(() => Boolean(startAdornment), [startAdornment]);\n  const hasEndAdornment = useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n  return (\n    <NavigationItemWrapper {...restProps}>\n      {hasStartAdornment && (\n        <FlexWithOpacity css={{ pr: '$2', ml: '-$1' }} active={restProps.active}>\n          {startAdornment}\n        </FlexWithOpacity>\n      )}\n      <FlexWithOpacity css={{ flexGrow: 1 }} active={restProps.active}>\n        {children}\n      </FlexWithOpacity>\n      {hasEndAdornment && <Flex css={{ pl: '$2', mr: '-$1' }}>{endAdornment}</Flex>}\n    </NavigationItemWrapper>\n  );\n};\n\nexport type NavigationItemVariants = VariantProps<typeof NavigationItem>;\n\nexport const NavigationLink = (props: Omit<NavigationItemLinkProps, 'as'>) => (\n  <NavigationItem as=\"a\" {...props} />\n);\n\nexport type NavigationLinkVariants = VariantProps<typeof NavigationLink>;\n\nexport type NavigationLinkProps = NavigationLinkVariants & NonNullable<unknown>;\n"],"names":["styled","Flex","css","elevationVariants","jsx","useMemo","jsxs"],"mappings":"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"}