@chakra-ui/theme - npm Package Compare versions

Comparing version 3.1.2 to 3.2.0

dist/components/accordion.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -72,1 +73,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=accordion.js.map

dist/components/alert.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -149,1 +150,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=alert.js.map

dist/components/avatar.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -201,1 +202,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=avatar.js.map

dist/components/badge.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -93,1 +94,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=badge.js.map

dist/components/breadcrumb.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -58,1 +59,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=breadcrumb.js.map

dist/components/button.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -215,1 +216,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=button.js.map

dist/components/card.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -121,1 +122,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=card.js.map

dist/components/checkbox.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -127,1 +128,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=checkbox.js.map

dist/components/close-button.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -83,1 +84,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=close-button.js.map

dist/components/code.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -111,1 +112,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=code.js.map

dist/components/container.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -40,1 +41,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=container.js.map

dist/components/divider.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -52,1 +53,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=divider.js.map

dist/components/drawer.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -124,1 +125,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=drawer.js.map

dist/components/editable.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -65,1 +66,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=editable.js.map

dist/components/form-control.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -63,1 +64,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=form-control.js.map

dist/components/form-error.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -59,1 +60,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=form-error.js.map

dist/components/form-label.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -46,1 +47,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=form-label.js.map

dist/components/heading.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -76,1 +77,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=heading.js.map

dist/components/input.d.ts

@@ -5,4 +5,14 @@ import * as _chakra_ui_styled_system from '@chakra-ui/styled-system';
     baseStyle?: {
+        addon: {
+            height: string;
+            fontSize: string;
+            px: string;
+            borderRadius: string;
+        };
         field: {
             width: string;
+            height: string;
+            fontSize: string;
+            px: string;
+            borderRadius: string;
             minWidth: number;
@@ -23,12 +33,6 @@ outline: number;
             field: {
-                fontSize: string;
-                px: string;
-                h: string;
-                borderRadius: string;
+                [x: string]: string;
             };
-            addon: {
-                fontSize: string;
-                px: string;
-                h: string;
-                borderRadius: string;
+            group: {
+                [x: string]: string;
             };
@@ -38,12 +42,6 @@ };
             field: {
-                fontSize: string;
-                px: string;
-                h: string;
-                borderRadius: string;
+                [x: string]: string;
             };
-            addon: {
-                fontSize: string;
-                px: string;
-                h: string;
-                borderRadius: string;
+            group: {
+                [x: string]: string;
             };
@@ -53,12 +51,6 @@ };
             field: {
-                fontSize: string;
-                px: string;
-                h: string;
-                borderRadius: string;
+                [x: string]: string;
             };
-            addon: {
-                fontSize: string;
-                px: string;
-                h: string;
-                borderRadius: string;
+            group: {
+                [x: string]: string;
             };
@@ -68,12 +60,6 @@ };
             field: {
-                fontSize: string;
-                px: string;
-                h: string;
-                borderRadius: string;
+                [x: string]: string;
             };
-            addon: {
-                fontSize: string;
-                px: string;
-                h: string;
-                borderRadius: string;
+            group: {
+                [x: string]: string;
             };
@@ -183,5 +169,5 @@ };
     } | undefined;
-    parts: ("element" | "addon" | "field")[];
+    parts: ("element" | "group" | "addon" | "field")[];
 };
 
 export { inputTheme };

dist/components/input.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -30,5 +31,19 @@ var __defProp = Object.defineProperty;
 var { definePartsStyle, defineMultiStyleConfig } = (0, import_styled_system.createMultiStyleConfigHelpers)(import_anatomy.inputAnatomy.keys);
