@atom-learning/components 6.16.1-beta.1 → 6.17.0-beta.1

package/dist/components/carousel/Carousel.d.ts

@@ -1,41 +1,48 @@
-import { CarouselProvider } from 'pure-react-carousel';
+import useEmblaCarousel from 'embla-carousel-react';
 import * as React from 'react';
-import { CSSWrapper } from '../../utilities/css-wrapper/CSSWrapper';
+type EmblaApi = ReturnType<typeof useEmblaCarousel>[1];
 type CarouselProps = {
-    slideHeight: number;
-    slideWidth: number;
-    numSlides: number;
+    currentSlide?: number;
 };
 export declare const CarouselComponent: {
-    ({ children, className, slideHeight, slideWidth, numSlides, ...props }: CarouselProps & Omit<React.ComponentProps<typeof CarouselProvider>, "naturalSlideWidth" | "naturalSlideHeight" | "totalSlides"> & React.ComponentProps<typeof CSSWrapper>): React.JSX.Element;
+    ({ children, currentSlide, ...props }: React.PropsWithChildren<CarouselProps & React.HTMLAttributes<HTMLDivElement>>): React.JSX.Element;
     displayName: string;
 };
-/**
- * Documentation about the hook usage
- * https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext
- */
-export declare const useCarousel: () => import("pure-react-carousel").CarouselStoreInterface;
+export declare const useCarousel: () => {
+    currentSlide: number;
+    emblaRef: React.RefCallback<HTMLDivElement>;
+    emblaApi: EmblaApi;
+    selectedIndex: number;
+    scrollSnaps: number[];
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    scrollTo: (index: number) => void;
+};
 export declare const Carousel: {
-    ({ children, className, slideHeight, slideWidth, numSlides, ...props }: CarouselProps & Omit<React.ComponentProps<typeof CarouselProvider>, "naturalSlideWidth" | "naturalSlideHeight" | "totalSlides"> & React.ComponentProps<typeof CSSWrapper>): React.JSX.Element;
+    ({ children, currentSlide, ...props }: React.PropsWithChildren<CarouselProps & React.HTMLAttributes<HTMLDivElement>>): React.JSX.Element;
     displayName: string;
 } & {
-    ArrowNext: (props: Omit<React.ComponentProps<React.ForwardRefExoticComponent<Omit<import("pure-react-carousel").ButtonNextProps & React.RefAttributes<React.Component<import("pure-react-carousel").ButtonNextProps, any, any>>, never> & {
-        as?: React.ElementType;
-    }>>, "children">) => React.JSX.Element;
-    ArrowPrevious: (props: Omit<React.ComponentProps<React.ForwardRefExoticComponent<Omit<import("pure-react-carousel").ButtonBackProps & React.RefAttributes<React.Component<import("pure-react-carousel").ButtonBackProps, any, any>>, never> & {
+    ArrowNext: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+    }, never> & {
         as?: React.ElementType;
-    }>>, "children">) => React.JSX.Element;
-    Pagination: React.ForwardRefExoticComponent<Omit<import("pure-react-carousel").DotGroupProps & React.RefAttributes<React.Component<import("pure-react-carousel").DotGroupProps, any, any>>, never> & {
+    }>>) => React.JSX.Element;
+    ArrowPrevious: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+    }, never> & {
         as?: React.ElementType;
-    }>;
-    Slide: ({ children, ...remainingProps }: React.ComponentProps<React.ComponentClass<import("pure-react-carousel").SlideProps, any> | React.FunctionComponent<import("pure-react-carousel").SlideProps>> & {
-        className?: string;
+    }>>) => React.JSX.Element;
+    Pagination: ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+    Slide: ({ children, className, index, ...rest }: React.PropsWithChildren<{
         index: number;
-    }) => React.JSX.Element;
-    Slider: ({ children, className, overflow, ...rest }: React.PropsWithChildren<(React.ComponentClass<import("pure-react-carousel").SliderProps, any> | React.FunctionComponent<import("pure-react-carousel").SliderProps>) & {
-        tabIndex?: number;
+    } & React.HTMLAttributes<HTMLDivElement>>) => React.JSX.Element;
+    Slider: ({ children, className, overflow, tabIndex, ...rest }: {
+        children?: React.ReactNode;
         className?: string;
         overflow?: boolean;
-    }>) => React.JSX.Element;
+        tabIndex?: number;
+    }) => React.JSX.Element;
 };
 export {};

package/dist/components/carousel/Carousel.js

@@ -1,22 +1,92 @@
-import { CSSWrapper } from "../../utilities/css-wrapper/CSSWrapper.js";
+import { cn } from "../../styled.js";
 import { CarouselArrowNext, CarouselArrowPrevious } from "./CarouselArrows.js";
 import { CarouselPagination } from "./CarouselPagination.js";
 import { CarouselSlide } from "./CarouselSlide.js";
 import { CarouselSlider } from "./CarouselSlider.js";
 import * as React$1 from "react";
-import { CarouselContext, CarouselProvider } from "pure-react-carousel";
+import useEmblaCarousel from "embla-carousel-react";
 //#region src/components/carousel/Carousel.tsx
