@atom-learning/components 6.6.0-beta.0 → 6.6.0-beta.2

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","names":[],"sources":["../../../src/components/calendar/Calendar.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport { useDayzed } from 'dayzed'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Button } from '~/components/button/Button'\nimport { Icon } from '~/components/icon/Icon'\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\n\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>\n    refDateSelected?: React.RefObject<HTMLButtonElement>\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  ...remainingProps\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    ...remainingProps\n  })\n\n  if (!calendars.length) return null\n\n  return (\n    <div className={clsx('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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"}
+{"version":3,"file":"Calendar.js","names":[],"sources":["../../../src/components/calendar/Calendar.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport { useDayzed } from 'dayzed'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Button } from '~/components/button/Button'\nimport { Icon } from '~/components/icon/Icon'\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\n\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>\n    refDateSelected?: React.RefObject<HTMLButtonElement>\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  ...remainingProps\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    ...remainingProps\n  })\n\n  if (!calendars.length) return null\n\n  return (\n    <div className={clsx('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/calendar/Day.js

@@ -1,6 +1,6 @@
-import { styled as e } from "../../styled.js";
+import { styled } from "../../styled.js";
 //#region src/components/calendar/Day.tsx
-var t = e("button", {
+var Day = styled("button", {
 	base: [
 		"bg-transparent",
 		"border-none",
@@ -10,6 +10,7 @@ var t = e("button", {
 		"font-body",
 		"text-sm",
 		"size-8",
+		"p-0",
 		"transition-all",
 		"duration-75",
 		"hover:bg-grey-200",
@@ -33,6 +34,6 @@ var t = e("button", {
 	}
 });
 //#endregion
-export { t as Day };
+export { Day };
 
 //# sourceMappingURL=Day.js.map

package/dist/components/calendar/Day.js.map

@@ -1 +1 @@
-{"version":3,"file":"Day.js","names":[],"sources":["../../../src/components/calendar/Day.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const Day = styled('button', {\n  base: [\n    'bg-transparent',\n    'border-none',\n    'rounded-full',\n    'text-grey-900',\n    'cursor-pointer',\n    'font-body',\n    'text-sm',\n    'size-8',\n    'transition-all',\n    'duration-75',\n    'hover:bg-grey-200',\n    'active:bg-primary-800',\n    'active:text-white',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-800',\n    'focus:outline-solid',\n    'disabled:cursor-default',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isSelected: {\n      true: ['bg-primary-800', 'hover:bg-primary-800', 'text-white']\n    },\n    isToday: {\n      true: ['bg-grey-200']\n    },\n    isOutsideMonth: {\n      true: ['text-grey-600']\n    }\n  }\n})\n"],"mappings":";;AAEA,IAAa,IAAM,EAAO,UAAU;CAClC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY,EACV,MAAM;GAAC;GAAkB;GAAwB;GAAa,EAC/D;EACD,SAAS,EACP,MAAM,CAAC,cAAc,EACtB;EACD,gBAAgB,EACd,MAAM,CAAC,gBAAgB,EACxB;EACF;CACF,CAAC"}
+{"version":3,"file":"Day.js","names":[],"sources":["../../../src/components/calendar/Day.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const Day = styled('button', {\n  base: [\n    'bg-transparent',\n    'border-none',\n    'rounded-full',\n    'text-grey-900',\n    'cursor-pointer',\n    'font-body',\n    'text-sm',\n    'size-8',\n    'p-0',\n    'transition-all',\n    'duration-75',\n    'hover:bg-grey-200',\n    'active:bg-primary-800',\n    'active:text-white',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-800',\n    'focus:outline-solid',\n    'disabled:cursor-default',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isSelected: {\n      true: ['bg-primary-800', 'hover:bg-primary-800', 'text-white']\n    },\n    isToday: {\n      true: ['bg-grey-200']\n    },\n    isOutsideMonth: {\n      true: ['text-grey-600']\n    }\n  }\n})\n"],"mappings":";;AAEA,IAAa,MAAM,OAAO,UAAU;CAClC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY,EACV,MAAM;GAAC;GAAkB;GAAwB;GAAa,EAC/D;EACD,SAAS,EACP,MAAM,CAAC,cAAc,EACtB;EACD,gBAAgB,EACd,MAAM,CAAC,gBAAgB,EACxB;EACF;CACF,CAAC"}

package/dist/components/calendar/constants.js

@@ -1,5 +1,5 @@
 //#region src/components/calendar/constants.ts
-var e = [
+var monthNamesShort = [
 	"Jan",
 	"Feb",
 	"Mar",
@@ -12,7 +12,8 @@ var e = [
 	"Oct",
 	"Nov",
 	"Dec"
-], t = [
+];
+var weekdayNamesShort = [
 	"Sun",
 	"Mon",
 	"Tue",
@@ -20,7 +21,8 @@ var e = [
 	"Thu",
 	"Fri",
 	"Sat"
-], n = {
+];
+var DEFAULT_LABELS = {
 	open: "Open calendar",
 	next: "Next month",
 	previous: "Previous month",
@@ -28,6 +30,6 @@ var e = [
 	previousYear: "Previous year"
 };
 //#endregion
-export { n as DEFAULT_LABELS, e as monthNamesShort, t as weekdayNamesShort };
+export { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort };
 
 //# sourceMappingURL=constants.js.map

package/dist/components/calendar/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/calendar/constants.ts"],"sourcesContent":["export const monthNamesShort = [\n  'Jan',\n  'Feb',\n  'Mar',\n  'Apr',\n  'May',\n  'Jun',\n  'Jul',\n  'Aug',\n  'Sep',\n  'Oct',\n  'Nov',\n  'Dec'\n]\n\nexport const weekdayNamesShort = [\n  'Sun',\n  'Mon',\n  'Tue',\n  'Wed',\n  'Thu',\n  'Fri',\n  'Sat'\n]\n\nexport const DEFAULT_LABELS = {\n  open: 'Open calendar',\n  next: 'Next month',\n  previous: 'Previous month',\n  nextYear: 'Next year',\n  previousYear: 'Previous year'\n}\n"],"mappings":";AAAA,IAAa,IAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EAEY,IAAoB;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EAEY,IAAiB;CAC5B,MAAM;CACN,MAAM;CACN,UAAU;CACV,UAAU;CACV,cAAc;CACf"}
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/calendar/constants.ts"],"sourcesContent":["export const monthNamesShort = [\n  'Jan',\n  'Feb',\n  'Mar',\n  'Apr',\n  'May',\n  'Jun',\n  'Jul',\n  'Aug',\n  'Sep',\n  'Oct',\n  'Nov',\n  'Dec'\n]\n\nexport const weekdayNamesShort = [\n  'Sun',\n  'Mon',\n  'Tue',\n  'Wed',\n  'Thu',\n  'Fri',\n  'Sat'\n]\n\nexport const DEFAULT_LABELS = {\n  open: 'Open calendar',\n  next: 'Next month',\n  previous: 'Previous month',\n  nextYear: 'Next year',\n  previousYear: 'Previous year'\n}\n"],"mappings":";AAAA,IAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAa,oBAAoB;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAa,iBAAiB;CAC5B,MAAM;CACN,MAAM;CACN,UAAU;CACV,UAAU;CACV,cAAc;CACf"}

package/dist/components/carousel/Carousel.js

@@ -1,25 +1,31 @@
-import { CSSWrapper as e } from "../../utilities/css-wrapper/CSSWrapper.js";
-import { CarouselArrowNext as t, CarouselArrowPrevious as n } from "./CarouselArrows.js";
-import { CarouselPagination as r } from "./CarouselPagination.js";
-import { CarouselSlide as i } from "./CarouselSlide.js";
-import { CarouselSlider as a } from "./CarouselSlider.js";
-import * as o from "react";
-import { CarouselContext as s, CarouselProvider as c } from "pure-react-carousel";
+import { CSSWrapper } from "../../utilities/css-wrapper/CSSWrapper.js";
+import { CarouselArrowNext, CarouselArrowPrevious } from "./CarouselArrows.js";
+import { CarouselPagination } from "./CarouselPagination.js";
+import { CarouselSlide } from "./CarouselSlide.js";
+import { CarouselSlider } from "./CarouselSlider.js";
+import * as React$1 from "react";
+import { CarouselContext, CarouselProvider } from "pure-react-carousel";
 //#region src/components/carousel/Carousel.tsx
-var l = ({ children: t, className: n, slideHeight: r, slideWidth: i, numSlides: a, ...s }) => /* @__PURE__ */ o.createElement(e, { className: n }, /* @__PURE__ */ o.createElement(c, {
-	naturalSlideWidth: i,
-	naturalSlideHeight: r,
-	totalSlides: a,
-	...s
-}, t)), u = () => o.useContext(s), d = Object.assign(l, {
-	ArrowNext: t,
-	ArrowPrevious: n,
-	Pagination: r,
-	Slide: i,
-	Slider: a
+var CarouselComponent = ({ children, className, slideHeight, slideWidth, numSlides, ...props }) => /* @__PURE__ */ React$1.createElement(CSSWrapper, { className }, /* @__PURE__ */ React$1.createElement(CarouselProvider, {
+	naturalSlideWidth: slideWidth,
+	naturalSlideHeight: slideHeight,
+	totalSlides: numSlides,
+	...props
+}, children));
+/**
+* Documentation about the hook usage
+* https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext
+*/
+var useCarousel = () => React$1.useContext(CarouselContext);
+var Carousel = Object.assign(CarouselComponent, {
+	ArrowNext: CarouselArrowNext,
+	ArrowPrevious: CarouselArrowPrevious,
+	Pagination: CarouselPagination,
+	Slide: CarouselSlide,
+	Slider: CarouselSlider
 });
-l.displayName = "Carousel";
+CarouselComponent.displayName = "Carousel";
 //#endregion
-export { d as Carousel, u as useCarousel };
+export { Carousel, useCarousel };
 
 //# sourceMappingURL=Carousel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import { CarouselContext, CarouselProvider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nimport { CarouselArrowNext, CarouselArrowPrevious } from './CarouselArrows'\nimport { CarouselPagination } from './CarouselPagination'\nimport { CarouselSlide } from './CarouselSlide'\nimport { CarouselSlider } from './CarouselSlider'\n\ntype CarouselProps = {\n  slideHeight: number\n  slideWidth: number\n  numSlides: number\n}\n\nexport const CarouselComponent = ({\n  children,\n  className,\n  slideHeight,\n  slideWidth,\n  numSlides,\n  ...props\n}: CarouselProps &\n  Omit<\n    React.ComponentProps<typeof CarouselProvider>,\n    'naturalSlideWidth' | 'naturalSlideHeight' | 'totalSlides'\n  > &\n  React.ComponentProps<typeof CSSWrapper>) => (\n  <CSSWrapper className={className}>\n    <CarouselProvider\n      naturalSlideWidth={slideWidth}\n      naturalSlideHeight={slideHeight}\n      totalSlides={numSlides}\n      {...props}\n    >\n      {children}\n    </CarouselProvider>\n  </CSSWrapper>\n)\n\n/**\n * Documentation about the hook usage\n * https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext\n */\nexport const useCarousel = () => React.useContext(CarouselContext)\n\nexport const Carousel = Object.assign(CarouselComponent, {\n  ArrowNext: CarouselArrowNext,\n  ArrowPrevious: CarouselArrowPrevious,\n  Pagination: CarouselPagination,\n  Slide: CarouselSlide,\n  Slider: CarouselSlider\n})\n\nCarouselComponent.displayName = 'Carousel'\n"],"mappings":";;;;;;;;AAgBA,IAAa,KAAqB,EAChC,aACA,cACA,gBACA,eACA,cACA,GAAG,QAOH,kBAAA,cAAC,GAAD,EAAuB,cASV,EARX,kBAAA,cAAC,GAAD;CACE,mBAAmB;CACnB,oBAAoB;CACpB,aAAa;CACb,GAAI;CAGa,EADhB,EACgB,CACR,EAOF,UAAoB,EAAM,WAAW,EAAgB,EAErD,IAAW,OAAO,OAAO,GAAmB;CACvD,WAAW;CACX,eAAe;CACf,YAAY;CACZ,OAAO;CACP,QAAQ;CACT,CAAC;AAEF,EAAkB,cAAc"}
+{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import { CarouselContext, CarouselProvider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nimport { CarouselArrowNext, CarouselArrowPrevious } from './CarouselArrows'\nimport { CarouselPagination } from './CarouselPagination'\nimport { CarouselSlide } from './CarouselSlide'\nimport { CarouselSlider } from './CarouselSlider'\n\ntype CarouselProps = {\n  slideHeight: number\n  slideWidth: number\n  numSlides: number\n}\n\nexport const CarouselComponent = ({\n  children,\n  className,\n  slideHeight,\n  slideWidth,\n  numSlides,\n  ...props\n}: CarouselProps &\n  Omit<\n    React.ComponentProps<typeof CarouselProvider>,\n    'naturalSlideWidth' | 'naturalSlideHeight' | 'totalSlides'\n  > &\n  React.ComponentProps<typeof CSSWrapper>) => (\n  <CSSWrapper className={className}>\n    <CarouselProvider\n      naturalSlideWidth={slideWidth}\n      naturalSlideHeight={slideHeight}\n      totalSlides={numSlides}\n      {...props}\n    >\n      {children}\n    </CarouselProvider>\n  </CSSWrapper>\n)\n\n/**\n * Documentation about the hook usage\n * https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext\n */\nexport const useCarousel = () => React.useContext(CarouselContext)\n\nexport const Carousel = Object.assign(CarouselComponent, {\n  ArrowNext: CarouselArrowNext,\n  ArrowPrevious: CarouselArrowPrevious,\n  Pagination: CarouselPagination,\n  Slide: CarouselSlide,\n  Slider: CarouselSlider\n})\n\nCarouselComponent.displayName = 'Carousel'\n"],"mappings":";;;;;;;;AAgBA,IAAa,qBAAqB,EAChC,UACA,WACA,aACA,YACA,WACA,GAAG,YAOH,wBAAA,cAAC,YAAD,EAAuB,WASV,EARX,wBAAA,cAAC,kBAAD;CACE,mBAAmB;CACnB,oBAAoB;CACpB,aAAa;CACb,GAAI;CAGa,EADhB,SACgB,CACR;;;;;AAOf,IAAa,oBAAoB,QAAM,WAAW,gBAAgB;AAElE,IAAa,WAAW,OAAO,OAAO,mBAAmB;CACvD,WAAW;CACX,eAAe;CACf,YAAY;CACZ,OAAO;CACP,QAAQ;CACT,CAAC;AAEF,kBAAkB,cAAc"}

package/dist/components/carousel/CarouselArrows.js

@@ -1,10 +1,10 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import * as n from "react";
-import { ChevronLeft as r, ChevronRight as i } from "@atom-learning/icons";
-import { ButtonBack as a, ButtonNext as o } from "pure-react-carousel";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import * as React$1 from "react";
+import { ChevronLeft, ChevronRight } from "@atom-learning/icons";
+import { ButtonBack, ButtonNext } from "pure-react-carousel";
 //#region src/components/carousel/CarouselArrows.tsx
-var s = [
+var buttonStyles = [
 	"items-center",
 	"bg-[unset]",
 	"text-primary-800",
@@ -20,8 +20,12 @@ var s = [
 	"hover:text-primary-900",
 	"active:text-primary-1000",
 	"disabled:text-grey-200"
-], c = e(a, { base: s }), l = e(o, { base: s }), u = (e) => /* @__PURE__ */ n.createElement(c, e, /* @__PURE__ */ n.createElement(t, { is: r })), d = (e) => /* @__PURE__ */ n.createElement(l, e, /* @__PURE__ */ n.createElement(t, { is: i }));
+];
+var StyledButtonBack = styled(ButtonBack, { base: buttonStyles });
+var StyledButtonNext = styled(ButtonNext, { base: buttonStyles });
+var CarouselArrowPrevious = (props) => /* @__PURE__ */ React$1.createElement(StyledButtonBack, props, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronLeft }));
+var CarouselArrowNext = (props) => /* @__PURE__ */ React$1.createElement(StyledButtonNext, props, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronRight }));
 //#endregion
-export { d as CarouselArrowNext, u as CarouselArrowPrevious };
+export { CarouselArrowNext, CarouselArrowPrevious };
 
 //# sourceMappingURL=CarouselArrows.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CarouselArrows.js","names":[],"sources":["../../../src/components/carousel/CarouselArrows.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport {\n  ButtonBack as BaseButtonBack,\n  ButtonNext as BaseButtonNext\n} from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nconst buttonStyles = [\n  'items-center',\n  'bg-[unset]',\n  'text-primary-800',\n  'cursor-pointer',\n  'flex',\n  'justify-center',\n  'size-12',\n  'top-1/2',\n  '-translate-y-1/2',\n  'transition-colors',\n  'duration-150',\n  'ease-in-out',\n  'hover:text-primary-900',\n  'active:text-primary-1000',\n  'disabled:text-grey-200'\n]\n\nconst StyledButtonBack = styled(BaseButtonBack, {\n  base: buttonStyles\n})\n\nconst StyledButtonNext = styled(BaseButtonNext, {\n  base: buttonStyles\n})\n\nexport const CarouselArrowPrevious = (\n  props: Omit<React.ComponentProps<typeof StyledButtonBack>, 'children'>\n) => (\n  <StyledButtonBack {...props}>\n    <Icon is={ChevronLeft} />\n  </StyledButtonBack>\n)\nexport const CarouselArrowNext = (\n  props: Omit<React.ComponentProps<typeof StyledButtonNext>, 'children'>\n) => (\n  <StyledButtonNext {...props}>\n    <Icon is={ChevronRight} />\n  </StyledButtonNext>\n)\n"],"mappings":";;;;;;AAUA,IAAM,IAAe;CACnB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EAEK,IAAmB,EAAO,GAAgB,EAC9C,MAAM,GACP,CAAC,EAEI,IAAmB,EAAO,GAAgB,EAC9C,MAAM,GACP,CAAC,EAEW,KACX,MAEA,kBAAA,cAAC,GAAqB,GACpB,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAe,CAAA,CACR,EAER,KACX,MAEA,kBAAA,cAAC,GAAqB,GACpB,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAgB,CAAA,CACT"}
+{"version":3,"file":"CarouselArrows.js","names":[],"sources":["../../../src/components/carousel/CarouselArrows.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport {\n  ButtonBack as BaseButtonBack,\n  ButtonNext as BaseButtonNext\n} from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nconst buttonStyles = [\n  'items-center',\n  'bg-[unset]',\n  'text-primary-800',\n  'cursor-pointer',\n  'flex',\n  'justify-center',\n  'size-12',\n  'top-1/2',\n  '-translate-y-1/2',\n  'transition-colors',\n  'duration-150',\n  'ease-in-out',\n  'hover:text-primary-900',\n  'active:text-primary-1000',\n  'disabled:text-grey-200'\n]\n\nconst StyledButtonBack = styled(BaseButtonBack, {\n  base: buttonStyles\n})\n\nconst StyledButtonNext = styled(BaseButtonNext, {\n  base: buttonStyles\n})\n\nexport const CarouselArrowPrevious = (\n  props: Omit<React.ComponentProps<typeof StyledButtonBack>, 'children'>\n) => (\n  <StyledButtonBack {...props}>\n    <Icon is={ChevronLeft} />\n  </StyledButtonBack>\n)\nexport const CarouselArrowNext = (\n  props: Omit<React.ComponentProps<typeof StyledButtonNext>, 'children'>\n) => (\n  <StyledButtonNext {...props}>\n    <Icon is={ChevronRight} />\n  </StyledButtonNext>\n)\n"],"mappings":";;;;;;AAUA,IAAM,eAAe;CACnB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAM,mBAAmB,OAAO,YAAgB,EAC9C,MAAM,cACP,CAAC;AAEF,IAAM,mBAAmB,OAAO,YAAgB,EAC9C,MAAM,cACP,CAAC;AAEF,IAAa,yBACX,UAEA,wBAAA,cAAC,kBAAqB,OACpB,wBAAA,cAAC,MAAD,EAAM,IAAI,aAAe,CAAA,CACR;AAErB,IAAa,qBACX,UAEA,wBAAA,cAAC,kBAAqB,OACpB,wBAAA,cAAC,MAAD,EAAM,IAAI,cAAgB,CAAA,CACT"}

package/dist/components/carousel/CarouselPagination.js

@@ -1,7 +1,7 @@
-import { styled as e } from "../../styled.js";
-import { DotGroup as t } from "pure-react-carousel";
+import { styled } from "../../styled.js";
+import { DotGroup } from "pure-react-carousel";
 //#region src/components/carousel/CarouselPagination.tsx
-var n = e(t, { base: [
+var CarouselPagination = styled(DotGroup, { base: [
 	"justify-center",
 	"[&_button]:[[class*=selected]]:bg-primary-800",
 	"[&_button]:bg-grey-600",
@@ -18,6 +18,6 @@ var n = e(t, { base: [
 	"[&_button]:transition-all"
 ] });
 //#endregion
-export { n as CarouselPagination };
+export { CarouselPagination };
 
 //# sourceMappingURL=CarouselPagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import { DotGroup } from 'pure-react-carousel'\n\nimport { styled } from '~/styled'\n\nexport const CarouselPagination = styled(DotGroup, {\n  base: [\n    'justify-center',\n    '[&_button]:[[class*=selected]]:bg-primary-800',\n    '[&_button]:bg-grey-600',\n    '[&_button]:border-none',\n    '[&_button]:cursor-pointer',\n    '[&_button]:duration-100',\n    '[&_button]:ease-in',\n    '[&_button]:focus:bg-primary-900',\n    '[&_button]:hover:bg-primary-900',\n    '[&_button]:mx-1',\n    '[&_button]:p-1',\n    '[&_button]:rounded-[50%]',\n    '[&_button]:size-3',\n    '[&_button]:transition-all'\n  ]\n})\n"],"mappings":";;;AAIA,IAAa,IAAqB,EAAO,GAAU,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
+{"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import { DotGroup } from 'pure-react-carousel'\n\nimport { styled } from '~/styled'\n\nexport const CarouselPagination = styled(DotGroup, {\n  base: [\n    'justify-center',\n    '[&_button]:[[class*=selected]]:bg-primary-800',\n    '[&_button]:bg-grey-600',\n    '[&_button]:border-none',\n    '[&_button]:cursor-pointer',\n    '[&_button]:duration-100',\n    '[&_button]:ease-in',\n    '[&_button]:focus:bg-primary-900',\n    '[&_button]:hover:bg-primary-900',\n    '[&_button]:mx-1',\n    '[&_button]:p-1',\n    '[&_button]:rounded-[50%]',\n    '[&_button]:size-3',\n    '[&_button]:transition-all'\n  ]\n})\n"],"mappings":";;;AAIA,IAAa,qBAAqB,OAAO,UAAU,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}

package/dist/components/carousel/CarouselSlide.js

@@ -1,11 +1,11 @@
-import * as e from "react";
-import { Slide as t } from "pure-react-carousel";
+import * as React$1 from "react";
+import { Slide } from "pure-react-carousel";
 //#region src/components/carousel/CarouselSlide.tsx
-var n = ({ children: n, ...r }) => /* @__PURE__ */ e.createElement(t, {
-	...r,
+var CarouselSlide = ({ children, ...remainingProps }) => /* @__PURE__ */ React$1.createElement(Slide, {
+	...remainingProps,
 	tag: "div"
-}, /* @__PURE__ */ e.createElement("div", { className: "px-3" }, n));
+}, /* @__PURE__ */ React$1.createElement("div", { className: "px-3" }, children));
 //#endregion
-export { n as CarouselSlide };
+export { CarouselSlide };
 
 //# sourceMappingURL=CarouselSlide.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlide.js","names":[],"sources":["../../../src/components/carousel/CarouselSlide.tsx"],"sourcesContent":["import { Slide as BaseSlide } from 'pure-react-carousel'\nimport * as React from 'react'\n\nexport const CarouselSlide = ({\n  children,\n  ...remainingProps\n}: React.ComponentProps<typeof BaseSlide> & {\n  className?: string\n  index: number\n}) => (\n  <BaseSlide {...remainingProps} tag=\"div\">\n    {/* padding to create the gap between slides */}\n    <div className=\"px-3\">{children}</div>\n  </BaseSlide>\n)\n"],"mappings":";;;AAGA,IAAa,KAAiB,EAC5B,aACA,GAAG,QAKH,kBAAA,cAAC,GAAD;CAAW,GAAI;CAAgB,KAAI;CAGvB,EADV,kBAAA,cAAC,OAAD,EAAK,WAAU,QAAuB,EAAf,EAAe,CAC5B"}
+{"version":3,"file":"CarouselSlide.js","names":[],"sources":["../../../src/components/carousel/CarouselSlide.tsx"],"sourcesContent":["import { Slide as BaseSlide } from 'pure-react-carousel'\nimport * as React from 'react'\n\nexport const CarouselSlide = ({\n  children,\n  ...remainingProps\n}: React.ComponentProps<typeof BaseSlide> & {\n  className?: string\n  index: number\n}) => (\n  <BaseSlide {...remainingProps} tag=\"div\">\n    {/* padding to create the gap between slides */}\n    <div className=\"px-3\">{children}</div>\n  </BaseSlide>\n)\n"],"mappings":";;;AAGA,IAAa,iBAAiB,EAC5B,UACA,GAAG,qBAKH,wBAAA,cAAC,OAAD;CAAW,GAAI;CAAgB,KAAI;CAGvB,EADV,wBAAA,cAAC,OAAD,EAAK,WAAU,QAAuB,EAAf,SAAe,CAC5B"}

package/dist/components/carousel/CarouselSlider.js

@@ -1,12 +1,12 @@
-import e from "clsx";
-import * as t from "react";
-import { Slider as n } from "pure-react-carousel";
+import clsx from "clsx";
+import * as React$1 from "react";
+import { Slider } from "pure-react-carousel";
 //#region src/components/carousel/CarouselSlider.tsx
-var r = ({ children: r, className: i, overflow: a, ...o }) => /* @__PURE__ */ t.createElement(n, {
-	...o,
-	className: e(String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\_]]:float-left **:[[class*=slide\_]]:pb-0! **:[[class*=sliderTray\_]]:transition-transform **:[[class*=sliderTray\_]]:duration-500 **:[[class*=sliderTray\_]]:ease-[cubic-bezier(.645,.045,.355,1)]`, a && "overflow-visible", i)
-}, r);
+var CarouselSlider = ({ children, className, overflow, ...rest }) => /* @__PURE__ */ React$1.createElement(Slider, {
+	...rest,
+	className: clsx(String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\_]]:float-left **:[[class*=slide\_]]:pb-0! **:[[class*=sliderTray\_]]:transition-transform **:[[class*=sliderTray\_]]:duration-500 **:[[class*=sliderTray\_]]:ease-[cubic-bezier(.645,.045,.355,1)]`, overflow && "overflow-visible", className)
+}, children);
 //#endregion
-export { r as CarouselSlider };
+export { CarouselSlider };
 
 //# sourceMappingURL=CarouselSlider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlider.js","names":[],"sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { Slider as BaseSlider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nexport const CarouselSlider = ({\n  children,\n  className,\n  overflow,\n  ...rest\n}: React.PropsWithChildren<\n  typeof BaseSlider & {\n    tabIndex?: number\n    className?: string\n    overflow?: boolean\n  }\n>) => (\n  <BaseSlider\n    {...rest}\n    className={clsx(\n      String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\\_]]:float-left **:[[class*=slide\\_]]:pb-0! **:[[class*=sliderTray\\_]]:transition-transform **:[[class*=sliderTray\\_]]:duration-500 **:[[class*=sliderTray\\_]]:ease-[cubic-bezier(.645,.045,.355,1)]`,\n      overflow && 'overflow-visible',\n      className\n    )}\n  >\n    {children}\n  </BaseSlider>\n)\n"],"mappings":";;;;AAIA,IAAa,KAAkB,EAC7B,aACA,cACA,aACA,GAAG,QAQH,kBAAA,cAAC,GAAD;CACE,GAAI;CACJ,WAAW,EACT,OAAO,GAAG,qVACV,KAAY,oBACZ,EACD;CAGU,EADV,EACU"}
+{"version":3,"file":"CarouselSlider.js","names":[],"sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { Slider as BaseSlider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nexport const CarouselSlider = ({\n  children,\n  className,\n  overflow,\n  ...rest\n}: React.PropsWithChildren<\n  typeof BaseSlider & {\n    tabIndex?: number\n    className?: string\n    overflow?: boolean\n  }\n>) => (\n  <BaseSlider\n    {...rest}\n    className={clsx(\n      String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\\_]]:float-left **:[[class*=slide\\_]]:pb-0! **:[[class*=sliderTray\\_]]:transition-transform **:[[class*=sliderTray\\_]]:duration-500 **:[[class*=sliderTray\\_]]:ease-[cubic-bezier(.645,.045,.355,1)]`,\n      overflow && 'overflow-visible',\n      className\n    )}\n  >\n    {children}\n  </BaseSlider>\n)\n"],"mappings":";;;;AAIA,IAAa,kBAAkB,EAC7B,UACA,WACA,UACA,GAAG,WAQH,wBAAA,cAAC,QAAD;CACE,GAAI;CACJ,WAAW,KACT,OAAO,GAAG,qVACV,YAAY,oBACZ,UACD;CAGU,EADV,SACU"}

package/dist/components/checkbox/Checkbox.js

@@ -1,12 +1,54 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { overrideStyledVariantValue as n } from "../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";
-import * as r from "react";
-import { Minus as i, Ok as a } from "@atom-learning/icons";
-import * as o from "@radix-ui/react-checkbox";
+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 { Minus, Ok } from "@atom-learning/icons";
+import * as RadixCheckbox from "@radix-ui/react-checkbox";
 //#region src/components/checkbox/Checkbox.tsx
-var s = e(o.Root, {
-	base: /* @__PURE__ */ "appearance-none.relative.bg-transparent.border.border-grey-800.rounded-[3px].text-white.bg-white.cursor-pointer.size-4.flex.items-center.justify-center.transition-all.duration-50.ease-out.shrink-0.not-disabled:before:-inset-2.not-disabled:before:-z-1.not-disabled:before:absolute.not-disabled:before:bg-primary-300.not-disabled:before:content-[''].not-disabled:before:duration-125.not-disabled:before:ease-in-out.not-disabled:before:opacity-0.not-disabled:before:rounded-[50%].not-disabled:before:scale-0.not-disabled:before:transition-[opacity,scale].not-disabled:hover:before:opacity-100.not-disabled:hover:before:scale-100.data-[state=checked]:bg-primary-800.data-[state=checked]:border-primary-800.data-[state=indeterminate]:bg-primary-800.data-[state=indeterminate]:border-primary-800.focus:-outline-offset-1.focus:outline-2.focus:outline-primary-800.focus:outline-solid.disabled:cursor-not-allowed.disabled:opacity-30".split("."),
+var StyledCheckbox = styled(RadixCheckbox.Root, {
+	base: [
+		"appearance-none",
+		"relative",
+		"bg-transparent",
+		"border",
+		"border-grey-800",
+		"rounded-[3px]",
+		"text-white",
+		"bg-white",
+		"cursor-pointer",
+		"size-4",
+		"p-0",
+		"flex",
+		"items-center",
+		"justify-center",
+		"transition-all",
+		"duration-50",
+		"ease-out",
+		"shrink-0",
+		"not-disabled:before:-inset-2",
+		"not-disabled:before:-z-1",
+		"not-disabled:before:absolute",
+		"not-disabled:before:bg-primary-300",
+		"not-disabled:before:content-['']",
+		"not-disabled:before:duration-125",
+		"not-disabled:before:ease-in-out",
+		"not-disabled:before:opacity-0",
+		"not-disabled:before:rounded-[50%]",
+		"not-disabled:before:scale-0",
+		"not-disabled:before:transition-[opacity,scale]",
+		"not-disabled:hover:before:opacity-100",
+		"not-disabled:hover:before:scale-100",
+		"data-[state=checked]:bg-primary-800",
+		"data-[state=checked]:border-primary-800",
+		"data-[state=indeterminate]:bg-primary-800",
+		"data-[state=indeterminate]:border-primary-800",
+		"focus:-outline-offset-1",
+		"focus:outline-2",
+		"focus:outline-primary-800",
+		"focus:outline-solid",
+		"disabled:cursor-not-allowed",
+		"disabled:opacity-30"
+	],
 	variants: {
 		state: { error: ["border-danger"] },
 		size: {
@@ -14,24 +56,26 @@ var s = e(o.Root, {
 			lg: ["mt-px", "size-6"]
 		}
 	}
-}), c = {
+});
+var toIconSize = {
 	md: "sm",
 	lg: "sm"
-}, l = r.forwardRef(({ size: e = "md", checked: l, ...u }, d) => {
-	let f = r.useMemo(() => n(e, (e) => c[e]), [e]);
-	return /* @__PURE__ */ r.createElement("div", { className: "relative z-1" }, /* @__PURE__ */ r.createElement(s, {
-		ref: d,
-		checked: l,
-		size: e,
-		...u
-	}, /* @__PURE__ */ r.createElement("div", { className: "absolute -inset-3 opacity-50" }), /* @__PURE__ */ r.createElement(o.Indicator, { asChild: !0 }, /* @__PURE__ */ r.createElement(t, {
-		is: l === "indeterminate" ? i : a,
-		size: f,
+};
+var Checkbox = React$1.forwardRef(({ size = "md", checked, ...rest }, ref) => {
+	const iconSize = React$1.useMemo(() => overrideStyledVariantValue(size, (s) => toIconSize[s]), [size]);
+	return /* @__PURE__ */ React$1.createElement("div", { className: "relative z-1" }, /* @__PURE__ */ React$1.createElement(StyledCheckbox, {
+		ref,
+		checked,
+		size,
+		...rest
+	}, /* @__PURE__ */ React$1.createElement("div", { className: "absolute -inset-3 opacity-50" }), /* @__PURE__ */ React$1.createElement(RadixCheckbox.Indicator, { asChild: true }, /* @__PURE__ */ React$1.createElement(Icon, {
+		is: checked === "indeterminate" ? Minus : Ok,
+		size: iconSize,
 		className: "stroke-3"
 	}))));
 });
-l.displayName = "Checkbox";
+Checkbox.displayName = "Checkbox";
 //#endregion
-export { l as Checkbox };
+export { Checkbox };
 
 //# sourceMappingURL=Checkbox.js.map

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

@@ -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'\n\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    '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 = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledCheckbox>\n>(({ size = 'md', checked, ...rest }, ref) => {\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\nCheckbox.displayName = 'Checkbox'\n"],"mappings":";;;;;;;AASA,IAAM,IAAiB,EAAO,EAAc,MAAM;CAChD,MAAM,w7BAyCL;CACD,UAAU;EACR,OAAO,EACL,OAAO,CAAC,gBAAgB,EACzB;EACD,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS,SAAS;GACxB;EACF;CACF,CAAC,EAEI,IAAa;CACjB,IAAI;CACJ,IAAI;CACL,EAEY,IAAW,EAAM,YAG3B,EAAE,UAAO,MAAM,YAAS,GAAG,KAAQ,MAAQ;CAC5C,IAAM,IAAW,EAAM,cACf,EAA2B,IAAO,MAAM,EAAW,GAAG,EAC5D,CAAC,EAAK,CACP;AAED,QACE,kBAAA,cAAC,OAAD,EAAK,WAAU,gBAWT,EAVJ,kBAAA,cAAC,GAAD;EAAqB;EAAc;EAAe;EAAM,GAAI;EAS3C,EARf,kBAAA,cAAC,OAAD,EAAK,WAAU,gCAAiC,CAAA,EAChD,kBAAA,cAAC,EAAc,WAAf,EAAyB,SAAA,IAMC,EALxB,kBAAA,cAAC,GAAD;EACE,IAAI,MAAY,kBAAkB,IAAQ;EAC1C,MAAM;EACN,WAAU;EACV,CAAA,CACsB,CACX,CACb;EAER;AAEF,EAAS,cAAc"}
+{"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'\n\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 = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledCheckbox>\n>(({ size = 'md', checked, ...rest }, ref) => {\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\nCheckbox.displayName = 'Checkbox'\n"],"mappings":";;;;;;;AASA,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;EACD;CACD,UAAU;EACR,OAAO,EACL,OAAO,CAAC,gBAAgB,EACzB;EACD,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS,SAAS;GACxB;EACF;CACF,CAAC;AAEF,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACL;AAED,IAAa,WAAW,QAAM,YAG3B,EAAE,OAAO,MAAM,SAAS,GAAG,QAAQ,QAAQ;CAC5C,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,GAAG,EAC5D,CAAC,KAAK,CACP;AAED,QACE,wBAAA,cAAC,OAAD,EAAK,WAAU,gBAWT,EAVJ,wBAAA,cAAC,gBAAD;EAAqB;EAAc;EAAe;EAAM,GAAI;EAS3C,EARf,wBAAA,cAAC,OAAD,EAAK,WAAU,gCAAiC,CAAA,EAChD,wBAAA,cAAC,cAAc,WAAf,EAAyB,SAAA,MAMC,EALxB,wBAAA,cAAC,MAAD;EACE,IAAI,YAAY,kBAAkB,QAAQ;EAC1C,MAAM;EACN,WAAU;EACV,CAAA,CACsB,CACX,CACb;EAER;AAEF,SAAS,cAAc"}

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

@@ -1,40 +1,47 @@
-import { Checkbox as e } from "../checkbox/Checkbox.js";
-import { InlineFieldWrapper as t } from "../field-wrapper/InlineFieldWrapper.js";
-import { useFieldError as n } from "../form/useFieldError.js";
-import * as r from "react";
-import { useController as i, useFormContext as a } from "react-hook-form";
+import { Checkbox } from "../checkbox/Checkbox.js";
+import { InlineFieldWrapper } from "../field-wrapper/InlineFieldWrapper.js";
+import { useFieldError } from "../form/useFieldError.js";
+import * as React$1 from "react";
+import { useController, useFormContext } from "react-hook-form";
 //#region src/components/checkbox-field/CheckboxField.tsx
-var o = /* @__PURE__ */ function(e) {
-	return e.ON = "on", e.OFF = "off", e;
-}(o || {}), s = ({ className: s, label: c, name: l, validation: u, description: d, defaultChecked: f = !1, checked: p, onCheckedChange: m, ...h }) => {
-	let { control: g } = a(), { error: _ } = n(l), { field: { ref: v, onChange: y, value: b, name: x } } = i({
-		name: l,
-		control: g,
-		rules: u,
-		defaultValue: f
+var CheckboxValue = /* @__PURE__ */ function(CheckboxValue) {
+	CheckboxValue["ON"] = "on";
+	CheckboxValue["OFF"] = "off";
+	return CheckboxValue;
+}(CheckboxValue || {});
+var CheckboxField = ({ className, label, name, validation, description, defaultChecked = false, checked, onCheckedChange, ...remainingProps }) => {
+	const { control } = useFormContext();
+	const { error } = useFieldError(name);
+	const { field: { ref, onChange, value: innerChecked, name: innerName } } = useController({
+		name,
+		control,
+		rules: validation,
+		defaultValue: defaultChecked
 	});
-	return r.useEffect(() => {
-		p !== void 0 && y(p);
-	}, [p]), /* @__PURE__ */ r.createElement(t, {
-		className: s,
-		description: d,
-		error: _,
-		label: c,
-		required: !!u?.required
-	}, /* @__PURE__ */ r.createElement(e, {
-		ref: v,
-		name: x,
-		...h,
-		onCheckedChange: (e) => {
-			y(e), m?.(e);
+	React$1.useEffect(() => {
+		if (typeof checked !== "undefined") onChange(checked);
+	}, [checked]);
+	return /* @__PURE__ */ React$1.createElement(InlineFieldWrapper, {
+		className,
+		description,
+		error,
+		label,
+		required: Boolean(validation?.required)
+	}, /* @__PURE__ */ React$1.createElement(Checkbox, {
+		ref,
+		name: innerName,
+		...remainingProps,
+		onCheckedChange: (newChecked) => {
+			onChange(newChecked);
+			onCheckedChange?.(newChecked);
 		},
-		value: b ? o.ON : o.OFF,
-		checked: b,
-		..._ && { state: "error" }
+		value: innerChecked ? CheckboxValue.ON : CheckboxValue.OFF,
+		checked: innerChecked,
+		...error && { state: "error" }
 	}));
 };
-s.displayName = "CheckboxField";
+CheckboxField.displayName = "CheckboxField";
 //#endregion
-export { s as CheckboxField };
+export { CheckboxField };
 
 //# sourceMappingURL=CheckboxField.js.map

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

@@ -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 '~/components/checkbox/Checkbox'\nimport { FieldElementWrapperProps } from '~/components/field-wrapper/FieldWrapper'\nimport { InlineFieldWrapper } from '~/components/field-wrapper/InlineFieldWrapper'\nimport { useFieldError } from '~/components/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  ...remainingProps\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        {...remainingProps}\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":";;;;;;AAQA,IAAK,IAAL,yBAAA,GAAA;QACE,EAAA,KAAA,MACA,EAAA,MAAA;EAFG,KAAA,EAAA,CAGJ,EAEY,KAAiB,EAC5B,cACA,UACA,SACA,eACA,gBACA,oBAAiB,IACjB,YACA,oBACA,GAAG,QACmE;CACtE,IAAM,EAAE,eAAY,GAAgB,EAC9B,EAAE,aAAU,EAAc,EAAK,EAC/B,EACJ,OAAO,EAAE,QAAK,aAAU,OAAO,GAAc,MAAM,QACjD,EAAc;EAChB;EACA;EACA,OAAO;EACP,cAAc;EACf,CAAC;AAOF,QALA,EAAM,gBAAgB;AAEpB,EAAW,MAAY,UAAa,EAAS,EAAQ;IACpD,CAAC,EAAQ,CAAC,EAGX,kBAAA,cAAC,GAAD;EACa;EACE;EACN;EACA;EACP,UAAU,EAAQ,GAAY;EAcX,EAZnB,kBAAA,cAAC,GAAD;EACO;EACL,MAAM;EACN,GAAI;EACJ,kBAAkB,MAAe;AAE/B,GADA,EAAS,EAAW,EACpB,IAAkB,EAAW;;EAE/B,OAAO,IAAe,EAAc,KAAK,EAAc;EACvD,SAAS;EACT,GAAK,KAAS,EAAE,OAAO,SAAS;EAChC,CAAA,CACiB;;AAIzB,EAAc,cAAc"}
+{"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 '~/components/checkbox/Checkbox'\nimport { FieldElementWrapperProps } from '~/components/field-wrapper/FieldWrapper'\nimport { InlineFieldWrapper } from '~/components/field-wrapper/InlineFieldWrapper'\nimport { useFieldError } from '~/components/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  ...remainingProps\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        {...remainingProps}\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":";;;;;;AAQA,IAAK,gBAAL,yBAAA,eAAA;AACE,eAAA,QAAA;AACA,eAAA,SAAA;;EAFG,iBAAA,EAAA,CAGJ;AAED,IAAa,iBAAiB,EAC5B,WACA,OACA,MACA,YACA,aACA,iBAAiB,OACjB,SACA,iBACA,GAAG,qBACmE;CACtE,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,cAAc,MAAM,gBACjD,cAAc;EAChB;EACA;EACA,OAAO;EACP,cAAc;EACf,CAAC;AAEF,SAAM,gBAAgB;AAEpB,MAAI,OAAO,YAAY,YAAa,UAAS,QAAQ;IACpD,CAAC,QAAQ,CAAC;AAEb,QACE,wBAAA,cAAC,oBAAD;EACa;EACE;EACN;EACA;EACP,UAAU,QAAQ,YAAY,SAAS;EAcpB,EAZnB,wBAAA,cAAC,UAAD;EACO;EACL,MAAM;EACN,GAAI;EACJ,kBAAkB,eAAe;AAC/B,YAAS,WAAW;AACpB,qBAAkB,WAAW;;EAE/B,OAAO,eAAe,cAAc,KAAK,cAAc;EACvD,SAAS;EACT,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,CAAA,CACiB;;AAIzB,cAAc,cAAc"}