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

@atom-learning/components 9.0.0 → 10.0.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 (197) hide show

package/dist/components/calendar/Calendar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.js","names":[],"sources":["../../../src/components/calendar/Calendar.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport { useDayzed } from 'dayzed'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort } from './constants'\nimport { Day } from './Day'\n\nconst StyledButton = styled(Button, {\n base: ['text-grey-1000', 'p-3', 'w-16'],\n variants: {\n selected: {\n false: [\n 'disabled:bg-white!',\n 'font-normal',\n 'hover:bg-grey-200!',\n 'hover:text-grey-1000!',\n 'text-grey-1000!'\n ]\n }\n }\n})\n\nexport type CalendarTranslationProps = {\n monthNames?: string[]\n weekdayNames?: string[]\n labels?: {\n open: string\n next: string\n previous: string\n nextYear: string\n previousYear: string\n }\n}\n\ntype CalendarProps = DayzedInterface &\n CalendarTranslationProps & {\n refDateToday?: React.RefObject<HTMLButtonElement \| null>\n refDateSelected?: React.RefObject<HTMLButtonElement \| null>\n setYear: (date: Date) => Promise<void>\n className?: string\n }\n\nconst offsetWeekdayNames = (\n weekdayNames: string[],\n firstDayOfWeek: number\n): string[] => {\n const start = weekdayNames.slice(0, firstDayOfWeek)\n const end = weekdayNames.slice(firstDayOfWeek)\n return end.concat(start)\n}\n\nexport const Calendar = ({\n className,\n refDateSelected,\n refDateToday,\n firstDayOfWeek = 0,\n monthNames = monthNamesShort,\n weekdayNames = weekdayNamesShort,\n labels = DEFAULT_LABELS,\n date ~~= new Date()~~,\n minDate,\n maxDate,\n setYear,\n ...rest\n}: CalendarProps) => {\n const [showYears, setShowYears] = React.useState<boolean>(false)\n const [currentYear, setCurrentYear] = React.useState<number>(\n date?.getFullYear()\n )\n\n const handleSetYear = (year: number): void => {\n const newDate = date\n newDate.setFullYear(year)\n setYear(newDate)\n setShowYears(false)\n }\n\n const isAtMinYear = minDate && currentYear - 16 <= minDate.getFullYear()\n const isAtMaxYear = maxDate && currentYear >= maxDate.getFullYear()\n\n const yearList = Array.from({ length: 16 }, (_, i) => {\n const year = currentYear - i\n if (\n (maxDate && year > maxDate.getFullYear()) \|\|\n (minDate && year < minDate.getFullYear())\n )\n return 0\n return year\n })\n\n const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({\n firstDayOfWeek,\n showOutsideDays: true,\n date,\n minDate,\n maxDate,\n ...rest\n })\n\n if (!calendars.length) return null\n\n return (\n <div className={cn('relative', 'w-fit', '-mt-1', className)}>\n <div className=\"absolute top-0 -right-1 flex\">\n <ActionIcon\n label={labels[showYears ? 'previousYear' : 'previous']}\n theme=\"neutral\"\n size=\"md\"\n {...(!showYears && getBackProps({ calendars }))}\n {...(showYears && {\n onClick: () => setCurrentYear(currentYear - 16)\n })}\n disabled={showYears && isAtMinYear}\n >\n <Icon is={ChevronLeft} />\n </ActionIcon>\n <ActionIcon\n label={labels[showYears ? 'nextYear' : 'next']}\n theme=\"neutral\"\n size=\"md\"\n {...(!showYears && getForwardProps({ calendars }))}\n {...(showYears && {\n onClick: () => setCurrentYear(currentYear + 16)\n })}\n disabled={showYears && isAtMaxYear}\n >\n <Icon is={ChevronRight} />\n </ActionIcon>\n </div>\n {showYears && (\n <div className=\"grid grid-cols-4 gap-x-1 gap-y-3 pt-12 [direction:rtl]\">\n {yearList.map((year, i) => {\n const isCurrentYear = year === date.getFullYear()\n if (!year) return <div key={i} className=\"h-10 w-16\" />\n\n return (\n <StyledButton\n key={`${year}${i}`}\n theme={isCurrentYear ? 'primary' : 'neutral'}\n onClick={() => handleSetYear(year)}\n selected={isCurrentYear}\n >\n {year}\n </StyledButton>\n )\n })}\n </div>\n )}\n {!showYears &&\n calendars.map(({ month, year, weeks }) => (\n <div key={`${month}${year}`}>\n <div className=\"mb-4 flex h-10 items-center\">\n <Button\n theme=\"neutral\"\n onClick={() => setShowYears(true)}\n className=\"text-grey-1000 px-0\"\n >\n {monthNames[month]} {year}\n </Button>\n </div>\n <div className=\"mb-3 grid grid-cols-7 gap-x-2 gap-y-1\">\n {offsetWeekdayNames(weekdayNames, firstDayOfWeek).map(\n (weekday) => (\n <Text\n as=\"span\"\n size=\"sm\"\n weight=\"bold\"\n key={`${month}${year}${weekday}`}\n className=\"text-center\"\n >\n {weekday}\n </Text>\n )\n )}\n </div>\n <div className=\"grid grid-cols-7 gap-x-2 gap-y-1\">\n {weeks.map((week, weekIndex) =>\n week.map((dateObj, index) => {\n const key = `${month}${year}${weekIndex}${index}`\n\n if (!dateObj) return <div key={key} />\n\n const { date, selected, today, prevMonth, nextMonth } =\n dateObj\n\n return (\n <Day\n isOutsideMonth={prevMonth \|\| nextMonth}\n isSelected={selected}\n isToday={today}\n key={key}\n ref={\n selected ? refDateSelected : today ? refDateToday : null\n }\n {...getDateProps({ dateObj })}\n type=\"button\"\n >\n {date.getDate()}\n </Day>\n )\n })\n )}\n </div>\n </div>\n ))}\n </div>\n )\n}\n\nCalendar.displayName = 'Calendar'\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,eAAe,OAAO,QAAQ;CAClC,MAAM;EAAC;EAAkB;EAAO;CAAM;CACtC,UAAU,EACR,UAAU,EACR,OAAO;EACL;EACA;EACA;EACA;EACA;CACF,EACF,EACF;AACF,CAAC;AAsBD,IAAM,sBACJ,cACA,mBACa;CACb,MAAM,QAAQ,aAAa,MAAM,GAAG,cAAc;CAElD,OADY,aAAa,MAAM,cACxB,CAAA,CAAI,OAAO,KAAK;AACzB;AAEA,IAAa,YAAY,EACvB,WACA,iBACA,cACA,iBAAiB,GACjB,aAAa,iBACb,eAAe,mBACf,SAAS,gBACT,~~uBAAO~~,~~IAAI~~,~~KAAK,GAChB,~~SACA,SACA,SACA,GAAG,WACgB;~~CACnB~~,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAkB,KAAK;CAC/D,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAC1C,MAAM,YAAY,CACpB;CAEA,MAAM,iBAAiB,SAAuB;~~EAC5C~~,MAAM,UAAU;~~EAChB~~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"}
1	+ {"version":3,"file":"Calendar.js","names":[],"sources":["../../../src/components/calendar/Calendar.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport { useDayzed } from 'dayzed'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort } from './constants'\nimport { Day } from './Day'\n\nconst StyledButton = styled(Button, {\n base: ['text-grey-1000', 'p-3', 'w-16'],\n variants: {\n selected: {\n false: [\n 'disabled:bg-white!',\n 'font-normal',\n 'hover:bg-grey-200!',\n 'hover:text-grey-1000!',\n 'text-grey-1000!'\n ]\n }\n }\n})\n\nexport type CalendarTranslationProps = {\n monthNames?: string[]\n weekdayNames?: string[]\n labels?: {\n open: string\n next: string\n previous: string\n nextYear: string\n previousYear: string\n }\n}\n\ntype CalendarProps = DayzedInterface &\n CalendarTranslationProps & {\n refDateToday?: React.RefObject<HTMLButtonElement \| null>\n refDateSelected?: React.RefObject<HTMLButtonElement \| null>\n setYear: (date: Date) => Promise<void>\n className?: string\n }\n\nconst offsetWeekdayNames = (\n weekdayNames: string[],\n firstDayOfWeek: number\n): string[] => {\n const start = weekdayNames.slice(0, firstDayOfWeek)\n const end = weekdayNames.slice(firstDayOfWeek)\n return end.concat(start)\n}\n\nexport const Calendar = ({\n className,\n refDateSelected,\n refDateToday,\n firstDayOfWeek = 0,\n monthNames = monthNamesShort,\n weekdayNames = weekdayNamesShort,\n labels = DEFAULT_LABELS,\n date: dateProp,\n minDate,\n maxDate,\n setYear,\n ...rest\n}: CalendarProps) => {\n // `new Date()` as a default parameter runs on every render (impure render,\n // and a server/client hydration divergence near midnight) — capture the\n // fallback once instead.\n const [fallbackDate] = React.useState(() => new Date())\n const date = dateProp ?? fallbackDate\n\n const [showYears, setShowYears] = React.useState<boolean>(false)\n const [currentYear, setCurrentYear] = React.useState<number>(\n date?.getFullYear()\n )\n\n const handleSetYear = (year: number): void => {\n // Copy before setFullYear — mutating the `date` prop in place changes the\n // caller's object.\n const newDate = new Date(date)\n newDate.setFullYear(year)\n setYear(newDate)\n setShowYears(false)\n }\n\n const isAtMinYear = minDate && currentYear - 16 <= minDate.getFullYear()\n const isAtMaxYear = maxDate && currentYear >= maxDate.getFullYear()\n\n const yearList = Array.from({ length: 16 }, (_, i) => {\n const year = currentYear - i\n if (\n (maxDate && year > maxDate.getFullYear()) \|\|\n (minDate && year < minDate.getFullYear())\n )\n return 0\n return year\n })\n\n const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({\n firstDayOfWeek,\n showOutsideDays: true,\n date,\n minDate,\n maxDate,\n ...rest\n })\n\n if (!calendars.length) return null\n\n return (\n <div className={cn('relative', 'w-fit', '-mt-1', className)}>\n <div className=\"absolute top-0 -right-1 flex\">\n <ActionIcon\n label={labels[showYears ? 'previousYear' : 'previous']}\n theme=\"neutral\"\n size=\"md\"\n {...(!showYears && getBackProps({ calendars }))}\n {...(showYears && {\n onClick: () => setCurrentYear(currentYear - 16)\n })}\n disabled={showYears && isAtMinYear}\n >\n <Icon is={ChevronLeft} />\n </ActionIcon>\n <ActionIcon\n label={labels[showYears ? 'nextYear' : 'next']}\n theme=\"neutral\"\n size=\"md\"\n {...(!showYears && getForwardProps({ calendars }))}\n {...(showYears && {\n onClick: () => setCurrentYear(currentYear + 16)\n })}\n disabled={showYears && isAtMaxYear}\n >\n <Icon is={ChevronRight} />\n </ActionIcon>\n </div>\n {showYears && (\n <div className=\"grid grid-cols-4 gap-x-1 gap-y-3 pt-12 [direction:rtl]\">\n {yearList.map((year, i) => {\n const isCurrentYear = year === date.getFullYear()\n if (!year) return <div key={i} className=\"h-10 w-16\" />\n\n return (\n <StyledButton\n key={`${year}${i}`}\n theme={isCurrentYear ? 'primary' : 'neutral'}\n onClick={() => handleSetYear(year)}\n selected={isCurrentYear}\n >\n {year}\n </StyledButton>\n )\n })}\n </div>\n )}\n {!showYears &&\n calendars.map(({ month, year, weeks }) => (\n <div key={`${month}${year}`}>\n <div className=\"mb-4 flex h-10 items-center\">\n <Button\n theme=\"neutral\"\n onClick={() => setShowYears(true)}\n className=\"text-grey-1000 px-0\"\n >\n {monthNames[month]} {year}\n </Button>\n </div>\n <div className=\"mb-3 grid grid-cols-7 gap-x-2 gap-y-1\">\n {offsetWeekdayNames(weekdayNames, firstDayOfWeek).map(\n (weekday) => (\n <Text\n as=\"span\"\n size=\"sm\"\n weight=\"bold\"\n key={`${month}${year}${weekday}`}\n className=\"text-center\"\n >\n {weekday}\n </Text>\n )\n )}\n </div>\n <div className=\"grid grid-cols-7 gap-x-2 gap-y-1\">\n {weeks.map((week, weekIndex) =>\n week.map((dateObj, index) => {\n const key = `${month}${year}${weekIndex}${index}`\n\n if (!dateObj) return <div key={key} />\n\n const { date, selected, today, prevMonth, nextMonth } =\n dateObj\n\n return (\n <Day\n isOutsideMonth={prevMonth \|\| nextMonth}\n isSelected={selected}\n isToday={today}\n key={key}\n ref={\n selected ? refDateSelected : today ? refDateToday : null\n }\n {...getDateProps({ dateObj })}\n type=\"button\"\n >\n {date.getDate()}\n </Day>\n )\n })\n )}\n </div>\n </div>\n ))}\n </div>\n )\n}\n\nCalendar.displayName = 'Calendar'\n"],"mappings":"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"}

package/dist/components/carousel/Carousel.js CHANGED Viewed

@@ -77,14 +77,14 @@ var CarouselComponent = ({ children, currentSlide = 0, className, ...rest }) =>
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("relative", "w-full", className),
 		...rest,
-		children: /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		children: /* @__PURE__ */ jsx(CarouselContext, {
 			value: contextValue,
 			children
 		})
 	});
 };
 var useCarousel = () => {
-	const context = React$1.useContext(CarouselContext);
+	const context = React$1.use(CarouselContext);
 	if (!context) throw new Error("useCarousel must be used within a Carousel");
 	return {
 		...context,

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

	@@ -1 +1 @@
1	- {"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'\nimport { CSSWrapper } from '../../utilities/css-wrapper/CSSWrapper'\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 className,\n ...rest\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 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 = /* @__PURE__ */ 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,IAAI;AAM7E,IAAa,qBAAqB,EAChC,UACA,eAAe,GACf,WACA,GAAG,WAGC;CACJ,MAAM,CAAC,UAAU,YAAY,iBAAiB;EAC5C,YAAY;EACZ,OAAO;CACT,CAAC;CAED,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,YAAY;CACrE,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAmB,CAAC,CAAC;CACjE,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAC9D,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAE9D,MAAM,aAAa,QAAM,kBAAkB;EACzC,UAAU,WAAW;CACvB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,aAAa,QAAM,kBAAkB;EACzC,UAAU,WAAW;CACvB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,WAAW,QAAM,aACpB,UAAkB;EACjB,UAAU,SAAS,KAAK;CAC1B,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,WAAW,QAAM,kBAAkB;EACvC,IAAI,CAAC,UAAU;EACf,iBAAiB,SAAS,mBAAmB,CAAC;EAC9C,iBAAiB,SAAS,cAAc,CAAC;EACzC,iBAAiB,SAAS,cAAc,CAAC;CAC3C,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,SAAS,QAAM,kBAAkB;EACrC,IAAI,CAAC,UAAU;EACf,eAAe,SAAS,eAAe,CAAC;CAC1C,GAAG,CAAC,QAAQ,CAAC;CAEb,QAAM,gBAAgB;EACpB,IAAI,CAAC,UAAU;EAEf,OAAO;EACP,SAAS;EAET,SAAS,GAAG,UAAU,MAAM;EAC5B,SAAS,GAAG,UAAU,QAAQ;EAC9B,SAAS,GAAG,UAAU,QAAQ;EAE9B,aAAa;GACX,SAAS,IAAI,UAAU,MAAM;GAC7B,SAAS,IAAI,UAAU,QAAQ;GAC/B,SAAS,IAAI,UAAU,QAAQ;EACjC;CACF,GAAG;EAAC;EAAU;EAAQ;CAAQ,CAAC;CAE/B,MAAM,eAAe,QAAM,eAClB;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,UAAU,SAAS;EAAG,GAAI;YACvD,oBAAC,~~gBAAgB,UAAjB~~;~~GAA0B~~,OAAO;~~GAC9B~~;~~EACuB~~,CAAA;~~CACvB~~,CAAA;AAET;AAEA,IAAa,oBAAoB;CAC/B,MAAM,UAAU,QAAM,~~WAAW~~,eAAe;~~CAChD~~,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,4CAA4C;CAG9D,OAAO;EACL,GAAG;EAEH,cAAc,QAAQ;CACxB;AACF;AAEA,IAAa,WAA2B,uBAAO,OAAO,mBAAmB;CACvE,WAAW;CACX,eAAe;CACf,YAAY;CACZ,OAAO;CACP,QAAQ;AACV,CAAC;AAED,kBAAkB,cAAc"}
1	+ {"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'\nimport { CSSWrapper } from '../../utilities/css-wrapper/CSSWrapper'\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 className,\n ...rest\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 return (\n <div className={cn('relative', 'w-full', className)} {...rest}>\n <CarouselContext value={contextValue}>{children}</CarouselContext>\n </div>\n )\n}\n\nexport const useCarousel = () => {\n const context = React.use(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 = /* @__PURE__ */ 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,IAAI;AAM7E,IAAa,qBAAqB,EAChC,UACA,eAAe,GACf,WACA,GAAG,WAGC;CACJ,MAAM,CAAC,UAAU,YAAY,iBAAiB;EAC5C,YAAY;EACZ,OAAO;CACT,CAAC;CAED,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,YAAY;CACrE,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAmB,CAAC,CAAC;CACjE,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAC9D,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAE9D,MAAM,aAAa,QAAM,kBAAkB;EACzC,UAAU,WAAW;CACvB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,aAAa,QAAM,kBAAkB;EACzC,UAAU,WAAW;CACvB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,WAAW,QAAM,aACpB,UAAkB;EACjB,UAAU,SAAS,KAAK;CAC1B,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,WAAW,QAAM,kBAAkB;EACvC,IAAI,CAAC,UAAU;EACf,iBAAiB,SAAS,mBAAmB,CAAC;EAC9C,iBAAiB,SAAS,cAAc,CAAC;EACzC,iBAAiB,SAAS,cAAc,CAAC;CAC3C,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,SAAS,QAAM,kBAAkB;EACrC,IAAI,CAAC,UAAU;EACf,eAAe,SAAS,eAAe,CAAC;CAC1C,GAAG,CAAC,QAAQ,CAAC;CAEb,QAAM,gBAAgB;EACpB,IAAI,CAAC,UAAU;EAEf,OAAO;EACP,SAAS;EAET,SAAS,GAAG,UAAU,MAAM;EAC5B,SAAS,GAAG,UAAU,QAAQ;EAC9B,SAAS,GAAG,UAAU,QAAQ;EAE9B,aAAa;GACX,SAAS,IAAI,UAAU,MAAM;GAC7B,SAAS,IAAI,UAAU,QAAQ;GAC/B,SAAS,IAAI,UAAU,QAAQ;EACjC;CACF,GAAG;EAAC;EAAU;EAAQ;CAAQ,CAAC;CAE/B,MAAM,eAAe,QAAM,eAClB;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,UAAU,SAAS;EAAG,GAAI;YACvD,oBAAC,iBAAD;GAAiB,OAAO;GAAe;EAA0B,CAAA;CAC9D,CAAA;AAET;AAEA,IAAa,oBAAoB;CAC/B,MAAM,UAAU,QAAM,IAAI,eAAe;CACzC,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,4CAA4C;CAG9D,OAAO;EACL,GAAG;EAEH,cAAc,QAAQ;CACxB;AACF;AAEA,IAAa,WAA2B,uBAAO,OAAO,mBAAmB;CACvE,WAAW;CACX,eAAe;CACf,YAAY;CACZ,OAAO;CACP,QAAQ;AACV,CAAC;AAED,kBAAkB,cAAc"}

package/dist/components/carousel/CarouselSlide.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/carousel/CarouselSlide.tsx
 var CarouselSlide = ({ children, className, index, ...rest }) => {
 	const { selectedIndex } = useCarousel();
-	const gap = React$1.useContext(CarouselSlideGapContext);
+	const gap = React$1.use(CarouselSlideGapContext);
 	return /* @__PURE__ */ jsx("div", {
 		role: "option",
 		"aria-selected": selectedIndex === index,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CarouselSlide.js","names":[],"sources":["../../../src/components/carousel/CarouselSlide.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { useCarousel } from './Carousel'\nimport { CarouselSlideGapContext, toSlideGapClass } from './CarouselSlider'\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 gap = React.~~useContext~~(CarouselSlideGapContext)\n const isSelected = selectedIndex === index\n\n return (\n <div\n role=\"option\"\n aria-selected={isSelected}\n // min-w-0 so basis-full wins over the content's min-content size and\n // the slide never outgrows the slider viewport\n className={cn('min-w-0', 'basis-full', 'shrink-0', className)}\n {...rest}\n >\n {/* padding to create the gap between slides; gap=\"none\" for full-bleed */}\n <div\n className={cn('flex items-center justify-center', toSlideGapClass[gap])}\n >\n {children}\n </div>\n </div>\n )\n}\n"],"mappings":";;;;;;AAMA,IAAa,iBAAiB,EAC5B,UACA,WACA,OACA,GAAG,WAGC;CACJ,MAAM,EAAE,kBAAkB,YAAY;CACtC,MAAM,MAAM,QAAM,~~WAAW~~,uBAAuB;~~CAGpD~~,OACE,oBAAC,OAAD;EACE,MAAK;EACL,iBALe,kBAAkB;EAQjC,WAAW,GAAG,WAAW,cAAc,YAAY,SAAS;EAC5D,GAAI;YAGJ,oBAAC,OAAD;GACE,WAAW,GAAG,oCAAoC,gBAAgB,IAAI;GAErE;EACE,CAAA;CACF,CAAA;AAET"}
1	+ {"version":3,"file":"CarouselSlide.js","names":[],"sources":["../../../src/components/carousel/CarouselSlide.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { useCarousel } from './Carousel'\nimport { CarouselSlideGapContext, toSlideGapClass } from './CarouselSlider'\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 gap = React.use(CarouselSlideGapContext)\n const isSelected = selectedIndex === index\n\n return (\n <div\n role=\"option\"\n aria-selected={isSelected}\n // min-w-0 so basis-full wins over the content's min-content size and\n // the slide never outgrows the slider viewport\n className={cn('min-w-0', 'basis-full', 'shrink-0', className)}\n {...rest}\n >\n {/* padding to create the gap between slides; gap=\"none\" for full-bleed */}\n <div\n className={cn('flex items-center justify-center', toSlideGapClass[gap])}\n >\n {children}\n </div>\n </div>\n )\n}\n"],"mappings":";;;;;;AAMA,IAAa,iBAAiB,EAC5B,UACA,WACA,OACA,GAAG,WAGC;CACJ,MAAM,EAAE,kBAAkB,YAAY;CACtC,MAAM,MAAM,QAAM,IAAI,uBAAuB;CAG7C,OACE,oBAAC,OAAD;EACE,MAAK;EACL,iBALe,kBAAkB;EAQjC,WAAW,GAAG,WAAW,cAAc,YAAY,SAAS;EAC5D,GAAI;YAGJ,oBAAC,OAAD;GACE,WAAW,GAAG,oCAAoC,gBAAgB,IAAI;GAErE;EACE,CAAA;CACF,CAAA;AAET"}

package/dist/components/carousel/CarouselSlider.js CHANGED Viewed

@@ -23,7 +23,7 @@ var CarouselSlider = ({ children, className, gap = 3, overflow, tabIndex = 0, ..
 		...rest,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "flex",
-			children: /* @__PURE__ */ jsx(CarouselSlideGapContext.Provider, {
+			children: /* @__PURE__ */ jsx(CarouselSlideGapContext, {
 				value: gap,
 				children
 			})

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CarouselSlider.js","names":[],"sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { useCarousel } from './Carousel'\n\nexport type CarouselSlideGap = 'none' \| 0 \| 1 \| 2 \| 3 \| 4\n\n// Horizontal padding applied around each slide's content, on the same\n// spacing scale as Flex/ToggleGroup's gap. 'none' renders full-bleed slides.\nexport const toSlideGapClass: Record<CarouselSlideGap, string> = {\n none: '',\n 0: 'px-0.5',\n 1: 'px-1',\n 2: 'px-2',\n 3: 'px-3',\n 4: 'px-4'\n}\n\n// Slides read the gap via context so it is configured once on the slider.\nexport const CarouselSlideGapContext = React.createContext<CarouselSlideGap>(3)\n\ntype CarouselSliderProps = {\n children?: React.ReactNode\n className?: string\n gap?: CarouselSlideGap\n overflow?: boolean\n tabIndex?: number\n}\n\nexport const CarouselSlider = ({\n children,\n className,\n gap = 3,\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\">\n <CarouselSlideGapContext~~.Provider~~ value={gap}>\n {children}\n </CarouselSlideGapContext~~.Provider~~>\n </div>\n </div>\n )\n}\n"],"mappings":";;;;;AASA,IAAa,kBAAoD;CAC/D,MAAM;CACN,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAGA,IAAa,0BAA0B,QAAM,cAAgC,CAAC;AAU9E,IAAa,kBAAkB,EAC7B,UACA,WACA,MAAM,GACN,UACA,WAAW,GACX,GAAG,WACsB;CACzB,MAAM,EAAE,aAAa,YAAY;CAEjC,OACE,oBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,YACA,oBACA,eACA,WAAW,qBAAqB,mBAChC,SACF;EACA,MAAK;EACL,aAAU;EACA;EACV,GAAI;YAEJ,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,~~wBAAwB,UAAzB~~;~~IAAkC~~,OAAO;~~IACtC~~;~~GAC+B~~,CAAA;~~EAC/B~~,CAAA;CACF,CAAA;AAET"}
1	+ {"version":3,"file":"CarouselSlider.js","names":[],"sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { useCarousel } from './Carousel'\n\nexport type CarouselSlideGap = 'none' \| 0 \| 1 \| 2 \| 3 \| 4\n\n// Horizontal padding applied around each slide's content, on the same\n// spacing scale as Flex/ToggleGroup's gap. 'none' renders full-bleed slides.\nexport const toSlideGapClass: Record<CarouselSlideGap, string> = {\n none: '',\n 0: 'px-0.5',\n 1: 'px-1',\n 2: 'px-2',\n 3: 'px-3',\n 4: 'px-4'\n}\n\n// Slides read the gap via context so it is configured once on the slider.\nexport const CarouselSlideGapContext = React.createContext<CarouselSlideGap>(3)\n\ntype CarouselSliderProps = {\n children?: React.ReactNode\n className?: string\n gap?: CarouselSlideGap\n overflow?: boolean\n tabIndex?: number\n}\n\nexport const CarouselSlider = ({\n children,\n className,\n gap = 3,\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\">\n <CarouselSlideGapContext value={gap}>\n {children}\n </CarouselSlideGapContext>\n </div>\n </div>\n )\n}\n"],"mappings":";;;;;AASA,IAAa,kBAAoD;CAC/D,MAAM;CACN,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAGA,IAAa,0BAA0B,QAAM,cAAgC,CAAC;AAU9E,IAAa,kBAAkB,EAC7B,UACA,WACA,MAAM,GACN,UACA,WAAW,GACX,GAAG,WACsB;CACzB,MAAM,EAAE,aAAa,YAAY;CAEjC,OACE,oBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,YACA,oBACA,eACA,WAAW,qBAAqB,mBAChC,SACF;EACA,MAAK;EACL,aAAU;EACA;EACV,GAAI;YAEJ,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,yBAAD;IAAyB,OAAO;IAC7B;GACsB,CAAA;EACtB,CAAA;CACF,CAAA;AAET"}

package/dist/components/checkbox/Checkbox.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { overrideStyledVariantValue } from "../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";
-import * as React$1 from "react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Minus, Ok } from "@atom-learning/icons";
 import * as RadixCheckbox from "@radix-ui/react-checkbox";
@@ -63,7 +63,7 @@ var toIconSize = {
 	lg: "sm"
 };
 var Checkbox = ({ ref, size = "md", checked, ...rest }) => {
-	const iconSize = React$1.useMemo(() => overrideStyledVariantValue(size, (s) => toIconSize[s]), [size]);
+	const iconSize = overrideStyledVariantValue(size, (s) => toIconSize[s]);
 	return /* @__PURE__ */ jsx("div", {
 		className: "relative z-1",
 		children: /* @__PURE__ */ jsxs(StyledCheckbox, {

package/dist/components/checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Icon } from '../icon/Icon'\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n base: [\n 'appearance-none',\n 'relative',\n 'bg-transparent',\n 'border',\n 'border-grey-800',\n 'rounded-[3px]',\n 'text-white',\n 'bg-white',\n 'cursor-pointer',\n 'size-4',\n 'p-0',\n 'flex',\n 'items-center',\n 'justify-center',\n 'transition-all',\n 'duration-50',\n 'ease-out',\n 'shrink-0',\n 'not-disabled:before:-inset-2',\n 'not-disabled:before:-z-1',\n 'not-disabled:before:absolute',\n 'not-disabled:before:bg-primary-300',\n \"not-disabled:before:content-['']\",\n 'not-disabled:before:duration-125',\n 'not-disabled:before:ease-in-out',\n 'not-disabled:before:opacity-0',\n 'not-disabled:before:rounded-[50%]',\n 'not-disabled:before:scale-0',\n 'not-disabled:before:transition-[opacity,scale]',\n 'not-disabled:hover:before:opacity-100',\n 'not-disabled:hover:before:scale-100',\n 'data-[state=checked]:bg-primary-800',\n 'data-[state=checked]:border-primary-800',\n 'data-[state=indeterminate]:bg-primary-800',\n 'data-[state=indeterminate]:border-primary-800',\n 'focus:-outline-offset-1',\n 'focus:outline-2',\n 'focus:outline-primary-800',\n 'focus:outline-solid',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n state: {\n error: ['border-danger']\n },\n size: {\n md: ['size-4'],\n lg: ['mt-px', 'size-6']\n }\n }\n})\n\nconst toIconSize = {\n md: 'sm',\n lg: 'sm'\n}\n\nexport const Checkbox = ({\n ref,\n size = 'md',\n checked,\n ...rest\n}: React.ComponentProps<typeof StyledCheckbox>) => {\n const iconSize = ~~React.useMemo(\n () =>~~ overrideStyledVariantValue(size, (s) => toIconSize[s])~~,\n [size]~~\n )\n\n return (\n <div className=\"relative z-1\">\n <StyledCheckbox ref={ref} checked={checked} size={size} {...rest}>\n <div className=\"absolute -inset-3 opacity-50\" />\n <RadixCheckbox.Indicator asChild>\n <Icon\n is={checked === 'indeterminate' ? Minus : Ok}\n size={iconSize}\n className=\"stroke-3\"\n />\n </RadixCheckbox.Indicator>\n </StyledCheckbox>\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,iBAAiB,OAAO,cAAc,MAAM;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO,EACL,OAAO,CAAC,eAAe,EACzB;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS,QAAQ;EACxB;CACF;AACF,CAAC;AAED,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,YAAY,EACvB,KACA,OAAO,MACP,SACA,GAAG,WAC8C;CACjD,MAAM,WAAW,~~QAAM,cACf,~~2BAA2B,OAAO,MAAM,WAAW,EAAE~~,GAC3D,CAAC,IAAI,CACP~~;~~CAEA~~,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,gBAAD;GAAqB;GAAc;GAAe;GAAM,GAAI;aAA5D,CACE,oBAAC,OAAD,EAAK,WAAU,+BAAgC,CAAA,GAC/C,oBAAC,cAAc,WAAf;IAAyB,SAAA;cACvB,oBAAC,MAAD;KACE,IAAI,YAAY,kBAAkB,QAAQ;KAC1C,MAAM;KACN,WAAU;IACX,CAAA;GACsB,CAAA,CACX;;CACb,CAAA;AAET"}
1	+ {"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Icon } from '../icon/Icon'\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n base: [\n 'appearance-none',\n 'relative',\n 'bg-transparent',\n 'border',\n 'border-grey-800',\n 'rounded-[3px]',\n 'text-white',\n 'bg-white',\n 'cursor-pointer',\n 'size-4',\n 'p-0',\n 'flex',\n 'items-center',\n 'justify-center',\n 'transition-all',\n 'duration-50',\n 'ease-out',\n 'shrink-0',\n 'not-disabled:before:-inset-2',\n 'not-disabled:before:-z-1',\n 'not-disabled:before:absolute',\n 'not-disabled:before:bg-primary-300',\n \"not-disabled:before:content-['']\",\n 'not-disabled:before:duration-125',\n 'not-disabled:before:ease-in-out',\n 'not-disabled:before:opacity-0',\n 'not-disabled:before:rounded-[50%]',\n 'not-disabled:before:scale-0',\n 'not-disabled:before:transition-[opacity,scale]',\n 'not-disabled:hover:before:opacity-100',\n 'not-disabled:hover:before:scale-100',\n 'data-[state=checked]:bg-primary-800',\n 'data-[state=checked]:border-primary-800',\n 'data-[state=indeterminate]:bg-primary-800',\n 'data-[state=indeterminate]:border-primary-800',\n 'focus:-outline-offset-1',\n 'focus:outline-2',\n 'focus:outline-primary-800',\n 'focus:outline-solid',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n state: {\n error: ['border-danger']\n },\n size: {\n md: ['size-4'],\n lg: ['mt-px', 'size-6']\n }\n }\n})\n\nconst toIconSize = {\n md: 'sm',\n lg: 'sm'\n}\n\nexport const Checkbox = ({\n ref,\n size = 'md',\n checked,\n ...rest\n}: React.ComponentProps<typeof StyledCheckbox>) => {\n const iconSize = overrideStyledVariantValue(size, (s) => toIconSize[s])\n\n return (\n <div className=\"relative z-1\">\n <StyledCheckbox ref={ref} checked={checked} size={size} {...rest}>\n <div className=\"absolute -inset-3 opacity-50\" />\n <RadixCheckbox.Indicator asChild>\n <Icon\n is={checked === 'indeterminate' ? Minus : Ok}\n size={iconSize}\n className=\"stroke-3\"\n />\n </RadixCheckbox.Indicator>\n </StyledCheckbox>\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,iBAAiB,OAAO,cAAc,MAAM;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO,EACL,OAAO,CAAC,eAAe,EACzB;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS,QAAQ;EACxB;CACF;AACF,CAAC;AAED,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,YAAY,EACvB,KACA,OAAO,MACP,SACA,GAAG,WAC8C;CACjD,MAAM,WAAW,2BAA2B,OAAO,MAAM,WAAW,EAAE;CAEtE,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,gBAAD;GAAqB;GAAc;GAAe;GAAM,GAAI;aAA5D,CACE,oBAAC,OAAD,EAAK,WAAU,+BAAgC,CAAA,GAC/C,oBAAC,cAAc,WAAf;IAAyB,SAAA;cACvB,oBAAC,MAAD;KACE,IAAI,YAAY,kBAAkB,QAAQ;KAC1C,MAAM;KACN,WAAU;IACX,CAAA;GACsB,CAAA,CACX;;CACb,CAAA;AAET"}

package/dist/components/checkbox-field/CheckboxField.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/checkbox-field/CheckboxField.tsx
 var CheckboxField = ({ className, label, name, validation, description, defaultChecked = false, checked, onCheckedChange, ...rest }) => {
-	const { control } = useFormContext();
+	const { control, setValue } = useFormContext();
 	const { error } = useFieldError(name);
 	const { field: { ref, onChange, value: innerChecked, name: innerName } } = useController({
 		name,
@@ -15,8 +15,12 @@ var CheckboxField = ({ className, label, name, validation, description, defaultC
 		defaultValue: defaultChecked
 	});
 	React$1.useEffect(() => {
-		if (typeof checked !== "undefined") onChange(checked);
-	}, [checked]);
+		if (typeof checked !== "undefined") setValue(name, checked, { shouldDirty: false });
+	}, [
+		checked,
+		name,
+		setValue
+	]);
 	return /* @__PURE__ */ jsx(InlineFieldWrapper, {
 		className,
 		description,

package/dist/components/checkbox-field/CheckboxField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxField.js","names":[],"sources":["../../../src/components/checkbox-field/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { InlineFieldWrapper } from '../field-wrapper/InlineFieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\n\nenum CheckboxValue {\n ON = 'on',\n OFF = 'off'\n}\n\nexport const CheckboxField = ({\n className,\n label,\n name,\n validation,\n description,\n defaultChecked = false,\n checked,\n onCheckedChange,\n ...rest\n}: React.ComponentProps<typeof Checkbox> & FieldElementWrapperProps) => {\n const { control } = useFormContext()\n const { error } = useFieldError(name)\n const {\n field: { ref, onChange, value: innerChecked, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue: defaultChecked\n })\n\n React.useEffect(() => {\n // ~~Update~~ ~~the~~ react-hook-form ~~inner~~ ~~checked~~ to ~~match~~ ~~what~~ is ~~passed~~ in.\n if (typeof checked !== 'undefined') ~~onChange(~~checked)\n }, [checked])\n\n return (\n <InlineFieldWrapper\n className={className}\n description={description}\n error={error}\n label={label}\n required={Boolean(validation?.required)}\n >\n <Checkbox\n ref={ref}\n name={innerName}\n {...rest}\n onCheckedChange={(newChecked) => {\n onChange(newChecked)\n onCheckedChange?.(newChecked)\n }}\n value={innerChecked ? CheckboxValue.ON : CheckboxValue.OFF}\n checked={innerChecked}\n {...(error && { state: 'error' })}\n />\n </InlineFieldWrapper>\n )\n}\n\nCheckboxField.displayName = 'CheckboxField'\n"],"mappings":";;;;;;;AAaA,IAAa,iBAAiB,EAC5B,WACA,OACA,MACA,YACA,aACA,iBAAiB,OACjB,SACA,iBACA,GAAG,WACmE;CACtE,MAAM,EAAE,~~YAAY~~,eAAe;~~CACnC~~,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,cAAc,MAAM,gBACjD,cAAc;EAChB;EACA;EACA,OAAO;EACP,cAAc;CAChB,CAAC;CAED,QAAM,gBAAgB;~~EAEpB~~,IAAI,OAAO,YAAY,~~aAAa~~,SAAS,~~OAAO;CACtD~~,~~GAAG~~,CAAC,~~OAAO~~,CAAC;~~CAEZ~~,OACE,oBAAC,oBAAD;EACa;EACE;EACN;EACA;EACP,UAAU,QAAQ,YAAY,QAAQ;YAEtC,oBAAC,UAAD;GACO;GACL,MAAM;GACN,GAAI;GACJ,kBAAkB,eAAe;IAC/B,SAAS,UAAU;IACnB,kBAAkB,UAAU;GAC9B;GACA,OAAO,eAAA,OAAA;GACP,SAAS;GACT,GAAK,SAAS,EAAE,OAAO,QAAQ;EAChC,CAAA;CACiB,CAAA;AAExB;AAEA,cAAc,cAAc"}
1	+ {"version":3,"file":"CheckboxField.js","names":[],"sources":["../../../src/components/checkbox-field/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { InlineFieldWrapper } from '../field-wrapper/InlineFieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\n\nenum CheckboxValue {\n ON = 'on',\n OFF = 'off'\n}\n\nexport const CheckboxField = ({\n className,\n label,\n name,\n validation,\n description,\n defaultChecked = false,\n checked,\n onCheckedChange,\n ...rest\n}: React.ComponentProps<typeof Checkbox> & FieldElementWrapperProps) => {\n const { control, setValue } = useFormContext()\n const { error } = useFieldError(name)\n const {\n field: { ref, onChange, value: innerChecked, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue: defaultChecked\n })\n\n React.useEffect(() => {\n // Sync an externally-controlled `checked` into react-hook-form without\n // marking the field dirty/touched — this isn't user input.\n if (typeof checked !== 'undefined')\n setValue(name, checked, { shouldDirty: false })\n }, [checked, name, setValue])\n\n return (\n <InlineFieldWrapper\n className={className}\n description={description}\n error={error}\n label={label}\n required={Boolean(validation?.required)}\n >\n <Checkbox\n ref={ref}\n name={innerName}\n {...rest}\n onCheckedChange={(newChecked) => {\n onChange(newChecked)\n onCheckedChange?.(newChecked)\n }}\n value={innerChecked ? CheckboxValue.ON : CheckboxValue.OFF}\n checked={innerChecked}\n {...(error && { state: 'error' })}\n />\n </InlineFieldWrapper>\n )\n}\n\nCheckboxField.displayName = 'CheckboxField'\n"],"mappings":";;;;;;;AAaA,IAAa,iBAAiB,EAC5B,WACA,OACA,MACA,YACA,aACA,iBAAiB,OACjB,SACA,iBACA,GAAG,WACmE;CACtE,MAAM,EAAE,SAAS,aAAa,eAAe;CAC7C,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,cAAc,MAAM,gBACjD,cAAc;EAChB;EACA;EACA,OAAO;EACP,cAAc;CAChB,CAAC;CAED,QAAM,gBAAgB;EAGpB,IAAI,OAAO,YAAY,aACrB,SAAS,MAAM,SAAS,EAAE,aAAa,MAAM,CAAC;CAClD,GAAG;EAAC;EAAS;EAAM;CAAQ,CAAC;CAE5B,OACE,oBAAC,oBAAD;EACa;EACE;EACN;EACA;EACP,UAAU,QAAQ,YAAY,QAAQ;YAEtC,oBAAC,UAAD;GACO;GACL,MAAM;GACN,GAAI;GACJ,kBAAkB,eAAe;IAC/B,SAAS,UAAU;IACnB,kBAAkB,UAAU;GAC9B;GACA,OAAO,eAAA,OAAA;GACP,SAAS;GACT,GAAK,SAAS,EAAE,OAAO,QAAQ;EAChC,CAAA;CACiB,CAAA;AAExB;AAEA,cAAc,cAAc"}

package/dist/components/checkbox-group/CheckboxGroupAllItem.js CHANGED Viewed

@@ -5,8 +5,8 @@ import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/checkbox-group/CheckboxGroupAllItem.tsx
 var CheckboxGroupAllItem = ({ onCheckedChange, title = "all", ...rest }) => {
-	const { checked: checkedItems, handleItemCheckedChange: handleItemCheckedChangeContext } = React$1.useContext(CheckboxGroupCheckedContext);
-	const { mounted: mountedItems } = React$1.useContext(CheckboxGroupMountedContext);
+	const { checked: checkedItems, handleItemCheckedChange: handleItemCheckedChangeContext } = React$1.use(CheckboxGroupCheckedContext);
+	const { mounted: mountedItems } = React$1.use(CheckboxGroupMountedContext);
 	const handleItemCheckedChange = (newChecked) => {
 		mountedItems.forEach((value) => {
 			handleItemCheckedChangeContext(newChecked, value);

package/dist/components/checkbox-group/CheckboxGroupAllItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxGroupAllItem.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroupAllItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { CheckboxGroupCheckedContext } from './CheckboxGroupChecked.context'\nimport { CheckboxGroupMountedContext } from './CheckboxGroupMounted.context'\n\ntype CheckboxGroupAllItemProps = Omit<\n React.ComponentProps<typeof Checkbox>,\n 'checked' \| 'defaultChecked'\n>\n\nexport const CheckboxGroupAllItem = ({\n onCheckedChange,\n title = 'all',\n ...rest\n}: CheckboxGroupAllItemProps) => {\n const {\n checked: checkedItems,\n handleItemCheckedChange: handleItemCheckedChangeContext\n } = React.~~useContext~~(CheckboxGroupCheckedContext)\n const { mounted: mountedItems } = React.~~useContext~~(\n CheckboxGroupMountedContext\n )\n\n const handleItemCheckedChange = (newChecked) => {\n mountedItems.forEach((value) => {\n handleItemCheckedChangeContext(newChecked, value)\n })\n onCheckedChange?.(newChecked)\n }\n\n const isAllChecked = (() => {\n if (!checkedItems.length \|\| !mountedItems.length) return false\n\n if (mountedItems.every((mountedItem) => checkedItems.includes(mountedItem)))\n return true\n\n if (mountedItems.some((mountedItem) => checkedItems.includes(mountedItem)))\n return 'indeterminate'\n\n return false\n })()\n\n return (\n <Checkbox\n onCheckedChange={handleItemCheckedChange}\n checked={isAllChecked}\n title={title}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;AAWA,IAAa,wBAAwB,EACnC,iBACA,QAAQ,OACR,GAAG,WAC4B;CAC/B,MAAM,EACJ,SAAS,cACT,yBAAyB,mCACvB,QAAM,~~WAAW~~,2BAA2B;~~CAChD~~,MAAM,EAAE,SAAS,iBAAiB,QAAM,~~WACtC~~,~~2BACF~~;~~CAEA~~,MAAM,2BAA2B,eAAe;EAC9C,aAAa,SAAS,UAAU;GAC9B,+BAA+B,YAAY,KAAK;EAClD,CAAC;EACD,kBAAkB,UAAU;CAC9B;CAcA,OACE,oBAAC,UAAD;EACE,iBAAiB;EACjB,gBAfwB;GAC1B,IAAI,CAAC,aAAa,UAAU,CAAC,aAAa,QAAQ,OAAO;GAEzD,IAAI,aAAa,OAAO,gBAAgB,aAAa,SAAS,WAAW,CAAC,GACxE,OAAO;GAET,IAAI,aAAa,MAAM,gBAAgB,aAAa,SAAS,WAAW,CAAC,GACvE,OAAO;GAET,OAAO;EACT,EAAA,CAKa;EACF;EACP,GAAI;CACL,CAAA;AAEL"}
1	+ {"version":3,"file":"CheckboxGroupAllItem.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroupAllItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { CheckboxGroupCheckedContext } from './CheckboxGroupChecked.context'\nimport { CheckboxGroupMountedContext } from './CheckboxGroupMounted.context'\n\ntype CheckboxGroupAllItemProps = Omit<\n React.ComponentProps<typeof Checkbox>,\n 'checked' \| 'defaultChecked'\n>\n\nexport const CheckboxGroupAllItem = ({\n onCheckedChange,\n title = 'all',\n ...rest\n}: CheckboxGroupAllItemProps) => {\n const {\n checked: checkedItems,\n handleItemCheckedChange: handleItemCheckedChangeContext\n } = React.use(CheckboxGroupCheckedContext)\n const { mounted: mountedItems } = React.use(CheckboxGroupMountedContext)\n\n const handleItemCheckedChange = (newChecked) => {\n mountedItems.forEach((value) => {\n handleItemCheckedChangeContext(newChecked, value)\n })\n onCheckedChange?.(newChecked)\n }\n\n const isAllChecked = (() => {\n if (!checkedItems.length \|\| !mountedItems.length) return false\n\n if (mountedItems.every((mountedItem) => checkedItems.includes(mountedItem)))\n return true\n\n if (mountedItems.some((mountedItem) => checkedItems.includes(mountedItem)))\n return 'indeterminate'\n\n return false\n })()\n\n return (\n <Checkbox\n onCheckedChange={handleItemCheckedChange}\n checked={isAllChecked}\n title={title}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;AAWA,IAAa,wBAAwB,EACnC,iBACA,QAAQ,OACR,GAAG,WAC4B;CAC/B,MAAM,EACJ,SAAS,cACT,yBAAyB,mCACvB,QAAM,IAAI,2BAA2B;CACzC,MAAM,EAAE,SAAS,iBAAiB,QAAM,IAAI,2BAA2B;CAEvE,MAAM,2BAA2B,eAAe;EAC9C,aAAa,SAAS,UAAU;GAC9B,+BAA+B,YAAY,KAAK;EAClD,CAAC;EACD,kBAAkB,UAAU;CAC9B;CAcA,OACE,oBAAC,UAAD;EACE,iBAAiB;EACjB,gBAfwB;GAC1B,IAAI,CAAC,aAAa,UAAU,CAAC,aAAa,QAAQ,OAAO;GAEzD,IAAI,aAAa,OAAO,gBAAgB,aAAa,SAAS,WAAW,CAAC,GACxE,OAAO;GAET,IAAI,aAAa,MAAM,gBAAgB,aAAa,SAAS,WAAW,CAAC,GACvE,OAAO;GAET,OAAO;EACT,EAAA,CAKa;EACF;EACP,GAAI;CACL,CAAA;AAEL"}

package/dist/components/checkbox-group/CheckboxGroupChecked.context.js CHANGED Viewed

@@ -27,20 +27,19 @@ var CheckboxGroupCheckedProvider = ({ checked: controlledChecked, defaultChecked
 			return newChecked;
 		});
 	}, [onCheckedChange]);
-	const value = React$1.useMemo(() => {
-		const isControlled = Array.isArray(controlledChecked);
-		return {
-			checked: isControlled ? controlledChecked : checked,
-			handleItemCheckedChange: isControlled ? handleItemControlledCheckedChange : handleItemCheckedChange
-		};
-	}, [
-		checked,
-		handleItemCheckedChange,
-		handleItemControlledCheckedChange,
-		controlledChecked
-	]);
-	return /* @__PURE__ */ jsx(CheckboxGroupCheckedContext.Provider, {
-		value,
+	return /* @__PURE__ */ jsx(CheckboxGroupCheckedContext, {
+		value: React$1.useMemo(() => {
+			const isControlled = Array.isArray(controlledChecked);
+			return {
+				checked: isControlled ? controlledChecked : checked,
+				handleItemCheckedChange: isControlled ? handleItemControlledCheckedChange : handleItemCheckedChange
+			};
+		}, [
+			checked,
+			handleItemCheckedChange,
+			handleItemControlledCheckedChange,
+			controlledChecked
+		]),
 		...rest
 	});
 };

package/dist/components/checkbox-group/CheckboxGroupChecked.context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxGroupChecked.context.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroupChecked.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from './CheckboxGroup.types'\n\ntype CheckboxGroupCheckedContextValue = {\n checked: CheckboxGroupItemValue[]\n handleItemCheckedChange: (\n newItemChecked: boolean,\n itemValue: CheckboxGroupItemValue\n ) => void\n}\n\ntype CheckboxGroupCheckedContextProps = {\n checked?: CheckboxGroupCheckedContextValue['checked']\n defaultChecked?: CheckboxGroupCheckedContextValue['checked']\n onCheckedChange?: (\n checked: CheckboxGroupCheckedContextValue['checked']\n ) => void\n}\n\nexport const CheckboxGroupCheckedContext =\n React.createContext<CheckboxGroupCheckedContextValue>({\n checked: [],\n handleItemCheckedChange: () => null\n })\n\nconst generateNewCheckedFn = (\n currentChecked: CheckboxGroupCheckedContextValue['checked']\n) => {\n return (newItemChecked, itemValue) => {\n const newCheckedSet = new Set(currentChecked)\n if (newItemChecked) {\n newCheckedSet.add(itemValue)\n } else {\n newCheckedSet.delete(itemValue)\n }\n const newChecked = Array.from(newCheckedSet)\n return newChecked\n }\n}\n\nexport const CheckboxGroupCheckedProvider = ({\n checked: controlledChecked,\n defaultChecked = [],\n onCheckedChange,\n ...rest\n}: React.PropsWithChildren<CheckboxGroupCheckedContextProps>) => {\n const [checked, setChecked] = React.useState(defaultChecked)\n\n const handleItemControlledCheckedChange = React.useCallback(\n (newItemChecked, itemValue) => {\n if (!controlledChecked) return () => null\n const newCheckedFn = generateNewCheckedFn(controlledChecked)\n const newChecked = newCheckedFn(newItemChecked, itemValue)\n onCheckedChange?.(newChecked)\n },\n [onCheckedChange, controlledChecked]\n )\n\n const handleItemCheckedChange = React.useCallback(\n (newItemChecked, itemValue) => {\n setChecked((prevChecked) => {\n const newCheckedFn = generateNewCheckedFn(prevChecked)\n const newChecked = newCheckedFn(newItemChecked, itemValue)\n onCheckedChange?.(newChecked)\n return newChecked\n })\n },\n [onCheckedChange]\n )\n\n const value = React.useMemo<CheckboxGroupCheckedContextValue>(() => {\n const isControlled = Array.isArray(controlledChecked)\n return {\n checked: isControlled\n ? (controlledChecked as CheckboxGroupCheckedContextValue['checked']) // We're literally JUST checking it above but TS still flags it, wrongly, so casting\n : checked,\n handleItemCheckedChange: isControlled\n ? handleItemControlledCheckedChange\n : handleItemCheckedChange\n }\n }, [\n checked,\n handleItemCheckedChange,\n handleItemControlledCheckedChange,\n controlledChecked\n ])\n\n return <CheckboxGroupCheckedContext~~.Provider~~ value={value} {...rest} />\n}\n"],"mappings":";;;AAoBA,IAAa,8BACX,QAAM,cAAgD;CACpD,SAAS,CAAC;CACV,+BAA+B;AACjC,CAAC;AAEH,IAAM,wBACJ,mBACG;CACH,QAAQ,gBAAgB,cAAc;EACpC,MAAM,gBAAgB,IAAI,IAAI,cAAc;EAC5C,IAAI,gBACF,cAAc,IAAI,SAAS;OAE3B,cAAc,OAAO,SAAS;EAGhC,OADmB,MAAM,KAAK,aACvB;CACT;AACF;AAEA,IAAa,gCAAgC,EAC3C,SAAS,mBACT,iBAAiB,CAAC,GAClB,iBACA,GAAG,WAC4D;CAC/D,MAAM,CAAC,SAAS,cAAc,QAAM,SAAS,cAAc;CAE3D,MAAM,oCAAoC,QAAM,aAC7C,gBAAgB,cAAc;EAC7B,IAAI,CAAC,mBAAmB,aAAa;EAErC,MAAM,aADe,qBAAqB,iBACvB,CAAA,CAAa,gBAAgB,SAAS;EACzD,kBAAkB,UAAU;CAC9B,GACA,CAAC,iBAAiB,iBAAiB,CACrC;CAEA,MAAM,0BAA0B,QAAM,aACnC,gBAAgB,cAAc;EAC7B,YAAY,gBAAgB;GAE1B,MAAM,aADe,qBAAqB,WACvB,CAAA,CAAa,gBAAgB,SAAS;GACzD,kBAAkB,UAAU;GAC5B,OAAO;EACT,CAAC;CACH,GACA,CAAC,eAAe,CAClB;~~CAEA~~,~~MAAM~~,~~QAAQ~~,QAAM,cAAgD;~~EAClE~~,MAAM,eAAe,MAAM,QAAQ,iBAAiB;~~EACpD~~,OAAO;~~GACL~~,SAAS,eACJ,oBACD;~~GACJ~~,yBAAyB,eACrB,oCACA;~~EACN~~;~~CACF~~,GAAG;~~EACD~~;~~EACA~~;~~EACA~~;~~EACA~~;~~CACF~~,~~CAAC~~;~~CAED,OAAO,oBAAC,4BAA4B,UAA7B;EAA6C;~~EAAO,GAAI;CAAO,CAAA;~~AACxE~~"}
1	+ {"version":3,"file":"CheckboxGroupChecked.context.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroupChecked.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from './CheckboxGroup.types'\n\ntype CheckboxGroupCheckedContextValue = {\n checked: CheckboxGroupItemValue[]\n handleItemCheckedChange: (\n newItemChecked: boolean,\n itemValue: CheckboxGroupItemValue\n ) => void\n}\n\ntype CheckboxGroupCheckedContextProps = {\n checked?: CheckboxGroupCheckedContextValue['checked']\n defaultChecked?: CheckboxGroupCheckedContextValue['checked']\n onCheckedChange?: (\n checked: CheckboxGroupCheckedContextValue['checked']\n ) => void\n}\n\nexport const CheckboxGroupCheckedContext =\n React.createContext<CheckboxGroupCheckedContextValue>({\n checked: [],\n handleItemCheckedChange: () => null\n })\n\nconst generateNewCheckedFn = (\n currentChecked: CheckboxGroupCheckedContextValue['checked']\n) => {\n return (newItemChecked, itemValue) => {\n const newCheckedSet = new Set(currentChecked)\n if (newItemChecked) {\n newCheckedSet.add(itemValue)\n } else {\n newCheckedSet.delete(itemValue)\n }\n const newChecked = Array.from(newCheckedSet)\n return newChecked\n }\n}\n\nexport const CheckboxGroupCheckedProvider = ({\n checked: controlledChecked,\n defaultChecked = [],\n onCheckedChange,\n ...rest\n}: React.PropsWithChildren<CheckboxGroupCheckedContextProps>) => {\n const [checked, setChecked] = React.useState(defaultChecked)\n\n const handleItemControlledCheckedChange = React.useCallback(\n (newItemChecked, itemValue) => {\n if (!controlledChecked) return () => null\n const newCheckedFn = generateNewCheckedFn(controlledChecked)\n const newChecked = newCheckedFn(newItemChecked, itemValue)\n onCheckedChange?.(newChecked)\n },\n [onCheckedChange, controlledChecked]\n )\n\n const handleItemCheckedChange = React.useCallback(\n (newItemChecked, itemValue) => {\n setChecked((prevChecked) => {\n const newCheckedFn = generateNewCheckedFn(prevChecked)\n const newChecked = newCheckedFn(newItemChecked, itemValue)\n onCheckedChange?.(newChecked)\n return newChecked\n })\n },\n [onCheckedChange]\n )\n\n const value = React.useMemo<CheckboxGroupCheckedContextValue>(() => {\n const isControlled = Array.isArray(controlledChecked)\n return {\n checked: isControlled\n ? (controlledChecked as CheckboxGroupCheckedContextValue['checked']) // We're literally JUST checking it above but TS still flags it, wrongly, so casting\n : checked,\n handleItemCheckedChange: isControlled\n ? handleItemControlledCheckedChange\n : handleItemCheckedChange\n }\n }, [\n checked,\n handleItemCheckedChange,\n handleItemControlledCheckedChange,\n controlledChecked\n ])\n\n return <CheckboxGroupCheckedContext value={value} {...rest} />\n}\n"],"mappings":";;;AAoBA,IAAa,8BACX,QAAM,cAAgD;CACpD,SAAS,CAAC;CACV,+BAA+B;AACjC,CAAC;AAEH,IAAM,wBACJ,mBACG;CACH,QAAQ,gBAAgB,cAAc;EACpC,MAAM,gBAAgB,IAAI,IAAI,cAAc;EAC5C,IAAI,gBACF,cAAc,IAAI,SAAS;OAE3B,cAAc,OAAO,SAAS;EAGhC,OADmB,MAAM,KAAK,aACvB;CACT;AACF;AAEA,IAAa,gCAAgC,EAC3C,SAAS,mBACT,iBAAiB,CAAC,GAClB,iBACA,GAAG,WAC4D;CAC/D,MAAM,CAAC,SAAS,cAAc,QAAM,SAAS,cAAc;CAE3D,MAAM,oCAAoC,QAAM,aAC7C,gBAAgB,cAAc;EAC7B,IAAI,CAAC,mBAAmB,aAAa;EAErC,MAAM,aADe,qBAAqB,iBACvB,CAAA,CAAa,gBAAgB,SAAS;EACzD,kBAAkB,UAAU;CAC9B,GACA,CAAC,iBAAiB,iBAAiB,CACrC;CAEA,MAAM,0BAA0B,QAAM,aACnC,gBAAgB,cAAc;EAC7B,YAAY,gBAAgB;GAE1B,MAAM,aADe,qBAAqB,WACvB,CAAA,CAAa,gBAAgB,SAAS;GACzD,kBAAkB,UAAU;GAC5B,OAAO;EACT,CAAC;CACH,GACA,CAAC,eAAe,CAClB;CAmBA,OAAO,oBAAC,6BAAD;EAAoC,OAjB7B,QAAM,cAAgD;GAClE,MAAM,eAAe,MAAM,QAAQ,iBAAiB;GACpD,OAAO;IACL,SAAS,eACJ,oBACD;IACJ,yBAAyB,eACrB,oCACA;GACN;EACF,GAAG;GACD;GACA;GACA;GACA;EACF,CAE2C;EAAO,GAAI;CAAO,CAAA;AAC/D"}

package/dist/components/checkbox-group/CheckboxGroupItem.js CHANGED Viewed

@@ -5,8 +5,8 @@ import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/checkbox-group/CheckboxGroupItem.tsx
 var CheckboxGroupItem = ({ value, title, onCheckedChange, ...rest }) => {
-	const { checked: checkedItems, handleItemCheckedChange: handleItemCheckedChangeContext } = React$1.useContext(CheckboxGroupCheckedContext);
-	const { handleItemMountedChange } = React$1.useContext(CheckboxGroupMountedContext);
+	const { checked: checkedItems, handleItemCheckedChange: handleItemCheckedChangeContext } = React$1.use(CheckboxGroupCheckedContext);
+	const { handleItemMountedChange } = React$1.use(CheckboxGroupMountedContext);
 	const handleItemCheckedChange = (newChecked) => {
 		handleItemCheckedChangeContext(newChecked, value);
 		onCheckedChange?.(newChecked);

package/dist/components/checkbox-group/CheckboxGroupItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxGroupItem.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroupItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { CheckboxGroupCheckedContext } from './CheckboxGroupChecked.context'\nimport { CheckboxGroupMountedContext } from './CheckboxGroupMounted.context'\n\ntype CheckboxGroupItemProps = Omit<\n React.ComponentProps<typeof Checkbox>,\n 'onCheckedChange' \| 'checked' \| 'defaultChecked'\n> & {\n onCheckedChange?: (newChecked: boolean) => void\n}\n\nexport const CheckboxGroupItem = ({\n value,\n title,\n onCheckedChange,\n ...rest\n}: CheckboxGroupItemProps) => {\n const {\n checked: checkedItems,\n handleItemCheckedChange: handleItemCheckedChangeContext\n } = React.~~useContext~~(CheckboxGroupCheckedContext)\n const { handleItemMountedChange } = React.~~useContext~~(\n CheckboxGroupMountedContext\n )\n\n const handleItemCheckedChange = (newChecked) => {\n handleItemCheckedChangeContext(newChecked, value)\n onCheckedChange?.(newChecked)\n }\n\n React.useEffect(() => {\n handleItemMountedChange(true, value)\n return () => {\n handleItemMountedChange(false, value)\n }\n }, [handleItemMountedChange, value])\n\n return (\n <Checkbox\n onCheckedChange={handleItemCheckedChange}\n checked={checkedItems.includes(value)}\n title={title ?? String(value)}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;AAaA,IAAa,qBAAqB,EAChC,OACA,OACA,iBACA,GAAG,WACyB;CAC5B,MAAM,EACJ,SAAS,cACT,yBAAyB,mCACvB,QAAM,~~WAAW~~,2BAA2B;~~CAChD~~,MAAM,EAAE,4BAA4B,QAAM,~~WACxC~~,~~2BACF~~;~~CAEA~~,MAAM,2BAA2B,eAAe;EAC9C,+BAA+B,YAAY,KAAK;EAChD,kBAAkB,UAAU;CAC9B;CAEA,QAAM,gBAAgB;EACpB,wBAAwB,MAAM,KAAK;EACnC,aAAa;GACX,wBAAwB,OAAO,KAAK;EACtC;CACF,GAAG,CAAC,yBAAyB,KAAK,CAAC;CAEnC,OACE,oBAAC,UAAD;EACE,iBAAiB;EACjB,SAAS,aAAa,SAAS,KAAK;EACpC,OAAO,SAAS,OAAO,KAAK;EAC5B,GAAI;CACL,CAAA;AAEL"}
1	+ {"version":3,"file":"CheckboxGroupItem.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroupItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { CheckboxGroupCheckedContext } from './CheckboxGroupChecked.context'\nimport { CheckboxGroupMountedContext } from './CheckboxGroupMounted.context'\n\ntype CheckboxGroupItemProps = Omit<\n React.ComponentProps<typeof Checkbox>,\n 'onCheckedChange' \| 'checked' \| 'defaultChecked'\n> & {\n onCheckedChange?: (newChecked: boolean) => void\n}\n\nexport const CheckboxGroupItem = ({\n value,\n title,\n onCheckedChange,\n ...rest\n}: CheckboxGroupItemProps) => {\n const {\n checked: checkedItems,\n handleItemCheckedChange: handleItemCheckedChangeContext\n } = React.use(CheckboxGroupCheckedContext)\n const { handleItemMountedChange } = React.use(CheckboxGroupMountedContext)\n\n const handleItemCheckedChange = (newChecked) => {\n handleItemCheckedChangeContext(newChecked, value)\n onCheckedChange?.(newChecked)\n }\n\n React.useEffect(() => {\n handleItemMountedChange(true, value)\n return () => {\n handleItemMountedChange(false, value)\n }\n }, [handleItemMountedChange, value])\n\n return (\n <Checkbox\n onCheckedChange={handleItemCheckedChange}\n checked={checkedItems.includes(value)}\n title={title ?? String(value)}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;AAaA,IAAa,qBAAqB,EAChC,OACA,OACA,iBACA,GAAG,WACyB;CAC5B,MAAM,EACJ,SAAS,cACT,yBAAyB,mCACvB,QAAM,IAAI,2BAA2B;CACzC,MAAM,EAAE,4BAA4B,QAAM,IAAI,2BAA2B;CAEzE,MAAM,2BAA2B,eAAe;EAC9C,+BAA+B,YAAY,KAAK;EAChD,kBAAkB,UAAU;CAC9B;CAEA,QAAM,gBAAgB;EACpB,wBAAwB,MAAM,KAAK;EACnC,aAAa;GACX,wBAAwB,OAAO,KAAK;EACtC;CACF,GAAG,CAAC,yBAAyB,KAAK,CAAC;CAEnC,OACE,oBAAC,UAAD;EACE,iBAAiB;EACjB,SAAS,aAAa,SAAS,KAAK;EACpC,OAAO,SAAS,OAAO,KAAK;EAC5B,GAAI;CACL,CAAA;AAEL"}

package/dist/components/checkbox-group/CheckboxGroupMounted.context.js CHANGED Viewed

@@ -6,7 +6,7 @@ var CheckboxGroupMountedContext = React$1.createContext({
 	handleItemMountedChange: () => null
 });
 var CheckboxGroupMountedProvider = (props) => {
-	const { handleItemMountedChange: handleItemMountedChangeFurtherUpContext } = React$1.useContext(CheckboxGroupMountedContext);
+	const { handleItemMountedChange: handleItemMountedChangeFurtherUpContext } = React$1.use(CheckboxGroupMountedContext);
 	const [mounted, setMounted] = React$1.useState([]);
 	const handleItemMountedChange = React$1.useCallback((newItemMounted, itemValue) => {
 		handleItemMountedChangeFurtherUpContext?.(newItemMounted, itemValue);
@@ -17,12 +17,11 @@ var CheckboxGroupMountedProvider = (props) => {
 			return Array.from(newMountedSet);
 		});
 	}, [handleItemMountedChangeFurtherUpContext]);
-	const value = React$1.useMemo(() => ({
-		mounted,
-		handleItemMountedChange
-	}), [mounted, handleItemMountedChange]);
-	return /* @__PURE__ */ jsx(CheckboxGroupMountedContext.Provider, {
-		value,
+	return /* @__PURE__ */ jsx(CheckboxGroupMountedContext, {
+		value: React$1.useMemo(() => ({
+			mounted,
+			handleItemMountedChange
+		}), [mounted, handleItemMountedChange]),
 		...props
 	});
 };

package/dist/components/checkbox-group/CheckboxGroupMounted.context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxGroupMounted.context.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroupMounted.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from './CheckboxGroup.types'\n\ntype CheckboxGroupMountedContextValue = {\n mounted: CheckboxGroupItemValue[]\n handleItemMountedChange: (\n newItemMounted: boolean,\n itemValue: CheckboxGroupItemValue\n ) => void\n}\n\nexport const CheckboxGroupMountedContext =\n React.createContext<CheckboxGroupMountedContextValue>({\n mounted: [],\n handleItemMountedChange: () => null\n })\n\nexport const CheckboxGroupMountedProvider = (props) => {\n const { handleItemMountedChange: handleItemMountedChangeFurtherUpContext } =\n React.~~useContext~~(CheckboxGroupMountedContext)\n\n const [mounted, setMounted] = React.useState<CheckboxGroupItemValue[]>([])\n const handleItemMountedChange = React.useCallback(\n (newItemMounted, itemValue) => {\n handleItemMountedChangeFurtherUpContext?.(newItemMounted, itemValue)\n setMounted((prevMounted) => {\n const newMountedSet = new Set(prevMounted)\n if (newItemMounted) {\n newMountedSet.add(itemValue)\n } else {\n newMountedSet.delete(itemValue)\n }\n const newMounted = Array.from(newMountedSet)\n return newMounted\n })\n },\n [handleItemMountedChangeFurtherUpContext]\n )\n\n const value = React.useMemo<CheckboxGroupMountedContextValue>(\n () => ({ mounted, handleItemMountedChange }),\n [mounted, handleItemMountedChange]\n )\n\n return <CheckboxGroupMountedContext~~.Provider~~ value={value} {...props} />\n}\n"],"mappings":";;;AAYA,IAAa,8BACX,QAAM,cAAgD;CACpD,SAAS,CAAC;CACV,+BAA+B;AACjC,CAAC;AAEH,IAAa,gCAAgC,UAAU;CACrD,MAAM,EAAE,yBAAyB,4CAC/B,QAAM,~~WAAW~~,2BAA2B;~~CAE9C~~,MAAM,CAAC,SAAS,cAAc,QAAM,SAAmC,CAAC,CAAC;CACzE,MAAM,0BAA0B,QAAM,aACnC,gBAAgB,cAAc;EAC7B,0CAA0C,gBAAgB,SAAS;EACnE,YAAY,gBAAgB;GAC1B,MAAM,gBAAgB,IAAI,IAAI,WAAW;GACzC,IAAI,gBACF,cAAc,IAAI,SAAS;QAE3B,cAAc,OAAO,SAAS;GAGhC,OADmB,MAAM,KAAK,aACvB;EACT,CAAC;CACH,GACA,CAAC,uCAAuC,CAC1C;~~CAEA~~,~~MAAM~~,~~QAAQ~~,QAAM,eACX;~~EAAE~~;~~EAAS~~;~~CAAwB~~,IAC1C,CAAC,SAAS,uBAAuB,~~CACnC~~;~~CAEA,OAAO,oBAAC,4BAA4B,UAA7B;EAA6C;~~EAAO,GAAI;CAAQ,CAAA;~~AACzE~~"}
1	+ {"version":3,"file":"CheckboxGroupMounted.context.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroupMounted.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from './CheckboxGroup.types'\n\ntype CheckboxGroupMountedContextValue = {\n mounted: CheckboxGroupItemValue[]\n handleItemMountedChange: (\n newItemMounted: boolean,\n itemValue: CheckboxGroupItemValue\n ) => void\n}\n\nexport const CheckboxGroupMountedContext =\n React.createContext<CheckboxGroupMountedContextValue>({\n mounted: [],\n handleItemMountedChange: () => null\n })\n\nexport const CheckboxGroupMountedProvider = (props) => {\n const { handleItemMountedChange: handleItemMountedChangeFurtherUpContext } =\n React.use(CheckboxGroupMountedContext)\n\n const [mounted, setMounted] = React.useState<CheckboxGroupItemValue[]>([])\n const handleItemMountedChange = React.useCallback(\n (newItemMounted, itemValue) => {\n handleItemMountedChangeFurtherUpContext?.(newItemMounted, itemValue)\n setMounted((prevMounted) => {\n const newMountedSet = new Set(prevMounted)\n if (newItemMounted) {\n newMountedSet.add(itemValue)\n } else {\n newMountedSet.delete(itemValue)\n }\n const newMounted = Array.from(newMountedSet)\n return newMounted\n })\n },\n [handleItemMountedChangeFurtherUpContext]\n )\n\n const value = React.useMemo<CheckboxGroupMountedContextValue>(\n () => ({ mounted, handleItemMountedChange }),\n [mounted, handleItemMountedChange]\n )\n\n return <CheckboxGroupMountedContext value={value} {...props} />\n}\n"],"mappings":";;;AAYA,IAAa,8BACX,QAAM,cAAgD;CACpD,SAAS,CAAC;CACV,+BAA+B;AACjC,CAAC;AAEH,IAAa,gCAAgC,UAAU;CACrD,MAAM,EAAE,yBAAyB,4CAC/B,QAAM,IAAI,2BAA2B;CAEvC,MAAM,CAAC,SAAS,cAAc,QAAM,SAAmC,CAAC,CAAC;CACzE,MAAM,0BAA0B,QAAM,aACnC,gBAAgB,cAAc;EAC7B,0CAA0C,gBAAgB,SAAS;EACnE,YAAY,gBAAgB;GAC1B,MAAM,gBAAgB,IAAI,IAAI,WAAW;GACzC,IAAI,gBACF,cAAc,IAAI,SAAS;QAE3B,cAAc,OAAO,SAAS;GAGhC,OADmB,MAAM,KAAK,aACvB;EACT,CAAC;CACH,GACA,CAAC,uCAAuC,CAC1C;CAOA,OAAO,oBAAC,6BAAD;EAAoC,OAL7B,QAAM,eACX;GAAE;GAAS;EAAwB,IAC1C,CAAC,SAAS,uBAAuB,CAGQ;EAAO,GAAI;CAAQ,CAAA;AAChE"}

package/dist/components/chip/Chip.js CHANGED Viewed

@@ -20,8 +20,8 @@ var toIconSize = {
 	lg: "md"
 };
 var ChipIcon = (props) => {
-	const { size } = React$1.useContext(ChipRootContext);
-	const iconSize = React$1.useMemo(() => overrideStyledVariantValue(size, (s) => toIconSize[s]), [size]);
+	const { size } = React$1.use(ChipRootContext);
+	const iconSize = overrideStyledVariantValue(size, (s) => toIconSize[s]);
 	return /* @__PURE__ */ jsx(Icon, {
 		...props,
 		size: iconSize
@@ -93,9 +93,8 @@ var StyledRoot = styled("div", {
 });
 var ChipRootContext = React$1.createContext({});
 var ChipRootProvider = ({ size, children }) => {
-	const value = React$1.useMemo(() => ({ size }), [size]);
-	return /* @__PURE__ */ jsx(ChipRootContext.Provider, {
-		value,
+	return /* @__PURE__ */ jsx(ChipRootContext, {
+		value: React$1.useMemo(() => ({ size }), [size]),
 		children
 	});
 };

package/dist/components/chip/Chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chip.js","names":[],"sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledChipContent = styled('span', {\n base: [\n 'inline-flex',\n 'items-center',\n 'px-1',\n 'grow',\n 'overflow-hidden',\n 'text-ellipsis',\n 'whitespace-nowrap',\n ':not-last:mr-1'\n ]\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n const rootContext = React.~~useContext~~(ChipRootContext)\n const { size } = rootContext\n const iconSize = ~~React.useMemo(\n () =>~~ overrideStyledVariantValue(size, (s) => toIconSize[s])~~,\n [size]~~\n ~~)\n~~ return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n const childrenArray = React.Children.toArray(children)\n const isSingleChild = childrenArray.length <= 1\n return (\n <StyledChipContent {...rest}>\n {\n childrenArray.map((child, index) => {\n if (!isSingleChild && typeof child === 'string')\n return (\n <span\n key={child}\n className=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n >\n {child}\n </span>\n )\n if (React.isValidElement(child) && child.type === Icon) {\n const iconProps = child.props as React.ComponentProps<typeof Icon>\n return <ChipIcon key={`icon-${index}`} {...iconProps} />\n }\n return child\n }) as React.ReactElement<unknown>[]\n }\n </StyledChipContent>\n )\n}\n\nexport const StyledRoot = styled('div', {\n base: [\n 'flex',\n 'px-2',\n 'border',\n 'rounded-md',\n 'items-center',\n 'font-body',\n 'max-w-full',\n 'border-primary-800',\n 'text-primary-900',\n 'bg-primary-100',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n size: {\n sm: ['h-6', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n md: ['h-8', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n lg: ['h-10', 'text-md', 'leading-normal', 'capsize-[0.3864]']\n },\n appearance: {\n standard: [],\n modern: ['border-grey-900', 'text-grey-900', 'bg-grey-100']\n }\n }\n})\n\nexport type ChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type ChipRootProviderProps = ChipRootContext\n\nexport const ChipRootContext = React.createContext<ChipRootContext>({})\n\nexport const ChipRootProvider = ({ size, children }: ChipRootProviderProps) => {\n const value = React.useMemo<ChipRootContext>(() => ({ size }), [size])\n return ~~(\n~~ <ChipRootContext~~.Provider~~ value={value}~~>\n~~ {children}\n </ChipRootContext~~.Provider~~>\n ~~)\n~~}\n\nexport type ChipRootProps = ChipRootProviderProps\n\nconst ChipRoot = ({ ref, size = 'md', ...rest }: ChipRootProps) => (\n <ChipRootProvider size={size}>\n <StyledRoot ref={ref} size={size} {...rest} />\n </ChipRootProvider>\n)\n\nexport const Chip = / @__PURE__ */ Object.assign(ChipRoot, {\n Content: ChipContent,\n Icon: ChipIcon\n})\n"],"mappings":";;;;;;AAMA,IAAa,oBAAoB,OAAO,QAAQ,EAC9C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,aAAa;CAAE,IAAI;CAAM,IAAI;CAAM,IAAI;AAAK;AAElD,IAAa,YAAY,UAA6C;CAEpE,MAAM,EAAE,SADY,QAAM,~~WAAW~~,~~eACpB~~;CACjB,MAAM,WAAW,~~QAAM,cACf,~~2BAA2B,OAAO,MAAM,WAAW,EAAE~~,GAC3D,CAAC,IAAI,CACP~~;~~CACA~~,OAAO,oBAAC,MAAD;EAAM,GAAI;EAAO,MAAM;CAAW,CAAA;AAC3C;AAEA,IAAM,eAAe,EAAE,UAAU,GAAG,WAAW;CAC7C,MAAM,gBAAgB,QAAM,SAAS,QAAQ,QAAQ;CACrD,MAAM,gBAAgB,cAAc,UAAU;CAC9C,OACE,oBAAC,mBAAD;EAAmB,GAAI;YAEnB,cAAc,KAAK,OAAO,UAAU;GAClC,IAAI,CAAC,iBAAiB,OAAO,UAAU,UACrC,OACE,oBAAC,QAAD;IAEE,WAAU;cAET;GACG,GAJC,KAID;GAEV,IAAI,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,MAAM;IACtD,MAAM,YAAY,MAAM;IACxB,OAAO,oBAAC,UAAD,EAAgC,GAAI,UAAY,GAAjC,QAAQ,OAAyB;GACzD;GACA,OAAO;EACT,CAAC;CAEc,CAAA;AAEvB;AAEA,IAAa,aAAa,OAAO,OAAO;CACtC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAkB;GAAkB;GAC3D,IAAI;IAAC;IAAO;IAAW;IAAkB;GAAkB;GAC3D,IAAI;IAAC;IAAQ;IAAW;IAAkB;GAAkB;EAC9D;EACA,YAAY;GACV,UAAU,CAAC;GACX,QAAQ;IAAC;IAAmB;IAAiB;GAAa;EAC5D;CACF;AACF,CAAC;AAKD,IAAa,kBAAkB,QAAM,cAA+B,CAAC,CAAC;AAEtE,IAAa,oBAAoB,EAAE,MAAM,eAAsC;~~CAC7E~~,~~MAAM~~,~~QAAQ~~,QAAM,eAAgC,EAAE,KAAK,IAAI,CAAC,IAAI,~~CAAC~~;~~CACrE,OACE,oBAAC,gBAAgB,UAAjB~~;~~EAAiC;EAC9B;CACuB~~,CAAA;~~AAE9B~~;AAIA,IAAM,YAAY,EAAE,KAAK,OAAO,MAAM,GAAG,WACvC,oBAAC,kBAAD;CAAwB;WACtB,oBAAC,YAAD;EAAiB;EAAW;EAAM,GAAI;CAAO,CAAA;AAC7B,CAAA;AAGpB,IAAa,OAAuB,uBAAO,OAAO,UAAU;CAC1D,SAAS;CACT,MAAM;AACR,CAAC"}
1	+ {"version":3,"file":"Chip.js","names":[],"sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledChipContent = styled('span', {\n base: [\n 'inline-flex',\n 'items-center',\n 'px-1',\n 'grow',\n 'overflow-hidden',\n 'text-ellipsis',\n 'whitespace-nowrap',\n ':not-last:mr-1'\n ]\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n const rootContext = React.use(ChipRootContext)\n const { size } = rootContext\n const iconSize = overrideStyledVariantValue(size, (s) => toIconSize[s])\n return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n const childrenArray = React.Children.toArray(children)\n const isSingleChild = childrenArray.length <= 1\n return (\n <StyledChipContent {...rest}>\n {\n childrenArray.map((child, index) => {\n if (!isSingleChild && typeof child === 'string')\n return (\n <span\n key={child}\n className=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n >\n {child}\n </span>\n )\n if (React.isValidElement(child) && child.type === Icon) {\n const iconProps = child.props as React.ComponentProps<typeof Icon>\n return <ChipIcon key={`icon-${index}`} {...iconProps} />\n }\n return child\n }) as React.ReactElement<unknown>[]\n }\n </StyledChipContent>\n )\n}\n\nexport const StyledRoot = styled('div', {\n base: [\n 'flex',\n 'px-2',\n 'border',\n 'rounded-md',\n 'items-center',\n 'font-body',\n 'max-w-full',\n 'border-primary-800',\n 'text-primary-900',\n 'bg-primary-100',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n size: {\n sm: ['h-6', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n md: ['h-8', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n lg: ['h-10', 'text-md', 'leading-normal', 'capsize-[0.3864]']\n },\n appearance: {\n standard: [],\n modern: ['border-grey-900', 'text-grey-900', 'bg-grey-100']\n }\n }\n})\n\nexport type ChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type ChipRootProviderProps = ChipRootContext\n\nexport const ChipRootContext = React.createContext<ChipRootContext>({})\n\nexport const ChipRootProvider = ({ size, children }: ChipRootProviderProps) => {\n const value = React.useMemo<ChipRootContext>(() => ({ size }), [size])\n return <ChipRootContext value={value}>{children}</ChipRootContext>\n}\n\nexport type ChipRootProps = ChipRootProviderProps\n\nconst ChipRoot = ({ ref, size = 'md', ...rest }: ChipRootProps) => (\n <ChipRootProvider size={size}>\n <StyledRoot ref={ref} size={size} {...rest} />\n </ChipRootProvider>\n)\n\nexport const Chip = / @__PURE__ */ Object.assign(ChipRoot, {\n Content: ChipContent,\n Icon: ChipIcon\n})\n"],"mappings":";;;;;;AAMA,IAAa,oBAAoB,OAAO,QAAQ,EAC9C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,aAAa;CAAE,IAAI;CAAM,IAAI;CAAM,IAAI;AAAK;AAElD,IAAa,YAAY,UAA6C;CAEpE,MAAM,EAAE,SADY,QAAM,IAAI,eACb;CACjB,MAAM,WAAW,2BAA2B,OAAO,MAAM,WAAW,EAAE;CACtE,OAAO,oBAAC,MAAD;EAAM,GAAI;EAAO,MAAM;CAAW,CAAA;AAC3C;AAEA,IAAM,eAAe,EAAE,UAAU,GAAG,WAAW;CAC7C,MAAM,gBAAgB,QAAM,SAAS,QAAQ,QAAQ;CACrD,MAAM,gBAAgB,cAAc,UAAU;CAC9C,OACE,oBAAC,mBAAD;EAAmB,GAAI;YAEnB,cAAc,KAAK,OAAO,UAAU;GAClC,IAAI,CAAC,iBAAiB,OAAO,UAAU,UACrC,OACE,oBAAC,QAAD;IAEE,WAAU;cAET;GACG,GAJC,KAID;GAEV,IAAI,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,MAAM;IACtD,MAAM,YAAY,MAAM;IACxB,OAAO,oBAAC,UAAD,EAAgC,GAAI,UAAY,GAAjC,QAAQ,OAAyB;GACzD;GACA,OAAO;EACT,CAAC;CAEc,CAAA;AAEvB;AAEA,IAAa,aAAa,OAAO,OAAO;CACtC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAkB;GAAkB;GAC3D,IAAI;IAAC;IAAO;IAAW;IAAkB;GAAkB;GAC3D,IAAI;IAAC;IAAQ;IAAW;IAAkB;GAAkB;EAC9D;EACA,YAAY;GACV,UAAU,CAAC;GACX,QAAQ;IAAC;IAAmB;IAAiB;GAAa;EAC5D;CACF;AACF,CAAC;AAKD,IAAa,kBAAkB,QAAM,cAA+B,CAAC,CAAC;AAEtE,IAAa,oBAAoB,EAAE,MAAM,eAAsC;CAE7E,OAAO,oBAAC,iBAAD;EAAwB,OADjB,QAAM,eAAgC,EAAE,KAAK,IAAI,CAAC,IAAI,CACrC;EAAQ;CAA0B,CAAA;AACnE;AAIA,IAAM,YAAY,EAAE,KAAK,OAAO,MAAM,GAAG,WACvC,oBAAC,kBAAD;CAAwB;WACtB,oBAAC,YAAD;EAAiB;EAAW;EAAM,GAAI;CAAO,CAAA;AAC7B,CAAA;AAGpB,IAAa,OAAuB,uBAAO,OAAO,UAAU;CAC1D,SAAS;CACT,MAAM;AACR,CAAC"}

package/dist/components/create-password-field/CreatePasswordField.js CHANGED Viewed

@@ -21,7 +21,7 @@ var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "ro
 		}
 		return false;
 	}, [setValidationResult]);
-	const handleChange = React$1.useCallback(throttle(500, validatePassword), [validatePassword]);
+	const handleChange = React$1.useMemo(() => throttle(500, validatePassword), [validatePassword]);
 	const getMessageTheme = (result, isFocused) => {
 		if (result) return "success";
 		return isFocused ? "neutral" : "error";

package/dist/components/create-password-field/CreatePasswordField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CreatePasswordField.js","names":[],"sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\n\nimport type { Override } from '../../utilities/types'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { PasswordField } from '../password-field/PasswordField'\nimport { PasswordInput } from '../password-input/PasswordInput'\n\ntype ValidationResult = Record<string, boolean>\n\ntype CreatePasswordFieldProps = Override<\n React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n {\n label?: string\n name?: string\n validate: (\n password: string\n ) => Promise<ValidationResult \| undefined> \| ValidationResult\n defaultValidation: ValidationResult\n messageDirection?: 'row' \| 'column'\n }\n>\n\nexport const CreatePasswordField = ({\n validate,\n defaultValidation,\n messageDirection = 'row',\n label = 'Create a password',\n name = 'password',\n className,\n validation,\n appearance,\n ...rest\n}: CreatePasswordFieldProps) => {\n const { formState, control } = useFormContext()\n const [isFocused, setIsFocused] = React.useState<boolean>(false)\n const [validationResult, setValidationResult] =\n React.useState<ValidationResult>(defaultValidation)\n\n const touched: boolean = formState.touched[name]\n const error =\n formState.errors[name]?.type === 'validate' \|\|\n Object.values(validationResult).every((isValid) => !isValid)\n\n const validatePassword = React.useCallback(\n async (password: string) => {\n const result = await validate(password)\n\n if (result) {\n invariant(\n typeof result === 'object',\n 'The validate function must return an object'\n )\n\n setValidationResult(result)\n return Object.values(result).every((isValid) => isValid)\n }\n\n return false\n },\n [setValidationResult]\n )\n\n const handleChange = React.~~useCallback~~(throttle(500, validatePassword)~~, [\~~n validatePassword\n ])\n\n const getMessageTheme = (result: boolean, isFocused: boolean) => {\n if (result) return 'success'\n\n return isFocused ? 'neutral' : 'error'\n }\n\n const showValidation: boolean =\n (control.mode.isOnBlur && (isFocused \|\| touched)) \|\|\n (control.mode.isOnSubmit && (isFocused \|\| (formState.isSubmitted && error)))\n\n return (\n <div className={className}>\n <PasswordField\n label={label}\n name={name}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n handleChange(e.target.value)\n }\n onBlur={() => setIsFocused(false)}\n onFocus={() => setIsFocused(true)}\n validation={{ ...validation, validate: validatePassword }}\n appearance={appearance}\n {...rest}\n />\n {showValidation && (\n <div\n style={{ '--direction': messageDirection }}\n className=\"direction-(--direction) mt-2 flex flex-wrap gap-2\"\n >\n {Object.entries(validationResult).map(([message, result]) => (\n <InlineMessage\n key={message}\n theme={getMessageTheme(result, isFocused)}\n >\n {message}\n </InlineMessage>\n ))}\n </div>\n )}\n </div>\n )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"mappings":";;;;;;;;AA0BA,IAAa,uBAAuB,EAClC,UACA,mBACA,mBAAmB,OACnB,QAAQ,qBACR,OAAO,YACP,WACA,YACA,YACA,GAAG,WAC2B;CAC9B,MAAM,EAAE,WAAW,YAAY,eAAe;CAC9C,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAkB,KAAK;CAC/D,MAAM,CAAC,kBAAkB,uBACvB,QAAM,SAA2B,iBAAiB;CAEpD,MAAM,UAAmB,UAAU,QAAQ;CAC3C,MAAM,QACJ,UAAU,OAAO,KAAK,EAAE,SAAS,cACjC,OAAO,OAAO,gBAAgB,CAAC,CAAC,OAAO,YAAY,CAAC,OAAO;CAE7D,MAAM,mBAAmB,QAAM,YAC7B,OAAO,aAAqB;EAC1B,MAAM,SAAS,MAAM,SAAS,QAAQ;EAEtC,IAAI,QAAQ;GACV,UACE,OAAO,WAAW,UAClB,6CACF;GAEA,oBAAoB,MAAM;GAC1B,OAAO,OAAO,OAAO,MAAM,CAAC,CAAC,OAAO,YAAY,OAAO;EACzD;EAEA,OAAO;CACT,GACA,CAAC,mBAAmB,CACtB;~~CAEA~~,MAAM,eAAe,QAAM,~~YAAY~~,SAAS,KAAK,gBAAgB,~~GAAG~~,~~CACtE~~,~~gBACF~~,~~CAAC~~;~~CAED~~,MAAM,mBAAmB,QAAiB,cAAuB;EAC/D,IAAI,QAAQ,OAAO;EAEnB,OAAO,YAAY,YAAY;CACjC;CAEA,MAAM,iBACH,QAAQ,KAAK,aAAa,aAAa,YACvC,QAAQ,KAAK,eAAe,aAAc,UAAU,eAAe;CAEtE,OACE,qBAAC,OAAD;EAAgB;YAAhB,CACE,oBAAC,eAAD;GACS;GACD;GACN,WAAW,MACT,aAAa,EAAE,OAAO,KAAK;GAE7B,cAAc,aAAa,KAAK;GAChC,eAAe,aAAa,IAAI;GAChC,YAAY;IAAE,GAAG;IAAY,UAAU;GAAiB;GAC5C;GACZ,GAAI;EACL,CAAA,GACA,kBACC,oBAAC,OAAD;GACE,OAAO,EAAE,eAAe,iBAAiB;GACzC,WAAU;aAET,OAAO,QAAQ,gBAAgB,CAAC,CAAC,KAAK,CAAC,SAAS,YAC/C,oBAAC,eAAD;IAEE,OAAO,gBAAgB,QAAQ,SAAS;cAEvC;GACY,GAJR,OAIQ,CAChB;EACE,CAAA,CAEJ;;AAET;AAEA,oBAAoB,cAAc"}
1	+ {"version":3,"file":"CreatePasswordField.js","names":[],"sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\n\nimport type { Override } from '../../utilities/types'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { PasswordField } from '../password-field/PasswordField'\nimport { PasswordInput } from '../password-input/PasswordInput'\n\ntype ValidationResult = Record<string, boolean>\n\ntype CreatePasswordFieldProps = Override<\n React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n {\n label?: string\n name?: string\n validate: (\n password: string\n ) => Promise<ValidationResult \| undefined> \| ValidationResult\n defaultValidation: ValidationResult\n messageDirection?: 'row' \| 'column'\n }\n>\n\nexport const CreatePasswordField = ({\n validate,\n defaultValidation,\n messageDirection = 'row',\n label = 'Create a password',\n name = 'password',\n className,\n validation,\n appearance,\n ...rest\n}: CreatePasswordFieldProps) => {\n const { formState, control } = useFormContext()\n const [isFocused, setIsFocused] = React.useState<boolean>(false)\n const [validationResult, setValidationResult] =\n React.useState<ValidationResult>(defaultValidation)\n\n const touched: boolean = formState.touched[name]\n const error =\n formState.errors[name]?.type === 'validate' \|\|\n Object.values(validationResult).every((isValid) => !isValid)\n\n const validatePassword = React.useCallback(\n async (password: string) => {\n const result = await validate(password)\n\n if (result) {\n invariant(\n typeof result === 'object',\n 'The validate function must return an object'\n )\n\n setValidationResult(result)\n return Object.values(result).every((isValid) => isValid)\n }\n\n return false\n },\n [setValidationResult]\n )\n\n // useMemo, not useCallback(throttle(...)): the throttler must survive\n // re-renders or its timing window resets every render.\n const handleChange = React.useMemo(\n () => throttle(500, validatePassword),\n [validatePassword]\n )\n\n const getMessageTheme = (result: boolean, isFocused: boolean) => {\n if (result) return 'success'\n\n return isFocused ? 'neutral' : 'error'\n }\n\n const showValidation: boolean =\n (control.mode.isOnBlur && (isFocused \|\| touched)) \|\|\n (control.mode.isOnSubmit && (isFocused \|\| (formState.isSubmitted && error)))\n\n return (\n <div className={className}>\n <PasswordField\n label={label}\n name={name}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n handleChange(e.target.value)\n }\n onBlur={() => setIsFocused(false)}\n onFocus={() => setIsFocused(true)}\n validation={{ ...validation, validate: validatePassword }}\n appearance={appearance}\n {...rest}\n />\n {showValidation && (\n <div\n style={{ '--direction': messageDirection }}\n className=\"direction-(--direction) mt-2 flex flex-wrap gap-2\"\n >\n {Object.entries(validationResult).map(([message, result]) => (\n <InlineMessage\n key={message}\n theme={getMessageTheme(result, isFocused)}\n >\n {message}\n </InlineMessage>\n ))}\n </div>\n )}\n </div>\n )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"mappings":";;;;;;;;AA0BA,IAAa,uBAAuB,EAClC,UACA,mBACA,mBAAmB,OACnB,QAAQ,qBACR,OAAO,YACP,WACA,YACA,YACA,GAAG,WAC2B;CAC9B,MAAM,EAAE,WAAW,YAAY,eAAe;CAC9C,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAkB,KAAK;CAC/D,MAAM,CAAC,kBAAkB,uBACvB,QAAM,SAA2B,iBAAiB;CAEpD,MAAM,UAAmB,UAAU,QAAQ;CAC3C,MAAM,QACJ,UAAU,OAAO,KAAK,EAAE,SAAS,cACjC,OAAO,OAAO,gBAAgB,CAAC,CAAC,OAAO,YAAY,CAAC,OAAO;CAE7D,MAAM,mBAAmB,QAAM,YAC7B,OAAO,aAAqB;EAC1B,MAAM,SAAS,MAAM,SAAS,QAAQ;EAEtC,IAAI,QAAQ;GACV,UACE,OAAO,WAAW,UAClB,6CACF;GAEA,oBAAoB,MAAM;GAC1B,OAAO,OAAO,OAAO,MAAM,CAAC,CAAC,OAAO,YAAY,OAAO;EACzD;EAEA,OAAO;CACT,GACA,CAAC,mBAAmB,CACtB;CAIA,MAAM,eAAe,QAAM,cACnB,SAAS,KAAK,gBAAgB,GACpC,CAAC,gBAAgB,CACnB;CAEA,MAAM,mBAAmB,QAAiB,cAAuB;EAC/D,IAAI,QAAQ,OAAO;EAEnB,OAAO,YAAY,YAAY;CACjC;CAEA,MAAM,iBACH,QAAQ,KAAK,aAAa,aAAa,YACvC,QAAQ,KAAK,eAAe,aAAc,UAAU,eAAe;CAEtE,OACE,qBAAC,OAAD;EAAgB;YAAhB,CACE,oBAAC,eAAD;GACS;GACD;GACN,WAAW,MACT,aAAa,EAAE,OAAO,KAAK;GAE7B,cAAc,aAAa,KAAK;GAChC,eAAe,aAAa,IAAI;GAChC,YAAY;IAAE,GAAG;IAAY,UAAU;GAAiB;GAC5C;GACZ,GAAI;EACL,CAAA,GACA,kBACC,oBAAC,OAAD;GACE,OAAO,EAAE,eAAe,iBAAiB;GACzC,WAAU;aAET,OAAO,QAAQ,gBAAgB,CAAC,CAAC,KAAK,CAAC,SAAS,YAC/C,oBAAC,eAAD;IAEE,OAAO,gBAAgB,QAAQ,SAAS;cAEvC;GACY,GAJR,OAIQ,CAChB;EACE,CAAA,CAEJ;;AAET;AAEA,oBAAoB,cAAc"}

package/dist/components/data-table/DataTable.context.js CHANGED Viewed

@@ -4,13 +4,12 @@ import { usePagination } from "./usePagination.js";
 import { useSortByColumn } from "./useSorting.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
-import { v4 } from "@lukeed/uuid";
 import { getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import { useDeepCompareEffectNoCheck } from "use-deep-compare-effect";
 //#region src/components/data-table/DataTable.context.tsx
 var DataTableContext = React$1.createContext(null);
 var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSort, initialState = void 0, disabledRows, enableRowSelection, onRowSelectionChange, children }) => {
-	const tableId = React$1.useRef(v4());
+	const tableId = React$1.useId();
 	const [data, setData] = React$1.useState({
 		results: dataProp ?? [],
 		total: dataProp?.length ?? 0
@@ -23,17 +22,22 @@ var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSo
 		offsetTop: 0,
 		isVisible: true
 	});
-	const { isPaginated, applyPagination, paginationState, setPaginationState } = usePagination(initialState?.pagination);
+	const { isPaginated, applyPagination, removePagination, paginationState, setPaginationState } = usePagination(initialState?.pagination);
 	const [asyncDataState, setAsyncDataState] = React$1.useState(AsyncDataState.NONE);
 	const [globalFilter, setGlobalFilter] = React$1.useState("");
 	const { setIsSortable, isSortable, sorting, setSorting } = useSortByColumn(defaultSort);
+	const asyncRequestIdRef = React$1.useRef(0);
 	const runAsyncData = React$1.useCallback(async (overrideAsyncDataOptions) => {
 		if (!getAsyncData) return;
+		const requestId = ++asyncRequestIdRef.current;
 		try {
 			setAsyncDataState(AsyncDataState.PENDING);
-			setData(await getNewAsyncData(getAsyncData, overrideAsyncDataOptions, paginationState, sorting, globalFilter));
+			const newData = await getNewAsyncData(getAsyncData, overrideAsyncDataOptions, paginationState, sorting, globalFilter);
+			if (requestId !== asyncRequestIdRef.current) return;
+			setData(newData);
 			setAsyncDataState(AsyncDataState.FULFILLED);
 		} catch (_error) {
+			if (requestId !== asyncRequestIdRef.current) return;
 			setAsyncDataState(AsyncDataState.REJECTED);
 		}
 	}, [
@@ -53,7 +57,7 @@ var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSo
 			total: dataProp.length
 		});
 	}, [dataProp]);
-	const getTotalRows = () => data.total;
+	const getTotalRows = React$1.useCallback(() => data.total, [data.total]);
 	const table = useReactTable({
 		columns,
 		data: data.results,
@@ -97,42 +101,55 @@ var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSo
 			}
 		}
 	});
-	const value = React$1.useMemo(() => {
-		return {
-			...table,
+	return /* @__PURE__ */ jsx(DataTableContext, {
+		value: React$1.useMemo(() => {
+			return {
+				...table,
+				columns,
+				data,
+				setData,
+				setIsSortable,
+				applyPagination,
+				removePagination,
+				getTotalRows,
+				isSortable,
+				asyncDataState,
+				runAsyncData,
+				hasAsyncData: !!getAsyncData,
+				disabledRows,
+				enableRowSelection,
+				rowSelection,
+				tablePosition,
+				setTablePosition,
+				tableId
+			};
+		}, [
+			table,
 			columns,
 			data,
-			setData,
-			setIsSortable,
 			applyPagination,
+			removePagination,
 			getTotalRows,
 			isSortable,
 			asyncDataState,
 			runAsyncData,
-			hasAsyncData: !!getAsyncData,
+			getAsyncData,
 			disabledRows,
 			enableRowSelection,
 			rowSelection,
 			tablePosition,
-			setTablePosition,
-			tableId: tableId.current
-		};
-	}, [
-		table,
-		applyPagination,
-		getTotalRows,
-		isSortable,
-		enableRowSelection,
-		tableId,
-		getAsyncData
-	]);
-	return /* @__PURE__ */ jsx(DataTableContext.Provider, {
-		value,
+			expanded,
+			sorting,
+			globalFilter,
+			paginationState,
+			isPaginated,
+			tableId
+		]),
 		children
 	});
 };
 var useDataTable = () => {
-	const context = React$1.useContext(DataTableContext);
+	const context = React$1.use(DataTableContext);
 	if (!context) throw new Error("useDataTable can only be called from inside a DataTableProvider");
 	return context;
 };