@traefik-labs/faency 12.2.0 → 12.2.2

package/dist/components/Navigation/Navigation.cjs

@@ -1,173 +1,159 @@
-"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 require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_stitches_config = require("../../stitches.config.cjs");
+const require_Elevation = require("../Elevation/Elevation.cjs");
+const require_Flex = require("../Flex/Flex.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region components/Navigation/Navigation.tsx
+var FlexWithOpacity = require_stitches_config.styled(require_Flex.Flex, {
+	opacity: .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
-  }
+var baseNavItemCss = require_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: .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 = stitches_config.styled("div", {
-  display: "flex",
-  boxSizing: "border-box",
-  flexDirection: "column"
+var NavigationContainer = require_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
-  }
+var NavigationDrawer = require_stitches_config.styled("nav", {
+	display: "flex",
+	boxSizing: "border-box",
+	padding: "$3",
+	maxWidth: "240px",
+	flexDirection: "column",
+	variants: {
+		elevation: require_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"
+var StyledLink = require_stitches_config.styled("a", baseNavItemCss, { textDecoration: "none" });
+var StyledButton = require_stitches_config.styled("button", baseNavItemCss);
+var NavigationItemWrapper = (props) => props.as === "a" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLink, { ...props }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton, {
+	type: "button",
+	...props
 });
-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 })
-  ] });
+var NavigationItem = ({ startAdornment, endAdornment, children, ...restProps }) => {
+	const hasStartAdornment = (0, react.useMemo)(() => Boolean(startAdornment), [startAdornment]);
+	const hasEndAdornment = (0, react.useMemo)(() => Boolean(endAdornment), [endAdornment]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NavigationItemWrapper, {
+		...restProps,
+		children: [
+			hasStartAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FlexWithOpacity, {
+				css: {
+					pr: "$2",
+					ml: "-$1"
+				},
+				active: restProps.active,
+				children: startAdornment
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FlexWithOpacity, {
+				css: { flexGrow: 1 },
+				active: restProps.active,
+				children
+			}),
+			hasEndAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Flex, {
+				css: {
+					pl: "$2",
+					mr: "-$1"
+				},
+				children: endAdornment
+			})
+		]
+	});
 };
-const NavigationLink = (props) => /* @__PURE__ */ jsxRuntime.jsx(NavigationItem, { as: "a", ...props });
+var NavigationLink = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationItem, {
+	as: "a",
+	...props
+});
+//#endregion
 exports.NavigationContainer = NavigationContainer;
 exports.NavigationDrawer = NavigationDrawer;
 exports.NavigationItem = NavigationItem;
 exports.NavigationLink = NavigationLink;
-//# sourceMappingURL=Navigation.cjs.map
+
+//# sourceMappingURL=Navigation.cjs.map

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

@@ -1 +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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"}
+{"version":3,"file":"Navigation.cjs","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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"}