@traefik-labs/faency 12.2.1 → 12.2.2

package/dist/components/Navigation/Navigation.js

@@ -1,173 +1,154 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { styled, css } from "../../stitches.config.js";
+import { css, styled } from "../../stitches.config.js";
 import { elevationVariants } from "../Elevation/Elevation.js";
 import { Flex } from "../Flex/Flex.js";
-const FlexWithOpacity = styled(Flex, {
-  opacity: 0.74,
-  variants: {
-    active: {
-      true: {
-        opacity: 1
-      }
-    }
-  }
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/Navigation/Navigation.tsx
+var FlexWithOpacity = styled(Flex, {
+	opacity: .74,
+	variants: { active: { true: { opacity: 1 } } }
 });
-const baseNavItemCss = 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
-  }
+var baseNavItemCss = 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: .05
+		}
+	},
+	"@hover": { "&:hover": {
+		color: "$navButtonHoverText",
+		"&::before": { backgroundColor: "$navButtonHoverBg" },
+		"&::after": {
+			backgroundColor: "$navButtonHoverBg2",
+			opacity: .05
+		}
+	} },
+	"&:first-child": { mt: 0 },
+	variants: { active: { true: {
+		color: "$navButtonActiveText",
+		"&::before": { backgroundColor: "$navButtonActiveBg" },
+		"&::after": {
+			backgroundColor: "$navButtonActiveBg2",
+			opacity: .05
+		},
+		"@hover": { "&:hover": { color: "$navButtonActiveText" } },
+		"&:focus": { color: "$navButtonActiveText" }
+	} } },
+	defaultVariants: { active: false }
 });
