react-miui 0.27.11 → 0.28.0

package/esm/components/form/choice/Choice.styled.js

@@ -0,0 +1,63 @@
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
+const StyledChoice = styled("div", {
+    "--choice-bg": "$colors$choiceBg",
+    "--choice-text": "$colors$choiceText",
+    "--choice-active-bg": "$colors$choiceActiveBg",
+    "--choice-active-text": "$colors$choiceActiveText",
+    "--choice-border": "$colors$choiceBorder",
+    "input": {
+        "width": 0,
+        "height": 0,
+        "overflow": "hidden",
+        "opacity": 0,
+        "margin": 0,
+        "position": "absolute",
+        "&:checked + span": {
+            color: "var(--choice-active-text)",
+            background: "var(--choice-active-bg)",
+        },
+    },
+    "span": {
+        display: "flex",
+        padding: "0 1em",
+        flex: 1,
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: fontPxToRem(24),
+        color: "var(--choice-text)",
+        background: "var(--choice-bg)",
+        whiteSpace: "nowrap",
+    },
+    "display": "flex",
+    "border": "1px solid var(--choice-border)",
+    "position": "relative",
+    "borderRadius": "8px",
+    "overflow": "hidden",
+    "width": "max-content",
+    "marginLeft": "auto",
+    "marginRight": "auto",
+    "label": {
+        "flex": 1,
+        "height": dimensionsPxToRem(89),
+        "display": "flex",
+        "+ label": {
+            borderLeft: "1px solid var(--choice-border)",
+        },
+    },
+    "variants": {
+        wide: {
+            true: {
+                width: "100%",
+            },
+        },
+        unaligned: {
+            true: {
+                marginLeft: "unset",
+                marginRight: "unset",
+            },
+        },
+    },
+});
+export { StyledChoice, };
+//# sourceMappingURL=Choice.styled.js.map

package/esm/components/form/choice/Choice.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Choice.styled.js","sourceRoot":"","sources":["../../../../src/components/form/choice/Choice.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExE,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE;IAC/B,aAAa,EAAE,kBAAkB;IACjC,eAAe,EAAE,oBAAoB;IACrC,oBAAoB,EAAE,wBAAwB;IAC9C,sBAAsB,EAAE,0BAA0B;IAClD,iBAAiB,EAAE,sBAAsB;IAEzC,OAAO,EAAE;QACL,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,UAAU;QAEtB,kBAAkB,EAAE;YAChB,KAAK,EAAE,2BAA2B;YAClC,UAAU,EAAE,yBAAyB;SACxC;KACJ;IAED,MAAM,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,WAAW,CAAC,EAAE,CAAC;QACzB,KAAK,EAAE,oBAAoB;QAC3B,UAAU,EAAE,kBAAkB;QAC9B,UAAU,EAAE,QAAQ;KACvB;IAED,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,gCAAgC;IAC1C,UAAU,EAAE,UAAU;IACtB,cAAc,EAAE,KAAK;IACrB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,MAAM;IACpB,aAAa,EAAE,MAAM;IAErB,OAAO,EAAE;QACL,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,iBAAiB,CAAC,EAAE,CAAC;QAC/B,SAAS,EAAE,MAAM;QAEjB,SAAS,EAAE;YACP,UAAU,EAAE,gCAAgC;SAC/C;KACJ;IAED,UAAU,EAAE;QACR,IAAI,EAAE;YACF,IAAI,EAAE;gBACF,KAAK,EAAE,MAAM;aAChB;SACJ;QACD,SAAS,EAAE;YACP,IAAI,EAAE;gBACF,UAAU,EAAE,OAAO;gBACnB,WAAW,EAAE,OAAO;aACvB;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,YAAY,GACf,CAAC"}

package/esm/components/layout/header/Header.styled.d.ts