+var $height = (0, import_styled_system.cssVar)("input-height");
+var $fontSize = (0, import_styled_system.cssVar)("input-font-size");
+var $padding = (0, import_styled_system.cssVar)("input-padding");
+var $borderRadius = (0, import_styled_system.cssVar)("input-border-radius");
 var baseStyle = definePartsStyle({
+  addon: {
+    height: $height.reference,
+    fontSize: $fontSize.reference,
+    px: $padding.reference,
+    borderRadius: $borderRadius.reference
+  },
   field: {
     width: "100%",
+    height: $height.reference,
+    fontSize: $fontSize.reference,
+    px: $padding.reference,
+    borderRadius: $borderRadius.reference,
     minWidth: 0,
@@ -48,24 +63,24 @@ outline: 0,
   lg: (0, import_styled_system.defineStyle)({
-    fontSize: "lg",
-    px: "4",
-    h: "12",
-    borderRadius: "md"
+    [$fontSize.variable]: "fontSizes.lg",
+    [$padding.variable]: "space.4",
+    [$borderRadius.variable]: "radii.md",
+    [$height.variable]: "sizes.12"
   }),
   md: (0, import_styled_system.defineStyle)({
-    fontSize: "md",
-    px: "4",
-    h: "10",
-    borderRadius: "md"
+    [$fontSize.variable]: "fontSizes.md",
+    [$padding.variable]: "space.4",
+    [$borderRadius.variable]: "radii.md",
+    [$height.variable]: "sizes.10"
   }),
   sm: (0, import_styled_system.defineStyle)({
-    fontSize: "sm",
-    px: "3",
-    h: "8",
-    borderRadius: "sm"
+    [$fontSize.variable]: "fontSizes.sm",
+    [$padding.variable]: "space.3",
+    [$borderRadius.variable]: "radii.sm",
+    [$height.variable]: "sizes.8"
   }),
   xs: (0, import_styled_system.defineStyle)({
-    fontSize: "xs",
-    px: "2",
-    h: "6",
-    borderRadius: "sm"
+    [$fontSize.variable]: "fontSizes.xs",
+    [$padding.variable]: "space.2",
+    [$borderRadius.variable]: "radii.sm",
+    [$height.variable]: "sizes.6"
   })
@@ -76,15 +91,15 @@ };
     field: size.lg,
-    addon: size.lg
+    group: size.lg
   }),
   md: definePartsStyle({
     field: size.md,
-    addon: size.md
+    group: size.md
   }),
   sm: definePartsStyle({
     field: size.sm,
-    addon: size.sm
+    group: size.sm
   }),
   xs: definePartsStyle({
     field: size.xs,
-    addon: size.xs
+    group: size.xs
   })
@@ -115,9 +130,9 @@ };
       _invalid: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, ec),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, ec)}`
       },
       _focusVisible: {
         zIndex: 1,
-        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, fc),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, fc)}`
       }
@@ -148,7 +163,7 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, ec)
+        borderColor: (0, import_theme_tools.getColor)(theme, ec)
       },
       _focusVisible: {
         bg: "transparent",
-        borderColor: (0, import_theme_tools.getColorVar)(theme, fc)
+        borderColor: (0, import_theme_tools.getColor)(theme, fc)
       }
@@ -178,8 +193,8 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, ec),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, ec)}`
       },
       _focusVisible: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, fc),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, fc)}`
       }
@@ -227,1 +242,2 @@ },
 });
+//# sourceMappingURL=input.js.map

dist/components/kbd.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -50,1 +51,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=kbd.js.map

dist/components/link.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -49,1 +50,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=link.js.map

dist/components/list.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -44,1 +45,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=list.js.map

dist/components/menu.d.ts

@@ -67,2 +67,8 @@ import * as _chakra_ui_styled_system from '@chakra-ui/styled-system';
         };
+        icon: {
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            flexShrink: number;
+        };
         command: {
@@ -81,3 +87,3 @@ opacity: number;
         [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-            keys: ("button" | "item" | "list" | "groupTitle" | "command" | "divider")[];
+            keys: ("button" | "icon" | "item" | "list" | "groupTitle" | "command" | "divider")[];
         }>;
@@ -87,3 +93,3 @@ } | undefined;
         [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-            keys: ("button" | "item" | "list" | "groupTitle" | "command" | "divider")[];
+            keys: ("button" | "icon" | "item" | "list" | "groupTitle" | "command" | "divider")[];
         }>;
@@ -96,5 +102,5 @@ } | undefined;
     } | undefined;