-var CarouselComponent = ({ children, className, slideHeight, slideWidth, numSlides, ...props }) => /* @__PURE__ */ React$1.createElement(CSSWrapper, { className }, /* @__PURE__ */ React$1.createElement(CarouselProvider, {
-	naturalSlideWidth: slideWidth,
-	naturalSlideHeight: slideHeight,
-	totalSlides: numSlides,
-	...props
-}, children));
-/**
-* Documentation about the hook usage
-* https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext
-*/
-var useCarousel = () => React$1.useContext(CarouselContext);
+var CarouselContext = React$1.createContext(null);
+var CarouselComponent = ({ children, currentSlide = 0, ...props }) => {
+	const [emblaRef, emblaApi] = useEmblaCarousel({
+		startIndex: currentSlide,
+		align: "center"
+	});
+	const [selectedIndex, setSelectedIndex] = React$1.useState(currentSlide);
+	const [scrollSnaps, setScrollSnaps] = React$1.useState([]);
+	const [canScrollPrev, setCanScrollPrev] = React$1.useState(false);
+	const [canScrollNext, setCanScrollNext] = React$1.useState(false);
+	const scrollPrev = React$1.useCallback(() => {
+		emblaApi?.scrollPrev();
+	}, [emblaApi]);
+	const scrollNext = React$1.useCallback(() => {
+		emblaApi?.scrollNext();
+	}, [emblaApi]);
+	const scrollTo = React$1.useCallback((index) => {
+		emblaApi?.scrollTo(index);
+	}, [emblaApi]);
+	const onSelect = React$1.useCallback(() => {
+		if (!emblaApi) return;
+		setSelectedIndex(emblaApi.selectedScrollSnap());
+		setCanScrollPrev(emblaApi.canScrollPrev());
+		setCanScrollNext(emblaApi.canScrollNext());
+	}, [emblaApi]);
+	const onInit = React$1.useCallback(() => {
+		if (!emblaApi) return;
+		setScrollSnaps(emblaApi.scrollSnapList());
+	}, [emblaApi]);
+	React$1.useEffect(() => {
+		if (!emblaApi) return;
+		onInit();
+		onSelect();
+		emblaApi.on("reInit", onInit);
+		emblaApi.on("reInit", onSelect);
+		emblaApi.on("select", onSelect);
+		return () => {
+			emblaApi.off("reInit", onInit);
+			emblaApi.off("reInit", onSelect);
+			emblaApi.off("select", onSelect);
+		};
+	}, [
+		emblaApi,
+		onInit,
+		onSelect
+	]);
+	const contextValue = React$1.useMemo(() => ({
+		emblaRef,
+		emblaApi,
+		selectedIndex,
+		scrollSnaps,
+		canScrollPrev,
+		canScrollNext,
+		scrollPrev,
+		scrollNext,
+		scrollTo
+	}), [
+		emblaRef,
+		emblaApi,
+		selectedIndex,
+		scrollSnaps,
+		canScrollPrev,
+		canScrollNext,
+		scrollPrev,
+		scrollNext,
+		scrollTo
+	]);
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ React$1.createElement("div", {
+		className: cn("relative", "w-full", className),
+		...rest
+	}, /* @__PURE__ */ React$1.createElement(CarouselContext.Provider, { value: contextValue }, children));
+};
+var useCarousel = () => {
+	const context = React$1.useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel must be used within a Carousel");
+	return {
+		...context,
+		currentSlide: context.selectedIndex
+	};
+};
 var Carousel = Object.assign(CarouselComponent, {
 	ArrowNext: CarouselArrowNext,
 	ArrowPrevious: CarouselArrowPrevious,

package/dist/components/carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import { CarouselContext, CarouselProvider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nimport { CarouselArrowNext, CarouselArrowPrevious } from './CarouselArrows'\nimport { CarouselPagination } from './CarouselPagination'\nimport { CarouselSlide } from './CarouselSlide'\nimport { CarouselSlider } from './CarouselSlider'\n\ntype CarouselProps = {\n  slideHeight: number\n  slideWidth: number\n  numSlides: number\n}\n\nexport const CarouselComponent = ({\n  children,\n  className,\n  slideHeight,\n  slideWidth,\n  numSlides,\n  ...props\n}: CarouselProps &\n  Omit<\n    React.ComponentProps<typeof CarouselProvider>,\n    'naturalSlideWidth' | 'naturalSlideHeight' | 'totalSlides'\n  > &\n  React.ComponentProps<typeof CSSWrapper>) => (\n  <CSSWrapper className={className}>\n    <CarouselProvider\n      naturalSlideWidth={slideWidth}\n      naturalSlideHeight={slideHeight}\n      totalSlides={numSlides}\n      {...props}\n    >\n      {children}\n    </CarouselProvider>\n  </CSSWrapper>\n)\n\n/**\n * Documentation about the hook usage\n * https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext\n */\nexport const useCarousel = () => React.useContext(CarouselContext)\n\nexport const Carousel = Object.assign(CarouselComponent, {\n  ArrowNext: CarouselArrowNext,\n  ArrowPrevious: CarouselArrowPrevious,\n  Pagination: CarouselPagination,\n  Slide: CarouselSlide,\n  Slider: CarouselSlider\n})\n\nCarouselComponent.displayName = 'Carousel'\n"],"mappings":";;;;;;;;AAgBA,IAAa,qBAAqB,EAChC,UACA,WACA,aACA,YACA,WACA,GAAG,YAOH,wBAAA,cAAC,YAAD,EAAuB,WASV,EARX,wBAAA,cAAC,kBAAD;CACE,mBAAmB;CACnB,oBAAoB;CACpB,aAAa;CACb,GAAI;CAGa,EADhB,SACgB,CACR;;;;;AAOf,IAAa,oBAAoB,QAAM,WAAW,gBAAgB;AAElE,IAAa,WAAW,OAAO,OAAO,mBAAmB;CACvD,WAAW;CACX,eAAe;CACf,YAAY;CACZ,OAAO;CACP,QAAQ;CACT,CAAC;AAEF,kBAAkB,cAAc"}
+{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import useEmblaCarousel from 'embla-carousel-react'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { CarouselArrowNext, CarouselArrowPrevious } from './CarouselArrows'\nimport { CarouselPagination } from './CarouselPagination'\nimport { CarouselSlide } from './CarouselSlide'\nimport { CarouselSlider } from './CarouselSlider'\n\ntype EmblaApi = ReturnType<typeof useEmblaCarousel>[1]\n\ntype CarouselContextValue = {\n  emblaRef: React.RefCallback<HTMLDivElement>\n  emblaApi: EmblaApi\n  selectedIndex: number\n  scrollSnaps: number[]\n  canScrollPrev: boolean\n  canScrollNext: boolean\n  scrollPrev: () => void\n  scrollNext: () => void\n  scrollTo: (index: number) => void\n}\n\nconst CarouselContext = React.createContext<CarouselContextValue | null>(null)\n\ntype CarouselProps = {\n  currentSlide?: number\n}\n\nexport const CarouselComponent = ({\n  children,\n  currentSlide = 0,\n  ...props\n}: React.PropsWithChildren<\n  CarouselProps & React.HTMLAttributes<HTMLDivElement>\n>) => {\n  const [emblaRef, emblaApi] = useEmblaCarousel({\n    startIndex: currentSlide,\n    align: 'center'\n  })\n\n  const [selectedIndex, setSelectedIndex] = React.useState(currentSlide)\n  const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const scrollPrev = React.useCallback(() => {\n    emblaApi?.scrollPrev()\n  }, [emblaApi])\n\n  const scrollNext = React.useCallback(() => {\n    emblaApi?.scrollNext()\n  }, [emblaApi])\n\n  const scrollTo = React.useCallback(\n    (index: number) => {\n      emblaApi?.scrollTo(index)\n    },\n    [emblaApi]\n  )\n\n  const onSelect = React.useCallback(() => {\n    if (!emblaApi) return\n    setSelectedIndex(emblaApi.selectedScrollSnap())\n    setCanScrollPrev(emblaApi.canScrollPrev())\n    setCanScrollNext(emblaApi.canScrollNext())\n  }, [emblaApi])\n\n  const onInit = React.useCallback(() => {\n    if (!emblaApi) return\n    setScrollSnaps(emblaApi.scrollSnapList())\n  }, [emblaApi])\n\n  React.useEffect(() => {\n    if (!emblaApi) return\n\n    onInit()\n    onSelect()\n\n    emblaApi.on('reInit', onInit)\n    emblaApi.on('reInit', onSelect)\n    emblaApi.on('select', onSelect)\n\n    return () => {\n      emblaApi.off('reInit', onInit)\n      emblaApi.off('reInit', onSelect)\n      emblaApi.off('select', onSelect)\n    }\n  }, [emblaApi, onInit, onSelect])\n\n  const contextValue = React.useMemo<CarouselContextValue>(\n    () => ({\n      emblaRef,\n      emblaApi,\n      selectedIndex,\n      scrollSnaps,\n      canScrollPrev,\n      canScrollNext,\n      scrollPrev,\n      scrollNext,\n      scrollTo\n    }),\n    [\n      emblaRef,\n      emblaApi,\n      selectedIndex,\n      scrollSnaps,\n      canScrollPrev,\n      canScrollNext,\n      scrollPrev,\n      scrollNext,\n      scrollTo\n    ]\n  )\n\n  const { className, ...rest } = props\n\n  return (\n    <div className={cn('relative', 'w-full', className)} {...rest}>\n      <CarouselContext.Provider value={contextValue}>\n        {children}\n      </CarouselContext.Provider>\n    </div>\n  )\n}\n\nexport const useCarousel = () => {\n  const context = React.useContext(CarouselContext)\n  if (!context) {\n    throw new Error('useCarousel must be used within a Carousel')\n  }\n\n  return {\n    ...context,\n    // Alias for backward compatibility\n    currentSlide: context.selectedIndex\n  }\n}\n\nexport const Carousel = Object.assign(CarouselComponent, {\n  ArrowNext: CarouselArrowNext,\n  ArrowPrevious: CarouselArrowPrevious,\n  Pagination: CarouselPagination,\n  Slide: CarouselSlide,\n  Slider: CarouselSlider\n})\n\nCarouselComponent.displayName = 'Carousel'\n"],"mappings":";;;;;;;;AAwBA,IAAM,kBAAkB,QAAM,cAA2C,KAAK;AAM9E,IAAa,qBAAqB,EAChC,UACA,eAAe,GACf,GAAG,YAGC;CACJ,MAAM,CAAC,UAAU,YAAY,iBAAiB;EAC5C,YAAY;EACZ,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,aAAa;CACtE,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAmB,EAAE,CAAC;CAClE,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,MAAM;CAC/D,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,MAAM;CAE/D,MAAM,aAAa,QAAM,kBAAkB;AACzC,YAAU,YAAY;IACrB,CAAC,SAAS,CAAC;CAEd,MAAM,aAAa,QAAM,kBAAkB;AACzC,YAAU,YAAY;IACrB,CAAC,SAAS,CAAC;CAEd,MAAM,WAAW,QAAM,aACpB,UAAkB;AACjB,YAAU,SAAS,MAAM;IAE3B,CAAC,SAAS,CACX;CAED,MAAM,WAAW,QAAM,kBAAkB;AACvC,MAAI,CAAC,SAAU;AACf,mBAAiB,SAAS,oBAAoB,CAAC;AAC/C,mBAAiB,SAAS,eAAe,CAAC;AAC1C,mBAAiB,SAAS,eAAe,CAAC;IACzC,CAAC,SAAS,CAAC;CAEd,MAAM,SAAS,QAAM,kBAAkB;AACrC,MAAI,CAAC,SAAU;AACf,iBAAe,SAAS,gBAAgB,CAAC;IACxC,CAAC,SAAS,CAAC;AAEd,SAAM,gBAAgB;AACpB,MAAI,CAAC,SAAU;AAEf,UAAQ;AACR,YAAU;AAEV,WAAS,GAAG,UAAU,OAAO;AAC7B,WAAS,GAAG,UAAU,SAAS;AAC/B,WAAS,GAAG,UAAU,SAAS;AAE/B,eAAa;AACX,YAAS,IAAI,UAAU,OAAO;AAC9B,YAAS,IAAI,UAAU,SAAS;AAChC,YAAS,IAAI,UAAU,SAAS;;IAEjC;EAAC;EAAU;EAAQ;EAAS,CAAC;CAEhC,MAAM,eAAe,QAAM,eAClB;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;AAE/B,QACE,wBAAA,cAAC,OAAD;EAAK,WAAW,GAAG,YAAY,UAAU,UAAU;EAAE,GAAI;EAInD,EAHJ,wBAAA,cAAC,gBAAgB,UAAjB,EAA0B,OAAO,cAEN,EADxB,SACwB,CACvB;;AAIV,IAAa,oBAAoB;CAC/B,MAAM,UAAU,QAAM,WAAW,gBAAgB;AACjD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,6CAA6C;AAG/D,QAAO;EACL,GAAG;EAEH,cAAc,QAAQ;EACvB;;AAGH,IAAa,WAAW,OAAO,OAAO,mBAAmB;CACvD,WAAW;CACX,eAAe;CACf,YAAY;CACZ,OAAO;CACP,QAAQ;CACT,CAAC;AAEF,kBAAkB,cAAc"}

package/dist/components/carousel/CarouselArrows.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-declare const StyledButtonBack: React.ForwardRefExoticComponent<Omit<import("pure-react-carousel").ButtonBackProps & React.RefAttributes<React.Component<import("pure-react-carousel").ButtonBackProps, any, any>>, never> & {
+declare const ArrowButton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, never> & {
     as?: React.ElementType;
 }>;
-declare const StyledButtonNext: React.ForwardRefExoticComponent<Omit<import("pure-react-carousel").ButtonNextProps & React.RefAttributes<React.Component<import("pure-react-carousel").ButtonNextProps, any, any>>, never> & {
-    as?: React.ElementType;
-}>;
-export declare const CarouselArrowPrevious: (props: Omit<React.ComponentProps<typeof StyledButtonBack>, "children">) => React.JSX.Element;
-export declare const CarouselArrowNext: (props: Omit<React.ComponentProps<typeof StyledButtonNext>, "children">) => React.JSX.Element;
+export declare const CarouselArrowPrevious: (props: React.ComponentProps<typeof ArrowButton>) => React.JSX.Element;
+export declare const CarouselArrowNext: (props: React.ComponentProps<typeof ArrowButton>) => React.JSX.Element;
 export {};

package/dist/components/carousel/CarouselArrows.js

@@ -1,12 +1,11 @@
 import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
+import { useCarousel } from "./Carousel.js";
 import * as React$1 from "react";
 import { ChevronLeft, ChevronRight } from "@atom-learning/icons";
-import { ButtonBack, ButtonNext } from "pure-react-carousel";
 //#region src/components/carousel/CarouselArrows.tsx
-var buttonStyles = [
+var ArrowButton = styled("button", { base: [
 	"items-center",
-	"bg-[unset]",
 	"text-primary-800",
 	"cursor-pointer",
 	"flex",
@@ -19,12 +18,29 @@ var buttonStyles = [
 	"ease-in-out",
 	"hover:text-primary-900",
 	"active:text-primary-1000",
-	"disabled:text-grey-200"
-];
-var StyledButtonBack = styled(ButtonBack, { base: buttonStyles });
-var StyledButtonNext = styled(ButtonNext, { base: buttonStyles });
-var CarouselArrowPrevious = (props) => /* @__PURE__ */ React$1.createElement(StyledButtonBack, props, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronLeft }));
-var CarouselArrowNext = (props) => /* @__PURE__ */ React$1.createElement(StyledButtonNext, props, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronRight }));
+	"disabled:text-grey-200",
+	"disabled:cursor-not-allowed"
+] });
+var CarouselArrowPrevious = (props) => {
+	const { scrollPrev, canScrollPrev } = useCarousel();
+	return /* @__PURE__ */ React$1.createElement(ArrowButton, {
+		type: "button",
+		onClick: scrollPrev,
+		disabled: !canScrollPrev,
+		"aria-label": "Previous slide",
+		...props
+	}, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronLeft }));
+};
+var CarouselArrowNext = (props) => {
+	const { scrollNext, canScrollNext } = useCarousel();
+	return /* @__PURE__ */ React$1.createElement(ArrowButton, {
+		type: "button",
+		onClick: scrollNext,
+		disabled: !canScrollNext,
+		"aria-label": "Next slide",
+		...props
+	}, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronRight }));
+};
 //#endregion
 export { CarouselArrowNext, CarouselArrowPrevious };
 

