@atom-learning/components 8.0.3 → 9.0.0-beta.0

package/dist/components/image/Image.js

@@ -1,6 +1,7 @@
 import { styled } from "../../styled.js";
-import * as React$1 from "react";
-import { jsx } from "react/jsx-runtime";
+import { ImageCredit } from "./ImageCredit.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/image/Image.tsx
 var StyledImage = styled("img", {
 	base: ["align-middle", "max-w-full"],
@@ -11,13 +12,25 @@ var StyledImage = styled("img", {
 		"[[width]]:[[height]]:h-auto",
 		"[[width]]:w-auto"
 	] } }
+}, { enablePolymorphism: false });
+var ImageComponent = ({ children, ref, ...props }) => {
+	if (!children) return /* @__PURE__ */ jsx(StyledImage, {
+		...props,
+		ref
+	});
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "relative overflow-hidden",
+		children: [/* @__PURE__ */ jsx(StyledImage, {
+			...props,
+			ref
+		}), children]
+	});
+};
+var Image = /* @__PURE__ */ Object.assign(ImageComponent, {
+	Credit: ImageCredit,
+	displayName: "Image"
 });
-var Image = React$1.forwardRef((props, ref) => /* @__PURE__ */ jsx(StyledImage, {
-	...props,
-	ref
-}));
-Image.displayName = "Image";
 //#endregion
-export { Image };
+export { Image, StyledImage };
 
 //# sourceMappingURL=Image.js.map

package/dist/components/image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":[],"sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\n// default styling lifted from https://www.zachleat.com/web/fluid-images/#copy-and-paste\n// (potentially unnecessary now we've moved to Tailwind)\nexport const StyledImage = styled('img', {\n  base: ['align-middle', 'max-w-full'],\n  variants: {\n    fluid: {\n      true: [\n        \"[[src$='.svg']]:h-auto\",\n        \"[[src$='.svg']]:max-w-none\",\n        \"[[src$='.svg']]:w-full\",\n        '[[width]]:[[height]]:h-auto',\n        '[[width]]:w-auto'\n      ]\n    }\n  }\n})\n\ntype ImageProps = Override<\n  React.ComponentProps<typeof StyledImage>,\n  { as?: never }\n>\n\nexport const Image = React.forwardRef<HTMLImageElement, ImageProps>(\n  (props, ref) => <StyledImage {...props} ref={ref} />\n)\n\nImage.displayName = 'Image'\n"],"mappings":";;;;AAOA,IAAa,cAAc,OAAO,OAAO;CACvC,MAAM,CAAC,gBAAgB,aAAa;CACpC,UAAU,EACR,OAAO,EACL,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD,EACF,EACF;CACF,CAAC;AAOF,IAAa,QAAQ,QAAM,YACxB,OAAO,QAAQ,oBAAC,aAAD;CAAa,GAAI;CAAY;CAAO,CAAA,CACrD;AAED,MAAM,cAAc"}
+{"version":3,"file":"Image.js","names":[],"sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { ImageCredit } from './ImageCredit'\n\n// default styling lifted from https://www.zachleat.com/web/fluid-images/#copy-and-paste\n// (potentially unnecessary now we've moved to Tailwind)\nexport const StyledImage = styled(\n  'img',\n  {\n    base: ['align-middle', 'max-w-full'],\n    variants: {\n      fluid: {\n        true: [\n          \"[[src$='.svg']]:h-auto\",\n          \"[[src$='.svg']]:max-w-none\",\n          \"[[src$='.svg']]:w-full\",\n          '[[width]]:[[height]]:h-auto',\n          '[[width]]:w-auto'\n        ]\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\ntype ImageProps = Override<\n  React.ComponentProps<typeof StyledImage>,\n  { children?: React.ReactNode }\n>\n\nconst ImageComponent = ({ children, ref, ...props }: ImageProps) => {\n  if (!children) {\n    return <StyledImage {...props} ref={ref} />\n  }\n\n  return (\n    <figure className=\"relative overflow-hidden\">\n      <StyledImage {...props} ref={ref} />\n      {children}\n    </figure>\n  )\n}\n\nexport const Image = /* @__PURE__ */ Object.assign(ImageComponent, {\n  Credit: ImageCredit,\n  displayName: 'Image'\n})\n"],"mappings":";;;;;AAQA,IAAa,cAAc,OACzB,OACA;CACE,MAAM,CAAC,gBAAgB,YAAY;CACnC,UAAU,EACR,OAAO,EACL,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF,EACF,EACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAOA,IAAM,kBAAkB,EAAE,UAAU,KAAK,GAAG,YAAwB;CAClE,IAAI,CAAC,UACH,OAAO,oBAAC,aAAD;EAAa,GAAI;EAAY;CAAM,CAAA;CAG5C,OACE,qBAAC,UAAD;EAAQ,WAAU;YAAlB,CACE,oBAAC,aAAD;GAAa,GAAI;GAAY;EAAM,CAAA,GAClC,QACK;;AAEZ;AAEA,IAAa,QAAwB,uBAAO,OAAO,gBAAgB;CACjE,QAAQ;CACR,aAAa;AACf,CAAC"}

package/dist/components/image/ImageCredit.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export type ImageCreditProps = {
+    /** Creator name, shown once the credit is revealed. */
+    author: string;
+    /** Link to the author / image source. */
+    sourceUrl?: string;
+    /** Human-readable license name, e.g. "CC BY 4.0". */
+    licenseName?: string;
+    /** Link to the license terms. */
+    licenseUrl?: string;
+};
+export declare function ImageCredit({ author, sourceUrl, licenseName, licenseUrl }: ImageCreditProps): React.JSX.Element;
+export declare namespace ImageCredit {
+    var displayName: string;
+}

package/dist/components/image/ImageCredit.js