-    parts: ("button" | "item" | "list" | "groupTitle" | "command" | "divider")[];
+    parts: ("button" | "icon" | "item" | "list" | "groupTitle" | "command" | "divider")[];
 };
 
 export { menuTheme };

dist/components/menu.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -83,2 +84,8 @@ var __defProp = Object.defineProperty;
 });
+var baseStyleIcon = (0, import_styled_system.defineStyle)({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+});
 var baseStyleCommand = (0, import_styled_system.defineStyle)({
@@ -103,2 +110,3 @@ opacity: 0.6
   groupTitle: baseStyleGroupTitle,
+  icon: baseStyleIcon,
   command: baseStyleCommand,
@@ -114,1 +122,2 @@ divider: baseStyleDivider
 });
+//# sourceMappingURL=menu.js.map

dist/components/modal.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -143,1 +144,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=modal.js.map

dist/components/number-input.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -98,5 +99,19 @@ var __defProp = Object.defineProperty;
 var { definePartsStyle, defineMultiStyleConfig } = (0, import_styled_system.createMultiStyleConfigHelpers)(import_anatomy.inputAnatomy.keys);
+var $height = (0, import_styled_system.cssVar)("input-height");
+var $fontSize = (0, import_styled_system.cssVar)("input-font-size");
+var $padding = (0, import_styled_system.cssVar)("input-padding");
+var $borderRadius = (0, import_styled_system.cssVar)("input-border-radius");
 var baseStyle = definePartsStyle({
+  addon: {
+    height: $height.reference,
+    fontSize: $fontSize.reference,
+    px: $padding.reference,
+    borderRadius: $borderRadius.reference
+  },
   field: {
     width: "100%",
+    height: $height.reference,
+    fontSize: $fontSize.reference,
+    px: $padding.reference,
+    borderRadius: $borderRadius.reference,
     minWidth: 0,
@@ -116,24 +131,24 @@ outline: 0,
   lg: (0, import_styled_system.defineStyle)({
-    fontSize: "lg",
-    px: "4",
-    h: "12",
-    borderRadius: "md"
+    [$fontSize.variable]: "fontSizes.lg",
+    [$padding.variable]: "space.4",
+    [$borderRadius.variable]: "radii.md",
+    [$height.variable]: "sizes.12"
   }),
   md: (0, import_styled_system.defineStyle)({
-    fontSize: "md",
-    px: "4",
-    h: "10",
-    borderRadius: "md"
+    [$fontSize.variable]: "fontSizes.md",
+    [$padding.variable]: "space.4",
+    [$borderRadius.variable]: "radii.md",
+    [$height.variable]: "sizes.10"
   }),
   sm: (0, import_styled_system.defineStyle)({
-    fontSize: "sm",
-    px: "3",
-    h: "8",
-    borderRadius: "sm"
+    [$fontSize.variable]: "fontSizes.sm",
+    [$padding.variable]: "space.3",
+    [$borderRadius.variable]: "radii.sm",
+    [$height.variable]: "sizes.8"
   }),
   xs: (0, import_styled_system.defineStyle)({
-    fontSize: "xs",
-    px: "2",
-    h: "6",
-    borderRadius: "sm"
+    [$fontSize.variable]: "fontSizes.xs",
+    [$padding.variable]: "space.2",
+    [$borderRadius.variable]: "radii.sm",
+    [$height.variable]: "sizes.6"
   })
@@ -144,15 +159,15 @@ };
     field: size.lg,
-    addon: size.lg
+    group: size.lg
   }),
   md: definePartsStyle({
     field: size.md,
-    addon: size.md
+    group: size.md
   }),
   sm: definePartsStyle({
     field: size.sm,
-    addon: size.sm
+    group: size.sm
   }),
   xs: definePartsStyle({
     field: size.xs,
-    addon: size.xs
+    group: size.xs
   })
@@ -183,9 +198,9 @@ };
       _invalid: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, ec),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, ec)}`
       },
       _focusVisible: {
         zIndex: 1,
-        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, fc),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, fc)}`
       }
