react-miui 0.20.1 → 0.21.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [0.21.0] - 2022-06-13
+### Breaking
+- `Section` no longer accepts `variant`, it has direct `horizontal` and `vertical` props now
+- `Item` from `List` no longer exported directly, use a `Item` property on `List` constructor
+- `List` accepts `inset` directly instead of `variant` prop
+### Dev
+- `List` converted to stitches
+- `Section` moved to stitches
+- restored old dev mode
+
 ## [0.20.1] - 2022-06-08
 ### Fixed
 - broken input styles

package/dist/components/form/input/Input.css.d.ts

@@ -1,29 +1,29 @@
 declare const input: {
     height: string;
     fontSize: string;
-    color: "$text";
-    border: "none";
-    display: "block";
-    width: "100%";
-    background: "none";
-    fontFamily: "inherit";
-    padding: "1.2em 0";
+    color: string;
+    border: string;
+    display: string;
+    width: string;
+    background: string;
+    fontFamily: string;
+    padding: string;
     flex: number;
     "&::placeholder": {
-        color: "$sub";
+        color: string;
     };
     "&:read-only, &:disabled": {
-        color: "inherit";
+        color: string;
     };
 };
 declare const wrapper: {
-    background: "white";
-    display: "inline-flex";
-    width: "100%";
-    borderRadius: "2px";
-    padding: `0 ${string}`;
-    border: `${string} solid $border`;
-    alignItems: "center";
+    background: string;
+    display: string;
+    width: string;
+    borderRadius: string;
+    padding: string;
+    border: string;
+    alignItems: string;
     variants: {
         disabled: {
             true: {

package/dist/components/form/input/Input.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input/Input.css.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAmBS,CAAC;AAErB,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BO,CAAC;AAErB,OAAO,EACH,KAAK,EACL,OAAO,GACV,CAAC"}
+{"version":3,"file":"Input.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input/Input.css.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAmBV,CAAC;AAGF,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BZ,CAAC;AAGF,OAAO,EACH,KAAK,EACL,OAAO,GACV,CAAC"}

package/dist/components/form/input/Input.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.css.js","sourceRoot":"","sources":["../../../../src/components/form/input/Input.css.ts"],"names":[],"mappings":";;;AAEA,gDAAkF;AAElF,MAAM,KAAK,GAAG;IACV,QAAQ,EAAE,IAAA,4BAAiB,EAAC,GAAG,CAAC;IAChC,UAAU,EAAE,IAAA,sBAAW,EAAC,EAAE,CAAC;IAC3B,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,OAAO;IAClB,OAAO,EAAE,MAAM;IACf,YAAY,EAAE,MAAM;IACpB,YAAY,EAAE,SAAS;IACvB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,CAAC;IAET,gBAAgB,EAAE;QACd,KAAK,EAAE,MAAM;KAChB;IAED,yBAAyB,EAAE;QACvB,KAAK,EAAE,SAAS;KACnB;CACe,CAAC;AAgCjB,sBAAK;AA9BT,MAAM,OAAO,GAAG;IACZ,UAAU,EAAE,OAAO;IACnB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,KAAK,IAAA,4BAAiB,EAAC,EAAE,CAAC,EAAE;IACrC,MAAM,EAAE,GAAG,IAAA,wBAAa,EAAC,CAAC,CAAC,gBAAgB;IAC3C,UAAU,EAAE,QAAQ;IAEpB,QAAQ,EAAE;QACN,QAAQ,EAAE;YACN,IAAI,EAAE;gBACF,UAAU,EAAE,kBAAkB;gBAC9B,KAAK,EAAE,oBAAoB;aAC9B;SACJ;QACD,QAAQ,EAAE;YACN,IAAI,EAAE;gBACF,KAAK,EAAE,oBAAoB;aAC9B;SACJ;QACD,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,WAAW,EAAE,aAAa;aAC7B;SACJ;KACJ;CACe,CAAC;AAIjB,0BAAO"}
+{"version":3,"file":"Input.css.js","sourceRoot":"","sources":["../../../../src/components/form/input/Input.css.ts"],"names":[],"mappings":";;;AAEA,gDAAkF;AAElF,MAAM,KAAK,GAAG;IACV,QAAQ,EAAE,IAAA,4BAAiB,EAAC,GAAG,CAAC;IAChC,UAAU,EAAE,IAAA,sBAAW,EAAC,EAAE,CAAC;IAC3B,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,OAAO;IAClB,OAAO,EAAE,MAAM;IACf,YAAY,EAAE,MAAM;IACpB,YAAY,EAAE,SAAS;IACvB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,CAAC;IAET,gBAAgB,EAAE;QACd,KAAK,EAAE,MAAM;KAChB;IAED,yBAAyB,EAAE;QACvB,KAAK,EAAE,SAAS;KACnB;CACJ,CAAC;AAkCE,sBAAK;AA/BT,MAAM,OAAO,GAAG;IACZ,UAAU,EAAE,OAAO;IACnB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,KAAK,IAAA,4BAAiB,EAAC,EAAE,CAAC,EAAE;IACrC,MAAM,EAAE,GAAG,IAAA,wBAAa,EAAC,CAAC,CAAC,gBAAgB;IAC3C,UAAU,EAAE,QAAQ;IAEpB,QAAQ,EAAE;QACN,QAAQ,EAAE;YACN,IAAI,EAAE;gBACF,UAAU,EAAE,kBAAkB;gBAC9B,KAAK,EAAE,oBAAoB;aAC9B;SACJ;QACD,QAAQ,EAAE;YACN,IAAI,EAAE;gBACF,KAAK,EAAE,oBAAoB;aAC9B;SACJ;QACD,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,WAAW,EAAE,aAAa;aAC7B;SACJ;KACJ;CACJ,CAAC;AAKE,0BAAO"}

package/dist/components/form/input/Input.styled.d.ts

@@ -57,17 +57,25 @@ declare const StyledInput: import("@stitches/react/types/styled-component.js").S
         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;
     };
 }>>;
 declare const StyledWrapper: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {
@@ -133,17 +141,25 @@ declare const StyledWrapper: 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 | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
     };
-    my: (value: string) => {
-        marginTop: string;
-        marginBottom: string;
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
     };
-    size: (value: string) => {
-        width: string;
-        height: string;
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
     };
 }>>;
 declare const StyledPrefix: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util.js").CSS<{}, {
@@ -205,17 +221,25 @@ declare const StyledPrefix: 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;
     };
 }>>;
 declare const StyledSuffix: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util.js").CSS<{}, {
