react-miui 0.27.10 → 0.28.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@ All notable changes to this project will be documented in this file.
 The format is based on [EZEZ Changelog](https://ezez.dev/guidelines/changelog/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [0.28.0] - 2025-08-16
+### Added
+- `ColorPicker` component
+### Changed
+- `Label` converted to stitches
+- `Toggle` converted to stitches
+- `Choice` converted to stitches
+### Dev
+- updated some deps
+- do not build stories on compile step, works around some typescript+storybook issues
+- do not lint Choice stories file, same workaround as above
+
+## [0.27.11] - 2025-05-19
+### Breaking
+- Removed `BackgroundClassName` and `ValueClassName` from `Progress` component, that shouldn't be exported in the first place
+### Changed
+- `Progress` component now has to-be-standarized `selectors` prop on the function, allowing to more flexible styles override
+- `StickyHeader` now has `selectors` prop
+
 ## [0.27.10] - 2025-05-11
 ### Fixed
 - Item `ratio` prop will be used on `Value` as well

package/dist/components/form/ColorPicker.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ColorDisplay, LabelWrapper } from "./ColorPicker.styled";
+type WrapperProps = React.ComponentProps<typeof LabelWrapper>;
+type ColorDisplayProps = React.ComponentProps<typeof ColorDisplay>;
+type InputProps = React.ComponentProps<"input">;
+type Props = Partial<Pick<WrapperProps, "css" | "className">> & Omit<InputProps, "className" | "type" | "value"> & Pick<ColorDisplayProps, "variant"> & {
+    children?: never;
+    error?: boolean;
+    label?: string;
+    value?: string;
+};
+declare const ColorPicker: React.FC<Props>;
+export { ColorPicker };
+//# sourceMappingURL=ColorPicker.d.ts.map

