react-miui 0.20.1 → 0.22.0

package/esm/components/layout/section/Section.d.ts

@@ -1,14 +1,89 @@
-import React from "react";
 import { SectionContainer } from "./SectionContainer.js";
 interface SubComponents {
     Container: typeof SectionContainer;
 }
-type Variant = "horizontal" | "vertical";
-interface Props {
-    variant?: Variant | Variant[];
-    className?: string;
-    children: React.ReactNode;
-}
-declare const Section: React.FC<Props> & SubComponents;
+declare const Section: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {
+    vertical?: boolean | "true";
+    horizontal?: boolean | "true";
+}, {}, import("@stitches/react/types/css-util.js").CSS<{}, {
+    colors: {
+        background: string;
+        mainColor: string;
+        mainColorAlt: string;
+        activeBg: string;
+        inactiveBg: string;
+        inactiveDarkBg: string;
+        toggleHandleBg: string;
+        toggleHandleBorder: string;
+        toggleBgDisabled: string;
+        toggleHandleBorderDisabled: string;
+        toggleHandleBgDisabled: string;
+        icon: string;
+        border: string;
+        buttonBorder: string;
+        headerBorder: string;
+        headerBg: string;
+        headerText: string;
+        text: string;
+        sub: string;
+        popText: string;
+        toolbarBorder: string;
+        toolbarBg: string;
+        modalBg: string;
+        modalButtonBg: string;
+        modalButtonBorder: string;
+        inputDisabledBg: string;
+        inputDisabledText: string;
+        choiceBg: string;
+        choiceText: string;
+        choiceActiveBg: string;
+        choiceActiveText: string;
+        choiceBorder: string;
+        selectorText: string;
+        selectorActive: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        orange1: string;
+        orange1Darker: string;
+        purple1: string;
+        green1: string;
+        green1Darker: string;
+        pink1: string;
+        red1: string;
+        yellow1: string;
+        yellow2: string;
+        yellow3: string;
+        pinky1: string;
+        pinky2: string;
+        pinky3: string;
+        grey1: string;
+        focusColor: string;
+        scrollbarsThumb: string;
+        scrollbarsBg: string;
+        tableStripedBg: string;
+    };
+}, import("@stitches/react/types/config.js").DefaultThemeMap, {
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
+    };
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
+    };
+}>> & SubComponents;
 export { Section };
 //# sourceMappingURL=Section.d.ts.map

package/esm/components/layout/section/Section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGzD,UAAU,aAAa;IACnB,SAAS,EAAE,OAAO,gBAAgB,CAAC;CACtC;AAED,KAAK,OAAO,GAAG,YAAY,GAAG,UAAU,CAAC;AAEzC,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAYhC,CAAC;AAIF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/section/Section.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,UAAU,aAAa;IACnB,SAAS,EAAE,OAAO,gBAAgB,CAAC;CACtC;AA2BD,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAkD,CAAC;AAIhE,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/esm/components/layout/section/Section.js

@@ -1,16 +1,21 @@
-import React from "react";
-import classnames from "classnames";
-import { makeVariants } from "../../../utils/makeVariants.js";
+import { pxToRem, styled } from "../../../theme.js";
 import { SectionContainer } from "./SectionContainer.js";
-import styles from "./Section.module.scss";
-const Section = (props) => {
-    const v = makeVariants(props.variant);
-    const cls = classnames(props.className, styles.section, {
-        [styles.vertical]: v.includes("vertical"),
-        [styles.horizontal]: v.includes("horizontal"),
-    });
-    return (React.createElement("section", { className: cls }, props.children));
-};
+const SectionCmp = styled("div", {
+    background: "$background",
+    variants: {
+        vertical: {
+            true: {
+                py: pxToRem(23),
+            },
+        },
+        horizontal: {
+            true: {
+                px: pxToRem(23),
+            },
+        },
+    },
+});
+const Section = SectionCmp;
 Section.Container = SectionContainer;
 export { Section };
 //# sourceMappingURL=Section.js.map