@@ -277,17 +301,25 @@ declare const StyledSuffix: 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 | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
     };
-    my: (value: string) => {
-        marginTop: string;
-        marginBottom: string;
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
     };
-    size: (value: string) => {
-        width: string;
-        height: string;
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
     };
 }>>;
 export { StyledInput, StyledWrapper, StyledPrefix, StyledSuffix, };

package/dist/components/form/input/Input.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input/Input.styled.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAyB,CAAC;AAE3C,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAyB,CAAC;AAE7C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGhB,CAAC;AAEH,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGhB,CAAC;AAEH,OAAO,EACH,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,GACf,CAAC"}
+{"version":3,"file":"Input.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input/Input.styled.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAyB,CAAC;AAE3C,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAyB,CAAC;AAE7C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGhB,CAAC;AAEH,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGhB,CAAC;AAEH,OAAO,EACH,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,GACf,CAAC"}

package/dist/components/form/textarea/TextArea.styled.d.ts

@@ -61,17 +61,25 @@ declare const StyledTextArea: 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 { StyledTextArea, };

package/dist/components/form/textarea/TextArea.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.styled.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUlB,CAAC;AAEH,OAAO,EACH,cAAc,GACjB,CAAC"}
+{"version":3,"file":"TextArea.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.styled.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUlB,CAAC;AAEH,OAAO,EACH,cAAc,GACjB,CAAC"}

package/dist/components/icons/Icon.js

@@ -36,8 +36,7 @@ var ICON;
     ICON["trash"] = "trash";
     ICON["config"] = "config";
     ICON["dots"] = "dots";