package/dist/components/form/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/form/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAElE,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAC9D,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACnE,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAEhD,KAAK,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,GAAG,WAAW,CAAC,CAAC,GAC3D,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC,GAChD,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,GAClC;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAKF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2ChC,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/form/ColorPicker.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPicker = void 0;
+const react_1 = __importStar(require("react"));
+const colors_1 = require("../utils/colors");
+const ColorPicker_styled_1 = require("./ColorPicker.styled");
+const ColorPicker = (_a) => {
+    var { error, css, className, variant, label, value = "transparent", children, onChange } = _a, inputProps = __rest(_a, ["error", "css", "className", "variant", "label", "value", "children", "onChange"]);
+    const style = Object.assign({ "--selected-color": value }, (value.startsWith("#") ? { color: (0, colors_1.contrastColor)(value) } : {}));
+    const wrapperProps = {
+        className: className,
+    };
+    if (css) {
+        wrapperProps.css = css;
+    }
+    const handleChange = (0, react_1.useCallback)((e) => {
+        if (inputProps.readOnly) {
+            return;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }, [inputProps.readOnly, onChange]);
+    return (react_1.default.createElement(ColorPicker_styled_1.LabelWrapper, Object.assign({}, wrapperProps, { "data-error": error }),
+        react_1.default.createElement("input", Object.assign({ type: "color", value: value, onChange: handleChange }, inputProps)),
+        react_1.default.createElement(ColorPicker_styled_1.ColorDisplay, { css: style, variant: variant }, label)));
+};
+exports.ColorPicker = ColorPicker;
+//# sourceMappingURL=ColorPicker.js.map

package/dist/components/form/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/form/ColorPicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAI3C,4CAAgD;AAEhD,6DAAkE;AAmBlE,MAAM,WAAW,GAAoB,CAAC,EAUrC,EAAE,EAAE;QAViC,EAClC,KAAK,EACL,GAAG,EACH,SAAS,EACT,OAAO,EACP,KAAK,EACL,KAAK,GAAG,aAAa,EACrB,QAAQ,EACR,QAAQ,OAEX,EADM,UAAU,cATqB,kFAUrC,CADgB;IAEb,MAAM,KAAK,mBACP,kBAAkB,EAAE,KAAK,IACtB,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAA,sBAAa,EAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CACpE,CAAC;IAEF,MAAM,YAAY,GAAoE;QAClF,SAAS,EAAE,SAAS;KACvB,CAAC;IACF,IAAI,GAAG,EAAE,CAAC;QACN,YAAY,CAAC,GAAG,GAAG,GAAG,CAAC;IAC3B,CAAC;IAED,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,CAAC,CAAsC,EAAE,EAAE;QACxE,IAAI,UAAU,CAAC,QAAQ,EAAE,CAAC;YACtB,OAAO;QACX,CAAC;QACD,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,OAAO,CACH,8BAAC,iCAAY,oBAAK,YAAY,kBAAc,KAAK;QAC7C,uDACI,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,IAClB,UAAU,EAChB;QACF,8BAAC,iCAAY,IAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,OAAQ,IACtC,KAAK,CACK,CACJ,CAClB,CAAC;AACN,CAAC,CAAC;AAEO,kCAAW"}

package/dist/components/form/ColorPicker.styled.d.ts

@@ -0,0 +1,170 @@
+declare const ColorDisplay: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    variant?: "pill";
+}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: "white";
+        mainColor: "#008ad2";
+        mainColorAlt: "#006AA9";
+        activeBg: "#e7e7e7";
+        inactiveBg: "#d3d3de";
+        inactiveDarkBg: "#999";
+        toggleHandleBg: "#e0e0e0";
+        toggleHandleBorder: "#cdcdcd";
+        toggleBgDisabled: "#f0f0f0";
+        toggleHandleBorderDisabled: "#c29f7d";
+        toggleHandleBgDisabled: "#deae84";
+        icon: "#636363";
+        border: "#d5d5d5";
+        buttonBorder: "#bababa";
+        headerBorder: "#c8c8c9";
+        headerBg: "#efeff0";
+        headerText: "#484848";
+        text: "#323232";
+        sub: "#959595";
+        popText: "#666";
+        toolbarBorder: "#ababab";
+        toolbarBg: "#f8f8f8";
+        modalBg: "#f7f7f7";
+        modalButtonBg: "#f8f8f8";
+        modalButtonBorder: "#c2c2c2";
+        inputDisabledBg: "#f3f3f3";
+        inputDisabledText: "#959595";
+        choiceBg: "#ffffff";
+        choiceText: "#999999";
+        choiceActiveBg: "#f3f3f3";
+        choiceActiveText: "#313131";
+        choiceBorder: "#cfcfcf";
+        selectorText: "#606060";
+        selectorActive: "#008ad2";
+        blue1: "#038bf4";
+        blue2: "#b7d6f5";
+        blue3: "#dbe6ff";
+        blue4: "#33b4ff";
+        blue5: "#30a2e6";
+        orange1: "#ff7200";
+        orange1Darker: "#cc5b00";
+        purple1: "#7357e8";
+        green1: "#3ec234";
+        green1Darker: "#38af2f";
+        pink1: "#ff388f";
+        red1: "#ea2700";
+        yellow1: "#ffde9d";
+        yellow2: "#e4a429";
+        yellow3: "#fff5db";
+        pinky1: "#f5c0b7";
+        pinky2: "#e07b67";
+        pinky3: "#ffe1db";
+        grey1: "#737373";
+        focusColor: "#dcaf00";
+        scrollbarsThumb: "#737373";
+        scrollbarsBg: "transparent";
+        tableStripedBg: "#fafafa";
+        toolButtonText: "#666e80";
+    };
+}, import("@stitches/react/types/config").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;
+    };
+}>>;
+declare const LabelWrapper: import("@stitches/react/types/styled-component").StyledComponent<"label", {}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: "white";
+        mainColor: "#008ad2";
+        mainColorAlt: "#006AA9";
+        activeBg: "#e7e7e7";
+        inactiveBg: "#d3d3de";
+        inactiveDarkBg: "#999";
+        toggleHandleBg: "#e0e0e0";
+        toggleHandleBorder: "#cdcdcd";
+        toggleBgDisabled: "#f0f0f0";
+        toggleHandleBorderDisabled: "#c29f7d";
+        toggleHandleBgDisabled: "#deae84";
+        icon: "#636363";
+        border: "#d5d5d5";
+        buttonBorder: "#bababa";
+        headerBorder: "#c8c8c9";
+        headerBg: "#efeff0";
+        headerText: "#484848";
+        text: "#323232";
+        sub: "#959595";
+        popText: "#666";
+        toolbarBorder: "#ababab";
+        toolbarBg: "#f8f8f8";
+        modalBg: "#f7f7f7";
+        modalButtonBg: "#f8f8f8";
+        modalButtonBorder: "#c2c2c2";
+        inputDisabledBg: "#f3f3f3";
+        inputDisabledText: "#959595";
+        choiceBg: "#ffffff";
+        choiceText: "#999999";
+        choiceActiveBg: "#f3f3f3";
+        choiceActiveText: "#313131";
+        choiceBorder: "#cfcfcf";
+        selectorText: "#606060";
+        selectorActive: "#008ad2";
+        blue1: "#038bf4";
+        blue2: "#b7d6f5";
+        blue3: "#dbe6ff";
+        blue4: "#33b4ff";
+        blue5: "#30a2e6";
+        orange1: "#ff7200";
+        orange1Darker: "#cc5b00";
+        purple1: "#7357e8";
+        green1: "#3ec234";
+        green1Darker: "#38af2f";
+        pink1: "#ff388f";
+        red1: "#ea2700";
+        yellow1: "#ffde9d";
+        yellow2: "#e4a429";
+        yellow3: "#fff5db";
+        pinky1: "#f5c0b7";
+        pinky2: "#e07b67";
+        pinky3: "#ffe1db";
+        grey1: "#737373";
+        focusColor: "#dcaf00";
+        scrollbarsThumb: "#737373";
+        scrollbarsBg: "transparent";
+        tableStripedBg: "#fafafa";
+        toolButtonText: "#666e80";
+    };
+}, import("@stitches/react/types/config").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 { LabelWrapper, ColorDisplay, };
+//# sourceMappingURL=ColorPicker.styled.d.ts.map

