@traefik-labs/faency 12.3.8 → 13.0.0

package/dist/components/Link/Link.themes.js

@@ -1,5 +1,5 @@
 import tinycolor from "tinycolor2";
-//#region components/Link/Link.themes.ts
+// components/Link/Link.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = (primaryColor) => ({
@@ -39,7 +39,6 @@ var Theme;
 		linkPrimaryFocusOutline: tinycolor(primaryColor.value).lighten(16).toHslString()
 	});
 })(Theme || (Theme = {}));
-//#endregion
 export { Theme };
 
 //# sourceMappingURL=Link.themes.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.themes.js","names":[],"sources":["../../../components/Link/Link.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    linkSubtle: Property.Color;\n    linkBlueTextDecoration: Property.Color;\n    linkBlueHoverTextDecoration: Property.Color;\n    linkBlueFocusOutline: Property.Color;\n    linkContrast: Property.Color;\n    linkContrastTextDecoration: Property.Color;\n    linkContrastHoverTextDecoration: Property.Color;\n    linkContrastFocusOutline: Property.Color;\n    linkSubtleTextDecoration: Property.Color;\n    linkSubtleHoverTextDecoration: Property.Color;\n    linkSubtleFocusOutline: Property.Color;\n    linkPrimary: Property.Color;\n    linkPrimaryTextDecoration: Property.Color;\n    linkPrimaryHoverTextDecoration: Property.Color;\n    linkPrimaryFocusOutline: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    linkBlue: '$blue11',\n    linkBlueTextDecoration: '$blue7',\n    linkBlueHoverTextDecoration: '$blue11',\n    linkBlueFocusOutline: '$blue8',\n    linkContrast: '$hiContrast',\n    linkContrastTextDecoration: '$slate8',\n    linkContrastHoverTextDecoration: '$hiContrast',\n    linkContrastFocusOutline: '$slate8',\n    linkSubtle: '$deepBlue7',\n    linkSubtleTextDecoration: '$deepBlue5',\n    linkSubtleHoverTextDecoration: '$deepBlue7',\n    linkSubtleFocusOutline: '$deepBlue4',\n    linkPrimary: tinycolor(primaryColor.value).darken(26).toHslString(),\n    linkPrimaryTextDecoration: tinycolor(primaryColor.value).darken(16).toHslString(),\n    linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(26).toHslString(),\n    linkPrimaryFocusOutline: tinycolor(primaryColor.value).darken(16).toHslString(),\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    linkBlue: '$blue11',\n    linkBlueTextDecoration: '$blue8',\n    linkBlueHoverTextDecoration: '$blue11',\n    linkBlueFocusOutline: '$blue8',\n    linkContrast: '$hiContrast',\n    linkContrastTextDecoration: '$slate8',\n    linkContrastHoverTextDecoration: '$hiContrast',\n    linkContrastFocusOutline: '$slate8',\n    linkSubtle: '$deepBlue6',\n    linkSubtleTextDecoration: '$deepBlue4',\n    linkSubtleHoverTextDecoration: '$deepBlue5',\n    linkSubtleFocusOutline: '$deepBlue3',\n    linkPrimary: '$primary',\n    linkPrimaryTextDecoration: tinycolor(primaryColor.value).lighten(16).toHslString(),\n    linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(20).toHslString(),\n    linkPrimaryFocusOutline: tinycolor(primaryColor.value).lighten(16).toHslString(),\n  });\n}\n"],"mappings":";;AAIO,IAAA;;CAqBQ,OAAA,YAAqB,kBAAkB;EAClD,UAAU;EACV,wBAAwB;EACxB,6BAA6B;EAC7B,sBAAsB;EACtB,cAAc;EACd,4BAA4B;EAC5B,iCAAiC;EACjC,0BAA0B;EAC1B,YAAY;EACZ,0BAA0B;EAC1B,+BAA+B;EAC/B,wBAAwB;EACxB,aAAa,UAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EAClE,2BAA2B,UAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EAChF,gCAAgC,UAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EACrF,yBAAyB,UAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;CAChF;CAEa,OAAA,WAAoB,kBAAkB;EACjD,UAAU;EACV,wBAAwB;EACxB,6BAA6B;EAC7B,sBAAsB;EACtB,cAAc;EACd,4BAA4B;EAC5B,iCAAiC;EACjC,0BAA0B;EAC1B,YAAY;EACZ,0BAA0B;EAC1B,+BAA+B;EAC/B,wBAAwB;EACxB,aAAa;EACb,2BAA2B,UAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EACjF,gCAAgC,UAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EACrF,yBAAyB,UAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;CACjF;GACD,UAAA,QAAA,CAAA,EAAD"}
