@veracity/vui 3.2.0 → 4.0.0-alpha.366771.2601090922

package/dist/index.js

@@ -14,6 +14,7 @@ import colors_default from "./theme/foundations/colors.js";
 import { HSLToRGBA, cs, ellipsisOverflow, hexToRGBA, parseHSL, vuiColorToRGBA } from "./utils/styles.js";
 import { uid } from "./utils/uid.js";
 import { isActivePath } from "./utils/window.js";
+import "./utils/index.js";
 import { LinksProvider, getLoggedInLink, useLinks, useLoadLinks } from "./core/links.js";
 import fonts_default from "./theme/foundations/fonts.js";
 import components_default from "./theme/components.js";
@@ -33,10 +34,12 @@ import transitions_default from "./theme/foundations/transitions.js";
 import zIndices_default from "./theme/foundations/zIndices.js";
 import foundations_default from "./theme/foundations/index.js";
 import defaultTheme_default from "./theme/defaultTheme.js";
-import { extendTheme, omitThemingProps, th, useStyleConfig, useTh, useTheme } from "./core/theme.js";
+import { extendTheme } from "./theme/extendTheme.js";
+import { omitThemingProps, th, useStyleConfig, useTh, useTheme } from "./core/theme.js";
 import { RenderOnScreen, mediaBetween, mediaDown, mediaUp, useBetween, useDown, useUp, useViewportWidth } from "./core/media.js";
 import { isTruncated, maxLines, wordBreak } from "./system/custom.js";
 import { system } from "./system/system.js";
+import "./system/index.js";
 import { createGlobalStyle, css, styled, v } from "./core/styled.js";
 import { vui } from "./core/vui.js";
 import { bounce, fadeDown, fadeIn, fadeLeft, fadeOut, fadeRight, fadeUp, pulse, spin } from "./core/vuiProvider/animations.js";
@@ -48,89 +51,125 @@ import fontFaces_default from "./core/vuiProvider/fontFaces.js";
 import globalStyle_default from "./core/vuiProvider/globalStyle.js";
 import resetCSS_default from "./core/vuiProvider/resetCSS.js";
 import { Portal } from "./portal/portal.js";
+import "./portal/index.js";
+import "./theme/index.js";
 import { Box, BoxBase } from "./box/box.js";
+import "./box/index.js";
 import toast_default from "./toast/toast.js";
 import { NotificationProvider, useNotificationContext } from "./notification/context.js";
 import { ButtonGroupProvider, useButtonGroupContext } from "./buttonGroup/context.js";
 import { Svg, SvgBase } from "./svg/svg.js";
+import "./svg/index.js";
 import { icons_exports } from "./icons/baseIcons/icons.js";
 import { defaultIcons } from "./icons/consts.js";
 import cache_default from "./icons/cache.js";
+import "./icons/index.js";
 import { Icon } from "./icon/icon.js";
+import "./icon/index.js";
 import { ButtonProvider, useButtonContext } from "./button/context.js";
 import { ButtonIcon } from "./button/buttonIcon.js";
 import { T, TBase } from "./t/t.js";
 import { Lead } from "./t/specialVariants.js";
+import "./t/index.js";
 import { ButtonText } from "./button/buttonText.js";
 import { Button, ButtonBase } from "./button/button.js";
 import { AppButton, BackButton, CTAButton, CloseButton, DangerButton, IconButton, LineButton, TextButton } from "./button/buttons.js";
+import "./button/index.js";
 import { NotificationButton } from "./notification/notificationButton.js";
 import { NotificationIcon } from "./notification/notificationIcon.js";
 import { NotificationText } from "./notification/notificationText.js";
 import { NotificationTitle } from "./notification/notificationTitle.js";
 import { Notification } from "./notification/notification.js";
+import "./notification/index.js";
 import { defaultDuration, fastToastDuration, slowToastDuration, useToast } from "./toast/useToast.js";
+import "./toast/index.js";
 import vuiProvider_default from "./core/vuiProvider/vuiProvider.js";
+import "./core/index.js";
 import { ListProvider, useListContext } from "./list/context.js";
 import { Divider, DividerBase } from "./divider/divider.js";
+import "./divider/index.js";
 import { ListDivider } from "./list/listDivider.js";
 import { ListHeading } from "./list/listHeading.js";
 import { ListIcon } from "./list/listIcon.js";
 import { LinkIcon } from "./link/linkIcon.js";
 import { LinkText } from "./link/linkText.js";
 import { Link, LinkBase } from "./link/link.js";
+import "./link/index.js";
 import { ListText } from "./list/listText.js";
 import { ListItem, ListItemBase } from "./list/listItem.js";
 import { List, ListBase } from "./list/list.js";
+import "./list/index.js";
 import { AccordionItem } from "./accordion/accordionItem.js";
 import { AccordionItemHorizontal } from "./accordion/accordionItemHorizontal.js";
 import { Accordion, AccordionBase } from "./accordion/accordion.js";
+import "./accordion/index.js";
 import { Image, ImageBase } from "./image/image.js";
+import "./image/index.js";
 import { Avatar, AvatarBase } from "./avatar/avatar.js";
+import "./avatar/index.js";
 import { TagProvider, useTagContext } from "./tag/context.js";
 import { TagButton } from "./tag/tagButton.js";
 import { TagIcon } from "./tag/tagIcon.js";
 import { TagText } from "./tag/tagText.js";
 import { Tag, TagBase } from "./tag/tag.js";
+import "./tag/index.js";
 import { Badge } from "./badge/badge.js";
+import "./badge/index.js";
 import { Breadcrumbs, BreadcrumbsBase } from "./breadcrumbs/breadcrumbs.js";
+import "./breadcrumbs/index.js";
 import { ButtonGroup, ButtonGroupBase } from "./buttonGroup/buttonGroup.js";
+import "./buttonGroup/index.js";
 import { ButtonToggleGroup } from "./buttonToggleGroup/buttonToggleGroup.js";
+import "./buttonToggleGroup/index.js";
 import { maxDateTimestamp, minDateTimestamp, months, monthsShort, viewYears, weekDays } from "./calendar/consts.js";
 import { Calendar } from "./calendar/calendar.js";
+import "./calendar/index.js";
 import { Card } from "./card/card.js";
+import "./card/index.js";
 import { P, PBase } from "./p/p.js";
+import "./p/index.js";
 import helpText_default from "./input/helpText.js";
 import { ChatInput } from "./chat/chatInput.js";
 import { Message, MessageBase } from "./message/message.js";
+import "./message/index.js";
 import { ChatMessage } from "./chat/chatMessage.js";
 import { Chat } from "./chat/chat.js";
+import "./chat/index.js";
 import { CheckboxGroupProvider, useCheckboxGroupContext } from "./checkbox/context.js";
 import { Checkbox, CheckboxBase } from "./checkbox/checkbox.js";
 import { CheckboxGroup, CheckboxGroupBase } from "./checkbox/checkboxGroup.js";
+import "./checkbox/index.js";
 import { useCopyToClipboard } from "./copyToClipboard/useCopyToClipboard.js";
 import { CopyToClipboard } from "./copyToClipboard/copyToClipboard.js";
+import "./copyToClipboard/index.js";
 import { Definition, DefinitionHorizontalBase, DefinitionVerticalBase } from "./definition/definition.js";
-import { closeOnEscPlugin, matchWidthModifier } from "./popover/consts.js";
+import "./definition/index.js";
 import { PopoverProvider, usePopoverContext } from "./popover/context.js";
 import popoverContent_default from "./popover/popoverContent.js";
 import popoverTrigger_default from "./popover/popoverTrigger.js";
 import usePopover from "./popover/usePopover.js";
 import Popover from "./popover/popover.js";
+import "./popover/index.js";
 import { Tooltip } from "./tooltip/tooltip.js";
+import "./tooltip/index.js";
 import { Label, LabelBase } from "./label/label.js";
+import "./label/index.js";
 import { InputIcon } from "./input/inputIcon.js";
 import { InputInput, InputInputBase } from "./input/inputInput.js";
 import { Input, InputBase } from "./input/input.js";
+import "./input/index.js";
 import { DatePicker } from "./datePicker/datePicker.js";
+import "./datePicker/index.js";
 import { containerId, dialogStatusMapping, modalAnimation, modalClass, modalJustifyContent } from "./dialog/consts.js";
 import { DialogProvider, useDialogContext } from "./dialog/context.js";
 import { ModalProvider, useModalContext } from "./modal/context.js";
 import { FocusLock } from "./focusLock/focusLock.js";
+import "./focusLock/index.js";
 import { ModalBackdrop, ModalBackdropBase } from "./modal/modalBackdrop.js";
 import { ModalContent, ModalContentBase } from "./modal/modalContent.js";
 import { manager, useModalManager } from "./modal/modalManager.js";
 import modal_default from "./modal/modal.js";
+import "./modal/index.js";
 import { DialogBody } from "./dialog/dialogBody.js";
 import { DialogCancelButton } from "./dialog/dialogCancelButton.js";
 import { DialogCloseButton } from "./dialog/dialogCloseButton.js";