package/esm/components/layout/section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../../src/components/layout/section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAc3C,MAAM,OAAO,GAAoC,CAAC,KAAK,EAAE,EAAE;IACvD,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE;QACpD,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC;QACzC,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;KAChD,CAAC,CAAC;IACH,OAAO,CACH,iCAAS,SAAS,EAAE,GAAG,IAClB,KAAK,CAAC,QAAQ,CACT,CACb,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,CAAC,SAAS,GAAG,gBAAgB,CAAC;AAErC,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../../src/components/layout/section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAMzD,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,EAAE;IAC7B,UAAU,EAAE,aAAa;IAEzB,QAAQ,EAAE;QACN,QAAQ,EAAE;YACN,IAAI,EAAE;gBAEF,EAAE,EAAE,OAAO,CAAC,EAAE,CAAC;aAClB;SACJ;QACD,UAAU,EAAE;YACR,IAAI,EAAE;gBAEF,EAAE,EAAE,OAAO,CAAC,EAAE,CAAC;aAClB;SACJ;KACJ;CACJ,CAAC,CAAC;AAQH,MAAM,OAAO,GAAG,UAA+C,CAAC;AAEhE,OAAO,CAAC,SAAS,GAAG,gBAAgB,CAAC;AAErC,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/esm/components/layout/section/Section.stories.d.ts

@@ -0,0 +1,8 @@
+import type { StoryObj, Meta } from "@storybook/react";
+import { Section } from "./Section.js";
+declare const meta: Meta;
+type Story = StoryObj<typeof Section>;
+declare const Primary: Story;
+export { Primary, };
+export default meta;
+//# sourceMappingURL=Section.stories.d.ts.map

package/esm/components/layout/section/Section.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/section/Section.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,IAYX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,QAAA,MAAM,OAAO,EAAE,KAsBd,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/layout/section/Section.stories.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { List } from "../list/List.js";
+import { Item } from "../list/Item.js";
+import { Section } from "./Section.js";
+const meta = {
+    title: "Components/Layout/Section",
+    component: Section,
+    tags: ["autodocs", "layout"],
+    argTypes: {
+        vertical: {
+            type: "boolean",
+        },
+        horizontal: {
+            type: "boolean",
+        },
+    },
+};
+const Primary = {
+    args: {},
+    render: (args) => (React.createElement("div", { style: { border: "1px solid #ddd" } },
+        React.createElement(Section.Container, null,
+            React.createElement(Section, { ...args }, "This is an example section, arguments in the arguments table are applied only to this section. By default sections do not have any padding, so you can place elements that should touch the edges. Use `vertical` and `horizontal` arguments to add padding."),
+            React.createElement(Section, { vertical: true, horizontal: true }, "Some section"),
+            React.createElement(Section, null,
+                React.createElement(List, null,
+                    React.createElement(Item, null, "Some item"),
+                    React.createElement(Item, null, "Some item")))))),
+};
+export { Primary, };
+export default meta;
+//# sourceMappingURL=Section.stories.js.map

package/esm/components/layout/section/Section.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.stories.js","sourceRoot":"","sources":["../../../../src/components/layout/section/Section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,OAAO;IAClB,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC;IAC5B,QAAQ,EAAE;QACN,QAAQ,EAAE;YACN,IAAI,EAAE,SAAS;SAClB;QACD,UAAU,EAAE;YACR,IAAI,EAAE,SAAS;SAClB;KACJ;CACJ,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE;QACpC,oBAAC,OAAO,CAAC,SAAS;YACd,oBAAC,OAAO,OAAK,IAAI,mQAIP;YACV,oBAAC,OAAO,IAAC,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,mBAE/B;YACV,oBAAC,OAAO;gBACJ,oBAAC,IAAI;oBACD,oBAAC,IAAI,oBAAiB;oBACtB,oBAAC,IAAI,oBAAiB,CACnB,CACD,CACM,CAClB,CACT;CACJ,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/layout/section/SectionContainer.d.ts