-})(ICON || (ICON = {}));
-exports.ICON = ICON;
+})(ICON || (exports.ICON = ICON = {}));
 const iconsMap = new Map([
     [ICON.checkmark, Checkmark_js_1.Checkmark],
     [ICON.back, Back_js_1.Back],

package/dist/components/icons/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAI1B,iDAA2C;AAC3C,uCAAiC;AACjC,6CAAuC;AACvC,2CAAqC;AACrC,6CAAuC;AACvC,yCAAmC;AACnC,yCAAmC;AACnC,2CAAqC;AACrC,uCAAiC;AAEjC,IAAK,IAUJ;AAVD,WAAK,IAAI;IACL,+BAAuB,CAAA;IACvB,qBAAa,CAAA;IACb,2BAAmB,CAAA;IACnB,yBAAiB,CAAA;IACjB,2BAAmB,CAAA;IACnB,uBAAe,CAAA;IACf,uBAAe,CAAA;IACf,yBAAiB,CAAA;IACjB,qBAAa,CAAA;AACjB,CAAC,EAVI,IAAI,KAAJ,IAAI,QAUR;AA2Bc,oBAAI;AApBnB,MAAM,QAAQ,GAAG,IAAI,GAAG,CAA6C;IACjE,CAAC,IAAI,CAAC,SAAS,EAAE,wBAAS,CAAC;IAC3B,CAAC,IAAI,CAAC,IAAI,EAAE,cAAI,CAAC;IACjB,CAAC,IAAI,CAAC,OAAO,EAAE,oBAAO,CAAC;IACvB,CAAC,IAAI,CAAC,MAAM,EAAE,kBAAM,CAAC;IACrB,CAAC,IAAI,CAAC,OAAO,EAAE,oBAAO,CAAC;IACvB,CAAC,IAAI,CAAC,KAAK,EAAE,gBAAK,CAAC;IACnB,CAAC,IAAI,CAAC,KAAK,EAAE,gBAAK,CAAC;IACnB,CAAC,IAAI,CAAC,MAAM,EAAE,kBAAM,CAAC;IACrB,CAAC,IAAI,CAAC,IAAI,EAAE,cAAI,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,IAAI,GAAoB,CAAC,EAA4B,EAAE,EAAE;QAAhC,EAAE,IAAI,EAAE,QAAQ,OAAY,EAAP,KAAK,cAA1B,QAA4B,CAAF;IACrD,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACjC,IAAI,CAAC,CAAC,EAAE;QACJ,MAAM,IAAI,SAAS,CAAC,gBAAgB,GAAG,QAAQ,CAAC,CAAC;KACpD;IACD,OAAO,8BAAC,CAAC,oBAAK,KAAK,EAAI,CAAC;AAC5B,CAAC,CAAC;AAEO,oBAAI"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAI1B,iDAA2C;AAC3C,uCAAiC;AACjC,6CAAuC;AACvC,2CAAqC;AACrC,6CAAuC;AACvC,yCAAmC;AACnC,yCAAmC;AACnC,2CAAqC;AACrC,uCAAiC;AAEjC,IAAK,IAUJ;AAVD,WAAK,IAAI;IACL,+BAAuB,CAAA;IACvB,qBAAa,CAAA;IACb,2BAAmB,CAAA;IACnB,yBAAiB,CAAA;IACjB,2BAAmB,CAAA;IACnB,uBAAe,CAAA;IACf,uBAAe,CAAA;IACf,yBAAiB,CAAA;IACjB,qBAAa,CAAA;AACjB,CAAC,EAVI,IAAI,oBAAJ,IAAI,QAUR;AAOD,MAAM,QAAQ,GAAG,IAAI,GAAG,CAA6C;IACjE,CAAC,IAAI,CAAC,SAAS,EAAE,wBAAS,CAAC;IAC3B,CAAC,IAAI,CAAC,IAAI,EAAE,cAAI,CAAC;IACjB,CAAC,IAAI,CAAC,OAAO,EAAE,oBAAO,CAAC;IACvB,CAAC,IAAI,CAAC,MAAM,EAAE,kBAAM,CAAC;IACrB,CAAC,IAAI,CAAC,OAAO,EAAE,oBAAO,CAAC;IACvB,CAAC,IAAI,CAAC,KAAK,EAAE,gBAAK,CAAC;IACnB,CAAC,IAAI,CAAC,KAAK,EAAE,gBAAK,CAAC;IACnB,CAAC,IAAI,CAAC,MAAM,EAAE,kBAAM,CAAC;IACrB,CAAC,IAAI,CAAC,IAAI,EAAE,cAAI,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,IAAI,GAAoB,CAAC,EAA4B,EAAE,EAAE;QAAhC,EAAE,IAAI,EAAE,QAAQ,OAAY,EAAP,KAAK,cAA1B,QAA4B,CAAF;IACrD,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACjC,IAAI,CAAC,CAAC,EAAE;QACJ,MAAM,IAAI,SAAS,CAAC,gBAAgB,GAAG,QAAQ,CAAC,CAAC;KACpD;IACD,OAAO,8BAAC,CAAC,oBAAK,KAAK,EAAI,CAAC;AAC5B,CAAC,CAAC;AAEO,oBAAI"}

package/dist/components/layout/list/Header.d.ts

@@ -1,10 +1,177 @@
 import React from "react";
-type Variant = "inset";
-interface Props {
-    className?: string;
-    variant?: Variant | Variant[];
-    children: React.ReactNode;
-}
-declare const Header: React.FC<Props>;
+import type { VariantProps } from "@stitches/react";
+declare const StyledHeader: import("@stitches/react/types/styled-component.js").StyledComponent<React.FC<Omit<Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
+}, "inset" | "css" | "selected"> & import("@stitches/react/types/styled-component.js").TransformProps<{
+    inset?: boolean | "true";
+    selected?: boolean | "true";
+}, {}> & {
+    css?: 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;
+        };
+    }>;
+} & import("./Item.js").ItemProps> & import("./Item.js").ItemSubComponents, {
+    inset?: 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;
+    };
+}>>;
+type StyledHeaderProps = React.ComponentProps<typeof StyledHeader>;
+type Variants = VariantProps<typeof StyledHeader>;
+declare const Header: React.FC<StyledHeaderProps & Variants & {
+    as?: string;
+}>;
 export { Header };
 //# sourceMappingURL=Header.d.ts.map