@@ -0,0 +1,69 @@
+import { cn } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import { Link } from "../link/Link.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Close, Info } from "@atom-learning/icons";
+//#region src/components/image/ImageCredit.tsx
+var overlayControlClasses = [
+	"not-disabled:hover:bg-black/75",
+	"focus:outline-none",
+	"focus-visible:ring-2",
+	"focus-visible:ring-white/70"
+];
+var overlayLinkClasses = [
+	"text-white",
+	"underline-offset-2",
+	"hover:text-white",
+	"focus:text-white",
+	"active:text-white"
+];
+var ImageCredit = ({ author, sourceUrl, licenseName, licenseUrl }) => {
+	const [expanded, setExpanded] = React$1.useState(false);
+	if (!expanded) return /* @__PURE__ */ jsx(ActionIcon, {
+		label: "Show image credit",
+		theme: "white",
+		isRounded: true,
+		hasTooltip: false,
+		onClick: () => setExpanded(true),
+		className: cn("absolute", "right-2", "bottom-2", "bg-black/60", "backdrop-blur-sm", overlayControlClasses),
+		children: /* @__PURE__ */ jsx(Icon, { is: Info })
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("absolute", "right-2", "bottom-2", "flex", "max-w-[calc(100%-1rem)]", "items-center", "gap-1", "rounded-md", "bg-black/60", "pl-2", "text-xs", "text-white", "backdrop-blur-sm"),
+		children: [/* @__PURE__ */ jsxs("figcaption", {
+			className: "flex min-w-0 flex-wrap items-center gap-x-1",
+			children: [sourceUrl ? /* @__PURE__ */ jsx(Link, {
+				href: sourceUrl,
+				size: "xs",
+				className: cn(overlayLinkClasses),
+				children: author
+			}) : /* @__PURE__ */ jsx("span", { children: author }), licenseName ? /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-x-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "·"
+				}), licenseUrl ? /* @__PURE__ */ jsx(Link, {
+					href: licenseUrl,
+					size: "xs",
+					className: cn(overlayLinkClasses),
+					children: licenseName
+				}) : /* @__PURE__ */ jsx("span", { children: licenseName })]
+			}) : null]
+		}), /* @__PURE__ */ jsx(ActionIcon, {
+			label: "Hide credit",
+			theme: "white",
+			isRounded: true,
+			hasTooltip: false,
+			onClick: () => setExpanded(false),
+			className: cn(overlayControlClasses),
+			children: /* @__PURE__ */ jsx(Icon, { is: Close })
+		})]
+	});
+};
+ImageCredit.displayName = "Image.Credit";
+//#endregion
+export { ImageCredit };
+
+//# sourceMappingURL=ImageCredit.js.map

package/dist/components/image/ImageCredit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCredit.js","names":[],"sources":["../../../src/components/image/ImageCredit.tsx"],"sourcesContent":["import { Close, Info } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Link } from '../link/Link'\n\nexport type ImageCreditProps = {\n  /** Creator name, shown once the credit is revealed. */\n  author: string\n  /** Link to the author / image source. */\n  sourceUrl?: string\n  /** Human-readable license name, e.g. \"CC BY 4.0\". */\n  licenseName?: string\n  /** Link to the license terms. */\n  licenseUrl?: string\n}\n\n// Shared surface/interaction styles for the controls overlaid on the image.\nconst overlayControlClasses = [\n  'not-disabled:hover:bg-black/75',\n  'focus:outline-none',\n  'focus-visible:ring-2',\n  'focus-visible:ring-white/70'\n]\nconst overlayLinkClasses = [\n  'text-white',\n  'underline-offset-2',\n  'hover:text-white',\n  'focus:text-white',\n  'active:text-white'\n]\n\nexport const ImageCredit = ({\n  author,\n  sourceUrl,\n  licenseName,\n  licenseUrl\n}: ImageCreditProps) => {\n  const [expanded, setExpanded] = React.useState(false)\n\n  if (!expanded) {\n    return (\n      <ActionIcon\n        label=\"Show image credit\"\n        theme=\"white\"\n        isRounded\n        hasTooltip={false}\n        onClick={() => setExpanded(true)}\n        className={cn(\n          'absolute',\n          'right-2',\n          'bottom-2',\n          'bg-black/60',\n          'backdrop-blur-sm',\n          overlayControlClasses\n        )}\n      >\n        <Icon is={Info} />\n      </ActionIcon>\n    )\n  }\n\n  return (\n    <div\n      className={cn(\n        'absolute',\n        'right-2',\n        'bottom-2',\n        'flex',\n        'max-w-[calc(100%-1rem)]',\n        'items-center',\n        'gap-1',\n        'rounded-md',\n        'bg-black/60',\n        'pl-2',\n        'text-xs',\n        'text-white',\n        'backdrop-blur-sm'\n      )}\n    >\n      {/* Author and licence sit on one line when they fit, and wrap onto\n          separate rows (each kept whole) when they don't. */}\n      <figcaption className=\"flex min-w-0 flex-wrap items-center gap-x-1\">\n        {sourceUrl ? (\n          <Link href={sourceUrl} size=\"xs\" className={cn(overlayLinkClasses)}>\n            {author}\n          </Link>\n        ) : (\n          <span>{author}</span>\n        )}\n        {licenseName ? (\n          <span className=\"flex items-center gap-x-1\">\n            <span aria-hidden=\"true\">·</span>\n            {licenseUrl ? (\n              <Link\n                href={licenseUrl}\n                size=\"xs\"\n                className={cn(overlayLinkClasses)}\n              >\n                {licenseName}\n              </Link>\n            ) : (\n              <span>{licenseName}</span>\n            )}\n          </span>\n        ) : null}\n      </figcaption>\n      <ActionIcon\n        label=\"Hide credit\"\n        theme=\"white\"\n        isRounded\n        hasTooltip={false}\n        onClick={() => setExpanded(false)}\n        className={cn(overlayControlClasses)}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </div>\n  )\n}\n\nImageCredit.displayName = 'Image.Credit'\n"],"mappings":";;;;;;;;AAoBA,IAAM,wBAAwB;CAC5B;CACA;CACA;CACA;AACF;AACA,IAAM,qBAAqB;CACzB;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,eAAe,EAC1B,QACA,WACA,aACA,iBACsB;CACtB,MAAM,CAAC,UAAU,eAAe,QAAM,SAAS,KAAK;CAEpD,IAAI,CAAC,UACH,OACE,oBAAC,YAAD;EACE,OAAM;EACN,OAAM;EACN,WAAA;EACA,YAAY;EACZ,eAAe,YAAY,IAAI;EAC/B,WAAW,GACT,YACA,WACA,YACA,eACA,oBACA,qBACF;YAEA,oBAAC,MAAD,EAAM,IAAI,KAAO,CAAA;CACP,CAAA;CAIhB,OACE,qBAAC,OAAD;EACE,WAAW,GACT,YACA,WACA,YACA,QACA,2BACA,gBACA,SACA,cACA,eACA,QACA,WACA,cACA,kBACF;YAfF,CAmBE,qBAAC,cAAD;GAAY,WAAU;aAAtB,CACG,YACC,oBAAC,MAAD;IAAM,MAAM;IAAW,MAAK;IAAK,WAAW,GAAG,kBAAkB;cAC9D;GACG,CAAA,IAEN,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,GAErB,cACC,qBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,oBAAC,QAAD;KAAM,eAAY;eAAO;IAAO,CAAA,GAC/B,aACC,oBAAC,MAAD;KACE,MAAM;KACN,MAAK;KACL,WAAW,GAAG,kBAAkB;eAE/B;IACG,CAAA,IAEN,oBAAC,QAAD,EAAA,UAAO,YAAkB,CAAA,CAEvB;QACJ,IACM;MACZ,oBAAC,YAAD;GACE,OAAM;GACN,OAAM;GACN,WAAA;GACA,YAAY;GACZ,eAAe,YAAY,KAAK;GAChC,WAAW,GAAG,qBAAqB;aAEnC,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA,CACT;;AAET;AAEA,YAAY,cAAc"}