@@ -1,7 +1,82 @@
-import React from "react";
-interface Props {
-    children: React.ReactNode;
-}
-declare const SectionContainer: React.FC<Props>;
+declare const SectionContainer: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util.js").CSS<{}, {
+    colors: {
+        background: string;
+        mainColor: string;
+        mainColorAlt: string;
+        activeBg: string;
+        inactiveBg: string;
+        inactiveDarkBg: string;
+        toggleHandleBg: string;
+        toggleHandleBorder: string;
+        toggleBgDisabled: string;
+        toggleHandleBorderDisabled: string;
+        toggleHandleBgDisabled: string;
+        icon: string;
+        border: string;
+        buttonBorder: string;
+        headerBorder: string;
+        headerBg: string;
+        headerText: string;
+        text: string;
+        sub: string;
+        popText: string;
+        toolbarBorder: string;
+        toolbarBg: string;
+        modalBg: string;
+        modalButtonBg: string;
+        modalButtonBorder: string;
+        inputDisabledBg: string;
+        inputDisabledText: string;
+        choiceBg: string;
+        choiceText: string;
+        choiceActiveBg: string;
+        choiceActiveText: string;
+        choiceBorder: string;
+        selectorText: string;
+        selectorActive: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        orange1: string;
+        orange1Darker: string;
+        purple1: string;
+        green1: string;
+        green1Darker: string;
+        pink1: string;
+        red1: string;
+        yellow1: string;
+        yellow2: string;
+        yellow3: string;
+        pinky1: string;
+        pinky2: string;
+        pinky3: string;
+        grey1: string;
+        focusColor: string;
+        scrollbarsThumb: string;
+        scrollbarsBg: string;
+        tableStripedBg: string;
+    };
+}, import("@stitches/react/types/config.js").DefaultThemeMap, {
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
+    };
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
+    };
+}>>;
 export { SectionContainer };
 //# sourceMappingURL=SectionContainer.d.ts.map

package/esm/components/layout/section/SectionContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/section/SectionContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,KAAK;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAIrC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"SectionContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/section/SectionContainer.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAOpB,CAAC;AAEH,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/esm/components/layout/section/SectionContainer.js

@@ -1,7 +1,11 @@
-import React from "react";
-import styles from "./SectionContainer.module.scss";
-const SectionContainer = (props) => {
-    return (React.createElement("div", { className: styles.container }, props.children));
-};
+import { styled } from "../../../theme.js";
+const SectionContainer = styled("div", {
+    background: "$toolbarBg",
+    flex: 1,
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    gap: 23,
+});
 export { SectionContainer };
 //# sourceMappingURL=SectionContainer.js.map

package/esm/components/layout/section/SectionContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionContainer.js","sourceRoot":"","sources":["../../../../src/components/layout/section/SectionContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAMpD,MAAM,gBAAgB,GAAoB,CAAC,KAAK,EAAE,EAAE;IAChD,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS,IAAG,KAAK,CAAC,QAAQ,CAAO,CAC3D,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"SectionContainer.js","sourceRoot":"","sources":["../../../../src/components/layout/section/SectionContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,EAAE;IACnC,UAAU,EAAE,YAAY;IACxB,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,EAAE;CACV,CAAC,CAAC;AAEH,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/esm/components/ui/button/Button.d.ts

@@ -1,8 +1,2 @@
-import React from "react";
-type Variant = "inline" | "outline";
-interface Props {
-    variant?: Variant | Variant[];
-}
-declare const Button: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & Props>;
-export { Button };
+export { Button } from "./Button.styled.js";
 //# sourceMappingURL=Button.d.ts.map

package/esm/components/ui/button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,KAAK,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEpC,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAkB3E,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC"}

package/esm/components/ui/button/Button.js

@@ -1,14 +1,2 @@
-import React from "react";
-import classnames from "classnames";
-import { makeVariants } from "../../../utils/index.js";
-import styles from "./Button.module.scss";
-const Button = ({ className, children, variant, ...props }) => {
-    const variants = makeVariants(variant);
-    const cls = classnames(styles.btn, {
-        [styles["btn--inline"]]: variants.includes("inline"),
-        [styles["btn--outline"]]: variants.includes("outline"),
-    }, className);
-    return (React.createElement("button", { ...props, className: cls, disabled: props.disabled }, children));
-};
-export { Button };
+export { Button } from "./Button.styled.js";
 //# sourceMappingURL=Button.js.map

package/esm/components/ui/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAQ1C,MAAM,MAAM,GAAoE,CAAC,EAC7E,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EACzC,EAAE,EAAE;IACD,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;IAEvC,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACpD,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;KACzD,EAAE,SAAS,CAAC,CAAC;IAEd,OAAO,CACH,mCACQ,KAAK,EACT,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAC1B,QAAQ,CACD,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC"}

package/esm/components/ui/button/Button.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj, Meta } from "@storybook/react";
+import { Button } from "./Button.js";
+declare const meta: Meta;
+type Story = StoryObj<typeof Button>;
+declare const Primary: Story;
+declare const MultipleAtOnce: Story;
+export { Primary, MultipleAtOnce, };
+export default meta;
+//# sourceMappingURL=Button.stories.d.ts.map