package/dist/components/carousel/CarouselArrows.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselArrows.js","names":[],"sources":["../../../src/components/carousel/CarouselArrows.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport {\n  ButtonBack as BaseButtonBack,\n  ButtonNext as BaseButtonNext\n} from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nconst buttonStyles = [\n  'items-center',\n  'bg-[unset]',\n  'text-primary-800',\n  'cursor-pointer',\n  'flex',\n  'justify-center',\n  'size-12',\n  'top-1/2',\n  '-translate-y-1/2',\n  'transition-colors',\n  'duration-150',\n  'ease-in-out',\n  'hover:text-primary-900',\n  'active:text-primary-1000',\n  'disabled:text-grey-200'\n]\n\nconst StyledButtonBack = styled(BaseButtonBack, {\n  base: buttonStyles\n})\n\nconst StyledButtonNext = styled(BaseButtonNext, {\n  base: buttonStyles\n})\n\nexport const CarouselArrowPrevious = (\n  props: Omit<React.ComponentProps<typeof StyledButtonBack>, 'children'>\n) => (\n  <StyledButtonBack {...props}>\n    <Icon is={ChevronLeft} />\n  </StyledButtonBack>\n)\nexport const CarouselArrowNext = (\n  props: Omit<React.ComponentProps<typeof StyledButtonNext>, 'children'>\n) => (\n  <StyledButtonNext {...props}>\n    <Icon is={ChevronRight} />\n  </StyledButtonNext>\n)\n"],"mappings":";;;;;;AAUA,IAAM,eAAe;CACnB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAM,mBAAmB,OAAO,YAAgB,EAC9C,MAAM,cACP,CAAC;AAEF,IAAM,mBAAmB,OAAO,YAAgB,EAC9C,MAAM,cACP,CAAC;AAEF,IAAa,yBACX,UAEA,wBAAA,cAAC,kBAAqB,OACpB,wBAAA,cAAC,MAAD,EAAM,IAAI,aAAe,CAAA,CACR;AAErB,IAAa,qBACX,UAEA,wBAAA,cAAC,kBAAqB,OACpB,wBAAA,cAAC,MAAD,EAAM,IAAI,cAAgB,CAAA,CACT"}
+{"version":3,"file":"CarouselArrows.js","names":[],"sources":["../../../src/components/carousel/CarouselArrows.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nimport { useCarousel } from './Carousel'\n\nconst ArrowButton = styled('button', {\n  base: [\n    'items-center',\n    'text-primary-800',\n    'cursor-pointer',\n    'flex',\n    'justify-center',\n    'size-12',\n    'top-1/2',\n    '-translate-y-1/2',\n    'transition-colors',\n    'duration-150',\n    'ease-in-out',\n    'hover:text-primary-900',\n    'active:text-primary-1000',\n    'disabled:text-grey-200',\n    'disabled:cursor-not-allowed'\n  ]\n})\n\nexport const CarouselArrowPrevious = (\n  props: React.ComponentProps<typeof ArrowButton>\n) => {\n  const { scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <ArrowButton\n      type=\"button\"\n      onClick={scrollPrev}\n      disabled={!canScrollPrev}\n      aria-label=\"Previous slide\"\n      {...props}\n    >\n      <Icon is={ChevronLeft} />\n    </ArrowButton>\n  )\n}\n\nexport const CarouselArrowNext = (\n  props: React.ComponentProps<typeof ArrowButton>\n) => {\n  const { scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <ArrowButton\n      type=\"button\"\n      onClick={scrollNext}\n      disabled={!canScrollNext}\n      aria-label=\"Next slide\"\n      {...props}\n    >\n      <Icon is={ChevronRight} />\n    </ArrowButton>\n  )\n}\n"],"mappings":";;;;;;AAQA,IAAM,cAAc,OAAO,UAAU,EACnC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,yBACX,UACG;CACH,MAAM,EAAE,YAAY,kBAAkB,aAAa;AAEnD,QACE,wBAAA,cAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;EAGQ,EADZ,wBAAA,cAAC,MAAD,EAAM,IAAI,aAAe,CAAA,CACb;;AAIlB,IAAa,qBACX,UACG;CACH,MAAM,EAAE,YAAY,kBAAkB,aAAa;AAEnD,QACE,wBAAA,cAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;EAGQ,EADZ,wBAAA,cAAC,MAAD,EAAM,IAAI,cAAgB,CAAA,CACd"}