+{"version":3,"file":"Link.themes.js","names":[],"sources":["../../../components/Link/Link.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    linkSubtle: Property.Color;\n    linkBlueTextDecoration: Property.Color;\n    linkBlueHoverTextDecoration: Property.Color;\n    linkBlueFocusOutline: Property.Color;\n    linkContrast: Property.Color;\n    linkContrastTextDecoration: Property.Color;\n    linkContrastHoverTextDecoration: Property.Color;\n    linkContrastFocusOutline: Property.Color;\n    linkSubtleTextDecoration: Property.Color;\n    linkSubtleHoverTextDecoration: Property.Color;\n    linkSubtleFocusOutline: Property.Color;\n    linkPrimary: Property.Color;\n    linkPrimaryTextDecoration: Property.Color;\n    linkPrimaryHoverTextDecoration: Property.Color;\n    linkPrimaryFocusOutline: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    linkBlue: '$blue11',\n    linkBlueTextDecoration: '$blue7',\n    linkBlueHoverTextDecoration: '$blue11',\n    linkBlueFocusOutline: '$blue8',\n    linkContrast: '$hiContrast',\n    linkContrastTextDecoration: '$slate8',\n    linkContrastHoverTextDecoration: '$hiContrast',\n    linkContrastFocusOutline: '$slate8',\n    linkSubtle: '$deepBlue7',\n    linkSubtleTextDecoration: '$deepBlue5',\n    linkSubtleHoverTextDecoration: '$deepBlue7',\n    linkSubtleFocusOutline: '$deepBlue4',\n    linkPrimary: tinycolor(primaryColor.value).darken(26).toHslString(),\n    linkPrimaryTextDecoration: tinycolor(primaryColor.value).darken(16).toHslString(),\n    linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(26).toHslString(),\n    linkPrimaryFocusOutline: tinycolor(primaryColor.value).darken(16).toHslString(),\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    linkBlue: '$blue11',\n    linkBlueTextDecoration: '$blue8',\n    linkBlueHoverTextDecoration: '$blue11',\n    linkBlueFocusOutline: '$blue8',\n    linkContrast: '$hiContrast',\n    linkContrastTextDecoration: '$slate8',\n    linkContrastHoverTextDecoration: '$hiContrast',\n    linkContrastFocusOutline: '$slate8',\n    linkSubtle: '$deepBlue6',\n    linkSubtleTextDecoration: '$deepBlue4',\n    linkSubtleHoverTextDecoration: '$deepBlue5',\n    linkSubtleFocusOutline: '$deepBlue3',\n    linkPrimary: '$primary',\n    linkPrimaryTextDecoration: tinycolor(primaryColor.value).lighten(16).toHslString(),\n    linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(20).toHslString(),\n    linkPrimaryFocusOutline: tinycolor(primaryColor.value).lighten(16).toHslString(),\n  });\n}\n"],"mappings":";;AAIO,IAAU;CAAV,SAAA,QAAA;CAqBQ,OAAA,YAAqB,kBAAkB;EAClD,UAAU;EACV,wBAAwB;EACxB,6BAA6B;EAC7B,sBAAsB;EACtB,cAAc;EACd,4BAA4B;EAC5B,iCAAiC;EACjC,0BAA0B;EAC1B,YAAY;EACZ,0BAA0B;EAC1B,+BAA+B;EAC/B,wBAAwB;EACxB,aAAa,UAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EAClE,2BAA2B,UAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EAChF,gCAAgC,UAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EACrF,yBAAyB,UAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;CAChF;CAEa,OAAA,WAAoB,kBAAkB;EACjD,UAAU;EACV,wBAAwB;EACxB,6BAA6B;EAC7B,sBAAsB;EACtB,cAAc;EACd,4BAA4B;EAC5B,iCAAiC;EACjC,0BAA0B;EAC1B,YAAY;EACZ,0BAA0B;EAC1B,+BAA+B;EAC/B,wBAAwB;EACxB,aAAa;EACb,2BAA2B,UAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EACjF,gCAAgC,UAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EACrF,yBAAyB,UAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;CACjF;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/List/List.cjs

@@ -6,7 +6,7 @@ const require_Button = require("../Button/Button.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/List/List.tsx
+// components/List/List.tsx
 var LIST_ITEM_CONTENT_STYLES = {
 	bc: "transparent",
 	c: "inherit",
@@ -159,7 +159,6 @@ var Li = react.default.forwardRef(({ children, controls, align, justify, directi
 		]
 	});
 });
-//#endregion
 exports.Li = Li;
 exports.Ol = Ol;
 exports.Ul = Ul;

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

@@ -1 +1 @@
-{"version":3,"file":"List.cjs","names":[],"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  width: '100%',\n  p: '$2',\n  position: 'relative',\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  // Restore left-margin indentation when a nested checkbox list is inside a li\n  'li > &:has(> li > span > input[type=\"checkbox\"])': {\n    marginLeft: '$2',\n    '> li': {\n      marginLeft: '$2',\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 parentContext = useContext(ListContext);\n    const contextValue = useMemo(\n      () => ({\n        interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n      }),\n      [interactive, parentContext.interactive],\n    );\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 parentContext = useContext(ListContext);\n    const contextValue = useMemo(\n      () => ({\n        interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n      }),\n      [interactive, parentContext.interactive],\n    );\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\n    const childArray = React.Children.toArray(children);\n    const nestedLists = childArray.filter(\n      (child) => React.isValidElement(child) && (child.type === Ul || child.type === Ol),\n    );\n    const inlineChildren = childArray.filter(\n      (child) => !(React.isValidElement(child) && (child.type === Ul || child.type === Ol)),\n    );\n\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            {inlineChildren}\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            {inlineChildren}\n          </StyledSpan>\n        )}\n        {nestedLists}\n        {!!controls && <ControlsWrapper>{controls}</ControlsWrapper>}\n      </StyledLi>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"List.cjs","names":["styled","Flex","BUTTON_BASE_STYLES","elevationVariants","createContext","React","useContext","useMemo"],"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  width: '100%',\n  p: '$2',\n  position: 'relative',\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  // Restore left-margin indentation when a nested checkbox list is inside a li\n  'li > &:has(> li > span > input[type=\"checkbox\"])': {\n    marginLeft: '$2',\n    '> li': {\n      marginLeft: '$2',\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 parentContext = useContext(ListContext);\n    const contextValue = useMemo(\n      () => ({\n        interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n      }),\n      [interactive, parentContext.interactive],\n    );\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>, VariantProps<typeof StyledOl> {\n  interactive?: boolean;\n}\n\nexport const Ol = React.forwardRef<React.ElementRef<typeof StyledOl>, OrderedListProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    const parentContext = useContext(ListContext);\n    const contextValue = useMemo(\n      () => ({\n        interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n      }),\n      [interactive, parentContext.interactive],\n    );\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\n    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\n    // eslint-disable-next-line @eslint-react/no-children-to-array\n    const childArray = React.Children.toArray(children);\n    const nestedLists = childArray.filter(\n      (child) => React.isValidElement(child) && (child.type === Ul || child.type === Ol),\n    );\n    const inlineChildren = childArray.filter(\n      (child) => !(React.isValidElement(child) && (child.type === Ul || child.type === Ol)),\n    );\n\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            {inlineChildren}\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            {inlineChildren}\n          </StyledSpan>\n        )}\n        {nestedLists}\n        {!!controls && <ControlsWrapper>{controls}</ControlsWrapper>}\n      </StyledLi>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/List/List.js

@@ -4,7 +4,7 @@ import { Flex } from "../Flex/Flex.js";
 import { BUTTON_BASE_STYLES } from "../Button/Button.js";
 import React, { createContext, useContext, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region components/List/List.tsx
+// components/List/List.tsx
 var LIST_ITEM_CONTENT_STYLES = {
 	bc: "transparent",
 	c: "inherit",
@@ -157,7 +157,6 @@ var Li = React.forwardRef(({ children, controls, align, justify, direction, gap,
 		]
 	});
 });
-//#endregion
 export { Li, Ol, Ul };
 
 //# sourceMappingURL=List.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":[],"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  width: '100%',\n  p: '$2',\n  position: 'relative',\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  // Restore left-margin indentation when a nested checkbox list is inside a li\n  'li > &:has(> li > span > input[type=\"checkbox\"])': {\n    marginLeft: '$2',\n    '> li': {\n      marginLeft: '$2',\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 parentContext = useContext(ListContext);\n    const contextValue = useMemo(\n      () => ({\n        interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n      }),\n      [interactive, parentContext.interactive],\n    );\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 parentContext = useContext(ListContext);\n    const contextValue = useMemo(\n      () => ({\n        interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n      }),\n      [interactive, parentContext.interactive],\n    );\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\n    const childArray = React.Children.toArray(children);\n    const nestedLists = childArray.filter(\n      (child) => React.isValidElement(child) && (child.type === Ul || child.type === Ol),\n    );\n    const inlineChildren = childArray.filter(\n      (child) => !(React.isValidElement(child) && (child.type === Ul || child.type === Ol)),\n    );\n\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            {inlineChildren}\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            {inlineChildren}\n          </StyledSpan>\n        )}\n        {nestedLists}\n        {!!controls && <ControlsWrapper>{controls}</ControlsWrapper>}\n      </StyledLi>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"List.js","names":[],"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  width: '100%',\n  p: '$2',\n  position: 'relative',\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  // Restore left-margin indentation when a nested checkbox list is inside a li\n  'li > &:has(> li > span > input[type=\"checkbox\"])': {\n    marginLeft: '$2',\n    '> li': {\n      marginLeft: '$2',\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 parentContext = useContext(ListContext);\n    const contextValue = useMemo(\n      () => ({\n        interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n      }),\n      [interactive, parentContext.interactive],\n    );\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>, VariantProps<typeof StyledOl> {\n  interactive?: boolean;\n}\n\nexport const Ol = React.forwardRef<React.ElementRef<typeof StyledOl>, OrderedListProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    const parentContext = useContext(ListContext);\n    const contextValue = useMemo(\n      () => ({\n        interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n      }),\n      [interactive, parentContext.interactive],\n    );\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\n    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\n    // eslint-disable-next-line @eslint-react/no-children-to-array\n    const childArray = React.Children.toArray(children);\n    const nestedLists = childArray.filter(\n      (child) => React.isValidElement(child) && (child.type === Ul || child.type === Ol),\n    );\n    const inlineChildren = childArray.filter(\n      (child) => !(React.isValidElement(child) && (child.type === Ul || child.type === Ol)),\n    );\n\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            {inlineChildren}\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            {inlineChildren}\n          </StyledSpan>\n        )}\n        {nestedLists}\n        {!!controls && <ControlsWrapper>{controls}</ControlsWrapper>}\n      </StyledLi>\n    );\n  },\n);\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-//#region components/List/List.themes.ts
+// components/List/List.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = (primaryColor) => ({
@@ -12,7 +12,6 @@ var Theme;
 		listItemFocusBorder: primaryColor.helpers.pickScale(11)
 	});
 })(Theme || (Theme = {}));
