@teamturing/react-kit 2.60.3 → 2.61.0

package/esm/core/Switch/index.js

@@ -18,80 +18,32 @@ const Switch = ({
     ...props
   });
 };
-const UnstyledSwitch = styled.input.attrs({
+const UnstyledSwitch = /*#__PURE__*/styled.input.attrs({
   type: 'checkbox'
-})`
-  appearance: none;
-
-  ${sx}
-`;
-const BaseSwitch = styled(UnstyledSwitch)`
-  position: relative;
-
-  width: ${forcePixelValue(36)};
-  height: ${forcePixelValue(20)};
-
-  border-radius: ${({
+}).withConfig({
+  displayName: "Switch__UnstyledSwitch",
+  componentId: "sc-fz8rku-0"
+})(["appearance:none;", ""], sx);
+const BaseSwitch = /*#__PURE__*/styled(UnstyledSwitch).withConfig({
+  displayName: "Switch__BaseSwitch",
+  componentId: "sc-fz8rku-1"
+})(["position:relative;width:", ";height:", ";border-radius:", ";cursor:pointer;background-color:", ";transition:background-color 200ms;&::before{content:'';position:absolute;width:", ";height:", ";background-color:", ";top:", ";border-radius:", ";transform:translateX(", ");transition:transform 200ms;}&:disabled{background-color:", ";cursor:not-allowed;}&:checked{background-color:", ";&::before{transform:translateX(", ");}&:disabled{background-color:", ";}}&:focus-visible{outline-width:", ";outline-style:solid;outline-color:", ";}", ""], forcePixelValue(36), forcePixelValue(20), ({
   theme
-}) => `${forcePixelValue(theme.radii.full)}`};
-  cursor: pointer;
-
-  background-color: ${({
+}) => `${forcePixelValue(theme.radii.full)}`, ({
   theme
-}) => theme.colors['bg/neutral']};
-
-  transition: background-color 200ms;
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: ${forcePixelValue(16)};
-    height: ${forcePixelValue(16)};
-    background-color: ${({
+}) => theme.colors['bg/neutral'], forcePixelValue(16), forcePixelValue(16), ({
   theme
-}) => theme.colors['surface']};
-    top: ${forcePixelValue(2)};
-    border-radius: ${({
+}) => theme.colors['surface'], forcePixelValue(2), ({
   theme
-}) => `${forcePixelValue(theme.radii.full)}`};
-
-    transform: translateX(${forcePixelValue(2)});
-    transition: transform 200ms;
-  }
-
-  &:disabled {
-    background-color: ${({
+}) => `${forcePixelValue(theme.radii.full)}`, forcePixelValue(2), ({
   theme
-}) => theme.colors['bg/disabled']};
-    cursor: not-allowed;
-  }
-
-  &:checked {
-    background-color: ${({
+}) => theme.colors['bg/disabled'], ({
   theme
-}) => theme.colors['bg/primary']};
-
-    &::before {
-      transform: translateX(${forcePixelValue(36 - 16 - 2)});
-    }
-
-    &:disabled {
-      background-color: ${({
+}) => theme.colors['bg/primary'], forcePixelValue(36 - 16 - 2), ({
   theme
-}) => theme.colors['bg/primary/disabled']};
-    }
-  }
-
-  &:focus-visible {
-    outline-width: ${forcePixelValue(2)};
-    outline-style: solid;
-    outline-color: ${({
+}) => theme.colors['bg/primary/disabled'], forcePixelValue(2), ({
   theme
-}) => theme.colors['border/focused']};
-  }
-
-  ${sx}
-`;
+}) => theme.colors['border/focused'], sx);
 var Switch$1 = /*#__PURE__*/forwardRef(Switch);
 
 export { Switch$1 as default };

package/esm/core/Tab/TabItem.js

@@ -60,7 +60,10 @@ const TabItem = ({
     })
   });
 };
