@bitrise/bitkit 13.126.1-alpha.0 → 13.127.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.126.1-alpha.0",
+  "version": "13.127.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -40,8 +40,8 @@
     "@fontsource/source-code-pro": "^5.0.18",
     "framer-motion": "^11.3.6",
     "luxon": "^3.4.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-focus-lock": "^2.12.1",
     "react-imask": "^7.6.1",
     "react-markdown": "^9.0.1"

package/src/Components/Toggle/ToggleComponent.tsx

@@ -1,4 +1,4 @@
-import { Switch, SwitchProps, useMultiStyleConfig } from '@chakra-ui/react';
+import { forwardRef, Switch, SwitchProps, useMultiStyleConfig } from '@chakra-ui/react';
 import Skeleton from '../Skeleton/Skeleton';
 import SkeletonBox from '../Skeleton/SkeletonBox';
 import Badge from '../Badge/Badge';
@@ -7,7 +7,7 @@ export interface ToggleComponentProps extends SwitchProps {
   size?: 'md' | 'sm';
   isLoading?: boolean;
 }
-const ToggleComponent = (props: ToggleComponentProps) => {
+const ToggleComponent = forwardRef<ToggleComponentProps, 'input'>((props, ref) => {
   const { isLoading, isReadOnly, isChecked, ...rest } = props;
   const { skeleton } = useMultiStyleConfig('Switch', props);
   if (isLoading) {
@@ -37,7 +37,7 @@ const ToggleComponent = (props: ToggleComponentProps) => {
       </Badge>
     );
   }
-  return <Switch isReadOnly={isReadOnly} isChecked={isChecked} {...rest} />;
-};
+  return <Switch ref={ref} isReadOnly={isReadOnly} isChecked={isChecked} {...rest} />;
+});
 
 export default ToggleComponent;

package/src/tokens/tokensToTheme.json

@@ -289,7 +289,7 @@
           "subtle": "pal.neutral.93",
           "minimal": "pal.neutral.95",
           "disabled": "pal.neutral.95",
-          "transparent": "{color.pal.neutral.100} 0%"
+          "transparent": "pal.neutral.100 0%"
         },
         "border": {
           "minimal": "pal.neutral.93",
@@ -520,9 +520,9 @@
         },
         "toggle": {
           "frameOn": "sys.success.bold",
-          "frameOn-disabled": "rbga(78, 183, 108, 0.5)",
+          "frameOn-disabled": "rgba(78, 183, 108, 0.5)",
           "frameOff": "sys.neutral.bold",
-          "frameOff-disabled": "rbga(148, 135, 155, 0.5)",
+          "frameOff-disabled": "rgba(148, 135, 155, 0.5)",
           "slideOn": "sys.bg.surface",
           "slideOn-disabled": "sys.bg.surface",
           "slideOff": "sys.bg.surface",
@@ -580,8 +580,8 @@
         }
       },
       "utilities": {
-        "overlay": "rbga(32, 27, 34, 0.8)",
-        "overlay-light": "rbga(32, 27, 34, 0.16)",
+        "overlay": "rgba(32, 27, 34, 0.8)",
+        "overlay-light": "rgba(32, 27, 34, 0.16)",
         "skeleton": "sys.bg.subtle",
         "skeleton-strong": "sys.fg.minimal"
       },
@@ -605,7 +605,7 @@
       "sys/bg/subtle": "pal.neutral.93",
       "sys/bg/minimal": "pal.neutral.95",
       "sys/bg/disabled": "pal.neutral.95",
-      "sys/bg/transparent": "{color.pal.neutral.100} 0%",
+      "sys/bg/transparent": "pal.neutral.100 0%",
       "sys/border/minimal": "pal.neutral.93",
       "sys/border/subtle": "pal.neutral.90",
       "sys/border/strong": "pal.neutral.80",
@@ -786,9 +786,9 @@
       "input/checkbox/selection": "sys.interactive.base",
       "input/checkbox/selection-disabled": "sys.interactive.disabled",
       "input/toggle/frameOn": "sys.success.bold",
-      "input/toggle/frameOn-disabled": "rbga(78, 183, 108, 0.5)",
+      "input/toggle/frameOn-disabled": "rgba(78, 183, 108, 0.5)",
       "input/toggle/frameOff": "sys.neutral.bold",
-      "input/toggle/frameOff-disabled": "rbga(148, 135, 155, 0.5)",
+      "input/toggle/frameOff-disabled": "rgba(148, 135, 155, 0.5)",
       "input/toggle/slideOn": "sys.bg.surface",
       "input/toggle/slideOn-disabled": "sys.bg.surface",
       "input/toggle/slideOff": "sys.bg.surface",
@@ -829,8 +829,8 @@
       "status/neutral/border": "sys.neutral.muted",
       "status/neutral/icon": "sys.neutral.strong",
       "status/neutral/text": "sys.neutral.strong",
-      "utilities/overlay": "rbga(32, 27, 34, 0.8)",
-      "utilities/overlay-light": "rbga(32, 27, 34, 0.16)",
+      "utilities/overlay": "rgba(32, 27, 34, 0.8)",
+      "utilities/overlay-light": "rgba(32, 27, 34, 0.16)",
       "utilities/skeleton": "sys.bg.subtle",
       "utilities/skeleton-strong": "sys.fg.minimal"
     }