@@ -139,18 +178,24 @@ import { DialogFooter } from "./dialog/dialogFooter.js";
 import { DialogIcon } from "./dialog/dialogIcon.js";
 import { Heading, HeadingBase } from "./heading/heading.js";
 import { H1, H2, H3, H4, H5, H6 } from "./heading/headings.js";
+import "./heading/index.js";
 import { DialogTitle } from "./dialog/dialogTitle.js";
 import { DialogHeader } from "./dialog/dialogHeader.js";
 import dialog_default, { DialogBase } from "./dialog/dialog.js";
 import { useDialog } from "./dialog/useDialog.js";
+import "./dialog/index.js";
 import display_default, { DisplayBase } from "./display/display.js";
+import "./display/index.js";
 import { DragAndDrop } from "./dragAndDrop/dragAndDrop.js";
+import "./dragAndDrop/index.js";
 import { Drawer } from "./drawer/drawer.js";
+import "./drawer/index.js";
 import { MenuProvider, useMenuContext } from "./menu/context.js";
 import menuButton_default from "./menu/menuButton.js";
 import menuItem_default from "./menu/menuItem.js";
 import menuList_default from "./menu/menuList.js";
 import menu_default from "./menu/menu.js";
+import "./menu/index.js";
 import { FooterHeading } from "./footer/footerHeading.js";
 import { FooterLink } from "./footer/footerLink.js";
 import { FooterSection } from "./footer/footerSection.js";
@@ -158,7 +203,9 @@ import { FooterContent } from "./footer/footerContent.js";
 import { Footer, FooterBase } from "./footer/footer.js";
 import { useFooterLinks } from "./footer/helpers.js";
 import { ApplicationFooter } from "./footer/applicationFooter.js";
+import "./footer/index.js";
 import { Grid, GridBase } from "./grid/grid.js";
+import "./grid/index.js";
 import { HeaderProvider, useHeaderContext } from "./header/context.js";
 import { HeaderAccountUserInfo } from "./header/headerAccountUserInfo.js";
 import { HeaderAccount } from "./header/headerAccount.js";
@@ -168,6 +215,7 @@ import { HeaderCreateAccount } from "./header/headerCreateAccount.js";
 import { HeaderDivider } from "./header/headerDivider.js";
 import { HeaderLinkItem } from "./header/headerLinkItem.js";
 import { Logo } from "./logo/Logo.js";
+import "./logo/index.js";
 import { HeaderLogo } from "./header/headerLogo.js";
 import { HeaderMainLinks } from "./header/headerMainLinks.js";
 import { HeaderMobileContent } from "./header/headerMobileContent.js";
@@ -180,6 +228,7 @@ import { Header, HeaderBase } from "./header/header.js";
 import { useHeaderLinks } from "./header/helpers.js";
 import { LoggedInHeader } from "./header/loggedInHeader.js";
 import { LoggedOutHeader } from "./header/loggedOutHeader.js";
+import "./header/index.js";
 import { PaginationProvider, usePaginationContext } from "./pagination/context.js";
 import { getPaginationItems } from "./pagination/helpers.js";
 import { PaginationButton } from "./pagination/paginationButton.js";
@@ -190,36 +239,52 @@ import { PaginationNavigation } from "./pagination/paginationNavigation.js";
 import { PaginationResults } from "./pagination/paginationResults.js";
 import usePagination from "./pagination/usePagination.js";
 import { Pagination } from "./pagination/pagination.js";
+import "./pagination/index.js";
 import { Panel } from "./panel/panel.js";
+import "./panel/index.js";
 import { Progress, ProgressBase } from "./progress/progress.js";
+import "./progress/index.js";
 import { ProgressCircular, ProgressCircularBase } from "./progressCircular/progressCircular.js";
+import "./progressCircular/index.js";
 import { RadioGroupProvider, useRadioGroupContext } from "./radio/context.js";
 import { Radio, RadioBase } from "./radio/radio.js";
 import { RadioGroup, RadioGroupBase } from "./radio/radioGroup.js";
+import "./radio/index.js";
 import { Range } from "./range/range.js";
+import "./range/index.js";
 import { Rating } from "./rating/rating.js";
+import "./rating/index.js";
 import { SelectButton } from "./select/selectButton.js";
 import { SelectContent } from "./select/selectContent.js";
 import { SelectGroup } from "./select/selectGroup.js";
 import { SelectOption } from "./select/selectOption.js";
 import { getOptionText } from "./select/useSelect.js";
 import { Select } from "./select/select.js";
+import "./select/index.js";
 import { SidemenuItem } from "./sidemenu/sidemenuItem.js";
 import { SidemenuTop } from "./sidemenu/sidemenuTop.js";
 import { Sidemenu } from "./sidemenu/sidemenu.js";
+import "./sidemenu/index.js";
 import { SidemenuStateProvider, useSidemenuContext } from "./sidemenuV2/context.js";
 import { SidemenuV2 } from "./sidemenuV2/sidemenuV2.js";
+import "./sidemenuV2/index.js";
 import { Skeleton, SkeletonBase } from "./skeleton/skeleton.js";
+import "./skeleton/index.js";
 import { StepIndicator } from "./stepIndicator/stepIndicator.js";
+import "./stepIndicator/index.js";
 import { StepperHorizontal } from "./stepperHorizontal/stepperHorizontal.js";
 import { StepHorizontal, StepHorizontalBase } from "./stepperHorizontal/stepHorizontal.js";
+import "./stepperHorizontal/index.js";
 import { StepperVertical } from "./stepperVertical/stepperVertical.js";
 import { StepVertical, StepVerticalBase } from "./stepperVertical/stepVertical.js";
+import "./stepperVertical/index.js";
 import { Spinner, SpinnerCircle } from "./spinner/spinner.js";
+import "./spinner/index.js";
 import { SwitchProvider, useSwitchContext } from "./switch/context.js";
 import { SwitchButton, SwitchButtonBase } from "./switch/switchButton.js";
 import { SwitchLabel } from "./switch/switchLabel.js";
 import { Switch, SwitchBase } from "./switch/switchMain.js";
+import "./switch/index.js";
 import { TableProvider, useTableContext } from "./table/context.js";
 import { TableSortIcon } from "./table/tableSortIcon.js";
 import { Td, TdBase } from "./table/td.js";
@@ -229,17 +294,22 @@ import { Tfoot, TfootBase } from "./table/tfoot.js";
 import { Th, ThBase } from "./table/th.js";
 import { Thead } from "./table/thead.js";
 import { Table, TableBase } from "./table/table.js";
+import "./table/index.js";
 import { Tab, TabBase } from "./tabs/tab.js";
 import { Tabs, TabsBase } from "./tabs/tabs.js";
+import "./tabs/index.js";
 import { Textarea, TextareaBase } from "./textarea/textarea.js";
+import "./textarea/index.js";
 import { TreeProvider, useTreeContext } from "./tree/context.js";
 import { TreeIcon } from "./tree/treeIcon.js";
 import { TreeText } from "./tree/treeText.js";
 import { TreeItem, TreeItemBase } from "./tree/treeItem.js";
 import { Tree, TreeBase } from "./tree/tree.js";
+import "./tree/index.js";
 import { TutorialStep } from "./tutorial/tutorialStep.js";
 import { TutorialCard } from "./tutorial/tutorialCard.js";
 import { Tutorial } from "./tutorial/tutorial.js";
+import "./tutorial/index.js";
 
