@atom-learning/components 9.0.0-beta.5 → 10.0.0

package/dist/components/segmented-control/SegmentedControlItemList.js

@@ -2,6 +2,7 @@ import { styled } from "../../styled.js";
 import { Tabs } from "../tabs/Tabs.js";
 import { SegmentedControlContext } from "./SegmentedControl.context.js";
 import * as React$1 from "react";
+import { composeRefs } from "@radix-ui/react-compose-refs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControlItemList.tsx
 var StyledTriggerList = styled(Tabs.TriggerList, {
@@ -34,7 +35,7 @@ var SelectionIndicator = styled("div", {
 	} }
 });
 var SegmentedControlItemList = (props) => {
-	const { theme, defaultValue, value } = React$1.useContext(SegmentedControlContext);
+	const { theme, defaultValue, value } = React$1.use(SegmentedControlContext);
 	const tabsRef = React$1.useRef([]);
 	const selectedIndex = React$1.Children.toArray(props.children).findIndex((child) => child?.props.value === value);
 	const [indicatorStyles, setIndicatorStyles] = React$1.useState({
@@ -53,26 +54,28 @@ var SegmentedControlItemList = (props) => {
 			width: Math.round(width)
 		});
 	}, [selectedIndex]);
+	const updateIndicatorPositionRef = React$1.useRef(updateIndicatorPosition);
+	React$1.useLayoutEffect(() => {
+		updateIndicatorPositionRef.current = updateIndicatorPosition;
+	});
+	const tabCount = React$1.Children.count(props.children);
 	React$1.useEffect(() => {
-		const resizeObserver = new ResizeObserver(updateIndicatorPosition);
-		const currentTabs = tabsRef.current;
-		currentTabs.forEach((tab) => {
+		const resizeObserver = new ResizeObserver(() => updateIndicatorPositionRef.current());
+		tabsRef.current.forEach((tab) => {
 			if (tab) resizeObserver.observe(tab);
 		});
 		return () => {
-			currentTabs.forEach((tab) => {
-				if (tab) resizeObserver.unobserve(tab);
-			});
 			resizeObserver.disconnect();
 		};
-	}, [selectedIndex, updateIndicatorPosition]);
+	}, [tabCount]);
 	React$1.useEffect(() => {
-		window.addEventListener("resize", updateIndicatorPosition);
+		const handleResize = () => updateIndicatorPositionRef.current();
+		window.addEventListener("resize", handleResize);
 		return () => {
-			window.removeEventListener("resize", updateIndicatorPosition);
+			window.removeEventListener("resize", handleResize);
 		};
-	}, [updateIndicatorPosition]);
-	React$1.useEffect(() => {
+	}, []);
+	React$1.useLayoutEffect(() => {
 		updateIndicatorPosition();
 	}, [selectedIndex, updateIndicatorPosition]);
 	return /* @__PURE__ */ jsxs(StyledTriggerList, {
@@ -89,9 +92,12 @@ var SegmentedControlItemList = (props) => {
 					setHasInteracted(true);
 					if (child.props.onClick) child.props.onClick(e);
 				},
-				ref: (el) => {
+				ref: composeRefs(child.props.ref, (el) => {
 					tabsRef.current[index] = el;
-				}
+					return () => {
+						tabsRef.current[index] = null;
+					};
+				})
 			});
 		})]
 	});

