@traefik-labs/faency 12.2.1 → 12.2.2

package/dist/components/List/List.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../../components/List/List.tsx"],"sourcesContent":["import React, { ComponentProps, createContext, ReactNode, useContext, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { BUTTON_BASE_STYLES } from '../Button';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\n\nconst LIST_ITEM_CONTENT_STYLES = {\n  bc: 'transparent',\n  c: 'inherit',\n  borderRadius: 'inherit',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontVariantNumeric: 'tabular-nums',\n};\n\nconst StyledSpan = styled('span', Flex, {\n  // APPLY BUTTON STYLES\n  ...LIST_ITEM_CONTENT_STYLES,\n  // CUSTOM\n  p: '$1',\n  gap: '$1',\n});\n\nconst StyledListItemButton = styled('button', Flex, {\n  ...BUTTON_BASE_STYLES,\n  ...LIST_ITEM_CONTENT_STYLES,\n  outline: 'none',\n\n  // CUSTOM\n  flexGrow: 1,\n  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"],"names":[],"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>,\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":";;;;;;;AAOA,IAAM,2BAA2B;CAC/B,IAAI;CACJ,GAAG;CACH,cAAc;CACd,YAAY;CACZ,UAAU;CACV,oBAAoB;CACrB;AAED,IAAM,aAAa,OAAO,QAAQ,MAAM;CAEtC,GAAG;CAEH,GAAG;CACH,KAAK;CACN,CAAC;AAEF,IAAM,uBAAuB,OAAO,UAAU,MAAM;CAClD,GAAG;CACH,GAAG;CACH,SAAS;CAGT,UAAU;CACV,OAAO;CACP,GAAG;CACH,UAAU;CACV,aAAa;EACX,cAAc;EACd,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACR;CACD,YAAY;EACV,cAAc;EACd,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACR;CACD,4BAA4B,EAC1B,WAAW,+CACZ;CAED,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,oBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF,EACF;CACD,YAAY;EACV,aAAa,EACX,iBAAiB,qBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF;CACF,CAAC;AAEF,IAAM,WAAW,OAAO,MAAM;CAC5B,GAAG;CACH,SAAS;CACT,UAAU;CACV,kBAAkB,EAChB,WAAW,QACZ;CACD,UAAU,EACR,WAAW,mBACZ;CACD,iBAAiB,EACf,WAAW,KACZ;CACF,CAAC;AAEF,IAAM,WAAW,OAAO,MAAM;CAC5B,GAAG;CACH,GAAG;CACH,OAAO;CAEP,iDAA+C;EAC7C,GAAG;EACH,WAAW;EACX,QAAQ;GACN,YAAY;GACZ,UAAU,EACR,OAAO,EACL,QAAQ,aACT,EACF;GACF;EACF;CAED,sDAAoD;EAClD,YAAY;EACZ,QAAQ,EACN,YAAY,MACb;EACF;CACF,CAAC;AAEF,IAAM,WAAW,OAAO,MAAM;CAC5B,GAAG;CACH,GAAG;CACH,OAAO;CAEP,gBAAgB;EACd,UAAU;EACV,YAAY;EACb;CACF,CAAC;AAEF,IAAM,cAAc,cAAc,EAChC,aAAa,OACd,CAAC;AAKF,IAAa,KAAK,MAAM,YACrB,EAAE,aAAa,GAAG,SAAS,iBAAiB;CAC3C,MAAM,gBAAgB,WAAW,YAAY;CAC7C,MAAM,eAAe,eACZ,EACL,aAAa,gBAAgB,KAAA,IAAY,CAAC,CAAC,cAAc,cAAc,aACxE,GACD,CAAC,aAAa,cAAc,YAAY,CACzC;AAED,QACE,oBAAC,YAAY,UAAb;EAAsB,OAAO;YAC3B,oBAAC,UAAD;GAAU,MAAK;GAAO,KAAK;GAAc,GAAI;GAAS,CAAA;EACjC,CAAA;EAG5B;AAQD,IAAa,KAAK,MAAM,YACrB,EAAE,aAAa,GAAG,SAAS,iBAAiB;CAC3C,MAAM,gBAAgB,WAAW,YAAY;CAC7C,MAAM,eAAe,eACZ,EACL,aAAa,gBAAgB,KAAA,IAAY,CAAC,CAAC,cAAc,cAAc,aACxE,GACD,CAAC,aAAa,cAAc,YAAY,CACzC;AAED,QACE,oBAAC,YAAY,UAAb;EAAsB,OAAO;YAC3B,oBAAC,UAAD;GAAU,MAAK;GAAO,KAAK;GAAc,GAAI;GAAS,CAAA;EACjC,CAAA;EAG5B;AAED,IAAM,kBAAkB,OAAO,OAAO;CACpC,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACX,CAAC;AAQF,IAAa,KAAK,MAAM,YACrB,EAAE,UAAU,UAAU,OAAO,SAAS,WAAW,KAAK,MAAM,GAAG,SAAS,iBAAiB;CACxF,MAAM,EAAE,gBAAgB,WAAW,YAAY;CAE/C,MAAM,aAAa,MAAM,SAAS,QAAQ,SAAS;CACnD,MAAM,cAAc,WAAW,QAC5B,UAAU,MAAM,eAAe,MAAM,KAAK,MAAM,SAAS,MAAM,MAAM,SAAS,IAChF;CACD,MAAM,iBAAiB,WAAW,QAC/B,UAAU,EAAE,MAAM,eAAe,MAAM,KAAK,MAAM,SAAS,MAAM,MAAM,SAAS,KAClF;AAED,QACE,qBAAC,UAAD;EAAU,GAAI;EAAO,KAAK;YAA1B;GACG,cACC,oBAAC,sBAAD;IACS;IACE;IACE;IACN;IACC;cAEL;IACoB,CAAA,GAEvB,oBAAC,YAAD;IACE,OAAO,SAAS;IACP;IACE;IACN;IACC;IACN,KAAK,EAAE,UAAU,GAAG;cAEnB;IACU,CAAA;GAEd;GACA,CAAC,CAAC,YAAY,oBAAC,iBAAD,EAAA,UAAkB,UAA2B,CAAA;GACnD;;EAGhB"}

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

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

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

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

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

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

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

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