@@ -216,7 +231,7 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, ec)
+        borderColor: (0, import_theme_tools.getColor)(theme, ec)
       },
       _focusVisible: {
         bg: "transparent",
-        borderColor: (0, import_theme_tools.getColorVar)(theme, fc)
+        borderColor: (0, import_theme_tools.getColor)(theme, fc)
       }
@@ -246,8 +261,8 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, ec),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, ec)}`
       },
       _focusVisible: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, fc),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, fc)}`
       }
@@ -396,1 +411,2 @@ },
 });
+//# sourceMappingURL=number-input.js.map

dist/components/pin-input.d.ts

@@ -7,2 +7,6 @@ import * as _chakra_ui_styled_system from '@chakra-ui/styled-system';
         width?: string | undefined;
+        height?: string | undefined;
+        fontSize?: string | undefined;
+        px?: string | undefined;
+        borderRadius?: string | undefined;
         minWidth?: number | undefined;
@@ -9,0 +13,0 @@ outline?: number | undefined;

dist/components/pin-input.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -33,5 +34,19 @@ var __defProp = Object.defineProperty;
 var { definePartsStyle, defineMultiStyleConfig } = (0, import_styled_system.createMultiStyleConfigHelpers)(import_anatomy.inputAnatomy.keys);
+var $height = (0, import_styled_system.cssVar)("input-height");
+var $fontSize = (0, import_styled_system.cssVar)("input-font-size");
+var $padding = (0, import_styled_system.cssVar)("input-padding");
+var $borderRadius = (0, import_styled_system.cssVar)("input-border-radius");
 var baseStyle = definePartsStyle({
+  addon: {
+    height: $height.reference,
+    fontSize: $fontSize.reference,
+    px: $padding.reference,
+    borderRadius: $borderRadius.reference
+  },
   field: {
     width: "100%",
+    height: $height.reference,
+    fontSize: $fontSize.reference,
+    px: $padding.reference,
+    borderRadius: $borderRadius.reference,
     minWidth: 0,
@@ -51,24 +66,24 @@ outline: 0,
   lg: (0, import_styled_system.defineStyle)({
-    fontSize: "lg",
-    px: "4",
-    h: "12",
-    borderRadius: "md"
+    [$fontSize.variable]: "fontSizes.lg",
+    [$padding.variable]: "space.4",
+    [$borderRadius.variable]: "radii.md",
+    [$height.variable]: "sizes.12"
   }),
   md: (0, import_styled_system.defineStyle)({
-    fontSize: "md",
-    px: "4",
-    h: "10",
-    borderRadius: "md"
+    [$fontSize.variable]: "fontSizes.md",
+    [$padding.variable]: "space.4",
+    [$borderRadius.variable]: "radii.md",
+    [$height.variable]: "sizes.10"
   }),
   sm: (0, import_styled_system.defineStyle)({
-    fontSize: "sm",
-    px: "3",
-    h: "8",
-    borderRadius: "sm"
+    [$fontSize.variable]: "fontSizes.sm",
+    [$padding.variable]: "space.3",
+    [$borderRadius.variable]: "radii.sm",
+    [$height.variable]: "sizes.8"
   }),
   xs: (0, import_styled_system.defineStyle)({
-    fontSize: "xs",
-    px: "2",
-    h: "6",
-    borderRadius: "sm"
+    [$fontSize.variable]: "fontSizes.xs",
+    [$padding.variable]: "space.2",
+    [$borderRadius.variable]: "radii.sm",
+    [$height.variable]: "sizes.6"
   })
@@ -79,15 +94,15 @@ };
     field: size.lg,
-    addon: size.lg
+    group: size.lg
   }),
   md: definePartsStyle({
     field: size.md,
-    addon: size.md
+    group: size.md
   }),
   sm: definePartsStyle({
     field: size.sm,
-    addon: size.sm
+    group: size.sm
   }),
   xs: definePartsStyle({
     field: size.xs,
-    addon: size.xs
+    group: size.xs
   })
@@ -118,9 +133,9 @@ };
       _invalid: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, ec),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, ec)}`
       },
       _focusVisible: {
         zIndex: 1,
-        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, fc),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, fc)}`
       }