package/dist/components/layout/list/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,KAAK,OAAO,GAAG,OAAO,CAAC;AAEvB,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAa3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAQpD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsBhB,CAAC;AAEH,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACnE,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAMlD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG,QAAQ,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAMpE,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/layout/list/Header.js

@@ -1,21 +1,46 @@
 "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.Header = void 0;
 const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../../../utils/index.js");
-const Item_module_scss_1 = __importDefault(require("./Item.module.scss"));
-const Header_module_scss_1 = __importDefault(require("./Header.module.scss"));
-const Header = (props) => {
-    const v = (0, index_js_1.makeVariants)(props.variant);
-    const cls = (0, classnames_1.default)(props.className, Item_module_scss_1.default.item, Header_module_scss_1.default.header, {
-        [Item_module_scss_1.default.inset]: v.includes("inset"),
-    });
-    return (react_1.default.createElement("li", { className: cls },
-        react_1.default.createElement("div", null, props.children)));
+const theme_js_1 = require("../../../theme.js");
+const Item_js_1 = require("./Item.js");
+const StyledContent = (0, theme_js_1.styled)("div", {});
+const StyledHeader = (0, theme_js_1.styled)(Item_js_1.Item, {
+    paddingTop: (0, theme_js_1.dimensionsPxToRem)(80),
+    paddingBottom: (0, theme_js_1.dimensionsPxToRem)(40),
+    fontSize: (0, theme_js_1.fontPxToRem)(26),
+    color: "$sub",
+    textTransform: "uppercase",
+    [`& ${Item_js_1.ItemInnerContainerClassName}`]: {
+        minHeight: 0,
+    },
+    variants: {
+        inset: {
+            true: {
+                paddingLeft: 0,
+                paddingRight: 0,
+            },
+        },
+    },
+});
+const Header = (_a) => {
+    var { as } = _a, props = __rest(_a, ["as"]);
+    return (react_1.default.createElement(StyledHeader, Object.assign({}, props),
+        react_1.default.createElement(StyledContent, Object.assign({}, (as ? { as } : undefined)), props.children)));
 };
 exports.Header = Header;
 //# sourceMappingURL=Header.js.map

package/dist/components/layout/list/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,4DAAoC;AAEpC,sDAAuD;AAEvD,0EAAwC;AACxC,8EAAgD;AAUhD,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,CAAC,GAAG,IAAA,uBAAY,EAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,GAAG,GAAG,IAAA,oBAAU,EAAC,KAAK,CAAC,SAAS,EAAE,0BAAM,CAAC,IAAI,EAAE,4BAAY,CAAC,MAAM,EAAE;QACtE,CAAC,0BAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;KACtC,CAAC,CAAC;IAGH,OAAO,CACH,sCAAI,SAAS,EAAE,GAAG;QACd,2CAAM,KAAK,CAAC,QAAQ,CAAO,CAC1B,CACR,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAI1B,gDAA2E;AAE3E,uCAA8D;AAE9D,MAAM,aAAa,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AAExC,MAAM,YAAY,GAAG,IAAA,iBAAM,EAAC,cAAI,EAAE;IAE9B,UAAU,EAAE,IAAA,4BAAiB,EAAC,EAAE,CAAC;IAEjC,aAAa,EAAE,IAAA,4BAAiB,EAAC,EAAE,CAAC;IAEpC,QAAQ,EAAE,IAAA,sBAAW,EAAC,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM;IACb,aAAa,EAAE,WAAW;IAE1B,CAAC,KAAK,qCAA2B,EAAE,CAAC,EAAE;QAClC,SAAS,EAAE,CAAC;KACf;IAED,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,IAAI,EAAE;gBACF,WAAW,EAAE,CAAC;gBACd,YAAY,EAAE,CAAC;aAClB;SACJ;KACJ;CACJ,CAAC,CAAC;AASH,MAAM,MAAM,GAA6D,CAAC,EAAgB,EAAE,EAAE;QAApB,EAAE,EAAE,OAAY,EAAP,KAAK,cAAd,MAAgB,CAAF;IACpF,OAAO,CACH,8BAAC,YAAY,oBAAK,KAAK;QACnB,8BAAC,aAAa,oBAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAiB,CACnE,CAClB,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}