-export { Accordion, AccordionBase, AccordionItem, AccordionItemHorizontal, AppButton, ApplicationFooter, Avatar, AvatarBase, BackButton, Badge, Box, BoxBase, Breadcrumbs, BreadcrumbsBase, Button, ButtonBase, ButtonGroup, ButtonGroupBase, ButtonGroupProvider, ButtonIcon, ButtonProvider, ButtonText, ButtonToggleGroup, CTAButton, Calendar, Card, Chat, ChatInput, ChatMessage, Checkbox, CheckboxBase, CheckboxGroup, CheckboxGroupBase, CheckboxGroupProvider, CloseButton, CopyToClipboard, DangerButton, DatePicker, Definition, DefinitionHorizontalBase, DefinitionVerticalBase, dialog_default as Dialog, DialogBase, DialogBody, DialogCancelButton, DialogCloseButton, DialogFooter, DialogHeader, DialogIcon, DialogProvider, DialogSubmitButton, DialogTitle, display_default as Display, DisplayBase, Divider, DividerBase, DragAndDrop, Drawer, FocusLock, Footer, FooterBase, FooterContent, FooterHeading, FooterLink, FooterSection, globalStyle_default as GlobalStyle, Grid, GridBase, H1, H2, H3, H4, H5, H6, HSLToRGBA, Header, HeaderAccount, HeaderAccountUserInfo, HeaderApplicationName, HeaderBase, HeaderContent, HeaderCreateAccount, HeaderDivider, HeaderLinkItem, HeaderLogo, HeaderMainLinks, HeaderMobileContent, HeaderMobileToggle, HeaderNotifications, HeaderProvider, HeaderServices, HeaderServicesMessage, HeaderSignIn, Heading, HeadingBase, helpText_default as HelpText, Icon, IconButton, Image, ImageBase, Input, InputBase, InputIcon, InputInput, InputInputBase, Label, LabelBase, Lead, LineButton, Link, LinkBase, LinkIcon, LinkText, LinksProvider, List, ListBase, ListDivider, ListHeading, ListIcon, ListItem, ListItemBase, ListProvider, ListText, LoggedInHeader, LoggedOutHeader, Logo, menu_default as Menu, menuButton_default as MenuButton, menuItem_default as MenuItem, menuList_default as MenuList, MenuProvider, Message, MessageBase, modal_default as Modal, ModalBackdrop, ModalBackdropBase, ModalContent, ModalContentBase, ModalProvider, Notification, NotificationButton, NotificationIcon, NotificationProvider, NotificationText, NotificationTitle, P, PBase, Pagination, PaginationButton, PaginationEllipsis, PaginationGoToPage, PaginationNavigation, PaginationPrevNext, PaginationProvider, PaginationResults, Panel, Popover, popoverContent_default as PopoverContent, PopoverProvider, popoverTrigger_default as PopoverTrigger, Portal, Progress, ProgressBase, ProgressCircular, ProgressCircularBase, Radio, RadioBase, RadioGroup, RadioGroupBase, RadioGroupProvider, Range, Rating, RenderOnScreen, resetCSS_default as ResetCSS, Select, SelectButton, SelectContent, SelectGroup, SelectOption, Sidemenu, SidemenuItem, SidemenuStateProvider, SidemenuTop, SidemenuV2, Skeleton, SkeletonBase, Spinner, SpinnerCircle, StepHorizontal, StepHorizontalBase, StepIndicator, StepVertical, StepVerticalBase, StepperHorizontal, StepperVertical, Svg, SvgBase, Switch, SwitchBase, SwitchButton, SwitchButtonBase, SwitchLabel, SwitchProvider, T, TBase, Tab, TabBase, Table, TableBase, TableProvider, TableSortIcon, Tabs, TabsBase, Tag, TagBase, TagButton, TagIcon, TagProvider, TagText, Tbody, TbodyBase, Td, TdBase, TextButton, Textarea, TextareaBase, Tfoot, TfootBase, Th, ThBase, Thead, toast_default as Toaster, Tooltip, Tr, TrBase, Tree, TreeBase, TreeIcon, TreeItem, TreeItemBase, TreeProvider, TreeText, Tutorial, TutorialCard, TutorialStep, VuiContextProvider, vuiProvider_default as VuiProvider, __DEV__, activeClassName, activeItemShade, addBodyClass, addElement, animations_default as animations, assignRef, icons_exports as baseIcons, borders_default as borders, bounce, callAll, cdnFontsPath, cdnStagUrl, cdnTestUrl, cdnUrl, cdnUrls, closeOnEscPlugin, colors_default as colors, compareBy, components_default as components, containerId, createContext, createGlobalStyle, cs, css, dateFormats, defaultDuration, defaultIcons, defaultTheme_default as defaultTheme, dialogStatusMapping, dimmedBorderColor, durations_default as durations, ellipsisOverflow, extendTheme, fadeDown, fadeIn, fadeLeft, fadeOut, fadeRight, fadeUp, fastToastDuration, filterUndefined, fontFaces_default as fontFaces, fontSizes_default as fontSizes, fontWeights_default as fontWeights, fonts_default as fonts, formatDate, formatIsoDate, foundations_default as foundations, generateDateByUTCValue, generateMenuItemId, getCurrentYear, getDateUTCValue, getLoggedInLink, getOptionText, getPaginationItems, hexToRGBA, cache_default as iconsCache, isActivePath, isArray, isFunction, isJsx, isNumber, isObject, isReactText, isString, isTruncated, isValidDate, manager, matchWidthModifier, maxDateTimestamp, maxLines, mediaBetween, mediaDown, mediaUp, merge, mergeRefs, minDateTimestamp, modalAnimation, modalClass, modalJustifyContent, months, monthsShort, noScrollClass, noop, normalizeToId, objectFilter, omitThemingProps, parseHSL, parseIsoDate, pulse, radii_default as radii, random, removeBodyClass, removeElement, ringWidths_default as ringWidths, runIfFn, sameDate, sameYear, sameYearSameMonth, screens_default as screens, shadows_default as shadows, sizes_default as sizes, slowToastDuration, spaces_default as spaces, spin, styled, system, th, toggleItem, transforms_default as transforms, transitions_default as transitions, uid, useBetween, useBodyScrollLock, useButtonContext, useButtonGroupContext, useCallbackRef, useCheckboxGroupContext, useClickOutside, useControlled, useCopyToClipboard, useDialog, useDialogContext, useDown, useFooterLinks, useHeaderContext, useHeaderLinks, useIds, useIsMounted, useLinks, useListContext, useLoadLinks, useMenuContext, useModalContext, useModalManager, useNotificationContext, useOfflineMode, usePagination, usePaginationContext, usePopover, usePopoverContext, useRadioGroupContext, useSidemenuContext, useStyleConfig, useSwitchContext, useTableContext, useTagContext, useTh, useTheme, useToast, useTreeContext, useUp, useViewportWidth, useVuiContext, utcDateToLocale, v, validateDateFormat, viewYears, vui, vuiColorToRGBA, weekDays, wordBreak, zIndices_default as zIndices };
-globalThis.__vuiVersion__ = "3.2.0"
+export { Accordion, AccordionBase, AccordionItem, AccordionItemHorizontal, AppButton, ApplicationFooter, Avatar, AvatarBase, BackButton, Badge, Box, BoxBase, Breadcrumbs, BreadcrumbsBase, Button, ButtonBase, ButtonGroup, ButtonGroupBase, ButtonGroupProvider, ButtonIcon, ButtonProvider, ButtonText, ButtonToggleGroup, CTAButton, Calendar, Card, Chat, ChatInput, ChatMessage, Checkbox, CheckboxBase, CheckboxGroup, CheckboxGroupBase, CheckboxGroupProvider, CloseButton, CopyToClipboard, DangerButton, DatePicker, Definition, DefinitionHorizontalBase, DefinitionVerticalBase, dialog_default as Dialog, DialogBase, DialogBody, DialogCancelButton, DialogCloseButton, DialogFooter, DialogHeader, DialogIcon, DialogProvider, DialogSubmitButton, DialogTitle, display_default as Display, DisplayBase, Divider, DividerBase, DragAndDrop, Drawer, FocusLock, Footer, FooterBase, FooterContent, FooterHeading, FooterLink, FooterSection, globalStyle_default as GlobalStyle, Grid, GridBase, H1, H2, H3, H4, H5, H6, HSLToRGBA, Header, HeaderAccount, HeaderAccountUserInfo, HeaderApplicationName, HeaderBase, HeaderContent, HeaderCreateAccount, HeaderDivider, HeaderLinkItem, HeaderLogo, HeaderMainLinks, HeaderMobileContent, HeaderMobileToggle, HeaderNotifications, HeaderProvider, HeaderServices, HeaderServicesMessage, HeaderSignIn, Heading, HeadingBase, helpText_default as HelpText, Icon, IconButton, Image, ImageBase, Input, InputBase, InputIcon, InputInput, InputInputBase, Label, LabelBase, Lead, LineButton, Link, LinkBase, LinkIcon, LinkText, LinksProvider, List, ListBase, ListDivider, ListHeading, ListIcon, ListItem, ListItemBase, ListProvider, ListText, LoggedInHeader, LoggedOutHeader, Logo, menu_default as Menu, menuButton_default as MenuButton, menuItem_default as MenuItem, menuList_default as MenuList, MenuProvider, Message, MessageBase, modal_default as Modal, ModalBackdrop, ModalBackdropBase, ModalContent, ModalContentBase, ModalProvider, Notification, NotificationButton, NotificationIcon, NotificationProvider, NotificationText, NotificationTitle, P, PBase, Pagination, PaginationButton, PaginationEllipsis, PaginationGoToPage, PaginationNavigation, PaginationPrevNext, PaginationProvider, PaginationResults, Panel, Popover, popoverContent_default as PopoverContent, PopoverProvider, popoverTrigger_default as PopoverTrigger, Portal, Progress, ProgressBase, ProgressCircular, ProgressCircularBase, Radio, RadioBase, RadioGroup, RadioGroupBase, RadioGroupProvider, Range, Rating, RenderOnScreen, resetCSS_default as ResetCSS, Select, SelectButton, SelectContent, SelectGroup, SelectOption, Sidemenu, SidemenuItem, SidemenuStateProvider, SidemenuTop, SidemenuV2, Skeleton, SkeletonBase, Spinner, SpinnerCircle, StepHorizontal, StepHorizontalBase, StepIndicator, StepVertical, StepVerticalBase, StepperHorizontal, StepperVertical, Svg, SvgBase, Switch, SwitchBase, SwitchButton, SwitchButtonBase, SwitchLabel, SwitchProvider, T, TBase, Tab, TabBase, Table, TableBase, TableProvider, TableSortIcon, Tabs, TabsBase, Tag, TagBase, TagButton, TagIcon, TagProvider, TagText, Tbody, TbodyBase, Td, TdBase, TextButton, Textarea, TextareaBase, Tfoot, TfootBase, Th, ThBase, Thead, toast_default as Toaster, Tooltip, Tr, TrBase, Tree, TreeBase, TreeIcon, TreeItem, TreeItemBase, TreeProvider, TreeText, Tutorial, TutorialCard, TutorialStep, VuiContextProvider, vuiProvider_default as VuiProvider, __DEV__, activeClassName, activeItemShade, addBodyClass, addElement, animations_default as animations, assignRef, icons_exports as baseIcons, borders_default as borders, bounce, callAll, cdnFontsPath, cdnStagUrl, cdnTestUrl, cdnUrl, cdnUrls, colors_default as colors, compareBy, components_default as components, containerId, createContext, createGlobalStyle, cs, css, dateFormats, defaultDuration, defaultIcons, defaultTheme_default as defaultTheme, dialogStatusMapping, dimmedBorderColor, durations_default as durations, ellipsisOverflow, extendTheme, fadeDown, fadeIn, fadeLeft, fadeOut, fadeRight, fadeUp, fastToastDuration, filterUndefined, fontFaces_default as fontFaces, fontSizes_default as fontSizes, fontWeights_default as fontWeights, fonts_default as fonts, formatDate, formatIsoDate, foundations_default as foundations, generateDateByUTCValue, generateMenuItemId, getCurrentYear, getDateUTCValue, getLoggedInLink, getOptionText, getPaginationItems, hexToRGBA, cache_default as iconsCache, isActivePath, isArray, isFunction, isJsx, isNumber, isObject, isReactText, isString, isTruncated, isValidDate, manager, maxDateTimestamp, maxLines, mediaBetween, mediaDown, mediaUp, merge, mergeRefs, minDateTimestamp, modalAnimation, modalClass, modalJustifyContent, months, monthsShort, noScrollClass, noop, normalizeToId, objectFilter, omitThemingProps, parseHSL, parseIsoDate, pulse, radii_default as radii, random, removeBodyClass, removeElement, ringWidths_default as ringWidths, runIfFn, sameDate, sameYear, sameYearSameMonth, screens_default as screens, shadows_default as shadows, sizes_default as sizes, slowToastDuration, spaces_default as spaces, spin, styled, system, th, toggleItem, transforms_default as transforms, transitions_default as transitions, uid, useBetween, useBodyScrollLock, useButtonContext, useButtonGroupContext, useCallbackRef, useCheckboxGroupContext, useClickOutside, useControlled, useCopyToClipboard, useDialog, useDialogContext, useDown, useFooterLinks, useHeaderContext, useHeaderLinks, useIds, useIsMounted, useLinks, useListContext, useLoadLinks, useMenuContext, useModalContext, useModalManager, useNotificationContext, useOfflineMode, usePagination, usePaginationContext, usePopover, usePopoverContext, useRadioGroupContext, useSidemenuContext, useStyleConfig, useSwitchContext, useTableContext, useTagContext, useTh, useTheme, useToast, useTreeContext, useUp, useViewportWidth, useVuiContext, utcDateToLocale, v, validateDateFormat, viewYears, vui, vuiColorToRGBA, weekDays, wordBreak, zIndices_default as zIndices };
+globalThis.__vuiVersion__ = "4.0.0-beta.1"

