@teamturing/react-kit 2.33.0 → 2.35.0

package/dist/core/GradientText/index.d.ts

@@ -270,7 +270,7 @@ declare const GradientText: import("styled-components").IStyledComponent<"web",
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
 } & {
     typography?: import("styled-system").ResponsiveValue<"m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4" | "xxl/regular" | "xxl/bold" | "xl/regular" | "xl/bold" | "l/regular" | "l/bold" | "m/regular" | "m/bold" | "s/regular" | "s/bold" | "xs/regular" | "xs/bold" | "xxs/regular" | "xxs/bold"> | undefined;
-} & import("../..").SxProp & import("../../utils/styled-system").WordBreakProps & import("../../utils/styled-system").WhiteSpaceProps & import("../../utils/styled-system").TextDecorationProps & import("styled-system").FontSizeProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "medium" | "bold" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 1 | 2> & import("styled-system").TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/violet" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/accent/violet/subtlest" | "bg/selected/violet" | "bg/selected" | "bg/selected/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected" | "text/weak">, "ref"> & {
+} & import("../..").SxProp & import("../../utils/styled-system").WordBreakProps & import("../../utils/styled-system").WhiteSpaceProps & import("../../utils/styled-system").TextDecorationProps & import("styled-system").FontSizeProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "medium" | "bold" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 1 | 2> & import("styled-system").TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/violet" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/primary/disabled" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/selected/violet" | "bg/selected" | "bg/selected/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected" | "text/weak">, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, Props>>;
 export default GradientText;

package/dist/core/Switch/index.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from 'react';
+import { SxProp } from '../../utils/styled-system';
+type Props = {
+    validationStatus?: 'error' | 'success' | undefined;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & SxProp;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    validationStatus?: "error" | "success" | undefined;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & SxProp & import("react").RefAttributes<HTMLInputElement>>;
+export default _default;
+export type { Props as SwitchProps };

package/dist/core/Textarea/index.d.ts

@@ -2,11 +2,11 @@ import { ReactNode } from 'react';
 import { TextareaAutosizeProps } from 'react-textarea-autosize';
 type Props = {
     validationStatus?: 'error' | 'success' | undefined;
-    renderCount?: (count: number, element: HTMLTextAreaElement | null) => ReactNode;
+    renderCount?: (count: number, props: Props) => ReactNode;
 } & TextareaAutosizeProps;
 declare const Textarea: import("react").ForwardRefExoticComponent<{
     validationStatus?: 'error' | 'success' | undefined;
-    renderCount?: ((count: number, element: HTMLTextAreaElement | null) => ReactNode) | undefined;
+    renderCount?: ((count: number, props: Props) => ReactNode) | undefined;
 } & TextareaAutosizeProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default Textarea;
 export type { Props as TextareaProps };

package/dist/index.js

@@ -35791,6 +35791,95 @@ var Select$1 = Object.assign( /*#__PURE__*/React.forwardRef(Select), {
   Option: SelectOption
 });
 
+const Switch = ({
+  checked,
+  validationStatus,
+  ...props
+}, ref) => {
+  const checkboxRef = useProvidedOrCreatedRef(ref);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseSwitch, {
+    ref: checkboxRef,
+    checked: checked,
+    validationStatus: validationStatus,
+    ...props
+  });
+};
+const UnstyledSwitch = styled__default.default.input.attrs({
+  type: 'checkbox'
+})`
+  appearance: none;
+
+  ${sx}
+`;
+const BaseSwitch = styled__default.default(UnstyledSwitch)`
+  position: relative;
+
+  width: ${forcePixelValue(36)};
+  height: ${forcePixelValue(20)};
+
+  border-radius: ${({
+  theme
+}) => `${forcePixelValue(theme.radii.full)}`};
+  cursor: pointer;
+
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral']};
+
+  transition: background-color 200ms;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: ${forcePixelValue(16)};
+    height: ${forcePixelValue(16)};
+    background-color: ${({
+  theme
+}) => theme.colors['surface/overlay']};
+    top: ${forcePixelValue(2)};
+    border-radius: ${({
+  theme
+}) => `${forcePixelValue(theme.radii.full)}`};
+
+    transform: translateX(${forcePixelValue(2)});
+    transition: transform 200ms;
+  }
+
+  &:disabled {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/disabled']};
+    cursor: not-allowed;
+  }
+
+  &:checked {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/primary']};
+
+    &::before {
+      transform: translateX(${forcePixelValue(36 - 16 - 2)});
+    }
+
+    &:disabled {
+      background-color: ${({
+  theme
+}) => theme.colors['bg/primary/disabled']};
+    }
+  }
+
+  &:focus-visible {
+    outline-width: ${forcePixelValue(2)};
+    outline-style: solid;
+    outline-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+  }
+
+  ${sx}
+`;
+var Switch$1 = /*#__PURE__*/React.forwardRef(Switch);
+
 /**
  * lodash (Custom Build) <https://lodash.com/>
  * Build: `lodash modularize exports="npm" -o ./`
@@ -36674,7 +36763,12 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
       disabled: disabled,
       onChange: handleChange
     }), /*#__PURE__*/jsxRuntimeExports.jsx(TextareaCount, {
-      children: renderCount(count, inputRef.current)
+      children: renderCount(count, {
+        validationStatus,
+        disabled,
+        renderCount,
+        ...props
+      })
     })]
   });
 });
