npm - @atom-learning/components - Versions diffs - 6.9.0 → 6.11.0 - Mend

@atom-learning/components 6.9.0 → 6.11.0

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

Files changed (59) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 { 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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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"}

package/dist/components/form/Form.js CHANGED Viewed

@@ -3,12 +3,15 @@ import * as React$1 from "react";
 import { FormProvider, useForm } from "react-hook-form";
 //#region src/components/form/Form.tsx
 var Form = (props) => {
-	const { children, defaultValues, validationMode = "onBlur", onSubmit, onError, appearance, ...rest } = props;
+	const { children, defaultValues, validationMode = "onBlur", onSubmit, onError, appearance, theme, ...rest } = props;
 	const methods = useForm({
 		defaultValues,
 		mode: validationMode
 	});
-	return /* @__PURE__ */ React$1.createElement(FormProvider, methods, /* @__PURE__ */ React$1.createElement(FormCustomContext.Provider, { value: { appearance } }, /* @__PURE__ */ React$1.createElement("form", {
+	return /* @__PURE__ */ React$1.createElement(FormProvider, methods, /* @__PURE__ */ React$1.createElement(FormCustomContext.Provider, { value: {
+		appearance,
+		theme
+	} }, /* @__PURE__ */ React$1.createElement("form", {
 		"aria-label": "form",
 		onSubmit: methods.handleSubmit(onSubmit, onError),
 		...rest

package/dist/components/form/Form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import * as React from 'react'\nimport type {\n DefaultValues,\n FieldValues,\n Mode,\n SubmitErrorHandler,\n SubmitHandler,\n UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport {\n type FormCustomContextType,\n FormCustomContext\n} from './useFormCustomContext'\n\ntype FormProps<TFormData extends FieldValues> = Omit<\n React.HTMLAttributes<HTMLFormElement>,\n 'onSubmit' \| 'onError' \| 'children'\n> & {\n defaultValues?: DefaultValues<TFormData>\n validationMode?: Mode\n onSubmit: SubmitHandler<TFormData>\n onError?: SubmitErrorHandler<TFormData>\n noValidate?: boolean\n children:\n \| React.ReactNode\n \| ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n props: FormProps<TFormData> & FormCustomContextType\n) => {\n const {\n children,\n defaultValues,\n validationMode = 'onBlur',\n onSubmit,\n onError,\n appearance,\n ...rest\n } = props\n\n const methods = useForm<TFormData>({\n defaultValues,\n mode: validationMode\n })\n\n return (\n <FormProvider {...methods}>\n <FormCustomContext.Provider value={{ appearance }}>\n <form\n aria-label=\"form\"\n onSubmit={methods.handleSubmit(onSubmit, onError)}\n {...rest}\n >\n {typeof children === 'function' ? children(methods) : children}\n </form>\n </FormCustomContext.Provider>\n </FormProvider>\n )\n}\n\nForm.displayName = 'Form'\n"],"mappings":";;;;AA8BA,IAAa,QACX,UACG;CACH,MAAM,EACJ,UACA,eACA,iBAAiB,UACjB,UACA,SACA,YACA,GAAG,SACD;CAEJ,MAAM,UAAU,QAAmB;EACjC;EACA,MAAM;EACP,CAAC;AAEF,QACE,wBAAA,cAAC,cAAiB,SAChB,wBAAA,cAAC,kBAAkB,UAAnB,EAA4B,OAAO,EAAE,~~YAAY~~,~~EAQpB,~~EAP3B,wBAAA,cAAC,QAAD;EACE,cAAW;EACX,UAAU,QAAQ,aAAa,UAAU,QAAQ;EACjD,GAAI;EAGC,EADJ,OAAO,aAAa,aAAa,SAAS,QAAQ,GAAG,SACjD,CACoB,CAChB;;AAInB,KAAK,cAAc"}
1	+ {"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import * as React from 'react'\nimport type {\n DefaultValues,\n FieldValues,\n Mode,\n SubmitErrorHandler,\n SubmitHandler,\n UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport {\n type FormCustomContextType,\n FormCustomContext\n} from './useFormCustomContext'\n\ntype FormProps<TFormData extends FieldValues> = Omit<\n React.HTMLAttributes<HTMLFormElement>,\n 'onSubmit' \| 'onError' \| 'children'\n> & {\n defaultValues?: DefaultValues<TFormData>\n validationMode?: Mode\n onSubmit: SubmitHandler<TFormData>\n onError?: SubmitErrorHandler<TFormData>\n noValidate?: boolean\n children:\n \| React.ReactNode\n \| ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n props: FormProps<TFormData> & FormCustomContextType\n) => {\n const {\n children,\n defaultValues,\n validationMode = 'onBlur',\n onSubmit,\n onError,\n appearance,\n theme,\n ...rest\n } = props\n\n const methods = useForm<TFormData>({\n defaultValues,\n mode: validationMode\n })\n\n return (\n <FormProvider {...methods}>\n <FormCustomContext.Provider value={{ appearance, theme }}>\n <form\n aria-label=\"form\"\n onSubmit={methods.handleSubmit(onSubmit, onError)}\n {...rest}\n >\n {typeof children === 'function' ? children(methods) : children}\n </form>\n </FormCustomContext.Provider>\n </FormProvider>\n )\n}\n\nForm.displayName = 'Form'\n"],"mappings":";;;;AA8BA,IAAa,QACX,UACG;CACH,MAAM,EACJ,UACA,eACA,iBAAiB,UACjB,UACA,SACA,YACA,OACA,GAAG,SACD;CAEJ,MAAM,UAAU,QAAmB;EACjC;EACA,MAAM;EACP,CAAC;AAEF,QACE,wBAAA,cAAC,cAAiB,SAChB,wBAAA,cAAC,kBAAkB,UAAnB,EAA4B,OAAO;EAAE;EAAY;EAAO,EAQ3B,EAP3B,wBAAA,cAAC,QAAD;EACE,cAAW;EACX,UAAU,QAAQ,aAAa,UAAU,QAAQ;EACjD,GAAI;EAGC,EADJ,OAAO,aAAa,aAAa,SAAS,QAAQ,GAAG,SACjD,CACoB,CAChB;;AAInB,KAAK,cAAc"}

package/dist/components/form/useFormCustomContext.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { InputField } from '../input-field/InputField';
+import type { InputProps } from '../input/Input';
 export type FormCustomContextType = {
-    appearance?: React.ComponentProps<typeof InputField>['appearance'];
+    appearance?: InputProps['appearance'];
+    theme?: InputProps['theme'];
 } | undefined;
 export declare const FormCustomContext: React.Context<FormCustomContextType>;
 export declare const useFormCustomContext: () => FormCustomContextType;

package/dist/components/form/useFormCustomContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFormCustomContext.js","names":[],"sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { ~~InputField~~ } from '../input~~-field~~/~~InputField~~'\n\nexport type FormCustomContextType =\n \| {\n appearance?: ~~React.ComponentProps<typeof InputField>~~['appearance']\n }\n \| undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.useContext(FormCustomContext)\n"],"mappings":";;~~AAUA~~,IAAa,oBAAoB,QAAM,cAAqC,EAC1E,YAAY,YACb,CAAC;AAEF,IAAa,6BAA6B,QAAM,WAAW,kBAAkB"}
1	+ {"version":3,"file":"useFormCustomContext.js","names":[],"sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { InputProps } from '../input/Input'\n\nexport type FormCustomContextType =\n \| {\n appearance?: InputProps['appearance']\n theme?: InputProps['theme']\n }\n \| undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.useContext(FormCustomContext)\n"],"mappings":";;AAWA,IAAa,oBAAoB,QAAM,cAAqC,EAC1E,YAAY,YACb,CAAC;AAEF,IAAa,6BAA6B,QAAM,WAAW,kBAAkB"}

package/dist/components/input/Input.d.ts CHANGED Viewed

@@ -1,11 +1,12 @@
 import * as React from 'react';
 export declare const InputBackground: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "appearance" | "size" | "disabled" | "state"> & {
+}, "appearance" | "size" | "theme" | "disabled" | "state"> & {
     appearance?: "standard" | "modern" | undefined;
     size?: "sm" | "md" | "lg" | "xl" | undefined;
     disabled?: boolean | undefined;
     state?: "error" | undefined;
+    theme?: "grey" | "white" | undefined;
 } & {
     as?: React.ElementType;
 }>;
@@ -34,6 +35,7 @@ export type InputProps = Omit<React.ComponentProps<typeof InputText>, 'size' | '
     size?: InputBackgroundProps['size'];
     state?: InputBackgroundProps['state'];
     appearance?: InputBackgroundProps['appearance'];
+    theme?: InputBackgroundProps['theme'];
     disabled?: boolean;
     name?: string;
     readOnly?: boolean;

package/dist/components/input/Input.js CHANGED Viewed

@@ -39,17 +39,34 @@ var InputBackground = styled("div", {
 			xl: ["h-16"]
 		},
 		disabled: { true: ["cursor-not-allowed", "opacity-30"] },
-		state: { error: [] }
+		state: { error: [] },
+		theme: {
+			white: [],
+			grey: []
+		}
 	},
-	compoundVariants: [{
-		state: "error",
-		appearance: "standard",
-		class: ["border-danger"]
-	}, {
-		state: "error",
-		appearance: "modern",
-		class: ["bg-danger-light", "focus-within:outline-danger"]
-	}]
+	compoundVariants: [
+		{
+			state: "error",
+			appearance: "standard",
+			class: ["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"]
+		}
+	]
 });
 InputBackground.displayName = "InputBackground";
 var StyledInputText = styled(Text, { base: [
@@ -84,10 +101,11 @@ var InputText = React$1.forwardRef(({ type = "text", size, ...rest }, ref) => {
 	});
 });
 InputText.displayName = "InputText";
-var Input = React$1.forwardRef(({ className, size = "md", appearance = "standard", state, disabled, style, ...rest }, ref) => {
+var Input = React$1.forwardRef(({ className, size = "md", appearance = "standard", theme, state, disabled, style, ...rest }, ref) => {
 	return /* @__PURE__ */ React$1.createElement(InputBackground, {
 		size,
 		appearance,
+		theme,
 		disabled,
 		state,
 		className,

package/dist/components/input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Text } from '../text/Text'\n\nexport const InputBackground = styled('div', {\n base: [\n 'flex',\n 'text-grey-1000',\n 'transition-[background,border-color]',\n 'duration-100',\n 'ease-out',\n 'w-full'\n ],\n variants: {\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-800',\n 'focus-within:border-blue-800',\n 'rounded-md'\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 'rounded-md'\n ]\n },\n size: {\n sm: ['h-8'],\n md: ['h-10'],\n lg: ['h-12'],\n xl: ['h-16']\n },\n disabled: {\n true: ['cursor-not-allowed', 'opacity-30']\n },\n state: {\n error: []\n }\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n class: ['border-danger']\n },\n {\n state: 'error',\n appearance: 'modern',\n class: ['bg-danger-light', 'focus-within:outline-danger']\n }\n ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled(Text, {\n base: [\n 'appearance-none',\n 'border-none',\n 'bg-none',\n 'bg-transparent',\n 'shadow-none',\n 'box-border',\n 'focus:outline-none',\n 'px-3',\n 'size-full',\n 'placeholder:opacity-100',\n 'placeholder:text-grey-700'\n ]\n})\n\nexport type InputTextProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size'\n> &\n Omit<React.ComponentProps<typeof StyledInputText>, 'type' \| 'as'> & {\n // override default 'type' property to prevent Input from being used to render\n // checkboxes, radios etc — we have dedicated components for them\n type?: 'text' \| 'number' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'search'\n as?: never\n disabled?: boolean\n }\n\nconst toTextSize = {\n sm: 'sm',\n md: 'md',\n lg: 'md',\n xl: 'lg'\n}\n\nexport const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n ({ type = 'text', size, ...rest }, ref) => {\n const textSize = React.useMemo(\n () => overrideStyledVariantValue(size, (s) => toTextSize[s]),\n [size]\n )\n\n return (\n <StyledInputText\n ref={ref}\n as=\"input\"\n type={type === 'number' ? 'text' : type}\n inputMode={type === 'number' ? 'numeric' : undefined}\n pattern={type === 'number' ? '[0-9]*' : undefined}\n size={textSize}\n {...(rest as any)}\n />\n )\n }\n)\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n React.ComponentProps<typeof InputText>,\n 'size' \| 'state' \| 'appearance'\n> & {\n size?: InputBackgroundProps['size']\n state?: InputBackgroundProps['state']\n appearance?: InputBackgroundProps['appearance']\n disabled?: boolean\n name?: string\n readOnly?: boolean\n value?: string \| number\n onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n size = 'md',\n appearance = 'standard',\n state,\n disabled,\n style,\n ...rest\n },\n ref\n ) => {\n return (\n <InputBackground\n size={size}\n appearance={appearance}\n disabled={disabled}\n state={state}\n className={className}\n style={style}\n >\n <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n </InputBackground>\n )\n }\n)\n\nInput.displayName = 'Input'\n"],"mappings":";;;;;AAOA,IAAa,kBAAkB,OAAO,OAAO;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;EACD,UAAU,EACR,MAAM,CAAC,sBAAsB,aAAa,EAC3C;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACF;CACD,kBAAkB~~,CAChB~~;~~EACE~~,OAAO;~~EACP~~,YAAY;~~EACZ~~,OAAO,CAAC,gBAAgB;~~EACzB,~~EACD;~~EACE~~,OAAO;~~EACP~~,YAAY;~~EACZ~~,OAAO,CAAC,mBAAmB,8BAA8B;~~EAC1D~~,~~CACF~~;CACF,CAAC;AAEF,gBAAgB,cAAc;AAE9B,IAAM,kBAAkB,OAAO,MAAM,EACnC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAcF,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,YAAY,QAAM,YAC5B,EAAE,OAAO,QAAQ,MAAM,GAAG,QAAQ,QAAQ;CACzC,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,GAAG,EAC5D,CAAC,KAAK,CACP;AAED,QACE,wBAAA,cAAC,iBAAD;EACO;EACL,IAAG;EACH,MAAM,SAAS,WAAW,SAAS;EACnC,WAAW,SAAS,WAAW,YAAY,KAAA;EAC3C,SAAS,SAAS,WAAW,WAAW,KAAA;EACxC,MAAM;EACN,GAAK;EACL,CAAA;EAGP;AAED,UAAU,cAAc;~~AAiBxB~~,IAAa,QAAQ,QAAM,YAEvB,EACE,WACA,OAAO,MACP,aAAa,YACb,OACA,UACA,OACA,GAAG,QAEL,QACG;AACH,QACE,wBAAA,cAAC,iBAAD;EACQ;EACM;~~EACF~~;EACH;EACI;EACJ;EAGS,EADhB,wBAAA,cAAC,WAAD;EAAiB;EAAW;EAAe;EAAU,GAAI;EAAQ,CAAA,CACjD;EAGvB;AAED,MAAM,cAAc"}
1	+ {"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Text } from '../text/Text'\n\nexport const InputBackground = styled('div', {\n base: [\n 'flex',\n 'text-grey-1000',\n 'transition-[background,border-color]',\n 'duration-100',\n 'ease-out',\n 'w-full'\n ],\n variants: {\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-800',\n 'focus-within:border-blue-800',\n 'rounded-md'\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 'rounded-md'\n ]\n },\n size: {\n sm: ['h-8'],\n md: ['h-10'],\n lg: ['h-12'],\n xl: ['h-16']\n },\n disabled: {\n true: ['cursor-not-allowed', 'opacity-30']\n },\n state: {\n error: []\n },\n theme: {\n white: [],\n grey: []\n }\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n class: ['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\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled(Text, {\n base: [\n 'appearance-none',\n 'border-none',\n 'bg-none',\n 'bg-transparent',\n 'shadow-none',\n 'box-border',\n 'focus:outline-none',\n 'px-3',\n 'size-full',\n 'placeholder:opacity-100',\n 'placeholder:text-grey-700'\n ]\n})\n\nexport type InputTextProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size'\n> &\n Omit<React.ComponentProps<typeof StyledInputText>, 'type' \| 'as'> & {\n // override default 'type' property to prevent Input from being used to render\n // checkboxes, radios etc — we have dedicated components for them\n type?: 'text' \| 'number' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'search'\n as?: never\n disabled?: boolean\n }\n\nconst toTextSize = {\n sm: 'sm',\n md: 'md',\n lg: 'md',\n xl: 'lg'\n}\n\nexport const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n ({ type = 'text', size, ...rest }, ref) => {\n const textSize = React.useMemo(\n () => overrideStyledVariantValue(size, (s) => toTextSize[s]),\n [size]\n )\n\n return (\n <StyledInputText\n ref={ref}\n as=\"input\"\n type={type === 'number' ? 'text' : type}\n inputMode={type === 'number' ? 'numeric' : undefined}\n pattern={type === 'number' ? '[0-9]*' : undefined}\n size={textSize}\n {...(rest as any)}\n />\n )\n }\n)\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n React.ComponentProps<typeof InputText>,\n 'size' \| 'state' \| 'appearance'\n> & {\n size?: InputBackgroundProps['size']\n state?: InputBackgroundProps['state']\n appearance?: InputBackgroundProps['appearance']\n theme?: InputBackgroundProps['theme']\n disabled?: boolean\n name?: string\n readOnly?: boolean\n value?: string \| number\n onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n size = 'md',\n appearance = 'standard',\n theme,\n state,\n disabled,\n style,\n ...rest\n },\n ref\n ) => {\n return (\n <InputBackground\n size={size}\n appearance={appearance}\n theme={theme}\n disabled={disabled}\n state={state}\n className={className}\n style={style}\n >\n <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n </InputBackground>\n )\n }\n)\n\nInput.displayName = 'Input'\n"],"mappings":";;;;;AAOA,IAAa,kBAAkB,OAAO,OAAO;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;EACD,UAAU,EACR,MAAM,CAAC,sBAAsB,aAAa,EAC3C;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,OAAO;GACL,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACF;CACD,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,gBAAgB;GACzB;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;AAEF,gBAAgB,cAAc;AAE9B,IAAM,kBAAkB,OAAO,MAAM,EACnC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAcF,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,YAAY,QAAM,YAC5B,EAAE,OAAO,QAAQ,MAAM,GAAG,QAAQ,QAAQ;CACzC,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,GAAG,EAC5D,CAAC,KAAK,CACP;AAED,QACE,wBAAA,cAAC,iBAAD;EACO;EACL,IAAG;EACH,MAAM,SAAS,WAAW,SAAS;EACnC,WAAW,SAAS,WAAW,YAAY,KAAA;EAC3C,SAAS,SAAS,WAAW,WAAW,KAAA;EACxC,MAAM;EACN,GAAK;EACL,CAAA;EAGP;AAED,UAAU,cAAc;AAkBxB,IAAa,QAAQ,QAAM,YAEvB,EACE,WACA,OAAO,MACP,aAAa,YACb,OACA,OACA,UACA,OACA,GAAG,QAEL,QACG;AACH,QACE,wBAAA,cAAC,iBAAD;EACQ;EACM;EACL;EACG;EACH;EACI;EACJ;EAGS,EADhB,wBAAA,cAAC,WAAD;EAAiB;EAAW;EAAe;EAAU,GAAI;EAAQ,CAAA,CACjD;EAGvB;AAED,MAAM,cAAc"}

package/dist/components/input-field/InputField.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWr
 import { InputProps } from '../../components/input/Input';
 type InputFieldProps = InputProps & FieldElementWrapperProps;
 export declare const InputField: {
-    ({ className, label, name, validation, prompt, description, hideLabel, appearance, ...remainingProps }: InputFieldProps): React.JSX.Element;
+    ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...remainingProps }: InputFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/input-field/InputField.js CHANGED Viewed

@@ -5,12 +5,13 @@ import { Input } from "../input/Input.js";
 import * as React$1 from "react";
 import { useFormContext } from "react-hook-form";
 //#region src/components/input-field/InputField.tsx
-var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, ...remainingProps }) => {
+var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...remainingProps }) => {
 	const { register } = 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,
@@ -26,6 +27,7 @@ var InputField = ({ className, label, name, validation, prompt, description, hid
 		name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps
 	}));

package/dist/components/input-field/InputField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputField.js","names":[],"sources":["../../../src/components/input-field/InputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Input, InputProps } from '~/components/input/Input'\n\ntype InputFieldProps = InputProps & FieldElementWrapperProps\n\nexport const InputField = ({\n className,\n label,\n name,\n validation,\n prompt,\n description,\n hideLabel,\n appearance,\n ...remainingProps\n}: InputFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\n\n const ref = validation ? register(validation) : register\n const formAppearance = context?.appearance \|\| appearance\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 <Input\n id={name}\n name={name}\n ref={ref}\n appearance={formAppearance}\n {...(error && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nInputField.displayName = 'InputField'\n"],"mappings":";;;;;;;AAaA,IAAa,cAAc,EACzB,WACA,OACA,MACA,YACA,QACA,aACA,WACA,YACA,GAAG,qBACkB;CACrB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;~~AAE9C~~,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;~~EAUC~~,~~EARb~~,wBAAA,cAAC,OAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,WAAW,cAAc"}
1	+ {"version":3,"file":"InputField.js","names":[],"sources":["../../../src/components/input-field/InputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Input, InputProps } from '~/components/input/Input'\n\ntype InputFieldProps = InputProps & FieldElementWrapperProps\n\nexport const InputField = ({\n className,\n label,\n name,\n validation,\n prompt,\n description,\n hideLabel,\n appearance,\n theme,\n ...remainingProps\n}: InputFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\n\n const ref = validation ? register(validation) : register\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 <Input\n id={name}\n name={name}\n ref={ref}\n appearance={formAppearance}\n theme={formTheme}\n {...(error && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nInputField.displayName = 'InputField'\n"],"mappings":";;;;;;;AAaA,IAAa,cAAc,EACzB,WACA,OACA,MACA,YACA,QACA,aACA,WACA,YACA,OACA,GAAG,qBACkB;CACrB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,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;EAWC,EATb,wBAAA,cAAC,OAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,OAAO;EACP,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,WAAW,cAAc"}

package/dist/components/number-input/NumberInput.d.ts CHANGED Viewed

@@ -10,6 +10,7 @@ export interface NumberInputProps {
     readonly?: boolean;
     size?: 'sm' | 'md' | 'lg';
     appearance?: 'standard' | 'modern';
+    theme?: 'white' | 'grey';
     emphasis?: 'bold';
     onValueChange?: (value: number) => void;
     stepperButtonLabels?: {

package/dist/components/number-input/NumberInput.js CHANGED Viewed

@@ -16,7 +16,7 @@ var NumberInputContainer = styled("div", {
 		emphasis: { bold: ["gap-0"] }
 	}
 });
-var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, disabled: isDisabled = false, readonly: isReadOnly = false, size = "md", stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance = "standard", emphasis, ...rest }, ref) => {
+var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, disabled: isDisabled = false, readonly: isReadOnly = false, size = "md", stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance = "standard", theme, emphasis, ...rest }, ref) => {
 	const [internalValue, setInternalValue] = React$1.useState(value || defaultValue);
 	React$1.useEffect(() => {
 		if (typeof value !== "undefined") setInternalValue(value);
@@ -109,6 +109,7 @@ var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange,
 		onKeyDown,
 		size,
 		appearance,
+		theme,
 		state: externalState || (hasError ? "error" : void 0),
 		"aria-invalid": externalAriaInvalid || hasError || void 0,
 		className: clsx("rounded-none", "w-16", "[&_>_input]:text-center", "disabled:opacity-30", "disabled:pointer-events-none", emphasis === "bold" && [
@@ -140,6 +141,7 @@ var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange,
 		className: clsx(emphasis !== "bold" && "border-r-none rounded-r-none"),
 		size: iconSize,
 		fieldAppearance: appearance,
+		fieldTheme: theme,
 		emphasis,
 		disabled: isAtMin || isDisabled,
 		showTooltip: isAtMin && !isDisabled,
@@ -151,6 +153,7 @@ var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange,
 		className: clsx(emphasis !== "bold" && "border-l-none rounded-l-none"),
 		size: iconSize,
 		fieldAppearance: appearance,
+		fieldTheme: theme,
 		emphasis,
 		disabled: isAtMax || isDisabled,
 		showTooltip: isAtMax && !isDisabled,