react-miui 0.23.2 → 0.23.3

package/src/components/form/Checkbox.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import classnames from "classnames";
 
-import { Checkmark } from "../icons/Checkmark.js";
+import { Checkmark } from "../icons/Checkmark";
 
 import styles from "./Checkbox.module.scss";
 

package/src/components/form/Label.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import classnames from "classnames";
 
-import { makeVariants } from "../../utils/index.js";
+import { makeVariants } from "../../utils/index";
 
 import styles from "./Label.module.scss";
 

package/src/components/form/Select.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { Select } from "./Select.js";
+import { Select } from "./Select";
 
 const meta: Meta = {
     title: "Components/Form/Select",

package/src/components/form/Select.styled.ts

@@ -1,4 +1,4 @@
-import { borderPxToRem, dimensionsPxToRem, pxToRem, styled } from "../../theme.js";
+import { borderPxToRem, dimensionsPxToRem, pxToRem, styled } from "../../theme";
 
 const Select = styled("select", {
     "boxSizing": "border-box",

package/src/components/form/Select.tsx

@@ -1 +1 @@
-export { Select } from "./Select.styled.js";
+export { Select } from "./Select.styled";

package/src/components/form/choice/Choice.tsx

@@ -4,9 +4,9 @@ import classnames from "classnames";
 
 import type { ObjectValue, Value } from "../../../types/form";
 
-import { makeVariants, toObjectValue } from "../../../utils/index.js";
+import { makeVariants, toObjectValue } from "../../../utils/index";
 
-import { ChoiceItem } from "./ChoiceItem.js";
+import { ChoiceItem } from "./ChoiceItem";
 
 import styles from "./Choice.module.scss";
 

package/src/components/form/index.ts

@@ -1 +1 @@
-export * from "./input/Input.js";
+export * from "./input/Input";

package/src/components/form/input/Input.css.ts

@@ -1,6 +1,6 @@
 // import type { ThemeCSS } from "../../../theme"; TODO restore
 
-import { dimensionsPxToRem, fontPxToRem, borderPxToRem } from "../../../theme.js";
+import { dimensionsPxToRem, fontPxToRem, borderPxToRem } from "../../../theme";
 
 const input = {
     "height": dimensionsPxToRem(103),

package/src/components/form/input/Input.stories.tsx

@@ -2,10 +2,10 @@ import React from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { Icon, ICON } from "../../icons/Icon.js";
+import { Icon, ICON } from "../../icons/Icon";
 import { countries } from "../../../demo/components/form/countries.const";
 
-import { Input } from "./Input.js";
+import { Input } from "./Input";
 
 const meta: Meta<typeof Input> = {
     title: "Components/Form/Input",

package/src/components/form/input/Input.styled.ts

@@ -1,6 +1,6 @@
-import { dimensionsPxToRem, styled } from "../../../theme.js";
+import { dimensionsPxToRem, styled } from "../../../theme";
 
-import { input, wrapper } from "./Input.css.js";
+import { input, wrapper } from "./Input.css";
 
 const StyledInput = styled("input", input);
 

package/src/components/form/input/Input.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useId, useState } from "react";
 
 import type { ObjectValue, Value } from "../../../types/form";
 
-import { Suggestions } from "../Suggestions.js";
+import { Suggestions } from "../Suggestions";
 
 import { StyledInput, StyledWrapper, StyledPrefix, StyledSuffix } from "./Input.styled";
 
@@ -104,3 +104,8 @@ const Input = <T extends string>({ // eslint-disable-line max-lines-per-function
 export {
     Input,
 };
+
+export type {
+    Props as InputProps,
+    CustomProps as InputCustomProps,
+};

package/src/components/form/textarea/TextArea.stories.tsx

@@ -1,6 +1,6 @@
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { TextArea } from "./TextArea.js";
+import { TextArea } from "./TextArea";
 
 const meta: Meta = {
     title: "Components/Form/TextArea",

package/src/components/form/textarea/TextArea.styled.ts

@@ -1,4 +1,4 @@
-import { dimensionsPxToRem, styled } from "../../../theme.js";
+import { dimensionsPxToRem, styled } from "../../../theme";
 
 import { input, wrapper } from "../input/Input.css";
 import { miuiScrollbars } from "../../../scrollbars.css";

package/src/components/icons/Icon.tsx

@@ -2,15 +2,15 @@ import React from "react";
 
 import type { AnyComponent } from "../../types";
 
-import { Checkmark } from "./Checkmark.js";
-import { Back } from "./Back.js";
-import { Forward } from "./Forward.js";
-import { Search } from "./Search.js";
-import { Battery } from "./Battery.js";
-import { Heart } from "./Heart.js";
-import { Trash } from "./Trash.js";
-import { Config } from "./Config.js";
-import { Dots } from "./Dots.js";
+import { Checkmark } from "./Checkmark";
+import { Back } from "./Back";
+import { Forward } from "./Forward";
+import { Search } from "./Search";
+import { Battery } from "./Battery";
+import { Heart } from "./Heart";
+import { Trash } from "./Trash";
+import { Config } from "./Config";
+import { Dots } from "./Dots";
 
 enum ICON {
     checkmark = "checkmark",

package/src/components/layout/card/Card.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import classnames from "classnames";
 
-import { makeVariants } from "../../../utils/makeVariants.js";
+import { makeVariants } from "../../../utils/makeVariants";
 
 import styles from "./Card.module.scss";
 

package/src/components/layout/header/Header.tsx

@@ -3,8 +3,8 @@ import type { ReactNode } from "react";
 
 import classnames from "classnames";
 
-import { Action } from "../../ui/action/Action.js";
-import { EqualActions } from "../../ui/action/EqualActions.js";
+import { Action } from "../../ui/action/Action";
+import { EqualActions } from "../../ui/action/EqualActions";
 
 import styles from "./Header.module.scss";
 

package/src/components/layout/header/HeaderIconAction.tsx

@@ -5,7 +5,7 @@ import classnames from "classnames";
 
 import type { ICON } from "../../icons/Icon";
 
-import { Icon } from "../../icons/Icon.js";
+import { Icon } from "../../icons/Icon";
 
 import styles from "./HeaderIconAction.module.scss";
 

package/src/components/layout/header/StickyHeader.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import classnames from "classnames";
 
-import { Header } from "./Header.js";
+import { Header } from "./Header";
 
 import styles from "./StickyHeader.module.scss";
 

package/src/components/layout/list/Header.stories.tsx

@@ -2,8 +2,8 @@ import React from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { Header } from "./Header.js";
-import { List } from "./List.js";
+import { Header } from "./Header";
+import { List } from "./List";
 
 const meta: Meta = {
     title: "Components/Layout/List/Header",

package/src/components/layout/list/Header.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import type { VariantProps } from "@stitches/react";
 
-import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme";
 
-import { Item, ItemInnerContainerClassName } from "./Item.js";
+import { Item, ItemInnerContainerClassName } from "./Item";
 
 const StyledContent = styled("div", {
     flex: 1,

package/src/components/layout/list/Item.stories.tsx

@@ -2,10 +2,10 @@ import React from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { NextLink } from "../../../demo/NextLink.js";
+import { NextLink } from "../../../demo/NextLink";
 
-import { Item } from "./Item.js";
-import { List } from "./List.js";
+import { Item } from "./Item";
+import { List } from "./List";
 
 const meta: Meta = {
     title: "Components/Layout/List/Item",

package/src/components/layout/list/Item.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-import { ICON, Icon } from "../../icons/Icon.js";
-import { dimensionsPxToRem, fontPxToRem, pxToRem, styled } from "../../../theme.js";
+import { ICON, Icon } from "../../icons/Icon";
+import { dimensionsPxToRem, fontPxToRem, pxToRem, styled } from "../../../theme";
 
-import { Value } from "./Value.js";
-import { Label } from "./Label.js";
+import { Value } from "./Value";
+import { Label } from "./Label";
 
 interface LinkProps {
     href: string;

package/src/components/layout/list/Label.stories.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { Label } from "./Label.js";
-import { List } from "./List.js";
-import { Item } from "./Item.js";
+import { Label } from "./Label";
+import { List } from "./List";
+import { Item } from "./Item";
 
 const meta: Meta = {
     title: "Components/Layout/List/Label",

package/src/components/layout/list/Label.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme";
 
 const SubLabel = styled("div", {
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers

package/src/components/layout/list/List.stories.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { Icon, ICON } from "../../icons/Icon.js";
+import { Icon, ICON } from "../../icons/Icon";
 
-import { List } from "./List.js";
+import { List } from "./List";
 
 const meta: Meta = {
     title: "Components/Layout/List/List",

package/src/components/layout/list/List.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import { pxToRem, styled } from "../../../theme.js";
+import { pxToRem, styled } from "../../../theme";
 
-import { Header } from "./Header.js";
-import { Item } from "./Item.js";
+import { Header } from "./Header";
+import { Item } from "./Item";
 
 interface SubComponents {
     Header: typeof Header;

package/src/components/layout/list/Value.stories.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { Value } from "./Value.js";
-import { List } from "./List.js";
-import { Item } from "./Item.js";
+import { Value } from "./Value";
+import { List } from "./List";
+import { Item } from "./Item";
 
 const meta: Meta = {
     title: "Components/Layout/List/Value",

package/src/components/layout/list/Value.tsx

@@ -1,4 +1,4 @@
-import { fontPxToRem, styled } from "../../../theme.js";
+import { fontPxToRem, styled } from "../../../theme";
 
 /**
  * Use this to render a value within `Item`. It's most useful when used with `Item.Label`.

package/src/components/layout/section/Section.stories.tsx

@@ -2,10 +2,10 @@ import React from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { List } from "../list/List.js";
-import { Item } from "../list/Item.js";
+import { List } from "../list/List";
+import { Item } from "../list/Item";
 
-import { Section } from "./Section.js";
+import { Section } from "./Section";
 
 const meta: Meta = {
     title: "Components/Layout/Section",

package/src/components/layout/section/Section.tsx

@@ -1,6 +1,6 @@
-import { pxToRem, styled } from "../../../theme.js";
+import { pxToRem, styled } from "../../../theme";
 
-import { SectionContainer } from "./SectionContainer.js";
+import { SectionContainer } from "./SectionContainer";
 
 interface SubComponents {
     Container: typeof SectionContainer;

package/src/components/layout/section/SectionContainer.tsx

@@ -1,4 +1,4 @@
-import { styled } from "../../../theme.js";
+import { styled } from "../../../theme";
 
 const SectionContainer = styled("div", {
     background: "$toolbarBg",

package/src/components/layout/table/Table.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import classnames from "classnames";
 
-import { makeVariants } from "../../../utils/index.js";
+import { makeVariants } from "../../../utils/index";
 
 import styles from "./Table.module.scss";
 

package/src/components/ui/action/Action.tsx

@@ -5,7 +5,7 @@ import classnames from "classnames";
 
 import type { ICON } from "../../icons/Icon";
 
-import { Icon } from "../../icons/Icon.js";
+import { Icon } from "../../icons/Icon";
 
 import styles from "./Action.module.scss";
 

package/src/components/ui/action/EqualActions.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import classnames from "classnames";
 
-import { Action } from "./Action.js";
+import { Action } from "./Action";
 
 import styles from "./EqualActions.module.scss";
 

package/src/components/ui/button/Button.stories.tsx

@@ -2,9 +2,9 @@ import React, { useCallback } from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { styled } from "../../../theme.js";
+import { styled } from "../../../theme";
 
-import { Button } from "./Button.js";
+import { Button } from "./Button";
 
 // TODO better docs
 

package/src/components/ui/button/Button.styled.ts

@@ -1,4 +1,4 @@
-import { borderPxToRem, dimensionsPxToRem, fontPxToRem, pxToRem, styled } from "../../../theme.js";
+import { borderPxToRem, dimensionsPxToRem, fontPxToRem, pxToRem, styled } from "../../../theme";
 
 /**
  * Call-to-action button.

package/src/components/ui/button/Button.tsx

@@ -1 +1 @@
-export { Button } from "./Button.styled.js";
+export { Button } from "./Button.styled";

package/src/components/ui/directionPad/Pad.tsx

@@ -2,8 +2,8 @@ import React from "react";
 
 import classnames from "classnames";
 
-import { PadButton as Button } from "./Button.js";
-import { PadMiddle as Middle } from "./Middle.js";
+import { PadButton as Button } from "./Button";
+import { PadMiddle as Middle } from "./Middle";
 
 import styles from "./Pad.module.scss";
 

package/src/components/ui/drawer/Drawer.tsx

@@ -3,7 +3,7 @@ import React, { Component } from "react";
 import { Timeout } from "oop-timers";
 import classnames from "classnames";
 
-import { HandleEsc } from "../../utils/HandleEsc.js";
+import { HandleEsc } from "../../utils/HandleEsc";
 
 import styles from "./Drawer.module.scss";
 

package/src/components/ui/loader/CoveringLoader.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { CoveringLoader } from "./CoveringLoader.js";
+import { CoveringLoader } from "./CoveringLoader";
 
 const meta: Meta = {
     title: "Components/UI/Loader/CoveringLoader",

package/src/components/ui/loader/CoveringLoader.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import type { Loader } from "./Loader";
 
-import { styled } from "../../../theme.js";
+import { styled } from "../../../theme";
 
-import { FullLoader } from "./FullLoader.js";
+import { FullLoader } from "./FullLoader";
 
 interface Props extends React.ComponentProps<typeof Loader> {
     /**

package/src/components/ui/loader/FullLoader.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { FullLoader } from "./FullLoader.js";
+import { FullLoader } from "./FullLoader";
 
 const meta: Meta = {
     title: "Components/UI/Loader/FullLoader",

package/src/components/ui/loader/FullLoader.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import { styled } from "../../../theme.js";
+import { styled } from "../../../theme";
 
-import { Loader } from "./Loader.js";
+import { Loader } from "./Loader";
 
 type Props = React.ComponentProps<typeof Loader>;
 

package/src/components/ui/loader/Loader.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Loader } from "./Loader.js";
+import { Loader } from "./Loader";
 
 const meta: Meta<typeof Loader> = {
     title: "Components/UI/Loader/Basic",

package/src/components/ui/loader/Loading.stories.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { styled } from "../../../theme.js";
+import { styled } from "../../../theme";
 
-import { Loading } from "./Loading.js";
+import { Loading } from "./Loading";
 
 const meta: Meta = {
     title: "Components/UI/Loader/Loading",

package/src/components/ui/loader/Loading.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { PopLoader } from "./PopLoader.js";
-import { FullLoader } from "./FullLoader.js";
+import { PopLoader } from "./PopLoader";
+import { FullLoader } from "./FullLoader";
 
 interface Props {
     data?: unknown;

package/src/components/ui/loader/PopLoader.stories.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { styled } from "../../../theme.js";
+import { styled } from "../../../theme";
 
-import { PopLoader } from "./PopLoader.js";
+import { PopLoader } from "./PopLoader";
 
 const meta: Meta = {
     title: "Components/UI/Loader/PopLoader",

package/src/components/ui/loader/PopLoader.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import { styled } from "../../../theme.js";
+import { styled } from "../../../theme";
 
-import { Loader } from "./Loader.js";
+import { Loader } from "./Loader";
 
 type Props = React.ComponentProps<typeof Loader>;
 

package/src/components/ui/message/Message.stories.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { styled } from "../../../theme.js";
+import { styled } from "../../../theme";
 
-import { Message } from "./Message.js";
+import { Message } from "./Message";
 
 const meta: Meta<typeof Message> = {
     title: "Components/UI/Message",

package/src/components/ui/message/Message.styled.ts

@@ -1,4 +1,4 @@
-import { dimensionsPxToRem, pxToRem, styled } from "../../../theme.js";
+import { dimensionsPxToRem, pxToRem, styled } from "../../../theme";
 
 const StyledMessage = styled("div", {
     borderStyle: "solid",

package/src/components/ui/message/Message.tsx

@@ -3,7 +3,7 @@ import type React from "react";
 import type { ComponentProps } from "@stitches/react";
 import type { OverwriteProps } from "../../../theme";
 
-import { StyledMessage } from "./Message.styled.js";
+import { StyledMessage } from "./Message.styled";
 
 type StitchesProps = ComponentProps<typeof StyledMessage>;
 

package/src/components/ui/modal/Modal.stories.tsx

@@ -2,14 +2,14 @@ import React, { useCallback, useState } from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { Button } from "../button/Button.js";
-import { Label } from "../../form/Label.js";
-import { Input } from "../../form/input/Input.js";
-import { Checkbox } from "../../form/Checkbox.js";
-import { List } from "../../layout/list/List.js";
-
-import { Modal } from "./Modal.js";
-import { ModalButtons } from "./ModalButtons.js";
+import { Button } from "../button/Button";
+import { Label } from "../../form/Label";
+import { Input } from "../../form/input/Input";
+import { Checkbox } from "../../form/Checkbox";
+import { List } from "../../layout/list/List";
+
+import { Modal } from "./Modal";
+import { ModalButtons } from "./ModalButtons";
 import { RemovePadding } from "./Modal.styled";
 
 const meta: Meta = {

package/src/components/ui/modal/Modal.styled.ts

@@ -1,4 +1,4 @@
-import { dimensionsPxToRem, fontPxToRem, keyframes, pxToRem, styled } from "../../../theme.js";
+import { dimensionsPxToRem, fontPxToRem, keyframes, pxToRem, styled } from "../../../theme";
 
 const PADDING = pxToRem(20);
 const NEGATIVE_PADDING = pxToRem(-20);

package/src/components/ui/modal/ModalButton.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import classnames from "classnames";
 
-import { makeVariants } from "../../../utils/index.js";
+import { makeVariants } from "../../../utils/index";
 
 import styles from "./ModalButtons.module.scss";
 

package/src/components/ui/modal/ModalButtons.stories.tsx

@@ -2,8 +2,8 @@ import React from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
-import { ModalButtons } from "./ModalButtons.js";
-import { Modal } from "./Modal.js";
+import { ModalButtons } from "./ModalButtons";
+import { Modal } from "./Modal";
 
 const meta: Meta = {
     title: "Components/UI/ModalButtons",