-//#endregion
 Object.defineProperty(exports, "Theme", {
 	enumerable: true,
 	get: function() {

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

@@ -1 +1 @@
-{"version":3,"file":"List.themes.cjs","names":[],"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"],"mappings":";AAIO,IAAA;;CASQ,OAAA,YAAqB,kBAAkB;EAClD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,CAAC;CACvD;CAEa,OAAA,WAAoB,kBAAkB;EACjD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,EAAE;CACxD;GACD,UAAA,QAAA,CAAA,EAAD"}
+{"version":3,"file":"List.themes.cjs","names":[],"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"],"mappings":";AAIO,IAAU;CAAV,SAAA,QAAA;CASQ,OAAA,YAAqB,kBAAkB;EAClD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,CAAC;CACvD;CAEa,OAAA,WAAoB,kBAAkB;EACjD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,EAAE;CACxD;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

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

@@ -1,4 +1,4 @@
-//#region components/List/List.themes.ts
+// components/List/List.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = (primaryColor) => ({
@@ -12,7 +12,6 @@ var Theme;
 		listItemFocusBorder: primaryColor.helpers.pickScale(11)
 	});
 })(Theme || (Theme = {}));
-//#endregion
 export { Theme };
 
 //# sourceMappingURL=List.themes.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"List.themes.js","names":[],"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"],"mappings":";AAIO,IAAA;;CASQ,OAAA,YAAqB,kBAAkB;EAClD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,CAAC;CACvD;CAEa,OAAA,WAAoB,kBAAkB;EACjD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,EAAE;CACxD;GACD,UAAA,QAAA,CAAA,EAAD"}