package/dist/components/index.d.ts

@@ -2,9 +2,12 @@ export type { ValidationOptions } from './form/validation';
 export { Accordion } from './accordion/Accordion';
 export { ActionIcon } from './action-icon/ActionIcon';
 export { AlertDialog } from './alert-dialog/AlertDialog';
-export { useAlert, AlertProvider } from './alert-dialog/alert-context/AlertContext';
+export { useAlert } from './alert-dialog/AlertDialog.context';
+export declare const Alert: {
+    Provider: ({ children }: React.PropsWithChildren<unknown>) => import("react").JSX.Element;
+};
 export { Avatar } from './avatar/Avatar';
-export { Badge, type TBadgeProps } from './badge/Badge';
+export { Badge, type BadgeProps } from './badge/Badge';
 export { BannerRegular } from './banner/banner-regular/BannerRegular';
 export { BannerSlim } from './banner/banner-slim/BannerSlim';
 export { Box } from './box/Box';
@@ -21,7 +24,7 @@ export { ChipToggleGroup } from './chip-toggle-group';
 export { Combobox } from './combobox/Combobox';
 export { CreatePasswordField } from './create-password-field/CreatePasswordField';
 export { DataTable } from './data-table/DataTable';
-export { useDataTable } from './data-table/DataTableContext';
+export { useDataTable } from './data-table/DataTable.context';
 export { DateField } from './date-field/DateField';
 export { DateInput } from './date-input/DateInput';
 export { Dialog } from './dialog/Dialog';
@@ -71,7 +74,7 @@ export { SelectField } from './select-field/SelectField';
 export { SelectMenu } from './select-menu/SelectMenu';
 export { SelectMenuField } from './select-menu-field/SelectMenuField';
 export { SideBar } from './side-bar/SideBar';
-export { useSidebarState } from './side-bar/SideBarContext';
+export { useSidebarState } from './side-bar/SideBar.context';
 export { Slider } from './slider/Slider';
 export { SliderField } from './slider-field/SliderField';
 export * as Sortable from './sortable';
@@ -87,8 +90,7 @@ export { TextareaField } from './textarea-field/TextareaField';
 export { Tile } from './tile/Tile';
 export { TileInteractive } from './tile-interactive/TileInteractive';
 export { TileToggleGroup } from './tile-toggle-group';
-export { ToastProvider, toast } from './toast/ToastProvider';
-export { Toast } from './toast/Toast';
+export { Toast, toast } from './toast';
 export { ToggleGroup } from './toggle-group';
 export { Tooltip } from './tooltip/Tooltip';
 export { TopBar } from './top-bar/TopBar';

package/dist/components/index.js

