@atom-learning/components 6.10.0 → 6.13.1

package/dist/components/combobox/Combobox.d.ts

@@ -12,8 +12,10 @@ export declare const Combobox: import("@reach/utils/polymorphic").ForwardRefComp
         ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
     }, "as" | keyof import("@reach/combobox").ComboboxInputProps> & import("@reach/combobox").ComboboxInputProps & {
         as?: "input" | undefined;
-    }, "size" | "state"> & {
+    }, "appearance" | "size" | "theme" | "state"> & {
         size?: "sm" | "md" | "lg" | undefined;
+        appearance?: "standard" | "modern" | undefined;
+        theme?: "grey" | "white" | undefined;
         state?: "error" | undefined;
     } & {
         as?: import("react").ElementType;

package/dist/components/combobox/ComboboxInput.d.ts

@@ -3,8 +3,10 @@ export declare const StyledComboboxInput: React.ForwardRefExoticComponent<Omit<O
     ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
 }, "as" | keyof import("@reach/combobox").ComboboxInputProps> & import("@reach/combobox").ComboboxInputProps & {
     as?: "input" | undefined;
-}, "size" | "state"> & {
+}, "appearance" | "size" | "theme" | "state"> & {
     size?: "sm" | "md" | "lg" | undefined;
+    appearance?: "standard" | "modern" | undefined;
+    theme?: "grey" | "white" | undefined;
     state?: "error" | undefined;
 } & {
     as?: React.ElementType;
@@ -14,8 +16,10 @@ export declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<Omit<Om
     ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
 }, "as" | keyof import("@reach/combobox").ComboboxInputProps> & import("@reach/combobox").ComboboxInputProps & {
     as?: "input" | undefined;
-}, "size" | "state"> & {
+}, "appearance" | "size" | "theme" | "state"> & {
     size?: "sm" | "md" | "lg" | undefined;
+    appearance?: "standard" | "modern" | undefined;
+    theme?: "grey" | "white" | undefined;
     state?: "error" | undefined;
 } & {
     as?: React.ElementType;

package/dist/components/combobox/ComboboxInput.js

@@ -4,15 +4,12 @@ import { ComboboxInput } from "@reach/combobox";
 //#region src/components/combobox/ComboboxInput.tsx
 var StyledComboboxInput = styled(ComboboxInput, {
 	base: [
-		"bg-white",
 		"bg-(image:--bg-chevron)",
 		"bg-position-[right_--spacing(3)_top_50%,0_0]",
 		"[background-repeat:no-repeat,repeat-x]",
 		"bg-size-[--spacing(5)_auto,100%]",
 		"shadow-none",
 		"appearance-none",
-		"border",
-		"border-grey-700",
 		"rounded-md",
 		"box-border",
 		"text-grey-1000",
@@ -28,8 +25,6 @@ var StyledComboboxInput = styled(ComboboxInput, {
 		"w-full",
 		"placeholder:opacity-100",
 		"placeholder:text-grey-700",
-		"focus-within:border-primary-800",
-		"focus-within:outline-none",
 		"disabled:bg-grey-200",
 		"disabled:cursor-not-allowed",
 		"disabled:text-grey-800"
@@ -52,11 +47,56 @@ var StyledComboboxInput = styled(ComboboxInput, {
 				"leading-loose"
 			]
 		},
-		state: { error: ["border", "border-danger"] }
-	}
+		appearance: {
+			standard: [
+				"bg-white",
+				"border",
+				"border-grey-700",
+				"focus-within:border-primary-800",
+				"focus-within:outline-none"
+			],
+			modern: [
+				"bg-grey-100",
+				"border-none",
+				"focus-within:outline-2",
+				"focus-within:outline-blue-800",
+				"focus-within:outline-offset-1",
+				"focus-within:outline-solid",
+				"focus-within:z-1"
+			]
+		},
+		theme: {
+			white: [],
+			grey: []
+		},
+		state: { error: [] }
+	},
+	compoundVariants: [
+		{
+			state: "error",
+			appearance: "standard",
+			class: ["border", "border-danger"]
+		},
+		{
+			state: "error",
+			appearance: "modern",
+			class: ["bg-danger-light", "focus-within:outline-danger"]
+		},
+		{
+			appearance: "modern",
+			theme: "white",
+			class: ["bg-white"]
+		},
+		{
+			appearance: "modern",
+			theme: "grey",
+			class: ["bg-grey-100"]
+		}
+	]
 });
-var ComboboxInput$1 = React$1.forwardRef(({ size = "md", ...rest }, ref) => /* @__PURE__ */ React$1.createElement(StyledComboboxInput, {
+var ComboboxInput$1 = React$1.forwardRef(({ size = "md", appearance = "standard", ...rest }, ref) => /* @__PURE__ */ React$1.createElement(StyledComboboxInput, {
 	size,
+	appearance,
 	...rest,
 	ref
 }));

package/dist/components/combobox/ComboboxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n  base: [\n    'bg-white',\n    'bg-(image:--bg-chevron)',\n    'bg-position-[right_--spacing(3)_top_50%,0_0]',\n    '[background-repeat:no-repeat,repeat-x]',\n    'bg-size-[--spacing(5)_auto,100%]',\n    'shadow-none',\n    'appearance-none',\n    'border',\n    'border-grey-700',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'cursor-text',\n    'block',\n    'font-body',\n    'h-10',\n    'pl-3',\n    'pr-10',\n    'transition-all',\n    'duration-100',\n    'ease-out',\n    'w-full',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700',\n    'focus-within:border-primary-800',\n    'focus-within:outline-none',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800'\n  ],\n\n  variants: {\n    size: {\n      sm: ['h-8', 'text-sm', 'leading-[1.7]'],\n      md: ['h-10', 'text-md', 'leading-loose'],\n      lg: ['h-12', 'text-md', 'leading-loose']\n    },\n    state: {\n      error: ['border', 'border-danger']\n    }\n  }\n})\n\nexport type ComboboxInputProps = React.ComponentProps<\n  typeof StyledComboboxInput\n>\n\nexport const ComboboxInput = React.forwardRef<\n  HTMLInputElement,\n  ComboboxInputProps\n>(({ size = 'md', ...rest }, ref) => (\n  <StyledComboboxInput\n    size={size as React.ComponentProps<typeof StyledComboboxInput>['size']}\n    {...rest}\n    ref={ref}\n  />\n))\n"],"mappings":";;;;AAKA,IAAa,sBAAsB,OAAO,eAAmB;CAC3D,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;EACD;CAED,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAgB;GACvC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACxC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACzC;EACD,OAAO,EACL,OAAO,CAAC,UAAU,gBAAgB,EACnC;EACF;CACF,CAAC;AAMF,IAAa,kBAAgB,QAAM,YAGhC,EAAE,OAAO,MAAM,GAAG,QAAQ,QAC3B,wBAAA,cAAC,qBAAD;CACQ;CACN,GAAI;CACC;CACL,CAAA,CACF"}
+{"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n  base: [\n    'bg-(image:--bg-chevron)',\n    'bg-position-[right_--spacing(3)_top_50%,0_0]',\n    '[background-repeat:no-repeat,repeat-x]',\n    'bg-size-[--spacing(5)_auto,100%]',\n    'shadow-none',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'cursor-text',\n    'block',\n    'font-body',\n    'h-10',\n    'pl-3',\n    'pr-10',\n    'transition-all',\n    'duration-100',\n    'ease-out',\n    'w-full',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800'\n  ],\n\n  variants: {\n    size: {\n      sm: ['h-8', 'text-sm', 'leading-[1.7]'],\n      md: ['h-10', 'text-md', 'leading-loose'],\n      lg: ['h-12', 'text-md', 'leading-loose']\n    },\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-700',\n        'focus-within:border-primary-800',\n        'focus-within:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1'\n      ]\n    },\n    theme: {\n      white: [],\n      grey: []\n    },\n    state: {\n      error: []\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border', 'border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    },\n    {\n      appearance: 'modern',\n      theme: 'white',\n      class: ['bg-white']\n    },\n    {\n      appearance: 'modern',\n      theme: 'grey',\n      class: ['bg-grey-100']\n    }\n  ]\n})\n\nexport type ComboboxInputProps = React.ComponentProps<\n  typeof StyledComboboxInput\n>\n\nexport const ComboboxInput = React.forwardRef<\n  HTMLInputElement,\n  ComboboxInputProps\n>(({ size = 'md', appearance = 'standard', ...rest }, ref) => (\n  <StyledComboboxInput\n    size={size}\n    appearance={appearance}\n    {...rest}\n    ref={ref}\n  />\n))\n"],"mappings":";;;;AAKA,IAAa,sBAAsB,OAAO,eAAmB;CAC3D,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;EACD;CAED,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAgB;GACvC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACxC,IAAI;IAAC;IAAQ;IAAW;IAAgB;GACzC;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO;GACL,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACF;CACD,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,UAAU,gBAAgB;GACnC;EACD;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,8BAA8B;GAC1D;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,WAAW;GACpB;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACF;CACF,CAAC;AAMF,IAAa,kBAAgB,QAAM,YAGhC,EAAE,OAAO,MAAM,aAAa,YAAY,GAAG,QAAQ,QACpD,wBAAA,cAAC,qBAAD;CACQ;CACM;CACZ,GAAI;CACC;CACL,CAAA,CACF"}

package/dist/components/date-field/DateField.d.ts

@@ -3,7 +3,7 @@ import { DateInputProps } from '../../components/date-input/DateInput';
 import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
 type DateFieldProps = DateInputProps & FieldElementWrapperProps;
 export declare const DateField: {
-    ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }: DateFieldProps): React.JSX.Element;
+    ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }: DateFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/date-field/DateField.js