+{"version":3,"file":"List.themes.js","names":[],"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"],"mappings":";AAIO,IAAU;CAAV,SAAA,QAAA;CASQ,OAAA,YAAqB,kBAAkB;EAClD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,CAAC;CACvD;CAEa,OAAA,WAAoB,kBAAkB;EACjD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,EAAE;CACxD;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Navigation/Navigation.cjs

@@ -5,7 +5,7 @@ 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
+// components/Navigation/Navigation.tsx
 var FlexWithOpacity = require_stitches_config.styled(require_Flex.Flex, {
 	opacity: .74,
 	variants: { active: { true: { opacity: 1 } } }
@@ -150,7 +150,6 @@ var NavigationLink = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Navig
 	as: "a",
 	...props
 });
-//#endregion
 exports.NavigationContainer = NavigationContainer;
 exports.NavigationDrawer = NavigationDrawer;
 exports.NavigationItem = NavigationItem;

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"Navigation.cjs","names":["styled","Flex","css","elevationVariants","useMemo"],"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.js

@@ -3,7 +3,7 @@ import { elevationVariants } from "../Elevation/Elevation.js";
 import { Flex } from "../Flex/Flex.js";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region components/Navigation/Navigation.tsx
+// components/Navigation/Navigation.tsx
 var FlexWithOpacity = styled(Flex, {
 	opacity: .74,
 	variants: { active: { true: { opacity: 1 } } }
@@ -148,7 +148,6 @@ 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","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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"}
+{"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,7 +1,7 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 let tinycolor2 = require("tinycolor2");
 tinycolor2 = require_runtime.__toESM(tinycolor2, 1);
-//#region components/Navigation/Navigation.themes.ts
+// components/Navigation/Navigation.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = (primaryColor) => ({
@@ -33,7 +33,6 @@ var Theme;
 		navButtonActiveText: "$primary"
 	});
 })(Theme || (Theme = {}));
-//#endregion
 Object.defineProperty(exports, "Theme", {
 	enumerable: true,
 	get: function() {

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

@@ -1 +1 @@
-{"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;;CAgBQ,OAAA,YAAqB,kBAAkB;EAClD,aAAa;EACb,mBAAA,GAAA,WAAA,QAAA,CAA4B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,mBAAA,GAAA,WAAA,QAAA,CAA4B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,CAAC;EACtD,oBAAA,GAAA,WAAA,QAAA,CAA6B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;EACpB,gBAAA,GAAA,WAAA,QAAA,CAAyB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC7D,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;CACvB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,aAAa;EACb,mBAAA,GAAA,WAAA,QAAA,CAA4B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,mBAAA,GAAA,WAAA,QAAA,CAA4B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,EAAE;EACvD,oBAAA,GAAA,WAAA,QAAA,CAA6B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;EACpB,eAAe;EACf,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;CACvB;GACD,UAAA,QAAA,CAAA,EAAD"}
+{"version":3,"file":"Navigation.themes.cjs","names":["tinycolor"],"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,IAAU;CAAV,SAAA,QAAA;CAgBQ,OAAA,YAAqB,kBAAkB;EAClD,aAAa;EACb,mBAAA,GAAkBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,mBAAA,GAAkBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,CAAC;EACtD,oBAAA,GAAmBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;EACpB,gBAAA,GAAeA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC7D,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;CACvB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,aAAa;EACb,mBAAA,GAAkBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,mBAAA,GAAkBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,EAAE;EACvD,oBAAA,GAAmBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;EACpB,eAAe;EACf,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;CACvB;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

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

@@ -1,5 +1,5 @@
 import tinycolor from "tinycolor2";
-//#region components/Navigation/Navigation.themes.ts
+// components/Navigation/Navigation.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = (primaryColor) => ({
@@ -31,7 +31,6 @@ var Theme;
 		navButtonActiveText: "$primary"
 	});
 })(Theme || (Theme = {}));
-//#endregion
 export { Theme };
 
 //# sourceMappingURL=Navigation.themes.js.map

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