package/dist/components/form/ColorPicker.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styled.d.ts","sourceRoot":"","sources":["../../../src/components/form/ColorPicker.styled.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BhB,CAAC;AAEH,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BhB,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,YAAY,GACf,CAAC"}

package/dist/components/form/ColorPicker.styled.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorDisplay = exports.LabelWrapper = void 0;
+const theme_1 = require("../../theme");
+const ColorDisplay = (0, theme_1.styled)("div", {
+    borderRadius: "50%",
+    width: "24px",
+    height: "24px",
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+    verticalAlign: "middle",
+    boxSizing: "border-box",
+    backgroundColor: "var(--selected-color, #000000)",
+    border: "1px solid transparent",
+    variants: {
+        variant: {
+            pill: {
+                borderRadius: "8px",
+                width: "auto",
+                padding: "0 1em",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "14px",
+                color: "white",
+                fontWeight: "500",
+            },
+        },
+    },
+});
+exports.ColorDisplay = ColorDisplay;
+const LabelWrapper = (0, theme_1.styled)("label", {
+    "--selected-color": "#000000",
+    "display": "inline-flex",
+    "alignItems": "center",
+    "& input": {
+        "width": 0,
+        "height": 0,
+        "transform": "scale(0)",
+        "margin": 0,
+        "position": "absolute",
+        "opacity": 0,
+        "&:focus-visible": {
+            [`+ ${ColorDisplay.toString()}`]: {
+                outline: "2px solid $focusColor",
+                outlineOffset: "2px",
+            },
+        },
+    },
+    "&:has(input:disabled)": {
+        cursor: "not-allowed",
+        [`${ColorDisplay.toString()}`]: {
+            opacity: 0.5,
+        },
+    },
+    [`&[data-error=true] > ${ColorDisplay.toString()}`]: {
+        borderColor: "red",
+    },
+});
+exports.LabelWrapper = LabelWrapper;
+//# sourceMappingURL=ColorPicker.styled.js.map