-const NavigationContainer = styled("div", {
-  display: "flex",
-  boxSizing: "border-box",
-  flexDirection: "column"
+var NavigationContainer = styled("div", {
+	display: "flex",
+	boxSizing: "border-box",
+	flexDirection: "column"
 });
-const NavigationDrawer = styled("nav", {
-  display: "flex",
-  boxSizing: "border-box",
-  padding: "$3",
-  maxWidth: "240px",
-  flexDirection: "column",
-  variants: {
-    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
-  }
+var NavigationDrawer = styled("nav", {
+	display: "flex",
+	boxSizing: "border-box",
+	padding: "$3",
+	maxWidth: "240px",
+	flexDirection: "column",
+	variants: {
+		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 = styled("a", baseNavItemCss, {
-  textDecoration: "none"
+var StyledLink = styled("a", baseNavItemCss, { textDecoration: "none" });
+var StyledButton = styled("button", baseNavItemCss);
+var NavigationItemWrapper = (props) => props.as === "a" ? /* @__PURE__ */ jsx(StyledLink, { ...props }) : /* @__PURE__ */ jsx(StyledButton, {
+	type: "button",
+	...props
 });
-const StyledButton = styled("button", baseNavItemCss);
-const NavigationItemWrapper = (props) => props.as === "a" ? /* @__PURE__ */ jsx(StyledLink, { ...props }) : /* @__PURE__ */ jsx(StyledButton, { type: "button", ...props });
-const NavigationItem = ({
-  startAdornment,
-  endAdornment,
-  children,
-  ...restProps
-}) => {
-  const hasStartAdornment = useMemo(() => Boolean(startAdornment), [startAdornment]);
-  const hasEndAdornment = useMemo(() => Boolean(endAdornment), [endAdornment]);
-  return /* @__PURE__ */ jsxs(NavigationItemWrapper, { ...restProps, children: [
-    hasStartAdornment && /* @__PURE__ */ jsx(FlexWithOpacity, { css: { pr: "$2", ml: "-$1" }, active: restProps.active, children: startAdornment }),
-    /* @__PURE__ */ jsx(FlexWithOpacity, { css: { flexGrow: 1 }, active: restProps.active, children }),
-    hasEndAdornment && /* @__PURE__ */ jsx(Flex, { css: { pl: "$2", mr: "-$1" }, children: endAdornment })
-  ] });
-};
-const NavigationLink = (props) => /* @__PURE__ */ jsx(NavigationItem, { as: "a", ...props });
-export {
-  NavigationContainer,
-  NavigationDrawer,
-  NavigationItem,
-  NavigationLink
+var NavigationItem = ({ startAdornment, endAdornment, children, ...restProps }) => {
+	const hasStartAdornment = useMemo(() => Boolean(startAdornment), [startAdornment]);
+	const hasEndAdornment = useMemo(() => Boolean(endAdornment), [endAdornment]);
+	return /* @__PURE__ */ jsxs(NavigationItemWrapper, {
+		...restProps,
+		children: [
+			hasStartAdornment && /* @__PURE__ */ jsx(FlexWithOpacity, {
+				css: {
+					pr: "$2",
+					ml: "-$1"
+				},
+				active: restProps.active,
+				children: startAdornment
+			}),
+			/* @__PURE__ */ jsx(FlexWithOpacity, {
+				css: { flexGrow: 1 },
+				active: restProps.active,
+				children
+			}),
+			hasEndAdornment && /* @__PURE__ */ jsx(Flex, {
+				css: {
+					pl: "$2",
+					mr: "-$1"
+				},
+				children: endAdornment
+			})
+		]
+	});
 };
-//# sourceMappingURL=Navigation.js.map
+var NavigationLink = (props) => /* @__PURE__ */ jsx(NavigationItem, {
+	as: "a",
+	...props
+});
+//#endregion
+export { NavigationContainer, NavigationDrawer, NavigationItem, NavigationLink };
+
+//# sourceMappingURL=Navigation.js.map

package/dist/components/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","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":[],"mappings":"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"}
+{"version":3,"file":"Navigation.js","names":[],"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"],"mappings":"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"}

package/dist/components/Navigation/Navigation.themes.cjs

@@ -1,35 +1,44 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const tinycolor = require("tinycolor2");
-exports.Theme = void 0;
-((Theme2) => {
-  Theme2.getLight = (primaryColor) => ({
-    navButtonBg: "transparent",
-    navButtonHoverBg: tinycolor("black").setAlpha(0.04).toHslString(),
-    navButtonHoverBg2: "transparent",
-    navButtonFocusBg: tinycolor("white").setAlpha(0.15).toHslString(),
-    navButtonFocusBg2: "$primary",
-    navButtonFocusBorder: primaryColor.helpers.pickScale(8),
-    navButtonActiveBg: tinycolor("black").setAlpha(0.04).toHslString(),
-    navButtonActiveBg2: "transparent",
-    navButtonText: tinycolor("black").setAlpha(0.54).toHslString(),
-    navButtonHoverText: "black",
-    navButtonFocusText: "black",
-    navButtonActiveText: "$primary"
-  });
-  Theme2.getDark = (primaryColor) => ({
-    navButtonBg: "transparent",
-    navButtonHoverBg: tinycolor("white").setAlpha(0.05).toHslString(),
-    navButtonHoverBg2: "$primary",
-    navButtonFocusBg: tinycolor("white").setAlpha(0.15).toHslString(),
-    navButtonFocusBg2: "$primary",
-    navButtonFocusBorder: primaryColor.helpers.pickScale(11),
-    navButtonActiveBg: tinycolor("white").setAlpha(0.05).toHslString(),
-    navButtonActiveBg2: "$primary",
-    navButtonText: "white",
-    navButtonHoverText: "white",
-    navButtonFocusText: "white",
-    navButtonActiveText: "$primary"
-  });
-})(exports.Theme || (exports.Theme = {}));
-//# sourceMappingURL=Navigation.themes.cjs.map
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let tinycolor2 = require("tinycolor2");
+tinycolor2 = require_runtime.__toESM(tinycolor2, 1);
+//#region components/Navigation/Navigation.themes.ts
+var Theme;
+(function(_Theme) {
+	_Theme.getLight = (primaryColor) => ({
+		navButtonBg: "transparent",
+		navButtonHoverBg: (0, tinycolor2.default)("black").setAlpha(.04).toHslString(),
+		navButtonHoverBg2: "transparent",
+		navButtonFocusBg: (0, tinycolor2.default)("white").setAlpha(.15).toHslString(),
+		navButtonFocusBg2: "$primary",
+		navButtonFocusBorder: primaryColor.helpers.pickScale(8),
+		navButtonActiveBg: (0, tinycolor2.default)("black").setAlpha(.04).toHslString(),
+		navButtonActiveBg2: "transparent",
+		navButtonText: (0, tinycolor2.default)("black").setAlpha(.54).toHslString(),
+		navButtonHoverText: "black",
+		navButtonFocusText: "black",
+		navButtonActiveText: "$primary"
+	});
+	_Theme.getDark = (primaryColor) => ({
+		navButtonBg: "transparent",
+		navButtonHoverBg: (0, tinycolor2.default)("white").setAlpha(.05).toHslString(),
+		navButtonHoverBg2: "$primary",
+		navButtonFocusBg: (0, tinycolor2.default)("white").setAlpha(.15).toHslString(),
+		navButtonFocusBg2: "$primary",
+		navButtonFocusBorder: primaryColor.helpers.pickScale(11),
+		navButtonActiveBg: (0, tinycolor2.default)("white").setAlpha(.05).toHslString(),
+		navButtonActiveBg2: "$primary",
+		navButtonText: "white",
+		navButtonHoverText: "white",
+		navButtonFocusText: "white",
+		navButtonActiveText: "$primary"
+	});
+})(Theme || (Theme = {}));
+//#endregion
+Object.defineProperty(exports, "Theme", {
+	enumerable: true,
+	get: function() {
+		return Theme;
+	}
+});
+
+//# sourceMappingURL=Navigation.themes.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Navigation.themes.cjs","sources":["../../../components/Navigation/Navigation.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nexport namespace Theme {\n  type Colors = {\n    navButtonBg: Property.Color;\n    navButtonHoverBg: Property.Color;\n    navButtonHoverBg2: Property.Color;\n    navButtonFocusBg: Property.Color;\n    navButtonFocusBg2: Property.Color;\n    navButtonFocusBorder: Property.Color;\n    navButtonText: Property.Color;\n    navButtonHoverText: Property.Color;\n    navButtonActiveText: Property.Color;\n    navButtonFocusText: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    navButtonBg: 'transparent',\n    navButtonHoverBg: tinycolor('black').setAlpha(0.04).toHslString(),\n    navButtonHoverBg2: 'transparent',\n    navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n    navButtonFocusBg2: '$primary',\n    navButtonFocusBorder: primaryColor.helpers.pickScale(8),\n    navButtonActiveBg: tinycolor('black').setAlpha(0.04).toHslString(),\n    navButtonActiveBg2: 'transparent',\n    navButtonText: tinycolor('black').setAlpha(0.54).toHslString(),\n    navButtonHoverText: 'black',\n    navButtonFocusText: 'black',\n    navButtonActiveText: '$primary',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    navButtonBg: 'transparent',\n    navButtonHoverBg: tinycolor('white').setAlpha(0.05).toHslString(),\n    navButtonHoverBg2: '$primary',\n    navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n    navButtonFocusBg2: '$primary',\n    navButtonFocusBorder: primaryColor.helpers.pickScale(11),\n    navButtonActiveBg: tinycolor('white').setAlpha(0.05).toHslString(),\n    navButtonActiveBg2: '$primary',\n    navButtonText: 'white',\n    navButtonHoverText: 'white',\n    navButtonFocusText: 'white',\n    navButtonActiveText: '$primary',\n  });\n}\n"],"names":["Theme"],"mappings":";;;AAIiBA,QAAAA,QAAAA;AAAAA,CAAV,CAAUA,WAAV;AAgBQA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,aAAa;AAAA,IACb,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACpD,mBAAmB;AAAA,IACnB,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACpD,mBAAmB;AAAA,IACnB,sBAAsB,aAAa,QAAQ,UAAU,CAAC;AAAA,IACtD,mBAAmB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACrD,oBAAoB;AAAA,IACpB,eAAe,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACjD,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,EAAA;AAGVA,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,aAAa;AAAA,IACb,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACpD,mBAAmB;AAAA,IACnB,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACpD,mBAAmB;AAAA,IACnB,sBAAsB,aAAa,QAAQ,UAAU,EAAE;AAAA,IACvD,mBAAmB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACrD,oBAAoB;AAAA,IACpB,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,EAAA;AACvB,GA5CeA,QAAAA,UAAAA,gBAAA,CAAA,EAAA;"}
+{"version":3,"file":"Navigation.themes.cjs","names":[],"sources":["../../../components/Navigation/Navigation.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nexport namespace Theme {\n  type Colors = {\n    navButtonBg: Property.Color;\n    navButtonHoverBg: Property.Color;\n    navButtonHoverBg2: Property.Color;\n    navButtonFocusBg: Property.Color;\n    navButtonFocusBg2: Property.Color;\n    navButtonFocusBorder: Property.Color;\n    navButtonText: Property.Color;\n    navButtonHoverText: Property.Color;\n    navButtonActiveText: Property.Color;\n    navButtonFocusText: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    navButtonBg: 'transparent',\n    navButtonHoverBg: tinycolor('black').setAlpha(0.04).toHslString(),\n    navButtonHoverBg2: 'transparent',\n    navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n    navButtonFocusBg2: '$primary',\n    navButtonFocusBorder: primaryColor.helpers.pickScale(8),\n    navButtonActiveBg: tinycolor('black').setAlpha(0.04).toHslString(),\n    navButtonActiveBg2: 'transparent',\n    navButtonText: tinycolor('black').setAlpha(0.54).toHslString(),\n    navButtonHoverText: 'black',\n    navButtonFocusText: 'black',\n    navButtonActiveText: '$primary',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    navButtonBg: 'transparent',\n    navButtonHoverBg: tinycolor('white').setAlpha(0.05).toHslString(),\n    navButtonHoverBg2: '$primary',\n    navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n    navButtonFocusBg2: '$primary',\n    navButtonFocusBorder: primaryColor.helpers.pickScale(11),\n    navButtonActiveBg: tinycolor('white').setAlpha(0.05).toHslString(),\n    navButtonActiveBg2: '$primary',\n    navButtonText: 'white',\n    navButtonHoverText: 'white',\n    navButtonFocusText: 'white',\n    navButtonActiveText: '$primary',\n  });\n}\n"],"mappings":";;;;AAIO,IAAA;;AAgBQ,QAAA,YAAqB,kBAAkB;EAClD,aAAa;EACb,mBAAA,GAAA,WAAA,SAA4B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACjE,mBAAmB;EACnB,mBAAA,GAAA,WAAA,SAA4B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACjE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,EAAE;EACvD,oBAAA,GAAA,WAAA,SAA6B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE,oBAAoB;EACpB,gBAAA,GAAA,WAAA,SAAyB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC9D,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;EACtB;AAEY,QAAA,WAAoB,kBAAkB;EACjD,aAAa;EACb,mBAAA,GAAA,WAAA,SAA4B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACjE,mBAAmB;EACnB,mBAAA,GAAA,WAAA,SAA4B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACjE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,GAAG;EACxD,oBAAA,GAAA,WAAA,SAA6B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE,oBAAoB;EACpB,eAAe;EACf,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;EACtB;yBACF"}

package/dist/components/Navigation/Navigation.themes.js

@@ -1,36 +1,37 @@
 import tinycolor from "tinycolor2";
+//#region components/Navigation/Navigation.themes.ts
 var Theme;
-((Theme2) => {
-  Theme2.getLight = (primaryColor) => ({
-    navButtonBg: "transparent",
-    navButtonHoverBg: tinycolor("black").setAlpha(0.04).toHslString(),
-    navButtonHoverBg2: "transparent",
-    navButtonFocusBg: tinycolor("white").setAlpha(0.15).toHslString(),
-    navButtonFocusBg2: "$primary",
-    navButtonFocusBorder: primaryColor.helpers.pickScale(8),
-    navButtonActiveBg: tinycolor("black").setAlpha(0.04).toHslString(),
-    navButtonActiveBg2: "transparent",
-    navButtonText: tinycolor("black").setAlpha(0.54).toHslString(),
-    navButtonHoverText: "black",
-    navButtonFocusText: "black",
-    navButtonActiveText: "$primary"
-  });
-  Theme2.getDark = (primaryColor) => ({
-    navButtonBg: "transparent",
-    navButtonHoverBg: tinycolor("white").setAlpha(0.05).toHslString(),
-    navButtonHoverBg2: "$primary",
-    navButtonFocusBg: tinycolor("white").setAlpha(0.15).toHslString(),
-    navButtonFocusBg2: "$primary",
-    navButtonFocusBorder: primaryColor.helpers.pickScale(11),
-    navButtonActiveBg: tinycolor("white").setAlpha(0.05).toHslString(),
-    navButtonActiveBg2: "$primary",
-    navButtonText: "white",
-    navButtonHoverText: "white",
-    navButtonFocusText: "white",
-    navButtonActiveText: "$primary"
-  });
+(function(_Theme) {
+	_Theme.getLight = (primaryColor) => ({
+		navButtonBg: "transparent",
+		navButtonHoverBg: tinycolor("black").setAlpha(.04).toHslString(),
+		navButtonHoverBg2: "transparent",
+		navButtonFocusBg: tinycolor("white").setAlpha(.15).toHslString(),
+		navButtonFocusBg2: "$primary",
+		navButtonFocusBorder: primaryColor.helpers.pickScale(8),
+		navButtonActiveBg: tinycolor("black").setAlpha(.04).toHslString(),
+		navButtonActiveBg2: "transparent",
+		navButtonText: tinycolor("black").setAlpha(.54).toHslString(),
+		navButtonHoverText: "black",
+		navButtonFocusText: "black",
+		navButtonActiveText: "$primary"
+	});
+	_Theme.getDark = (primaryColor) => ({
+		navButtonBg: "transparent",
+		navButtonHoverBg: tinycolor("white").setAlpha(.05).toHslString(),
+		navButtonHoverBg2: "$primary",
+		navButtonFocusBg: tinycolor("white").setAlpha(.15).toHslString(),
+		navButtonFocusBg2: "$primary",
+		navButtonFocusBorder: primaryColor.helpers.pickScale(11),
+		navButtonActiveBg: tinycolor("white").setAlpha(.05).toHslString(),
+		navButtonActiveBg2: "$primary",
+		navButtonText: "white",
+		navButtonHoverText: "white",
+		navButtonFocusText: "white",
+		navButtonActiveText: "$primary"
+	});
 })(Theme || (Theme = {}));
-export {
-  Theme
-};
-//# sourceMappingURL=Navigation.themes.js.map
+//#endregion
+export { Theme };
+
+//# sourceMappingURL=Navigation.themes.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Navigation.themes.js","sources":["../../../components/Navigation/Navigation.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nexport namespace Theme {\n  type Colors = {\n    navButtonBg: Property.Color;\n    navButtonHoverBg: Property.Color;\n    navButtonHoverBg2: Property.Color;\n    navButtonFocusBg: Property.Color;\n    navButtonFocusBg2: Property.Color;\n    navButtonFocusBorder: Property.Color;\n    navButtonText: Property.Color;\n    navButtonHoverText: Property.Color;\n    navButtonActiveText: Property.Color;\n    navButtonFocusText: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    navButtonBg: 'transparent',\n    navButtonHoverBg: tinycolor('black').setAlpha(0.04).toHslString(),\n    navButtonHoverBg2: 'transparent',\n    navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n    navButtonFocusBg2: '$primary',\n    navButtonFocusBorder: primaryColor.helpers.pickScale(8),\n    navButtonActiveBg: tinycolor('black').setAlpha(0.04).toHslString(),\n    navButtonActiveBg2: 'transparent',\n    navButtonText: tinycolor('black').setAlpha(0.54).toHslString(),\n    navButtonHoverText: 'black',\n    navButtonFocusText: 'black',\n    navButtonActiveText: '$primary',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    navButtonBg: 'transparent',\n    navButtonHoverBg: tinycolor('white').setAlpha(0.05).toHslString(),\n    navButtonHoverBg2: '$primary',\n    navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n    navButtonFocusBg2: '$primary',\n    navButtonFocusBorder: primaryColor.helpers.pickScale(11),\n    navButtonActiveBg: tinycolor('white').setAlpha(0.05).toHslString(),\n    navButtonActiveBg2: '$primary',\n    navButtonText: 'white',\n    navButtonHoverText: 'white',\n    navButtonFocusText: 'white',\n    navButtonActiveText: '$primary',\n  });\n}\n"],"names":["Theme"],"mappings":";AAIO,IAAU;AAAA,CAAV,CAAUA,WAAV;AAgBQA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,aAAa;AAAA,IACb,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACpD,mBAAmB;AAAA,IACnB,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACpD,mBAAmB;AAAA,IACnB,sBAAsB,aAAa,QAAQ,UAAU,CAAC;AAAA,IACtD,mBAAmB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACrD,oBAAoB;AAAA,IACpB,eAAe,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACjD,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,EAAA;AAGVA,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,aAAa;AAAA,IACb,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACpD,mBAAmB;AAAA,IACnB,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACpD,mBAAmB;AAAA,IACnB,sBAAsB,aAAa,QAAQ,UAAU,EAAE;AAAA,IACvD,mBAAmB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACrD,oBAAoB;AAAA,IACpB,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,EAAA;AACvB,GA5Ce,UAAA,QAAA,CAAA,EAAA;"}
+{"version":3,"file":"Navigation.themes.js","names":[],"sources":["../../../components/Navigation/Navigation.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nexport namespace Theme {\n  type Colors = {\n    navButtonBg: Property.Color;\n    navButtonHoverBg: Property.Color;\n    navButtonHoverBg2: Property.Color;\n    navButtonFocusBg: Property.Color;\n    navButtonFocusBg2: Property.Color;\n    navButtonFocusBorder: Property.Color;\n    navButtonText: Property.Color;\n    navButtonHoverText: Property.Color;\n    navButtonActiveText: Property.Color;\n    navButtonFocusText: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    navButtonBg: 'transparent',\n    navButtonHoverBg: tinycolor('black').setAlpha(0.04).toHslString(),\n    navButtonHoverBg2: 'transparent',\n    navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n    navButtonFocusBg2: '$primary',\n    navButtonFocusBorder: primaryColor.helpers.pickScale(8),\n    navButtonActiveBg: tinycolor('black').setAlpha(0.04).toHslString(),\n    navButtonActiveBg2: 'transparent',\n    navButtonText: tinycolor('black').setAlpha(0.54).toHslString(),\n    navButtonHoverText: 'black',\n    navButtonFocusText: 'black',\n    navButtonActiveText: '$primary',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    navButtonBg: 'transparent',\n    navButtonHoverBg: tinycolor('white').setAlpha(0.05).toHslString(),\n    navButtonHoverBg2: '$primary',\n    navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n    navButtonFocusBg2: '$primary',\n    navButtonFocusBorder: primaryColor.helpers.pickScale(11),\n    navButtonActiveBg: tinycolor('white').setAlpha(0.05).toHslString(),\n    navButtonActiveBg2: '$primary',\n    navButtonText: 'white',\n    navButtonHoverText: 'white',\n    navButtonFocusText: 'white',\n    navButtonActiveText: '$primary',\n  });\n}\n"],"mappings":";;AAIO,IAAA;;AAgBQ,QAAA,YAAqB,kBAAkB;EAClD,aAAa;EACb,kBAAkB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACjE,mBAAmB;EACnB,kBAAkB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACjE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,EAAE;EACvD,mBAAmB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE,oBAAoB;EACpB,eAAe,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC9D,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;EACtB;AAEY,QAAA,WAAoB,kBAAkB;EACjD,aAAa;EACb,kBAAkB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACjE,mBAAmB;EACnB,kBAAkB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACjE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,GAAG;EACxD,mBAAmB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE,oBAAoB;EACpB,eAAe;EACf,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;EACtB;yBACF"}