@@ -1 +1 @@
-{"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;;CAgBQ,OAAA,YAAqB,kBAAkB;EAClD,aAAa;EACb,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,CAAC;EACtD,mBAAmB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;EACpB,eAAe,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC7D,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;CACvB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,aAAa;EACb,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,EAAE;EACvD,mBAAmB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;EACpB,eAAe;EACf,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;CACvB;GACD,UAAA,QAAA,CAAA,EAAD"}
+{"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,IAAU;CAAV,SAAA,QAAA;CAgBQ,OAAA,YAAqB,kBAAkB;EAClD,aAAa;EACb,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,CAAC;EACtD,mBAAmB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;EACpB,eAAe,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC7D,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;CACvB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,aAAa;EACb,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,EAAE;EACvD,mBAAmB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;EACpB,eAAe;EACf,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;CACvB;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/NavigationMenu/NavigationMenu.cjs

@@ -7,7 +7,7 @@ react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_navigation_menu = require("@radix-ui/react-navigation-menu");
 _radix_ui_react_navigation_menu = require_runtime.__toESM(_radix_ui_react_navigation_menu, 1);
-//#region components/NavigationMenu/NavigationMenu.tsx
+// components/NavigationMenu/NavigationMenu.tsx
 var StyledRoot = require_stitches_config.styled(_radix_ui_react_navigation_menu.Root, { ul: {
 	m: 0,
 	p: 0,
@@ -51,7 +51,6 @@ var NavigationMenuItem = _radix_ui_react_navigation_menu.Item;
 var NavigationMenuLink = _radix_ui_react_navigation_menu.Link;
 var NavigationMenuList = _radix_ui_react_navigation_menu.List;
 var NavigationMenuViewport = _radix_ui_react_navigation_menu.Viewport;
-//#endregion
 exports.NavigationMenu = NavigationMenu;
 exports.NavigationMenuContent = NavigationMenuContent;
 exports.NavigationMenuIndicator = NavigationMenuIndicator;

package/dist/components/NavigationMenu/NavigationMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.cjs","names":[],"sources":["../../../components/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\nimport { panelStyles } from '../Panel';\n\n// #region Root\n\nconst StyledRoot = styled(NavigationMenuPrimitive.Root, {\n  ul: {\n    m: 0,\n    p: 0,\n    listStyleType: 'none',\n    li: {\n      position: 'relative',\n      display: 'inline',\n    },\n  },\n});\n\nexport type NavigationMenuProps = React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  children: React.ReactNode;\n  css?: CSS;\n};\n\nexport type NavigationMenuVariants = VariantProps<typeof NavigationMenu>;\n\nexport const NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof StyledRoot>,\n  NavigationMenuProps\n>(({ children, ...props }, fowardedRef) => (\n  <StyledRoot {...props} ref={fowardedRef}>\n    {children}\n  </StyledRoot>\n));\n\n// #endregion Root\n\n// #region Content\n\nconst StyledContent = styled(NavigationMenuPrimitive.Content, panelStyles, {\n  position: 'absolute',\n  left: 0,\n  zIndex: 1,\n  p: '$2',\n  color: '$hiContrast',\n  '&:focus': {\n    outline: 'none',\n  },\n  variants: {\n    elevation: elevationVariants,\n  },\n  defaultVariants: {\n    elevation: 2,\n  },\n});\n\ntype NavigationMenuPrimitiveContentProps = Omit<\n  React.ComponentProps<typeof NavigationMenuPrimitive.Content>,\n  'as'\n>;\n\nexport type NavigationMenuContentProps = NavigationMenuPrimitiveContentProps &\n  VariantProps<typeof StyledContent> & {\n    css?: CSS;\n  };\n\nexport const NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof StyledContent>,\n  NavigationMenuContentProps\n>(({ children, elevation, ...props }, fowardedRef) => (\n  <StyledContent elevation={elevation} {...props} ref={fowardedRef}>\n    {children}\n  </StyledContent>\n));\n\n// #endregion Content\n\n// #region Trigger\n\nconst StyledTrigger = styled(NavigationMenuPrimitive.Trigger, {\n  backgroundColor: 'transparent',\n  border: 'none',\n});\n\nexport type NavigationMenuTriggerProps = React.ComponentProps<\n  typeof NavigationMenuPrimitive.Trigger\n> &\n  VariantProps<typeof StyledContent> & {\n    css?: CSS;\n  };\n\nexport const NavigationMenuTrigger = ({ children, ...props }: NavigationMenuTriggerProps) => (\n  <StyledTrigger {...props}>{children}</StyledTrigger>\n);\n\n// #endregion Trigger\n\nexport const NavigationMenuIndicator = NavigationMenuPrimitive.Indicator;\nexport const NavigationMenuItem = NavigationMenuPrimitive.Item;\nexport const NavigationMenuLink = NavigationMenuPrimitive.Link;\nexport const NavigationMenuList = NavigationMenuPrimitive.List;\nexport const NavigationMenuViewport = NavigationMenuPrimitive.Viewport;\n"],"mappings":";;;;;;;;;;AASA,IAAM,aAAa,wBAAA,OAAO,gCAAwB,MAAM,EACtD,IAAI;CACF,GAAG;CACH,GAAG;CACH,eAAe;CACf,IAAI;EACF,UAAU;EACV,SAAS;CACX;AACF,EACF,CAAC;AASD,IAAa,iBAAiB,MAAA,QAAM,YAGjC,EAAE,UAAU,GAAG,SAAS,gBACzB,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;CAAY,GAAI;CAAO,KAAK;CACzB;AACS,CAAA,CACb;AAMD,IAAM,gBAAgB,wBAAA,OAAO,gCAAwB,SAAS,cAAA,aAAa;CACzE,UAAU;CACV,MAAM;CACN,QAAQ;CACR,GAAG;CACH,OAAO;CACP,WAAW,EACT,SAAS,OACX;CACA,UAAU,EACR,WAAW,kBAAA,kBACb;CACA,iBAAiB,EACf,WAAW,EACb;AACF,CAAC;AAYD,IAAa,wBAAwB,MAAA,QAAM,YAGxC,EAAE,UAAU,WAAW,GAAG,SAAS,gBACpC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;CAA0B;CAAW,GAAI;CAAO,KAAK;CAClD;AACY,CAAA,CAChB;AAMD,IAAM,gBAAgB,wBAAA,OAAO,gCAAwB,SAAS;CAC5D,iBAAiB;CACjB,QAAQ;AACV,CAAC;AASD,IAAa,yBAAyB,EAAE,UAAU,GAAG,YACnD,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;CAAe,GAAI;CAAQ;AAAwB,CAAA;AAKrD,IAAa,0BAA0B,gCAAwB;AAC/D,IAAa,qBAAqB,gCAAwB;AAC1D,IAAa,qBAAqB,gCAAwB;AAC1D,IAAa,qBAAqB,gCAAwB;AAC1D,IAAa,yBAAyB,gCAAwB"}
+{"version":3,"file":"NavigationMenu.cjs","names":["styled","NavigationMenuPrimitive","React","panelStyles","elevationVariants"],"sources":["../../../components/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\nimport { panelStyles } from '../Panel';\n\n// #region Root\n\nconst StyledRoot = styled(NavigationMenuPrimitive.Root, {\n  ul: {\n    m: 0,\n    p: 0,\n    listStyleType: 'none',\n    li: {\n      position: 'relative',\n      display: 'inline',\n    },\n  },\n});\n\nexport type NavigationMenuProps = React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  children: React.ReactNode;\n  css?: CSS;\n};\n\nexport type NavigationMenuVariants = VariantProps<typeof NavigationMenu>;\n\nexport const NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof StyledRoot>,\n  NavigationMenuProps\n>(({ children, ...props }, fowardedRef) => (\n  <StyledRoot {...props} ref={fowardedRef}>\n    {children}\n  </StyledRoot>\n));\n\n// #endregion Root\n\n// #region Content\n\nconst StyledContent = styled(NavigationMenuPrimitive.Content, panelStyles, {\n  position: 'absolute',\n  left: 0,\n  zIndex: 1,\n  p: '$2',\n  color: '$hiContrast',\n  '&:focus': {\n    outline: 'none',\n  },\n  variants: {\n    elevation: elevationVariants,\n  },\n  defaultVariants: {\n    elevation: 2,\n  },\n});\n\ntype NavigationMenuPrimitiveContentProps = Omit<\n  React.ComponentProps<typeof NavigationMenuPrimitive.Content>,\n  'as'\n>;\n\nexport type NavigationMenuContentProps = NavigationMenuPrimitiveContentProps &\n  VariantProps<typeof StyledContent> & {\n    css?: CSS;\n  };\n\nexport const NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof StyledContent>,\n  NavigationMenuContentProps\n>(({ children, elevation, ...props }, fowardedRef) => (\n  <StyledContent elevation={elevation} {...props} ref={fowardedRef}>\n    {children}\n  </StyledContent>\n));\n\n// #endregion Content\n\n// #region Trigger\n\nconst StyledTrigger = styled(NavigationMenuPrimitive.Trigger, {\n  backgroundColor: 'transparent',\n  border: 'none',\n});\n\nexport type NavigationMenuTriggerProps = React.ComponentProps<\n  typeof NavigationMenuPrimitive.Trigger\n> &\n  VariantProps<typeof StyledContent> & {\n    css?: CSS;\n  };\n\nexport const NavigationMenuTrigger = ({ children, ...props }: NavigationMenuTriggerProps) => (\n  <StyledTrigger {...props}>{children}</StyledTrigger>\n);\n\n// #endregion Trigger\n\nexport const NavigationMenuIndicator = NavigationMenuPrimitive.Indicator;\nexport const NavigationMenuItem = NavigationMenuPrimitive.Item;\nexport const NavigationMenuLink = NavigationMenuPrimitive.Link;\nexport const NavigationMenuList = NavigationMenuPrimitive.List;\nexport const NavigationMenuViewport = NavigationMenuPrimitive.Viewport;\n"],"mappings":";;;;;;;;;;AASA,IAAM,aAAaA,wBAAAA,OAAOC,gCAAwB,MAAM,EACtD,IAAI;CACF,GAAG;CACH,GAAG;CACH,eAAe;CACf,IAAI;EACF,UAAU;EACV,SAAS;CACX;AACF,EACF,CAAC;AASD,IAAa,iBAAiBC,MAAAA,QAAM,YAGjC,EAAE,UAAU,GAAG,SAAS,gBACzB,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;CAAY,GAAI;CAAO,KAAK;CACzB;AACS,CAAA,CACb;AAMD,IAAM,gBAAgBF,wBAAAA,OAAOC,gCAAwB,SAASE,cAAAA,aAAa;CACzE,UAAU;CACV,MAAM;CACN,QAAQ;CACR,GAAG;CACH,OAAO;CACP,WAAW,EACT,SAAS,OACX;CACA,UAAU,EACR,WAAWC,kBAAAA,kBACb;CACA,iBAAiB,EACf,WAAW,EACb;AACF,CAAC;AAYD,IAAa,wBAAwBF,MAAAA,QAAM,YAGxC,EAAE,UAAU,WAAW,GAAG,SAAS,gBACpC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;CAA0B;CAAW,GAAI;CAAO,KAAK;CAClD;AACY,CAAA,CAChB;AAMD,IAAM,gBAAgBF,wBAAAA,OAAOC,gCAAwB,SAAS;CAC5D,iBAAiB;CACjB,QAAQ;AACV,CAAC;AASD,IAAa,yBAAyB,EAAE,UAAU,GAAG,YACnD,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;CAAe,GAAI;CAAQ;AAAwB,CAAA;AAKrD,IAAa,0BAA0BA,gCAAwB;AAC/D,IAAa,qBAAqBA,gCAAwB;AAC1D,IAAa,qBAAqBA,gCAAwB;AAC1D,IAAa,qBAAqBA,gCAAwB;AAC1D,IAAa,yBAAyBA,gCAAwB"}

package/dist/components/NavigationMenu/NavigationMenu.js

@@ -4,7 +4,7 @@ import { panelStyles } from "../Panel/Panel.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-//#region components/NavigationMenu/NavigationMenu.tsx
+// components/NavigationMenu/NavigationMenu.tsx
 var StyledRoot = styled(NavigationMenuPrimitive.Root, { ul: {
 	m: 0,
 	p: 0,
@@ -48,7 +48,6 @@ var NavigationMenuItem = NavigationMenuPrimitive.Item;
 var NavigationMenuLink = NavigationMenuPrimitive.Link;
 var NavigationMenuList = NavigationMenuPrimitive.List;
 var NavigationMenuViewport = NavigationMenuPrimitive.Viewport;
-//#endregion
 export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport };
 
 //# sourceMappingURL=NavigationMenu.js.map

package/dist/components/NavigationTree/NavigationTreeContainer.cjs

@@ -1,24 +1,29 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_Navigation = require("../Navigation/Navigation.cjs");
+const require_NavigationTreeContext = require("./NavigationTreeContext.cjs");
 let _radix_ui_react_icons = require("@radix-ui/react-icons");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/NavigationTree/NavigationTreeContainer.tsx
+// components/NavigationTree/NavigationTreeContainer.tsx
 var NavigationTreeContainer = ({ children, defaultCollapseIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_icons.ChevronDownIcon, {}), defaultExpandIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_icons.ChevronRightIcon, {}), fullWidth = false, ...props }) => {
-	const renderChildren = react.default.Children.map(children, (child) => {
-		return react.default.cloneElement(child, {
-			defaultCollapseIcon,
-			defaultExpandIcon,
-			fullWidth
-		});
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Navigation.NavigationContainer, {
-		...props,
-		children: renderChildren
+	const contextValue = (0, react.useMemo)(() => ({
+		defaultCollapseIcon,
+		defaultExpandIcon,
+		fullWidth
+	}), [
+		defaultCollapseIcon,
+		defaultExpandIcon,
+		fullWidth
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NavigationTreeContext.NavigationTreeContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Navigation.NavigationContainer, {
+			...props,
+			children
+		})
 	});
 };
-//#endregion
 exports.NavigationTreeContainer = NavigationTreeContainer;
 
 //# sourceMappingURL=NavigationTreeContainer.cjs.map

package/dist/components/NavigationTree/NavigationTreeContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationTreeContainer.cjs","names":[],"sources":["../../../components/NavigationTree/NavigationTreeContainer.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { CSS } from '../../stitches.config';\nimport { NavigationContainer, NavigationContainerProps } from '../Navigation';\n\nexport interface NavigationTreeProps {\n  children: React.ReactNode;\n  defaultExpandIcon?: React.ReactNode;\n  defaultCollapseIcon?: React.ReactNode;\n  css?: CSS;\n  fullWidth?: boolean;\n}\n\nexport const NavigationTreeContainer = ({\n  children,\n  defaultCollapseIcon = <ChevronDownIcon />,\n  defaultExpandIcon = <ChevronRightIcon />,\n  fullWidth = false,\n  ...props\n}: NavigationTreeProps & NavigationContainerProps) => {\n  const renderChildren = React.Children.map(children, (child) => {\n    return React.cloneElement(child as React.ReactElement, {\n      defaultCollapseIcon,\n      defaultExpandIcon,\n      fullWidth,\n    });\n  });\n\n  return <NavigationContainer {...props}>{renderChildren}</NavigationContainer>;\n};\n"],"mappings":";;;;;;;AAcA,IAAa,2BAA2B,EACtC,UACA,sBAAsB,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,iBAAD,CAAkB,CAAA,GACxC,oBAAoB,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,kBAAD,CAAmB,CAAA,GACvC,YAAY,OACZ,GAAG,YACiD;CACpD,MAAM,iBAAiB,MAAA,QAAM,SAAS,IAAI,WAAW,UAAU;EAC7D,OAAO,MAAA,QAAM,aAAa,OAA6B;GACrD;GACA;GACA;EACF,CAAC;CACH,CAAC;CAED,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAA,qBAAD;EAAqB,GAAI;YAAQ;CAAoC,CAAA;AAC9E"}
+{"version":3,"file":"NavigationTreeContainer.cjs","names":["ChevronDownIcon","ChevronRightIcon","useMemo","NavigationTreeContext","NavigationContainer"],"sources":["../../../components/NavigationTree/NavigationTreeContainer.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons';\nimport React, { useMemo } from 'react';\n\nimport { CSS } from '../../stitches.config';\nimport { NavigationContainer, NavigationContainerProps } from '../Navigation';\nimport { NavigationTreeContext } from './NavigationTreeContext';\n\nexport interface NavigationTreeProps {\n  children: React.ReactNode;\n  defaultExpandIcon?: React.ReactNode;\n  defaultCollapseIcon?: React.ReactNode;\n  css?: CSS;\n  fullWidth?: boolean;\n}\n\nexport const NavigationTreeContainer = ({\n  children,\n  defaultCollapseIcon = <ChevronDownIcon />,\n  defaultExpandIcon = <ChevronRightIcon />,\n  fullWidth = false,\n  ...props\n}: NavigationTreeProps & NavigationContainerProps) => {\n  const contextValue = useMemo(\n    () => ({ defaultCollapseIcon, defaultExpandIcon, fullWidth }),\n    [defaultCollapseIcon, defaultExpandIcon, fullWidth],\n  );\n\n  return (\n    <NavigationTreeContext.Provider value={contextValue}>\n      <NavigationContainer {...props}>{children}</NavigationContainer>\n    </NavigationTreeContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;;AAeA,IAAa,2BAA2B,EACtC,UACA,sBAAsB,iBAAA,GAAA,kBAAA,IAAA,CAACA,sBAAAA,iBAAD,CAAkB,CAAA,GACxC,oBAAoB,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,kBAAD,CAAmB,CAAA,GACvC,YAAY,OACZ,GAAG,YACiD;CACpD,MAAM,gBAAA,GAAeC,MAAAA,QAAAA,QACZ;EAAE;EAAqB;EAAmB;CAAU,IAC3D;EAAC;EAAqB;EAAmB;CAAS,CACpD;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,sBAAsB,UAAvB;EAAgC,OAAO;EACrC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,qBAAD;GAAqB,GAAI;GAAQ;EAA8B,CAAA;CACjC,CAAA;AAEpC"}

package/dist/components/NavigationTree/NavigationTreeContainer.js

@@ -1,22 +1,27 @@
 import { NavigationContainer } from "../Navigation/Navigation.js";
+import { NavigationTreeContext } from "./NavigationTreeContext.js";
 import { ChevronDownIcon, ChevronRightIcon } from "@radix-ui/react-icons";
-import React from "react";
+import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region components/NavigationTree/NavigationTreeContainer.tsx
+// components/NavigationTree/NavigationTreeContainer.tsx
 var NavigationTreeContainer = ({ children, defaultCollapseIcon = /* @__PURE__ */ jsx(ChevronDownIcon, {}), defaultExpandIcon = /* @__PURE__ */ jsx(ChevronRightIcon, {}), fullWidth = false, ...props }) => {
-	const renderChildren = React.Children.map(children, (child) => {
-		return React.cloneElement(child, {
-			defaultCollapseIcon,
-			defaultExpandIcon,
-			fullWidth
-		});
-	});
-	return /* @__PURE__ */ jsx(NavigationContainer, {
-		...props,
-		children: renderChildren
+	const contextValue = useMemo(() => ({
+		defaultCollapseIcon,
+		defaultExpandIcon,
+		fullWidth
+	}), [
+		defaultCollapseIcon,
+		defaultExpandIcon,
+		fullWidth
+	]);
+	return /* @__PURE__ */ jsx(NavigationTreeContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(NavigationContainer, {
+			...props,
+			children
+		})
 	});
 };
-//#endregion
 export { NavigationTreeContainer };
 
 //# sourceMappingURL=NavigationTreeContainer.js.map

package/dist/components/NavigationTree/NavigationTreeContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationTreeContainer.js","names":[],"sources":["../../../components/NavigationTree/NavigationTreeContainer.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { CSS } from '../../stitches.config';\nimport { NavigationContainer, NavigationContainerProps } from '../Navigation';\n\nexport interface NavigationTreeProps {\n  children: React.ReactNode;\n  defaultExpandIcon?: React.ReactNode;\n  defaultCollapseIcon?: React.ReactNode;\n  css?: CSS;\n  fullWidth?: boolean;\n}\n\nexport const NavigationTreeContainer = ({\n  children,\n  defaultCollapseIcon = <ChevronDownIcon />,\n  defaultExpandIcon = <ChevronRightIcon />,\n  fullWidth = false,\n  ...props\n}: NavigationTreeProps & NavigationContainerProps) => {\n  const renderChildren = React.Children.map(children, (child) => {\n    return React.cloneElement(child as React.ReactElement, {\n      defaultCollapseIcon,\n      defaultExpandIcon,\n      fullWidth,\n    });\n  });\n\n  return <NavigationContainer {...props}>{renderChildren}</NavigationContainer>;\n};\n"],"mappings":";;;;;AAcA,IAAa,2BAA2B,EACtC,UACA,sBAAsB,oBAAC,iBAAD,CAAkB,CAAA,GACxC,oBAAoB,oBAAC,kBAAD,CAAmB,CAAA,GACvC,YAAY,OACZ,GAAG,YACiD;CACpD,MAAM,iBAAiB,MAAM,SAAS,IAAI,WAAW,UAAU;EAC7D,OAAO,MAAM,aAAa,OAA6B;GACrD;GACA;GACA;EACF,CAAC;CACH,CAAC;CAED,OAAO,oBAAC,qBAAD;EAAqB,GAAI;YAAQ;CAAoC,CAAA;AAC9E"}
+{"version":3,"file":"NavigationTreeContainer.js","names":[],"sources":["../../../components/NavigationTree/NavigationTreeContainer.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons';\nimport React, { useMemo } from 'react';\n\nimport { CSS } from '../../stitches.config';\nimport { NavigationContainer, NavigationContainerProps } from '../Navigation';\nimport { NavigationTreeContext } from './NavigationTreeContext';\n\nexport interface NavigationTreeProps {\n  children: React.ReactNode;\n  defaultExpandIcon?: React.ReactNode;\n  defaultCollapseIcon?: React.ReactNode;\n  css?: CSS;\n  fullWidth?: boolean;\n}\n\nexport const NavigationTreeContainer = ({\n  children,\n  defaultCollapseIcon = <ChevronDownIcon />,\n  defaultExpandIcon = <ChevronRightIcon />,\n  fullWidth = false,\n  ...props\n}: NavigationTreeProps & NavigationContainerProps) => {\n  const contextValue = useMemo(\n    () => ({ defaultCollapseIcon, defaultExpandIcon, fullWidth }),\n    [defaultCollapseIcon, defaultExpandIcon, fullWidth],\n  );\n\n  return (\n    <NavigationTreeContext.Provider value={contextValue}>\n      <NavigationContainer {...props}>{children}</NavigationContainer>\n    </NavigationTreeContext.Provider>\n  );\n};\n"],"mappings":";;;;;;AAeA,IAAa,2BAA2B,EACtC,UACA,sBAAsB,oBAAC,iBAAD,CAAkB,CAAA,GACxC,oBAAoB,oBAAC,kBAAD,CAAmB,CAAA,GACvC,YAAY,OACZ,GAAG,YACiD;CACpD,MAAM,eAAe,eACZ;EAAE;EAAqB;EAAmB;CAAU,IAC3D;EAAC;EAAqB;EAAmB;CAAS,CACpD;CAEA,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;EACrC,UAAA,oBAAC,qBAAD;GAAqB,GAAI;GAAQ;EAA8B,CAAA;CACjC,CAAA;AAEpC"}