package/dist/components/form/ColorPicker.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styled.js","sourceRoot":"","sources":["../../../src/components/form/ColorPicker.styled.ts"],"names":[],"mappings":";;;AAAA,uCAAqC;AAGrC,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IAC/B,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,aAAa;IACtB,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;IACpB,aAAa,EAAE,QAAQ;IACvB,SAAS,EAAE,YAAY;IACvB,eAAe,EAAE,gCAAgC;IACjD,MAAM,EAAE,uBAAuB;IAE/B,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,YAAY,EAAE,KAAK;gBACnB,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,OAAO;gBAChB,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,QAAQ,EAAE,MAAM;gBAChB,KAAK,EAAE,OAAO;gBACd,UAAU,EAAE,KAAK;aACpB;SACJ;KACJ;CACJ,CAAC,CAAC;AAqCC,oCAAY;AAnChB,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,OAAO,EAAE;IACjC,kBAAkB,EAAE,SAAS;IAC7B,SAAS,EAAE,aAAa;IACxB,YAAY,EAAE,QAAQ;IAEtB,SAAS,EAAE;QACP,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE,CAAC;QACX,WAAW,EAAE,UAAU;QACvB,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,UAAU;QACtB,SAAS,EAAE,CAAC;QACZ,iBAAiB,EAAE;YACf,CAAC,KAAK,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;gBAC9B,OAAO,EAAE,uBAAuB;gBAChC,aAAa,EAAE,KAAK;aACvB;SACJ;KACJ;IAED,uBAAuB,EAAE;QACrB,MAAM,EAAE,aAAa;QACrB,CAAC,GAAG,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;YAC5B,OAAO,EAAE,GAAG;SACf;KACJ;IAED,CAAC,wBAAwB,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE;QACjD,WAAW,EAAE,KAAK;KACrB;CAEJ,CAAC,CAAC;AAGC,oCAAY"}