package/dist/components/segmented-control/SegmentedControlItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItemList.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  base: [\n    'relative',\n    'p-1',\n    'rounded-lg',\n    'overflow-hidden',\n    '[&>div[role=tablist]]:relative',\n    '[&>button]:z-2'\n  ],\n  variants: {\n    theme: {\n      primary: ['bg-primary-200'],\n      marsh: ['bg-marsh-200']\n    }\n  }\n})\n\nconst SelectionIndicator = styled('div', {\n  base: ['absolute', 'bg-white', 'rounded-md'],\n  variants: {\n    interacted: {\n      true: ['duration-300', 'ease-in', 'transition-all'],\n      false: ['transition-none']\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n) => {\n  const { theme, defaultValue, value } = React.useContext(\n    SegmentedControlContext\n  )\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const selectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) =>\n      (\n        child as React.ReactElement<\n          React.ComponentProps<typeof SegmentedControlItem>\n        >\n      )?.props.value === value\n  )\n\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({\n      left: Math.round(currentTab.offsetLeft),\n      height: Math.round(height),\n      width: Math.round(width)\n    })\n  }, [selectedIndex])\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      currentTabs.forEach((tab) => {\n        if (tab) resizeObserver.unobserve(tab)\n      })\n      resizeObserver.disconnect()\n    }\n  }, [selectedIndex, updateIndicatorPosition])\n\n  React.useEffect(() => {\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [updateIndicatorPosition])\n\n  React.useEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n      <SelectionIndicator interacted={hasInteracted} style={indicatorStyles} />\n      {React.Children.map(props.children, (child, index) => {\n        if (\n          !React.isValidElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >(child)\n        ) {\n          throw new Error(\n            `Child passed to SegmentedControlItemList is not a valid element`\n          )\n        }\n\n        return React.cloneElement(child, {\n          onClick: (e) => {\n            setHasInteracted(true)\n            if (child.props.onClick) child.props.onClick(e)\n          },\n          ref: (el: HTMLElement | null) => {\n            tabsRef.current[index] = el\n          }\n        })\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAM,oBAAoB,OAAO,KAAK,aAAa;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,OAAO;EACL,SAAS,CAAC,gBAAgB;EAC1B,OAAO,CAAC,cAAc;CACxB,EACF;AACF,CAAC;AAED,IAAM,qBAAqB,OAAO,OAAO;CACvC,MAAM;EAAC;EAAY;EAAY;CAAY;CAC3C,UAAU,EACR,YAAY;EACV,MAAM;GAAC;GAAgB;GAAW;EAAgB;EAClD,OAAO,CAAC,iBAAiB;CAC3B,EACF;AACF,CAAC;AAED,IAAa,4BACX,UACG;CACH,MAAM,EAAE,OAAO,cAAc,UAAU,QAAM,WAC3C,uBACF;CAEA,MAAM,UAAU,QAAM,OAA+B,CAAC,CAAC;CAEvD,MAAM,gBAAgB,QAAM,SAAS,QAAQ,MAAM,QAAQ,CAAC,CAAC,WAC1D,UAEG,OAGC,MAAM,UAAU,KACvB;CAEA,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAAS;EAC3D,MAAM;EACN,QAAQ;EACR,OAAO;CACT,CAAC;CACD,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAE9D,MAAM,0BAA0B,QAAM,kBAAkB;EACtD,MAAM,aAAa,QAAQ,QAAQ;EACnC,IAAI,CAAC,YAAY;EAEjB,MAAM,EAAE,OAAO,WAAW,WAAW,sBAAsB;EAC3D,mBAAmB;GACjB,MAAM,KAAK,MAAM,WAAW,UAAU;GACtC,QAAQ,KAAK,MAAM,MAAM;GACzB,OAAO,KAAK,MAAM,KAAK;EACzB,CAAC;CACH,GAAG,CAAC,aAAa,CAAC;CAElB,QAAM,gBAAgB;EACpB,MAAM,iBAAiB,IAAI,eAAe,uBAAuB;EACjE,MAAM,cAAc,QAAQ;EAC5B,YAAY,SAAS,QAAQ;GAC3B,IAAI,KAAK,eAAe,QAAQ,GAAG;EACrC,CAAC;EAED,aAAa;GACX,YAAY,SAAS,QAAQ;IAC3B,IAAI,KAAK,eAAe,UAAU,GAAG;GACvC,CAAC;GACD,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,eAAe,uBAAuB,CAAC;CAE3C,QAAM,gBAAgB;EACpB,OAAO,iBAAiB,UAAU,uBAAuB;EACzD,aAAa;GACX,OAAO,oBAAoB,UAAU,uBAAuB;EAC9D;CACF,GAAG,CAAC,uBAAuB,CAAC;CAE5B,QAAM,gBAAgB;EACpB,wBAAwB;CAC1B,GAAG,CAAC,eAAe,uBAAuB,CAAC;CAE3C,OACE,qBAAC,mBAAD;EAA0B;EAAqB;EAAc,GAAI;YAAjE,CACE,oBAAC,oBAAD;GAAoB,YAAY;GAAe,OAAO;EAAkB,CAAA,GACvE,QAAM,SAAS,IAAI,MAAM,WAAW,OAAO,UAAU;GACpD,IACE,CAAC,QAAM,eAEL,KAAK,GAEP,MAAM,IAAI,MACR,iEACF;GAGF,OAAO,QAAM,aAAa,OAAO;IAC/B,UAAU,MAAM;KACd,iBAAiB,IAAI;KACrB,IAAI,MAAM,MAAM,SAAS,MAAM,MAAM,QAAQ,CAAC;IAChD;IACA,MAAM,OAA2B;KAC/B,QAAQ,QAAQ,SAAS;IAC3B;GACF,CAAC;EACH,CAAC,CACgB;;AAEvB"}
+{"version":3,"file":"SegmentedControlItemList.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import { composeRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  base: [\n    'relative',\n    'p-1',\n    'rounded-lg',\n    'overflow-hidden',\n    '[&>div[role=tablist]]:relative',\n    '[&>button]:z-2'\n  ],\n  variants: {\n    theme: {\n      primary: ['bg-primary-200'],\n      marsh: ['bg-marsh-200']\n    }\n  }\n})\n\nconst SelectionIndicator = styled('div', {\n  base: ['absolute', 'bg-white', 'rounded-md'],\n  variants: {\n    interacted: {\n      true: ['duration-300', 'ease-in', 'transition-all'],\n      false: ['transition-none']\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n) => {\n  const { theme, defaultValue, value } = React.use(SegmentedControlContext)\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const selectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) =>\n      (\n        child as React.ReactElement<\n          React.ComponentProps<typeof SegmentedControlItem>\n        >\n      )?.props.value === value\n  )\n\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({\n      left: Math.round(currentTab.offsetLeft),\n      height: Math.round(height),\n      width: Math.round(width)\n    })\n  }, [selectedIndex])\n\n  // Latest-ref so the ResizeObserver and window listener subscribe once per\n  // tab-count change instead of being torn down on every selection change\n  // (updateIndicatorPosition's identity tracks selectedIndex).\n  const updateIndicatorPositionRef = React.useRef(updateIndicatorPosition)\n  React.useLayoutEffect(() => {\n    updateIndicatorPositionRef.current = updateIndicatorPosition\n  })\n\n  const tabCount = React.Children.count(props.children)\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(() =>\n      updateIndicatorPositionRef.current()\n    )\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      resizeObserver.disconnect()\n    }\n  }, [tabCount])\n\n  React.useEffect(() => {\n    const handleResize = () => updateIndicatorPositionRef.current()\n    window.addEventListener('resize', handleResize)\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  }, [])\n\n  // Layout effect: the indicator must be measured and placed before paint,\n  // or it appears at its old position for a frame and visibly jumps.\n  React.useLayoutEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n      <SelectionIndicator interacted={hasInteracted} style={indicatorStyles} />\n      {React.Children.map(props.children, (child, index) => {\n        if (\n          !React.isValidElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >(child)\n        ) {\n          throw new Error(\n            `Child passed to SegmentedControlItemList is not a valid element`\n          )\n        }\n\n        return React.cloneElement(child, {\n          onClick: (e) => {\n            setHasInteracted(true)\n            if (child.props.onClick) child.props.onClick(e)\n          },\n          // Composed so a consumer-supplied ref on the item survives the\n          // clone; the cleanup empties the slot when the item detaches.\n          ref: composeRefs(\n            (child.props as { ref?: React.Ref<HTMLElement> }).ref,\n            (el: HTMLElement | null) => {\n              tabsRef.current[index] = el\n              return () => {\n                tabsRef.current[index] = null\n              }\n            }\n          )\n        })\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"mappings":";;;;;;;AAQA,IAAM,oBAAoB,OAAO,KAAK,aAAa;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,OAAO;EACL,SAAS,CAAC,gBAAgB;EAC1B,OAAO,CAAC,cAAc;CACxB,EACF;AACF,CAAC;AAED,IAAM,qBAAqB,OAAO,OAAO;CACvC,MAAM;EAAC;EAAY;EAAY;CAAY;CAC3C,UAAU,EACR,YAAY;EACV,MAAM;GAAC;GAAgB;GAAW;EAAgB;EAClD,OAAO,CAAC,iBAAiB;CAC3B,EACF;AACF,CAAC;AAED,IAAa,4BACX,UACG;CACH,MAAM,EAAE,OAAO,cAAc,UAAU,QAAM,IAAI,uBAAuB;CAExE,MAAM,UAAU,QAAM,OAA+B,CAAC,CAAC;CAEvD,MAAM,gBAAgB,QAAM,SAAS,QAAQ,MAAM,QAAQ,CAAC,CAAC,WAC1D,UAEG,OAGC,MAAM,UAAU,KACvB;CAEA,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAAS;EAC3D,MAAM;EACN,QAAQ;EACR,OAAO;CACT,CAAC;CACD,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAE9D,MAAM,0BAA0B,QAAM,kBAAkB;EACtD,MAAM,aAAa,QAAQ,QAAQ;EACnC,IAAI,CAAC,YAAY;EAEjB,MAAM,EAAE,OAAO,WAAW,WAAW,sBAAsB;EAC3D,mBAAmB;GACjB,MAAM,KAAK,MAAM,WAAW,UAAU;GACtC,QAAQ,KAAK,MAAM,MAAM;GACzB,OAAO,KAAK,MAAM,KAAK;EACzB,CAAC;CACH,GAAG,CAAC,aAAa,CAAC;CAKlB,MAAM,6BAA6B,QAAM,OAAO,uBAAuB;CACvE,QAAM,sBAAsB;EAC1B,2BAA2B,UAAU;CACvC,CAAC;CAED,MAAM,WAAW,QAAM,SAAS,MAAM,MAAM,QAAQ;CAEpD,QAAM,gBAAgB;EACpB,MAAM,iBAAiB,IAAI,qBACzB,2BAA2B,QAAQ,CACrC;EAEA,QAD4B,QAChB,SAAS,QAAQ;GAC3B,IAAI,KAAK,eAAe,QAAQ,GAAG;EACrC,CAAC;EAED,aAAa;GACX,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,QAAM,gBAAgB;EACpB,MAAM,qBAAqB,2BAA2B,QAAQ;EAC9D,OAAO,iBAAiB,UAAU,YAAY;EAC9C,aAAa;GACX,OAAO,oBAAoB,UAAU,YAAY;EACnD;CACF,GAAG,CAAC,CAAC;CAIL,QAAM,sBAAsB;EAC1B,wBAAwB;CAC1B,GAAG,CAAC,eAAe,uBAAuB,CAAC;CAE3C,OACE,qBAAC,mBAAD;EAA0B;EAAqB;EAAc,GAAI;YAAjE,CACE,oBAAC,oBAAD;GAAoB,YAAY;GAAe,OAAO;EAAkB,CAAA,GACvE,QAAM,SAAS,IAAI,MAAM,WAAW,OAAO,UAAU;GACpD,IACE,CAAC,QAAM,eAEL,KAAK,GAEP,MAAM,IAAI,MACR,iEACF;GAGF,OAAO,QAAM,aAAa,OAAO;IAC/B,UAAU,MAAM;KACd,iBAAiB,IAAI;KACrB,IAAI,MAAM,MAAM,SAAS,MAAM,MAAM,QAAQ,CAAC;IAChD;IAGA,KAAK,YACF,MAAM,MAA2C,MACjD,OAA2B;KAC1B,QAAQ,QAAQ,SAAS;KACzB,aAAa;MACX,QAAQ,QAAQ,SAAS;KAC3B;IACF,CACF;GACF,CAAC;EACH,CAAC,CACgB;;AAEvB"}

package/dist/components/segmented-control/SegmentedControlRoot.js

@@ -16,25 +16,24 @@ var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, v
 	const isControlled = value !== void 0;
 	const [internalValue, setInternalValue] = React$1.useState(defaultValue);
 	const currentValue = isControlled ? value : internalValue;
-	const handleValueChange = isControlled ? onValueChange : setInternalValue;
-	React$1.useEffect(() => {
-		if (!isControlled && defaultValue) setInternalValue(defaultValue);
-	}, [defaultValue, isControlled]);
-	const contextValue = React$1.useMemo(() => ({
-		size,
-		theme,
-		defaultValue,
-		onValueChange: handleValueChange,
-		value: currentValue
-	}), [
-		size,
-		theme,
-		defaultValue,
-		handleValueChange,
-		currentValue
-	]);
-	return /* @__PURE__ */ jsx(SegmentedControlContext.Provider, {
-		value: contextValue,
+	const handleValueChange = React$1.useCallback((newValue) => {
+		if (!isControlled) setInternalValue(newValue);
+		onValueChange?.(newValue);
+	}, [isControlled, onValueChange]);
+	return /* @__PURE__ */ jsx(SegmentedControlContext, {
+		value: React$1.useMemo(() => ({
+			size,
+			theme,
+			defaultValue,
+			onValueChange: handleValueChange,
+			value: currentValue
+		}), [
+			size,
+			theme,
+			defaultValue,
+			handleValueChange,
+			currentValue
+		]),
 		children: /* @__PURE__ */ jsx(StyledSegmentedControlRoot, {
 			size,
 			value: currentValue,

package/dist/components/segmented-control/SegmentedControlRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\n\nconst StyledSegmentedControlRoot = styled(\n  Tabs,\n  {\n    base: ['[&>div]:border-none'],\n    variants: {\n      size: {\n        sm: ['w-[unset]!'],\n        md: [],\n        lg: []\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport interface SegmentedControlRootProps extends React.ComponentProps<\n  typeof StyledSegmentedControlRoot\n> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  theme = 'primary',\n  defaultValue,\n  children,\n  value,\n  onValueChange,\n  ...rest\n}: React.PropsWithChildren<SegmentedControlRootProps>) => {\n  const isControlled = value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? value : internalValue\n  const handleValueChange = isControlled ? onValueChange : setInternalValue\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      theme,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, theme, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext.Provider value={contextValue}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...rest}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAM,6BAA6B,OACjC,MACA;CACE,MAAM,CAAC,qBAAqB;CAC5B,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC;EACL,IAAI,CAAC;CACP,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAQA,IAAa,wBAAwB,EACnC,MACA,QAAQ,WACR,cACA,UACA,OACA,eACA,GAAG,WACqD;CACxD,MAAM,eAAe,UAAU,KAAA;CAE/B,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,YAAY;CAErE,MAAM,eAAe,eAAe,QAAQ;CAC5C,MAAM,oBAAoB,eAAe,gBAAgB;CAEzD,QAAM,gBAAgB;EACpB,IAAI,CAAC,gBAAgB,cACnB,iBAAiB,YAAY;CAEjC,GAAG,CAAC,cAAc,YAAY,CAAC;CAE/B,MAAM,eAAe,QAAM,eAClB;EACL;EACA;EACA;EACA,eAAe;EACf,OAAO;CACT,IACA;EAAC;EAAM;EAAO;EAAc;EAAmB;CAAY,CAC7D;CAEA,OACE,oBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,oBAAC,4BAAD;GACQ;GACN,OAAO;GACP,eAAe;GACf,GAAI;GAEH;EACyB,CAAA;CACI,CAAA;AAEtC"}
+{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\n\nconst StyledSegmentedControlRoot = styled(\n  Tabs,\n  {\n    base: ['[&>div]:border-none'],\n    variants: {\n      size: {\n        sm: ['w-[unset]!'],\n        md: [],\n        lg: []\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport interface SegmentedControlRootProps extends React.ComponentProps<\n  typeof StyledSegmentedControlRoot\n> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  theme = 'primary',\n  defaultValue,\n  children,\n  value,\n  onValueChange,\n  ...rest\n}: React.PropsWithChildren<SegmentedControlRootProps>) => {\n  const isControlled = value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? value : internalValue\n  // Fire the consumer's `onValueChange` in BOTH modes; only own internal state\n  // when uncontrolled. (Previously `isControlled ? onValueChange :\n  // setInternalValue`, which silently dropped the consumer callback in\n  // uncontrolled mode once `onValueChange` stopped leaking through `...rest`.)\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) setInternalValue(newValue)\n      onValueChange?.(newValue)\n    },\n    [isControlled, onValueChange]\n  )\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      theme,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, theme, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext value={contextValue}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...rest}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext>\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAM,6BAA6B,OACjC,MACA;CACE,MAAM,CAAC,qBAAqB;CAC5B,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC;EACL,IAAI,CAAC;CACP,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAQA,IAAa,wBAAwB,EACnC,MACA,QAAQ,WACR,cACA,UACA,OACA,eACA,GAAG,WACqD;CACxD,MAAM,eAAe,UAAU,KAAA;CAE/B,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,YAAY;CAErE,MAAM,eAAe,eAAe,QAAQ;CAK5C,MAAM,oBAAoB,QAAM,aAC7B,aAAqB;EACpB,IAAI,CAAC,cAAc,iBAAiB,QAAQ;EAC5C,gBAAgB,QAAQ;CAC1B,GACA,CAAC,cAAc,aAAa,CAC9B;CAaA,OACE,oBAAC,yBAAD;EAAyB,OAZN,QAAM,eAClB;GACL;GACA;GACA;GACA,eAAe;GACf,OAAO;EACT,IACA;GAAC;GAAM;GAAO;GAAc;GAAmB;EAAY,CAI3B;YAC9B,oBAAC,4BAAD;GACQ;GACN,OAAO;GACP,eAAe;GACf,GAAI;GAEH;EACyB,CAAA;CACL,CAAA;AAE7B"}

package/dist/components/select-menu/SelectMenu.context.js

@@ -4,7 +4,7 @@ var SelectMenuContext = React$1.createContext({
 	size: "md",
 	theme: "grey"
 });
-var useSelectMenuContext = () => React$1.useContext(SelectMenuContext);
+var useSelectMenuContext = () => React$1.use(SelectMenuContext);
 //#endregion
 export { SelectMenuContext, useSelectMenuContext };
 

package/dist/components/select-menu/SelectMenu.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.context.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.context.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype SelectMenuContextValue = {\n  size: 'sm' | 'md' | 'lg'\n  theme: 'white' | 'grey'\n  state?: 'error'\n}\n\nexport const SelectMenuContext = React.createContext<SelectMenuContextValue>({\n  size: 'md',\n  theme: 'grey'\n})\n\nexport const useSelectMenuContext = () => React.useContext(SelectMenuContext)\n"],"mappings":";;AAQA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,MAAM;CACN,OAAO;AACT,CAAC;AAED,IAAa,6BAA6B,QAAM,WAAW,iBAAiB"}
+{"version":3,"file":"SelectMenu.context.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.context.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype SelectMenuContextValue = {\n  size: 'sm' | 'md' | 'lg'\n  theme: 'white' | 'grey'\n  state?: 'error'\n}\n\nexport const SelectMenuContext = React.createContext<SelectMenuContextValue>({\n  size: 'md',\n  theme: 'grey'\n})\n\nexport const useSelectMenuContext = () => React.use(SelectMenuContext)\n"],"mappings":";;AAQA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,MAAM;CACN,OAAO;AACT,CAAC;AAED,IAAa,6BAA6B,QAAM,IAAI,iBAAiB"}

package/dist/components/select-menu/SelectMenu.js

@@ -4,21 +4,27 @@ import { SelectMenuItem } from "./SelectMenuItem.js";
 import { SelectMenuLabel } from "./SelectMenuLabel.js";
 import { SelectMenuSeparator } from "./SelectMenuSeparator.js";
 import { SelectMenuTrigger } from "./SelectMenuTrigger.js";
-import "react";
+import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import * as RadixSelect from "@radix-ui/react-select";
 //#region src/components/select-menu/SelectMenu.tsx
-var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...rest }) => /* @__PURE__ */ jsx(SelectMenuContext.Provider, {
-	value: {
-		size,
-		theme,
-		state
-	},
-	children: /* @__PURE__ */ jsx(RadixSelect.Root, {
-		...rest,
-		children
-	})
-});
+var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...rest }) => {
+	return /* @__PURE__ */ jsx(SelectMenuContext, {
+		value: React$1.useMemo(() => ({
+			size,
+			theme,
+			state
+		}), [
+			size,
+			theme,
+			state
+		]),
+		children: /* @__PURE__ */ jsx(RadixSelect.Root, {
+			...rest,
+			children
+		})
+	});
+};
 var SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {
 	Trigger: SelectMenuTrigger,
 	Content: SelectMenuContent,

package/dist/components/select-menu/SelectMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { SelectMenuContext } from './SelectMenu.context'\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = React.ComponentProps<typeof RadixSelect.Root> & {\n  size?: 'sm' | 'md' | 'lg'\n  theme?: 'white' | 'grey'\n  state?: 'error'\n}\n\nconst SelectMenuRoot = ({\n  size = 'md',\n  theme = 'grey',\n  state,\n  children,\n  ...rest\n}: SelectMenuProps) => (\n  <SelectMenuContext.Provider value={{ size, theme, state }}>\n    <RadixSelect.Root {...rest}>{children}</RadixSelect.Root>\n  </SelectMenuContext.Provider>\n)\n\nexport const SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {\n  Trigger: SelectMenuTrigger,\n  Content: SelectMenuContent,\n  Item: SelectMenuItem,\n  Group: RadixSelect.Group,\n  Label: SelectMenuLabel,\n  Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,kBAAkB,EACtB,OAAO,MACP,QAAQ,QACR,OACA,UACA,GAAG,WAEH,oBAAC,kBAAkB,UAAnB;CAA4B,OAAO;EAAE;EAAM;EAAO;CAAM;WACtD,oBAAC,YAAY,MAAb;EAAkB,GAAI;EAAO;CAA2B,CAAA;AAC9B,CAAA;AAG9B,IAAa,aAA6B,uBAAO,OAAO,gBAAgB;CACtE,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO,YAAY;CACnB,OAAO;CACP,WAAW;AACb,CAAC"}
+{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { SelectMenuContext } from './SelectMenu.context'\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = React.ComponentProps<typeof RadixSelect.Root> & {\n  size?: 'sm' | 'md' | 'lg'\n  theme?: 'white' | 'grey'\n  state?: 'error'\n}\n\nconst SelectMenuRoot = ({\n  size = 'md',\n  theme = 'grey',\n  state,\n  children,\n  ...rest\n}: SelectMenuProps) => {\n  const value = React.useMemo(\n    () => ({ size, theme, state }),\n    [size, theme, state]\n  )\n  return (\n    <SelectMenuContext value={value}>\n      <RadixSelect.Root {...rest}>{children}</RadixSelect.Root>\n    </SelectMenuContext>\n  )\n}\n\nexport const SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {\n  Trigger: SelectMenuTrigger,\n  Content: SelectMenuContent,\n  Item: SelectMenuItem,\n  Group: RadixSelect.Group,\n  Label: SelectMenuLabel,\n  Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,kBAAkB,EACtB,OAAO,MACP,QAAQ,QACR,OACA,UACA,GAAG,WACkB;CAKrB,OACE,oBAAC,mBAAD;EAA0B,OALd,QAAM,eACX;GAAE;GAAM;GAAO;EAAM,IAC5B;GAAC;GAAM;GAAO;EAAK,CAGO;YACxB,oBAAC,YAAY,MAAb;GAAkB,GAAI;GAAO;EAA2B,CAAA;CACvC,CAAA;AAEvB;AAEA,IAAa,aAA6B,uBAAO,OAAO,gBAAgB;CACtE,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO,YAAY;CACnB,OAAO;CACP,WAAW;AACb,CAAC"}

package/dist/components/side-bar/SideBar.context.js

@@ -1,7 +1,7 @@
 import * as React$1 from "react";
 //#region src/components/side-bar/SideBar.context.tsx
 var SideBarContext = React$1.createContext({ isExpanded: void 0 });
-var useSidebarState = () => React$1.useContext(SideBarContext);
+var useSidebarState = () => React$1.use(SideBarContext);
 //#endregion
 export { SideBarContext, useSidebarState };
 

package/dist/components/side-bar/SideBar.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideBar.context.js","names":[],"sources":["../../../src/components/side-bar/SideBar.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const SideBarContext = React.createContext<{\n  isExpanded?: boolean\n}>({\n  isExpanded: undefined\n})\n\nexport const useSidebarState = () => React.useContext(SideBarContext)\n"],"mappings":";;AAEA,IAAa,iBAAiB,QAAM,cAEjC,EACD,YAAY,KAAA,EACd,CAAC;AAED,IAAa,wBAAwB,QAAM,WAAW,cAAc"}
+{"version":3,"file":"SideBar.context.js","names":[],"sources":["../../../src/components/side-bar/SideBar.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const SideBarContext = React.createContext<{\n  isExpanded?: boolean\n}>({\n  isExpanded: undefined\n})\n\nexport const useSidebarState = () => React.use(SideBarContext)\n"],"mappings":";;AAEA,IAAa,iBAAiB,QAAM,cAEjC,EACD,YAAY,KAAA,EACd,CAAC;AAED,IAAa,wBAAwB,QAAM,IAAI,cAAc"}

package/dist/components/side-bar/SideBar.js

@@ -84,8 +84,8 @@ var SideBarComponent = ({ theme, className, children, type = "expandable", offse
 		...touchProps,
 		ref
 	} : {};
-	return /* @__PURE__ */ jsx(SideBarContext.Provider, {
-		value: { isExpanded },
+	return /* @__PURE__ */ jsx(SideBarContext, {
+		value: React$1.useMemo(() => ({ isExpanded }), [isExpanded]),
 		children: /* @__PURE__ */ jsx(Theme, {
 			theme: theme || light,
 			children: /* @__PURE__ */ jsx(Root, {

package/dist/components/side-bar/SideBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideBar.js","names":[],"sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme, cn } from '../../styled'\nimport { SideBarContext } from './SideBar.context'\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\n\nconst light = {\n  '--background': 'white',\n  '--text': 'var(--color-grey-800)',\n  '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n  base: ['sticky', 'z-1'],\n  variants: {\n    type: {\n      static: [],\n      expandable: ['w-22']\n    }\n  }\n})\n\nconst Content = styled('div', {\n  base: [\n    'bg-(--background)',\n    'border-r',\n    'border-r-(--border)',\n    'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n    'flex',\n    'flex-col',\n    'h-full',\n    'overflow-hidden',\n    'will-change-width',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[shadow,width]'\n  ],\n  variants: {\n    type: {\n      static: [],\n      expandable: []\n    },\n    isExpanded: {\n      true: ['w-[16rem]'],\n      false: ['w-22']\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  base: [\n    'bottom-0',\n    'left-0',\n    'absolute',\n    'right-0',\n    'top-0',\n    'transition-all'\n  ],\n  variants: {\n    isVisible: {\n      true: ['delay-0', 'visible'],\n      false: ['delay-50', 'invisible']\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  className?: string\n  offset?: number | string\n} & React.ComponentProps<typeof Theme>\n\nconst SideBarComponent = ({\n  theme,\n  className,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  style,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  return (\n    <SideBarContext.Provider value={{ isExpanded }}>\n      <Theme theme={theme || light}>\n        <Root\n          {...rest}\n          style={{ ...style, '--offset': offset }}\n          type={type}\n          className={cn(\n            'h-[calc(100svh-var(--offset))]',\n            'top-(--offset)',\n            className\n          )}\n        >\n          <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n            {children}\n            {/**\n             * When the SideBar is collapsed, ensure that the initial tap event\n             * is used to expand the nav first before making the items available\n             */}\n            {type === 'expandable' && (\n              <PointerBlocker isVisible={!isHovered && !isExpanded} />\n            )}\n          </Content>\n        </Root>\n      </Theme>\n    </SideBarContext.Provider>\n  )\n}\n\nexport const SideBar = /* @__PURE__ */ Object.assign(SideBarComponent, {\n  Brand: SideBarBrand,\n  BrandLogo: SideBarBrandLogo,\n  BrandName: SideBarBrandName,\n  Header: SideBarHeader,\n  Body: SideBarBody,\n  Footer: SideBarFooter,\n  displayName: 'SideBar'\n})\n"],"mappings":";;;;;;;AAcA,IAAM,QAAQ;CACZ,gBAAgB;CAChB,UAAU;CACV,YAAY;AACd;AAEA,IAAM,OAAO,OAAO,OAAO;CACzB,MAAM,CAAC,UAAU,KAAK;CACtB,UAAU,EACR,MAAM;EACJ,QAAQ,CAAC;EACT,YAAY,CAAC,MAAM;CACrB,EACF;AACF,CAAC;AAED,IAAM,UAAU,OAAO,OAAO;CAC5B,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,QAAQ,CAAC;GACT,YAAY,CAAC;EACf;EACA,YAAY;GACV,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,MAAM;EAChB;CACF;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,MAAM;EACN,OAAO,CAAC,4CAA4C;CACtD,CACF;AACF,CAAC;AAED,IAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,WAAW;EACT,MAAM,CAAC,WAAW,SAAS;EAC3B,OAAO,CAAC,YAAY,WAAW;CACjC,EACF;AACF,CAAC;AAOD,IAAM,oBAAoB,EACxB,OACA,WACA,UACA,OAAO,cACP,SAAS,OACT,OACA,GAAG,WACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,SAAS,QAAQ;CACpE,MAAM,MAAM,QAAM,OAAuB,IAAI;CAE7C,mBAAmB;EACjB;EACA,yBAAyB,cAAc,KAAK;CAC9C,CAAC;CACD,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB,cAAc,IAAI;EACvC,oBAAoB,cAAc,KAAK;CACzC,CAAC;CACD,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,oBAAoB,cAAc,IAAI;EACtC,kBAAkB,cAAc,KAAK;CACvC,CAAC;CACD,MAAM,aAAa,EACjB,kBAAkB,cAAc,IAAI,EACtC;CAEA,MAAM,kBACJ,SAAS,eACL;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;CACF,IACA,CAAC;CAEP,OACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO,EAAE,WAAW;YAC3C,oBAAC,OAAD;GAAO,OAAO,SAAS;aACrB,oBAAC,MAAD;IACE,GAAI;IACJ,OAAO;KAAE,GAAG;KAAO,YAAY;IAAO;IAChC;IACN,WAAW,GACT,kCACA,kBACA,SACF;cAEA,qBAAC,SAAD;KAAS,GAAI;KAA6B;KAAkB;eAA5D,CACG,UAKA,SAAS,gBACR,oBAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,WAAa,CAAA,CAElD;;GACL,CAAA;EACD,CAAA;CACgB,CAAA;AAE7B;AAEA,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,OAAO;CACP,WAAW;CACX,WAAW;CACX,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,aAAa;AACf,CAAC"}
+{"version":3,"file":"SideBar.js","names":[],"sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme, cn } from '../../styled'\nimport { SideBarContext } from './SideBar.context'\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\n\nconst light = {\n  '--background': 'white',\n  '--text': 'var(--color-grey-800)',\n  '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n  base: ['sticky', 'z-1'],\n  variants: {\n    type: {\n      static: [],\n      expandable: ['w-22']\n    }\n  }\n})\n\nconst Content = styled('div', {\n  base: [\n    'bg-(--background)',\n    'border-r',\n    'border-r-(--border)',\n    'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n    'flex',\n    'flex-col',\n    'h-full',\n    'overflow-hidden',\n    'will-change-width',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[shadow,width]'\n  ],\n  variants: {\n    type: {\n      static: [],\n      expandable: []\n    },\n    isExpanded: {\n      true: ['w-[16rem]'],\n      false: ['w-22']\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  base: [\n    'bottom-0',\n    'left-0',\n    'absolute',\n    'right-0',\n    'top-0',\n    'transition-all'\n  ],\n  variants: {\n    isVisible: {\n      true: ['delay-0', 'visible'],\n      false: ['delay-50', 'invisible']\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  className?: string\n  offset?: number | string\n} & React.ComponentProps<typeof Theme>\n\nconst SideBarComponent = ({\n  theme,\n  className,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  style,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  const sideBarContextValue = React.useMemo(\n    () => ({ isExpanded }),\n    [isExpanded]\n  )\n\n  return (\n    <SideBarContext value={sideBarContextValue}>\n      <Theme theme={theme || light}>\n        <Root\n          {...rest}\n          style={{ ...style, '--offset': offset }}\n          type={type}\n          className={cn(\n            'h-[calc(100svh-var(--offset))]',\n            'top-(--offset)',\n            className\n          )}\n        >\n          <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n            {children}\n            {/**\n             * When the SideBar is collapsed, ensure that the initial tap event\n             * is used to expand the nav first before making the items available\n             */}\n            {type === 'expandable' && (\n              <PointerBlocker isVisible={!isHovered && !isExpanded} />\n            )}\n          </Content>\n        </Root>\n      </Theme>\n    </SideBarContext>\n  )\n}\n\nexport const SideBar = /* @__PURE__ */ Object.assign(SideBarComponent, {\n  Brand: SideBarBrand,\n  BrandLogo: SideBarBrandLogo,\n  BrandName: SideBarBrandName,\n  Header: SideBarHeader,\n  Body: SideBarBody,\n  Footer: SideBarFooter,\n  displayName: 'SideBar'\n})\n"],"mappings":";;;;;;;AAcA,IAAM,QAAQ;CACZ,gBAAgB;CAChB,UAAU;CACV,YAAY;AACd;AAEA,IAAM,OAAO,OAAO,OAAO;CACzB,MAAM,CAAC,UAAU,KAAK;CACtB,UAAU,EACR,MAAM;EACJ,QAAQ,CAAC;EACT,YAAY,CAAC,MAAM;CACrB,EACF;AACF,CAAC;AAED,IAAM,UAAU,OAAO,OAAO;CAC5B,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,QAAQ,CAAC;GACT,YAAY,CAAC;EACf;EACA,YAAY;GACV,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,MAAM;EAChB;CACF;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,MAAM;EACN,OAAO,CAAC,4CAA4C;CACtD,CACF;AACF,CAAC;AAED,IAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,WAAW;EACT,MAAM,CAAC,WAAW,SAAS;EAC3B,OAAO,CAAC,YAAY,WAAW;CACjC,EACF;AACF,CAAC;AAOD,IAAM,oBAAoB,EACxB,OACA,WACA,UACA,OAAO,cACP,SAAS,OACT,OACA,GAAG,WACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,SAAS,QAAQ;CACpE,MAAM,MAAM,QAAM,OAAuB,IAAI;CAE7C,mBAAmB;EACjB;EACA,yBAAyB,cAAc,KAAK;CAC9C,CAAC;CACD,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB,cAAc,IAAI;EACvC,oBAAoB,cAAc,KAAK;CACzC,CAAC;CACD,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,oBAAoB,cAAc,IAAI;EACtC,kBAAkB,cAAc,KAAK;CACvC,CAAC;CACD,MAAM,aAAa,EACjB,kBAAkB,cAAc,IAAI,EACtC;CAEA,MAAM,kBACJ,SAAS,eACL;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;CACF,IACA,CAAC;CAOP,OACE,oBAAC,gBAAD;EAAgB,OANU,QAAM,eACzB,EAAE,WAAW,IACpB,CAAC,UAAU,CAIY;YACrB,oBAAC,OAAD;GAAO,OAAO,SAAS;aACrB,oBAAC,MAAD;IACE,GAAI;IACJ,OAAO;KAAE,GAAG;KAAO,YAAY;IAAO;IAChC;IACN,WAAW,GACT,kCACA,kBACA,SACF;cAEA,qBAAC,SAAD;KAAS,GAAI;KAA6B;KAAkB;eAA5D,CACG,UAKA,SAAS,gBACR,oBAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,WAAa,CAAA,CAElD;;GACL,CAAA;EACD,CAAA;CACO,CAAA;AAEpB;AAEA,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,OAAO;CACP,WAAW;CACX,WAAW;CACX,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,aAAa;AACf,CAAC"}

package/dist/components/skeleton-loader/SkeletonCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Flex } from '../flex/Flex'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n  numberOfRows = 3,\n  withChart,\n  className\n}: {\n  numberOfRows?: number\n  withChart?: boolean\n  className?: string\n}) => (\n  <Tile\n    className={cn(\n      'relative',\n      'w-full',\n      'flex-col',\n      'items-center',\n      'gap-6',\n      'p-6',\n      className\n    )}\n  >\n    <div className=\"align-center flex w-full gap-6\">\n      {withChart && <SkeletonDoughnutChart />}\n      <div className=\"flex grow flex-col gap-6\">\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowNumber) => (\n            <SkeletonLoader\n              key={rowNumber}\n              className=\"bg-grey-200 h-10 w-full min-w-25 rounded-md\"\n            />\n          )\n        )}\n      </div>\n    </div>\n    <SkeletonButton />\n  </Tile>\n)\n"],"mappings":";;;;;;;;AASA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,qBAAC,MAAD;CACE,WAAW,GACT,YACA,UACA,YACA,gBACA,SACA,OACA,SACF;WATF,CAWE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,aAAa,oBAAC,uBAAD,CAAwB,CAAA,GACtC,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,cACC,oBAAC,gBAAD,EAEE,WAAU,8CACX,GAFM,SAEN,CAEL;EACG,CAAA,CACF;KACL,oBAAC,gBAAD,CAAiB,CAAA,CACb"}
+{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n  numberOfRows = 3,\n  withChart,\n  className\n}: {\n  numberOfRows?: number\n  withChart?: boolean\n  className?: string\n}) => (\n  <Tile\n    className={cn(\n      'relative',\n      'w-full',\n      'flex-col',\n      'items-center',\n      'gap-6',\n      'p-6',\n      className\n    )}\n  >\n    <div className=\"align-center flex w-full gap-6\">\n      {withChart && <SkeletonDoughnutChart />}\n      <div className=\"flex grow flex-col gap-6\">\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowNumber) => (\n            <SkeletonLoader\n              key={rowNumber}\n              className=\"bg-grey-200 h-10 w-full min-w-25 rounded-md\"\n            />\n          )\n        )}\n      </div>\n    </div>\n    <SkeletonButton />\n  </Tile>\n)\n"],"mappings":";;;;;;;;AAQA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,qBAAC,MAAD;CACE,WAAW,GACT,YACA,UACA,YACA,gBACA,SACA,OACA,SACF;WATF,CAWE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,aAAa,oBAAC,uBAAD,CAAwB,CAAA,GACtC,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,cACC,oBAAC,gBAAD,EAEE,WAAU,8CACX,GAFM,SAEN,CAEL;EACG,CAAA,CACF;KACL,oBAAC,gBAAD,CAAiB,CAAA,CACb"}

package/dist/components/slider-field/SliderField.js

@@ -5,16 +5,21 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/slider-field/SliderField.tsx
 var SliderField = ({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min = 0, max = 100, steps = [], ...rest }) => {
-	const { control } = useFormContext();
+	const { control, setValue } = useFormContext();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = useController({
 		name,
 		control,
 		rules: validation,
 		defaultValue
 	});
+	const serializedValue = JSON.stringify(value);
 	React$1.useEffect(() => {
-		if (value?.length) onChange(value);
-	}, [JSON.stringify(value)]);
+		if (typeof value !== "undefined") setValue(name, value, { shouldDirty: false });
+	}, [
+		serializedValue,
+		name,
+		setValue
+	]);
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		className,
 		fieldId: name,

package/dist/components/slider-field/SliderField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderField.js","names":[],"sources":["../../../src/components/slider-field/SliderField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { Slider, type SliderProps } from '../slider/Slider'\nimport type { SliderStepsType } from '../slider/SliderSteps'\nimport type { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n  SliderStepsType &\n  SliderValueType &\n  FieldElementWrapperProps\n\nexport const SliderField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = [],\n  ...rest\n}: SliderFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (value?.length) onChange(value)\n  }, [JSON.stringify(value)])\n\n  return (\n    <FieldWrapper\n      className={className}\n      fieldId={name}\n      label={label}\n      hideLabel={hideLabel}\n    >\n      <Slider\n        ref={ref}\n        name={innerName}\n        onValueChange={onChange}\n        value={innerValue}\n        min={min}\n        max={max}\n        {...rest}\n      >\n        <Slider.Steps min={min} max={max} steps={steps} />\n\n        <Slider.Value value={innerValue} outputLabel={outputLabel} />\n      </Slider>\n    </FieldWrapper>\n  )\n}\n\nSliderField.displayName = 'SliderField'\n"],"mappings":";;;;;;AAgBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,cACA,OACA,YACA,aACA,MAAM,GACN,MAAM,KACN,QAAQ,CAAC,GACT,GAAG,WACmB;CACtB,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CAED,QAAM,gBAAgB;EAEpB,IAAI,OAAO,QAAQ,SAAS,KAAK;CACnC,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;CAE1B,OACE,oBAAC,cAAD;EACa;EACX,SAAS;EACF;EACI;YAEX,qBAAC,QAAD;GACO;GACL,MAAM;GACN,eAAe;GACf,OAAO;GACF;GACA;GACL,GAAI;aAPN,CASE,oBAAC,OAAO,OAAR;IAAmB;IAAU;IAAY;GAAQ,CAAA,GAEjD,oBAAC,OAAO,OAAR;IAAc,OAAO;IAAyB;GAAc,CAAA,CACtD;;CACI,CAAA;AAElB;AAEA,YAAY,cAAc"}
+{"version":3,"file":"SliderField.js","names":[],"sources":["../../../src/components/slider-field/SliderField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { Slider, type SliderProps } from '../slider/Slider'\nimport type { SliderStepsType } from '../slider/SliderSteps'\nimport type { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n  SliderStepsType &\n  SliderValueType &\n  FieldElementWrapperProps\n\nexport const SliderField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = [],\n  ...rest\n}: SliderFieldProps) => {\n  const { control, setValue } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n\n  // Serialized so an inline `value` array with a fresh identity per render\n  // doesn't re-fire the sync effect.\n  const serializedValue = JSON.stringify(value)\n  React.useEffect(() => {\n    // Sync an externally-controlled `value` into react-hook-form without\n    // marking the field dirty/touched — this isn't user input. An empty\n    // array is a valid value (clearing) and must sync too.\n    if (typeof value !== 'undefined')\n      setValue(name, value, { shouldDirty: false })\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [serializedValue, name, setValue])\n\n  return (\n    <FieldWrapper\n      className={className}\n      fieldId={name}\n      label={label}\n      hideLabel={hideLabel}\n    >\n      <Slider\n        ref={ref}\n        name={innerName}\n        onValueChange={onChange}\n        value={innerValue}\n        min={min}\n        max={max}\n        {...rest}\n      >\n        <Slider.Steps min={min} max={max} steps={steps} />\n\n        <Slider.Value value={innerValue} outputLabel={outputLabel} />\n      </Slider>\n    </FieldWrapper>\n  )\n}\n\nSliderField.displayName = 'SliderField'\n"],"mappings":";;;;;;AAgBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,cACA,OACA,YACA,aACA,MAAM,GACN,MAAM,KACN,QAAQ,CAAC,GACT,GAAG,WACmB;CACtB,MAAM,EAAE,SAAS,aAAa,eAAe;CAC7C,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CAID,MAAM,kBAAkB,KAAK,UAAU,KAAK;CAC5C,QAAM,gBAAgB;EAIpB,IAAI,OAAO,UAAU,aACnB,SAAS,MAAM,OAAO,EAAE,aAAa,MAAM,CAAC;CAEhD,GAAG;EAAC;EAAiB;EAAM;CAAQ,CAAC;CAEpC,OACE,oBAAC,cAAD;EACa;EACX,SAAS;EACF;EACI;YAEX,qBAAC,QAAD;GACO;GACL,MAAM;GACN,eAAe;GACf,OAAO;GACF;GACA;GACL,GAAI;aAPN,CASE,oBAAC,OAAO,OAAR;IAAmB;IAAU;IAAY;GAAQ,CAAA,GAEjD,oBAAC,OAAO,OAAR;IAAc,OAAO;IAAyB;GAAc,CAAA,CACtD;;CACI,CAAA;AAElB;AAEA,YAAY,cAAc"}

package/dist/components/sortable/SortableRoot.js

@@ -5,9 +5,11 @@ import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, us
 //#region src/components/sortable/SortableRoot.tsx
 var SortableRoot = ({ sortableIds, onSortChange, children }) => {
 	const [order, setOrder] = React$1.useState(sortableIds);
-	React$1.useEffect(() => {
-		setOrder(sortableIds);
-	}, [sortableIds]);
+	const [prevIds, setPrevIds] = React$1.useState(sortableIds);
+	if (prevIds !== sortableIds) {
+		setPrevIds(sortableIds);
+		if (prevIds.length !== sortableIds.length || sortableIds.some((id, index) => id !== prevIds[index])) setOrder(sortableIds);
+	}
 	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
 	const handleDragEnd = (event) => {
 		const { active, over } = event;

package/dist/components/sortable/SortableRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableRoot.js","names":[],"sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype SortableRootProps = {\n  sortableIds: (string | number)[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<SortableRootProps>) => {\n  const [order, setOrder] = React.useState<(string | number)[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"mappings":";;;;;AAyBA,IAAa,gBAAgB,EAC3B,aACA,cACA,eACgD;CAChD,MAAM,CAAC,OAAO,YAAY,QAAM,SAA8B,WAAW;CACzE,QAAM,gBAAgB;EACpB,SAAS,WAAW;CACtB,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,UAAU,WACd,UAAU,aAAa,GACvB,UAAU,gBAAgB,EACxB,kBAAkB,4BACpB,CAAC,CACH;CAEA,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;EACzB,IAAI,OAAO,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM,IAC/C,UAAU,UAAU;GAClB,MAAM,WAAW,MAAM,QAAQ,OAAO,EAAE;GACxC,MAAM,WAAW,MAAM,QAAQ,KAAK,EAAE;GACtC,MAAM,WAAW,UAAU,OAAO,UAAU,QAAQ;GACpD,aAAa;IAAE,OAAO;IAAU;IAAU;GAAS,CAAC;GACpD,OAAO;EACT,CAAC;CAEL;CAEA,OACE,oBAAC,YAAD;EACW;EACT,oBAAoB;EACpB,WAAW;YAEX,oBAAC,iBAAD;GAAiB,OAAO;GAAQ;EAA0B,CAAA;CAChD,CAAA;AAEhB;AAEA,aAAa,cAAc"}
+{"version":3,"file":"SortableRoot.js","names":[],"sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype SortableRootProps = {\n  sortableIds: (string | number)[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<SortableRootProps>) => {\n  const [order, setOrder] = React.useState<(string | number)[]>(sortableIds)\n  // Reconcile the external ids during render (React's \"adjusting state when\n  // props change\" pattern — no stale frame), comparing by content rather than\n  // identity so a parent passing an inline array doesn't reset the order and\n  // discard in-flight drag state on every render.\n  const [prevIds, setPrevIds] = React.useState(sortableIds)\n  if (prevIds !== sortableIds) {\n    setPrevIds(sortableIds)\n    const contentChanged =\n      prevIds.length !== sortableIds.length ||\n      sortableIds.some((id, index) => id !== prevIds[index])\n    if (contentChanged) setOrder(sortableIds)\n  }\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"mappings":";;;;;AAyBA,IAAa,gBAAgB,EAC3B,aACA,cACA,eACgD;CAChD,MAAM,CAAC,OAAO,YAAY,QAAM,SAA8B,WAAW;CAKzE,MAAM,CAAC,SAAS,cAAc,QAAM,SAAS,WAAW;CACxD,IAAI,YAAY,aAAa;EAC3B,WAAW,WAAW;EAItB,IAFE,QAAQ,WAAW,YAAY,UAC/B,YAAY,MAAM,IAAI,UAAU,OAAO,QAAQ,MAAM,GACnC,SAAS,WAAW;CAC1C;CAEA,MAAM,UAAU,WACd,UAAU,aAAa,GACvB,UAAU,gBAAgB,EACxB,kBAAkB,4BACpB,CAAC,CACH;CAEA,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;EACzB,IAAI,OAAO,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM,IAC/C,UAAU,UAAU;GAClB,MAAM,WAAW,MAAM,QAAQ,OAAO,EAAE;GACxC,MAAM,WAAW,MAAM,QAAQ,KAAK,EAAE;GACtC,MAAM,WAAW,UAAU,OAAO,UAAU,QAAQ;GACpD,aAAa;IAAE,OAAO;IAAU;IAAU;GAAS,CAAC;GACpD,OAAO;EACT,CAAC;CAEL;CAEA,OACE,oBAAC,YAAD;EACW;EACT,oBAAoB;EACpB,WAAW;YAEX,oBAAC,iBAAD;GAAiB,OAAO;GAAQ;EAA0B,CAAA;CAChD,CAAA;AAEhB;AAEA,aAAa,cAAc"}

package/dist/components/stepper/Stepper.context.js

@@ -1,43 +1,37 @@
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/stepper/Stepper.context.tsx
-var StepperContext = React$1.createContext({
-	steps: [],
-	goToPreviousStep: () => null,
-	goToNextStep: () => null,
-	goToStep: () => null,
-	activeStep: 0,
-	viewedSteps: [],
-	allowSkip: false,
-	direction: "horizontal",
-	hideLabels: false,
-	completedSteps: [],
-	showCompletedIcons: false
-});
+var StepperContext = React$1.createContext(null);
 var StepperProvider = ({ children, stepCount, allowSkip, onComplete, onStepChange, direction, steps, hideLabels, showCompletedIcons }) => {
 	const [activeStep, setActiveStep] = React$1.useState(0);
 	const [viewedSteps, setviewedSteps] = React$1.useState([0]);
 	const [completedSteps, setCompletedSteps] = React$1.useState([]);
 	const isControlled = !stepCount;
-	React$1.useEffect(() => {
-		setviewedSteps((prev) => prev.includes(activeStep) ? prev : [...prev, activeStep]);
-		onStepChange?.(activeStep);
-	}, [activeStep, onStepChange]);
-	const goToNextStep = () => {
+	const changeStep = React$1.useCallback((nextStep) => {
+		setActiveStep(nextStep);
+		setviewedSteps((prev) => prev.includes(nextStep) ? prev : [...prev, nextStep]);
+		onStepChange?.(nextStep);
+	}, [onStepChange]);
+	const goToNextStep = React$1.useCallback(() => {
 		const isCompleted = onComplete && activeStep === stepCount - 1;
 		const isNextStep = activeStep < stepCount - 1;
 		if (onComplete || isNextStep) setCompletedSteps((prev) => prev.includes(activeStep) ? prev : [...prev, activeStep]);
 		if (isCompleted) return onComplete?.();
-		if (isNextStep) return setActiveStep((current) => current + 1);
-	};
-	const goToPreviousStep = () => {
-		setActiveStep((current) => current - 1);
-	};
-	const goToStep = (index) => {
-		setActiveStep(index);
-	};
-	return /* @__PURE__ */ jsx(StepperContext.Provider, {
-		value: {
+		if (isNextStep) return changeStep(activeStep + 1);
+	}, [
+		activeStep,
+		stepCount,
+		onComplete,
+		changeStep
+	]);
+	const goToPreviousStep = React$1.useCallback(() => {
+		changeStep(activeStep - 1);
+	}, [activeStep, changeStep]);
+	const goToStep = React$1.useCallback((index) => {
+		changeStep(index);
+	}, [changeStep]);
+	return /* @__PURE__ */ jsx(StepperContext, {
+		value: React$1.useMemo(() => ({
 			steps: steps || Array(stepCount).fill(""),
 			goToPreviousStep: isControlled ? void 0 : goToPreviousStep,
 			goToNextStep: isControlled ? void 0 : goToNextStep,
@@ -49,12 +43,26 @@ var StepperProvider = ({ children, stepCount, allowSkip, onComplete, onStepChang
 			direction,
 			hideLabels,
 			showCompletedIcons
-		},
+		}), [
+			steps,
+			stepCount,
+			isControlled,
+			goToPreviousStep,
+			goToNextStep,
+			goToStep,
+			activeStep,
+			viewedSteps,
+			completedSteps,
+			allowSkip,
+			direction,
+			hideLabels,
+			showCompletedIcons
+		]),
 		children
 	});
 };
 var useStepper = () => {
-	const context = React$1.useContext(StepperContext);
+	const context = React$1.use(StepperContext);
 	if (!context) throw new Error("Ensure that you wrap any components with the root component Stepper");
 	return context;
 };

package/dist/components/stepper/Stepper.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.context.js","names":[],"sources":["../../../src/components/stepper/Stepper.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { Context, StepperProviderProps } from './types'\n\nconst StepperContext = React.createContext<Context>({\n  steps: [],\n  goToPreviousStep: () => null,\n  goToNextStep: () => null,\n  goToStep: () => null,\n  activeStep: 0,\n  viewedSteps: [],\n  allowSkip: false,\n  direction: 'horizontal',\n  hideLabels: false,\n  completedSteps: [],\n  showCompletedIcons: false\n})\n\nexport const StepperProvider = ({\n  children,\n  stepCount,\n  allowSkip,\n  onComplete,\n  onStepChange,\n  direction,\n  steps,\n  hideLabels,\n  showCompletedIcons\n}: React.PropsWithChildren<StepperProviderProps>) => {\n  const [activeStep, setActiveStep] = React.useState(0)\n\n  const [viewedSteps, setviewedSteps] = React.useState<number[]>([0])\n  const [completedSteps, setCompletedSteps] = React.useState<number[]>([])\n\n  const isControlled = !stepCount\n\n  React.useEffect(() => {\n    setviewedSteps((prev) =>\n      prev.includes(activeStep) ? prev : [...prev, activeStep]\n    )\n\n    onStepChange?.(activeStep)\n  }, [activeStep, onStepChange])\n\n  const goToNextStep = () => {\n    const isCompleted = onComplete && activeStep === stepCount - 1\n    const isNextStep = activeStep < stepCount - 1\n\n    if (onComplete || isNextStep) {\n      setCompletedSteps((prev) =>\n        prev.includes(activeStep) ? prev : [...prev, activeStep]\n      )\n    }\n\n    if (isCompleted) {\n      return onComplete?.()\n    }\n    if (isNextStep) {\n      return setActiveStep((current) => current + 1)\n    }\n  }\n\n  const goToPreviousStep = () => {\n    setActiveStep((current) => current - 1)\n  }\n\n  const goToStep = (index: number) => {\n    setActiveStep(index)\n  }\n\n  return (\n    <StepperContext.Provider\n      value={{\n        steps: steps || Array(stepCount).fill(''),\n        goToPreviousStep: isControlled ? undefined : goToPreviousStep,\n        goToNextStep: isControlled ? undefined : goToNextStep,\n        goToStep: isControlled ? undefined : goToStep,\n        activeStep,\n        viewedSteps,\n        completedSteps,\n        allowSkip,\n        direction,\n        hideLabels,\n        showCompletedIcons\n      }}\n    >\n      {children}\n    </StepperContext.Provider>\n  )\n}\n\nexport const useStepper = (): Context => {\n  const context = React.useContext(StepperContext)\n  if (!context)\n    throw new Error(\n      'Ensure that you wrap any components with the root component Stepper'\n    )\n\n  return context\n}\n"],"mappings":";;;AAIA,IAAM,iBAAiB,QAAM,cAAuB;CAClD,OAAO,CAAC;CACR,wBAAwB;CACxB,oBAAoB;CACpB,gBAAgB;CAChB,YAAY;CACZ,aAAa,CAAC;CACd,WAAW;CACX,WAAW;CACX,YAAY;CACZ,gBAAgB,CAAC;CACjB,oBAAoB;AACtB,CAAC;AAED,IAAa,mBAAmB,EAC9B,UACA,WACA,WACA,YACA,cACA,WACA,OACA,YACA,yBACmD;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,CAAC;CAEpD,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAmB,CAAC,CAAC,CAAC;CAClE,MAAM,CAAC,gBAAgB,qBAAqB,QAAM,SAAmB,CAAC,CAAC;CAEvE,MAAM,eAAe,CAAC;CAEtB,QAAM,gBAAgB;EACpB,gBAAgB,SACd,KAAK,SAAS,UAAU,IAAI,OAAO,CAAC,GAAG,MAAM,UAAU,CACzD;EAEA,eAAe,UAAU;CAC3B,GAAG,CAAC,YAAY,YAAY,CAAC;CAE7B,MAAM,qBAAqB;EACzB,MAAM,cAAc,cAAc,eAAe,YAAY;EAC7D,MAAM,aAAa,aAAa,YAAY;EAE5C,IAAI,cAAc,YAChB,mBAAmB,SACjB,KAAK,SAAS,UAAU,IAAI,OAAO,CAAC,GAAG,MAAM,UAAU,CACzD;EAGF,IAAI,aACF,OAAO,aAAa;EAEtB,IAAI,YACF,OAAO,eAAe,YAAY,UAAU,CAAC;CAEjD;CAEA,MAAM,yBAAyB;EAC7B,eAAe,YAAY,UAAU,CAAC;CACxC;CAEA,MAAM,YAAY,UAAkB;EAClC,cAAc,KAAK;CACrB;CAEA,OACE,oBAAC,eAAe,UAAhB;EACE,OAAO;GACL,OAAO,SAAS,MAAM,SAAS,CAAC,CAAC,KAAK,EAAE;GACxC,kBAAkB,eAAe,KAAA,IAAY;GAC7C,cAAc,eAAe,KAAA,IAAY;GACzC,UAAU,eAAe,KAAA,IAAY;GACrC;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEC;CACsB,CAAA;AAE7B;AAEA,IAAa,mBAA4B;CACvC,MAAM,UAAU,QAAM,WAAW,cAAc;CAC/C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,qEACF;CAEF,OAAO;AACT"}
+{"version":3,"file":"Stepper.context.js","names":[],"sources":["../../../src/components/stepper/Stepper.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { Context, StepperProviderProps } from './types'\n\n// null default so useStepper's missing-provider guard can fire — a full\n// default object would silently render a zero-step stepper instead.\nconst StepperContext = React.createContext<Context | null>(null)\n\nexport const StepperProvider = ({\n  children,\n  stepCount,\n  allowSkip,\n  onComplete,\n  onStepChange,\n  direction,\n  steps,\n  hideLabels,\n  showCompletedIcons\n}: React.PropsWithChildren<StepperProviderProps>) => {\n  const [activeStep, setActiveStep] = React.useState(0)\n\n  const [viewedSteps, setviewedSteps] = React.useState<number[]>([0])\n  const [completedSteps, setCompletedSteps] = React.useState<number[]>([])\n\n  const isControlled = !stepCount\n\n  // Step changes (and their side effects) happen in the navigation handlers,\n  // not an effect: an effect would fire onStepChange on mount (twice under\n  // StrictMode) and again whenever the callback identity changed.\n  const changeStep = React.useCallback(\n    (nextStep: number) => {\n      setActiveStep(nextStep)\n      setviewedSteps((prev) =>\n        prev.includes(nextStep) ? prev : [...prev, nextStep]\n      )\n      onStepChange?.(nextStep)\n    },\n    [onStepChange]\n  )\n\n  const goToNextStep = React.useCallback(() => {\n    const isCompleted = onComplete && activeStep === stepCount - 1\n    const isNextStep = activeStep < stepCount - 1\n\n    if (onComplete || isNextStep) {\n      setCompletedSteps((prev) =>\n        prev.includes(activeStep) ? prev : [...prev, activeStep]\n      )\n    }\n\n    if (isCompleted) {\n      return onComplete?.()\n    }\n    if (isNextStep) {\n      return changeStep(activeStep + 1)\n    }\n  }, [activeStep, stepCount, onComplete, changeStep])\n\n  const goToPreviousStep = React.useCallback(() => {\n    changeStep(activeStep - 1)\n  }, [activeStep, changeStep])\n\n  const goToStep = React.useCallback(\n    (index: number) => {\n      changeStep(index)\n    },\n    [changeStep]\n  )\n\n  const value = React.useMemo<Context>(\n    () => ({\n      steps: steps || Array(stepCount).fill(''),\n      goToPreviousStep: isControlled ? undefined : goToPreviousStep,\n      goToNextStep: isControlled ? undefined : goToNextStep,\n      goToStep: isControlled ? undefined : goToStep,\n      activeStep,\n      viewedSteps,\n      completedSteps,\n      allowSkip,\n      direction,\n      hideLabels,\n      showCompletedIcons\n    }),\n    [\n      steps,\n      stepCount,\n      isControlled,\n      goToPreviousStep,\n      goToNextStep,\n      goToStep,\n      activeStep,\n      viewedSteps,\n      completedSteps,\n      allowSkip,\n      direction,\n      hideLabels,\n      showCompletedIcons\n    ]\n  )\n\n  return <StepperContext value={value}>{children}</StepperContext>\n}\n\nexport const useStepper = (): Context => {\n  const context = React.use(StepperContext)\n  if (!context)\n    throw new Error(\n      'Ensure that you wrap any components with the root component Stepper'\n    )\n\n  return context\n}\n"],"mappings":";;;AAMA,IAAM,iBAAiB,QAAM,cAA8B,IAAI;AAE/D,IAAa,mBAAmB,EAC9B,UACA,WACA,WACA,YACA,cACA,WACA,OACA,YACA,yBACmD;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,CAAC;CAEpD,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAmB,CAAC,CAAC,CAAC;CAClE,MAAM,CAAC,gBAAgB,qBAAqB,QAAM,SAAmB,CAAC,CAAC;CAEvE,MAAM,eAAe,CAAC;CAKtB,MAAM,aAAa,QAAM,aACtB,aAAqB;EACpB,cAAc,QAAQ;EACtB,gBAAgB,SACd,KAAK,SAAS,QAAQ,IAAI,OAAO,CAAC,GAAG,MAAM,QAAQ,CACrD;EACA,eAAe,QAAQ;CACzB,GACA,CAAC,YAAY,CACf;CAEA,MAAM,eAAe,QAAM,kBAAkB;EAC3C,MAAM,cAAc,cAAc,eAAe,YAAY;EAC7D,MAAM,aAAa,aAAa,YAAY;EAE5C,IAAI,cAAc,YAChB,mBAAmB,SACjB,KAAK,SAAS,UAAU,IAAI,OAAO,CAAC,GAAG,MAAM,UAAU,CACzD;EAGF,IAAI,aACF,OAAO,aAAa;EAEtB,IAAI,YACF,OAAO,WAAW,aAAa,CAAC;CAEpC,GAAG;EAAC;EAAY;EAAW;EAAY;CAAU,CAAC;CAElD,MAAM,mBAAmB,QAAM,kBAAkB;EAC/C,WAAW,aAAa,CAAC;CAC3B,GAAG,CAAC,YAAY,UAAU,CAAC;CAE3B,MAAM,WAAW,QAAM,aACpB,UAAkB;EACjB,WAAW,KAAK;CAClB,GACA,CAAC,UAAU,CACb;CAiCA,OAAO,oBAAC,gBAAD;EAAuB,OA/BhB,QAAM,eACX;GACL,OAAO,SAAS,MAAM,SAAS,CAAC,CAAC,KAAK,EAAE;GACxC,kBAAkB,eAAe,KAAA,IAAY;GAC7C,cAAc,eAAe,KAAA,IAAY;GACzC,UAAU,eAAe,KAAA,IAAY;GACrC;GACA;GACA;GACA;GACA;GACA;GACA;EACF,IACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAG4B;EAAQ;CAAyB,CAAA;AACjE;AAEA,IAAa,mBAA4B;CACvC,MAAM,UAAU,QAAM,IAAI,cAAc;CACxC,IAAI,CAAC,SACH,MAAM,IAAI,MACR,qEACF;CAEF,OAAO;AACT"}

package/dist/components/toast/Toast.context.js

@@ -2,7 +2,7 @@ import * as React$1 from "react";
 //#region src/components/toast/Toast.context.tsx
 var ToastContext = React$1.createContext(null);
 var useToastContext = () => {
-	const context = React$1.useContext(ToastContext);
+	const context = React$1.use(ToastContext);
 	if (!context) throw new Error("useToastContext must be used within a ToastProvider");
 	return context;
 };

package/dist/components/toast/Toast.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.context.js","names":[],"sources":["../../../src/components/toast/Toast.context.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { Toast } from 'react-hot-toast'\n\nexport const ToastContext = React.createContext<Pick<\n  Toast,\n  'type' | 'id' | 'message'\n> | null>(null)\n\nexport const useToastContext = () => {\n  const context = React.useContext(ToastContext)\n\n  if (!context) {\n    throw new Error('useToastContext must be used within a ToastProvider')\n  }\n\n  return context\n}\n"],"mappings":";;AAGA,IAAa,eAAe,QAAM,cAGxB,IAAI;AAEd,IAAa,wBAAwB;CACnC,MAAM,UAAU,QAAM,WAAW,YAAY;CAE7C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,qDAAqD;CAGvE,OAAO;AACT"}
+{"version":3,"file":"Toast.context.js","names":[],"sources":["../../../src/components/toast/Toast.context.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { Toast } from 'react-hot-toast'\n\nexport const ToastContext = React.createContext<Pick<\n  Toast,\n  'type' | 'id' | 'message'\n> | null>(null)\n\nexport const useToastContext = () => {\n  const context = React.use(ToastContext)\n\n  if (!context) {\n    throw new Error('useToastContext must be used within a ToastProvider')\n  }\n\n  return context\n}\n"],"mappings":";;AAGA,IAAa,eAAe,QAAM,cAGxB,IAAI;AAEd,IAAa,wBAAwB;CACnC,MAAM,UAAU,QAAM,IAAI,YAAY;CAEtC,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,qDAAqD;CAGvE,OAAO;AACT"}

package/dist/components/toast/ToastProvider.js

@@ -11,9 +11,9 @@ import { toast as toast$1, useToaster } from "react-hot-toast";
 var ToastProviderBase = /* @__PURE__ */ styled("div", { base: [
 	"fixed",
 	"z-2147483647",
-	"inset-2",
+	"inset-safe-offset-2",
 	"pointer-events-none",
-	"sm:top-3"
+	"sm:top-safe-offset-3"
 ] });
 var ToastWrapper = /* @__PURE__ */ styled("div", {
 	base: [
@@ -56,7 +56,7 @@ var ToastProvider = ({ children, className }) => {
 				"aria-live": toast.ariaProps["aria-live"],
 				style: { "--offset": `${offset}px` },
 				className: "top-(--offset)",
-				children: /* @__PURE__ */ jsx(ToastContext.Provider, {
+				children: /* @__PURE__ */ jsx(ToastContext, {
 					value: toast,
 					children: typeof children === "function" ? children(toast) : React$1.isValidElement(children) ? children : /* @__PURE__ */ jsxs(Toast, {
 						className: "w-100",

package/dist/components/toast/ToastProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '../../styled'\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './Toast.context'\n\nexport { toast } from 'react-hot-toast'\nexport { useToastContext } from './Toast.context'\n\nconst ToastProviderBase = /* @__PURE__ */ styled('div', {\n  base: ['fixed', 'z-2147483647', 'inset-2', 'pointer-events-none', 'sm:top-3']\n})\n\nconst ToastWrapper = /* @__PURE__ */ styled('div', {\n  base: [\n    'absolute',\n    'w-full',\n    'flex',\n    'justify-center',\n    'items-center',\n    'rounded-sm',\n    'box-border',\n    'min-h-12',\n    '[--slide-opacity-out:0]',\n    '[--slide-direction-out-y:-100%]'\n  ],\n  variants: {\n    visible: {\n      true: ['motion-safe:animate-slide-direction-in'],\n      false: ['opacity-0', 'motion-safe:animate-slide-direction-out']\n    }\n  }\n})\n\nexport const ToastProvider = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => {\n  const { toasts, handlers } = useToaster()\n  const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n  return (\n    <>\n      <ToastProviderBase\n        onMouseEnter={startPause}\n        onMouseLeave={endPause}\n        className={className}\n      >\n        {toasts.map((toast) => {\n          const { message: children } = toast\n\n          const offset = calculateOffset(toast, {\n            reverseOrder: true,\n            gutter: 8\n          })\n\n          const ref = (el: HTMLDivElement | null) => {\n            if (el && toast.height === undefined) {\n              updateHeight(toast.id, el.getBoundingClientRect().height)\n            }\n          }\n\n          return (\n            <ToastWrapper\n              key={toast.id}\n              ref={ref}\n              visible={toast.visible}\n              role={toast.ariaProps.role}\n              aria-live={toast.ariaProps['aria-live']}\n              style={{ '--offset': `${offset}px` }}\n              className=\"top-(--offset)\"\n            >\n              <ToastContext.Provider value={toast}>\n                {typeof children === 'function' ? (\n                  children(toast)\n                ) : React.isValidElement(children) ? (\n                  children\n                ) : (\n                  <Toast className=\"w-100\">\n                    {toast.type === 'error' && <Toast.Icon is={Error} />}\n                    <Text>{children}</Text>\n                    <Spacer />\n                    <Toast.Close />\n                  </Toast>\n                )}\n              </ToastContext.Provider>\n            </ToastWrapper>\n          )\n        })}\n      </ToastProviderBase>\n      {children}\n    </>\n  )\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"mappings":";;;;;;;;;;AAaA,IAAM,oBAAoC,uBAAO,OAAO,EACtD,MAAM;CAAC;CAAS;CAAgB;CAAW;CAAuB;AAAU,EAC9E,CAAC;AAED,IAAM,eAA+B,uBAAO,OAAO;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,SAAS;EACP,MAAM,CAAC,wCAAwC;EAC/C,OAAO,CAAC,aAAa,yCAAyC;CAChE,EACF;AACF,CAAC;AAED,IAAa,iBAAiB,EAC5B,UACA,gBACqD;CACrD,MAAM,EAAE,QAAQ,aAAa,WAAW;CACxC,MAAM,EAAE,YAAY,UAAU,iBAAiB,iBAAiB;CAEhE,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,mBAAD;EACE,cAAc;EACd,cAAc;EACH;YAEV,OAAO,KAAK,UAAU;GACrB,MAAM,EAAE,SAAS,aAAa;GAE9B,MAAM,SAAS,gBAAgB,OAAO;IACpC,cAAc;IACd,QAAQ;GACV,CAAC;GAED,MAAM,OAAO,OAA8B;IACzC,IAAI,MAAM,MAAM,WAAW,KAAA,GACzB,aAAa,MAAM,IAAI,GAAG,sBAAsB,CAAC,CAAC,MAAM;GAE5D;GAEA,OACE,oBAAC,cAAD;IAEO;IACL,SAAS,MAAM;IACf,MAAM,MAAM,UAAU;IACtB,aAAW,MAAM,UAAU;IAC3B,OAAO,EAAE,YAAY,GAAG,OAAO,IAAI;IACnC,WAAU;cAEV,oBAAC,aAAa,UAAd;KAAuB,OAAO;eAC3B,OAAO,aAAa,aACnB,SAAS,KAAK,IACZ,QAAM,eAAe,QAAQ,IAC/B,WAEA,qBAAC,OAAD;MAAO,WAAU;gBAAjB;OACG,MAAM,SAAS,WAAW,oBAAC,MAAM,MAAP,EAAY,IAAI,MAAQ,CAAA;OACnD,oBAAC,MAAD,EAAO,SAAe,CAAA;OACtB,oBAAC,QAAD,CAAS,CAAA;OACT,oBAAC,MAAM,OAAP,CAAc,CAAA;MACT;;IAEY,CAAA;GACX,GAtBP,MAAM,EAsBC;EAElB,CAAC;CACgB,CAAA,GAClB,QACD,EAAA,CAAA;AAEN;AAEA,cAAc,cAAc"}
+{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '../../styled'\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './Toast.context'\n\nexport { toast } from 'react-hot-toast'\nexport { useToastContext } from './Toast.context'\n\nconst ToastProviderBase = /* @__PURE__ */ styled('div', {\n  base: [\n    'fixed',\n    'z-2147483647',\n    'inset-safe-offset-2',\n    'pointer-events-none',\n    'sm:top-safe-offset-3'\n  ]\n})\n\nconst ToastWrapper = /* @__PURE__ */ styled('div', {\n  base: [\n    'absolute',\n    'w-full',\n    'flex',\n    'justify-center',\n    'items-center',\n    'rounded-sm',\n    'box-border',\n    'min-h-12',\n    '[--slide-opacity-out:0]',\n    '[--slide-direction-out-y:-100%]'\n  ],\n  variants: {\n    visible: {\n      true: ['motion-safe:animate-slide-direction-in'],\n      false: ['opacity-0', 'motion-safe:animate-slide-direction-out']\n    }\n  }\n})\n\nexport const ToastProvider = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => {\n  const { toasts, handlers } = useToaster()\n  const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n  return (\n    <>\n      <ToastProviderBase\n        onMouseEnter={startPause}\n        onMouseLeave={endPause}\n        className={className}\n      >\n        {toasts.map((toast) => {\n          const { message: children } = toast\n\n          const offset = calculateOffset(toast, {\n            reverseOrder: true,\n            gutter: 8\n          })\n\n          const ref = (el: HTMLDivElement | null) => {\n            if (el && toast.height === undefined) {\n              updateHeight(toast.id, el.getBoundingClientRect().height)\n            }\n          }\n\n          return (\n            <ToastWrapper\n              key={toast.id}\n              ref={ref}\n              visible={toast.visible}\n              role={toast.ariaProps.role}\n              aria-live={toast.ariaProps['aria-live']}\n              style={{ '--offset': `${offset}px` }}\n              className=\"top-(--offset)\"\n            >\n              <ToastContext value={toast}>\n                {typeof children === 'function' ? (\n                  children(toast)\n                ) : React.isValidElement(children) ? (\n                  children\n                ) : (\n                  <Toast className=\"w-100\">\n                    {toast.type === 'error' && <Toast.Icon is={Error} />}\n                    <Text>{children}</Text>\n                    <Spacer />\n                    <Toast.Close />\n                  </Toast>\n                )}\n              </ToastContext>\n            </ToastWrapper>\n          )\n        })}\n      </ToastProviderBase>\n      {children}\n    </>\n  )\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"mappings":";;;;;;;;;;AAaA,IAAM,oBAAoC,uBAAO,OAAO,EACtD,MAAM;CACJ;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,eAA+B,uBAAO,OAAO;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,SAAS;EACP,MAAM,CAAC,wCAAwC;EAC/C,OAAO,CAAC,aAAa,yCAAyC;CAChE,EACF;AACF,CAAC;AAED,IAAa,iBAAiB,EAC5B,UACA,gBACqD;CACrD,MAAM,EAAE,QAAQ,aAAa,WAAW;CACxC,MAAM,EAAE,YAAY,UAAU,iBAAiB,iBAAiB;CAEhE,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,mBAAD;EACE,cAAc;EACd,cAAc;EACH;YAEV,OAAO,KAAK,UAAU;GACrB,MAAM,EAAE,SAAS,aAAa;GAE9B,MAAM,SAAS,gBAAgB,OAAO;IACpC,cAAc;IACd,QAAQ;GACV,CAAC;GAED,MAAM,OAAO,OAA8B;IACzC,IAAI,MAAM,MAAM,WAAW,KAAA,GACzB,aAAa,MAAM,IAAI,GAAG,sBAAsB,CAAC,CAAC,MAAM;GAE5D;GAEA,OACE,oBAAC,cAAD;IAEO;IACL,SAAS,MAAM;IACf,MAAM,MAAM,UAAU;IACtB,aAAW,MAAM,UAAU;IAC3B,OAAO,EAAE,YAAY,GAAG,OAAO,IAAI;IACnC,WAAU;cAEV,oBAAC,cAAD;KAAc,OAAO;eAClB,OAAO,aAAa,aACnB,SAAS,KAAK,IACZ,QAAM,eAAe,QAAQ,IAC/B,WAEA,qBAAC,OAAD;MAAO,WAAU;gBAAjB;OACG,MAAM,SAAS,WAAW,oBAAC,MAAM,MAAP,EAAY,IAAI,MAAQ,CAAA;OACnD,oBAAC,MAAD,EAAO,SAAe,CAAA;OACtB,oBAAC,QAAD,CAAS,CAAA;OACT,oBAAC,MAAM,OAAP,CAAc,CAAA;MACT;;IAEG,CAAA;GACF,GAtBP,MAAM,EAsBC;EAElB,CAAC;CACgB,CAAA,GAClB,QACD,EAAA,CAAA;AAEN;AAEA,cAAc,cAAc"}

package/dist/components/top-bar/TopBar.js

@@ -25,21 +25,21 @@ var StyledRoot = styled("header", {
 	variants: {
 		hasScrolled: { true: ["shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]"] },
 		size: {
-			md: ["h-16"],
-			lg: ["h-24"]
+			md: ["h-safe-offset-top-16", "pt-safe"],
+			lg: ["h-safe-offset-top-24", "pt-safe"]
 		},
 		diffused: { true: ["supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]", "supports-color-mix:backdrop-blur-sm"] },
 		appearance: {
 			standard: [
 				"w-screen",
 				"max-w-full",
-				"top-0",
+				"top-safe",
 				"border-b",
 				"border-b-(--border-bottom)"
 			],
 			rounded: [
 				"w-full",
-				"top-2",
+				"top-safe-offset-2",
 				"p-2",
 				"border",
 				"border-white",