@@ -1,13 +1,17 @@
 import { useFieldError } from "../form/useFieldError.js";
 import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
+import { useFormCustomContext } from "../form/useFormCustomContext.js";
 import { DateInput } from "../date-input/DateInput.js";
 import * as React$1 from "react";
 import { useFormContext } from "react-hook-form";
 //#region src/components/date-field/DateField.tsx
-var DateField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }) => {
+var DateField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
 	const { register, trigger } = useFormContext();
+	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
+	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
 		className,
 		description,
@@ -17,12 +21,13 @@ var DateField = ({ className, hideLabel, label, name, validation, prompt, descri
 		label,
 		prompt,
 		required: Boolean(validation?.required),
-		appearance
+		appearance: formAppearance
 	}, /* @__PURE__ */ React$1.createElement(DateInput, {
 		id: name,
 		name,
 		ref,
-		appearance,
+		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps,
 		revalidate: trigger

package/dist/components/date-field/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","names":[],"sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input/DateInput'\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: DateFieldProps) => {\n  const { register, trigger } = useFormContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={appearance}\n    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={appearance}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n        revalidate={trigger}\n      />\n    </FieldWrapper>\n  )\n}\n\nDateField.displayName = 'DateField'\n"],"mappings":";;;;;;AAYA,IAAa,aAAa,EACxB,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,GAAG,qBACiB;CACpB,MAAM,EAAE,UAAU,YAAY,gBAAgB;CAC9C,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;AAEhD,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EAC3B;EAWC,EATb,wBAAA,cAAC,WAAD;EACE,IAAI;EACE;EACD;EACO;EACZ,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,YAAY;EACZ,CAAA,CACW;;AAInB,UAAU,cAAc"}
+{"version":3,"file":"DateField.js","names":[],"sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input/DateInput'\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...remainingProps\n}: DateFieldProps) => {\n  const { register, trigger } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n        revalidate={trigger}\n      />\n    </FieldWrapper>\n  )\n}\n\nDateField.displayName = 'DateField'\n"],"mappings":";;;;;;;AAaA,IAAa,aAAa,EACxB,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACiB;CACpB,MAAM,EAAE,UAAU,YAAY,gBAAgB;CAC9C,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAEhD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAYC,EAVb,wBAAA,cAAC,WAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,OAAO;EACP,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,YAAY;EACZ,CAAA,CACW;;AAInB,UAAU,cAAc"}

package/dist/components/date-input/DateInput.d.ts

@@ -6,6 +6,8 @@ export type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> & CalendarT
     dateFormat?: string;
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    appearance?: 'standard' | 'modern';
+    theme?: 'white' | 'grey';
     revalidate?: () => Promise<boolean>;
     onChange?: (value?: Date) => void;
 };
@@ -14,6 +16,8 @@ export declare const DateInput: React.ForwardRefExoticComponent<Omit<DayzedInter
     dateFormat?: string;
     disabled?: boolean;
     size?: "sm" | "md" | "lg";
+    appearance?: "standard" | "modern";
+    theme?: "white" | "grey";
     revalidate?: () => Promise<boolean>;
     onChange?: (value?: Date) => void;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/components/date-input/DateInput.js

@@ -14,7 +14,7 @@ import customParseFormat from "dayjs/plugin/customParseFormat";
 //#region src/components/date-input/DateInput.tsx
 dayjs.extend(customParseFormat);
 var formatDateToString = (date, dateFormat = DEFAULT_DATE_FORMAT) => date ? dayjs(date).format(dateFormat) : "";
-var DateInput = React$1.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayOfWeek = 1, disabled, monthNames, weekdayNames, size = "md", labels, revalidate, onChange, minDate, maxDate, ...remainingProps }, ref) => {
+var DateInput = React$1.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayOfWeek = 1, disabled, monthNames, weekdayNames, size = "md", appearance, theme, labels, revalidate, onChange, minDate, maxDate, ...remainingProps }, ref) => {
 	const [date, setDate] = React$1.useState(initialDate ? dayjs(initialDate).toDate() : void 0);
 	const [inputElRef, setInputElRef] = useCallbackRefState();
 	React$1.useImperativeHandle(ref, () => inputElRef);
@@ -48,6 +48,8 @@ var DateInput = React$1.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FOR
 		name: "date",
 		disabled,
 		size,
+		appearance,
+		theme,
 		...remainingProps,
 		onChange: handleInputChange,
 		ref: setInputElRef,

package/dist/components/date-input/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\n\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n  CalendarTranslationProps & {\n    initialDate?: Date\n    dateFormat?: string\n    disabled?: boolean\n    size?: 'sm' | 'md' | 'lg'\n    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  (\n    {\n      initialDate,\n      dateFormat = DEFAULT_DATE_FORMAT,\n      firstDayOfWeek = 1,\n      disabled,\n      monthNames,\n      weekdayNames,\n      size = 'md',\n      labels,\n      revalidate,\n      onChange,\n      minDate,\n      maxDate,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [date, setDate] = React.useState(\n      initialDate ? dayjs(initialDate).toDate() : undefined\n    )\n\n    const [inputElRef, setInputElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\n\n    const dateString = formatDateToString(date, dateFormat)\n\n    const handleInputChange = React.useCallback(\n      (event) => {\n        const newDateString = event.target.value\n        const parsedInputDate = dayjs(newDateString, dateFormat)\n        const newDate = parsedInputDate.isValid()\n          ? parsedInputDate.toDate()\n          : undefined\n        setDate(newDate)\n        onChange?.(newDate)\n      },\n      [dateFormat, onChange]\n    )\n\n    const handleCalendarChange = React.useCallback(\n      (newDate) => {\n        setDate(newDate)\n\n        const mirrorChangeToInputElement = () => {\n          if (!inputElRef) return\n\n          // Call the `set` function on the input value directly to mirror the change.\n          // Props to: https://stackoverflow.com/a/46012210\n          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n            window.HTMLInputElement.prototype,\n            'value'\n          )?.set\n          nativeInputValueSetter?.call(\n            inputElRef,\n            formatDateToString(newDate, dateFormat)\n          )\n          const event = new Event('input', { bubbles: true })\n          inputElRef.dispatchEvent(event)\n        }\n        mirrorChangeToInputElement()\n      },\n      [dateFormat, inputElRef]\n    )\n\n    const updatedLabels = {\n      ...DEFAULT_LABELS,\n      ...labels\n    }\n\n    const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n    const refDateToday = React.useRef<HTMLButtonElement>(null)\n    const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <div className=\"relative h-max\">\n        <Input\n          name=\"date\"\n          disabled={disabled}\n          size={size}\n          {...remainingProps}\n          onChange={handleInputChange}\n          ref={setInputElRef}\n          defaultValue={dateString}\n        />\n        <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n          <Popover.Trigger asChild>\n            <ActionIcon\n              disabled={disabled}\n              label={updatedLabels.open}\n              size={iconSize}\n              theme=\"neutral\"\n              hasTooltip={false}\n              className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n            >\n              <Icon is={CalendarEvent} />\n            </ActionIcon>\n          </Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content\n              side=\"bottom\"\n              align=\"end\"\n              showCloseButton={false}\n              onOpenAutoFocus={(e) => {\n                e.preventDefault()\n                if (date) {\n                  refDateSelected.current?.focus()\n                } else {\n                  refDateToday.current?.focus()\n                }\n              }}\n              className=\"z-1147483646 pr-6\"\n            >\n              <Calendar\n                date={date || new Date()}\n                selected={date}\n                onDateSelected={async (date) => {\n                  setCalendarOpen(false)\n                  await handleCalendarChange(date.date)\n                  if (revalidate) revalidate()\n                }}\n                setYear={async (date) => {\n                  await handleCalendarChange(date)\n                  if (revalidate) revalidate()\n                }}\n                minDate={minDate}\n                maxDate={maxDate}\n                refDateToday={refDateToday}\n                refDateSelected={refDateSelected}\n                firstDayOfWeek={firstDayOfWeek}\n                monthNames={monthNames}\n                weekdayNames={weekdayNames}\n                labels={updatedLabels}\n              />\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover>\n      </div>\n    )\n  }\n)\n\nDateInput.displayName = 'DateInput'\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,OAAO,kBAAkB;AAY/B,IAAM,sBAAsB,MAAa,aAAa,wBACpD,OAAO,MAAM,KAAK,CAAC,OAAO,WAAW,GAAG;AAE1C,IAAa,YAAY,QAAM,YAE3B,EACE,aACA,aAAa,qBACb,iBAAiB,GACjB,UACA,YACA,cACA,OAAO,MACP,QACA,YACA,UACA,SACA,SACA,GAAG,kBAEL,QACG;CACH,MAAM,CAAC,MAAM,WAAW,QAAM,SAC5B,cAAc,MAAM,YAAY,CAAC,QAAQ,GAAG,KAAA,EAC7C;CAED,MAAM,CAAC,YAAY,iBAAiB,qBAAqB;AACzD,SAAM,oBAAoB,WAAW,WAA+B;CAEpE,MAAM,aAAa,mBAAmB,MAAM,WAAW;CAEvD,MAAM,oBAAoB,QAAM,aAC7B,UAAU;EACT,MAAM,gBAAgB,MAAM,OAAO;EACnC,MAAM,kBAAkB,MAAM,eAAe,WAAW;EACxD,MAAM,UAAU,gBAAgB,SAAS,GACrC,gBAAgB,QAAQ,GACxB,KAAA;AACJ,UAAQ,QAAQ;AAChB,aAAW,QAAQ;IAErB,CAAC,YAAY,SAAS,CACvB;CAED,MAAM,uBAAuB,QAAM,aAChC,YAAY;AACX,UAAQ,QAAQ;EAEhB,MAAM,mCAAmC;AACvC,OAAI,CAAC,WAAY;AAQjB,IAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,KACtB,YACA,mBAAmB,SAAS,WAAW,CACxC;GACD,MAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,CAAC;AACnD,cAAW,cAAc,MAAM;;AAEjC,8BAA4B;IAE9B,CAAC,YAAY,WAAW,CACzB;CAED,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG;EACJ;CAED,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAS,MAAM;CAE7D,MAAM,eAAe,QAAM,OAA0B,KAAK;CAC1D,MAAM,kBAAkB,QAAM,OAA0B,KAAK;CAE7D,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,QACE,wBAAA,cAAC,OAAD,EAAK,WAAU,kBA8DT,EA7DJ,wBAAA,cAAC,OAAD;EACE,MAAK;EACK;EACJ;EACN,GAAI;EACJ,UAAU;EACV,KAAK;EACL,cAAc;EACd,CAAA,EACF,wBAAA,cAAC,SAAD;EAAS,OAAA;EAAM,MAAM;EAAc,cAAc;EAmDvC,EAlDR,wBAAA,cAAC,QAAQ,SAAT,EAAiB,SAAA,MAWC,EAVhB,wBAAA,cAAC,YAAD;EACY;EACV,OAAO,cAAc;EACrB,MAAM;EACN,OAAM;EACN,YAAY;EACZ,WAAU;EAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,eAAiB,CAAA,CAChB,CACG,EAClB,wBAAA,cAAC,QAAQ,QAAA,MACP,wBAAA,cAAC,QAAQ,SAAT;EACE,MAAK;EACL,OAAM;EACN,iBAAiB;EACjB,kBAAkB,MAAM;AACtB,KAAE,gBAAgB;AAClB,OAAI,KACF,iBAAgB,SAAS,OAAO;OAEhC,cAAa,SAAS,OAAO;;EAGjC,WAAU;EAuBM,EArBhB,wBAAA,cAAC,UAAD;EACE,MAAM,wBAAQ,IAAI,MAAM;EACxB,UAAU;EACV,gBAAgB,OAAO,SAAS;AAC9B,mBAAgB,MAAM;AACtB,SAAM,qBAAqB,KAAK,KAAK;AACrC,OAAI,WAAY,aAAY;;EAE9B,SAAS,OAAO,SAAS;AACvB,SAAM,qBAAqB,KAAK;AAChC,OAAI,WAAY,aAAY;;EAErB;EACA;EACK;EACG;EACD;EACJ;EACE;EACd,QAAQ;EACR,CAAA,CACc,CACH,CACT,CACN;EAGX;AAED,UAAU,cAAc"}
+{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\n\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n  CalendarTranslationProps & {\n    initialDate?: Date\n    dateFormat?: string\n    disabled?: boolean\n    size?: 'sm' | 'md' | 'lg'\n    appearance?: 'standard' | 'modern'\n    theme?: 'white' | 'grey'\n    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  (\n    {\n      initialDate,\n      dateFormat = DEFAULT_DATE_FORMAT,\n      firstDayOfWeek = 1,\n      disabled,\n      monthNames,\n      weekdayNames,\n      size = 'md',\n      appearance,\n      theme,\n      labels,\n      revalidate,\n      onChange,\n      minDate,\n      maxDate,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [date, setDate] = React.useState(\n      initialDate ? dayjs(initialDate).toDate() : undefined\n    )\n\n    const [inputElRef, setInputElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\n\n    const dateString = formatDateToString(date, dateFormat)\n\n    const handleInputChange = React.useCallback(\n      (event) => {\n        const newDateString = event.target.value\n        const parsedInputDate = dayjs(newDateString, dateFormat)\n        const newDate = parsedInputDate.isValid()\n          ? parsedInputDate.toDate()\n          : undefined\n        setDate(newDate)\n        onChange?.(newDate)\n      },\n      [dateFormat, onChange]\n    )\n\n    const handleCalendarChange = React.useCallback(\n      (newDate) => {\n        setDate(newDate)\n\n        const mirrorChangeToInputElement = () => {\n          if (!inputElRef) return\n\n          // Call the `set` function on the input value directly to mirror the change.\n          // Props to: https://stackoverflow.com/a/46012210\n          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n            window.HTMLInputElement.prototype,\n            'value'\n          )?.set\n          nativeInputValueSetter?.call(\n            inputElRef,\n            formatDateToString(newDate, dateFormat)\n          )\n          const event = new Event('input', { bubbles: true })\n          inputElRef.dispatchEvent(event)\n        }\n        mirrorChangeToInputElement()\n      },\n      [dateFormat, inputElRef]\n    )\n\n    const updatedLabels = {\n      ...DEFAULT_LABELS,\n      ...labels\n    }\n\n    const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n    const refDateToday = React.useRef<HTMLButtonElement>(null)\n    const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <div className=\"relative h-max\">\n        <Input\n          name=\"date\"\n          disabled={disabled}\n          size={size}\n          appearance={appearance}\n          theme={theme}\n          {...remainingProps}\n          onChange={handleInputChange}\n          ref={setInputElRef}\n          defaultValue={dateString}\n        />\n        <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n          <Popover.Trigger asChild>\n            <ActionIcon\n              disabled={disabled}\n              label={updatedLabels.open}\n              size={iconSize}\n              theme=\"neutral\"\n              hasTooltip={false}\n              className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n            >\n              <Icon is={CalendarEvent} />\n            </ActionIcon>\n          </Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content\n              side=\"bottom\"\n              align=\"end\"\n              showCloseButton={false}\n              onOpenAutoFocus={(e) => {\n                e.preventDefault()\n                if (date) {\n                  refDateSelected.current?.focus()\n                } else {\n                  refDateToday.current?.focus()\n                }\n              }}\n              className=\"z-1147483646 pr-6\"\n            >\n              <Calendar\n                date={date || new Date()}\n                selected={date}\n                onDateSelected={async (date) => {\n                  setCalendarOpen(false)\n                  await handleCalendarChange(date.date)\n                  if (revalidate) revalidate()\n                }}\n                setYear={async (date) => {\n                  await handleCalendarChange(date)\n                  if (revalidate) revalidate()\n                }}\n                minDate={minDate}\n                maxDate={maxDate}\n                refDateToday={refDateToday}\n                refDateSelected={refDateSelected}\n                firstDayOfWeek={firstDayOfWeek}\n                monthNames={monthNames}\n                weekdayNames={weekdayNames}\n                labels={updatedLabels}\n              />\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover>\n      </div>\n    )\n  }\n)\n\nDateInput.displayName = 'DateInput'\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,OAAO,kBAAkB;AAc/B,IAAM,sBAAsB,MAAa,aAAa,wBACpD,OAAO,MAAM,KAAK,CAAC,OAAO,WAAW,GAAG;AAE1C,IAAa,YAAY,QAAM,YAE3B,EACE,aACA,aAAa,qBACb,iBAAiB,GACjB,UACA,YACA,cACA,OAAO,MACP,YACA,OACA,QACA,YACA,UACA,SACA,SACA,GAAG,kBAEL,QACG;CACH,MAAM,CAAC,MAAM,WAAW,QAAM,SAC5B,cAAc,MAAM,YAAY,CAAC,QAAQ,GAAG,KAAA,EAC7C;CAED,MAAM,CAAC,YAAY,iBAAiB,qBAAqB;AACzD,SAAM,oBAAoB,WAAW,WAA+B;CAEpE,MAAM,aAAa,mBAAmB,MAAM,WAAW;CAEvD,MAAM,oBAAoB,QAAM,aAC7B,UAAU;EACT,MAAM,gBAAgB,MAAM,OAAO;EACnC,MAAM,kBAAkB,MAAM,eAAe,WAAW;EACxD,MAAM,UAAU,gBAAgB,SAAS,GACrC,gBAAgB,QAAQ,GACxB,KAAA;AACJ,UAAQ,QAAQ;AAChB,aAAW,QAAQ;IAErB,CAAC,YAAY,SAAS,CACvB;CAED,MAAM,uBAAuB,QAAM,aAChC,YAAY;AACX,UAAQ,QAAQ;EAEhB,MAAM,mCAAmC;AACvC,OAAI,CAAC,WAAY;AAQjB,IAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,KACtB,YACA,mBAAmB,SAAS,WAAW,CACxC;GACD,MAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,CAAC;AACnD,cAAW,cAAc,MAAM;;AAEjC,8BAA4B;IAE9B,CAAC,YAAY,WAAW,CACzB;CAED,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG;EACJ;CAED,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAS,MAAM;CAE7D,MAAM,eAAe,QAAM,OAA0B,KAAK;CAC1D,MAAM,kBAAkB,QAAM,OAA0B,KAAK;CAE7D,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,QACE,wBAAA,cAAC,OAAD,EAAK,WAAU,kBAgET,EA/DJ,wBAAA,cAAC,OAAD;EACE,MAAK;EACK;EACJ;EACM;EACL;EACP,GAAI;EACJ,UAAU;EACV,KAAK;EACL,cAAc;EACd,CAAA,EACF,wBAAA,cAAC,SAAD;EAAS,OAAA;EAAM,MAAM;EAAc,cAAc;EAmDvC,EAlDR,wBAAA,cAAC,QAAQ,SAAT,EAAiB,SAAA,MAWC,EAVhB,wBAAA,cAAC,YAAD;EACY;EACV,OAAO,cAAc;EACrB,MAAM;EACN,OAAM;EACN,YAAY;EACZ,WAAU;EAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,eAAiB,CAAA,CAChB,CACG,EAClB,wBAAA,cAAC,QAAQ,QAAA,MACP,wBAAA,cAAC,QAAQ,SAAT;EACE,MAAK;EACL,OAAM;EACN,iBAAiB;EACjB,kBAAkB,MAAM;AACtB,KAAE,gBAAgB;AAClB,OAAI,KACF,iBAAgB,SAAS,OAAO;OAEhC,cAAa,SAAS,OAAO;;EAGjC,WAAU;EAuBM,EArBhB,wBAAA,cAAC,UAAD;EACE,MAAM,wBAAQ,IAAI,MAAM;EACxB,UAAU;EACV,gBAAgB,OAAO,SAAS;AAC9B,mBAAgB,MAAM;AACtB,SAAM,qBAAqB,KAAK,KAAK;AACrC,OAAI,WAAY,aAAY;;EAE9B,SAAS,OAAO,SAAS;AACvB,SAAM,qBAAqB,KAAK;AAChC,OAAI,WAAY,aAAY;;EAErB;EACA;EACK;EACG;EACD;EACJ;EACE;EACd,QAAQ;EACR,CAAA,CACc,CACH,CACT,CACN;EAGX;AAED,UAAU,cAAc"}

package/dist/components/dialog/Dialog.d.ts

@@ -1,12 +1,18 @@
 export declare const Dialog: import("react").FC<import("@radix-ui/react-dialog").DialogProps> & {
+    ActionBar: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }, never> & {
+        as?: import("react").ElementType;
+    }>;
     Background: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }, never> & {
         as?: import("react").ElementType;
     }>;
     Close: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: ({ size, children, closeDialogText, showCloseButton, ...remainingProps }: Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "size"> & {
+    Content: ({ size, children, closeDialogText, showCloseButton, ...remainingProps }: Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "size" | "layout"> & {
         size?: ("sm" | "md" | "lg" | "xs" | "xl" | "fullscreen" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "fullscreen">>) | undefined;
+        layout?: ("panel" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "panel">>) | undefined;
     } & {
         as?: import("react").ElementType;
     } & {
@@ -19,6 +25,16 @@ export declare const Dialog: import("react").FC<import("@radix-ui/react-dialog")
     }, never> & {
         as?: import("react").ElementType;
     }>;
+    NavigationBar: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }, never> & {
+        as?: import("react").ElementType;
+    }>;
+    ScrollableContent: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }, never> & {
+        as?: import("react").ElementType;
+    }>;
     Description: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
     Title: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
     Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/dialog/Dialog.js

@@ -1,16 +1,22 @@
+import { DialogActionBar } from "./DialogActionBar.js";
 import { DialogBackground } from "./DialogBackground.js";
 import { DialogClose } from "./DialogClose.js";
 import { DialogContent } from "./DialogContent.js";
 import { DialogFooter } from "./DialogFooter.js";
 import { DialogHeading } from "./DialogHeading.js";
+import { DialogNavigationBar } from "./DialogNavigationBar.js";
+import { DialogScrollableContent } from "./DialogScrollableContent.js";
 import { Description, Root, Title, Trigger } from "@radix-ui/react-dialog";
 //#region src/components/dialog/Dialog.tsx
 var Dialog = Object.assign(Root, {
+	ActionBar: DialogActionBar,
 	Background: DialogBackground,
 	Close: DialogClose,
 	Content: DialogContent,
 	Heading: DialogHeading,
 	Footer: DialogFooter,
+	NavigationBar: DialogNavigationBar,
+	ScrollableContent: DialogScrollableContent,
 	Description,
 	Title,
 	Trigger

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { Description, Root, Title, Trigger } from '@radix-ui/react-dialog'\n\nimport { DialogBackground } from './DialogBackground'\nimport { DialogClose } from './DialogClose'\nimport { DialogContent } from './DialogContent'\nimport { DialogFooter } from './DialogFooter'\nimport { DialogHeading } from './DialogHeading'\n\nexport const Dialog = Object.assign(Root, {\n  Background: DialogBackground,\n  Close: DialogClose,\n  Content: DialogContent,\n  Heading: DialogHeading,\n  Footer: DialogFooter,\n\n  Description: Description,\n  Title: Title,\n  Trigger: Trigger\n})\n\nDialog.displayName = 'Dialog'\n"],"mappings":";;;;;;;AAQA,IAAa,SAAS,OAAO,OAAO,MAAM;CACxC,YAAY;CACZ,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CAEK;CACN;CACE;CACV,CAAC;AAEF,OAAO,cAAc"}
+{"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { Description, Root, Title, Trigger } from '@radix-ui/react-dialog'\n\nimport { DialogActionBar } from './DialogActionBar'\nimport { DialogBackground } from './DialogBackground'\nimport { DialogClose } from './DialogClose'\nimport { DialogContent } from './DialogContent'\nimport { DialogFooter } from './DialogFooter'\nimport { DialogHeading } from './DialogHeading'\nimport { DialogNavigationBar } from './DialogNavigationBar'\nimport { DialogScrollableContent } from './DialogScrollableContent'\n\nexport const Dialog = Object.assign(Root, {\n  ActionBar: DialogActionBar,\n  Background: DialogBackground,\n  Close: DialogClose,\n  Content: DialogContent,\n  Heading: DialogHeading,\n  Footer: DialogFooter,\n  NavigationBar: DialogNavigationBar,\n  ScrollableContent: DialogScrollableContent,\n\n  Description: Description,\n  Title: Title,\n  Trigger: Trigger\n})\n\nDialog.displayName = 'Dialog'\n"],"mappings":";;;;;;;;;;AAWA,IAAa,SAAS,OAAO,OAAO,MAAM;CACxC,WAAW;CACX,YAAY;CACZ,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CACR,eAAe;CACf,mBAAmB;CAEN;CACN;CACE;CACV,CAAC;AAEF,OAAO,cAAc"}

package/dist/components/dialog/DialogActionBar.d.ts

@@ -0,0 +1,5 @@
+export declare const DialogActionBar: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never> & {
+    as?: import("react").ElementType;
+}>;

package/dist/components/dialog/DialogActionBar.js

@@ -0,0 +1,14 @@
+import { styled } from "../../styled.js";
+//#region src/components/dialog/DialogActionBar.tsx
+var DialogActionBar = styled("div", { base: [
+	"border-t",
+	"border-grey-300",
+	"p-4",
+	"flex",
+	"gap-4",
+	"shadow-[0_-6px_6px_-1px_rgba(51,51,51,0.05)]"
+] });
+//#endregion
+export { DialogActionBar };
+
+//# sourceMappingURL=DialogActionBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogActionBar.js","names":[],"sources":["../../../src/components/dialog/DialogActionBar.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogActionBar = styled('div', {\n  base: [\n    'border-t',\n    'border-grey-300',\n    'p-4',\n    'flex',\n    'gap-4',\n    'shadow-[0_-6px_6px_-1px_rgba(51,51,51,0.05)]'\n  ]\n})\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,OAAO,EAC3C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}

package/dist/components/dialog/DialogContent.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-declare const StyledDialogContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
+declare const StyledDialogContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "size" | "layout"> & {
     size?: ("sm" | "md" | "lg" | "xs" | "xl" | "fullscreen" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "fullscreen">>) | undefined;
+    layout?: ("panel" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "panel">>) | undefined;
 } & {
     as?: React.ElementType;
 }>;

package/dist/components/dialog/DialogContent.js

@@ -29,62 +29,69 @@ var StyledDialogContent = styled(Content, {
 		"motion-safe:data-[state=open]:animate-slide-in-center",
 		"motion-safe:data-[state=closed]:animate-slide-out-center"
 	],
-	variants: { size: {
-		xs: [
-			"rounded-md",
-			"size-auto",
-			"max-w-[90vw]",
-			"max-h-[90vh]",
-			"supports-svh:h-auto",
-			"supports-svh:max-h-[90vh]",
-			"w-95"
-		],
-		sm: [
-			"rounded-md",
-			"size-auto",
-			"max-w-[90vw]",
-			"max-h-[90vh]",
-			"supports-svh:h-auto",
-			"supports-svh:max-h-[90vh]",
-			"w-120"
-		],
-		md: [
-			"rounded-md",
-			"size-auto",
-			"max-w-[90vw]",
-			"max-h-[90vh]",
-			"supports-svh:h-auto",
-			"supports-svh:max-h-[90vh]",
-			"w-150"
-		],
-		lg: [
-			"rounded-md",
-			"size-auto",
-			"max-w-[90vw]",
-			"max-h-[90vh]",
-			"supports-svh:h-auto",
-			"supports-svh:max-h-[90vh]",
-			"w-200"
-		],
-		xl: [
-			"rounded-md",
-			"size-auto",
-			"max-w-[90vw]",
-			"max-h-[90vh]",
-			"supports-svh:h-auto",
-			"supports-svh:max-h-[90vh]",
-			"w-275"
-		],
-		fullscreen: [
-			"rounded-none",
-			"w-screen",
-			"h-screen",
-			"max-w-screen",
-			"max-h-screen",
-			"supports-svh:h-svh",
-			"supports-svh:max-h-svh"
-		]
-	} }
+	variants: {
+		size: {
+			xs: [
+				"rounded-md",
+				"size-auto",
+				"max-w-[90vw]",
+				"max-h-[90vh]",
+				"supports-svh:h-auto",
+				"supports-svh:max-h-[90vh]",
+				"w-95"
+			],
+			sm: [
+				"rounded-md",
+				"size-auto",
+				"max-w-[90vw]",
+				"max-h-[90vh]",
+				"supports-svh:h-auto",
+				"supports-svh:max-h-[90vh]",
+				"w-120"
+			],
+			md: [
+				"rounded-md",
+				"size-auto",
+				"max-w-[90vw]",
+				"max-h-[90vh]",
+				"supports-svh:h-auto",
+				"supports-svh:max-h-[90vh]",
+				"w-150"
+			],
+			lg: [
+				"rounded-md",
+				"size-auto",
+				"max-w-[90vw]",
+				"max-h-[90vh]",
+				"supports-svh:h-auto",
+				"supports-svh:max-h-[90vh]",
+				"w-200"
+			],
+			xl: [
+				"rounded-md",
+				"size-auto",
+				"max-w-[90vw]",
+				"max-h-[90vh]",
+				"supports-svh:h-auto",
+				"supports-svh:max-h-[90vh]",
+				"w-275"
+			],
+			fullscreen: [
+				"rounded-none",
+				"w-screen",
+				"h-screen",
+				"max-w-screen",
+				"max-h-screen",
+				"supports-svh:h-svh",
+				"supports-svh:max-h-svh"
+			]
+		},
+		layout: { panel: [
+			"flex",
+			"flex-col",
+			"p-0"
+		] }
+	}
 }, { enabledResponsiveVariants: true });
 var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog", showCloseButton = true, ...remainingProps }) => /* @__PURE__ */ React$1.createElement(Portal, null, /* @__PURE__ */ React$1.createElement(StyledDialogOverlay, { id: modalOverlayId }, React$1.Children.map(children, (child) => child?.type === DialogBackground && child), /* @__PURE__ */ React$1.createElement(StyledDialogContent, {
 	size,

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

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

package/dist/components/dialog/DialogNavigationBar.d.ts

@@ -0,0 +1,5 @@
+export declare const DialogNavigationBar: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never> & {
+    as?: import("react").ElementType;
+}>;

package/dist/components/dialog/DialogNavigationBar.js

@@ -0,0 +1,14 @@
+import { styled } from "../../styled.js";
+//#region src/components/dialog/DialogNavigationBar.tsx
+var DialogNavigationBar = styled("div", { base: [
+	"flex",
+	"justify-between",
+	"items-center",
+	"border-b",
+	"border-grey-300",
+	"p-4"
+] });
+//#endregion
+export { DialogNavigationBar };
+
+//# sourceMappingURL=DialogNavigationBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogNavigationBar.js","names":[],"sources":["../../../src/components/dialog/DialogNavigationBar.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogNavigationBar = styled('div', {\n  base: [\n    'flex',\n    'justify-between',\n    'items-center',\n    'border-b',\n    'border-grey-300',\n    'p-4'\n  ]\n})\n"],"mappings":";;AAEA,IAAa,sBAAsB,OAAO,OAAO,EAC/C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}

package/dist/components/dialog/DialogScrollableContent.d.ts

@@ -0,0 +1,5 @@
+export declare const DialogScrollableContent: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never> & {
+    as?: import("react").ElementType;
+}>;

package/dist/components/dialog/DialogScrollableContent.js

@@ -0,0 +1,11 @@
+import { styled } from "../../styled.js";
+//#region src/components/dialog/DialogScrollableContent.tsx
+var DialogScrollableContent = styled("div", { base: [
+	"overflow-scroll",
+	"flex-1",
+	"p-4"
+] });
+//#endregion
+export { DialogScrollableContent };
+
+//# sourceMappingURL=DialogScrollableContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogScrollableContent.js","names":[],"sources":["../../../src/components/dialog/DialogScrollableContent.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogScrollableContent = styled('div', {\n  base: ['overflow-scroll', 'flex-1', 'p-4']\n})\n"],"mappings":";;AAEA,IAAa,0BAA0B,OAAO,OAAO,EACnD,MAAM;CAAC;CAAmB;CAAU;CAAM,EAC3C,CAAC"}