package/dist/components/form/Label.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
-interface Props {
+import { StyledLabel } from "./Label.styled";
+type LabelProps = React.ComponentProps<typeof StyledLabel>;
+interface Props extends Partial<Pick<LabelProps, "css" | "className">> {
     label?: React.ReactNode;
     variant?: "big";
-    className?: string;
     children: React.ReactNode;
 }
 declare const Label: React.FC<Props>;
 export { Label };
+export type { Props as LabelProps, };
 //# sourceMappingURL=Label.d.ts.map

package/dist/components/form/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/components/form/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiB1B,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/components/form/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AAEzD,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC;AAE3D,UAAU,KAAM,SAAQ,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,WAAW,CAAC,CAAC;IAClE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiB1B,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AAEjB,YAAY,EACR,KAAK,IAAI,UAAU,GACtB,CAAC"}

package/dist/components/form/Label.js

@@ -1,23 +1,30 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = void 0;
 const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_1 = require("../../utils/index");
-const Label_module_scss_1 = __importDefault(require("./Label.module.scss"));
+const Label_styled_1 = require("./Label.styled");
 const Label = (props) => {
-    const v = (0, index_1.makeVariants)(props.variant);
-    const labelCls = (0, classnames_1.default)(Label_module_scss_1.default.text, {
-        [Label_module_scss_1.default.textBig]: v.includes("big"),
-    });
-    const label = props.label ? react_1.default.createElement("div", { className: labelCls }, props.label) : null;
-    const rootCls = (0, classnames_1.default)(props.className, Label_module_scss_1.default.label);
-    return (react_1.default.createElement("label", { className: rootCls },
-        label,
-        props.children));
+    const { label, variant, children } = props, rest = __rest(props, ["label", "variant", "children"]);
+    const labelElement = label
+        ? (react_1.default.createElement(Label_styled_1.StyledText, Object.assign({}, (variant ? { variant } : undefined)), label))
+        : null;
+    return (react_1.default.createElement(Label_styled_1.StyledLabel, Object.assign({}, rest),
+        labelElement,
+        children));
 };
 exports.Label = Label;
 //# sourceMappingURL=Label.js.map

package/dist/components/form/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../src/components/form/Label.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,4DAAoC;AAEpC,6CAAiD;AAEjD,4EAAyC;AASzC,MAAM,KAAK,GAAoB,CAAC,KAAK,EAAE,EAAE;IACrC,MAAM,CAAC,GAAG,IAAA,oBAAY,EAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,QAAQ,GAAG,IAAA,oBAAU,EAAC,2BAAM,CAAC,IAAI,EAAE;QACrC,CAAC,2BAAM,CAAC,OAAiB,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;KAChD,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,QAAQ,IAAG,KAAK,CAAC,KAAK,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjF,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,KAAK,CAAC,SAAS,EAAE,2BAAM,CAAC,KAAK,CAAC,CAAC;IAE1D,OAAO,CACH,yCAAO,SAAS,EAAE,OAAO;QACpB,KAAK;QACL,KAAK,CAAC,QAAQ,CACX,CACX,CAAC;AACN,CAAC,CAAC;AAEO,sBAAK"}
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../src/components/form/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,iDAAyD;AAUzD,MAAM,KAAK,GAAoB,CAAC,KAAK,EAAE,EAAE;IACrC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA7C,gCAAqC,CAAQ,CAAC;IAEpD,MAAM,YAAY,GAAG,KAAK;QACtB,CAAC,CAAC,CACE,8BAAC,yBAAU,oBAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,GAC9C,KAAK,CACG,CAChB;QACD,CAAC,CAAC,IAAI,CAAC;IAEX,OAAO,CACH,8BAAC,0BAAW,oBAAK,IAAI;QAChB,YAAY;QACZ,QAAQ,CACC,CACjB,CAAC;AACN,CAAC,CAAC;AAEO,sBAAK"}

package/dist/components/form/Label.styled.d.ts

@@ -0,0 +1,170 @@
+declare const StyledLabel: import("@stitches/react/types/styled-component").StyledComponent<"label", {}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: "white";
+        mainColor: "#008ad2";
+        mainColorAlt: "#006AA9";
+        activeBg: "#e7e7e7";
+        inactiveBg: "#d3d3de";
+        inactiveDarkBg: "#999";
+        toggleHandleBg: "#e0e0e0";
+        toggleHandleBorder: "#cdcdcd";
+        toggleBgDisabled: "#f0f0f0";
+        toggleHandleBorderDisabled: "#c29f7d";
+        toggleHandleBgDisabled: "#deae84";
+        icon: "#636363";
+        border: "#d5d5d5";
+        buttonBorder: "#bababa";
+        headerBorder: "#c8c8c9";
+        headerBg: "#efeff0";
+        headerText: "#484848";
+        text: "#323232";
+        sub: "#959595";
+        popText: "#666";
+        toolbarBorder: "#ababab";
+        toolbarBg: "#f8f8f8";
+        modalBg: "#f7f7f7";
+        modalButtonBg: "#f8f8f8";
+        modalButtonBorder: "#c2c2c2";
+        inputDisabledBg: "#f3f3f3";
+        inputDisabledText: "#959595";
+        choiceBg: "#ffffff";
+        choiceText: "#999999";
+        choiceActiveBg: "#f3f3f3";
+        choiceActiveText: "#313131";
+        choiceBorder: "#cfcfcf";
+        selectorText: "#606060";
+        selectorActive: "#008ad2";
+        blue1: "#038bf4";
+        blue2: "#b7d6f5";
+        blue3: "#dbe6ff";
+        blue4: "#33b4ff";
+        blue5: "#30a2e6";
+        orange1: "#ff7200";
+        orange1Darker: "#cc5b00";
+        purple1: "#7357e8";
+        green1: "#3ec234";
+        green1Darker: "#38af2f";
+        pink1: "#ff388f";
+        red1: "#ea2700";
+        yellow1: "#ffde9d";
+        yellow2: "#e4a429";
+        yellow3: "#fff5db";
+        pinky1: "#f5c0b7";
+        pinky2: "#e07b67";
+        pinky3: "#ffe1db";
+        grey1: "#737373";
+        focusColor: "#dcaf00";
+        scrollbarsThumb: "#737373";
+        scrollbarsBg: "transparent";
+        tableStripedBg: "#fafafa";
+        toolButtonText: "#666e80";
+    };
+}, import("@stitches/react/types/config").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;
+    };
+}>>;
+declare const StyledText: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    variant?: "big";
+}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: "white";
+        mainColor: "#008ad2";
+        mainColorAlt: "#006AA9";
+        activeBg: "#e7e7e7";
+        inactiveBg: "#d3d3de";
+        inactiveDarkBg: "#999";
+        toggleHandleBg: "#e0e0e0";
+        toggleHandleBorder: "#cdcdcd";
+        toggleBgDisabled: "#f0f0f0";
+        toggleHandleBorderDisabled: "#c29f7d";
+        toggleHandleBgDisabled: "#deae84";
+        icon: "#636363";
+        border: "#d5d5d5";
+        buttonBorder: "#bababa";
+        headerBorder: "#c8c8c9";
+        headerBg: "#efeff0";
+        headerText: "#484848";
+        text: "#323232";
+        sub: "#959595";
+        popText: "#666";
+        toolbarBorder: "#ababab";
+        toolbarBg: "#f8f8f8";
+        modalBg: "#f7f7f7";
+        modalButtonBg: "#f8f8f8";
+        modalButtonBorder: "#c2c2c2";
+        inputDisabledBg: "#f3f3f3";
+        inputDisabledText: "#959595";
+        choiceBg: "#ffffff";
+        choiceText: "#999999";
+        choiceActiveBg: "#f3f3f3";
+        choiceActiveText: "#313131";
+        choiceBorder: "#cfcfcf";
+        selectorText: "#606060";
+        selectorActive: "#008ad2";
+        blue1: "#038bf4";
+        blue2: "#b7d6f5";
+        blue3: "#dbe6ff";
+        blue4: "#33b4ff";
+        blue5: "#30a2e6";
+        orange1: "#ff7200";
+        orange1Darker: "#cc5b00";
+        purple1: "#7357e8";
+        green1: "#3ec234";
+        green1Darker: "#38af2f";
+        pink1: "#ff388f";
+        red1: "#ea2700";
+        yellow1: "#ffde9d";
+        yellow2: "#e4a429";
+        yellow3: "#fff5db";
+        pinky1: "#f5c0b7";
+        pinky2: "#e07b67";
+        pinky3: "#ffe1db";
+        grey1: "#737373";
+        focusColor: "#dcaf00";
+        scrollbarsThumb: "#737373";
+        scrollbarsBg: "transparent";
+        tableStripedBg: "#fafafa";
+        toolButtonText: "#666e80";
+    };
+}, import("@stitches/react/types/config").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 { StyledLabel, StyledText, };
+//# sourceMappingURL=Label.styled.d.ts.map