package/dist/components/carousel/CarouselPagination.d.ts

@@ -1,3 +1,2 @@
-export declare const CarouselPagination: import("react").ForwardRefExoticComponent<Omit<import("pure-react-carousel").DotGroupProps & import("react").RefAttributes<import("react").Component<import("pure-react-carousel").DotGroupProps, any, any>>, never> & {
-    as?: import("react").ElementType;
-}>;
+import * as React from 'react';
+export declare const CarouselPagination: ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;

package/dist/components/carousel/CarouselPagination.js

@@ -1,22 +1,36 @@
-import { styled } from "../../styled.js";
-import { DotGroup } from "pure-react-carousel";
+import { cn, styled } from "../../styled.js";
+import { useCarousel } from "./Carousel.js";
+import * as React$1 from "react";
 //#region src/components/carousel/CarouselPagination.tsx
-var CarouselPagination = styled(DotGroup, { base: [
-	"justify-center",
-	"[&_button]:[[class*=selected]]:bg-primary-800",
-	"[&_button]:bg-grey-600",
-	"[&_button]:border-none",
-	"[&_button]:cursor-pointer",
-	"[&_button]:duration-100",
-	"[&_button]:ease-in",
-	"[&_button]:focus:bg-primary-900",
-	"[&_button]:hover:bg-primary-900",
-	"[&_button]:mx-1",
-	"[&_button]:p-1",
-	"[&_button]:rounded-[50%]",
-	"[&_button]:size-3",
-	"[&_button]:transition-all"
+var Dot = styled("button", { base: [
+	"bg-grey-600",
+	"cursor-pointer",
+	"duration-100",
+	"ease-in",
+	"focus:bg-primary-900",
+	"hover:bg-primary-900",
+	"mx-1",
+	"p-1",
+	"rounded-full",
+	"size-3",
+	"transition-all",
+	"disabled:bg-primary-800",
+	"disabled:cursor-default"
 ] });
+var CarouselPagination = ({ className, ...rest }) => {
+	const { scrollSnaps, selectedIndex, scrollTo } = useCarousel();
+	const dots = Array.from({ length: scrollSnaps.length }, (_, i) => i);
+	return /* @__PURE__ */ React$1.createElement("div", {
+		className: cn("flex", "justify-center", className),
+		...rest
+	}, dots.map((index) => /* @__PURE__ */ React$1.createElement(Dot, {
+		key: index,
+		type: "button",
+		onClick: () => scrollTo(index),
+		disabled: index === selectedIndex,
+		"aria-label": "slide dot"
+	})));
+};
 //#endregion
 export { CarouselPagination };
 

package/dist/components/carousel/CarouselPagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import { DotGroup } from 'pure-react-carousel'\n\nimport { styled } from '~/styled'\n\nexport const CarouselPagination = styled(DotGroup, {\n  base: [\n    'justify-center',\n    '[&_button]:[[class*=selected]]:bg-primary-800',\n    '[&_button]:bg-grey-600',\n    '[&_button]:border-none',\n    '[&_button]:cursor-pointer',\n    '[&_button]:duration-100',\n    '[&_button]:ease-in',\n    '[&_button]:focus:bg-primary-900',\n    '[&_button]:hover:bg-primary-900',\n    '[&_button]:mx-1',\n    '[&_button]:p-1',\n    '[&_button]:rounded-[50%]',\n    '[&_button]:size-3',\n    '[&_button]:transition-all'\n  ]\n})\n"],"mappings":";;;AAIA,IAAa,qBAAqB,OAAO,UAAU,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
+{"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn, styled } from '~/styled'\n\nimport { useCarousel } from './Carousel'\n\nconst Dot = styled('button', {\n  base: [\n    'bg-grey-600',\n    'cursor-pointer',\n    'duration-100',\n    'ease-in',\n    'focus:bg-primary-900',\n    'hover:bg-primary-900',\n    'mx-1',\n    'p-1',\n    'rounded-full',\n    'size-3',\n    'transition-all',\n    'disabled:bg-primary-800',\n    'disabled:cursor-default'\n  ]\n})\n\nexport const CarouselPagination = ({\n  className,\n  ...rest\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  const { scrollSnaps, selectedIndex, scrollTo } = useCarousel()\n\n  const dots = Array.from({ length: scrollSnaps.length }, (_, i) => i)\n\n  return (\n    <div className={cn('flex', 'justify-center', className)} {...rest}>\n      {dots.map((index) => (\n        <Dot\n          key={index}\n          type=\"button\"\n          onClick={() => scrollTo(index)}\n          disabled={index === selectedIndex}\n          aria-label=\"slide dot\"\n        />\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;;AAMA,IAAM,MAAM,OAAO,UAAU,EAC3B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,sBAAsB,EACjC,WACA,GAAG,WACuC;CAC1C,MAAM,EAAE,aAAa,eAAe,aAAa,aAAa;CAE9D,MAAM,OAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,QAAQ,GAAG,GAAG,MAAM,EAAE;AAEpE,QACE,wBAAA,cAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,kBAAkB,UAAU;EAAE,GAAI;EAUvD,EATH,KAAK,KAAK,UACT,wBAAA,cAAC,KAAD;EACE,KAAK;EACL,MAAK;EACL,eAAe,SAAS,MAAM;EAC9B,UAAU,UAAU;EACpB,cAAW;EACX,CAAA,CACF,CACE"}

package/dist/components/carousel/CarouselSlide.d.ts

@@ -1,6 +1,4 @@
-import { Slide as BaseSlide } from 'pure-react-carousel';
 import * as React from 'react';
-export declare const CarouselSlide: ({ children, ...remainingProps }: React.ComponentProps<typeof BaseSlide> & {
-    className?: string;
+export declare const CarouselSlide: ({ children, className, index, ...rest }: React.PropsWithChildren<{
     index: number;
-}) => React.JSX.Element;
+} & React.HTMLAttributes<HTMLDivElement>>) => React.JSX.Element;

package/dist/components/carousel/CarouselSlide.js

@@ -1,10 +1,17 @@
+import { cn } from "../../styled.js";
+import { useCarousel } from "./Carousel.js";
 import * as React$1 from "react";
-import { Slide } from "pure-react-carousel";
 //#region src/components/carousel/CarouselSlide.tsx
-var CarouselSlide = ({ children, ...remainingProps }) => /* @__PURE__ */ React$1.createElement(Slide, {
-	...remainingProps,
-	tag: "div"
-}, /* @__PURE__ */ React$1.createElement("div", { className: "px-3" }, children));
+var CarouselSlide = ({ children, className, index, ...rest }) => {
+	const { selectedIndex } = useCarousel();
+	const isSelected = selectedIndex === index;
+	return /* @__PURE__ */ React$1.createElement("div", {
+		role: "option",
+		"aria-selected": isSelected,
+		className: cn("basis-full", "shrink-0", className),
+		...rest
+	}, /* @__PURE__ */ React$1.createElement("div", { className: "flex items-center justify-center px-3" }, children));
+};
 //#endregion
 export { CarouselSlide };
 

package/dist/components/carousel/CarouselSlide.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlide.js","names":[],"sources":["../../../src/components/carousel/CarouselSlide.tsx"],"sourcesContent":["import { Slide as BaseSlide } from 'pure-react-carousel'\nimport * as React from 'react'\n\nexport const CarouselSlide = ({\n  children,\n  ...remainingProps\n}: React.ComponentProps<typeof BaseSlide> & {\n  className?: string\n  index: number\n}) => (\n  <BaseSlide {...remainingProps} tag=\"div\">\n    {/* padding to create the gap between slides */}\n    <div className=\"px-3\">{children}</div>\n  </BaseSlide>\n)\n"],"mappings":";;;AAGA,IAAa,iBAAiB,EAC5B,UACA,GAAG,qBAKH,wBAAA,cAAC,OAAD;CAAW,GAAI;CAAgB,KAAI;CAGvB,EADV,wBAAA,cAAC,OAAD,EAAK,WAAU,QAAuB,EAAf,SAAe,CAC5B"}
+{"version":3,"file":"CarouselSlide.js","names":[],"sources":["../../../src/components/carousel/CarouselSlide.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { useCarousel } from './Carousel'\n\nexport const CarouselSlide = ({\n  children,\n  className,\n  index,\n  ...rest\n}: React.PropsWithChildren<\n  { index: number } & React.HTMLAttributes<HTMLDivElement>\n>) => {\n  const { selectedIndex } = useCarousel()\n  const isSelected = selectedIndex === index\n\n  return (\n    <div\n      role=\"option\"\n      aria-selected={isSelected}\n      className={cn('basis-full', 'shrink-0', className)}\n      {...rest}\n    >\n      {/* padding to create the gap between slides */}\n      <div className=\"flex items-center justify-center px-3\">{children}</div>\n    </div>\n  )\n}\n"],"mappings":";;;;AAMA,IAAa,iBAAiB,EAC5B,UACA,WACA,OACA,GAAG,WAGC;CACJ,MAAM,EAAE,kBAAkB,aAAa;CACvC,MAAM,aAAa,kBAAkB;AAErC,QACE,wBAAA,cAAC,OAAD;EACE,MAAK;EACL,iBAAe;EACf,WAAW,GAAG,cAAc,YAAY,UAAU;EAClD,GAAI;EAIA,EADJ,wBAAA,cAAC,OAAD,EAAK,WAAU,yCAAwD,EAAf,SAAe,CACnE"}

package/dist/components/carousel/CarouselSlider.d.ts

@@ -1,7 +1,9 @@
-import { Slider as BaseSlider } from 'pure-react-carousel';
 import * as React from 'react';
-export declare const CarouselSlider: ({ children, className, overflow, ...rest }: React.PropsWithChildren<typeof BaseSlider & {
-    tabIndex?: number;
+type CarouselSliderProps = {
+    children?: React.ReactNode;
     className?: string;
     overflow?: boolean;
-}>) => React.JSX.Element;
+    tabIndex?: number;
+};
+export declare const CarouselSlider: ({ children, className, overflow, tabIndex, ...rest }: CarouselSliderProps) => React.JSX.Element;
+export {};

package/dist/components/carousel/CarouselSlider.js

@@ -1,11 +1,18 @@
 import { cn } from "../../styled.js";
+import { useCarousel } from "./Carousel.js";
 import * as React$1 from "react";
-import { Slider } from "pure-react-carousel";
 //#region src/components/carousel/CarouselSlider.tsx
-var CarouselSlider = ({ children, className, overflow, ...rest }) => /* @__PURE__ */ React$1.createElement(Slider, {
-	...rest,
-	className: cn(String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\_]]:float-left **:[[class*=slide\_]]:pb-0! **:[[class*=sliderTray\_]]:transition-transform **:[[class*=sliderTray\_]]:duration-500 **:[[class*=sliderTray\_]]:ease-[cubic-bezier(.645,.045,.355,1)]`, overflow && "overflow-visible", className)
-}, children);
+var CarouselSlider = ({ children, className, overflow, tabIndex = 0, ...rest }) => {
+	const { emblaRef } = useCarousel();
+	return /* @__PURE__ */ React$1.createElement("div", {
+		ref: emblaRef,
+		className: cn("ml-[50%]", "-translate-x-1/2", "cursor-grab", overflow ? "overflow-visible" : "overflow-hidden", className),
+		role: "listbox",
+		"aria-live": "polite",
+		tabIndex,
+		...rest
+	}, /* @__PURE__ */ React$1.createElement("div", { className: "flex" }, children));
+};
 //#endregion
 export { CarouselSlider };
 

package/dist/components/carousel/CarouselSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlider.js","names":[],"sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import { Slider as BaseSlider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nexport const CarouselSlider = ({\n  children,\n  className,\n  overflow,\n  ...rest\n}: React.PropsWithChildren<\n  typeof BaseSlider & {\n    tabIndex?: number\n    className?: string\n    overflow?: boolean\n  }\n>) => (\n  <BaseSlider\n    {...rest}\n    className={cn(\n      String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\\_]]:float-left **:[[class*=slide\\_]]:pb-0! **:[[class*=sliderTray\\_]]:transition-transform **:[[class*=sliderTray\\_]]:duration-500 **:[[class*=sliderTray\\_]]:ease-[cubic-bezier(.645,.045,.355,1)]`,\n      overflow && 'overflow-visible',\n      className\n    )}\n  >\n    {children}\n  </BaseSlider>\n)\n"],"mappings":";;;;AAKA,IAAa,kBAAkB,EAC7B,UACA,WACA,UACA,GAAG,WAQH,wBAAA,cAAC,QAAD;CACE,GAAI;CACJ,WAAW,GACT,OAAO,GAAG,qVACV,YAAY,oBACZ,UACD;CAGU,EADV,SACU"}
+{"version":3,"file":"CarouselSlider.js","names":[],"sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { useCarousel } from './Carousel'\n\ntype CarouselSliderProps = {\n  children?: React.ReactNode\n  className?: string\n  overflow?: boolean\n  tabIndex?: number\n}\n\nexport const CarouselSlider = ({\n  children,\n  className,\n  overflow,\n  tabIndex = 0,\n  ...rest\n}: CarouselSliderProps) => {\n  const { emblaRef } = useCarousel()\n\n  return (\n    <div\n      ref={emblaRef}\n      className={cn(\n        'ml-[50%]',\n        '-translate-x-1/2',\n        'cursor-grab',\n        overflow ? 'overflow-visible' : 'overflow-hidden',\n        className\n      )}\n      role=\"listbox\"\n      aria-live=\"polite\"\n      tabIndex={tabIndex}\n      {...rest}\n    >\n      <div className=\"flex\">{children}</div>\n    </div>\n  )\n}\n"],"mappings":";;;;AAaA,IAAa,kBAAkB,EAC7B,UACA,WACA,UACA,WAAW,GACX,GAAG,WACsB;CACzB,MAAM,EAAE,aAAa,aAAa;AAElC,QACE,wBAAA,cAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,YACA,oBACA,eACA,WAAW,qBAAqB,mBAChC,UACD;EACD,MAAK;EACL,aAAU;EACA;EACV,GAAI;EAGA,EADJ,wBAAA,cAAC,OAAD,EAAK,WAAU,QAAuB,EAAf,SAAe,CAClC"}