package/esm/components/ui/button/Button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,QAAA,MAAM,OAAO,EAAE,KAKd,CAAC;AASF,QAAA,MAAM,cAAc,EAAE,KAerB,CAAC;AAEF,OAAO,EACH,OAAO,EACP,cAAc,GACjB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/ui/button/Button.stories.js

@@ -0,0 +1,35 @@
+import React, { useCallback } from "react";
+import { styled } from "../../../theme.js";
+import { Button } from "./Button.js";
+const meta = {
+    title: "Components/UI/Button",
+    component: Button,
+    tags: ["autodocs", "ui"],
+};
+const Primary = {
+    args: {
+        children: "Click me",
+        onClick: () => { alert("Clicked"); },
+    },
+};
+const Container = styled("div", {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "1rem",
+});
+const MultipleAtOnce = {
+    render: () => {
+        const handleClick = useCallback(() => {
+            alert("Clicked");
+        }, []);
+        return (React.createElement(Container, null,
+            React.createElement(Button, { onClick: handleClick }, "Basic button"),
+            React.createElement(Button, { disabled: true, onClick: handleClick }, "Disabled button"),
+            React.createElement(Button, { inline: true, onClick: handleClick }, "Inline button"),
+            React.createElement(Button, { outline: true, onClick: handleClick }, "Outline button")));
+    },
+};
+export { Primary, MultipleAtOnce, };
+export default meta;
+//# sourceMappingURL=Button.stories.js.map

package/esm/components/ui/button/Button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC;CAC3B,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;KACvC;CACJ,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,EAAE;IAC5B,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,YAAY;IACxB,GAAG,EAAE,MAAM;CACd,CAAC,CAAC;AAEH,MAAM,cAAc,GAAU;IAC1B,MAAM,EAAE,GAAG,EAAE;QACT,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;YACjC,KAAK,CAAC,SAAS,CAAC,CAAC;QACrB,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,CACH,oBAAC,SAAS;YACN,oBAAC,MAAM,IAAC,OAAO,EAAE,WAAW,mBAAuB;YACnD,oBAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,sBAA0B;YACtE,oBAAC,MAAM,IAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,oBAAwB;YAClE,oBAAC,MAAM,IAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,qBAAyB,CAC5D,CACf,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,OAAO,EACH,OAAO,EACP,cAAc,GACjB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/ui/button/Button.styled.d.ts

@@ -0,0 +1,85 @@
+declare const Button: import("@stitches/react/types/styled-component.js").StyledComponent<"button", {
+    inline?: boolean | "true";
+    outline?: boolean | "true";
+}, {}, import("@stitches/react/types/css-util.js").CSS<{}, {
+    colors: {
+        background: string;
+        mainColor: string;
+        mainColorAlt: string;
+        activeBg: string;
+        inactiveBg: string;
+        inactiveDarkBg: string;
+        toggleHandleBg: string;
+        toggleHandleBorder: string;
+        toggleBgDisabled: string;
+        toggleHandleBorderDisabled: string;
+        toggleHandleBgDisabled: string;
+        icon: string;
+        border: string;
+        buttonBorder: string;
+        headerBorder: string;
+        headerBg: string;
+        headerText: string;
+        text: string;
+        sub: string;
+        popText: string;
+        toolbarBorder: string;
+        toolbarBg: string;
+        modalBg: string;
+        modalButtonBg: string;
+        modalButtonBorder: string;
+        inputDisabledBg: string;
+        inputDisabledText: string;
+        choiceBg: string;
+        choiceText: string;
+        choiceActiveBg: string;
+        choiceActiveText: string;
+        choiceBorder: string;
+        selectorText: string;
+        selectorActive: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        orange1: string;
+        orange1Darker: string;
+        purple1: string;
+        green1: string;
+        green1Darker: string;
+        pink1: string;
+        red1: string;
+        yellow1: string;
+        yellow2: string;
+        yellow3: string;
+        pinky1: string;
+        pinky2: string;
+        pinky3: string;
+        grey1: string;
+        focusColor: string;
+        scrollbarsThumb: string;
+        scrollbarsBg: string;
+        tableStripedBg: string;
+    };
+}, import("@stitches/react/types/config.js").DefaultThemeMap, {
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
+    };
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
+    };
+}>>;
+export { Button, };
+//# sourceMappingURL=Button.styled.d.ts.map

