@sqrzro/ui 4.0.0-alpha.77 → 4.0.0-alpha.79

package/dist/components/modals/ModalActions/index.d.ts

@@ -1,5 +1,5 @@
-import type { ClassNameProps } from '../../../styles/classnames/interfaces';
-import { SimpleActionObject } from '../../../utility/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
+import { SimpleActionObject } from '../../../utility/interfaces.js';
 import type { ModalClassNames } from '../Modal';
 export interface ModalActionsProps extends ClassNameProps<ModalClassNames> {
     actions: (SimpleActionObject | null)[];

package/dist/components/modals/ModalActions/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import ActionList from '../../../components/utility/ActionList';
-import { useClassNames } from '../../../styles/context';
+import ActionList from '../../utility/ActionList/index.js';
+import { useClassNames } from '../../../styles/context.js';
 function ModalActions({ actions, classNameProps, classNames, isLoading, }) {
     const componentClassNames = useClassNames('modal', { props: classNameProps }, classNames);
     return (_jsx("footer", { className: componentClassNames?.actions, children: _jsx(ActionList, { actions: actions, classNameProps: { ...classNameProps, isModal: true }, isLoading: isLoading }) }));

package/dist/components/utility/Action/index.d.ts

@@ -1,4 +1,4 @@
-import type { ActionObject } from '../../../utility/interfaces';
+import type { ActionObject } from '../../../utility/interfaces.js';
 export interface ActionProps<Data, Response> extends Omit<ActionObject<Data, Response>, 'details' | 'label'> {
     readonly children?: React.ReactNode;
     readonly label?: React.ReactNode;

package/dist/components/utility/Action/index.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense } from 'react';
-import useSearchParamsHref from '../../../hooks/useSearchParamsHref';
-import useServerAction from '../../../hooks/useServerAction';
+import useSearchParamsHref from '../../../hooks/useSearchParamsHref.js';
+import useServerAction from '../../../hooks/useServerAction.js';
 import Confirmable from '../Confirmable';
 function ActionComponent({ action, children, confirmable, data, href, icon, isDisabled, isLoading, isSubmittable, label, onClick, onSuccess, refreshOnSuccess, redirectOnSuccess, searchParams, render, variant, }) {
     const { setSearchParamsHref } = useSearchParamsHref();

package/dist/components/utility/ActionList/index.d.ts

@@ -1,5 +1,5 @@
-import type { ClassNameProps } from '../../../styles/classnames/interfaces';
-import { ActionObject } from '../../../utility/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
+import { ActionObject } from '../../../utility/interfaces.js';
 export interface ActionListClassNames {
     root: string;
     item: string;

package/dist/components/utility/ActionList/index.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { filterNull } from '@sqrzro/utility';
-import ActionButton from '../../../components/buttons/ActionButton';
-import { useClassNames } from '../../../styles/context';
+import ActionButton from '../../buttons/ActionButton/index.js';
+import { useClassNames } from '../../../styles/context.js';
 function ActionList({ actions, classNameProps, classNames, isLoading, }) {
     const componentClassNames = useClassNames('actionList', { props: classNameProps }, classNames);
     const filteredActions = filterNull(actions);

package/dist/components/utility/AppBody/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import Toaster from '../../../components/utility/Toaster';
+import Toaster from '../Toaster/index.js';
 function AppBody({ children }) {
     return (_jsxs(Fragment, { children: [_jsx("script", { dangerouslySetInnerHTML: {
                     __html: "(function(d){var v=d.createElement('div'),t=d.createElement('style'),s=v.style;s.overflowY='scroll';s.width='50';s.height='50';d.body.append(v);t.innerHTML='body:has([data-modal][open]){padding-right:'+(v.offsetWidth-v.clientWidth)+'px}';d.body.append(t);v.remove()}(document))",

package/dist/components/utility/Calendar/index.d.ts

@@ -1,4 +1,4 @@
-import { ClassNameProps } from '../../../styles/classnames/interfaces';
+import { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 export interface CalendarClassNames {
     root: string;
     header: string;

package/dist/components/utility/Calendar/index.js

@@ -1,12 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useState } from 'react';
-import tw from '../../../styles/classnames/utility/tw';
-import getDays from '../../../utility/get-days';
-import getDateState from '../../../utility/get-date-state';
-import getWeeks from '../../../utility/get-weeks';
+import tw from '../../../styles/classnames/utility/tw.js';
+import getDays from '../../../utility/get-days.js';
+import getDateState from '../../../utility/get-date-state.js';
+import getWeeks from '../../../utility/get-weeks.js';
 import CalendarDay from '../CalendarDay';
-import { useClassNames, useIcon } from '../../../styles/context';
+import { useClassNames, useIcon } from '../../../styles/context.js';
 function sortDates(dates) {
     return dates[0] > dates[1] ? [dates[1], dates[0]] : [dates[0], dates[1]];
 }

package/dist/components/utility/CalendarDay/index.d.ts

@@ -1,5 +1,5 @@
-import { ClassNameProps } from '../../../styles/classnames/interfaces';
-import type { DateState } from '../../../utility/get-date-state';
+import { ClassNameProps } from '../../../styles/classnames/interfaces.js';
+import type { DateState } from '../../../utility/get-date-state.js';
 import type { CalendarClassNames } from '../Calendar';
 interface CalendarDayProps extends ClassNameProps<CalendarClassNames> {
     date: Date | null;

package/dist/components/utility/CalendarDay/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/context';
+import { useClassNames } from '../../../styles/context.js';
 function CalendarDay({ classNames, classNameProps, date, isDisabled, onClick, state, }) {
     const componentClassNames = useClassNames('calendar', {
         props: {

package/dist/components/utility/Confirmable/index.d.ts

@@ -1,5 +1,5 @@
-import { ButtonProps } from '../../../components/buttons/Button';
-import type { ConfirmableObject } from '../../../utility/interfaces';
+import { ButtonProps } from '../../buttons/Button/index.js';
+import type { ConfirmableObject } from '../../../utility/interfaces.js';
 export interface ConfirmableProps<Data, Response> {
     confirmable: ConfirmableObject<Data, Response>;
     renderProps: ButtonProps;

package/dist/components/utility/Confirmable/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import useConfirmable from '../../../hooks/useConfirmable';
+import useConfirmable from '../../../hooks/useConfirmable.js';
 import ConfirmModal from '../../modals/ConfirmModal';
 function Confirmable({ confirmable, renderProps, render, }) {
     const { handle, isOpen, modalProps } = useConfirmable({

package/dist/components/utility/Container/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 export interface ContainerClassNames {
     root: string;
 }

package/dist/components/utility/Container/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/context';
+import { useClassNames } from '../../../styles/context.js';
 function Container({ children, classNameProps, classNames, }) {
     const componentClassNames = useClassNames('container', { props: classNameProps }, classNames);
     return _jsx("div", { className: componentClassNames?.root, children: children });

package/dist/components/utility/Loader/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, SizableClassName } from '../../../styles/classnames/interfaces';
+import type { ClassNameProps, SizableClassName } from '../../../styles/classnames/interfaces.js';
 export interface LoaderClassNames {
     root?: SizableClassName;
     inner?: SizableClassName;

package/dist/components/utility/Loader/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 import Assistive from '../Assistive';
 function Loader({ classNameProps, classNames }) {
     const componentClassNames = useClassNames('loader', { props: classNameProps }, classNames);

package/dist/components/utility/Popover/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, FocusableClassName } from '../../../styles/classnames/interfaces';
+import type { ClassNameProps, FocusableClassName } from '../../../styles/classnames/interfaces.js';
 export interface PopoverClassNames {
     root: FocusableClassName;
     scroll: string;

package/dist/components/utility/Popover/index.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { useClassNames } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 const HORIZONTAL_THRESHOLD = 40;
 const VERTICAL_THRESHOLD = 40;
 function getPositionStyles(align = 'left', vAlign = 'top') {

package/dist/components/utility/Toast/index.d.ts

@@ -1,5 +1,5 @@
-import type { ClassNameProps, StylableClassName } from '../../../styles/classnames/interfaces';
-import type { StyleVariant } from '../../../utility/interfaces';
+import type { ClassNameProps, StylableClassName } from '../../../styles/classnames/interfaces.js';
+import type { StyleVariant } from '../../../utility/interfaces.js';
 export interface ToastClassNames {
     root: StylableClassName;
 }

package/dist/components/utility/Toast/index.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
-import applyVariants from '../../../styles/classnames/utility/apply-variants';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
+import applyVariants from '../../../styles/classnames/utility/apply-variants.js';
 function Toast({ children, classNames, classNameProps, variant, }) {
     const componentClassNames = useClassNames('toast', { props: { ...classNameProps, ...applyVariants(variant) } }, classNames);
     if (!children) {

package/dist/filters/components/FilterBar/index.d.ts

@@ -1,5 +1,5 @@
-import type { TableColumnObject } from '../../../components/collections/interfaces';
-import { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { TableColumnObject } from '../../../components/collections/interfaces.js';
+import { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 import type { FilterMap } from '../../interfaces';
 export interface FilterBarClassNames {
     root: string;

package/dist/filters/components/FilterBarClientComponent/index.d.ts

@@ -1,5 +1,5 @@
-import type { TableColumnObject } from '../../../components/collections/interfaces';
-import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { TableColumnObject } from '../../../components/collections/interfaces.js';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 import type { ClientFilterMap } from '../../interfaces';
 import type { FilterBarClassNames } from '../FilterBar';
 interface FilterBarClientComponentProps<T> extends ClassNameProps<FilterBarClassNames> {

package/dist/filters/components/FilterBarClientComponent/index.js

@@ -9,8 +9,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // import type { TableColumnObject } from '../../../tables/TableClientComponent';
 // import type { ClassNameProps } from '../../../utility/interfaces';
 import { getEntries } from '@sqrzro/utility';
-import useFilters from '../../../filters/hooks/useFilters';
-import { useClassNames } from '../../../styles/context';
+import useFilters from '../../hooks/useFilters.js';
+import { useClassNames } from '../../../styles/context.js';
 import SearchFilter from '../../filters/SearchFilter';
 import FilterItem from '../FilterItem';
 const FILTERED_TYPES = ['assistive', 'search'];

package/dist/filters/components/FilterClearButton/index.d.ts

@@ -1,4 +1,4 @@
-import { ClassNameProps } from '../../../styles/classnames/interfaces';
+import { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 export interface FilterClearButtonClassNames {
     root: string;
     icon: string;

package/dist/filters/components/FilterClearButton/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { useClassNames, useIcon } from '../../../styles/context';
+import { useClassNames, useIcon } from '../../../styles/context.js';
 function FilterClearButton({ classNameProps, classNames, onClick, }) {
     const componentClassNames = useClassNames('filterClear', { props: classNameProps }, classNames);
     const Icon = useIcon('filter.clear');

package/dist/filters/components/FilterControl/index.d.ts

@@ -1,4 +1,4 @@
-import { ClassNameProps } from '../../../styles/classnames/interfaces';
+import { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 import type { FilterItemClassNames } from '../FilterItem';
 interface FilterControlProps extends ClassNameProps<FilterItemClassNames> {
     children: React.ReactNode;

package/dist/filters/components/FilterControl/index.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // import FilterClearButton from '../FilterClearButton';
-import { useClassNames } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 import FilterClearButton from '../FilterClearButton';
 function FilterControl({ classNameProps, classNames, children, isDisabled, isFocused, isHighlighted, onClear, onClick, }) {
     const componentClassNames = useClassNames('filterItem', {

package/dist/filters/components/FilterItem/index.d.ts

@@ -1,5 +1,5 @@
-import { InputProps } from '../../../forms/interfaces';
-import { ClassNameProps, FocusableClassName, HighlightableClassName } from '../../../styles/classnames/interfaces';
+import { InputProps } from '../../../forms/interfaces.js';
+import { ClassNameProps, FocusableClassName, HighlightableClassName } from '../../../styles/classnames/interfaces.js';
 import { ClientFilterObject, FilterType } from '../../interfaces';
 export interface FilterItemClassNames {
     root: FocusableClassName & HighlightableClassName;

package/dist/filters/components/FilterItem/index.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import useClickOutside from '../../../hooks/useClickOutside';
-import { useClassNames } from '../../../styles/context';
+import useClickOutside from '../../../hooks/useClickOutside.js';
+import { useClassNames } from '../../../styles/context.js';
 import renderValue from '../../utility/render-value';
 import FilterControl from '../FilterControl';
 import FilterPanel from '../FilterPanel';

package/dist/filters/components/FilterPanel/index.d.ts

@@ -1,5 +1,5 @@
-import { InputProps } from '../../../forms/interfaces';
-import { SizableClassName } from '../../../styles/classnames/interfaces';
+import { InputProps } from '../../../forms/interfaces.js';
+import { SizableClassName } from '../../../styles/classnames/interfaces.js';
 import type { ClientFilterObject, FilterType } from '../../interfaces';
 export interface FilterPanelClassNames {
     content: string;

package/dist/filters/filters/BooleanFilter/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Dropdown from '../../../forms/components/Dropdown';
+import Dropdown from '../../../forms/components/Dropdown/index.js';
 import Filter from '../Filter';
 function BooleanFilter({ config, name, onChange, value, ...filterBarProps }) {
     function handleChange(event) {

package/dist/filters/filters/CalendarFilter/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import RangeCalendarInput from '../../../forms/components/RangeCalendarInput';
+import RangeCalendarInput from '../../../forms/components/RangeCalendarInput/index.js';
 import { transformFromDate, transformToDate } from '../../utility/transform-date';
 import Filter from '../Filter';
 function CalendarFilter({ name, onChange, value, ...filterBarProps }) {

package/dist/filters/filters/DropdownFilter/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Dropdown from '../../../forms/components/Dropdown';
+import Dropdown from '../../../forms/components/Dropdown/index.js';
 import Filter from '../Filter';
 function DropdownFilter({ config, name, onChange, value, ...filterBarProps }) {
     function handleChange(event) {

package/dist/filters/filters/Filter/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ClientFilterObject, FilterType } from '../../../filters/interfaces';
-import type { ClassNameProps } from '../../../styles/classnames/interfaces';
-import { SizeVariant } from '../../../utility/interfaces';
+import { ClientFilterObject, FilterType } from '../../interfaces.js';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
+import { SizeVariant } from '../../../utility/interfaces.js';
 import { FilterPanelClassNames } from '../../components/FilterPanel';
 interface FilterProps<F extends FilterType> extends ClassNameProps<FilterPanelClassNames>, ClientFilterObject<F> {
     align?: 'left' | 'right';

package/dist/filters/filters/Filter/index.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Button from '../../../components/buttons/Button';
-import Popover from '../../../components/utility/Popover';
-import { useClassNames, useIcon } from '../../../styles/context';
-import applySizes from '../../../styles/classnames/utility/apply-sizes';
+import Button from '../../../components/buttons/Button/index.js';
+import Popover from '../../../components/utility/Popover/index.js';
+import { useClassNames, useIcon } from '../../../styles/context.js';
+import applySizes from '../../../styles/classnames/utility/apply-sizes.js';
 function Filter({ align, children, classNameProps, classNames, icon, isDisabled, isOpen, label, onApply, size, title, }) {
     const componentClassNames = useClassNames('filterPanel', { props: { ...classNameProps, ...applySizes(size) } }, classNames);
     const DefaultIcon = useIcon('filter.panel');

package/dist/filters/filters/SearchFilter/index.d.ts

@@ -1,5 +1,5 @@
-import type { InputProps } from '../../../forms/interfaces';
-import { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { InputProps } from '../../../forms/interfaces.js';
+import { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 export interface SearchFilterClassNames {
     icon: string;
     input: string;

package/dist/filters/filters/SearchFilter/index.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useState } from 'react';
-import FilterClearButton from '../../../filters/components/FilterClearButton';
-import TextInput from '../../../forms/components/TextInput';
-import tw from '../../../styles/classnames/utility/tw';
-import { useClassNames, useIcon } from '../../../styles/context';
+import FilterClearButton from '../../components/FilterClearButton/index.js';
+import TextInput from '../../../forms/components/TextInput/index.js';
+import tw from '../../../styles/classnames/utility/tw.js';
+import { useClassNames, useIcon } from '../../../styles/context.js';
 function SearchFilter({ classNameProps, classNames, onChange, value, }) {
     const componentClassNames = useClassNames('filterSearch', { props: classNameProps }, classNames);
     const Icon = useIcon('filter.search');

package/dist/filters/filters/interfaces.d.ts

@@ -1,4 +1,4 @@
-import { InputProps } from '../../forms/interfaces';
+import { InputProps } from '../../forms/interfaces.js';
 import { ClientFilterObject, FilterType } from '../interfaces';
 export interface FilterComponentProps<F extends FilterType> extends Omit<ClientFilterObject<F>, 'type'>, InputProps<string> {
     icon?: React.ReactNode;

package/dist/filters/interfaces.d.ts

@@ -1,4 +1,4 @@
-import type { DropdownObject } from '../forms/interfaces';
+import type { DropdownObject } from '../forms/interfaces.js';
 export type FilterType = 'assistive' | 'boolean' | 'calendar' | 'column' | 'date' | 'dropdown' | 'money' | 'multi' | 'range' | 'search' | 'sort' | 'switch';
 export interface FilterConfig {
     align?: 'left' | 'right';

package/dist/filters/utility/get-quick-dates.d.ts

@@ -1,3 +1,3 @@
-import type { DropdownObject } from '../../forms/interfaces';
+import type { DropdownObject } from '../../forms/interfaces.js';
 declare function getQuickDates(): DropdownObject<string>[];
 export default getQuickDates;

package/dist/forms/components/Autocomplete/index.d.ts

@@ -1,4 +1,4 @@
-import { ClassNameProps } from '../../../styles/classnames/interfaces';
+import { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 import type { DropdownObject, InputProps } from '../../interfaces';
 import { DropdownClassNames, DropdownComponentProps } from '../Dropdown';
 export interface AutocompleteComponentProps<T> extends DropdownComponentProps<T> {

package/dist/forms/components/Autocomplete/index.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useRef, useState } from 'react';
-import Popover from '../../../components/utility/Popover';
-import useClickOutside from '../../../hooks/useClickOutside';
+import Popover from '../../../components/utility/Popover/index.js';
+import useClickOutside from '../../../hooks/useClickOutside.js';
 import StaticTextInput from '../StaticTextInput';
 import TextInput from '../TextInput';
 import AutocompleteList from '../AutocompleteList';

package/dist/forms/components/BaseCalendarInput/index.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import Popover from '../../../components/utility/Popover';
-import usePopover from '../../../hooks/usePopover';
+import Popover from '../../../components/utility/Popover/index.js';
+import usePopover from '../../../hooks/usePopover.js';
 import formatDateValue from '../../utility/format-date-value';
 import StaticTextInput from '../StaticTextInput';
 function BaseCalendarInput({ children, hasError, isDisabled, isOptional, isPanelOnly, name, onClear, value, }) {

package/dist/forms/components/CSVInput/index.d.ts

@@ -1,5 +1,5 @@
-import { InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, HighlightableClassName } from '../../../styles/classnames/interfaces';
+import { InputProps } from '../../interfaces.js';
+import type { ClassNameProps, HighlightableClassName } from '../../../styles/classnames/interfaces.js';
 export interface CSVInputClassNames {
     root: string;
     icon: HighlightableClassName;

package/dist/forms/components/CSVInput/index.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { formatPlural } from '@sqrzro/utility';
-import { useClassNames, useIcon } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
+import { useClassNames, useIcon } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 import formatFileSize from '../../utility/format-file-size';
 function CSVInput({ classNames, classNameProps, id, isDisabled, name, onChange, value, }) {
     const UploadIcon = useIcon('csvInput.upload');

package/dist/forms/components/CalendarInput/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import Calendar from '../../../components/utility/Calendar';
+import Calendar from '../../../components/utility/Calendar/index.js';
 import BaseCalendarInput from '../BaseCalendarInput';
 function CalendarInput({ name, onChange, value, ...baseProps }) {
     function handleChange(eventValue) {

package/dist/forms/components/CheckboxInput/index.d.ts

@@ -1,5 +1,5 @@
-import type { DropdownObject, InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
+import type { DropdownObject, InputProps } from '../../interfaces.js';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces.js';
 export interface CheckboxInputClassNames {
     root: ErrorableClassName;
     item: ErrorableClassName;

package/dist/forms/components/CheckboxInput/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { toggleArrayItem } from '@sqrzro/utility';
-import { useClassNames } from '../../../styles/context';
+import { useClassNames } from '../../../styles/context.js';
 import ChkRad from '../ChkRad';
 function CheckboxInput({ classNames, classNameProps, hasError, name, onChange, options = [], value, }) {
     const componentClassNames = useClassNames('checkboxInput', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);

package/dist/forms/components/ChkRad/index.d.ts

@@ -1,9 +1,10 @@
-import { InputProps } from '../../../forms/interfaces';
-import { CheckableClassName, ClassNameProps } from '../../../styles/classnames/interfaces';
+import { InputProps } from '../../interfaces.js';
+import { CheckableClassName, ClassNameProps } from '../../../styles/classnames/interfaces.js';
 export interface ChkRadClassNames {
     details: string;
     icon: CheckableClassName;
     label: string;
+    root: string;
 }
 export interface ChkRadProps extends ClassNameProps<ChkRadClassNames>, InputProps<boolean> {
     details?: React.ReactNode;
@@ -14,5 +15,5 @@ export interface ChkRadProps extends ClassNameProps<ChkRadClassNames>, InputProp
  * Either a checkbox or a radio button. The onChange event will return a string of the value of
  * the checked item.
  */
-declare function ChkRad({ classNames, classNameProps, details, id, isDisabled, name, label, onChange, type, value, }: Readonly<ChkRadProps>): React.ReactElement;
+declare function ChkRad({ classNames, classNameProps, details, id, isDisabled, isReadOnly, name, label, onChange, type, value, }: Readonly<ChkRadProps>): React.ReactElement;
 export default ChkRad;

package/dist/forms/components/ChkRad/index.js

@@ -1,15 +1,18 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { useClassNames, useIcon } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
-import Assistive from '../../../components/utility/Assistive';
+import { useClassNames, useIcon } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
+import Assistive from '../../../components/utility/Assistive/index.js';
 /**
  * Either a checkbox or a radio button. The onChange event will return a string of the value of
  * the checked item.
  */
-function ChkRad({ classNames, classNameProps, details, id, isDisabled, name, label, onChange, type = 'checkbox', value, }) {
-    const componentClassNames = useClassNames('chkrad', { props: classNameProps, states: { isChecked: value ?? false } }, classNames);
+function ChkRad({ classNames, classNameProps, details, id, isDisabled, isReadOnly, name, label, onChange, type = 'checkbox', value, }) {
+    const componentClassNames = useClassNames('chkrad', {
+        props: { ...classNameProps, isReadOnly: isReadOnly ?? false },
+        states: { isChecked: value ?? false },
+    }, classNames);
     const CheckedIcon = useIcon('chkrad.checked');
     const ref = useRef(null);
     function handleChange(event) {
@@ -17,6 +20,6 @@ function ChkRad({ classNames, classNameProps, details, id, isDisabled, name, lab
             onChange({ target: { name, value: event.target.checked } });
         }
     }
-    return (_jsxs("label", { className: tw('flex cursor-pointer', isDisabled ? 'pointer-events-none opacity-30' : null), "data-testid": "chkrad-root", children: [_jsx(Assistive, { children: _jsx("input", { checked: Boolean(value), disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: type }) }), _jsx("span", { className: componentClassNames?.icon, children: CheckedIcon && value ? _jsx(CheckedIcon, {}) : null }), _jsxs("div", { ref: ref, className: tw(componentClassNames?.label), children: [label, details ? _jsx("div", { className: tw(componentClassNames?.details), children: details }) : null] })] }));
+    return (_jsxs("label", { className: tw(componentClassNames?.root, isDisabled ? 'pointer-events-none opacity-30' : null), children: [_jsx(Assistive, { children: _jsx("input", { checked: Boolean(value), disabled: isDisabled, id: id || name, name: name, readOnly: isReadOnly, onChange: handleChange, type: type }) }), _jsx("span", { className: componentClassNames?.icon, children: CheckedIcon && value ? _jsx(CheckedIcon, {}) : null }), _jsxs("div", { ref: ref, className: tw(componentClassNames?.label), children: [label, details ? _jsx("div", { className: tw(componentClassNames?.details), children: details }) : null] })] }));
 }
 export default ChkRad;

package/dist/forms/components/ColorInput/index.d.ts

@@ -1,5 +1,5 @@
-import { InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
+import { InputProps } from '../../interfaces.js';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces.js';
 export interface ColorInputClassNames {
     root: ErrorableClassName;
     input: string;

package/dist/forms/components/ColorInput/index.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Assistive from '../../../components/utility/Assistive';
-import { useClassNames, useIcon } from '../../../styles/context';
-import tw from '../../../styles/classnames/utility/tw';
+import Assistive from '../../../components/utility/Assistive/index.js';
+import { useClassNames, useIcon } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 function ColorInput({ classNames, classNameProps, hasError, name, onChange, placeholder, value, }) {
     const componentClassNames = useClassNames('colorInput', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);
     const ClearIcon = useIcon('colorInput.clear');

package/dist/forms/components/Dropdown/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, ErrorableClassName, FocusableClassName, SelectableClassName } from '../../../styles/classnames/interfaces';
+import type { ClassNameProps, ErrorableClassName, FocusableClassName, SelectableClassName } from '../../../styles/classnames/interfaces.js';
 import type { DropdownObject, InputProps } from '../../interfaces';
 export interface DropdownClassNames {
     root: ErrorableClassName & FocusableClassName;