@@ -37001,9 +37095,9 @@ const FormControl = ({
       successMessage: FormControlSuccessMessage
     }
   });
-  const inputComponentCandidates = [TextInput$1, Textarea, Select$1, SearchSelectInput$1, Checkbox$1, Radio$1, ...additionalInputComponentCandidates];
+  const inputComponentCandidates = [TextInput$1, Textarea, Select$1, SearchSelectInput$1, Checkbox$1, Radio$1, Switch$1, ...additionalInputComponentCandidates];
   const InputComponent = restComponents.find(component => inputComponentCandidates.some(candidate => /*#__PURE__*/React.isValidElement(component) && component.type === candidate));
-  const isHorizontalLayoutNeeded = /*#__PURE__*/React.isValidElement(InputComponent) && (InputComponent.type === Checkbox$1 || InputComponent.type === Radio$1);
+  const isHorizontalLayoutNeeded = /*#__PURE__*/React.isValidElement(InputComponent) && (InputComponent.type === Checkbox$1 || InputComponent.type === Radio$1 || InputComponent.type === Switch$1);
   return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
     value: {
       id,
@@ -38636,6 +38730,7 @@ const bgColor = {
   'bg/primary': palette.violet500,
   'bg/primary/hovered': palette.violet700,
   'bg/primary/pressed': palette.violet700,
+  'bg/primary/disabled': palette.violet100,
   'bg/neutral/subtlest': palette.transparent,
   'bg/neutral/subtlest/hovered': palette.gray50,
   'bg/neutral/subtlest/pressed': palette.gray50,
@@ -38664,7 +38759,6 @@ const bgColor = {
   'bg/accent/red/subtle': palette.red400,
   'bg/accent/red': palette.red500,
   'bg/accent/gray/subtlest': palette.gray200,
-  'bg/accent/violet/subtlest': palette.violet100,
   'bg/selected/violet': palette.violet500,
   'bg/selected': palette.gray900,
   'bg/selected/subtle': palette.gray100,

package/dist/theme/index.d.ts

@@ -217,6 +217,7 @@ declare const theme: {
         'bg/primary': "#835EEB";
         'bg/primary/hovered': "#5D43A7";
         'bg/primary/pressed': "#5D43A7";
+        'bg/primary/disabled': "#E8E1FB";
         'bg/neutral/subtlest': "#FFFFFF00";
         'bg/neutral/subtlest/hovered': "#F9FAFB";
         'bg/neutral/subtlest/pressed': "#F9FAFB";
@@ -245,7 +246,6 @@ declare const theme: {
         'bg/accent/red/subtle': "#F5525D";
         'bg/accent/red': "#F22735";
         'bg/accent/gray/subtlest': "#E5E7EB";
-        'bg/accent/violet/subtlest': "#E8E1FB";
         'bg/selected/violet': "#835EEB";
         'bg/selected': "#33373B";
         'bg/selected/subtle': "#F3F4F6";

package/esm/core/FormControl/index.js

@@ -4,6 +4,7 @@ import Checkbox from '../Checkbox/index.js';
 import Radio from '../Radio/index.js';
 import SearchSelectInput from '../SearchSelectInput/index.js';
 import Select from '../Select/index.js';
+import Switch from '../Switch/index.js';
 import TextInput from '../TextInput/index.js';
 import Textarea from '../Textarea/index.js';
 import View from '../View/index.js';
@@ -32,9 +33,9 @@ const FormControl = ({
       successMessage: FormControlSuccessMessage
     }
   });
-  const inputComponentCandidates = [TextInput, Textarea, Select, SearchSelectInput, Checkbox, Radio, ...additionalInputComponentCandidates];
+  const inputComponentCandidates = [TextInput, Textarea, Select, SearchSelectInput, Checkbox, Radio, Switch, ...additionalInputComponentCandidates];
   const InputComponent = restComponents.find(component => inputComponentCandidates.some(candidate => /*#__PURE__*/isValidElement(component) && component.type === candidate));
-  const isHorizontalLayoutNeeded = /*#__PURE__*/isValidElement(InputComponent) && (InputComponent.type === Checkbox || InputComponent.type === Radio);
+  const isHorizontalLayoutNeeded = /*#__PURE__*/isValidElement(InputComponent) && (InputComponent.type === Checkbox || InputComponent.type === Radio || InputComponent.type === Switch);
   return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
     value: {
       id,

package/esm/core/Switch/index.js

@@ -0,0 +1,97 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
+import { sx } from '../../utils/styled-system/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const Switch = ({
+  checked,
+  validationStatus,
+  ...props
+}, ref) => {
+  const checkboxRef = useProvidedOrCreatedRef(ref);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseSwitch, {
+    ref: checkboxRef,
+    checked: checked,
+    validationStatus: validationStatus,
+    ...props
+  });
+};
+const UnstyledSwitch = styled.input.attrs({
+  type: 'checkbox'
+})`
+  appearance: none;
+
+  ${sx}
+`;
+const BaseSwitch = styled(UnstyledSwitch)`
+  position: relative;
+
+  width: ${forcePixelValue(36)};
+  height: ${forcePixelValue(20)};
+
+  border-radius: ${({
+  theme
+}) => `${forcePixelValue(theme.radii.full)}`};
+  cursor: pointer;
+
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral']};
+
+  transition: background-color 200ms;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: ${forcePixelValue(16)};
+    height: ${forcePixelValue(16)};
+    background-color: ${({
+  theme
+}) => theme.colors['surface/overlay']};
+    top: ${forcePixelValue(2)};
+    border-radius: ${({
+  theme
+}) => `${forcePixelValue(theme.radii.full)}`};
+
+    transform: translateX(${forcePixelValue(2)});
+    transition: transform 200ms;
+  }
+
+  &:disabled {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/disabled']};
+    cursor: not-allowed;
+  }
+
+  &:checked {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/primary']};
+
+    &::before {
+      transform: translateX(${forcePixelValue(36 - 16 - 2)});
+    }
+
+    &:disabled {
+      background-color: ${({
+  theme
+}) => theme.colors['bg/primary/disabled']};
+    }
+  }
+
+  &:focus-visible {
+    outline-width: ${forcePixelValue(2)};
+    outline-style: solid;
+    outline-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+  }
+
+  ${sx}
+`;
+var Switch$1 = /*#__PURE__*/forwardRef(Switch);
+
+export { Switch$1 as default };

package/esm/core/Textarea/index.js

@@ -45,7 +45,12 @@ const Textarea = /*#__PURE__*/forwardRef(({
       disabled: disabled,
       onChange: handleChange
     }), /*#__PURE__*/jsxRuntimeExports.jsx(TextareaCount, {
-      children: renderCount(count, inputRef.current)
+      children: renderCount(count, {
+        validationStatus,
+        disabled,
+        renderCount,
+        ...props
+      })
     })]
   });
 });