@@ -0,0 +1,105 @@
+import { Loader } from "./loader/Loader.js";
+import { Button, StyledButton } from "./button/Button.js";
+import { Heading } from "./heading/Heading.js";
+import { Text } from "./text/Text.js";
+import { AlertDialog } from "./alert-dialog/AlertDialog.js";
+import { Icon } from "./icon/Icon.js";
+import { AlertProvider, useAlert } from "./alert-dialog/AlertDialog.context.js";
+import { Accordion } from "./accordion/Accordion.js";
+import { Tooltip } from "./tooltip/Tooltip.js";
+import { ActionIcon } from "./action-icon/ActionIcon.js";
+import { Link, StyledLink } from "./link/Link.js";
+import { Image } from "./image/Image.js";
+import { Avatar } from "./avatar/Avatar.js";
+import { Badge } from "./badge/Badge.js";
+import { Dismissible } from "./dismissible/index.js";
+import { BannerRegular } from "./banner/banner-regular/BannerRegular.js";
+import { BannerSlim } from "./banner/banner-slim/BannerSlim.js";
+import { Box } from "./box/Box.js";
+import { Carousel, useCarousel } from "./carousel/Carousel.js";
+import { Checkbox } from "./checkbox/Checkbox.js";
+import { CheckboxGroup } from "./checkbox-group/CheckboxGroup.js";
+import { Tree } from "./tree/Tree.js";
+import { CheckboxTree } from "./checkbox-tree/CheckboxTree.js";
+import { InlineMessage } from "./inline-message/InlineMessage.js";
+import { Label } from "./label/Label.js";
+import { RadioButton } from "./radio-button/RadioButton.js";
+import { InlineFieldWrapper } from "./field-wrapper/InlineFieldWrapper.js";
+import { CheckboxField } from "./checkbox-field/CheckboxField.js";
+import { Chip } from "./chip/Chip.js";
+import { ChipGroup } from "./chip/ChipGroup.js";
+import { DismissibleGroup } from "./dismissible-group/index.js";
+import { ChipDismissibleGroup } from "./chip-dismissible-group/index.js";
+import { ChipToggleGroup } from "./chip-toggle-group/index.js";
+import { Combobox } from "./combobox/Combobox.js";
+import { FieldWrapper } from "./field-wrapper/FieldWrapper.js";
+import { Input, InputBackground, InputText } from "./input/Input.js";
+import { PasswordInput } from "./password-input/PasswordInput.js";
+import { PasswordField } from "./password-field/PasswordField.js";
+import { CreatePasswordField } from "./create-password-field/CreatePasswordField.js";
+import { useDataTable } from "./data-table/DataTable.context.js";
+import { Table } from "./table/Table.js";
+import { Divider } from "./divider/Divider.js";
+import { EmptyState } from "./empty-state/EmptyState.js";
+import { SearchInput } from "./search-input/SearchInput.js";
+import { sortable_exports } from "./sortable/index.js";
+import { Popover } from "./popover/Popover.js";
+import { Pagination } from "./pagination/Pagination.js";
+import { DataTable } from "./data-table/DataTable.js";
+import { DateInput } from "./date-input/DateInput.js";
+import { DateField } from "./date-field/DateField.js";
+import { Dialog } from "./dialog/Dialog.js";
+import { Drawer } from "./drawer/Drawer.js";
+import { DropdownMenu } from "./dropdown-menu/DropdownMenu.js";
+import { FileInput } from "./file-input/FileInput.js";
+import { Flex } from "./flex/Flex.js";
+import { Form } from "./form/Form.js";
+import { Grid } from "./grid/Grid.js";
+import { InputField } from "./input-field/InputField.js";
+import { List } from "./list/List.js";
+import { MarkdownContent } from "./markdown-content/MarkdownContent.js";
+import { NavigationMenu } from "./navigation/NavigationMenu.js";
+import { useSidebarState } from "./side-bar/SideBar.context.js";
+import { NavigationMenuVertical } from "./navigation-menu-vertical/NavigationMenuVertical.js";
+import { NotificationBadge } from "./notification-badge/NotificationBadge.js";
+import { NumberInput } from "./number-input/NumberInput.js";
+import { NumberInputField } from "./number-input-field/NumberInputField.js";
+import { ProgressBar } from "./progress-bar/ProgressBar.js";
+import { RadioButtonGroup } from "./radio-button/RadioButtonGroup.js";
+import { RadioButtonField } from "./radio-button-field/RadioButtonField.js";
+import { RadioCard } from "./radio-card/RadioCard.js";
+import { RadioCardGroup } from "./radio-card/RadioCardGroup.js";
+import { SearchField } from "./search-field/SearchField.js";
+import { SectionMessage } from "./section-message/SectionMessage.js";
+import { Select } from "./select/Select.js";
+import { SelectField } from "./select-field/SelectField.js";
+import { SelectMenu } from "./select-menu/SelectMenu.js";
+import { SelectMenuField } from "./select-menu-field/SelectMenuField.js";
+import { SideBar } from "./side-bar/SideBar.js";
+import { Slider } from "./slider/Slider.js";
+import { SliderField } from "./slider-field/SliderField.js";
+import { Tile } from "./tile/Tile.js";
+import { skeleton_loader_exports } from "./skeleton-loader/index.js";
+import { Spacer } from "./spacer/Spacer.js";
+import { Stepper } from "./stepper/Stepper.js";
+import { Switch } from "./switch/Switch.js";
+import { Tabs } from "./tabs/Tabs.js";
+import { Textarea } from "./textarea/Textarea.js";
+import { TextareaField } from "./textarea-field/TextareaField.js";
+import { TileInteractive } from "./tile-interactive/TileInteractive.js";
+import { TileToggleGroup } from "./tile-toggle-group/index.js";
+import { toast } from "./toast/ToastProvider.js";
+import { Toast } from "./toast/index.js";
+import { ToggleGroup } from "./toggle-group/index.js";
+import { TopBar } from "./top-bar/TopBar.js";
+import { Video } from "./video/Video.js";
+import { KeyboardShortcut } from "./keyboard-shortcut/index.js";
+import { SegmentedControl } from "./segmented-control/SegmentedControl.js";
+import { FileDrop } from "./file-drop/FileDrop.js";
+import { useFileDrop } from "./file-drop/useFileDrop.js";
+//#region src/components/index.ts
+var Alert = { Provider: AlertProvider };
+//#endregion
+export { Accordion, ActionIcon, Alert, AlertDialog, Avatar, Badge, BannerRegular, BannerSlim, Box, Button, Carousel, Checkbox, CheckboxField, CheckboxGroup, CheckboxTree, Chip, ChipDismissibleGroup, ChipGroup, ChipToggleGroup, Combobox, CreatePasswordField, DataTable, DateField, DateInput, Dialog, Dismissible, DismissibleGroup, Divider, Drawer, DropdownMenu, EmptyState, FieldWrapper, FileDrop, FileInput, Flex, Form, Grid, Heading, Icon, Image, InlineFieldWrapper, InlineMessage, Input, InputBackground, InputField, InputText, KeyboardShortcut, Label, Link, List, Loader, MarkdownContent, NavigationMenu, NavigationMenuVertical, NotificationBadge, NumberInput, NumberInputField, Pagination, PasswordField, PasswordInput, Popover, ProgressBar, RadioButton, RadioButtonField, RadioButtonGroup, RadioCard, RadioCardGroup, SearchField, SearchInput, SectionMessage, SegmentedControl, Select, SelectField, SelectMenu, SelectMenuField, SideBar, skeleton_loader_exports as Skeleton, Slider, SliderField, sortable_exports as Sortable, Spacer, Stepper, StyledButton, StyledLink, Switch, Table, Tabs, Text, Textarea, TextareaField, Tile, TileInteractive, TileToggleGroup, Toast, ToggleGroup, Tooltip, TopBar, Tree, Video, toast, useAlert, useCarousel, useDataTable, useFileDrop, useSidebarState };
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["import { AlertProvider } from './alert-dialog/AlertDialog.context'\n\nexport type { ValidationOptions } from './form/validation'\n\nexport { Accordion } from './accordion/Accordion'\nexport { ActionIcon } from './action-icon/ActionIcon'\nexport { AlertDialog } from './alert-dialog/AlertDialog'\nexport { useAlert } from './alert-dialog/AlertDialog.context'\n\n// The alert system's provider lives under the `Alert` name; the alert UI\n// itself is imperative (`useAlert`), so there is no root component to render.\nexport const Alert = { Provider: AlertProvider }\nexport { Avatar } from './avatar/Avatar'\nexport { Badge, type BadgeProps } from './badge/Badge'\nexport { BannerRegular } from './banner/banner-regular/BannerRegular'\nexport { BannerSlim } from './banner/banner-slim/BannerSlim'\nexport { Box } from './box/Box'\nexport { Button, StyledButton } from './button/Button'\nexport { Carousel, useCarousel } from './carousel/Carousel'\nexport { Checkbox } from './checkbox/Checkbox'\nexport { CheckboxGroup } from './checkbox-group/CheckboxGroup'\nexport { CheckboxTree } from './checkbox-tree/CheckboxTree'\nexport { CheckboxField } from './checkbox-field/CheckboxField'\nexport { Chip } from './chip/Chip'\nexport { ChipGroup } from './chip/ChipGroup'\nexport { ChipDismissibleGroup } from './chip-dismissible-group'\nexport { ChipToggleGroup } from './chip-toggle-group'\nexport { Combobox } from './combobox/Combobox'\nexport { CreatePasswordField } from './create-password-field/CreatePasswordField'\nexport { DataTable } from './data-table/DataTable'\nexport { useDataTable } from './data-table/DataTable.context'\nexport { DateField } from './date-field/DateField'\nexport { DateInput } from './date-input/DateInput'\nexport { Dialog } from './dialog/Dialog'\nexport { Dismissible } from './dismissible'\nexport { DismissibleGroup } from './dismissible-group'\nexport { Divider } from './divider/Divider'\nexport { Drawer } from './drawer/Drawer'\nexport { DropdownMenu } from './dropdown-menu/DropdownMenu'\nexport { EmptyState } from './empty-state/EmptyState'\nexport { FieldWrapper } from './field-wrapper/FieldWrapper'\nexport { InlineFieldWrapper } from './field-wrapper/InlineFieldWrapper'\nexport { FileInput } from './file-input/FileInput'\nexport { Flex } from './flex/Flex'\nexport { Form } from './form/Form'\nexport { Grid } from './grid/Grid'\nexport { Heading, type HeadingProps } from './heading/Heading'\nexport { Icon } from './icon/Icon'\nexport { Image } from './image/Image'\nexport { InlineMessage } from './inline-message/InlineMessage'\nexport { Input, InputBackground, InputText } from './input/Input'\nexport { InputField } from './input-field/InputField'\nexport { Label } from './label/Label'\nexport { Link, StyledLink } from './link/Link'\nexport { List } from './list/List'\nexport { Loader } from './loader/Loader'\nexport { MarkdownContent } from './markdown-content/MarkdownContent'\nexport { NavigationMenu } from './navigation/NavigationMenu'\nexport { NavigationMenuVertical } from './navigation-menu-vertical/NavigationMenuVertical'\nexport { NotificationBadge } from './notification-badge/NotificationBadge'\nexport { NumberInput } from './number-input/NumberInput'\nexport { NumberInputField } from './number-input-field/NumberInputField'\nexport { Pagination } from './pagination/Pagination'\nexport { PasswordField } from './password-field/PasswordField'\nexport { PasswordInput } from './password-input/PasswordInput'\nexport { Popover } from './popover/Popover'\nexport { ProgressBar } from './progress-bar/ProgressBar'\nexport { RadioButton } from './radio-button/RadioButton'\nexport { RadioButtonGroup } from './radio-button/RadioButtonGroup'\nexport { RadioButtonField } from './radio-button-field/RadioButtonField'\nexport { RadioCard } from './radio-card/RadioCard'\nexport { RadioCardGroup } from './radio-card/RadioCardGroup'\nexport { SearchField } from './search-field/SearchField'\nexport { SearchInput } from './search-input/SearchInput'\nexport { SectionMessage } from './section-message/SectionMessage'\nexport { Select } from './select/Select'\nexport { SelectField } from './select-field/SelectField'\nexport { SelectMenu } from './select-menu/SelectMenu'\nexport { SelectMenuField } from './select-menu-field/SelectMenuField'\nexport { SideBar } from './side-bar/SideBar'\nexport { useSidebarState } from './side-bar/SideBar.context'\nexport { Slider } from './slider/Slider'\nexport { SliderField } from './slider-field/SliderField'\nexport * as Sortable from './sortable'\nexport * as Skeleton from './skeleton-loader'\nexport { Spacer } from './spacer/Spacer'\nexport { Stepper } from './stepper/Stepper'\nexport { Switch } from './switch/Switch'\nexport { Table } from './table/Table'\nexport { Tabs } from './tabs/Tabs'\nexport { Text } from './text/Text'\nexport { Textarea } from './textarea/Textarea'\nexport { TextareaField } from './textarea-field/TextareaField'\nexport { Tile } from './tile/Tile'\nexport { TileInteractive } from './tile-interactive/TileInteractive'\nexport { TileToggleGroup } from './tile-toggle-group'\nexport { Toast, toast } from './toast'\nexport { ToggleGroup } from './toggle-group'\nexport { Tooltip } from './tooltip/Tooltip'\nexport { TopBar } from './top-bar/TopBar'\nexport { Tree } from './tree/Tree'\nexport { Video } from './video/Video'\nexport { KeyboardShortcut } from './keyboard-shortcut'\nexport { SegmentedControl } from './segmented-control/SegmentedControl'\nexport { FileDrop } from './file-drop/FileDrop'\nexport { useFileDrop } from './file-drop/useFileDrop'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAa,QAAQ,EAAE,UAAU,cAAc"}

