npm - @atom-learning/components - Versions diffs - 10.0.0 → 10.1.0 - Mend

@atom-learning/components 10.0.0 → 10.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (108) hide show

package/dist/components/stepper/StepperSteps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepperSteps.js","names":[],"sources":["../../../src/components/stepper/StepperSteps.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useStepper } from './Stepper.context'\nimport { StepperStepBullet } from './StepperStepBullet'\nimport { StepperStepContainer } from './StepperStepContainer'\nimport { StepperStepLabel } from './StepperStepLabel'\nimport { type StepperStepsProps, Status } from './types'\n\nconst StepperStepsContainer = styled('div', {\n base: ['flex', 'justify-between'],\n variants: {\n direction: {\n vertical: ['flex-col'],\n horizontal: ['flex-row']\n }\n }\n})\n\nexport const StepperSteps = ({ className }: StepperStepsProps) => {\n const {\n steps,\n goToStep,\n activeStep,\n viewedSteps,\n allowSkip,\n direction,\n hideLabels,\n completedSteps,\n showCompletedIcons\n } = useStepper()\n\n const getBulletStatus = (index: number) => {\n const activeBullet = steps[index]\n\n if (activeBullet.status) return activeBullet.status\n if (completedSteps.length === steps.length) return Status.SUCCESS\n if (activeStep === index && ~~completedSteps~~.~~includes~~(activeStep))\n return Status.REVIEWED\n if (activeStep === index) return Status.ACTIVE\n if (~~completedSteps~~.~~includes~~(index)) return Status.COMPLETED\n if (~~viewedSteps~~.~~includes~~(index)) return Status.VIEWED\n return Status.DEFAULT\n }\n\n const getSeparatorStatus = (index: number) => {\n const bulletStatus = steps[index]?.status\n\n if (completedSteps.length === steps.length) {\n return Status.SUCCESS\n }\n\n if (bulletStatus === Status.SUCCESS) {\n return Status.SUCCESS\n }\n\n if (bulletStatus === Status.COMPLETED \|\| index < Math.max(...viewedSteps)) {\n return Status.ACTIVE\n }\n\n if (bulletStatus === Status.VIEWED) {\n return Status.VIEWED\n }\n\n return Status.DEFAULT\n }\n\n return (\n <StepperStepsContainer className={className} direction={direction}>\n {steps.map((step, index) => {\n const bulletStatus = getBulletStatus(index)\n const separatorStatus = getSeparatorStatus(index)\n\n return (\n <StepperStepContainer\n tabIndex={0}\n key={`step_${index}`}\n direction={direction}\n separator={separatorStatus}\n status={bulletStatus}\n style={{ '--steps': steps.length \|\| 0 }}\n className={\n direction === 'horizontal'\n ? 'w-[calc(100%/var(--steps))]'\n : 'h-[calc(100%/var(--steps))]'\n }\n canInteract={allowSkip}\n >\n <StepperStepBullet\n as={allowSkip ? 'button' : 'div'}\n onClick={() =>\n allowSkip && ~~viewedSteps~~.~~includes~~(index)\n ? goToStep?.(index)\n : undefined\n }\n status={bulletStatus}\n aria-current={index === activeStep ? 'step' : undefined}\n aria-label={!step.label ? `step ${index + 1}` : ''}\n aria-labelledby={step.label ? `step-${index}` : undefined}\n className={\n allowSkip && ~~viewedSteps~~.~~includes~~(index)\n ? 'cursor-pointer'\n : 'cursor-auto'\n }\n >\n {step.status === Status.SUCCESS \|\|\n (showCompletedIcons && bulletStatus === Status.COMPLETED) ? (\n <Icon is={Ok} />\n ) : (\n index + 1\n )}\n </StepperStepBullet>\n\n {step.label && !hideLabels && (\n <StepperStepLabel\n as=\"span\"\n id={`step-${index}`}\n direction={direction}\n status={bulletStatus}\n >\n {step.label}\n </StepperStepLabel>\n )}\n </StepperStepContainer>\n )\n })}\n </StepperStepsContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,wBAAwB,OAAO,OAAO;CAC1C,MAAM,CAAC,QAAQ,iBAAiB;CAChC,UAAU,EACR,WAAW;EACT,UAAU,CAAC,UAAU;EACrB,YAAY,CAAC,UAAU;CACzB,EACF;AACF,CAAC;AAED,IAAa,gBAAgB,EAAE,gBAAmC;CAChE,MAAM,EACJ,OACA,UACA,YACA,aACA,WACA,WACA,YACA,gBACA,uBACE,WAAW;~~CAEf~~,MAAM,mBAAmB,UAAkB;EACzC,MAAM,eAAe,MAAM;EAE3B,IAAI,aAAa,QAAQ,OAAO,aAAa;EAC7C,IAAI,eAAe,WAAW,MAAM,QAAQ,OAAO,OAAO;EAC1D,IAAI,eAAe,SAAS,~~eAAe~~,~~SAAS~~,UAAU,~~GAC5D~~,OAAO,OAAO;EAChB,IAAI,eAAe,OAAO,OAAO,OAAO;EACxC,IAAI,~~eAAe~~,~~SAAS~~,KAAK,GAAG,OAAO,OAAO;~~EAClD~~,IAAI,~~YAAY~~,~~SAAS~~,KAAK,GAAG,OAAO,OAAO;~~EAC/C~~,OAAO,OAAO;CAChB;CAEA,MAAM,sBAAsB,UAAkB;EAC5C,MAAM,eAAe,MAAM,MAAM,EAAE;EAEnC,IAAI,eAAe,WAAW,MAAM,QAClC,OAAO,OAAO;EAGhB,IAAI,iBAAiB,OAAO,SAC1B,OAAO,OAAO;EAGhB,IAAI,iBAAiB,OAAO,aAAa,QAAQ,KAAK,IAAI,GAAG,WAAW,GACtE,OAAO,OAAO;EAGhB,IAAI,iBAAiB,OAAO,QAC1B,OAAO,OAAO;EAGhB,OAAO,OAAO;CAChB;CAEA,OACE,oBAAC,uBAAD;EAAkC;EAAsB;YACrD,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,eAAe,gBAAgB,KAAK;GAG1C,OACE,qBAAC,sBAAD;IACE,UAAU;~~IAEC~~;IACX,~~WAPoB~~,mBAAmB,~~KAO5B~~;IACX,QAAQ;IACR,OAAO,EAAE,WAAW,MAAM,UAAU,EAAE;IACtC,WACE,cAAc,eACV,gCACA;IAEN,aAAa;~~cAZf~~,~~CAcE~~,oBAAC,mBAAD;KACE,IAAI,YAAY,WAAW;KAC3B,eACE,aAAa,~~YAAY~~,~~SAAS~~,KAAK,~~IACnC~~,WAAW,KAAK,IAChB,KAAA;KAEN,QAAQ;KACR,gBAAc,UAAU,aAAa,SAAS,KAAA;KAC9C,cAAY,CAAC,KAAK,QAAQ,QAAQ,QAAQ,MAAM;KAChD,mBAAiB,KAAK,QAAQ,QAAQ,UAAU,KAAA;KAChD,WACE,aAAa,~~YAAY~~,~~SAAS~~,KAAK,~~IACnC~~,mBACA;eAGL,KAAK,WAAW,OAAO,WACvB,sBAAsB,iBAAiB,OAAO,YAC7C,oBAAC,MAAD,EAAM,IAAI,GAAK,CAAA,IAEf,QAAQ;IAEO,CAAA,GAElB,KAAK,SAAS,CAAC,cACd,oBAAC,kBAAD;KACE,IAAG;KACH,IAAI,QAAQ;KACD;KACX,QAAQ;eAEP,KAAK;IACU,CAAA,CAEA;MA/Cf,QAAQ,OA+CO;EAE1B,CAAC;CACoB,CAAA;AAE3B"}
1	+ {"version":3,"file":"StepperSteps.js","names":[],"sources":["../../../src/components/stepper/StepperSteps.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useStepper } from './Stepper.context'\nimport { StepperStepBullet } from './StepperStepBullet'\nimport { StepperStepContainer } from './StepperStepContainer'\nimport { StepperStepLabel } from './StepperStepLabel'\nimport { type StepperStepsProps, Status } from './types'\n\nconst StepperStepsContainer = styled('div', {\n base: ['flex', 'justify-between'],\n variants: {\n direction: {\n vertical: ['flex-col'],\n horizontal: ['flex-row']\n }\n }\n})\n\nexport const StepperSteps = ({ className }: StepperStepsProps) => {\n const {\n steps,\n goToStep,\n activeStep,\n viewedSteps,\n allowSkip,\n direction,\n hideLabels,\n completedSteps,\n showCompletedIcons\n } = useStepper()\n\n // `viewedSteps`/`completedSteps` are scanned once per step below; Set lookups\n // keep the per-step status checks O(1) instead of O(steps).\n const viewedStepsSet = new Set(viewedSteps)\n const completedStepsSet = new Set(completedSteps)\n\n const getBulletStatus = (index: number) => {\n const activeBullet = steps[index]\n\n if (activeBullet.status) return activeBullet.status\n if (completedSteps.length === steps.length) return Status.SUCCESS\n if (activeStep === index && completedStepsSet.has(activeStep))\n return Status.REVIEWED\n if (activeStep === index) return Status.ACTIVE\n if (completedStepsSet.has(index)) return Status.COMPLETED\n if (viewedStepsSet.has(index)) return Status.VIEWED\n return Status.DEFAULT\n }\n\n const getSeparatorStatus = (index: number) => {\n const bulletStatus = steps[index]?.status\n\n if (completedSteps.length === steps.length) {\n return Status.SUCCESS\n }\n\n if (bulletStatus === Status.SUCCESS) {\n return Status.SUCCESS\n }\n\n if (bulletStatus === Status.COMPLETED \|\| index < Math.max(...viewedSteps)) {\n return Status.ACTIVE\n }\n\n if (bulletStatus === Status.VIEWED) {\n return Status.VIEWED\n }\n\n return Status.DEFAULT\n }\n\n return (\n <StepperStepsContainer className={className} direction={direction}>\n {steps.map((step, index) => {\n const bulletStatus = getBulletStatus(index)\n const separatorStatus = getSeparatorStatus(index)\n\n return (\n <StepperStepContainer\n tabIndex={0}\n // Steps are a fixed, index-addressed list (activeStep/viewedSteps/\n // goToStep all key off the index) that never reorders, so the index\n // is the stable identity here.\n // eslint-disable-next-line react/no-array-index-key\n key={`step_${index}`}\n direction={direction}\n separator={separatorStatus}\n status={bulletStatus}\n style={{ '--steps': steps.length \|\| 0 }}\n className={\n direction === 'horizontal'\n ? 'w-[calc(100%/var(--steps))]'\n : 'h-[calc(100%/var(--steps))]'\n }\n canInteract={allowSkip}\n >\n <StepperStepBullet\n as={allowSkip ? 'button' : 'div'}\n onClick={() =>\n allowSkip && viewedStepsSet.has(index)\n ? goToStep?.(index)\n : undefined\n }\n status={bulletStatus}\n aria-current={index === activeStep ? 'step' : undefined}\n aria-label={!step.label ? `step ${index + 1}` : ''}\n aria-labelledby={step.label ? `step-${index}` : undefined}\n className={\n allowSkip && viewedStepsSet.has(index)\n ? 'cursor-pointer'\n : 'cursor-auto'\n }\n >\n {step.status === Status.SUCCESS \|\|\n (showCompletedIcons && bulletStatus === Status.COMPLETED) ? (\n <Icon is={Ok} />\n ) : (\n index + 1\n )}\n </StepperStepBullet>\n\n {step.label && !hideLabels && (\n <StepperStepLabel\n as=\"span\"\n id={`step-${index}`}\n direction={direction}\n status={bulletStatus}\n >\n {step.label}\n </StepperStepLabel>\n )}\n </StepperStepContainer>\n )\n })}\n </StepperStepsContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,wBAAwB,OAAO,OAAO;CAC1C,MAAM,CAAC,QAAQ,iBAAiB;CAChC,UAAU,EACR,WAAW;EACT,UAAU,CAAC,UAAU;EACrB,YAAY,CAAC,UAAU;CACzB,EACF;AACF,CAAC;AAED,IAAa,gBAAgB,EAAE,gBAAmC;CAChE,MAAM,EACJ,OACA,UACA,YACA,aACA,WACA,WACA,YACA,gBACA,uBACE,WAAW;CAIf,MAAM,iBAAiB,IAAI,IAAI,WAAW;CAC1C,MAAM,oBAAoB,IAAI,IAAI,cAAc;CAEhD,MAAM,mBAAmB,UAAkB;EACzC,MAAM,eAAe,MAAM;EAE3B,IAAI,aAAa,QAAQ,OAAO,aAAa;EAC7C,IAAI,eAAe,WAAW,MAAM,QAAQ,OAAO,OAAO;EAC1D,IAAI,eAAe,SAAS,kBAAkB,IAAI,UAAU,GAC1D,OAAO,OAAO;EAChB,IAAI,eAAe,OAAO,OAAO,OAAO;EACxC,IAAI,kBAAkB,IAAI,KAAK,GAAG,OAAO,OAAO;EAChD,IAAI,eAAe,IAAI,KAAK,GAAG,OAAO,OAAO;EAC7C,OAAO,OAAO;CAChB;CAEA,MAAM,sBAAsB,UAAkB;EAC5C,MAAM,eAAe,MAAM,MAAM,EAAE;EAEnC,IAAI,eAAe,WAAW,MAAM,QAClC,OAAO,OAAO;EAGhB,IAAI,iBAAiB,OAAO,SAC1B,OAAO,OAAO;EAGhB,IAAI,iBAAiB,OAAO,aAAa,QAAQ,KAAK,IAAI,GAAG,WAAW,GACtE,OAAO,OAAO;EAGhB,IAAI,iBAAiB,OAAO,QAC1B,OAAO,OAAO;EAGhB,OAAO,OAAO;CAChB;CAEA,OACE,oBAAC,uBAAD;EAAkC;EAAsB;YACrD,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,eAAe,gBAAgB,KAAK;GAG1C,OACE,qBAAC,sBAAD;IACE,UAAU;IAMC;IACX,WAXoB,mBAAmB,KAW5B;IACX,QAAQ;IACR,OAAO,EAAE,WAAW,MAAM,UAAU,EAAE;IACtC,WACE,cAAc,eACV,gCACA;IAEN,aAAa;cAhBf,CAkBE,oBAAC,mBAAD;KACE,IAAI,YAAY,WAAW;KAC3B,eACE,aAAa,eAAe,IAAI,KAAK,IACjC,WAAW,KAAK,IAChB,KAAA;KAEN,QAAQ;KACR,gBAAc,UAAU,aAAa,SAAS,KAAA;KAC9C,cAAY,CAAC,KAAK,QAAQ,QAAQ,QAAQ,MAAM;KAChD,mBAAiB,KAAK,QAAQ,QAAQ,UAAU,KAAA;KAChD,WACE,aAAa,eAAe,IAAI,KAAK,IACjC,mBACA;eAGL,KAAK,WAAW,OAAO,WACvB,sBAAsB,iBAAiB,OAAO,YAC7C,oBAAC,MAAD,EAAM,IAAI,GAAK,CAAA,IAEf,QAAQ;IAEO,CAAA,GAElB,KAAK,SAAS,CAAC,cACd,oBAAC,kBAAD;KACE,IAAG;KACH,IAAI,QAAQ;KACD;KACX,QAAQ;eAEP,KAAK;IACU,CAAA,CAEA;MA/Cf,QAAQ,OA+CO;EAE1B,CAAC;CACoB,CAAA;AAE3B"}

package/dist/components/table/useStickyColumnsCss.js CHANGED Viewed

@@ -5,7 +5,7 @@ var useStickyColumnsStyle = ({ numberOfStickyColumns, wrapperRef }) => {
 	const generateColumnsStyle = React$1.useCallback(() => {
 		let accWidth = 0;
 		const tableHeaderCells = wrapperRef.current?.querySelectorAll("th");
-		return Array.from(tableHeaderCells || []).slice(0, numberOfStickyColumns).reduce((acc, column, index) => {
+		return [...tableHeaderCells || []].slice(0, numberOfStickyColumns).reduce((acc, column, index) => {
 			const elementNumber = index + 1;
 			const styleObject = {
 				...acc,

package/dist/components/table/useStickyColumnsCss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useStickyColumnsCss.js","names":[],"sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\ntype ColumnStyle = Record<\n `--sticky-column-width-${number}` \| `--sticky-offset-left-${number}`,\n string\n>\n\ninterface UseStickyColumnsCss {\n columnsStyle?: ColumnStyle\n}\n\nexport const useStickyColumnsStyle = ({\n numberOfStickyColumns,\n wrapperRef\n}: {\n numberOfStickyColumns: number\n wrapperRef: React.RefObject<HTMLDivElement \| null>\n}): UseStickyColumnsCss => {\n const [columnsStyle, setColumnsStyle] = React.useState<ColumnStyle>({})\n\n const generateColumnsStyle = React.useCallback(() => {\n let accWidth = 0\n\n // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n const tableHeaderElements = ~~Array.from~~(tableHeaderCells \|\| [])\n\n // Getting only the number of sticky columns from the elements array that is what we are interested in.\n const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n const newColumnsStyle = stickyColumns.reduce((acc, column, index) => {\n const elementNumber = index + 1\n const styleObject = {\n ...acc,\n [`--sticky-column-width-${elementNumber}`]: `${column.offsetWidth}px`,\n [`--sticky-offset-left-${elementNumber}`]: `${accWidth}px`\n }\n\n accWidth += tableHeaderCells?.item(index).clientWidth \|\| 0\n\n return styleObject\n }, {})\n\n return newColumnsStyle\n }, [numberOfStickyColumns, wrapperRef])\n\n React.useLayoutEffect(() => {\n if (!numberOfStickyColumns) return\n const newColumnsStyle = generateColumnsStyle()\n\n setColumnsStyle(newColumnsStyle)\n }, [numberOfStickyColumns, wrapperRef, generateColumnsStyle])\n\n return {\n columnsStyle\n }\n}\n"],"mappings":";;AAWA,IAAa,yBAAyB,EACpC,uBACA,iBAIyB;CACzB,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAsB,CAAC,CAAC;CAEtE,MAAM,uBAAuB,QAAM,kBAAkB;EACnD,IAAI,WAAW;EAGf,MAAM,mBAAmB,WAAW,SAAS,iBAAiB,IAAI;EAmBlE,~~OAlB4B~~,~~MAAM~~,~~KAAK~~,oBAAoB,CAAC,~~CAGtC~~,CAAA,CAAoB,MAAM,GAAG,qBAE3B,CAAA,CAAc,QAAQ,KAAK,QAAQ,UAAU;GACnE,MAAM,gBAAgB,QAAQ;GAC9B,MAAM,cAAc;IAClB,GAAG;KACF,yBAAyB,kBAAkB,GAAG,OAAO,YAAY;KACjE,wBAAwB,kBAAkB,GAAG,SAAS;GACzD;GAEA,YAAY,kBAAkB,KAAK,KAAK,CAAC,CAAC,eAAe;GAEzD,OAAO;EACT,GAAG,CAAC,CAEG;CACT,GAAG,CAAC,uBAAuB,UAAU,CAAC;CAEtC,QAAM,sBAAsB;EAC1B,IAAI,CAAC,uBAAuB;EAG5B,gBAFwB,qBAER,CAAe;CACjC,GAAG;EAAC;EAAuB;EAAY;CAAoB,CAAC;CAE5D,OAAO,EACL,aACF;AACF"}
1	+ {"version":3,"file":"useStickyColumnsCss.js","names":[],"sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\ntype ColumnStyle = Record<\n `--sticky-column-width-${number}` \| `--sticky-offset-left-${number}`,\n string\n>\n\ninterface UseStickyColumnsCss {\n columnsStyle?: ColumnStyle\n}\n\nexport const useStickyColumnsStyle = ({\n numberOfStickyColumns,\n wrapperRef\n}: {\n numberOfStickyColumns: number\n wrapperRef: React.RefObject<HTMLDivElement \| null>\n}): UseStickyColumnsCss => {\n const [columnsStyle, setColumnsStyle] = React.useState<ColumnStyle>({})\n\n const generateColumnsStyle = React.useCallback(() => {\n let accWidth = 0\n\n // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n const tableHeaderElements = [...(tableHeaderCells \|\| [])]\n\n // Getting only the number of sticky columns from the elements array that is what we are interested in.\n const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n const newColumnsStyle = stickyColumns.reduce((acc, column, index) => {\n const elementNumber = index + 1\n const styleObject = {\n ...acc,\n [`--sticky-column-width-${elementNumber}`]: `${column.offsetWidth}px`,\n [`--sticky-offset-left-${elementNumber}`]: `${accWidth}px`\n }\n\n accWidth += tableHeaderCells?.item(index).clientWidth \|\| 0\n\n return styleObject\n }, {})\n\n return newColumnsStyle\n }, [numberOfStickyColumns, wrapperRef])\n\n React.useLayoutEffect(() => {\n if (!numberOfStickyColumns) return\n const newColumnsStyle = generateColumnsStyle()\n\n setColumnsStyle(newColumnsStyle)\n }, [numberOfStickyColumns, wrapperRef, generateColumnsStyle])\n\n return {\n columnsStyle\n }\n}\n"],"mappings":";;AAWA,IAAa,yBAAyB,EACpC,uBACA,iBAIyB;CACzB,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAsB,CAAC,CAAC;CAEtE,MAAM,uBAAuB,QAAM,kBAAkB;EACnD,IAAI,WAAW;EAGf,MAAM,mBAAmB,WAAW,SAAS,iBAAiB,IAAI;EAmBlE,OAfsB,CAHO,GAAI,oBAAoB,CAAC,CAGhC,CAAA,CAAoB,MAAM,GAAG,qBAE3B,CAAA,CAAc,QAAQ,KAAK,QAAQ,UAAU;GACnE,MAAM,gBAAgB,QAAQ;GAC9B,MAAM,cAAc;IAClB,GAAG;KACF,yBAAyB,kBAAkB,GAAG,OAAO,YAAY;KACjE,wBAAwB,kBAAkB,GAAG,SAAS;GACzD;GAEA,YAAY,kBAAkB,KAAK,KAAK,CAAC,CAAC,eAAe;GAEzD,OAAO;EACT,GAAG,CAAC,CAEG;CACT,GAAG,CAAC,uBAAuB,UAAU,CAAC;CAEtC,QAAM,sBAAsB;EAC1B,IAAI,CAAC,uBAAuB;EAG5B,gBAFwB,qBAER,CAAe;CACjC,GAAG;EAAC;EAAuB;EAAY;CAAoB,CAAC;CAE5D,OAAO,EACL,aACF;AACF"}

package/dist/components/tabs/TabsTriggerList.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { styled } from "../../styled.js";
-import { Icon } from "../icon/Icon.js";
 import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
+import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { useCallbackRefState } from "../../utilities/hooks/useCallbackRef.js";
 import { useScrollPosition } from "../../utilities/hooks/useScrollPosition.js";