@@ -249,7 +249,7 @@ declare const After: import("@stitches/react/types/styled-component").StyledComp
 }>>;
 declare const StyledHeader: import("@stitches/react/types/styled-component").StyledComponent<"div", {
     variant?: "toolbar" | "colored";
-    position?: "left" | "bottom" | "right" | "top";
+    position?: "bottom" | "left" | "right" | "top";
     center?: boolean | "true";
 }, {}, import("@stitches/react/types/css-util").CSS<{}, {
     colors: {

package/esm/components/layout/header/StickyHeader.d.ts

@@ -8,7 +8,7 @@ interface Props {
 declare const StickyHeader: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>> & {
     displayName: string;
     Content: import("@stitches/react/types/styled-component").StyledComponent<"div", {
-        position?: "left" | "bottom" | "right" | "top";
+        position?: "bottom" | "left" | "right" | "top";
     }, {}, import("@stitches/react/types/css-util").CSS<{}, {
         colors: {
             background: "white";

package/esm/components/layout/header/StickyHeader.styled.d.ts

@@ -1,5 +1,5 @@
 declare const StyledStickyHeader: import("@stitches/react/types/styled-component").StyledComponent<"div", {
-    position?: "left" | "bottom" | "right" | "top";
+    position?: "bottom" | "left" | "right" | "top";
 }, {}, import("@stitches/react/types/css-util").CSS<{}, {
     colors: {
         background: "white";
@@ -84,7 +84,7 @@ declare const StyledStickyHeader: import("@stitches/react/types/styled-component
     };
 }>>;
 declare const Content: import("@stitches/react/types/styled-component").StyledComponent<"div", {
-    position?: "left" | "bottom" | "right" | "top";
+    position?: "bottom" | "left" | "right" | "top";
 }, {}, import("@stitches/react/types/css-util").CSS<{}, {
     colors: {
         background: "white";

package/esm/components/utils/colors.d.ts

@@ -0,0 +1,4 @@
+declare const contrastColor: (hex: string) => "#000000" | "#FFFFFF";
+declare const invertColor: (hex: string) => string;
+export { contrastColor, invertColor, };
+//# sourceMappingURL=colors.d.ts.map

package/esm/components/utils/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/components/utils/colors.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,aAAa,GAAI,KAAK,MAAM,0BAOjC,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,KAAK,MAAM,WAK/B,CAAC;AAEF,OAAO,EACH,aAAa,EACb,WAAW,GACd,CAAC"}

package/esm/components/utils/colors.js

@@ -0,0 +1,15 @@
+const contrastColor = (hex) => {
+    const r = parseInt(hex.substring(1, 3), 16);
+    const g = parseInt(hex.substring(3, 5), 16);
+    const b = parseInt(hex.substring(5, 7), 16);
+    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+    return brightness > 128 ? "#000000" : "#FFFFFF";
+};
+const invertColor = (hex) => {
+    const r = 255 - parseInt(hex.substring(1, 3), 16);
+    const g = 255 - parseInt(hex.substring(3, 5), 16);
+    const b = 255 - parseInt(hex.substring(5, 7), 16);
+    return "#" + [r, g, b].map(x => x.toString(16).padStart(2, "0")).join("");
+};
+export { contrastColor, invertColor, };
+//# sourceMappingURL=colors.js.map

package/esm/components/utils/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/components/utils/colors.ts"],"names":[],"mappings":"AAEA,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;IAClC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE5C,MAAM,UAAU,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;IACxD,OAAO,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE;IAChC,MAAM,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAClD,OAAO,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9E,CAAC,CAAC;AAEF,OAAO,EACH,aAAa,EACb,WAAW,GACd,CAAC"}

package/esm/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./components/form/choice/Choice";
 export * from "./components/form/Checkbox";
+export * from "./components/form/ColorPicker";
 export * from "./components/form/Label";
 export * from "./components/form/Select";
 export * from "./components/form/textarea/TextArea";

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AAEzC,cAAc,yBAAyB,CAAC;AAExC,cAAc,yBAAyB,CAAC;AAExC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AAEtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,kBAAkB,CAAC;AAEjC,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AAEzC,cAAc,yBAAyB,CAAC;AAExC,cAAc,yBAAyB,CAAC;AAExC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AAEtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,kBAAkB,CAAC;AAEjC,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}

package/esm/index.js

@@ -1,5 +1,6 @@
 export * from "./components/form/choice/Choice.js";
 export * from "./components/form/Checkbox.js";
+export * from "./components/form/ColorPicker.js";
 export * from "./components/form/Label.js";
 export * from "./components/form/Select.js";
 export * from "./components/form/textarea/TextArea.js";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AAEzC,cAAc,yBAAyB,CAAC;AAExC,cAAc,yBAAyB,CAAC;AAExC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AAEtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,kBAAkB,CAAC;AAIjC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AAEzC,cAAc,yBAAyB,CAAC;AAExC,cAAc,yBAAyB,CAAC;AAExC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AAEtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,kBAAkB,CAAC;AAIjC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}

package/package.json

@@ -1,29 +1,8 @@
 {
   "name": "react-miui",
-  "version": "0.27.11",
+  "version": "0.28.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
-  "scripts": {
-    "test": "NODE_ENV=test jest",
-    "docs": "typedoc src/index.ts --skipErrorChecking --out docs --includeVersion",
-    "compile": "pnpm run compile:esm && pnpm run compile:cjs",
-    "compile:esm": "rm -rf esm && tsc --project tsconfig.esm.json && node ./build-scripts/compile.esm.after.mjs",
-    "compile:cjs": "rm -rf dist && tsc --project tsconfig.cjs.json && node ./build-scripts/compile.cjs.after.mjs",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src --ext .ts,.tsx,.js,.jsx,.mjs",
-    "lint:fix": "pnpm run lint --fix",
-    "prepare": "patch-package",
-    "prepack": "pnpm run compile",
-    "prepublishOnly": "pnpm audit && pnpm run lint && pnpm test && pnpm run docs",
-    "start:dev": "pnpm run storybook",
-    "start:dev:legacy": "next dev",
-    "deploy:dev": "next build && next export && netlify deploy --dir out",
-    "updates": "pnpm dlx npm-check-updates --dep prod",
-    "updates:dev": "pnpm dlx npm-check-updates --dep dev",
-    "updates:all": "pnpm dlx npm-check-updates",
-    "storybook": "storybook dev -p 6006",
-    "build:storybook": "storybook build"
-  },
   "exports": {
     "./global.scss": "./src/global.scss",
     ".": {
@@ -54,12 +33,12 @@
     "@ezez/hooks": "^2.2.0",
     "@icon-park/react": "^1.4.2",
     "@knodes/typedoc-plugin-pages": "^0.23.4",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-links": "^8.4.2",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/nextjs": "^8.4.2",
-    "@storybook/react": "^8.4.2",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/nextjs": "^8.6.14",
+    "@storybook/react": "^8.6.14",
     "@storybook/testing-library": "^0.2.2",
     "@types/jest": "^29.5.14",
     "@types/react": "^18.3.12",
@@ -76,7 +55,7 @@
     "fs-extra": "^11.2.0",
     "jest": "^29.7.0",
     "must": "^0.13.4",
-    "next": "^15.3.2",
+    "next": "^15.4.6",
     "nodemon": "^3.1.7",
     "prettier": "^2.8.8",
     "react": "^18.3.1",
@@ -84,7 +63,7 @@
     "react-use": "^17.5.1",
     "resolve-tspaths": "^0.8.22",
     "sass": "^1.80.6",
-    "storybook": "^8.4.2",
+    "storybook": "^8.6.14",
     "ts-node": "^10.9.2",
     "typedoc": "^0.23.28",
     "typescript": "^5.6.3"
@@ -98,5 +77,23 @@
     "language": "typescript",
     "fixDefaultForCommonJS": true,
     "jsx": true
+  },
+  "scripts": {
+    "test": "NODE_ENV=test jest",
+    "docs": "typedoc src/index.ts --skipErrorChecking --out docs --includeVersion",
+    "compile": "pnpm run compile:esm && pnpm run compile:cjs",
+    "compile:esm": "rm -rf esm && tsc --project tsconfig.esm.json && node ./build-scripts/compile.esm.after.mjs",
+    "compile:cjs": "rm -rf dist && tsc --project tsconfig.cjs.json && node ./build-scripts/compile.cjs.after.mjs",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx,.js,.jsx,.mjs",
+    "lint:fix": "pnpm run lint --fix",
+    "start:dev": "pnpm run storybook",
+    "start:dev:legacy": "next dev",
+    "deploy:dev": "next build && next export && netlify deploy --dir out",
+    "updates": "pnpm dlx npm-check-updates --dep prod",
+    "updates:dev": "pnpm dlx npm-check-updates --dep dev",
+    "updates:all": "pnpm dlx npm-check-updates",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build"
   }
-}
+}

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

@@ -0,0 +1,169 @@
+import React, { useState } from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { styled } from "../../theme";
+import { Section } from "../layout/section/Section";
+
+import { ColorPicker } from "./ColorPicker";
+
+const meta: Meta = {
+    title: "Components/Form/ColorPicker",
+    component: ColorPicker,
+    tags: ["autodocs", "form"],
+    argTypes: {
+        variant: {
+            control: { type: "select" },
+            options: [undefined, "pill"],
+        },
+        value: {
+            control: { type: "color" },
+        },
+    },
+};
+
+type Story = StoryObj<typeof ColorPicker>;
+
+const Container = styled("div", {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2rem",
+    padding: "1rem",
+});
+
+const Row = styled("div", {
+    display: "flex",
+    gap: "1rem",
+    alignItems: "center",
+    flexWrap: "wrap",
+});
+
+const Basic: Story = {
+    render: () => {
+        const [color, setColor] = useState("#3ec234");
+
+        return (
+            <Section vertical={true} horizontal={true}>
+                <Row>
+                    <ColorPicker
+                        value={color}
+                        name={"basic-color"}
+                        onChange={(e) => { setColor(e.target.value); }}
+                    />
+                    <span>Selected: {color}</span>
+                </Row>
+            </Section>
+        );
+    },
+};
+
+const PillVariant: Story = {
+    render: () => {
+        const [color, setColor] = useState("#008ad2");
+
+        return (
+            <Section vertical={true} horizontal={true}>
+                <div style={{ width: "200px" }}>
+                    <ColorPicker
+                        value={color}
+                        name={"pill-color"}
+                        onChange={(e) => { setColor(e.target.value); }}
+                        variant={"pill"}
+                        label={"Choose Color"}
+                    />
+                </div>
+                <p>Selected: {color}</p>
+            </Section>
+        );
+    },
+};
+
+const States: Story = {
+    render: () => {
+        const [color, setColor] = useState("#d2f39f");
+
+        return (
+            <Container>
+                <Section vertical={true} horizontal={true}>
+                    <h3>Different States</h3>
+                    <Row>
+                        <ColorPicker
+                            value={color}
+                            name={"normal"}
+                            onChange={(e) => { setColor(e.target.value); }}
+                        />
+
+                        <ColorPicker
+                            value={color}
+                            name={"disabled"}
+                            onChange={(e) => { setColor(e.target.value); }}
+                            disabled={true}
+                        />
+
+                        <ColorPicker
+                            value={color}
+                            name={"readonly"}
+                            onChange={(e) => { setColor(e.target.value); }}
+                            readOnly={true}
+                        />
+
+                        <ColorPicker
+                            value={color}
+                            name={"error"}
+                            onChange={(e) => { setColor(e.target.value); }}
+                            error={true}
+                        />
+                    </Row>
+                </Section>
+
+                <Section vertical={true} horizontal={true}>
+                    <h3>Pill States</h3>
+                    <div style={{ display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "200px" }}>
+                        <ColorPicker
+                            value={color}
+                            name={"pill-normal"}
+                            onChange={(e) => { setColor(e.target.value); }}
+                            variant={"pill"}
+                            label={"Normal"}
+                        />
+
+                        <ColorPicker
+                            value={color}
+                            name={"pill-disabled"}
+                            onChange={(e) => { setColor(e.target.value); }}
+                            variant={"pill"}
+                            label={"Disabled"}
+                            disabled={true}
+                        />
+
+                        <ColorPicker
+                            value={color}
+                            name={"pill-readOnly"}
+                            onChange={(e) => { setColor(e.target.value); }}
+                            variant={"pill"}
+                            label={"Read only"}
+                            readOnly={true}
+                        />
+
+                        <ColorPicker
+                            value={color}
+                            name={"pill-error"}
+                            onChange={(e) => { setColor(e.target.value); }}
+                            variant={"pill"}
+                            label={"With Error"}
+                            error={true}
+                        />
+                    </div>
+                </Section>
+            </Container>
+        );
+    },
+};
+
+export default meta;
+
+export {
+    Basic,
+    PillVariant,
+    States,
+};

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

@@ -0,0 +1,69 @@
+import { styled } from "../../theme";
+
+// TODO pxToRem etc
+const ColorDisplay = 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",
+            },
+        },
+    },
+});
+
+const LabelWrapper = 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",
+    },
+
+});
+
+export {
+    LabelWrapper,
+    ColorDisplay,
+};