@@ -151,7 +166,7 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, ec)
+        borderColor: (0, import_theme_tools.getColor)(theme, ec)
       },
       _focusVisible: {
         bg: "transparent",
-        borderColor: (0, import_theme_tools.getColorVar)(theme, fc)
+        borderColor: (0, import_theme_tools.getColor)(theme, fc)
       }
@@ -181,8 +196,8 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, ec),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, ec)}`
       },
       _focusVisible: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, fc),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, fc)}`
       }
@@ -297,1 +312,2 @@ },
 });
+//# sourceMappingURL=pin-input.js.map

dist/components/popover.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -90,1 +91,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=popover.js.map

dist/components/progress.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -40,3 +41,3 @@ var __defProp = Object.defineProperty;
     transparent 0%,
-    ${(0, import_theme_tools.getColorVar)(t, bgColor)} 50%,
+    ${(0, import_theme_tools.getColor)(t, bgColor)} 50%,
     transparent 100%
@@ -99,1 +100,2 @@ )`;
 });
+//# sourceMappingURL=progress.js.map

dist/components/radio.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -182,1 +183,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=radio.js.map

dist/components/select.d.ts

@@ -17,2 +17,6 @@ import * as _chakra_ui_styled_system from '@chakra-ui/styled-system';
             width?: string | undefined;
+            height?: string | undefined;
+            fontSize?: string | undefined;
+            px?: string | undefined;
+            borderRadius?: string | undefined;
             minWidth?: number | undefined;
@@ -44,12 +48,5 @@ outline?: number | undefined;
                 paddingInlineEnd: string;
-                fontSize?: string | undefined;
-                px?: string | undefined;
-                h?: string | undefined;
-                borderRadius?: string | undefined;
             };
-            addon?: {
-                fontSize: string;
-                px: string;
-                h: string;
-                borderRadius: string;
+            group?: {
+                [x: string]: string;
             } | undefined;
@@ -60,12 +57,5 @@ };
                 paddingInlineEnd: string;
-                fontSize?: string | undefined;
-                px?: string | undefined;
-                h?: string | undefined;
-                borderRadius?: string | undefined;
             };
-            addon?: {
-                fontSize: string;
-                px: string;
-                h: string;
-                borderRadius: string;
+            group?: {
+                [x: string]: string;
             } | undefined;
@@ -76,12 +66,5 @@ };
                 paddingInlineEnd: string;
-                fontSize?: string | undefined;
-                px?: string | undefined;
-                h?: string | undefined;
-                borderRadius?: string | undefined;
             };
-            addon?: {
-                fontSize: string;
-                px: string;
-                h: string;
-                borderRadius: string;
+            group?: {
+                [x: string]: string;
             } | undefined;
@@ -92,6 +75,2 @@ };
                 paddingInlineEnd: string;
-                fontSize?: string | undefined;
-                px?: string | undefined;
-                h?: string | undefined;
-                borderRadius?: string | undefined;
             };
@@ -101,7 +80,4 @@ icon: {
             };
-            addon?: {
-                fontSize: string;
-                px: string;
-                h: string;
-                borderRadius: string;
+            group?: {
+                [x: string]: string;
             } | undefined;
@@ -108,0 +84,0 @@ };

dist/components/select.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -34,5 +35,19 @@ var __defProp = Object.defineProperty;
 var { definePartsStyle, defineMultiStyleConfig } = (0, import_styled_system.createMultiStyleConfigHelpers)(import_anatomy.inputAnatomy.keys);
+var $height = (0, import_styled_system.cssVar)("input-height");
+var $fontSize = (0, import_styled_system.cssVar)("input-font-size");
+var $padding = (0, import_styled_system.cssVar)("input-padding");
+var $borderRadius = (0, import_styled_system.cssVar)("input-border-radius");
 var baseStyle = definePartsStyle({
+  addon: {
+    height: $height.reference,
+    fontSize: $fontSize.reference,
+    px: $padding.reference,
+    borderRadius: $borderRadius.reference
+  },
   field: {
     width: "100%",
+    height: $height.reference,
+    fontSize: $fontSize.reference,
+    px: $padding.reference,
+    borderRadius: $borderRadius.reference,
     minWidth: 0,
@@ -52,24 +67,24 @@ outline: 0,
   lg: (0, import_styled_system.defineStyle)({
-    fontSize: "lg",
-    px: "4",
-    h: "12",
-    borderRadius: "md"
+    [$fontSize.variable]: "fontSizes.lg",
+    [$padding.variable]: "space.4",
+    [$borderRadius.variable]: "radii.md",
+    [$height.variable]: "sizes.12"
   }),
   md: (0, import_styled_system.defineStyle)({
-    fontSize: "md",
-    px: "4",
-    h: "10",
-    borderRadius: "md"
+    [$fontSize.variable]: "fontSizes.md",
+    [$padding.variable]: "space.4",
+    [$borderRadius.variable]: "radii.md",
+    [$height.variable]: "sizes.10"
   }),
   sm: (0, import_styled_system.defineStyle)({
-    fontSize: "sm",
-    px: "3",
-    h: "8",
-    borderRadius: "sm"
+    [$fontSize.variable]: "fontSizes.sm",
+    [$padding.variable]: "space.3",
+    [$borderRadius.variable]: "radii.sm",
+    [$height.variable]: "sizes.8"
   }),
   xs: (0, import_styled_system.defineStyle)({
-    fontSize: "xs",
-    px: "2",
-    h: "6",
-    borderRadius: "sm"
+    [$fontSize.variable]: "fontSizes.xs",
+    [$padding.variable]: "space.2",
+    [$borderRadius.variable]: "radii.sm",
+    [$height.variable]: "sizes.6"
   })
@@ -80,15 +95,15 @@ };
     field: size.lg,
-    addon: size.lg
+    group: size.lg
   }),
   md: definePartsStyle({
     field: size.md,
-    addon: size.md
+    group: size.md
   }),
   sm: definePartsStyle({
     field: size.sm,
-    addon: size.sm
+    group: size.sm
   }),
   xs: definePartsStyle({
     field: size.xs,
-    addon: size.xs
+    group: size.xs
   })
@@ -119,9 +134,9 @@ };
       _invalid: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, ec),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, ec)}`
       },
       _focusVisible: {
         zIndex: 1,
-        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, fc),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, fc)}`
       }
@@ -152,7 +167,7 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, ec)
+        borderColor: (0, import_theme_tools.getColor)(theme, ec)
       },
       _focusVisible: {
         bg: "transparent",
-        borderColor: (0, import_theme_tools.getColorVar)(theme, fc)
+        borderColor: (0, import_theme_tools.getColor)(theme, fc)
       }
@@ -182,8 +197,8 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, ec),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, ec)}`
       },
       _focusVisible: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, fc),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, fc)}`
       }
@@ -308,1 +323,2 @@ },
 });
+//# sourceMappingURL=select.js.map

dist/components/skeleton.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -48,1 +49,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=skeleton.js.map

dist/components/skip-link.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -51,1 +52,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=skip-link.js.map

dist/components/slider.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -171,1 +172,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=slider.js.map

dist/components/spinner.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -61,1 +62,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=spinner.js.map

dist/components/stat.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -71,1 +72,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=stat.js.map

dist/components/stepper.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -175,1 +176,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=stepper.js.map

dist/components/switch.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -119,1 +120,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=switch.js.map

dist/components/table.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -199,1 +200,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=table.js.map

dist/components/tabs.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -257,1 +258,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=tabs.js.map

dist/components/tag.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -217,1 +218,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=tag.js.map

dist/components/textarea.d.ts

@@ -10,2 +10,6 @@ import * as _chakra_ui_styled_system from '@chakra-ui/styled-system';
         width?: string | undefined;
+        height?: string | undefined;
+        fontSize?: string | undefined;
+        px?: string | undefined;
+        borderRadius?: string | undefined;
         minWidth?: number | undefined;
@@ -23,6 +27,14 @@ outline?: number | undefined;
     sizes?: {
-        xs: {};
-        sm: {};
-        md: {};
-        lg: {};
+        xs: {
+            [x: string]: string;
+        };
+        sm: {
+            [x: string]: string;
+        };
+        md: {
+            [x: string]: string;
+        };
+        lg: {
+            [x: string]: string;
+        };
     } | undefined;
@@ -29,0 +41,0 @@ variants?: {

dist/components/textarea.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -33,5 +34,19 @@ var __defProp = Object.defineProperty;
 var { definePartsStyle, defineMultiStyleConfig } = (0, import_styled_system.createMultiStyleConfigHelpers)(import_anatomy.inputAnatomy.keys);
+var $height = (0, import_styled_system.cssVar)("input-height");
+var $fontSize = (0, import_styled_system.cssVar)("input-font-size");
+var $padding = (0, import_styled_system.cssVar)("input-padding");
+var $borderRadius = (0, import_styled_system.cssVar)("input-border-radius");
 var baseStyle = definePartsStyle({
+  addon: {
+    height: $height.reference,
+    fontSize: $fontSize.reference,
+    px: $padding.reference,
+    borderRadius: $borderRadius.reference
+  },
   field: {
     width: "100%",
+    height: $height.reference,
+    fontSize: $fontSize.reference,
+    px: $padding.reference,
+    borderRadius: $borderRadius.reference,
     minWidth: 0,
@@ -51,24 +66,24 @@ outline: 0,
   lg: (0, import_styled_system.defineStyle)({
-    fontSize: "lg",
-    px: "4",
-    h: "12",
-    borderRadius: "md"
+    [$fontSize.variable]: "fontSizes.lg",
+    [$padding.variable]: "space.4",
+    [$borderRadius.variable]: "radii.md",
+    [$height.variable]: "sizes.12"
   }),
   md: (0, import_styled_system.defineStyle)({
-    fontSize: "md",
-    px: "4",
-    h: "10",
-    borderRadius: "md"
+    [$fontSize.variable]: "fontSizes.md",
+    [$padding.variable]: "space.4",
+    [$borderRadius.variable]: "radii.md",
+    [$height.variable]: "sizes.10"
   }),
   sm: (0, import_styled_system.defineStyle)({
-    fontSize: "sm",
-    px: "3",
-    h: "8",
-    borderRadius: "sm"
+    [$fontSize.variable]: "fontSizes.sm",
+    [$padding.variable]: "space.3",
+    [$borderRadius.variable]: "radii.sm",
+    [$height.variable]: "sizes.8"
   }),
   xs: (0, import_styled_system.defineStyle)({
-    fontSize: "xs",
-    px: "2",
-    h: "6",
-    borderRadius: "sm"
+    [$fontSize.variable]: "fontSizes.xs",
+    [$padding.variable]: "space.2",
+    [$borderRadius.variable]: "radii.sm",
+    [$height.variable]: "sizes.6"
   })
@@ -79,15 +94,15 @@ };
     field: size.lg,
-    addon: size.lg
+    group: size.lg
   }),
   md: definePartsStyle({
     field: size.md,
-    addon: size.md
+    group: size.md
   }),
   sm: definePartsStyle({
     field: size.sm,
-    addon: size.sm
+    group: size.sm
   }),
   xs: definePartsStyle({
     field: size.xs,
-    addon: size.xs
+    group: size.xs
   })
@@ -118,9 +133,9 @@ };
       _invalid: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, ec),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, ec)}`
       },
       _focusVisible: {
         zIndex: 1,
-        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, fc),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, fc)}`
       }
@@ -151,7 +166,7 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, ec)
+        borderColor: (0, import_theme_tools.getColor)(theme, ec)
       },
       _focusVisible: {
         bg: "transparent",
-        borderColor: (0, import_theme_tools.getColorVar)(theme, fc)
+        borderColor: (0, import_theme_tools.getColor)(theme, fc)
       }
@@ -181,8 +196,8 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, ec),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, ec)}`
       },
       _focusVisible: {
-        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColor)(theme, fc),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, fc)}`
       }
@@ -278,1 +293,2 @@ },
 });
+//# sourceMappingURL=textarea.js.map

dist/components/tooltip.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -57,1 +58,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=tooltip.js.map

dist/foundations/blur.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -37,3 +38,2 @@ var __defProp = Object.defineProperty;
 var blur_default = blur;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
+//# sourceMappingURL=blur.js.map

dist/foundations/borders.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -34,3 +35,2 @@ var __defProp = Object.defineProperty;
 var borders_default = borders;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
+//# sourceMappingURL=borders.js.map

dist/foundations/breakpoints.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -35,3 +36,2 @@ var __defProp = Object.defineProperty;
 var breakpoints_default = breakpoints;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
+//# sourceMappingURL=breakpoints.js.map

dist/foundations/colors.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -249,3 +250,2 @@ var __defProp = Object.defineProperty;
 var colors_default = colors;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
+//# sourceMappingURL=colors.js.map

dist/foundations/index.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -515,1 +516,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=index.js.map

dist/foundations/radius.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -38,3 +39,2 @@ var __defProp = Object.defineProperty;
 var radius_default = radii;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
+//# sourceMappingURL=radius.js.map

dist/foundations/shadows.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -40,3 +41,2 @@ var __defProp = Object.defineProperty;
 var shadows_default = shadows;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
+//# sourceMappingURL=shadows.js.map

dist/foundations/sizes.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -97,3 +98,2 @@ var __defProp = Object.defineProperty;
 var sizes_default = sizes;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
+//# sourceMappingURL=sizes.js.map

dist/foundations/spacing.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -65,1 +66,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=spacing.js.map

dist/foundations/transition.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -53,3 +54,2 @@ var __defProp = Object.defineProperty;
 var transition_default = transition;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
+//# sourceMappingURL=transition.js.map

dist/foundations/typography.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -87,3 +88,2 @@ var __defProp = Object.defineProperty;
 var typography_default = typography;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
+//# sourceMappingURL=typography.js.map

dist/foundations/z-index.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -42,3 +43,2 @@ var __defProp = Object.defineProperty;
 var z_index_default = zIndices;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
+//# sourceMappingURL=z-index.js.map

dist/semantic-tokens.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -41,1 +42,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=semantic-tokens.js.map

dist/styles.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -48,1 +49,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=styles.js.map

dist/theme.types.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -19,1 +20,2 @@ var __defProp = Object.defineProperty;
 module.exports = __toCommonJS(theme_types_exports);
+//# sourceMappingURL=theme.types.js.map

dist/utils/is-chakra-theme.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -61,1 +62,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=is-chakra-theme.js.map

dist/utils/run-if-fn.js

@@ -0,1 +1,2 @@
+'use client'
 "use strict";
@@ -34,1 +35,2 @@ var __defProp = Object.defineProperty;
 });
+//# sourceMappingURL=run-if-fn.js.map

package.json

 {
   "name": "@chakra-ui/theme",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "The default theme for chakra components",
@@ -31,4 +31,4 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/anatomy": "2.1.2",
-    "@chakra-ui/theme-tools": "2.0.18",
+    "@chakra-ui/anatomy": "2.2.0",
+    "@chakra-ui/theme-tools": "2.1.0",
     "@chakra-ui/shared-utils": "2.0.5"
@@ -44,10 +44,2 @@ },
   },
-  "tsup": {
-    "clean": true,
-    "target": "es2019",
-    "format": [
-      "cjs",
-      "esm"
-    ]
-  },
   "module": "dist/index.mjs",
@@ -54,0 +46,0 @@ "types": "dist/index.d.ts",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1677243

increased by86.33%

Number of package files

428

increased by73.98%

Lines of code

31521

increased by0.82%

Published versions last months

13

increased byInfinity%

Published versions last two months

13

increased byInfinity%

Published versions last week

13

increased byInfinity%

Published versions last year

37

increased by54.17%

Dependency changes

• + Added@chakra-ui/anatomy@2.2.0(transitive)

• + Added@chakra-ui/theme-tools@2.1.0(transitive)

• - Removed@chakra-ui/anatomy@2.1.2(transitive)

• - Removed@chakra-ui/theme-tools@2.0.18(transitive)

• Updated@chakra-ui/anatomy@2.2.0

• Updated@chakra-ui/theme-tools@2.1.0