@bitrise/bitkit-v2 0.3.424 → 0.3.425

package/dist/theme/slot-recipes/index.d.ts

@@ -527,10 +527,10 @@ declare const slotRecipes: {
                 input: {
                     paddingInlineEnd: "96";
                     lineHeight: "normal";
-                    paddingInline: string;
-                    paddingBlock: string;
+                    paddingInline: `${number}rem`;
+                    paddingBlock: `${number}rem`;
                     textStyle: "body/md/regular";
-                    '--input-height': string;
+                    '--input-height': `${number}rem`;
                 };
             };
             lg: {
@@ -549,10 +549,10 @@ declare const slotRecipes: {
                 input: {
                     paddingInlineEnd: "96";
                     lineHeight: "normal";
-                    paddingInline: string;
-                    paddingBlock: string;
+                    paddingInline: `${number}rem`;
+                    paddingBlock: `${number}rem`;
                     textStyle: "body/lg/regular";
-                    '--input-height': string;
+                    '--input-height': `${number}rem`;
                 };
             };
         };
@@ -612,8 +612,8 @@ declare const slotRecipes: {
                     paddingBlock: "6";
                     textStyle?: "body/md/regular" | undefined;
                     '&:has([data-slot="avatar"])'?: {
-                        paddingBlock: string;
-                        paddingInlineStart: string;
+                        paddingBlock: `${number}rem`;
+                        paddingInlineStart: `${number}rem`;
                     } | undefined;
                 };
                 indicator: {
@@ -647,7 +647,7 @@ declare const slotRecipes: {
                     };
                 } | undefined;
                 itemList?: {
-                    maxHeight: string;
+                    maxHeight: `${number}rem`;
                 } | undefined;
                 itemLabel?: {
                     textStyle: "body/md/regular";
@@ -734,7 +734,7 @@ declare const slotRecipes: {
                 content: {
                     width: {
                         base: "100%";
-                        tablet: string;
+                        tablet: `${number}rem`;
                     };
                 };
             };
@@ -742,7 +742,7 @@ declare const slotRecipes: {
                 content: {
                     width: {
                         base: "100%";
-                        tablet: string;
+                        tablet: `${number}rem`;
                     };
                 };
             };
@@ -750,7 +750,7 @@ declare const slotRecipes: {
                 content: {
                     width: {
                         base: "100%";
-                        tablet: string;
+                        tablet: `${number}rem`;
                     };
                 };
             };
@@ -882,13 +882,13 @@ declare const slotRecipes: {
         variant: {
             docked: {
                 closeTrigger: {
-                    insetEnd: string;
+                    insetEnd: `${number}rem`;
                     top: "12";
                 };
                 content: {
                     width: {
                         base: "100vw";
-                        tablet: string;
+                        tablet: `${number}rem`;
                     };
                 };
             };
@@ -906,7 +906,7 @@ declare const slotRecipes: {
                 content: {
                     borderRadius: "12";
                     boxShadow: "elevation/lg";
-                    maxWidth: string;
+                    maxWidth: `${number}rem`;
                 };
                 header: {
                     paddingBlockEnd: "16";
@@ -971,7 +971,7 @@ declare const slotRecipes: {
         variant: {
             image: {
                 root: {
-                    height: string;
+                    height: `${number}rem`;
                 };
             };
         };
@@ -1145,14 +1145,14 @@ declare const slotRecipes: {
             lg: {
                 overlay: {
                     minHeight: "48";
-                    paddingBlock: string;
+                    paddingBlock: `${number}rem`;
                 };
                 trigger: {
                     textStyle: "body/lg/regular";
                 };
                 placeholderText: {
                     textStyle: "body/lg/regular";
-                    lineHeight: string;
+                    lineHeight: `${number}rem`;
                 };
             };
             md: {
@@ -1161,9 +1161,9 @@ declare const slotRecipes: {
                 };
                 overlay: {
                     minHeight: "40";
-                    paddingBlock: string;
+                    paddingBlock: `${number}rem`;
                     '&:has([data-slot="tag"])': {
-                        paddingInlineStart: string;
+                        paddingInlineStart: `${number}rem`;
                     };
                 };
                 trigger: {
@@ -1171,7 +1171,7 @@ declare const slotRecipes: {
                 };
                 placeholderText: {
                     textStyle: "body/md/regular";
-                    lineHeight: string;
+                    lineHeight: `${number}rem`;
                 };
             };
         };
@@ -1283,15 +1283,15 @@ declare const slotRecipes: {
         size: {
             md: {
                 field: {
-                    paddingInline: string;
-                    paddingBlock: string;
+                    paddingInline: `${number}rem`;
+                    paddingBlock: `${number}rem`;
                     textStyle: "body/md/regular";
                 };
             };
             lg: {
                 field: {
-                    paddingInline: string;
-                    paddingBlock: string;
+                    paddingInline: `${number}rem`;
+                    paddingBlock: `${number}rem`;
                     textStyle: "body/lg/regular";
                 };
             };
@@ -1301,24 +1301,24 @@ declare const slotRecipes: {
         size: {
             md: {
                 input: {
-                    paddingInline: string;
-                    paddingBlock: string;
+                    paddingInline: `${number}rem`;
+                    paddingBlock: `${number}rem`;
                     textStyle: "body/md/regular";
-                    '--input-height': string;
+                    '--input-height': `${number}rem`;
                 } | undefined;
                 control: {
-                    '--stepper-width': string;
+                    '--stepper-width': `${number}rem`;
                 };
             };
             lg: {
                 input: {
-                    paddingInline: string;
-                    paddingBlock: string;
+                    paddingInline: `${number}rem`;
+                    paddingBlock: `${number}rem`;
                     textStyle: "body/lg/regular";
-                    '--input-height': string;
+                    '--input-height': `${number}rem`;
                 } | undefined;
                 control: {
-                    '--stepper-width': string;
+                    '--stepper-width': `${number}rem`;
                 };
             };
         };
@@ -1364,7 +1364,7 @@ declare const slotRecipes: {
                 root: {
                     paddingInlineEnd: {
                         base: "16";
-                        tablet: string;
+                        tablet: `${number}rem`;
                     };
                     position: {
                         tablet: "relative";
@@ -1480,7 +1480,7 @@ declare const slotRecipes: {
                         readonly alignItems: "center";
                         readonly flexDirection: "row";
                         readonly gap: "24";
-                        readonly minHeight: string;
+                        readonly minHeight: `${number}rem`;
                         readonly paddingBlockEnd: "12";
                         readonly paddingBlockStart: "12";
                         readonly paddingInlineEnd: "32";
@@ -1557,7 +1557,7 @@ declare const slotRecipes: {
                         readonly alignItems: "center";
                         readonly flexDirection: "row";
                         readonly gap: "24";
-                        readonly minHeight: string;
+                        readonly minHeight: `${number}rem`;
                         readonly paddingBlockEnd: "12";
                         readonly paddingBlockStart: "12";
                         readonly paddingInlineEnd: "32";
@@ -1619,6 +1619,17 @@ declare const slotRecipes: {
                 };
             };
         };
+        isCentered: {
+            true: {
+                headerBlock: {
+                    marginInline: "auto";
+                    tablet: {
+                        paddingInlineStart: "32";
+                    };
+                };
+            };
+            false: {};
+        };
     }>;
     pageSidebar: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "title" | "root" | "item" | "titleText" | "suffixIcon" | "titleBlock" | "itemLabel" | "itemIcon" | "contentBlock" | "divider" | "project" | "projectLabel" | "projectValue" | "projectValueWrapper" | "selectionMarker", {
         hasBack: {
@@ -1743,7 +1754,7 @@ declare const slotRecipes: {
             md: {
                 root: {
                     gap: "24";
-                    minHeight: string;
+                    minHeight: `${number}rem`;
                 };
                 counter: {
                     textStyle: "body/md/regular";
@@ -1907,7 +1918,7 @@ declare const slotRecipes: {
             md: {
                 badge: {
                     paddingBlock: "2";
-                    width: string;
+                    width: `${number}rem`;
                 };
                 itemControl: {
                     width: "20";
@@ -2053,8 +2064,8 @@ declare const slotRecipes: {
             lg: {
                 trigger: {
                     '&:has([data-slot="avatar"])': {
-                        paddingBlock: string;
-                        paddingInlineStart: string;
+                        paddingBlock: `${number}rem`;
+                        paddingInlineStart: `${number}rem`;
                     };
                 };
                 checkbox: {
@@ -2082,7 +2093,7 @@ declare const slotRecipes: {
                     };
                 };
                 itemList: {
-                    maxHeight: string;
+                    maxHeight: `${number}rem`;
                 };
                 itemLabel: {
                     textStyle: "body/lg/regular";
@@ -2101,7 +2112,7 @@ declare const slotRecipes: {
                     lineHeight: "normal";
                 };
                 searchInputGroup: {
-                    height: string;
+                    height: `${number}rem`;
                     paddingBlock: "16";
                 };
                 searchInput: {
@@ -2141,7 +2152,7 @@ declare const slotRecipes: {
                     };
                 };
                 itemList: {
-                    maxHeight: string;
+                    maxHeight: `${number}rem`;
                 };
                 itemLabel: {
                     textStyle: "body/md/regular";
@@ -2161,10 +2172,10 @@ declare const slotRecipes: {
                 };
                 trigger: {
                     textStyle: "body/md/regular";
-                    paddingBlock: string;
+                    paddingBlock: `${number}rem`;
                     '&:has([data-slot="avatar"])': {
-                        paddingBlock: string;
-                        paddingInlineStart: string;
+                        paddingBlock: `${number}rem`;
+                        paddingInlineStart: `${number}rem`;
                     };
                 };
                 searchInputGroup: {
@@ -2342,9 +2353,9 @@ declare const slotRecipes: {
         size: {
             md: {
                 root: {
-                    '--switch-width': string;
-                    '--switch-height': string;
-                    '--switch-indicator-font-size': string;
+                    '--switch-width': `${number}rem`;
+                    '--switch-height': `${number}rem`;
+                    '--switch-indicator-font-size': `${number}rem`;
                 };
                 control: {
                     borderRadius: "8";
@@ -2355,9 +2366,9 @@ declare const slotRecipes: {
             };
             lg: {
                 root: {
-                    '--switch-width': string;
-                    '--switch-height': string;
-                    '--switch-indicator-font-size': string;
+                    '--switch-width': `${number}rem`;
+                    '--switch-height': `${number}rem`;
+                    '--switch-indicator-font-size': `${number}rem`;
                 };
                 control: {
                     borderRadius: "12";
@@ -2445,7 +2456,7 @@ declare const slotRecipes: {
             };
             md: {
                 cell: {
-                    height: string;
+                    height: `${number}rem`;
                 };
             };
             lg: {
@@ -2589,7 +2600,7 @@ declare const slotRecipes: {
                     alignItems: "center";
                     gap: "8";
                     paddingBlockStart: "12";
-                    paddingBlockEnd: string;
+                    paddingBlockEnd: `${number}rem`;
                     borderBlockEnd: "2px solid transparent";
                     _selected: {
                         color: "text/primary";
@@ -2607,7 +2618,7 @@ declare const slotRecipes: {
                     textStyle: "body/lg/semibold";
                     paddingInline: "16";
                     paddingBlockStart: "12";
-                    paddingBlockEnd: string;
+                    paddingBlockEnd: `${number}rem`;
                     borderBlockEnd: "2px solid transparent";
                     _hover: {
                         backgroundColor: "background/hover";
@@ -2621,7 +2632,7 @@ declare const slotRecipes: {
             };
             contained: {
                 trigger: {
-                    paddingBlockStart: string;
+                    paddingBlockStart: `${number}rem`;
                     paddingBlockEnd: "12";
                     backgroundColor: "background/tertiary";
                     borderBlockStart: "2px solid transparent";
@@ -2843,7 +2854,7 @@ declare const slotRecipes: {
                     height: "32";
                     paddingInline: "6";
                     '&:has(button)': {
-                        paddingInlineEnd: string;
+                        paddingInlineEnd: `${number}rem`;
                     };
                 };
                 startElement: {
@@ -2900,8 +2911,8 @@ declare const slotRecipes: {
             md: {
                 field: {
                     gap: "8";
-                    paddingInline: string;
-                    '--input-height': string;
+                    paddingInline: `${number}rem`;
+                    '--input-height': `${number}rem`;
                 };
                 input: {
                     textStyle: "body/md/regular";
@@ -2910,8 +2921,8 @@ declare const slotRecipes: {
             lg: {
                 field: {
                     gap: "8";
-                    paddingInline: string;
-                    '--input-height': string;
+                    paddingInline: `${number}rem`;
+                    '--input-height': `${number}rem`;
                     '&:has(input[type="search"])': {
                         gap: "12";
                     };
@@ -3067,7 +3078,7 @@ declare const slotRecipes: {
                     paddingBlock: "6";
                 };
                 suffixGroup: {
-                    height: string;
+                    height: `${number}rem`;
                     '& > span': {
                         marginBlockEnd: "-1";
                     };
@@ -3125,7 +3136,7 @@ declare const slotRecipes: {
                     };
                     '& > svg': {
                         color: "icon/secondary";
-                        marginBlockStart: string;
+                        marginBlockStart: `${number}rem`;
                     };
                     _selected: {
                         '&::after': {
@@ -3161,7 +3172,7 @@ declare const slotRecipes: {
                     paddingBlock: "8";
                 };
                 suffixGroup: {
-                    height: string;
+                    height: `${number}rem`;
                     '& > span': {
                         marginBlockEnd: "-1";
                     };

package/dist/theme/themeUtils.d.ts

@@ -4,7 +4,7 @@ export declare function withSlashes(object: Record<string, any>): Record<string,
 /**
  *
  * @param input Value in pixels
- * @returns Value in rems
+ * @returns Value in rems, typed precisely enough to satisfy props that take a `${number}rem`
  */
-export declare const rem: (input: number) => string;
+export declare const rem: (input: number) => `${number}rem`;
 export declare const getTextStyle: (as: TextProps["as"]) => string | undefined;

package/dist/theme/themeUtils.js

@@ -24,7 +24,7 @@ function withSlashes(object) {
 /**
 *
 * @param input Value in pixels
-* @returns Value in rems
+* @returns Value in rems, typed precisely enough to satisfy props that take a `${number}rem`
 */
 var rem = (input) => {
 	return `${input / 16}rem`;

package/dist/theme/themeUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"themeUtils.js","names":[],"sources":["../../lib/theme/themeUtils.ts"],"sourcesContent":["import { type TextProps } from '@chakra-ui/react/text';\nimport { isPlainObject } from 'es-toolkit';\n\n// Based on https://github.com/toss/es-toolkit/blob/main/src/object/flattenObject.ts\nexport const flattenTokens = (object: object, prefix: string = ''): Record<string, any> => {\n  const result: Record<string, any> = {};\n  const keys = Object.keys(object);\n\n  for (let i = 0; i < keys.length; i++) {\n    const key = keys[i];\n    const value = (object as any)[key];\n\n    const prefixedKey = prefix ? `${prefix}/${key}` : key;\n\n    if (isPlainObject(value) && Object.keys(value).length > 0 && Object.keys(value)[0] !== 'value') {\n      Object.assign(result, flattenTokens(value, prefixedKey));\n      continue;\n    }\n\n    result[prefixedKey] = value;\n  }\n\n  return result;\n};\n\nexport function withSlashes(object: Record<string, any>): Record<string, any> {\n  return {\n    ...object,\n    ...flattenTokens(object),\n  };\n}\n\n/**\n *\n * @param input Value in pixels\n * @returns Value in rems\n */\nexport const rem = (input: number): string => {\n  return `${input / 16}rem`;\n};\n\nexport const getTextStyle = (as: TextProps['as']) => {\n  if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(as as string)) {\n    return `heading/${as}`;\n  }\n  return undefined;\n};\n"],"mappings":";;AAIA,IAAa,iBAAiB,QAAgB,SAAiB,OAA4B;CACzF,MAAM,SAA8B,CAAC;CACrC,MAAM,OAAO,OAAO,KAAK,MAAM;CAE/B,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,MAAM,MAAM,KAAK;EACjB,MAAM,QAAS,OAAe;EAE9B,MAAM,cAAc,SAAS,GAAG,OAAO,GAAG,QAAQ;EAElD,IAAI,cAAc,KAAK,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,OAAO,SAAS;GAC9F,OAAO,OAAO,QAAQ,cAAc,OAAO,WAAW,CAAC;GACvD;EACF;EAEA,OAAO,eAAe;CACxB;CAEA,OAAO;AACT;AAEA,SAAgB,YAAY,QAAkD;CAC5E,OAAO;EACL,GAAG;EACH,GAAG,cAAc,MAAM;CACzB;AACF;;;;;;AAOA,IAAa,OAAO,UAA0B;CAC5C,OAAO,GAAG,QAAQ,GAAG;AACvB"}
+{"version":3,"file":"themeUtils.js","names":[],"sources":["../../lib/theme/themeUtils.ts"],"sourcesContent":["import { type TextProps } from '@chakra-ui/react/text';\nimport { isPlainObject } from 'es-toolkit';\n\n// Based on https://github.com/toss/es-toolkit/blob/main/src/object/flattenObject.ts\nexport const flattenTokens = (object: object, prefix: string = ''): Record<string, any> => {\n  const result: Record<string, any> = {};\n  const keys = Object.keys(object);\n\n  for (let i = 0; i < keys.length; i++) {\n    const key = keys[i];\n    const value = (object as any)[key];\n\n    const prefixedKey = prefix ? `${prefix}/${key}` : key;\n\n    if (isPlainObject(value) && Object.keys(value).length > 0 && Object.keys(value)[0] !== 'value') {\n      Object.assign(result, flattenTokens(value, prefixedKey));\n      continue;\n    }\n\n    result[prefixedKey] = value;\n  }\n\n  return result;\n};\n\nexport function withSlashes(object: Record<string, any>): Record<string, any> {\n  return {\n    ...object,\n    ...flattenTokens(object),\n  };\n}\n\n/**\n *\n * @param input Value in pixels\n * @returns Value in rems, typed precisely enough to satisfy props that take a `${number}rem`\n */\nexport const rem = (input: number): `${number}rem` => {\n  return `${input / 16}rem`;\n};\n\nexport const getTextStyle = (as: TextProps['as']) => {\n  if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(as as string)) {\n    return `heading/${as}`;\n  }\n  return undefined;\n};\n"],"mappings":";;AAIA,IAAa,iBAAiB,QAAgB,SAAiB,OAA4B;CACzF,MAAM,SAA8B,CAAC;CACrC,MAAM,OAAO,OAAO,KAAK,MAAM;CAE/B,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,MAAM,MAAM,KAAK;EACjB,MAAM,QAAS,OAAe;EAE9B,MAAM,cAAc,SAAS,GAAG,OAAO,GAAG,QAAQ;EAElD,IAAI,cAAc,KAAK,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,OAAO,SAAS;GAC9F,OAAO,OAAO,QAAQ,cAAc,OAAO,WAAW,CAAC;GACvD;EACF;EAEA,OAAO,eAAe;CACxB;CAEA,OAAO;AACT;AAEA,SAAgB,YAAY,QAAkD;CAC5E,OAAO;EACL,GAAG;EACH,GAAG,cAAc,MAAM;CACzB;AACF;;;;;;AAOA,IAAa,OAAO,UAAkC;CACpD,OAAO,GAAG,QAAQ,GAAG;AACvB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.424",
+  "version": "0.3.425",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",