package/src/components/form/ColorPicker.tsx

@@ -0,0 +1,71 @@
+import React, { useCallback } from "react";
+
+import type { ThemeCSS } from "../../theme";
+
+import { contrastColor } from "../utils/colors";
+
+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;
+};
+
+/**
+ * ColorPicker component that uses native color input but with custom styling
+ */
+const ColorPicker: React.FC<Props> = ({
+    error,
+    css,
+    className,
+    variant,
+    label,
+    value = "transparent",
+    children, // just extract children, so they are not passed down to the input
+    onChange,
+    ...inputProps
+}) => {
+    const style: ThemeCSS = {
+        "--selected-color": value,
+        ...(value.startsWith("#") ? { color: contrastColor(value) } : {}),
+    };
+
+    const wrapperProps: { css?: NonNullable<typeof css>; className?: typeof className } = {
+        className: className,
+    };
+    if (css) {
+        wrapperProps.css = css;
+    }
+
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        if (inputProps.readOnly) {
+            return;
+        }
+        onChange?.(e);
+    }, [inputProps.readOnly, onChange]);
+
+    return (
+        <LabelWrapper {...wrapperProps} data-error={error}>
+            <input
+                type={"color"}
+                value={value}
+                onChange={handleChange}
+                {...inputProps}
+            />
+            <ColorDisplay css={style} variant={variant!}>
+                {label}
+            </ColorDisplay>
+        </LabelWrapper>
+    );
+};
+
+export { ColorPicker };

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