package/esm/packages/token-studio/esm/token/color/index.js

@@ -27,6 +27,7 @@ const bgColor = {
   'bg/primary': palette.violet500,
   'bg/primary/hovered': palette.violet700,
   'bg/primary/pressed': palette.violet700,
+  'bg/primary/disabled': palette.violet100,
   'bg/neutral/subtlest': palette.transparent,
   'bg/neutral/subtlest/hovered': palette.gray50,
   'bg/neutral/subtlest/pressed': palette.gray50,
@@ -55,7 +56,6 @@ const bgColor = {
   'bg/accent/red/subtle': palette.red400,
   'bg/accent/red': palette.red500,
   'bg/accent/gray/subtlest': palette.gray200,
-  'bg/accent/violet/subtlest': palette.violet100,
   'bg/selected/violet': palette.violet500,
   'bg/selected': palette.gray900,
   'bg/selected/subtle': palette.gray100,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.33.0",
+  "version": "2.35.0",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -55,8 +55,8 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.2",
     "@primer/behaviors": "^1.3.6",
-    "@teamturing/icons": "^1.43.0",
-    "@teamturing/token-studio": "^1.8.0",
+    "@teamturing/icons": "^1.43.1",
+    "@teamturing/token-studio": "^1.9.0",
     "@teamturing/utils": "^1.4.0",
     "framer-motion": "^10.16.4",
     "lodash.debounce": "^4.0.8",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "249a90d29a2e6dcd0cff9076059492615777a08a"
+  "gitHead": "55d14d0eab0c2905cc30015c4a13190222e6e545"
 }