package/dist/components/inline-message/InlineMessage.config.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import { InlineMessageTheme } from './InlineMessage.types';
+import type { InlineMessageTheme } from './InlineMessage.types';
 export declare const INLINE_MESSAGE_ICONS: Record<InlineMessageTheme, React.FC<React.SVGProps<SVGSVGElement>>>;

package/dist/components/inline-message/InlineMessage.config.js

@@ -1,3 +1,4 @@
+import "react";
 import { Danger, Error, Info, OkCircle } from "@atom-learning/icons";
 //#region src/components/inline-message/InlineMessage.config.ts
 var INLINE_MESSAGE_ICONS = {

package/dist/components/inline-message/InlineMessage.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineMessage.config.js","names":[],"sources":["../../../src/components/inline-message/InlineMessage.config.ts"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { InlineMessageTheme } from './InlineMessage.types'\n\nexport const INLINE_MESSAGE_ICONS: Record<\n  InlineMessageTheme,\n  React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n  success: OkCircle,\n  warning: Danger,\n  info: Info,\n  neutral: Info,\n  error: Error\n}\n"],"mappings":";;AAKA,IAAa,uBAGT;CACF,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;CACR"}
+{"version":3,"file":"InlineMessage.config.js","names":[],"sources":["../../../src/components/inline-message/InlineMessage.config.ts"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport type { InlineMessageTheme } from './InlineMessage.types'\n\nexport const INLINE_MESSAGE_ICONS: Record<\n  InlineMessageTheme,\n  React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n  success: OkCircle,\n  warning: Danger,\n  info: Info,\n  neutral: Info,\n  error: Error\n}\n"],"mappings":";;;AAKA,IAAa,uBAGT;CACF,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;AACT"}

package/dist/components/inline-message/InlineMessage.d.ts

@@ -1,12 +1,10 @@
 import * as React from 'react';
-declare const InlineMessageContainer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & {
-    theme?: "neutral" | "success" | "warning" | "info" | "error" | undefined;
-} & {
-    as?: React.ElementType;
+declare const InlineMessageContainer: import("../..").PolymorphicComponent<"div", {
+    theme?: "error" | "info" | "neutral" | "success" | "warning" | undefined;
 }>;
-type TInlineMessageProps = React.ComponentProps<typeof InlineMessageContainer> & {
+type InlineMessageProps = React.ComponentProps<typeof InlineMessageContainer> & {
     showIcon?: boolean;
     size?: 'xs' | 'sm' | 'md';
 };
-export declare const InlineMessage: ({ className, showIcon, theme, size, children, ...rest }: TInlineMessageProps) => React.JSX.Element;
+export declare const InlineMessage: ({ className, showIcon, theme, size, children, ...rest }: InlineMessageProps) => React.JSX.Element;
 export {};

package/dist/components/inline-message/InlineMessage.js

@@ -1,6 +1,6 @@
 import { styled } from "../../styled.js";
-import { Icon } from "../icon/Icon.js";
 import { Text } from "../text/Text.js";
+import { Icon } from "../icon/Icon.js";
 import { INLINE_MESSAGE_ICONS } from "./InlineMessage.config.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/inline-message/InlineMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineMessage.js","names":[],"sources":["../../../src/components/inline-message/InlineMessage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\n\nimport { INLINE_MESSAGE_ICONS } from './InlineMessage.config'\nimport { InlineMessageTheme } from './InlineMessage.types'\n\nconst InlineMessageContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    theme: {\n      success: ['text-success'],\n      warning: ['[&_svg]:text-warning-dark', 'text-warning-text'],\n      info: ['text-info'],\n      neutral: ['text-grey-800'],\n      error: ['text-danger']\n    }\n  }\n})\n\ntype TInlineMessageProps = React.ComponentProps<\n  typeof InlineMessageContainer\n> & {\n  showIcon?: boolean\n  size?: 'xs' | 'sm' | 'md'\n}\n\nexport const InlineMessage = ({\n  className,\n  showIcon = true,\n  theme = 'error',\n  size = 'sm',\n  children,\n  ...rest\n}: TInlineMessageProps) => (\n  <InlineMessageContainer theme={theme} className={className} {...rest}>\n    {showIcon && (\n      <Icon\n        size=\"sm\"\n        is={INLINE_MESSAGE_ICONS[theme as InlineMessageTheme]}\n        className=\"mr-2\"\n      />\n    )}\n    <Text as=\"span\" size={size} className=\"translate-y-0.5\">\n      {children}\n    </Text>\n  </InlineMessageContainer>\n)\n"],"mappings":";;;;;;;AASA,IAAM,yBAAyB,OAAO,OAAO;CAC3C,MAAM,CAAC,OAAO;CACd,UAAU,EACR,OAAO;EACL,SAAS,CAAC,eAAe;EACzB,SAAS,CAAC,6BAA6B,oBAAoB;EAC3D,MAAM,CAAC,YAAY;EACnB,SAAS,CAAC,gBAAgB;EAC1B,OAAO,CAAC,cAAc;EACvB,EACF;CACF,CAAC;AASF,IAAa,iBAAiB,EAC5B,WACA,WAAW,MACX,QAAQ,SACR,OAAO,MACP,UACA,GAAG,WAEH,qBAAC,wBAAD;CAA+B;CAAkB;CAAW,GAAI;WAAhE,CACG,YACC,oBAAC,MAAD;EACE,MAAK;EACL,IAAI,qBAAqB;EACzB,WAAU;EACV,CAAA,EAEJ,oBAAC,MAAD;EAAM,IAAG;EAAa;EAAM,WAAU;EACnC;EACI,CAAA,CACgB"}
+{"version":3,"file":"InlineMessage.js","names":[],"sources":["../../../src/components/inline-message/InlineMessage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { INLINE_MESSAGE_ICONS } from './InlineMessage.config'\nimport type { InlineMessageTheme } from './InlineMessage.types'\n\nconst InlineMessageContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    theme: {\n      success: ['text-success'],\n      warning: ['[&_svg]:text-warning-dark', 'text-warning-text'],\n      info: ['text-info'],\n      neutral: ['text-grey-800'],\n      error: ['text-danger']\n    }\n  }\n})\n\ntype InlineMessageProps = React.ComponentProps<\n  typeof InlineMessageContainer\n> & {\n  showIcon?: boolean\n  size?: 'xs' | 'sm' | 'md'\n}\n\nexport const InlineMessage = ({\n  className,\n  showIcon = true,\n  theme = 'error',\n  size = 'sm',\n  children,\n  ...rest\n}: InlineMessageProps) => (\n  <InlineMessageContainer theme={theme} className={className} {...rest}>\n    {showIcon && (\n      <Icon\n        size=\"sm\"\n        is={INLINE_MESSAGE_ICONS[theme as InlineMessageTheme]}\n        className=\"mr-2\"\n      />\n    )}\n    <Text as=\"span\" size={size} className=\"translate-y-0.5\">\n      {children}\n    </Text>\n  </InlineMessageContainer>\n)\n"],"mappings":";;;;;;;AAQA,IAAM,yBAAyB,OAAO,OAAO;CAC3C,MAAM,CAAC,MAAM;CACb,UAAU,EACR,OAAO;EACL,SAAS,CAAC,cAAc;EACxB,SAAS,CAAC,6BAA6B,mBAAmB;EAC1D,MAAM,CAAC,WAAW;EAClB,SAAS,CAAC,eAAe;EACzB,OAAO,CAAC,aAAa;CACvB,EACF;AACF,CAAC;AASD,IAAa,iBAAiB,EAC5B,WACA,WAAW,MACX,QAAQ,SACR,OAAO,MACP,UACA,GAAG,WAEH,qBAAC,wBAAD;CAA+B;CAAkB;CAAW,GAAI;WAAhE,CACG,YACC,oBAAC,MAAD;EACE,MAAK;EACL,IAAI,qBAAqB;EACzB,WAAU;CACX,CAAA,GAEH,oBAAC,MAAD;EAAM,IAAG;EAAa;EAAM,WAAU;EACnC;CACG,CAAA,CACgB"}

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

@@ -1,31 +1,24 @@
 import * as React from 'react';
-export declare const InputBackground: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "appearance" | "size" | "theme" | "disabled" | "state"> & {
-    appearance?: "standard" | "modern" | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | undefined;
+export declare const InputBackground: import("../..").PolymorphicComponent<"div", {
+    appearance?: "modern" | "standard" | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | undefined;
     disabled?: boolean | undefined;
     state?: "error" | undefined;
     theme?: "grey" | "white" | undefined;
-} & {
-    as?: React.ElementType;
 }>;
-declare const StyledInputText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
-    size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
-    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-    family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
-} & {
-    as?: React.ElementType;
-}, "as"> & {
-    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>, never> & {
-    as?: React.ElementType;
-}>;
-export type InputTextProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & Omit<React.ComponentProps<typeof StyledInputText>, 'type' | 'as'> & {
+declare const StyledInputText: import("../..").PolymorphicComponent<import("../..").PolymorphicComponent<"p", {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
+}>, unknown>;
+export type InputTextProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & Omit<React.ComponentProps<typeof StyledInputText>, 'type' | 'as' | 'ref'> & {
     type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search';
     as?: never;
     disabled?: boolean;
+    ref?: React.Ref<HTMLInputElement>;
 };
-export declare const InputText: React.ForwardRefExoticComponent<Omit<InputTextProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const InputText: ({ ref, type, size, ...rest }: InputTextProps) => React.JSX.Element;
 type InputBackgroundProps = React.ComponentProps<typeof InputBackground>;
 export type InputProps = Omit<React.ComponentProps<typeof InputText>, 'size' | 'state' | 'appearance'> & {
     size?: InputBackgroundProps['size'];
@@ -38,5 +31,5 @@ export type InputProps = Omit<React.ComponentProps<typeof InputText>, 'size' | '
     value?: string | number;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
 };
-export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Input: ({ ref, className, size, appearance, theme, state, disabled, style, ...rest }: InputProps) => React.JSX.Element;
 export {};

package/dist/components/input/Input.js

@@ -70,7 +70,8 @@ var InputBackground = styled("div", {
 	]
 });
 InputBackground.displayName = "InputBackground";
-var StyledInputText = styled(Text, { base: [
+// @__PURE__ keeps this tree-shakable for consumers importing only
+var StyledInputText = /* @__PURE__ */ styled(Text, { base: [
 	"appearance-none",
 	"border-none",
 	"bg-none",
@@ -89,7 +90,7 @@ var toTextSize = {
 	lg: "md",
 	xl: "lg"
 };
-var InputText = React$1.forwardRef(({ type = "text", size, ...rest }, ref) => {
+var InputText = ({ ref, type = "text", size, ...rest }) => {
 	const textSize = React$1.useMemo(() => overrideStyledVariantValue(size, (s) => toTextSize[s]), [size]);
 	return /* @__PURE__ */ jsx(StyledInputText, {
 		ref,
@@ -100,26 +101,22 @@ var InputText = React$1.forwardRef(({ type = "text", size, ...rest }, ref) => {
 		size: textSize,
 		...rest
 	});
-});
-InputText.displayName = "InputText";
-var Input = React$1.forwardRef(({ className, size = "md", appearance = "standard", theme, state, disabled, style, ...rest }, ref) => {
-	return /* @__PURE__ */ jsx(InputBackground, {
+};
+var Input = ({ ref, className, size = "md", appearance = "standard", theme, state, disabled, style, ...rest }) => /* @__PURE__ */ jsx(InputBackground, {
+	size,
+	appearance,
+	theme,
+	disabled,
+	state,
+	className,
+	style,
+	children: /* @__PURE__ */ jsx(InputText, {
 		size,
-		appearance,
-		theme,
+		ref,
 		disabled,
-		state,
-		className,
-		style,
-		children: /* @__PURE__ */ jsx(InputText, {
-			size,
-			ref,
-			disabled,
-			...rest
-		})
-	});
+		...rest
+	})
 });
-Input.displayName = "Input";
 //#endregion
 export { Input, InputBackground, InputText };
 

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

@@ -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    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,oBAAC,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,oBAAC,iBAAD;EACQ;EACM;EACL;EACG;EACH;EACI;EACJ;YAEP,oBAAC,WAAD;GAAiB;GAAW;GAAe;GAAU,GAAI;GAAQ,CAAA;EACjD,CAAA;EAGvB;AAED,MAAM,cAAc"}
+{"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'\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\n// @__PURE__ keeps this tree-shakable for consumers importing only\n// InputBackground from this module.\nconst StyledInputText = /* @__PURE__ */ 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' | 'ref'> & {\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    // StyledInputText wraps Text (default element 'p'), but InputText always\n    // renders it as=\"input\", so the inherited paragraph ref must be overridden\n    ref?: React.Ref<HTMLInputElement>\n  }\n\nconst toTextSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg'\n}\n\nexport const InputText = ({\n  ref,\n  type = 'text',\n  size,\n  ...rest\n}: InputTextProps) => {\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}\n    />\n  )\n}\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 = ({\n  ref,\n  className,\n  size = 'md',\n  appearance = 'standard',\n  theme,\n  state,\n  disabled,\n  style,\n  ...rest\n}: InputProps) => (\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"],"mappings":";;;;;;AAMA,IAAa,kBAAkB,OAAO,OAAO;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,KAAK;GACV,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;EACb;EACA,UAAU,EACR,MAAM,CAAC,sBAAsB,YAAY,EAC3C;EACA,OAAO,EACL,OAAO,CAAC,EACV;EACA,OAAO;GACL,OAAO,CAAC;GACR,MAAM,CAAC;EACT;CACF;CACA,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,eAAe;EACzB;EACA;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,6BAA6B;EAC1D;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,UAAU;EACpB;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,aAAa;EACvB;CACF;AACF,CAAC;AAED,gBAAgB,cAAc;;AAI9B,IAAM,kBAAkC,uBAAO,MAAM,EACnD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAiBD,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,aAAa,EACxB,KACA,OAAO,QACP,MACA,GAAG,WACiB;CACpB,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,EAAE,GAC3D,CAAC,IAAI,CACP;CAEA,OACE,oBAAC,iBAAD;EACO;EACL,IAAG;EACH,MAAM,SAAS,WAAW,SAAS;EACnC,WAAW,SAAS,WAAW,YAAY,KAAA;EAC3C,SAAS,SAAS,WAAW,WAAW,KAAA;EACxC,MAAM;EACN,GAAI;CACL,CAAA;AAEL;AAkBA,IAAa,SAAS,EACpB,KACA,WACA,OAAO,MACP,aAAa,YACb,OACA,OACA,UACA,OACA,GAAG,WAEH,oBAAC,iBAAD;CACQ;CACM;CACL;CACG;CACH;CACI;CACJ;WAEP,oBAAC,WAAD;EAAiB;EAAW;EAAe;EAAU,GAAI;CAAO,CAAA;AACjD,CAAA"}

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
-import { InputProps } from '../../components/input/Input';
+import { type FieldElementWrapperProps } from '../field-wrapper/FieldWrapper';
+import { type InputProps } from '../input/Input';
 type InputFieldProps = InputProps & FieldElementWrapperProps;
-export declare const InputField: {
-    ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...remainingProps }: InputFieldProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function InputField({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...rest }: InputFieldProps): React.JSX.Element;
+export declare namespace InputField {
+    var displayName: string;
+}
 export {};

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

@@ -6,7 +6,7 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 //#region src/components/input-field/InputField.tsx
-var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...remainingProps }) => {
+var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...rest }) => {
 	const { register } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
@@ -30,7 +30,7 @@ var InputField = ({ className, label, name, validation, prompt, description, hid
 			appearance: formAppearance,
 			theme: formTheme,
 			...error && { state: "error" },
-			...remainingProps
+			...rest
 		})
 	});
 };

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

@@ -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  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,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;YAEZ,oBAAC,OAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,OAAO;GACP,GAAK,SAAS,EAAE,OAAO,SAAS;GAChC,GAAI;GACJ,CAAA;EACW,CAAA;;AAInB,WAAW,cAAc"}
+{"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  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport { Input, type InputProps } from '../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  ...rest\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        {...rest}\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,WACkB;CACrB,MAAM,EAAE,aAAa,eAAe;CACpC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,MAAM,MAAM,aAAa,SAAS,UAAU,IAAI;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,OAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,OAAO;GACP,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,WAAW,cAAc"}