package/dist/input/autoCompletePopover.js

@@ -1,7 +1,11 @@
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { styled } from "../core/styled.js";
+import "../core/index.js";
 import { List } from "../list/list.js";
+import "../list/index.js";
 import Popover from "../popover/popover.js";
+import "../popover/index.js";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -9,12 +13,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const InputContainer = styled.divBox`
   width: 100%;
 `;
-const options = { aria: { expanded: false } };
 /** Wrapper for the autocomplete popover. */
 const AutoCompletePopover = ({ autoCompleteOptions, autoCompleteMaxHeight, children, filterAutoCompleteOptions, onAutoCompleteSelect }) => {
 	if (autoCompleteOptions === void 0) return children;
 	return /* @__PURE__ */ jsxs(Popover, {
-		options,
 		placement: "bottom-start",
 		matchWidth: true,
 		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
@@ -38,5 +40,5 @@ var autoCompletePopover_default = memo(AutoCompletePopover);
 
 //#endregion
 export { autoCompletePopover_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=autoCompletePopover.js.map

package/dist/input/autoCompletePopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"autoCompletePopover.js","names":[],"sources":["../../src/input/autoCompletePopover.tsx"],"sourcesContent":["import { memo } from 'react'\n\nimport { styled } from '../core'\nimport { List } from '../list'\nimport { Popover } from '../popover'\nimport { cs } from '../utils'\nimport type { AutoCompletePopoverProps } from './input.types'\n\nconst InputContainer = styled.divBox`\n  width: 100%;\n`\n\nconst options = {\n  aria: {\n    expanded: false,\n  },\n}\n\n/** Wrapper for the autocomplete popover. */\nexport const AutoCompletePopover = ({\n  autoCompleteOptions,\n  autoCompleteMaxHeight,\n  children,\n  filterAutoCompleteOptions,\n  onAutoCompleteSelect,\n}: AutoCompletePopoverProps) => {\n  if (autoCompleteOptions === undefined) return children\n\n  return (\n    <Popover options={options} placement=\"bottom-start\" matchWidth={true}>\n      <Popover.Trigger as={InputContainer} className={cs('vui-input-popoverTrigger')}>\n        {children}\n      </Popover.Trigger>\n      {!!autoCompleteOptions && (\n        <Popover.Content>\n          <List maxH={autoCompleteMaxHeight} w={'100%'} className={cs('vui-input-popoverList')}>\n            {autoCompleteOptions?.filter?.(filterAutoCompleteOptions).map((i: string) => (\n              <List.Item cursor=\"pointer\" hoverBg=\"skyBlue.hover\" key={i} onClick={() => onAutoCompleteSelect(i)}>\n                {i}\n              </List.Item>\n            ))}\n          </List>\n        </Popover.Content>\n      )}\n    </Popover>\n  )\n}\n\nexport default memo(AutoCompletePopover)\n"],"mappings":";;;;;;;;AAQA,MAAM,iBAAiB,OAAO,MAAM;;;AAIpC,MAAM,UAAU,EACd,MAAM,EACJ,UAAU,OACX,EACF;;AAGD,MAAa,uBAAuB,EAClC,qBACA,uBACA,UACA,2BACA,2BAC8B;AAC9B,KAAI,wBAAwB,OAAW,QAAO;AAE9C,QACE,qBAAC;EAAiB;EAAS,WAAU;EAAe,YAAY;aAC9D,oBAAC,QAAQ;GAAQ,IAAI;GAAgB,WAAW,GAAG,2BAA2B;GAC3E;IACe,EACjB,CAAC,CAAC,uBACD,oBAAC,QAAQ,qBACP,oBAAC;GAAK,MAAM;GAAuB,GAAG;GAAQ,WAAW,GAAG,wBAAwB;aACjF,qBAAqB,SAAS,0BAA0B,CAAC,KAAK,MAC7D,oBAAC,KAAK;IAAK,QAAO;IAAU,SAAQ;IAAwB,eAAe,qBAAqB,EAAE;cAC/F;MADsD,EAE7C,CACZ;IACG,GACS;GAEZ;;AAId,kCAAe,KAAK,oBAAoB"}
+{"version":3,"file":"autoCompletePopover.js","names":[],"sources":["../../src/input/autoCompletePopover.tsx"],"sourcesContent":["import { memo } from 'react'\n\nimport { styled } from '../core'\nimport { List } from '../list'\nimport { Popover } from '../popover'\nimport { cs } from '../utils'\nimport type { AutoCompletePopoverProps } from './input.types'\n\nconst InputContainer = styled.divBox`\n  width: 100%;\n`\n\n/** Wrapper for the autocomplete popover. */\nexport const AutoCompletePopover = ({\n  autoCompleteOptions,\n  autoCompleteMaxHeight,\n  children,\n  filterAutoCompleteOptions,\n  onAutoCompleteSelect,\n}: AutoCompletePopoverProps) => {\n  if (autoCompleteOptions === undefined) return children\n\n  return (\n    <Popover placement=\"bottom-start\" matchWidth>\n      <Popover.Trigger as={InputContainer} className={cs('vui-input-popoverTrigger')}>\n        {children}\n      </Popover.Trigger>\n      {!!autoCompleteOptions && (\n        <Popover.Content>\n          <List maxH={autoCompleteMaxHeight} w={'100%'} className={cs('vui-input-popoverList')}>\n            {autoCompleteOptions?.filter?.(filterAutoCompleteOptions).map((i: string) => (\n              <List.Item cursor=\"pointer\" hoverBg=\"skyBlue.hover\" key={i} onClick={() => onAutoCompleteSelect(i)}>\n                {i}\n              </List.Item>\n            ))}\n          </List>\n        </Popover.Content>\n      )}\n    </Popover>\n  )\n}\n\nexport default memo(AutoCompletePopover)\n"],"mappings":";;;;;;;;;;;;AAQA,MAAM,iBAAiB,OAAO,MAAM;;;;AAKpC,MAAa,uBAAuB,EAClC,qBACA,uBACA,UACA,2BACA,2BAC8B;AAC9B,KAAI,wBAAwB,OAAW,QAAO;AAE9C,QACE,qBAAC;EAAQ,WAAU;EAAe;aAChC,oBAAC,QAAQ;GAAQ,IAAI;GAAgB,WAAW,GAAG,2BAA2B;GAC3E;IACe,EACjB,CAAC,CAAC,uBACD,oBAAC,QAAQ,qBACP,oBAAC;GAAK,MAAM;GAAuB,GAAG;GAAQ,WAAW,GAAG,wBAAwB;aACjF,qBAAqB,SAAS,0BAA0B,CAAC,KAAK,MAC7D,oBAAC,KAAK;IAAK,QAAO;IAAU,SAAQ;IAAwB,eAAe,qBAAqB,EAAE;cAC/F;MADsD,EAE7C,CACZ;IACG,GACS;GAEZ;;AAId,kCAAe,KAAK,oBAAoB"}

package/dist/input/consts.js

@@ -62,5 +62,5 @@ const helpTextMargin = "60px";
 
 //#endregion
 export { clearIconSize, displayValueOnlyTextSize, helpTextMargin, helpTextSize, inputColors, inputStateMapping };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=consts.js.map

package/dist/input/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","names":["inputStateMapping: InputStateMapping"],"sources":["../../src/input/consts.ts"],"sourcesContent":["import type { InputStateMapping } from './input.types'\n\nexport const inputColors = {\n  border: 'sandstone.60',\n  placeholder: 'sandstone.55',\n  inputText: 'sandstone.10',\n  helpText: 'sandstone.30',\n  icons: 'seaBlue.main',\n  disabled: 'sandstone.95',\n  focus: 'focusColor',\n  error: 'energyRed.45',\n  loading: 'seaBlue.80',\n  success: 'landGreen.35',\n} as const\n\nexport const stateIcons = {\n  error: 'uiExclamationTriangle',\n  loading: 'uiSpinnerThird',\n  success: 'uiCheck',\n} as const\n\nexport const inputStateMapping: InputStateMapping = {\n  error: {\n    variant: 'red',\n    iconProps: {\n      color: inputColors.error,\n      name: stateIcons.error,\n    },\n  },\n  loading: {\n    variant: 'grey',\n    iconProps: {\n      animation: 'vui-spin 0.6s linear infinite',\n      name: stateIcons.loading,\n      pathFill: [inputColors.loading, inputColors.icons],\n    },\n  },\n  success: {\n    variant: 'green',\n    iconProps: {\n      color: inputColors.success,\n      name: stateIcons.success,\n    },\n  },\n}\n\nexport const displayValueOnlyTextSize = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n  xl: 'lg',\n} as const\n\nexport const clearIconSize = {\n  sm: 'sm',\n  md: 'sm',\n  lg: 'sm',\n  xl: 'md',\n} as const\n\nexport const helpTextSize = {\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n  xl: 'md',\n} as const\n\nexport const helpTextMargin = '60px' as const\n"],"mappings":";AAEA,MAAa,cAAc;CACzB,QAAQ;CACR,aAAa;CACb,WAAW;CACX,UAAU;CACV,OAAO;CACP,UAAU;CACV,OAAO;CACP,OAAO;CACP,SAAS;CACT,SAAS;CACV;AAED,MAAa,aAAa;CACxB,OAAO;CACP,SAAS;CACT,SAAS;CACV;AAED,MAAaA,oBAAuC;CAClD,OAAO;EACL,SAAS;EACT,WAAW;GACT,OAAO,YAAY;GACnB,MAAM,WAAW;GAClB;EACF;CACD,SAAS;EACP,SAAS;EACT,WAAW;GACT,WAAW;GACX,MAAM,WAAW;GACjB,UAAU,CAAC,YAAY,SAAS,YAAY,MAAM;GACnD;EACF;CACD,SAAS;EACP,SAAS;EACT,WAAW;GACT,OAAO,YAAY;GACnB,MAAM,WAAW;GAClB;EACF;CACF;AAED,MAAa,2BAA2B;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAa,gBAAgB;CAC3B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAa,eAAe;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAa,iBAAiB"}
+{"version":3,"file":"consts.js","names":["inputStateMapping: Record<string, { variant?: string; iconProps: object }>"],"sources":["../../src/input/consts.ts"],"sourcesContent":["export const inputColors = {\n  border: 'sandstone.60',\n  placeholder: 'sandstone.55',\n  inputText: 'sandstone.10',\n  helpText: 'sandstone.30',\n  icons: 'seaBlue.main',\n  disabled: 'sandstone.95',\n  focus: 'focusColor',\n  error: 'energyRed.45',\n  loading: 'seaBlue.80',\n  success: 'landGreen.35',\n} as const\n\nexport const stateIcons = {\n  error: 'uiExclamationTriangle',\n  loading: 'uiSpinnerThird',\n  success: 'uiCheck',\n} as const\n\nexport const inputStateMapping: Record<string, { variant?: string; iconProps: object }> = {\n  error: {\n    variant: 'red',\n    iconProps: {\n      color: inputColors.error,\n      name: stateIcons.error,\n    },\n  },\n  loading: {\n    variant: 'grey',\n    iconProps: {\n      animation: 'vui-spin 0.6s linear infinite',\n      name: stateIcons.loading,\n      pathFill: [inputColors.loading, inputColors.icons],\n    },\n  },\n  success: {\n    variant: 'green',\n    iconProps: {\n      color: inputColors.success,\n      name: stateIcons.success,\n    },\n  },\n}\n\nexport const displayValueOnlyTextSize = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n  xl: 'lg',\n} as const\n\nexport const clearIconSize = {\n  sm: 'sm',\n  md: 'sm',\n  lg: 'sm',\n  xl: 'md',\n} as const\n\nexport const helpTextSize = {\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n  xl: 'md',\n} as const\n\nexport const helpTextMargin = '60px' as const\n"],"mappings":";AAAA,MAAa,cAAc;CACzB,QAAQ;CACR,aAAa;CACb,WAAW;CACX,UAAU;CACV,OAAO;CACP,UAAU;CACV,OAAO;CACP,OAAO;CACP,SAAS;CACT,SAAS;CACV;AAED,MAAa,aAAa;CACxB,OAAO;CACP,SAAS;CACT,SAAS;CACV;AAED,MAAaA,oBAA6E;CACxF,OAAO;EACL,SAAS;EACT,WAAW;GACT,OAAO,YAAY;GACnB,MAAM,WAAW;GAClB;EACF;CACD,SAAS;EACP,SAAS;EACT,WAAW;GACT,WAAW;GACX,MAAM,WAAW;GACjB,UAAU,CAAC,YAAY,SAAS,YAAY,MAAM;GACnD;EACF;CACD,SAAS;EACP,SAAS;EACT,WAAW;GACT,OAAO,YAAY;GACnB,MAAM,WAAW;GAClB;EACF;CACF;AAED,MAAa,2BAA2B;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAa,gBAAgB;CAC3B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAa,eAAe;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAa,iBAAiB"}

package/dist/input/context.js

@@ -1,9 +1,10 @@
 import { createContext } from "../utils/react.js";
+import "../utils/index.js";
 
 //#region src/input/context.ts
 const [InputProvider, useInputContext] = createContext({ isOptional: true });
 
 //#endregion
 export { InputProvider, useInputContext };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=context.js.map

package/dist/input/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/input/context.ts"],"sourcesContent":["import { createContext } from '../utils'\nimport type { InputProps } from './input.types'\n\nconst [InputProvider, useInputContext] = createContext<Partial<InputProps>>({ isOptional: true })\n\nexport { InputProvider, useInputContext }\n"],"mappings":";;;AAGA,MAAM,CAAC,eAAe,mBAAmB,cAAmC,EAAE,YAAY,MAAM,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/input/context.ts"],"sourcesContent":["import { createContext } from '../utils'\nimport type { InputProps } from './input.types'\n\nconst [InputProvider, useInputContext] = createContext<Partial<InputProps>>({ isOptional: true })\n\nexport { InputProvider, useInputContext }\n"],"mappings":";;;;AAGA,MAAM,CAAC,eAAe,mBAAmB,cAAmC,EAAE,YAAY,MAAM,CAAC"}

package/dist/input/helpText.d.ts

@@ -7,4 +7,5 @@ import "../index.js";
 declare const HelpText: VuiComponent<"div", HelpTextProps>;
 //#endregion
 export { HelpText };
+
 //# sourceMappingURL=helpText.d.ts.map

package/dist/input/helpText.js

@@ -1,18 +1,23 @@
 import { isJsx } from "../utils/assertion.js";
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { inputColors } from "./consts.js";
 import { useStyleConfig } from "../core/theme.js";
 import { vui } from "../core/vui.js";
 import box_default from "../box/box.js";
+import "../box/index.js";
 import icon_default from "../icon/icon.js";
+import "../icon/index.js";
+import "../core/index.js";
 import p_default from "../p/p.js";
+import "../p/index.js";
 import { useInputContext } from "./context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/input/helpText.tsx
 /** Displaying help text below the input. */
 const HelpText = vui((props, ref) => {
-	const { className, children, isError,...rest } = props;
+	const { className, children, isError, ...rest } = props;
 	const styles = useStyleConfig("Input", {
 		...useInputContext(),
 		...props
@@ -59,5 +64,5 @@ var helpText_default = HelpText;
 
 //#endregion
 export { helpText_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=helpText.js.map

package/dist/input/helpText.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpText.js","names":["Box","Icon","P"],"sources":["../../src/input/helpText.tsx"],"sourcesContent":["import Box from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport P from '../p'\nimport { cs, isJsx } from '../utils'\nimport { inputColors } from './consts'\nimport { useInputContext } from './context'\nimport type { HelpTextProps } from './input.types'\n\n/** Displaying help text below the input. */\nexport const HelpText = vui<'div', HelpTextProps>((props, ref) => {\n  const { className, children, isError, ...rest } = props\n  const inputProps = useInputContext()\n  const mergedProps = { ...inputProps, ...props }\n  const styles = useStyleConfig('Input', mergedProps)\n\n  const color = isError ? inputColors.error : inputColors.helpText\n\n  if (isJsx(children)) {\n    return (\n      <Box\n        alignItems=\"flex-start\"\n        className={cs('vui-inputHelpText', className)}\n        color={color}\n        display=\"flex\"\n        pt={0.5}\n        ref={ref}\n        {...styles.helpText}\n        {...rest}\n      >\n        {isError && <Icon mr={1} mt=\"3px\" name=\"uiExclamationTriangle\" pathFill={inputColors.error} size=\"sm\" />}\n        {children}\n      </Box>\n    )\n  }\n  // Fallback for string children\n  return (\n    <P\n      alignItems=\"flex-start\"\n      className={cs('vui-inputHelpText', className)}\n      color={color}\n      display=\"flex\"\n      fontSize={isError ? 'md' : 'sm'}\n      pt={0.5}\n      ref={ref}\n      {...styles.helpText}\n      {...rest}\n    >\n      {isError && <Icon mr={1} mt=\"3px\" name=\"uiExclamationTriangle\" pathFill={inputColors.error} size=\"sm\" />}\n      {children}\n    </P>\n  )\n})\n\nHelpText.displayName = 'HelpText'\nexport default HelpText\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EAAE,WAAW,UAAU,QAAS,GAAG,SAAS;CAGlD,MAAM,SAAS,eAAe,SADV;EAAE,GADH,iBAAiB;EACC,GAAG;EAAO,CACI;CAEnD,MAAM,QAAQ,UAAU,YAAY,QAAQ,YAAY;AAExD,KAAI,MAAM,SAAS,CACjB,QACE,qBAACA;EACC,YAAW;EACX,WAAW,GAAG,qBAAqB,UAAU;EACtC;EACP,SAAQ;EACR,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;aAEH,WAAW,oBAACC;GAAK,IAAI;GAAG,IAAG;GAAM,MAAK;GAAwB,UAAU,YAAY;GAAO,MAAK;IAAO,EACvG;GACG;AAIV,QACE,qBAACC;EACC,YAAW;EACX,WAAW,GAAG,qBAAqB,UAAU;EACtC;EACP,SAAQ;EACR,UAAU,UAAU,OAAO;EAC3B,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;aAEH,WAAW,oBAACD;GAAK,IAAI;GAAG,IAAG;GAAM,MAAK;GAAwB,UAAU,YAAY;GAAO,MAAK;IAAO,EACvG;GACC;EAEN;AAEF,SAAS,cAAc;AACvB,uBAAe"}
+{"version":3,"file":"helpText.js","names":["Box","Icon","P"],"sources":["../../src/input/helpText.tsx"],"sourcesContent":["import Box from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport P from '../p'\nimport { cs, isJsx } from '../utils'\nimport { inputColors } from './consts'\nimport { useInputContext } from './context'\nimport type { HelpTextProps } from './input.types'\n\n/** Displaying help text below the input. */\nexport const HelpText = vui<'div', HelpTextProps>((props, ref) => {\n  const { className, children, isError, ...rest } = props\n  const inputProps = useInputContext()\n  const mergedProps = { ...inputProps, ...props }\n  const styles = useStyleConfig('Input', mergedProps)\n\n  const color = isError ? inputColors.error : inputColors.helpText\n\n  if (isJsx(children)) {\n    return (\n      <Box\n        alignItems=\"flex-start\"\n        className={cs('vui-inputHelpText', className)}\n        color={color}\n        display=\"flex\"\n        pt={0.5}\n        ref={ref}\n        {...styles.helpText}\n        {...rest}\n      >\n        {isError && <Icon mr={1} mt=\"3px\" name=\"uiExclamationTriangle\" pathFill={inputColors.error} size=\"sm\" />}\n        {children}\n      </Box>\n    )\n  }\n  // Fallback for string children\n  return (\n    <P\n      alignItems=\"flex-start\"\n      className={cs('vui-inputHelpText', className)}\n      color={color}\n      display=\"flex\"\n      fontSize={isError ? 'md' : 'sm'}\n      pt={0.5}\n      ref={ref}\n      {...styles.helpText}\n      {...rest}\n    >\n      {isError && <Icon mr={1} mt=\"3px\" name=\"uiExclamationTriangle\" pathFill={inputColors.error} size=\"sm\" />}\n      {children}\n    </P>\n  )\n})\n\nHelpText.displayName = 'HelpText'\nexport default HelpText\n"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EAAE,WAAW,UAAU,SAAS,GAAG,SAAS;CAGlD,MAAM,SAAS,eAAe,SADV;EAAE,GADH,iBAAiB;EACC,GAAG;EAAO,CACI;CAEnD,MAAM,QAAQ,UAAU,YAAY,QAAQ,YAAY;AAExD,KAAI,MAAM,SAAS,CACjB,QACE,qBAACA;EACC,YAAW;EACX,WAAW,GAAG,qBAAqB,UAAU;EACtC;EACP,SAAQ;EACR,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;aAEH,WAAW,oBAACC;GAAK,IAAI;GAAG,IAAG;GAAM,MAAK;GAAwB,UAAU,YAAY;GAAO,MAAK;IAAO,EACvG;GACG;AAIV,QACE,qBAACC;EACC,YAAW;EACX,WAAW,GAAG,qBAAqB,UAAU;EACtC;EACP,SAAQ;EACR,UAAU,UAAU,OAAO;EAC3B,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;aAEH,WAAW,oBAACD;GAAK,IAAI;GAAG,IAAG;GAAM,MAAK;GAAwB,UAAU,YAAY;GAAO,MAAK;IAAO,EACvG;GACC;EAEN;AAEF,SAAS,cAAc;AACvB,uBAAe"}

package/dist/input/helpers.js

@@ -7,5 +7,5 @@ function getInitialCount(props) {
 
 //#endregion
 export { getInitialCount };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=helpers.js.map

package/dist/input/index.d.ts

@@ -2,4 +2,4 @@ import { AutoCompletePopoverProps, HelpTextProps, InputInputProps, InputProps, I
 import { HelpText } from "./helpText.js";
 import { InputIcon } from "./inputIcon.js";
 import { InputInput, InputInputBase } from "./inputInput.js";
-import { Input, InputBase } from "./input.js";
+import { Input, InputBase } from "./input.js";

package/dist/input/index.js

@@ -0,0 +1,6 @@
+import helpText_default from "./helpText.js";
+import { InputIcon } from "./inputIcon.js";
+import { InputInput, InputInputBase } from "./inputInput.js";
+import input_default, { Input, InputBase } from "./input.js";
+
+globalThis.__vuiVersion__ = "4.0.0-beta.1"

package/dist/input/input.d.ts

@@ -6,10 +6,10 @@ import { HelpText } from "./helpText.js";
 import { InputIcon } from "./inputIcon.js";
 import { InputInput } from "./inputInput.js";
 import "../index.js";
-import * as styled_components396 from "styled-components";
+import * as styled_components384 from "styled-components";
 
 //#region src/input/input.d.ts
-declare const InputBase: styled_components396.StyledComponent<"div", styled_components396.DefaultTheme, SystemProps, never>;
+declare const InputBase: styled_components384.StyledComponent<"div", styled_components384.DefaultTheme, SystemProps, never>;
 /**
  * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.
  * Forwards many relevant props to the inner input. Handles different states, like loading or error.
@@ -22,4 +22,5 @@ declare const Input: VuiComponent<"div", InputProps> & {
 };
 //#endregion
 export { Input, InputBase };
+
 //# sourceMappingURL=input.d.ts.map

package/dist/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","names":[],"sources":["../../src/input/input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;cA0Ba,WAAS,oBAAA,CAAA,uBA0BrB,oBAAA,CA1BqB,YAAA,CAAA,CAAA,WAAA,CAAA;;;;;;AAAT,OAAA,CAAA,KAAA,CAiCA,KAPZ,CAAA,CA6MK,YA7ML,CAAA,CAAA,GAAA,CAAA,CAAA,CA6MyB,UA7MzB,CAAA,CAAA,CAAA,CAAA;EAAA,IAAA,CAAA,CAAA,MAAA,CA8Mc,SAxOO;EAAA,KAAA,CAAA,CAAA,MAAA,CAyON,UAzOM;EAAA,QAAA,CAAA,CAAA,MAAA,CA0OH,QA1OG;CAAA"}
+{"version":3,"file":"input.d.ts","names":[],"sources":["../../src/input/input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;cA0Ba,WAAS,oBAAA,CAAA,uBA0BrB,oBAAA,CA1BqB,YAAA,EAAA,WAAA;;;;;;AAAT,cAiCA,KAPZ,EA6MK,YA7ML,CAAA,KAAA,EA6MyB,UA7MzB,CAAA,GAAA;EAAA,IAAA,EAAA,OA8Mc,SAxOO;EAAA,KAAA,EAAA,OAyON,UAzOM;EAAA,QAAA,EAAA,OA0OH,QA1OG;CAAA"}

package/dist/input/input.js

@@ -1,16 +1,22 @@
 import { isString } from "../utils/assertion.js";
 import { filterUndefined } from "../utils/object.js";
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { clearIconSize, displayValueOnlyTextSize, helpTextMargin, helpTextSize, inputColors, inputStateMapping } from "./consts.js";
 import { useStyleConfig } from "../core/theme.js";
 import { styled } from "../core/styled.js";
 import { vui } from "../core/vui.js";
 import box_default from "../box/box.js";
+import "../box/index.js";
 import { T } from "../t/t.js";
+import "../t/index.js";
 import { IconButton } from "../button/buttons.js";
+import "../button/index.js";
+import "../core/index.js";
 import { InputProvider } from "./context.js";
 import helpText_default from "./helpText.js";
 import label_default from "../label/label.js";
+import "../label/index.js";
 import autoCompletePopover_default from "./autoCompletePopover.js";
 import { getInitialCount } from "./helpers.js";
 import inputIcon_default from "./inputIcon.js";
@@ -52,7 +58,7 @@ const InputBase = styled.divBox`
 * Exposes some props to the children via context.
 */
 const Input = vui((props, ref) => {
-	const { allowClear, ariaLabel, autoComplete, autoCompleteMaxHeight, autoCompleteOptions, autoFocus, children, className, defaultValue, disabled, displayValueOnly, errorText, helpText, iconLeft, iconRight, id: idProp, input, inputProps, inputRef, itemLeft, itemRight, label, labelMarkOptional, labelTooltipText, max, maxLength, min, minLength, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size = "lg", state = "", stateMapping, step, type = "text", value, variant,...rest } = props;
+	const { allowClear, ariaLabel, autoComplete, autoCompleteMaxHeight, autoCompleteOptions, autoFocus, children, className, defaultValue, disabled, displayValueOnly, errorText, helpText, iconLeft, iconRight, id: idProp, input, inputProps, inputRef, itemLeft, itemRight, label, labelMarkOptional, labelTooltipText, max, maxLength, min, minLength, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size = "lg", state = "", stateMapping, step, type = "text", value, variant, ...rest } = props;
 	const generatedId = useId();
 	const [count, setCount] = useState(getInitialCount(props));
 	const [valueInternal, setValueInternal] = useState(defaultValue || "");
@@ -223,5 +229,5 @@ var input_default = Input;
 
 //#endregion
 export { Input, InputBase, input_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=input.js.map

package/dist/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["value","AutoCompletePopover","Box","Label","InputIcon","InputInput","HelpText"],"sources":["../../src/input/input.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useState } from 'react'\n\nimport Box from '../box'\nimport { IconButton } from '../button'\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport Label from '../label'\nimport { T } from '../t'\nimport type { ChangeEvent } from '../utils'\nimport { cs, filterUndefined, isString } from '../utils'\nimport AutoCompletePopover from './autoCompletePopover'\nimport {\n  clearIconSize,\n  displayValueOnlyTextSize,\n  helpTextMargin,\n  helpTextSize,\n  inputColors,\n  inputStateMapping,\n} from './consts'\nimport { InputProvider } from './context'\nimport { getInitialCount } from './helpers'\nimport HelpText from './helpText'\nimport type { InputProps } from './input.types'\nimport InputIcon from './inputIcon'\nimport InputInput from './inputInput'\n\nexport const InputBase = styled.divBox`\n  align-items: center;\n  color: sandstone.10;\n  background-color: white;\n  border-radius: none;\n  border-width: 1px;\n  display: flex;\n  flex-shrink: 0;\n  outline: none;\n  position: relative;\n  transition-duration: 0s;\n  transform: translate3d(0, 0, 0);\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: sandstone.79;\n    border-color: sandstone.79;\n    & > .vui-icon {\n      color: sandstone.50;\n    }\n    & > .vui-icon > path {\n      fill: sandstone.50;\n    }\n  }\n`\n\n/**\n * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.\n * Forwards many relevant props to the inner input. Handles different states, like loading or error.\n * Exposes some props to the children via context.\n */\nexport const Input = vui<'div', InputProps>((props, ref) => {\n  const {\n    allowClear,\n    ariaLabel,\n    autoComplete,\n    autoCompleteMaxHeight,\n    autoCompleteOptions,\n    autoFocus,\n    children,\n    className,\n    defaultValue,\n    disabled,\n    displayValueOnly,\n    errorText,\n    helpText,\n    iconLeft,\n    iconRight,\n    id: idProp,\n    input,\n    inputProps,\n    inputRef,\n    itemLeft,\n    itemRight,\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n    max,\n    maxLength,\n    min,\n    minLength,\n    name,\n    onBlur,\n    onChange: onChangeProp,\n    onFocus,\n    pattern,\n    placeholder,\n    readOnly,\n    required,\n    showCount,\n    size = 'lg',\n    state = '',\n    stateMapping,\n    step,\n    type = 'text',\n    value,\n    variant,\n    ...rest\n  } = props\n\n  const generatedId = useId()\n  const [count, setCount] = useState(getInitialCount(props))\n  const [valueInternal, setValueInternal] = useState(defaultValue || '')\n  const states = { ...inputStateMapping, ...stateMapping }\n\n  const id = idProp || generatedId\n\n  const styles = useStyleConfig('Input', props)\n\n  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])\n\n  function onChange(e: ChangeEvent) {\n    const inputValue = e.target.value\n\n    // Limit input length if maxLength is set\n    const value = maxLength ? inputValue.slice(0, maxLength) : inputValue\n\n    setValueInternal(value)\n    setCount(value?.length)\n    onChangeProp?.(e)\n  }\n\n  function onAutoCompleteSelect(value: string) {\n    const e = { target: { value }, type: 'autoCompleteSelect' }\n    onChange(e as unknown as ChangeEvent)\n  }\n\n  function onClear() {\n    const value = ''\n    const e = { target: { value }, type: 'onClear' }\n    setValueInternal(value)\n    setCount(0)\n    onChange(e as unknown as ChangeEvent)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    bg: readOnly ? 'sandstone.97' : undefined,\n    borderColor: readOnly ? 'sandstone.55' : undefined,\n    focusWithinBorderColor: !readOnly ? 'transparent' : undefined,\n    focusWithinRingColor: readOnly ? 'transparent' : undefined,\n  })\n\n  useEffect(() => {\n    if (value === undefined && defaultValue !== undefined) return\n    setValueInternal(value ?? '')\n    setCount(value?.toString()?.length ? `${value}`.length : 0)\n  }, [value])\n\n  const filterAutoCompleteOptions = (i: string) =>\n    valueInternal === i ? false : !valueInternal || i.toLowerCase().includes(`${valueInternal}`.toLowerCase())\n\n  return (\n    <InputProvider value={context}>\n      {displayValueOnly ? (\n        <T className={cs('vui-input-value', className)} size={displayValueOnlyTextSize[size]}>\n          {value || defaultValue}\n        </T>\n      ) : (\n        <AutoCompletePopover\n          autoCompleteMaxHeight={autoCompleteMaxHeight}\n          autoCompleteOptions={autoCompleteOptions}\n          filterAutoCompleteOptions={filterAutoCompleteOptions}\n          onAutoCompleteSelect={onAutoCompleteSelect}\n        >\n          <Box className=\"vui-inputContainer\" column ref={ref} {...rest}>\n            {isString(label) ? (\n              <Label\n                aria-disabled={disabled}\n                className=\"vui-inputLabel\"\n                htmlFor={id}\n                markAsOptional={labelMarkOptional}\n                mb={0.5}\n                text={label}\n                tooltipText={labelTooltipText}\n                {...styles.label}\n              />\n            ) : (\n              label\n            )}\n\n            <InputBase className={cs('vui-input', className)} {...styles.container} {...aliasedProps}>\n              {itemLeft}\n              {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}\n              {children ?? input ?? (\n                <InputInput\n                  ref={inputRef}\n                  {...{\n                    autoFocus,\n                    ariaLabel,\n                    disabled,\n                    id,\n                    max,\n                    maxLength,\n                    min,\n                    minLength,\n                    name,\n                    onBlur,\n                    onChange,\n                    onFocus,\n                    pattern,\n                    placeholder,\n                    readOnly,\n                    required,\n                    step,\n                    type,\n                  }}\n                  autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}\n                  value={valueInternal}\n                  {...inputProps}\n                />\n              )}\n              {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}\n              {itemRight}\n              {state && <InputIcon mr={1} {...states[state]?.iconProps} />}\n              {allowClear && (\n                <IconButton\n                  disabled={!valueInternal}\n                  icon=\"uiTimes\"\n                  mr={0.5}\n                  onClick={onClear}\n                  size={clearIconSize[size]}\n                  title=\"Clear\"\n                />\n              )}\n              {showCount && (\n                <T\n                  className=\"vui-inputCount\"\n                  color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}\n                  position=\"absolute\"\n                  right={0}\n                  size=\"sm\"\n                  top=\"calc(100% + 1px)\"\n                >\n                  {count} {maxLength ? `/ ${maxLength}` : null}\n                </T>\n              )}\n            </InputBase>\n            {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}\n            {!!errorText && (\n              <HelpText isError mr={showCount ? helpTextMargin : undefined} size={helpTextSize[size]}>\n                {errorText}\n              </HelpText>\n            )}\n          </Box>\n        </AutoCompletePopover>\n      )}\n    </InputProvider>\n  )\n}) as VuiComponent<'div', InputProps> & {\n  Icon: typeof InputIcon\n  Input: typeof InputInput\n  HelpText: typeof HelpText\n}\n\nInput.Icon = InputIcon\nInput.Input = InputInput\nInput.HelpText = HelpText\nInput.displayName = 'Input'\n\nexport default Input\n"],"mappings":"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"}
+{"version":3,"file":"input.js","names":["value","AutoCompletePopover","Box","Label","InputIcon","InputInput","HelpText"],"sources":["../../src/input/input.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useState } from 'react'\n\nimport Box from '../box'\nimport { IconButton } from '../button'\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport Label from '../label'\nimport { T } from '../t'\nimport type { ChangeEvent } from '../utils'\nimport { cs, filterUndefined, isString } from '../utils'\nimport AutoCompletePopover from './autoCompletePopover'\nimport {\n  clearIconSize,\n  displayValueOnlyTextSize,\n  helpTextMargin,\n  helpTextSize,\n  inputColors,\n  inputStateMapping,\n} from './consts'\nimport { InputProvider } from './context'\nimport { getInitialCount } from './helpers'\nimport HelpText from './helpText'\nimport type { InputProps } from './input.types'\nimport InputIcon from './inputIcon'\nimport InputInput from './inputInput'\n\nexport const InputBase = styled.divBox`\n  align-items: center;\n  color: sandstone.10;\n  background-color: white;\n  border-radius: none;\n  border-width: 1px;\n  display: flex;\n  flex-shrink: 0;\n  outline: none;\n  position: relative;\n  transition-duration: 0s;\n  transform: translate3d(0, 0, 0);\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: sandstone.79;\n    border-color: sandstone.79;\n    & > .vui-icon {\n      color: sandstone.50;\n    }\n    & > .vui-icon > path {\n      fill: sandstone.50;\n    }\n  }\n`\n\n/**\n * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.\n * Forwards many relevant props to the inner input. Handles different states, like loading or error.\n * Exposes some props to the children via context.\n */\nexport const Input = vui<'div', InputProps>((props, ref) => {\n  const {\n    allowClear,\n    ariaLabel,\n    autoComplete,\n    autoCompleteMaxHeight,\n    autoCompleteOptions,\n    autoFocus,\n    children,\n    className,\n    defaultValue,\n    disabled,\n    displayValueOnly,\n    errorText,\n    helpText,\n    iconLeft,\n    iconRight,\n    id: idProp,\n    input,\n    inputProps,\n    inputRef,\n    itemLeft,\n    itemRight,\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n    max,\n    maxLength,\n    min,\n    minLength,\n    name,\n    onBlur,\n    onChange: onChangeProp,\n    onFocus,\n    pattern,\n    placeholder,\n    readOnly,\n    required,\n    showCount,\n    size = 'lg',\n    state = '',\n    stateMapping,\n    step,\n    type = 'text',\n    value,\n    variant,\n    ...rest\n  } = props\n\n  const generatedId = useId()\n  const [count, setCount] = useState(getInitialCount(props))\n  const [valueInternal, setValueInternal] = useState(defaultValue || '')\n  const states = { ...inputStateMapping, ...stateMapping }\n\n  const id = idProp || generatedId\n\n  const styles = useStyleConfig('Input', props)\n\n  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])\n\n  function onChange(e: ChangeEvent) {\n    const inputValue = e.target.value\n\n    // Limit input length if maxLength is set\n    const value = maxLength ? inputValue.slice(0, maxLength) : inputValue\n\n    setValueInternal(value)\n    setCount(value?.length)\n    onChangeProp?.(e)\n  }\n\n  function onAutoCompleteSelect(value: string) {\n    const e = { target: { value }, type: 'autoCompleteSelect' }\n    onChange(e as unknown as ChangeEvent)\n  }\n\n  function onClear() {\n    const value = ''\n    const e = { target: { value }, type: 'onClear' }\n    setValueInternal(value)\n    setCount(0)\n    onChange(e as unknown as ChangeEvent)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    bg: readOnly ? 'sandstone.97' : undefined,\n    borderColor: readOnly ? 'sandstone.55' : undefined,\n    focusWithinBorderColor: !readOnly ? 'transparent' : undefined,\n    focusWithinRingColor: readOnly ? 'transparent' : undefined,\n  })\n\n  useEffect(() => {\n    if (value === undefined && defaultValue !== undefined) return\n    setValueInternal(value ?? '')\n    setCount(value?.toString()?.length ? `${value}`.length : 0)\n  }, [value])\n\n  const filterAutoCompleteOptions = (i: string) =>\n    valueInternal === i ? false : !valueInternal || i.toLowerCase().includes(`${valueInternal}`.toLowerCase())\n\n  return (\n    <InputProvider value={context}>\n      {displayValueOnly ? (\n        <T className={cs('vui-input-value', className)} size={displayValueOnlyTextSize[size]}>\n          {value || defaultValue}\n        </T>\n      ) : (\n        <AutoCompletePopover\n          autoCompleteMaxHeight={autoCompleteMaxHeight}\n          autoCompleteOptions={autoCompleteOptions}\n          filterAutoCompleteOptions={filterAutoCompleteOptions}\n          onAutoCompleteSelect={onAutoCompleteSelect}\n        >\n          <Box className=\"vui-inputContainer\" column ref={ref} {...rest}>\n            {isString(label) ? (\n              <Label\n                aria-disabled={disabled}\n                className=\"vui-inputLabel\"\n                htmlFor={id}\n                markAsOptional={labelMarkOptional}\n                mb={0.5}\n                text={label}\n                tooltipText={labelTooltipText}\n                {...styles.label}\n              />\n            ) : (\n              label\n            )}\n\n            <InputBase className={cs('vui-input', className)} {...styles.container} {...aliasedProps}>\n              {itemLeft}\n              {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}\n              {children ?? input ?? (\n                <InputInput\n                  ref={inputRef}\n                  {...{\n                    autoFocus,\n                    ariaLabel,\n                    disabled,\n                    id,\n                    max,\n                    maxLength,\n                    min,\n                    minLength,\n                    name,\n                    onBlur,\n                    onChange,\n                    onFocus,\n                    pattern,\n                    placeholder,\n                    readOnly,\n                    required,\n                    step,\n                    type,\n                  }}\n                  autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}\n                  value={valueInternal}\n                  {...inputProps}\n                />\n              )}\n              {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}\n              {itemRight}\n              {state && <InputIcon mr={1} {...states[state]?.iconProps} />}\n              {allowClear && (\n                <IconButton\n                  disabled={!valueInternal}\n                  icon=\"uiTimes\"\n                  mr={0.5}\n                  onClick={onClear}\n                  size={clearIconSize[size]}\n                  title=\"Clear\"\n                />\n              )}\n              {showCount && (\n                <T\n                  className=\"vui-inputCount\"\n                  color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}\n                  position=\"absolute\"\n                  right={0}\n                  size=\"sm\"\n                  top=\"calc(100% + 1px)\"\n                >\n                  {count} {maxLength ? `/ ${maxLength}` : null}\n                </T>\n              )}\n            </InputBase>\n            {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}\n            {!!errorText && (\n              <HelpText isError mr={showCount ? helpTextMargin : undefined} size={helpTextSize[size]}>\n                {errorText}\n              </HelpText>\n            )}\n          </Box>\n        </AutoCompletePopover>\n      )}\n    </InputProvider>\n  )\n}) as VuiComponent<'div', InputProps> & {\n  Icon: typeof InputIcon\n  Input: typeof InputInput\n  HelpText: typeof HelpText\n}\n\nInput.Icon = InputIcon\nInput.Input = InputInput\nInput.HelpText = HelpText\nInput.displayName = 'Input'\n\nexport default Input\n"],"mappings":"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"}

package/dist/input/input.types.d.ts

@@ -7,7 +7,7 @@ import { IconProp, IconProps } from "../icon/icon.types.js";
 import "../icon/index.js";
 import { PProps } from "../p/p.types.js";
 import "../p/index.js";
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 
 //#region src/input/input.types.d.ts
 type InputInputProps = PropsOf<'input', SystemProps>;
@@ -117,4 +117,5 @@ type InputStateMapping = Record<string, {
 type InputType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 //#endregion
 export { AutoCompletePopoverProps, HelpTextProps, InputInputProps, InputProps, InputState, InputStateMapping, InputType };
+
 //# sourceMappingURL=input.types.d.ts.map