package/dist/components/form/Label.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.styled.d.ts","sourceRoot":"","sources":["../../../src/components/form/Label.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKf,CAAC;AAEH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAYd,CAAC;AAEH,OAAO,EACH,WAAW,EACX,UAAU,GACb,CAAC"}

package/dist/components/form/Label.styled.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledText = exports.StyledLabel = void 0;
+const theme_1 = require("../../theme");
+const StyledLabel = (0, theme_1.styled)("label", {
+    "& + &": {
+        marginTop: (0, theme_1.dimensionsPxToRem)(23),
+        display: "block",
+    },
+});
+exports.StyledLabel = StyledLabel;
+const StyledText = (0, theme_1.styled)("div", {
+    fontSize: (0, theme_1.fontPxToRem)(28),
+    marginBottom: (0, theme_1.dimensionsPxToRem)(24),
+    color: "$sub",
+    variants: {
+        variant: {
+            big: {
+                fontSize: (0, theme_1.fontPxToRem)(34),
+            },
+        },
+    },
+});
+exports.StyledText = StyledText;
+//# sourceMappingURL=Label.styled.js.map

package/dist/components/form/Label.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.styled.js","sourceRoot":"","sources":["../../../src/components/form/Label.styled.ts"],"names":[],"mappings":";;;AAAA,uCAAqE;AAErE,MAAM,WAAW,GAAG,IAAA,cAAM,EAAC,OAAO,EAAE;IAChC,OAAO,EAAE;QACL,SAAS,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;QAChC,OAAO,EAAE,OAAO;KACnB;CACJ,CAAC,CAAC;AAiBC,kCAAW;AAff,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IAC7B,QAAQ,EAAE,IAAA,mBAAW,EAAC,EAAE,CAAC;IACzB,YAAY,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;IACnC,KAAK,EAAE,MAAM;IAEb,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,GAAG,EAAE;gBACD,QAAQ,EAAE,IAAA,mBAAW,EAAC,EAAE,CAAC;aAC5B;SACJ;KACJ;CACJ,CAAC,CAAC;AAIC,gCAAU"}

package/dist/components/form/Toggle.d.ts

@@ -1,12 +1,14 @@
 import React from "react";
-interface Props {
+import { StyledContainer } from "./Toggle.styled";
+type ContainerProps = React.ComponentProps<typeof StyledContainer>;
+interface Props extends Partial<Pick<ContainerProps, "css" | "className">> {
     onChange: (newValue: boolean) => void;
     onContextMenu?: React.MouseEventHandler;
     undeterminedClickValue?: boolean;
     disabled?: boolean;
     value: boolean | null;
-    className?: string;
 }
 declare const Toggle: React.FC<Props>;
 export { Toggle };
+export type { Props as ToggleProps, };
 //# sourceMappingURL=Toggle.d.ts.map