@povio/ui 2.1.14 → 2.1.15

package/dist/index.js

@@ -1,278 +1,136 @@
-import { AlignCenterIcon } from "./assets/icons/AlignCenter.js";
-import { AlignLeftIcon } from "./assets/icons/AlignLeft.js";
-import { AlignLeftRightIcon } from "./assets/icons/AlignLeftRight.js";
-import { AlignRightIcon } from "./assets/icons/AlignRight.js";
-import { ArrowDropDownIcon } from "./assets/icons/ArrowDropDown.js";
-import { ArrowDropUpIcon } from "./assets/icons/ArrowDropUp.js";
-import { ArrowLeftIcon } from "./assets/icons/ArrowLeft.js";
-import { ArrowRightIcon } from "./assets/icons/ArrowRight.js";
-import { BoldIcon } from "./assets/icons/Bold.js";
-import { BulletedListIcon } from "./assets/icons/BulletedList.js";
-import { CalendarIcon } from "./assets/icons/Calendar.js";
-import { CheckIcon } from "./assets/icons/Check.js";
-import { CheckboxCheckmarkIcon } from "./assets/icons/CheckboxCheckmark.js";
-import { CheckboxIndeterminateIcon } from "./assets/icons/CheckboxIndeterminate.js";
-import { ChevronDownIcon } from "./assets/icons/ChevronDown.js";
-import { ChevronLeftIcon } from "./assets/icons/ChevronLeft.js";
-import { ChevronRightIcon } from "./assets/icons/ChevronRight.js";
-import { ChevronsLeftIcon } from "./assets/icons/ChevronsLeft.js";
-import { ChevronsRightIcon } from "./assets/icons/ChevronsRight.js";
-import { ChevronUpIcon } from "./assets/icons/ChevronUp.js";
-import { ClockIcon } from "./assets/icons/Clock.js";
-import { CloseIcon } from "./assets/icons/Close.js";
-import { DateTimeIcon } from "./assets/icons/DateTime.js";
-import { HighlightIcon } from "./assets/icons/Highlight.js";
-import { HighlightOnIcon } from "./assets/icons/HighlightOn.js";
-import { InfoIcon } from "./assets/icons/Info.js";
-import { ItalicIcon } from "./assets/icons/Italic.js";
-import { LinkIcon } from "./assets/icons/Link.js";
-import { MenuIcon } from "./assets/icons/Menu.js";
-import { NumberedListIcon } from "./assets/icons/NumberedList.js";
-import { PointerHorizontalIcon } from "./assets/icons/PointerHorizontal.js";
-import { PointerVerticalIcon } from "./assets/icons/PointerVertical.js";
-import { SendIcon } from "./assets/icons/Send.js";
-import { StrikethroughIcon } from "./assets/icons/Strikethrough.js";
-import { TextColorIcon } from "./assets/icons/TextColor.js";
-import { UnderlinedIcon } from "./assets/icons/Underlined.js";
-import { ViewIcon } from "./assets/icons/View.js";
-import { ViewOffIcon } from "./assets/icons/ViewOff.js";
-import { Button } from "./components/buttons/Button/Button.js";
-import { IconButton } from "./components/buttons/IconButton/IconButton.js";
-import { InlineIconButton } from "./components/buttons/InlineIconButton/InlineIconButton.js";
-import { PillButton } from "./components/buttons/PillButton/PillButton.js";
-import { SplitButton } from "./components/buttons/SplitButton/SplitButton.js";
-import { TextButton } from "./components/buttons/TextButton/TextButton.js";
-import { ToggleButton } from "./components/buttons/ToggleButton/ToggleButton.js";
-import { Checkbox } from "./components/inputs/Checkbox/Checkbox.js";
-import { DatePicker } from "./components/inputs/DateTime/DatePicker/DatePicker.js";
-import { DateRangePicker } from "./components/inputs/DateTime/DateRangePicker/DateRangePicker.js";
-import { DateTimePicker } from "./components/inputs/DateTime/DateTimePicker/DateTimePicker.js";
-import { TimePicker } from "./components/inputs/DateTime/TimePicker/TimePicker.js";
-import { FileUpload } from "./components/inputs/File/FileUpload.js";
-import { FileUploadContainer } from "./components/inputs/File/FileUploadContainer.js";
-import { InputUpload } from "./components/inputs/File/InputUpload.js";
-import { ProgressBar } from "./components/inputs/File/shared/ProgressBar.js";
-import { FormField } from "./components/inputs/FormField/FormField.js";
-import { NumberInput } from "./components/inputs/Input/NumberInput/NumberInput.js";
-import { PasswordInput } from "./components/inputs/Input/PasswordInput/PasswordInput.js";
-import { TextArea } from "./components/inputs/Input/TextArea/TextArea.js";
-import { TextInput } from "./components/inputs/Input/TextInput/TextInput.js";
-import { Form } from "./components/inputs/Inputs/Form.js";
-import { Inputs } from "./components/inputs/Inputs/Inputs.js";
-import { RadioGroup } from "./components/inputs/RadioGroup/RadioGroup.js";
-import { Autocomplete } from "./components/inputs/Selection/Autocomplete/Autocomplete.js";
-import { QueryAutocomplete } from "./components/inputs/Selection/Autocomplete/QueryAutocomplete.js";
-import { Select } from "./components/inputs/Selection/Select/Select.js";
-import { Slider } from "./components/inputs/Slider/Slider.js";
-import { Toggle } from "./components/inputs/Toggle/Toggle.js";
-import { Menu } from "./components/Menu/Menu.js";
-import { MenuItem } from "./components/Menu/MenuItem.js";
-import { MenuPopover } from "./components/Menu/MenuPopover.js";
-import { uiOutlineClass } from "./components/outline.clsx.js";
-import { ActionModal } from "./components/overlays/ActionModal/ActionModal.js";
-import { BottomSheet } from "./components/overlays/BottomSheet/BottomSheet.js";
-import { Drawer } from "./components/overlays/Drawer/Drawer.js";
-import { Modal } from "./components/overlays/Modal/Modal.js";
-import { ResponsivePopover } from "./components/overlays/ResponsivePopover/ResponsivePopover.js";
-import { Tooltip } from "./components/overlays/Tooltip/Tooltip.js";
-import { TooltipEllipsis } from "./components/overlays/Tooltip/TooltipEllipsis.js";
-import { Segment } from "./components/segment/Segment.js";
-import { Pagination } from "./components/shared/pagination/Pagination.js";
-import { PaginationList } from "./components/shared/pagination/PaginationList.js";
-import { Alert } from "./components/status/Alert/Alert.js";
-import { Loader } from "./components/status/Loader/Loader.js";
-import { Toast, ToastContainer } from "./components/status/Toast/Toast.js";
-import { useToast } from "./components/status/Toast/useToast.js";
-import { CellText } from "./components/table/CellText.js";
-import { ColumnConfigModal } from "./components/table/ColumnConfig.js";
-import { HeaderText } from "./components/table/HeaderText.js";
-import { InfiniteTable } from "./components/table/InfiniteTable.js";
-import { PaginatedTable } from "./components/table/PaginatedTable.js";
-import { Table } from "./components/table/Table.js";
-import { Link } from "./components/text/Link/Link.js";
-import { Tag } from "./components/text/Tag/Tag.js";
-import { Typography } from "./components/text/Typography/Typography.js";
-import { Confirmation } from "./config/confirmation.context.js";
-import { ns, resources } from "./config/i18n.js";
-import { LinkContext } from "./config/link.context.js";
-import { UIRouter } from "./config/router.context.js";
-import { ThemeContext } from "./config/theme.context.js";
-import { UIConfig } from "./config/uiConfig.context.js";
-import { UIStyle } from "./config/uiStyle.context.js";
-import { dynamicColumns } from "./helpers/dynamicColumns.js";
-import { dynamicInputs } from "./helpers/dynamicInputs.js";
-import { useAutosave } from "./hooks/useAutosave.js";
-import { useBreakpoint } from "./hooks/useBreakpoint.js";
-import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
-import { useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo } from "./hooks/useDeepCompare.js";
-import { useFilters } from "./hooks/useFilters.js";
-import { useForm } from "./hooks/useForm.js";
-import { useFormAutosave } from "./hooks/useFormAutosave.js";
-import { useIntersectionObserver } from "./hooks/useIntersectionObserver.js";
-import { useLocalStorage } from "./hooks/useLocalStorage.js";
-import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
-import { usePagination } from "./hooks/usePagination.js";
-import { useScrollableListBox } from "./hooks/useScrollableListBox.js";
-import { useSorting } from "./hooks/useSorting.js";
-import { useStateAndRef } from "./hooks/useStateAndRef.js";
-import { useTableColumnConfig } from "./hooks/useTableColumnConfig.js";
-import { useTableNav } from "./hooks/useTableNav.js";
-import { useTranslationMemo } from "./hooks/useTranslationMemo.js";
-import { ArrayUtils } from "./utils/array.utils.js";
-import { compoundMapper } from "./utils/compoundMapper.js";
-import { DateUtils } from "./utils/date.utils.js";
-import { DateTimeUtils } from "./utils/date-time.utils.js";
-import { DomUtils } from "./utils/dom.utils.js";
-import { FileUtils } from "./utils/file.utils.js";
-import { isEqual } from "./utils/isEqual.js";
-import { logger } from "./utils/logger.js";
-import { ObjectUtils } from "./utils/object.utils.js";
-import { QueriesUtils } from "./utils/queries.utils.js";
-import { RestUtils } from "./utils/rest.utils.js";
-import { RoutingUtils } from "./utils/routing.utils.js";
-import { StringUtils } from "./utils/string.utils.js";
-import { ApplicationException, ErrorHandler, SharedErrorHandler } from "./utils/vendor/error-handling.js";
-import { RestInterceptor } from "./utils/vendor/rest-interceptor.js";
-export {
-  ActionModal,
-  Alert,
-  AlignCenterIcon,
-  AlignLeftIcon,
-  AlignLeftRightIcon,
-  AlignRightIcon,
-  ApplicationException,
-  ArrayUtils,
-  ArrowDropDownIcon,
-  ArrowDropUpIcon,
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  Autocomplete,
-  BoldIcon,
-  BottomSheet,
-  BulletedListIcon,
-  Button,
-  CalendarIcon,
-  CellText,
-  CheckIcon,
-  Checkbox,
-  CheckboxCheckmarkIcon,
-  CheckboxIndeterminateIcon,
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronUpIcon,
-  ChevronsLeftIcon,
-  ChevronsRightIcon,
-  ClockIcon,
-  CloseIcon,
-  ColumnConfigModal,
-  Confirmation,
-  DatePicker,
-  DateRangePicker,
-  DateTimeIcon,
-  DateTimePicker,
-  DateTimeUtils,
-  DateUtils,
-  DomUtils,
-  Drawer,
-  ErrorHandler,
-  FileUpload,
-  FileUploadContainer,
-  FileUtils,
-  Form,
-  FormField,
-  HeaderText,
-  HighlightIcon,
-  HighlightOnIcon,
-  IconButton,
-  InfiniteTable,
-  InfoIcon,
-  InlineIconButton,
-  InputUpload,
-  Inputs,
-  ItalicIcon,
-  Link,
-  LinkContext,
-  LinkIcon,
-  Loader,
-  Menu,
-  MenuIcon,
-  MenuItem,
-  MenuPopover,
-  Modal,
-  NumberInput,
-  NumberedListIcon,
-  ObjectUtils,
-  PaginatedTable,
-  Pagination,
-  PaginationList,
-  PasswordInput,
-  PillButton,
-  PointerHorizontalIcon,
-  PointerVerticalIcon,
-  ProgressBar,
-  QueriesUtils,
-  QueryAutocomplete,
-  RadioGroup,
-  ResponsivePopover,
-  RestInterceptor,
-  RestUtils,
-  RoutingUtils,
-  Segment,
-  Select,
-  SendIcon,
-  SharedErrorHandler,
-  Slider,
-  SplitButton,
-  StrikethroughIcon,
-  StringUtils,
-  Table,
-  Tag,
-  TextArea,
-  TextButton,
-  TextColorIcon,
-  TextInput,
-  ThemeContext,
-  TimePicker,
-  Toast,
-  ToastContainer,
-  Toggle,
-  ToggleButton,
-  Tooltip,
-  TooltipEllipsis,
-  Typography,
-  UIConfig,
-  UIRouter,
-  UIStyle,
-  UnderlinedIcon,
-  ViewIcon,
-  ViewOffIcon,
-  compoundMapper,
-  dynamicColumns,
-  dynamicInputs,
-  isEqual,
-  logger,
-  ns,
-  resources,
-  uiOutlineClass,
-  useAutosave,
-  useBreakpoint,
-  useDebounceCallback,
-  useDeepCompareEffect,
-  useDeepCompareLayoutEffect,
-  useDeepCompareMemo,
-  useFilters,
-  useForm,
-  useFormAutosave,
-  useIntersectionObserver,
-  useLocalStorage,
-  useLongPressRepeat,
-  usePagination,
-  useScrollableListBox,
-  useSorting,
-  useStateAndRef,
-  useTableColumnConfig,
-  useTableNav,
-  useToast,
-  useTranslationMemo
-};
+import { AlignCenterIcon } from "./AlignCenter.js";
+import { AlignLeftIcon } from "./AlignLeft.js";
+import { AlignLeftRightIcon } from "./AlignLeftRight.js";
+import { AlignRightIcon } from "./AlignRight.js";
+import { ArrowDropDownIcon } from "./ArrowDropDown.js";
+import { ArrowDropUpIcon } from "./ArrowDropUp.js";
+import { ArrowLeftIcon } from "./ArrowLeft.js";
+import { ArrowRightIcon } from "./ArrowRight.js";
+import { BoldIcon } from "./Bold.js";
+import { BulletedListIcon } from "./BulletedList.js";
+import { CalendarIcon } from "./Calendar.js";
+import { CheckIcon } from "./Check.js";
+import { CheckboxCheckmarkIcon } from "./CheckboxCheckmark.js";
+import { CheckboxIndeterminateIcon } from "./CheckboxIndeterminate.js";
+import { ChevronDownIcon } from "./ChevronDown.js";
+import { ChevronLeftIcon } from "./ChevronLeft.js";
+import { ChevronRightIcon } from "./ChevronRight.js";
+import { ChevronsLeftIcon } from "./ChevronsLeft.js";
+import { ChevronsRightIcon } from "./ChevronsRight.js";
+import { ChevronUpIcon } from "./ChevronUp.js";
+import { ClockIcon } from "./Clock.js";
+import { CloseIcon } from "./Close.js";
+import { DateTimeIcon } from "./DateTime.js";
+import { HighlightIcon } from "./Highlight.js";
+import { HighlightOnIcon } from "./HighlightOn.js";
+import { InfoIcon } from "./Info.js";
+import { ItalicIcon } from "./Italic.js";
+import { LinkIcon } from "./Link.js";
+import { MenuIcon } from "./Menu.js";
+import { NumberedListIcon } from "./NumberedList.js";
+import { PointerHorizontalIcon } from "./PointerHorizontal.js";
+import { PointerVerticalIcon } from "./PointerVertical.js";
+import { SendIcon } from "./Send.js";
+import { StrikethroughIcon } from "./Strikethrough.js";
+import { TextColorIcon } from "./TextColor.js";
+import { UnderlinedIcon } from "./Underlined.js";
+import { ViewIcon } from "./View.js";
+import { ViewOffIcon } from "./ViewOff.js";
+import { Loader } from "./Loader.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { Typography } from "./Typography.js";
+import { Tooltip } from "./Tooltip.js";
+import { TooltipEllipsis } from "./TooltipEllipsis.js";
+import { LinkContext } from "./link.context.js";
+import { uiOutlineClass } from "./outline.clsx.js";
+import { compoundMapper } from "./compoundMapper.js";
+import { Button } from "./Button.js";
+import { IconButton } from "./IconButton.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { PillButton } from "./PillButton.js";
+import { MenuItem } from "./MenuItem.js";
+import { MenuPopover } from "./MenuPopover.js";
+import { DomUtils } from "./dom.utils.js";
+import { BottomSheet } from "./BottomSheet.js";
+import { useBreakpoint } from "./useBreakpoint.js";
+import { Menu } from "./Menu2.js";
+import { SplitButton } from "./SplitButton.js";
+import { TextButton } from "./TextButton.js";
+import { ToggleButton } from "./ToggleButton.js";
+import { ObjectUtils } from "./object.utils.js";
+import { isEqual } from "./isEqual.js";
+import { useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo } from "./useDeepCompare.js";
+import { UIConfig } from "./uiConfig.context.js";
+import { Checkbox } from "./Checkbox.js";
+import { useLongPressRepeat } from "./useLongPressRepeat.js";
+import { useScrollableListBox } from "./useScrollableListBox.js";
+import { ns, resources } from "./i18n.js";
+import { FormField } from "./FormField.js";
+import { DateTimeUtils } from "./date-time.utils.js";
+import { DatePicker } from "./DatePicker.js";
+import { Tag } from "./Tag.js";
+import { useDebounceCallback } from "./useDebounceCallback.js";
+import { useIntersectionObserver } from "./useIntersectionObserver.js";
+import { TextInput } from "./TextInput.js";
+import { Select } from "./Select.js";
+import { DateRangePicker } from "./DateRangePicker.js";
+import { DateTimePicker } from "./DateTimePicker.js";
+import { TimePicker } from "./TimePicker.js";
+import { RestUtils } from "./rest.utils.js";
+import { FileUtils } from "./file.utils.js";
+import { ProgressBar } from "./ProgressBar.js";
+import { FileUpload } from "./FileUpload.js";
+import { FileUploadContainer } from "./FileUploadContainer.js";
+import { InputUpload } from "./InputUpload.js";
+import { NumberInput } from "./NumberInput.js";
+import { PasswordInput } from "./PasswordInput.js";
+import { TextArea } from "./TextArea.js";
+import { Autocomplete } from "./Autocomplete.js";
+import { QueryAutocomplete } from "./QueryAutocomplete.js";
+import { Slider } from "./Slider.js";
+import { Toggle } from "./Toggle.js";
+import { Segment } from "./Segment.js";
+import { StringUtils } from "./string.utils.js";
+import { dynamicInputs } from "./dynamicInputs.js";
+import { Form } from "./Form.js";
+import { Inputs } from "./Inputs.js";
+import { RadioGroup } from "./RadioGroup.js";
+import { Modal } from "./Modal.js";
+import { ActionModal } from "./ActionModal.js";
+import { Drawer } from "./Drawer.js";
+import { ResponsivePopover } from "./ResponsivePopover.js";
+import { PaginationList } from "./PaginationList.js";
+import { Pagination } from "./Pagination.js";
+import { Alert } from "./Alert.js";
+import { Toast, ToastContainer } from "./Toast.js";
+import { useToast } from "./useToast.js";
+import { CellText } from "./CellText.js";
+import { HeaderText } from "./HeaderText.js";
+import { logger } from "./logger.js";
+import { useTableNav } from "./useTableNav.js";
+import { Table } from "./Table.js";
+import { useTranslationMemo } from "./useTranslationMemo.js";
+import { ColumnConfigModal } from "./ColumnConfig.js";
+import { InfiniteTable } from "./InfiniteTable.js";
+import { PaginatedTable } from "./PaginatedTable.js";
+import { Link } from "./Link2.js";
+import { Confirmation } from "./confirmation.context.js";
+import { UIRouter } from "./router.context.js";
+import { useLocalStorage } from "./useLocalStorage.js";
+import { ThemeContext } from "./theme.context.js";
+import { DateUtils } from "./date.utils.js";
+import { dynamicColumns } from "./dynamicColumns.js";
+import { useAutosave } from "./useAutosave.js";
+import { useFilters } from "./useFilters.js";
+import { useForm } from "./useForm.js";
+import { useFormAutosave } from "./useFormAutosave.js";
+import { usePagination } from "./usePagination.js";
+import { useSorting } from "./useSorting.js";
+import { useStateAndRef } from "./useStateAndRef.js";
+import { useTableColumnConfig } from "./useTableColumnConfig.js";
+import { ArrayUtils } from "./array.utils.js";
+import { QueriesUtils } from "./queries.utils.js";
+import { RoutingUtils } from "./routing.utils.js";
+import { ApplicationException, ErrorHandler, SharedErrorHandler } from "./error-handling.js";
+import { RestInterceptor } from "./rest-interceptor.js";
+export { ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ApplicationException, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, ErrorHandler, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, RadioGroup, ResponsivePopover, RestInterceptor, RestUtils, RoutingUtils, Segment, Select, SendIcon, SharedErrorHandler, Slider, SplitButton, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIRouter, UIStyle, UnderlinedIcon, ViewIcon, ViewOffIcon, compoundMapper, dynamicColumns, dynamicInputs, isEqual, logger, ns, resources, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };

package/dist/input.cva.js

@@ -0,0 +1,210 @@
+import { UIStyle } from "./uiStyle.context.js";
+import { uiOutlineClass } from "./outline.clsx.js";
+import { clsx } from "clsx";
+import { cva } from "class-variance-authority";
+const inputBase = cva([uiOutlineClass, "flex w-full truncate"], {
+	variants: {
+		variant: {
+			outlined: "",
+			filled: ""
+		},
+		as: {
+			default: "rounded-input-rounding-default",
+			floating: [
+				"rounded-input-rounding-default",
+				"py-floating-label-input-height-empty!",
+				"group-has-[input:not(:placeholder-shown)]/input-content:pb-floating-label-input-height-filled!",
+				"group-has-[input:not(:placeholder-shown)]/input-content:pt-[calc(var(--spacing-input-height-default)+14px)]!"
+			],
+			filter: "rounded-input-rounding-default",
+			inline: [
+				"h-full",
+				"border-transparent border-b-0 bg-transparent text-text-default-1",
+				"hover:border-input-outlined-outline-hover",
+				"focus:border-input-outlined-outline-active",
+				"invalid:border-input-outlined-outline-error",
+				"disabled:hover:border-transparent"
+			]
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "outlined",
+			as: "default",
+			className: [
+				"border border-input-outlined-outline-idle border-solid bg-input-outlined-idle text-text-default-1",
+				"hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
+				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
+				"invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
+				"placeholder:text-text-default-3",
+				"focus-visible:outline-interactive-contained-primary-focus"
+			]
+		},
+		{
+			variant: "filled",
+			as: "default",
+			className: [
+				"border border-transparent border-solid bg-input-filled-idle text-text-default-1",
+				"hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
+				"focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
+				"invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+				"disabled:bg-input-filled-disabled disabled:text-text-default-1",
+				"placeholder:text-text-default-3",
+				"focus-visible:outline-interactive-contained-primary-focus"
+			]
+		},
+		{
+			variant: "outlined",
+			as: "floating",
+			className: [
+				"border border-input-outlined-outline-idle border-solid bg-input-outlined-idle text-text-default-1",
+				"hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
+				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
+				"invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
+				"placeholder:text-text-default-3",
+				"focus-visible:outline-interactive-contained-primary-focus"
+			]
+		},
+		{
+			variant: "filled",
+			as: "floating",
+			className: [
+				"border border-transparent border-solid bg-input-filled-idle text-text-default-1",
+				"hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
+				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-idle focus-within:text-text-default-1",
+				"invalid:border invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+				"disabled:bg-input-filled-disabled disabled:text-text-default-1",
+				"placeholder:text-text-default-3",
+				"focus-visible:outline-interactive-contained-primary-focus"
+			]
+		},
+		{
+			variant: "outlined",
+			as: "filter",
+			className: [
+				"border border-input-outlined-outline-idle border-solid bg-input-outlined-idle text-text-default-1",
+				"hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
+				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
+				"invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
+				"placeholder:text-text-default-3",
+				"focus-visible:outline-interactive-contained-primary-focus"
+			]
+		},
+		{
+			variant: "outlined",
+			as: "filter",
+			className: [
+				"border border-transparent border-solid bg-input-filled-idle text-text-default-1",
+				"hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
+				"focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
+				"invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+				"disabled:bg-input-filled-disabled disabled:text-text-default-1",
+				"placeholder:text-text-default-3",
+				"focus-visible:outline-interactive-contained-primary-focus"
+			]
+		}
+	],
+	defaultVariants: {
+		variant: "outlined",
+		as: "default"
+	}
+});
+const inputSize = cva("", {
+	variants: { size: {
+		"extra-small": "px-input-side-default py-input-height-default text-label-1",
+		small: "px-input-side-default py-input-height-default text-label-1",
+		default: "px-input-side-default py-input-height-default text-label-1",
+		large: "px-input-side-default py-input-height-default text-label-1"
+	} },
+	defaultVariants: { size: "default" }
+});
+const inputSide = cva("", {
+	variants: {
+		size: {
+			"extra-small": "",
+			small: "",
+			default: "",
+			large: ""
+		},
+		type: {
+			left: "",
+			right: "",
+			var: ""
+		}
+	},
+	compoundVariants: [
+		{
+			type: "left",
+			size: "extra-small",
+			className: "left-input-side-default"
+		},
+		{
+			type: "right",
+			size: "extra-small",
+			className: "right-input-side-default"
+		},
+		{
+			type: "var",
+			size: "extra-small",
+			className: "--spacing-input-side-default"
+		},
+		{
+			type: "left",
+			size: "small",
+			className: "left-input-side-default"
+		},
+		{
+			type: "right",
+			size: "small",
+			className: "right-input-side-default"
+		},
+		{
+			type: "var",
+			size: "small",
+			className: "--spacing-input-side-default"
+		},
+		{
+			type: "left",
+			size: "default",
+			className: "left-input-side-default"
+		},
+		{
+			type: "right",
+			size: "default",
+			className: "right-input-side-default"
+		},
+		{
+			type: "var",
+			size: "default",
+			className: "--spacing-input-side-default"
+		},
+		{
+			type: "left",
+			size: "large",
+			className: "left-input-side-default"
+		},
+		{
+			type: "right",
+			size: "large",
+			className: "right-input-side-default"
+		},
+		{
+			type: "var",
+			size: "large",
+			className: "--spacing-input-side-default"
+		}
+	],
+	defaultVariants: { size: "default" }
+});
+const useInputCva = () => {
+	const uiStyle = UIStyle.useConfig();
+	const inputBaseCva = uiStyle?.input?.baseCva ?? inputBase;
+	const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
+	return ({ className,...rest }) => {
+		return clsx(inputBaseCva(rest), inputSizeCva(rest), className);
+	};
+};
+export { inputBase, inputSide, inputSize, useInputCva };