package/dist/components/dialog/DialogContent.js

@@ -38,9 +38,7 @@ var StyledDialogContent = styled(Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-95",
-				"[&>[data-dialog-close]]:top-4",
-				"[&>[data-dialog-close]]:right-4"
+				"w-95"
 			],
 			sm: [
 				"rounded-md",
@@ -49,9 +47,7 @@ var StyledDialogContent = styled(Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-120",
-				"[&>[data-dialog-close]]:top-4",
-				"[&>[data-dialog-close]]:right-4"
+				"w-120"
 			],
 			md: [
 				"rounded-md",
@@ -60,9 +56,7 @@ var StyledDialogContent = styled(Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-150",
-				"[&>[data-dialog-close]]:top-4",
-				"[&>[data-dialog-close]]:right-4"
+				"w-150"
 			],
 			lg: [
 				"rounded-md",
@@ -71,9 +65,7 @@ var StyledDialogContent = styled(Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-200",
-				"[&>[data-dialog-close]]:top-4",
-				"[&>[data-dialog-close]]:right-4"
+				"w-200"
 			],
 			xl: [
 				"rounded-md",
@@ -82,9 +74,7 @@ var StyledDialogContent = styled(Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-275",
-				"[&>[data-dialog-close]]:top-4",
-				"[&>[data-dialog-close]]:right-4"
+				"w-275"
 			],
 			fullscreen: [
 				"rounded-none",
@@ -93,9 +83,7 @@ var StyledDialogContent = styled(Content, {
 				"max-w-screen",
 				"max-h-screen",
 				"supports-svh:h-svh",
-				"supports-svh:max-h-svh",
-				"[&>[data-dialog-close]]:top-safe-offset-4",
-				"[&>[data-dialog-close]]:right-safe-offset-4"
+				"supports-svh:max-h-svh"
 			]
 		},
 		layout: { panel: [
@@ -118,7 +106,6 @@ var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog",
 	hasTooltip: false,
 	size: "md",
 	theme: "neutral",
-	"data-dialog-close": true,
 	className: "absolute top-4 right-4 size-12"
 }, /* @__PURE__ */ React$1.createElement(Icon, { is: Close })), React$1.Children.map(children, (child) => child?.type !== DialogBackground && child))));
 //#endregion

package/dist/components/dialog/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n  base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n  Content,\n  {\n    base: [\n      // `transform: translate()` is required for `floating-ui` to\n      // correctly position elements within the Dialog component.\n      // we can't use the translate property directly\n      'transform-[translate(-50%,-50%)]',\n      'bg-white',\n      'shadow-xl',\n      'box-border',\n      'left-1/2',\n      'h-auto',\n      'max-w-[90vw]',\n      'max-h-[90vh]',\n      'overflow-y-auto',\n      'rounded-md',\n      'p-8',\n      'fixed',\n      'top-1/2',\n      'z-1147483646',\n      'focus:outline-none',\n      'motion-safe:data-[state=open]:animate-slide-in-center',\n      'motion-safe:data-[state=closed]:animate-slide-out-center'\n    ],\n    variants: {\n      size: {\n        xs: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-95',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        sm: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-120',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        md: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-150',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        lg: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-200',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        xl: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-275',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        fullscreen: [\n          'rounded-none',\n          'w-screen',\n          'h-screen',\n          'max-w-screen',\n          'max-h-screen',\n          'supports-svh:h-svh',\n          'supports-svh:max-h-svh',\n          '[&>[data-dialog-close]]:top-safe-offset-4',\n          '[&>[data-dialog-close]]:right-safe-offset-4'\n        ]\n      },\n      layout: {\n        panel: ['flex', 'flex-col', 'p-0']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...remainingProps\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(\n        children,\n        (child?: React.ReactElement) =>\n          child?.type === DialogBackground && child\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...remainingProps}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            data-dialog-close\n            className=\"absolute top-4 right-4 size-12\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(\n          children,\n          (child?: React.ReactElement) =>\n            child?.type !== DialogBackground && child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"mappings":";;;;;;;;;AAWA,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB,OAAO,SAAS,EAC1C,MAAM,iBACP,CAAC;AAEF,IAAM,sBAAsB,OAC1B,SACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,QAAQ,EACN,OAAO;GAAC;GAAQ;GAAY;GAAM,EACnC;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAOD,IAAa,iBAAiB,EAC5B,OAAO,MACP,UACA,kBAAkB,gBAClB,kBAAkB,MAClB,GAAG,qBAEH,wBAAA,cAAC,QAAA,MACC,wBAAA,cAAC,qBAAD,EAAqB,IAAI,gBAoCH,EAnCnB,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,EACD,wBAAA,cAAC,qBAAD;CACQ;CACN,cAAW;CACX,uBAAuB,UAAU;AAE/B,MADgB,MAAM,QACT,OAAO,eAClB,OAAM,gBAAgB;;CAG1B,GAAI;CAoBgB,EAlBnB,mBACC,wBAAA,cAAC,YAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,qBAAA;CACA,WAAU;CAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAa,CAAA,CACZ,EAEd,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,CACmB,CACF,CACf"}
+{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n  base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n  Content,\n  {\n    base: [\n      // `transform: translate()` is required for `floating-ui` to\n      // correctly position elements within the Dialog component.\n      // we can't use the translate property directly\n      'transform-[translate(-50%,-50%)]',\n      'bg-white',\n      'shadow-xl',\n      'box-border',\n      'left-1/2',\n      'h-auto',\n      'max-w-[90vw]',\n      'max-h-[90vh]',\n      'overflow-y-auto',\n      'rounded-md',\n      'p-8',\n      'fixed',\n      'top-1/2',\n      'z-1147483646',\n      'focus:outline-none',\n      'motion-safe:data-[state=open]:animate-slide-in-center',\n      'motion-safe:data-[state=closed]:animate-slide-out-center'\n    ],\n    variants: {\n      size: {\n        xs: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-95'\n        ],\n        sm: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-120'\n        ],\n        md: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-150'\n        ],\n        lg: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-200'\n        ],\n        xl: [\n          'rounded-md',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-275'\n        ],\n        fullscreen: [\n          'rounded-none',\n          'w-screen',\n          'h-screen',\n          'max-w-screen',\n          'max-h-screen',\n          'supports-svh:h-svh',\n          'supports-svh:max-h-svh'\n        ]\n      },\n      layout: {\n        panel: ['flex', 'flex-col', 'p-0']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...remainingProps\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(\n        children,\n        (child?: React.ReactElement) =>\n          child?.type === DialogBackground && child\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...remainingProps}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            className=\"absolute top-4 right-4 size-12\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(\n          children,\n          (child?: React.ReactElement) =>\n            child?.type !== DialogBackground && child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"mappings":";;;;;;;;;AAWA,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB,OAAO,SAAS,EAC1C,MAAM,iBACP,CAAC;AAEF,IAAM,sBAAsB,OAC1B,SACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,QAAQ,EACN,OAAO;GAAC;GAAQ;GAAY;GAAM,EACnC;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAOD,IAAa,iBAAiB,EAC5B,OAAO,MACP,UACA,kBAAkB,gBAClB,kBAAkB,MAClB,GAAG,qBAEH,wBAAA,cAAC,QAAA,MACC,wBAAA,cAAC,qBAAD,EAAqB,IAAI,gBAmCH,EAlCnB,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,EACD,wBAAA,cAAC,qBAAD;CACQ;CACN,cAAW;CACX,uBAAuB,UAAU;AAE/B,MADgB,MAAM,QACT,OAAO,eAClB,OAAM,gBAAgB;;CAG1B,GAAI;CAmBgB,EAjBnB,mBACC,wBAAA,cAAC,YAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,WAAU;CAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAa,CAAA,CACZ,EAEd,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,CACmB,CACF,CACf"}

package/dist/components/navigation/NavigationMenu.js

@@ -35,7 +35,7 @@ var NavigationMenuComponent = ({ children, className, ...props }) => {
 	const [activeItem, setActiveItem] = React.useState();
 	const [listWidth, setListWidth] = React.useState(0);
 	const listRef = React.useRef(null);
-	React.useEffect(() => {
+	React.useLayoutEffect(() => {
 		if (listRef.current) setListWidth(listRef.current.offsetWidth);
 	}, [React.Children.toArray(children).length]);
 	React.useEffect(() => {

package/dist/components/navigation/NavigationMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenuContext'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n  NavigationMenuDropdownItem,\n  NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n  base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n  base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n  base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n  base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const [listWidth, setListWidth] = React.useState(0)\n  const listRef = React.useRef<HTMLUListElement>(null)\n\n  React.useEffect(() => {\n    if (listRef.current) {\n      setListWidth(listRef.current.offsetWidth)\n    }\n  }, [React.Children.toArray(children).length])\n\n  React.useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>\n\n    // Delay transitioning back to initial position\n    // to allow enough time for fadeOut animation to complete\n    if (activeItem === '') {\n      timer = setTimeout(() => setOffset(null), 200)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [activeItem])\n\n  // https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = (trigger: HTMLButtonElement, itemValue: string) => {\n    if (trigger && listWidth && activeItem === itemValue) {\n      const listCenter = listWidth / 2\n\n      const triggerOffsetRight =\n        listWidth -\n        trigger.offsetLeft -\n        trigger.offsetWidth +\n        trigger.offsetWidth / 2\n\n      setOffset(Math.round(listCenter - triggerOffsetRight))\n    }\n\n    return trigger\n  }\n\n  return (\n    <NavigationMenuContext.Provider value={{ onNodeUpdate }}>\n      <StyledMenu\n        className={cn(className)}\n        style={navigationMenuColorSchemes['light']}\n        onValueChange={setActiveItem}\n        {...props}\n      >\n        <StyledList ref={listRef}>{children}</StyledList>\n        <ViewportPosition>\n          <StyledViewport\n            style={{ '--navigation-menu-viewport-offset': `${offset || 0}px` }}\n            className={cn([\n              'data-[state=open]:animate-fade-in',\n              'data-[state=closed]:animate-fade-out',\n              'translate-x-(--navigation-menu-viewport-offset)'\n            ])}\n          />\n        </ViewportPosition>\n      </StyledMenu>\n    </NavigationMenuContext.Provider>\n  )\n}\n\nexport const NavigationMenu = Object.assign(NavigationMenuComponent, {\n  Link: NavigationMenuLink,\n  Dropdown: NavigationMenuDropdown,\n  DropdownContent: NavigationMenuDropdownContent,\n  DropdownItem: NavigationMenuDropdownItem,\n  DropdownItemTitle: NavigationMenuDropdownItemTitle,\n  DropdownTrigger: NavigationMenuDropdownTrigger\n})\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;AAiBA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAW,EAC7C,CAAC;AAEF,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;CAAY,EACvE,CAAC;AAEF,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,eAAe,EACvB,CAAC;AAEF,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;CAAiB,EAC7E,CAAC;AAEF,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,YAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,MAAM,UAAqC;CACvE,MAAM,CAAC,YAAY,iBAAiB,MAAM,UAA8B;CACxE,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,EAAE;CACnD,MAAM,UAAU,MAAM,OAAyB,KAAK;AAEpD,OAAM,gBAAgB;AACpB,MAAI,QAAQ,QACV,cAAa,QAAQ,QAAQ,YAAY;IAE1C,CAAC,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,CAAC;AAE7C,OAAM,gBAAgB;EACpB,IAAI;AAIJ,MAAI,eAAe,GACjB,SAAQ,iBAAiB,UAAU,KAAK,EAAE,IAAI;AAGhD,eAAa;AACX,OAAI,UAAU,KACZ,cAAa,MAAM;;IAGtB,CAAC,WAAW,CAAC;CAGhB,MAAM,gBAAgB,SAA4B,cAAsB;AACtE,MAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;AAExB,aAAU,KAAK,MAAM,aAAa,mBAAmB,CAAC;;AAGxD,SAAO;;AAGT,QACE,sBAAA,cAAC,sBAAsB,UAAvB,EAAgC,OAAO,EAAE,cAAc,EAmBtB,EAlB/B,sBAAA,cAAC,YAAD;EACE,WAAW,GAAG,UAAU;EACxB,OAAO,aAA2B;EAClC,eAAe;EACf,GAAI;EAaO,EAXX,sBAAA,cAAC,YAAD,EAAY,KAAK,SAAgC,EAAtB,SAAsB,EACjD,sBAAA,cAAC,kBAAA,MACC,sBAAA,cAAC,gBAAD;EACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,KAAK;EAClE,WAAW,GAAG;GACZ;GACA;GACA;GACD,CAAC;EACF,CAAA,CACe,CACR,CACkB;;AAIrC,IAAa,iBAAiB,OAAO,OAAO,yBAAyB;CACnE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;CAClB,CAAC;AAEF,wBAAwB,cAAc"}
+{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenuContext'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n  NavigationMenuDropdownItem,\n  NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n  base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n  base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n  base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n  base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const [listWidth, setListWidth] = React.useState(0)\n  const listRef = React.useRef<HTMLUListElement>(null)\n\n  React.useLayoutEffect(() => {\n    if (listRef.current) {\n      setListWidth(listRef.current.offsetWidth)\n    }\n  }, [React.Children.toArray(children).length])\n\n  React.useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>\n\n    // Delay transitioning back to initial position\n    // to allow enough time for fadeOut animation to complete\n    if (activeItem === '') {\n      timer = setTimeout(() => setOffset(null), 200)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [activeItem])\n\n  // https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = (trigger: HTMLButtonElement, itemValue: string) => {\n    if (trigger && listWidth && activeItem === itemValue) {\n      const listCenter = listWidth / 2\n\n      const triggerOffsetRight =\n        listWidth -\n        trigger.offsetLeft -\n        trigger.offsetWidth +\n        trigger.offsetWidth / 2\n\n      setOffset(Math.round(listCenter - triggerOffsetRight))\n    }\n\n    return trigger\n  }\n\n  return (\n    <NavigationMenuContext.Provider value={{ onNodeUpdate }}>\n      <StyledMenu\n        className={cn(className)}\n        style={navigationMenuColorSchemes['light']}\n        onValueChange={setActiveItem}\n        {...props}\n      >\n        <StyledList ref={listRef}>{children}</StyledList>\n        <ViewportPosition>\n          <StyledViewport\n            style={{ '--navigation-menu-viewport-offset': `${offset || 0}px` }}\n            className={cn([\n              'data-[state=open]:animate-fade-in',\n              'data-[state=closed]:animate-fade-out',\n              'translate-x-(--navigation-menu-viewport-offset)'\n            ])}\n          />\n        </ViewportPosition>\n      </StyledMenu>\n    </NavigationMenuContext.Provider>\n  )\n}\n\nexport const NavigationMenu = Object.assign(NavigationMenuComponent, {\n  Link: NavigationMenuLink,\n  Dropdown: NavigationMenuDropdown,\n  DropdownContent: NavigationMenuDropdownContent,\n  DropdownItem: NavigationMenuDropdownItem,\n  DropdownItemTitle: NavigationMenuDropdownItemTitle,\n  DropdownTrigger: NavigationMenuDropdownTrigger\n})\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;AAiBA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAW,EAC7C,CAAC;AAEF,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;CAAY,EACvE,CAAC;AAEF,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,eAAe,EACvB,CAAC;AAEF,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;CAAiB,EAC7E,CAAC;AAEF,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,YAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,MAAM,UAAqC;CACvE,MAAM,CAAC,YAAY,iBAAiB,MAAM,UAA8B;CACxE,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,EAAE;CACnD,MAAM,UAAU,MAAM,OAAyB,KAAK;AAEpD,OAAM,sBAAsB;AAC1B,MAAI,QAAQ,QACV,cAAa,QAAQ,QAAQ,YAAY;IAE1C,CAAC,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,CAAC;AAE7C,OAAM,gBAAgB;EACpB,IAAI;AAIJ,MAAI,eAAe,GACjB,SAAQ,iBAAiB,UAAU,KAAK,EAAE,IAAI;AAGhD,eAAa;AACX,OAAI,UAAU,KACZ,cAAa,MAAM;;IAGtB,CAAC,WAAW,CAAC;CAGhB,MAAM,gBAAgB,SAA4B,cAAsB;AACtE,MAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;AAExB,aAAU,KAAK,MAAM,aAAa,mBAAmB,CAAC;;AAGxD,SAAO;;AAGT,QACE,sBAAA,cAAC,sBAAsB,UAAvB,EAAgC,OAAO,EAAE,cAAc,EAmBtB,EAlB/B,sBAAA,cAAC,YAAD;EACE,WAAW,GAAG,UAAU;EACxB,OAAO,aAA2B;EAClC,eAAe;EACf,GAAI;EAaO,EAXX,sBAAA,cAAC,YAAD,EAAY,KAAK,SAAgC,EAAtB,SAAsB,EACjD,sBAAA,cAAC,kBAAA,MACC,sBAAA,cAAC,gBAAD;EACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,KAAK;EAClE,WAAW,GAAG;GACZ;GACA;GACA;GACD,CAAC;EACF,CAAA,CACe,CACR,CACkB;;AAIrC,IAAa,iBAAiB,OAAO,OAAO,yBAAyB;CACnE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;CAClB,CAAC;AAEF,wBAAwB,cAAc"}