package/dist/components/layout/list/Header.stories.d.ts

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

package/dist/components/layout/list/Header.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,QAAA,MAAM,OAAO,EAAE,KAkBd,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/layout/list/Header.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const react_1 = __importDefault(require("react"));
+const Header_js_1 = require("./Header.js");
+const List_js_1 = require("./List.js");
+const meta = {
+    title: "Components/Layout/List/Header",
+    component: Header_js_1.Header,
+    tags: ["autodocs", "layout"],
+};
+const Primary = {
+    args: {
+        children: "Section name",
+    },
+    render: (args) => {
+        return (react_1.default.createElement(List_js_1.List, null,
+            react_1.default.createElement(Header_js_1.Header, Object.assign({}, args)),
+            react_1.default.createElement(List_js_1.List.Item, null, "Item 1"),
+            react_1.default.createElement(List_js_1.List.Item, null, "Item 2"),
+            react_1.default.createElement(List_js_1.List.Item, null, "Item 3"),
+            react_1.default.createElement(Header_js_1.Header, Object.assign({}, args)),
+            react_1.default.createElement(List_js_1.List.Item, null, "Item 1"),
+            react_1.default.createElement(List_js_1.List.Item, null, "Item 2"),
+            react_1.default.createElement(List_js_1.List.Item, null, "Item 3")));
+    },
+};
+exports.Primary = Primary;
+exports.default = meta;
+//# sourceMappingURL=Header.stories.js.map

package/dist/components/layout/list/Header.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.stories.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAI1B,2CAAqC;AACrC,uCAAiC;AAEjC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,kBAAM;IACjB,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC;CAC/B,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,QAAQ,EAAE,cAAc;KAC3B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,OAAO,CACH,8BAAC,cAAI;YACD,8BAAC,kBAAM,oBAAK,IAAI,EAAI;YACpB,8BAAC,cAAI,CAAC,IAAI,iBAAmB;YAC7B,8BAAC,cAAI,CAAC,IAAI,iBAAmB;YAC7B,8BAAC,cAAI,CAAC,IAAI,iBAAmB;YAC7B,8BAAC,kBAAM,oBAAK,IAAI,EAAI;YACpB,8BAAC,cAAI,CAAC,IAAI,iBAAmB;YAC7B,8BAAC,cAAI,CAAC,IAAI,iBAAmB;YAC7B,8BAAC,cAAI,CAAC,IAAI,iBAAmB,CAC1B,CACV,CAAC;IACN,CAAC;CACJ,CAAC;AAGE,0BAAO;AAGX,kBAAe,IAAI,CAAC"}