package/esm/components/ui/button/Button.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.styled.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCV,CAAC;AAEH,OAAO,EACH,MAAM,GACT,CAAC"}

package/esm/components/ui/button/Button.styled.js

@@ -0,0 +1,35 @@
+import { borderPxToRem, dimensionsPxToRem, fontPxToRem, pxToRem, styled } from "../../../theme.js";
+const Button = styled("button", {
+    "height": dimensionsPxToRem(118),
+    "background": "$green1",
+    "border": `${borderPxToRem(1)} solid $green1Darker`,
+    "color": "white",
+    "borderRadius": "1000px",
+    "display": "flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "width": "100%",
+    "fontSize": fontPxToRem(26),
+    "padding": "0 1em",
+    "gap": pxToRem(10),
+    "&:disabled": {
+        opacity: 0.5,
+    },
+    "variants": {
+        inline: {
+            true: {
+                width: "auto",
+                display: "inline-flex",
+            },
+        },
+        outline: {
+            true: {
+                background: "white",
+                borderColor: "$buttonBorder",
+                color: "$grey1",
+            },
+        },
+    },
+});
+export { Button, };
+//# sourceMappingURL=Button.styled.js.map

package/esm/components/ui/button/Button.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAKnG,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,EAAE;IAC5B,QAAQ,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAChC,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC,sBAAsB;IACnD,OAAO,EAAE,OAAO;IAChB,cAAc,EAAE,QAAQ;IACxB,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,QAAQ;IACtB,gBAAgB,EAAE,QAAQ;IAC1B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,WAAW,CAAC,EAAE,CAAC;IAC3B,SAAS,EAAE,OAAO;IAClB,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC;IAElB,YAAY,EAAE;QACV,OAAO,EAAE,GAAG;KACf;IAED,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,IAAI,EAAE;gBACF,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,aAAa;aACzB;SACJ;QACD,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,UAAU,EAAE,OAAO;gBACnB,WAAW,EAAE,eAAe;gBAC5B,KAAK,EAAE,QAAQ;aAClB;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,MAAM,GACT,CAAC"}

package/esm/components/ui/message/Message.d.ts

@@ -71,17 +71,25 @@ declare const Message: OverwriteProps<import("@stitches/react/types/styled-compo
         tableStripedBg: string;
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
-    mx: (value: string) => {
-        marginLeft: string;
-        marginRight: string;
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
     };
-    my: (value: string) => {
-        marginTop: string;
-        marginBottom: string;
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
     };
-    size: (value: string) => {
-        width: string;
-        height: string;
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
     };
 }>>, Props>;
 export { Message };

package/esm/components/ui/message/Message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/message/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AAE1D,UAAU,KAAM,SAAQ,aAAa;IAIjC,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IAKzC,OAAO,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;IAIhD,SAAS,CAAC,EAAE,MAAM,CAAC;IAInB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAKD,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAA0E,CAAC;AAExF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/message/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AAE1D,UAAU,KAAM,SAAQ,aAAa;IAIjC,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IAKzC,OAAO,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;IAIhD,SAAS,CAAC,EAAE,MAAM,CAAC;IAInB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAKD,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAA0E,CAAC;AAExF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/esm/components/ui/message/Message.styled.d.ts

@@ -60,17 +60,25 @@ declare const StyledMessage: import("@stitches/react/types/styled-component.js")
         tableStripedBg: string;
     };
 }, import("@stitches/react/types/config.js").DefaultThemeMap, {
-    mx: (value: string) => {
-        marginLeft: string;
-        marginRight: string;
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
     };
-    my: (value: string) => {
-        marginTop: string;
-        marginBottom: string;
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
     };
-    size: (value: string) => {
-        width: string;
-        height: string;
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
     };
 }>>;
 export { StyledMessage, };

package/esm/components/ui/message/Message.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/message/Message.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCjB,CAAC;AAEH,OAAO,EACH,aAAa,GAChB,CAAC"}
+{"version":3,"file":"Message.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/message/Message.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCjB,CAAC;AAEH,OAAO,EACH,aAAa,GAChB,CAAC"}