-const BaseTabItem = styled(UnstyledButton)(({
+const BaseTabItem = /*#__PURE__*/styled(UnstyledButton).withConfig({
+  displayName: "TabItem__BaseTabItem",
+  componentId: "sc-1bu7a1f-0"
+})(({
   theme
 }) => ({
   'width': 'initial',

package/esm/core/Text/index.js

@@ -5,9 +5,12 @@ import { variant } from '../../node_modules/@styled-system/variant/dist/index.es
 import { compose } from '../../node_modules/@styled-system/core/dist/index.esm.js';
 import { color } from '../../node_modules/@styled-system/color/dist/index.esm.js';
 
-const Text = styled.span.attrs(props => ({
+const Text = /*#__PURE__*/styled.span.attrs(props => ({
   color: props.color ?? 'text/neutral'
-}))({
+})).withConfig({
+  displayName: "Text",
+  componentId: "sc-yuorjy-0"
+})({
   'display': 'block',
   'whiteSpace': 'pre-wrap',
   '& > span': {

package/esm/core/TextInput/TextInputTrailingAction.js

@@ -16,43 +16,22 @@ const TextInputTrailingAction = ({
   "aria-disabled": disabled,
   children: /*#__PURE__*/jsx(Icon, {})
 });
-const BaseTextInputTrailingAction = styled(UnstyledButton)`
-  display: inline-flex;
-  padding: ${({
+const BaseTextInputTrailingAction = /*#__PURE__*/styled(UnstyledButton).withConfig({
+  displayName: "TextInputTrailingAction__BaseTextInputTrailingAction",
+  componentId: "sc-1fgbvb1-0"
+})(["display:inline-flex;padding:", ";background-color:", ";border-radius:", ";& svg{width:", ";height:", ";color:", ";}&:hover{background-color:", ";}&[aria-disabled='true']{cursor:not-allowed;& svg{color:", ";}}", ""], ({
   theme
-}) => forcePixelValue(theme.space[2])};
-  background-color: ${({
+}) => forcePixelValue(theme.space[2]), ({
   theme
-}) => theme.colors['bg/neutral/subtler']};
-  border-radius: ${({
+}) => theme.colors['bg/neutral/subtler'], ({
   theme
-}) => forcePixelValue(theme.radii.full)};
-
-  & svg {
-    width: ${forcePixelValue(16)};
-    height: ${forcePixelValue(16)};
-    color: ${({
+}) => forcePixelValue(theme.radii.full), forcePixelValue(16), forcePixelValue(16), ({
   theme
-}) => theme.colors['icon/neutral/bolder']};
-  }
-
-  &:hover {
-    background-color: ${({
+}) => theme.colors['icon/neutral/bolder'], ({
   theme
-}) => theme.colors['bg/neutral/subtler/hovered']};
-  }
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-    & svg {
-      color: ${({
+}) => theme.colors['bg/neutral/subtler/hovered'], ({
   theme
-}) => theme.colors['icon/disabled']};
-    }
-  }
-
-  ${sx}
-`;
+}) => theme.colors['icon/disabled'], sx);
 var TextInputTrailingAction$1 = /*#__PURE__*/forwardRef(TextInputTrailingAction);
 
 export { TextInputTrailingAction$1 as default };

package/esm/core/TextInput/index.js

@@ -79,58 +79,28 @@ const TextInput = ({
     })]
   });
 };
-const TextInputWrapper = styled.div`
-  position: relative;
-  width: ${forcePixelValue('100%')};
-  border-width: ${forcePixelValue(1)};
-  border-style: solid;
-  border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.xs)};
-  border-color: ${({
-  theme
-}) => theme.colors['border/input']};
-  background-color: ${({
-  theme
-}) => theme.colors['bg/input']};
-  cursor: text;
-  display: inline-flex;
-  align-items: center;
-
-  font-size: ${({
+const TextInputWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TextInput__TextInputWrapper",
+  componentId: "sc-12wqpup-0"
+})(["position:relative;width:", ";border-width:", ";border-style:solid;border-radius:", ";border-color:", ";background-color:", ";cursor:text;display:inline-flex;align-items:center;font-size:", ";font-weight:", ";line-height:", ";color:", ";input::placeholder{color:", ";}&:after{content:'';position:absolute;top:", ";right:", ";bottom:", ";left:", ";border:", " solid transparent;border-radius:", ";pointer-events:none;}", " ", " ", " ", ";", " ", " ", " ", " transition:color 100ms,background-color 100ms;&:after{transition:border-color 100ms;}", ""], forcePixelValue('100%'), forcePixelValue(1), ({
   theme
-}) => forcePixelValue(theme.fontSizes.xs)};
-  font-weight: ${({
+}) => forcePixelValue(theme.radii.xs), ({
   theme
-}) => theme.fontWeights.medium};
-  line-height: ${({
+}) => theme.colors['border/input'], ({
   theme
-}) => theme.lineHeights[2]};
-  color: ${({
+}) => theme.colors['bg/input'], ({
   theme
-}) => theme.colors['text/neutral']};
-  input::placeholder {
-    color: ${({
+}) => forcePixelValue(theme.fontSizes.xs), ({
   theme
-}) => theme.colors['text/neutral/subtlest']};
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: ${forcePixelValue(-1)};
-    right: ${forcePixelValue(-1)};
-    bottom: ${forcePixelValue(-1)};
-    left: ${forcePixelValue(-1)};
-
-    border: ${forcePixelValue(2)} solid transparent;
-    border-radius: ${({
+}) => theme.fontWeights.medium, ({
   theme
-}) => forcePixelValue(theme.radii.xs)};
-    pointer-events: none;
-  }
-
-  ${props => props.validationStatus !== 'error' && !props.disabled && css`
+}) => theme.lineHeights[2], ({
+  theme
+}) => theme.colors['text/neutral'], ({
+  theme
+}) => theme.colors['text/neutral/subtlest'], forcePixelValue(-1), forcePixelValue(-1), forcePixelValue(-1), forcePixelValue(-1), forcePixelValue(2), ({
+  theme
+}) => forcePixelValue(theme.radii.xs), props => props.validationStatus !== 'error' && !props.disabled && css`
       &:hover:not(:focus-within) {
         &:after {
           border-color: ${({
@@ -138,17 +108,13 @@ const TextInputWrapper = styled.div`
 }) => theme.colors['border/hovered']};
         }
       }