@@ -0,0 +1,66 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ICON, Icon } from "../icons/Icon";
+
+import { Input } from "./input/Input";
+import { Label } from "./Label";
+
+const meta: Meta<typeof Label> = {
+    title: "Components/Form/Label",
+    component: Label,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+};
+
+type Story = StoryObj<typeof meta>;
+
+const content = <Input placeholder={"ie: 500"} prefix={<Icon name={ICON.battery} />} suffix={"kWh"} />;
+
+const Default: Story = {
+    args: {
+        label: "Username",
+        children: content,
+    },
+};
+
+const BigVariant: Story = {
+    args: {
+        label: "Big Label",
+        variant: "big",
+        children: content,
+    },
+};
+
+const WithoutLabel: Story = {
+    args: {
+        children: content,
+    },
+};
+
+const MultipleLabels: Story = {
+    render: () => (
+        <div>
+            <Label label={"First name"}>
+                <Input placeholder={"John"} />
+            </Label>
+            <Label label={"Last name"}>
+                <Input placeholder={"Doe"} />
+            </Label>
+            <Label label={"Email"} variant={"big"}>
+                <Input placeholder={"john@example.com"} />
+            </Label>
+        </div>
+    ),
+};
+
+export {
+    Default,
+    BigVariant,
+    WithoutLabel,
+    MultipleLabels,
+};
+export default meta;

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

@@ -0,0 +1,27 @@
+import { styled, fontPxToRem, dimensionsPxToRem } from "../../theme";
+
+const StyledLabel = styled("label", {
+    "& + &": {
+        marginTop: dimensionsPxToRem(23),
+        display: "block",
+    },
+});
+
+const StyledText = styled("div", {
+    fontSize: fontPxToRem(28),
+    marginBottom: dimensionsPxToRem(24),
+    color: "$sub",
+
+    variants: {
+        variant: {
+            big: {
+                fontSize: fontPxToRem(34),
+            },
+        },
+    },
+});
+
+export {
+    StyledLabel,
+    StyledText,
+};