-    `}
-
-  ${props => props.validationStatus === 'error' && css`
+    `, props => props.validationStatus === 'error' && css`
       &:after {
         border-color: ${({
   theme
 }) => theme.colors['border/danger']};
       }
-    `}
-
-  ${props => props.validationStatus !== 'error' && css`
+    `, props => props.validationStatus !== 'error' && css`
       &:focus-within {
         &:after {
           border-color: ${({
@@ -156,9 +122,7 @@ const TextInputWrapper = styled.div`
 }) => theme.colors['border/focused']};
         }
       }
-    `}
-
-  ${props => props.disabled && css`
+    `, props => props.disabled && css`
       border-color: ${props.theme.colors['border/input']};
       background-color: ${props.theme.colors['bg/disabled']};
       color: ${props.theme.colors['text/disabled']};
@@ -170,67 +134,36 @@ const TextInputWrapper = styled.div`
       input {
         cursor: not-allowed;
       }
-    `};
-
-  ${props => props.hasLeadingVisual && css`
+    `, props => props.hasLeadingVisual && css`
       padding-left: ${forcePixelValue(props.theme.space[4])};
       input {
         padding-left: ${forcePixelValue(props.theme.space[2])};
       }
-    `}
-
-  ${props => props.hasTrailingVisual && css`
+    `, props => props.hasTrailingVisual && css`
       padding-right: ${forcePixelValue(props.theme.space[4])};
-    `}
-
-  ${props => props.hasTrailingAction && css`
+    `, props => props.hasTrailingAction && css`
       padding-right: ${forcePixelValue(props.theme.space[2])};
-    `}
-
-  ${props => (props.hasTrailingVisual || props.hasTrailingAction) && css`
+    `, props => (props.hasTrailingVisual || props.hasTrailingAction) && css`
       input {
         padding-right: ${forcePixelValue(props.theme.space[2])};
       }
-    `}
-
-
-  transition: color 100ms, background-color 100ms;
-  &:after {
-    transition: border-color 100ms;
-  }
-
-  ${sx}
-`;
-const UnstyledInput = styled.input`
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  border-radius: inherit;
-  color: inherit;
-  transition: inherit;
-
-  border: 0;
-  background-color: transparent;
-  width: 100%;
-  &:focus {
-    outline: 0;
-  }
-`;
-const BaseInput = styled(UnstyledInput)`
-  padding-top: ${({
-  theme
-}) => forcePixelValue(theme.space[3])};
-  padding-right: ${({
-  theme
-}) => forcePixelValue(theme.space[4])};
-  padding-bottom: ${({
-  theme
-}) => forcePixelValue(theme.space[3])};
-  padding-left: ${({
-  theme
-}) => forcePixelValue(theme.space[4])};
-`;
+    `, sx);
+const UnstyledInput = /*#__PURE__*/styled.input.withConfig({
+  displayName: "TextInput__UnstyledInput",
+  componentId: "sc-12wqpup-1"
+})(["font-size:inherit;font-weight:inherit;line-height:inherit;font-family:inherit;border-radius:inherit;color:inherit;transition:inherit;border:0;background-color:transparent;width:100%;&:focus{outline:0;}"]);
+const BaseInput = /*#__PURE__*/styled(UnstyledInput).withConfig({
+  displayName: "TextInput__BaseInput",
+  componentId: "sc-12wqpup-2"
+})(["padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";"], ({
+  theme
+}) => forcePixelValue(theme.space[3]), ({
+  theme
+}) => forcePixelValue(theme.space[4]), ({
+  theme
+}) => forcePixelValue(theme.space[3]), ({
+  theme
+}) => forcePixelValue(theme.space[4]));
 var TextInput$1 = Object.assign( /*#__PURE__*/forwardRef(TextInput), {
   TrailingAction: TextInputTrailingAction
 });

package/esm/core/Textarea/index.js

@@ -51,89 +51,36 @@ const Textarea = /*#__PURE__*/forwardRef(({
     })]
   });
 });
-const TextareaWrapper = styled.div`
-  position: relative;
-  width: ${forcePixelValue('100%')};
-  border-width: ${forcePixelValue(1)};
-  border-style: solid;
-  border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.xs)};
-  border-color: ${({
-  theme
-}) => theme.colors['border/input']};
-  background-color: ${({
-  theme
-}) => theme.colors['bg/input']};
-  cursor: text;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-
-  font-size: ${({
-  theme
-}) => forcePixelValue(theme.fontSizes.xs)};
-  font-weight: ${({
-  theme
-}) => theme.fontWeights.medium};
-  line-height: ${({
-  theme
-}) => theme.lineHeights[2]};
-  color: ${({
-  theme
-}) => theme.colors['text/neutral']};
-  textarea::placeholder {
-    color: ${({
-  theme
-}) => theme.colors['text/neutral/subtlest']};
-  }
-  textarea {
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    font-family: inherit;
-    border-radius: inherit;
-    color: inherit;
-    transition: inherit;
-
-    border: 0;
-    background-color: transparent;
-    width: 100%;
-    &:focus {
-      outline: 0;
-    }
-    resize: none;
-
-    padding-top: ${({
+const TextareaWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Textarea__TextareaWrapper",
+  componentId: "sc-mqvox2-0"
+})(["position:relative;width:", ";border-width:", ";border-style:solid;border-radius:", ";border-color:", ";background-color:", ";cursor:text;display:inline-flex;flex-direction:column;align-items:center;font-size:", ";font-weight:", ";line-height:", ";color:", ";textarea::placeholder{color:", ";}textarea{font-size:inherit;font-weight:inherit;line-height:inherit;font-family:inherit;border-radius:inherit;color:inherit;transition:inherit;border:0;background-color:transparent;width:100%;&:focus{outline:0;}resize:none;padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";}&:after{content:'';position:absolute;top:", ";right:", ";bottom:", ";left:", ";border:", " solid transparent;border-radius:", ";pointer-events:none;}", " ", " ", " ", ";"], forcePixelValue('100%'), forcePixelValue(1), ({
   theme
-}) => forcePixelValue(theme.space['3'])};
-    padding-right: ${({
+}) => forcePixelValue(theme.radii.xs), ({
   theme
-}) => forcePixelValue(theme.space['4'])};
-    padding-bottom: ${({
+}) => theme.colors['border/input'], ({
   theme
-}) => forcePixelValue(theme.space['3'])};
-    padding-left: ${({
+}) => theme.colors['bg/input'], ({
   theme
-}) => forcePixelValue(theme.space['4'])};
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: ${forcePixelValue(-1)};
-    right: ${forcePixelValue(-1)};
-    bottom: ${forcePixelValue(-1)};
-    left: ${forcePixelValue(-1)};
-
-    border: ${forcePixelValue(2)} solid transparent;
-    border-radius: ${({
+}) => forcePixelValue(theme.fontSizes.xs), ({
   theme
-}) => forcePixelValue(theme.radii.xs)};
-    pointer-events: none;
-  }
-
-  ${props => props.validationStatus !== 'error' && !props.disabled && css`
+}) => theme.fontWeights.medium, ({
+  theme
+}) => theme.lineHeights[2], ({
+  theme
+}) => theme.colors['text/neutral'], ({
+  theme
+}) => theme.colors['text/neutral/subtlest'], ({
+  theme
+}) => forcePixelValue(theme.space['3']), ({
+  theme
+}) => forcePixelValue(theme.space['4']), ({
+  theme
+}) => forcePixelValue(theme.space['3']), ({
+  theme
+}) => forcePixelValue(theme.space['4']), forcePixelValue(-1), forcePixelValue(-1), forcePixelValue(-1), forcePixelValue(-1), forcePixelValue(2), ({
+  theme
+}) => forcePixelValue(theme.radii.xs), props => props.validationStatus !== 'error' && !props.disabled && css`
       &:hover:not(:focus-within) {
         &:after {
           border-color: ${({
@@ -141,17 +88,13 @@ const TextareaWrapper = styled.div`
 }) => theme.colors['border/hovered']};
         }
       }
-    `}
-
-  ${props => props.validationStatus === 'error' && css`
+    `, props => props.validationStatus === 'error' && css`
       &:after {
         border-color: ${({
   theme
 }) => theme.colors['border/danger']};
       }
-    `}
-
-  ${props => props.validationStatus !== 'error' && css`
+    `, props => props.validationStatus !== 'error' && css`
       &:focus-within {
         &:after {
           border-color: ${({
@@ -159,9 +102,7 @@ const TextareaWrapper = styled.div`
 }) => theme.colors['border/focused']};
         }
       }
-    `}
-
-  ${props => props.disabled && css`
+    `, props => props.disabled && css`
       border-color: ${props.theme.colors['border/input']};
       background-color: ${props.theme.colors['bg/disabled']};
       color: ${props.theme.colors['text/disabled']};
@@ -174,34 +115,24 @@ const TextareaWrapper = styled.div`
       textarea {
         cursor: not-allowed;
       }
-    `};
-`;
-const TextareaCount = styled.div`
-  width: 100%;
-
-  padding-right: ${({
+    `);
+const TextareaCount = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Textarea__TextareaCount",
+  componentId: "sc-mqvox2-1"
+})(["width:100%;padding-right:", ";padding-bottom:", ";padding-left:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";text-align:end;"], ({
   theme
-}) => forcePixelValue(theme.space[4])};
-  padding-bottom: ${({
+}) => forcePixelValue(theme.space[4]), ({
   theme
-}) => forcePixelValue(theme.space[3])};
-  padding-left: ${({
+}) => forcePixelValue(theme.space[3]), ({
   theme
-}) => forcePixelValue(theme.space[4])};
-
-  font-size: ${({
+}) => forcePixelValue(theme.space[4]), ({
   theme
-}) => forcePixelValue(theme.fontSizes.xxs)};
-  font-weight: ${({
+}) => forcePixelValue(theme.fontSizes.xxs), ({
   theme
-}) => forcePixelValue(theme.fontWeights.medium)};
-  line-height: ${({
+}) => forcePixelValue(theme.fontWeights.medium), ({
   theme
-}) => theme.lineHeights[2]};
-  color: ${({
+}) => theme.lineHeights[2], ({
   theme
-}) => theme.colors['text/neutral/subtlest']};
-  text-align: end;
-`;
+}) => theme.colors['text/neutral/subtlest']);
 
 export { Textarea as default };

package/esm/core/Toast/index.js

@@ -19,7 +19,10 @@ const Toast = ({
     children: [/*#__PURE__*/jsx(IconByVariant, {}), children]
   });
 };
-const BaseToast = styled.div(({
+const BaseToast = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Toast__BaseToast",
+  componentId: "sc-1n1weew-0"
+})(({
   theme
 }) => ({
   'display': 'flex',

package/esm/core/Tooltip/BaseTooltip.js

@@ -75,54 +75,25 @@ const tooltipAppear = keyframes`
     opacity: 1;
   }
 `;
-const StyledBaseTooltipContent = styled.div`
-  z-index: 99999;
-  background-color: ${({
+const StyledBaseTooltipContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BaseTooltip__StyledBaseTooltipContent",
+  componentId: "sc-1devpfm-0"
+})(["z-index:99999;background-color:", ";border-radius:", ";box-shadow:", ";padding:", ";font-size:", ";font-weight:", ";line-height:", ";-webkit-font-smoothing:subpixel-antialiased;color:", ";text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;width:max-content;max-width:", ";word-wrap:break-word;white-space:pre-line;border-collapse:separate;animation-name:", ";animation-duration:100ms;animation-fill-mode:forwards;animation-timing-function:ease-in;", ""], ({
   theme
-}) => theme.colors['bg/neutral/bolder']};
-  border-radius: ${({
+}) => theme.colors['bg/neutral/bolder'], ({
   theme
-}) => forcePixelValue(theme.radii.xs)};
-  box-shadow: ${({
+}) => forcePixelValue(theme.radii.xs), ({
   theme
-}) => theme.shadows['shadow/overlay']};
-  padding: ${({
+}) => theme.shadows['shadow/overlay'], ({
   theme
-}) => `${forcePixelValue(theme.space[2])} ${forcePixelValue(theme.space[3])}`};
-  font-size: ${({
+}) => `${forcePixelValue(theme.space[2])} ${forcePixelValue(theme.space[3])}`, ({
   theme
-}) => forcePixelValue(theme.fontSizes.xxs)};
-  font-weight: ${({
+}) => forcePixelValue(theme.fontSizes.xxs), ({
   theme
-}) => theme.fontWeights.medium};
-  line-height: ${({
+}) => theme.fontWeights.medium, ({
   theme
-}) => theme.lineHeights[2]};
-  -webkit-font-smoothing: subpixel-antialiased;
-  color: ${({
+}) => theme.lineHeights[2], ({
   theme
-}) => theme.colors['text/inverse']};
-  text-align: center;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: break-word;
-  white-space: pre;
-  pointer-events: none;
-
-  width: max-content;
-  max-width: ${forcePixelValue(240)};
-  word-wrap: break-word;
-  white-space: pre-line;
-  border-collapse: separate;
-
-  animation-name: ${tooltipAppear};
-  animation-duration: 100ms;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-in;
-
-  ${sx}
-`;
+}) => theme.colors['text/inverse'], forcePixelValue(240), tooltipAppear, sx);
 
 export { BaseTooltip, BaseTooltipContent, BaseTooltipTrigger };