@teamturing/react-kit 2.60.3 → 2.61.0

package/esm/core/Pill/index.js

@@ -73,52 +73,22 @@ const Pill = ({
     }) : null]
   });
 };
-const BasePill = styled(UnstyledButton)`
-  display: inline-flex;
-  align-items: center;
-  column-gap: ${({
+const BasePill = /*#__PURE__*/styled(UnstyledButton).withConfig({
+  displayName: "Pill__BasePill",
+  componentId: "sc-15cvlep-0"
+})(["display:inline-flex;align-items:center;column-gap:", ";transition:background-color 100ms;& span{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:pre;word-break:break-all;}&:focus-visible{outline-color:", ";outline-style:solid;outline-width:", ";outline-offset:", ";}& > div{display:flex;border-radius:", ";}& > div:focus-visible{outline-color:", ";outline-style:solid;outline-width:", ";outline-offset:", ";}", " ", " ", ""], ({
   theme
-}) => forcePixelValue(theme.space[2])};
-
-  transition: background-color 100ms;
-
-  & span {
-    max-width: 240px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: pre;
-    word-break: break-all;
-  }
-
-  &:focus-visible {
-    outline-color: ${({
+}) => forcePixelValue(theme.space[2]), ({
   theme
-}) => theme.colors['border/focused']};
-    outline-style: solid;
-    outline-width: ${forcePixelValue(2)};
-    outline-offset: ${({
+}) => theme.colors['border/focused'], forcePixelValue(2), ({
   theme
-}) => forcePixelValue(theme.space[0.5])};
-  }
-
-  & > div {
-    display: flex;
-    border-radius: ${({
+}) => forcePixelValue(theme.space[0.5]), ({
   theme
-}) => forcePixelValue(theme.radii.xxs)};
-  }
-  & > div:focus-visible {
-    outline-color: ${({
+}) => forcePixelValue(theme.radii.xxs), ({
   theme
-}) => theme.colors['border/focused']};
-    outline-style: solid;
-    outline-width: ${forcePixelValue(2)};
-    outline-offset: ${({
+}) => theme.colors['border/focused'], forcePixelValue(2), ({
   theme
-}) => forcePixelValue(theme.space[-0.5])};
-  }
-
-  ${({
+}) => forcePixelValue(theme.space[-0.5]), ({
   theme,
   hasRemoveButton
 }) => variant({
@@ -159,8 +129,7 @@ const BasePill = styled(UnstyledButton)`
       }
     }
   }
-})}
-  ${({
+}), ({
   theme,
   disabled
 }) => variant({
@@ -214,10 +183,7 @@ const BasePill = styled(UnstyledButton)`
       })
     }
   }
-})}
-    
-  ${sx}
-`;
+}), sx);
 var index = /*#__PURE__*/forwardRef(Pill);
 
 export { index as default };

package/esm/core/Radio/index.js

@@ -18,111 +18,42 @@ const Radio = ({
     ...props
   });
 };
-const UnstyledRadio = styled.input.attrs({
+const UnstyledRadio = /*#__PURE__*/styled.input.attrs({
   type: 'radio'
-})`
-  appearance: none;
-
-  ${sx}
-`;
-const BaseRadio = styled(UnstyledRadio)`
-  position: relative;
-
-  width: ${forcePixelValue(20)};
-  height: ${forcePixelValue(20)};
-
-  border-width: ${forcePixelValue(2)};
-  border-style: solid;
-  border-color: ${({
+}).withConfig({
+  displayName: "Radio__UnstyledRadio",
+  componentId: "sc-3fie1u-0"
+})(["appearance:none;", ""], sx);
+const BaseRadio = /*#__PURE__*/styled(UnstyledRadio).withConfig({
+  displayName: "Radio__BaseRadio",
+  componentId: "sc-3fie1u-1"
+})(["position:relative;width:", ";height:", ";border-width:", ";border-style:solid;border-color:", ";border-radius:", ";cursor:pointer;transition:visibility 200ms;&::before{visibility:hidden;content:'';display:grid;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:", ";background-color:", ";mask-image:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='4' fill='white'/%3E%3C/svg%3E%0A\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='4' fill='white'/%3E%3C/svg%3E%0A\");mask-size:40%;-webkit-mask-size:40%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;}&:disabled{background-color:", ";border-color:", ";}&:checked{background-color:", ";border-width:0;&::before{visibility:visible;}&:disabled{background-color:", ";border-color:", ";&::before{background-color:", ";}}}&:focus-visible{outline-width:", ";outline-style:solid;outline-color:", ";}", " ", ""], forcePixelValue(20), forcePixelValue(20), forcePixelValue(2), ({
   theme
-}) => theme.colors['border/neutral']};
-  border-radius: ${({
+}) => theme.colors['border/neutral'], ({
   theme
-}) => `${forcePixelValue(theme.radii.full)}`};
-  cursor: pointer;
-
-  transition: visibility 200ms;
-
-  &::before {
-    visibility: hidden;
-
-    content: '';
-    display: grid;
-    position: absolute;
-
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    border-radius: ${({
+}) => `${forcePixelValue(theme.radii.full)}`, ({
   theme
-}) => `${forcePixelValue(theme.radii.full)}`};
-
-    background-color: ${({
+}) => `${forcePixelValue(theme.radii.full)}`, ({
   theme
-}) => theme.colors['icon/inverse']};
-    mask-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='4' fill='white'/%3E%3C/svg%3E%0A");
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='4' fill='white'/%3E%3C/svg%3E%0A");
-    mask-size: 40%;
-    -webkit-mask-size: 40%;
-    mask-repeat: no-repeat;
-    -webkit-mask-repeat: no-repeat;
-    mask-position: center;
-    -webkit-mask-position: center;
-  }
-
-  &:disabled {
-    background-color: ${({
+}) => theme.colors['icon/inverse'], ({
   theme
-}) => theme.colors['bg/disabled']};
-    border-color: ${({
+}) => theme.colors['bg/disabled'], ({
   theme
-}) => theme.colors['border/disabled']};
-  }
-
-  &:checked {
-    background-color: ${({
+}) => theme.colors['border/disabled'], ({
   theme
-}) => theme.colors['bg/primary']};
-    border-width: 0;
-
-    &::before {
-      visibility: visible;
-    }
-
-    &:disabled {
-      background-color: ${({
+}) => theme.colors['bg/primary'], ({
   theme
-}) => theme.colors['bg/disabled']};
-      border-color: ${({
+}) => theme.colors['bg/disabled'], ({
   theme
-}) => theme.colors['border/disabled']};
-
-      &::before {
-        background-color: ${({
+}) => theme.colors['border/disabled'], ({
   theme
-}) => theme.colors['icon/disabled']};
-      }
-    }
-  }
-
-  &:focus-visible {
-    outline-width: ${forcePixelValue(2)};
-    outline-style: solid;
-    outline-color: ${({
+}) => theme.colors['icon/disabled'], forcePixelValue(2), ({
   theme
-}) => theme.colors['border/focused']};
-  }
-
-  ${props => props.validationStatus === 'error' && css`
+}) => theme.colors['border/focused'], props => props.validationStatus === 'error' && css`
       border-color: ${({
   theme
 }) => theme.colors['border/danger']};
-    `}
-
-  ${sx}
-`;
+    `, sx);
 var Radio$1 = /*#__PURE__*/forwardRef(Radio);
 
 export { Radio$1 as default };

package/esm/core/SearchSelectInput/index.js

@@ -247,63 +247,28 @@ const SearchSelectInput = ({
     })
   });
 };
-const TextInputWrapper = styled.div`
-  position: relative;
-  width: ${forcePixelValue('100%')};
-  border-width: ${forcePixelValue(1)};
-  border-style: solid;
-  border-radius: ${({
+const TextInputWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SearchSelectInput__TextInputWrapper",
+  componentId: "sc-17l04wk-0"
+})(["position:relative;width:", ";border-width:", ";border-style:solid;border-radius:", ";border-color:", ";background-color:", ";cursor:default;input{cursor:default;flex:1;}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.radii.xs)};
-  border-color: ${({
+}) => forcePixelValue(theme.radii.xs), ({
   theme
-}) => theme.colors['border/input']};
-  background-color: ${({
+}) => theme.colors['border/input'], ({
   theme
-}) => theme.colors['bg/input']};
-  cursor: default;
-  input {
-    cursor: default;
-
-    flex: 1;
-  }
-  display: inline-flex;
-  align-items: center;
-
-  font-size: ${({
+}) => theme.colors['bg/input'], ({
   theme
-}) => forcePixelValue(theme.fontSizes.xs)};
-  font-weight: ${({
+}) => forcePixelValue(theme.fontSizes.xs), ({
   theme
-}) => theme.fontWeights.medium};
-  line-height: ${({
+}) => theme.fontWeights.medium, ({
   theme
-}) => theme.lineHeights[2]};
-  color: ${({
+}) => theme.lineHeights[2], ({
   theme
-}) => theme.colors['text/neutral']};
-  input::placeholder {
-    color: ${({
+}) => theme.colors['text/neutral'], ({
   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.colors['text/neutral/subtlest'], forcePixelValue(-1), forcePixelValue(-1), forcePixelValue(-1), forcePixelValue(-1), forcePixelValue(2), ({
   theme
-}) => forcePixelValue(theme.radii.xs)};
-    pointer-events: none;
-  }
-
-  ${props => props.validationStatus !== 'error' && !props.disabled && css`
+}) => forcePixelValue(theme.radii.xs), props => props.validationStatus !== 'error' && !props.disabled && css`
       &:hover:not(:focus-within) {
         &:after {
           border-color: ${({
@@ -311,17 +276,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' && !props.disabled && css`
+    `, props => props.validationStatus !== 'error' && !props.disabled && css`
       &:focus-within {
         &:after {
           border-color: ${({
@@ -329,9 +290,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']};
@@ -343,38 +302,17 @@ const TextInputWrapper = styled.div`
       input {
         cursor: not-allowed;
       }
-    `};
-
-  ${props => props.hasLeadingVisual && css`
+    `, props => props.hasLeadingVisual && css`
       padding-left: ${forcePixelValue(props.theme.space[4])};
-    `}
-
-  transition: color 100ms, background-color 100ms;
-  &:after {
-    transition: border-color 100ms;
-  }
-`;
-const UnstyledInput = styled.input`
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  border-radius: inherit;
-  color: inherit;
-  transition: inherit;
-  width: 100%;
-
-  border: 0;
-  padding: 0;
-  background-color: transparent;
-  &:focus {
-    outline: 0;
-  }
-`;
-const BaseInput = styled(UnstyledInput)`
-  white-space: pre;
-  text-overflow: ellipsis;
-`;
+    `);
+const UnstyledInput = /*#__PURE__*/styled.input.withConfig({
+  displayName: "SearchSelectInput__UnstyledInput",
+  componentId: "sc-17l04wk-1"
+})(["font-size:inherit;font-weight:inherit;line-height:inherit;font-family:inherit;border-radius:inherit;color:inherit;transition:inherit;width:100%;border:0;padding:0;background-color:transparent;&:focus{outline:0;}"]);
+const BaseInput = /*#__PURE__*/styled(UnstyledInput).withConfig({
+  displayName: "SearchSelectInput__BaseInput",
+  componentId: "sc-17l04wk-2"
+})(["white-space:pre;text-overflow:ellipsis;"]);
 var SearchSelectInput$1 = /*#__PURE__*/forwardRef(SearchSelectInput);
 
 export { SearchSelectInput$1 as default };

package/esm/core/Select/SelectOption.js

@@ -12,6 +12,9 @@ const SelectOption = ({
     children: children
   });
 };
-const BaseSelectOption = styled.option``;
+const BaseSelectOption = /*#__PURE__*/styled.option.withConfig({
+  displayName: "SelectOption__BaseSelectOption",
+  componentId: "sc-1b9xkqd-0"
+})([""]);
 
 export { SelectOption as default };

package/esm/core/Select/index.js

@@ -86,62 +86,31 @@ const Select = ({
     })]
   });
 };
-const SelectWrapper = styled.div`
-  position: relative;
-  width: ${forcePixelValue('100%')};
-  border-width: ${forcePixelValue(1)};
-  border-style: solid;
-  border-radius: ${({
+const SelectWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Select__SelectWrapper",
+  componentId: "sc-1gz532j-0"
+})(["position:relative;width:", ";border-width:", ";border-style:solid;border-radius:", ";border-color:", ";background-color:", ";display:inline-flex;align-items:center;font-size:", ";font-weight:", ";line-height:", ";color:", ";", " &:after{content:'';position:absolute;top:", ";right:", ";bottom:", ";left:", ";border:", " solid transparent;border-radius:", ";pointer-events:none;}", " ", " ", " ", ";", " transition:background-color 100ms;&:after{transition:border-color 100ms;}"], forcePixelValue('100%'), forcePixelValue(1), ({
   theme
-}) => forcePixelValue(theme.radii.xs)};
-  border-color: ${({
+}) => forcePixelValue(theme.radii.xs), ({
   theme
-}) => theme.colors['border/input']};
-  background-color: ${({
+}) => theme.colors['border/input'], ({
   theme
-}) => theme.colors['bg/input']};
-  display: inline-flex;
-  align-items: center;
-
-  font-size: ${({
+}) => theme.colors['bg/input'], ({
   theme
-}) => forcePixelValue(theme.fontSizes.xs)};
-  font-weight: ${({
+}) => forcePixelValue(theme.fontSizes.xs), ({
   theme
-}) => theme.fontWeights.medium};
-  line-height: ${({
+}) => theme.fontWeights.medium, ({
   theme
-}) => theme.lineHeights[2]};
-  color: ${({
+}) => theme.lineHeights[2], ({
   theme
-}) => theme.colors['text/neutral']};
-
-  /**
-   * placeholder style
-   */
-  ${({
+}) => theme.colors['text/neutral'], ({
   theme,
   isValueEmpty
 }) => isValueEmpty ? css`
           color: ${theme.colors['text/neutral/subtlest']};
-        ` : null}
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: ${forcePixelValue(-1)};
-    right: ${forcePixelValue(-1)};
-    bottom: ${forcePixelValue(-1)};
-    left: ${forcePixelValue(-1)};
-
-    border: ${forcePixelValue(2)} solid transparent;
-    border-radius: ${({
+        ` : null, forcePixelValue(-1), forcePixelValue(-1), forcePixelValue(-1), forcePixelValue(-1), forcePixelValue(2), ({
   theme
-}) => forcePixelValue(theme.radii.xs)};
-    pointer-events: none;
-  }
-
-  ${props => props.validationStatus !== 'error' && !props.disabled && css`
+}) => forcePixelValue(theme.radii.xs), props => props.validationStatus !== 'error' && !props.disabled && css`
       &:hover:not(:focus-within) {
         &:after {
           border-color: ${({
@@ -149,17 +118,13 @@ const SelectWrapper = 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: ${({
@@ -167,9 +132,7 @@ const SelectWrapper = 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']};
@@ -181,57 +144,28 @@ const SelectWrapper = styled.div`
       select {
         cursor: not-allowed;
       }
-    `};
-
-  ${props => props.hasLeadingVisual && css`
+    `, props => props.hasLeadingVisual && css`
       padding-left: ${forcePixelValue(props.theme.space[4])};
       select {
         padding-left: ${forcePixelValue(props.theme.space[2])};
       }
-    `}
-
-  transition: background-color 100ms;
-  &:after {
-    transition: border-color 100ms;
-  }
-`;
-const UnstyledSelect = styled.select`
-  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;
-  }
-
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-`;
-const BaseSelect = styled(UnstyledSelect)`
-  padding-top: ${({
+    `);
+const UnstyledSelect = /*#__PURE__*/styled.select.withConfig({
+  displayName: "Select__UnstyledSelect",
+  componentId: "sc-1gz532j-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;}appearance:none;-webkit-appearance:none;-moz-appearance:none;"]);
+const BaseSelect = /*#__PURE__*/styled(UnstyledSelect).withConfig({
+  displayName: "Select__BaseSelect",
+  componentId: "sc-1gz532j-2"
+})(["padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";white-space:pre;text-overflow:ellipsis;"], ({
   theme
-}) => forcePixelValue(theme.space[3])};
-  padding-right: ${({
+}) => forcePixelValue(theme.space[3]), ({
   theme
-}) => forcePixelValue(theme.space[10])};
-  padding-bottom: ${({
+}) => forcePixelValue(theme.space[10]), ({
   theme
-}) => forcePixelValue(theme.space[3])};
-  padding-left: ${({
+}) => forcePixelValue(theme.space[3]), ({
   theme
-}) => forcePixelValue(theme.space[4])};
-
-  white-space: pre;
-  text-overflow: ellipsis;
-`;
+}) => forcePixelValue(theme.space[4]));
 var Select$1 = Object.assign( /*#__PURE__*/forwardRef(Select), {
   Option: SelectOption
 });

package/esm/core/Space/index.js

@@ -3,10 +3,9 @@ import '../../node_modules/styled-system/dist/index.esm.js';
 import { sx } from '../../utils/styled-system/index.js';
 import { space } from '../../node_modules/@styled-system/space/dist/index.esm.js';
 
-const Space = styled.div`
-  width: inherit;
-  ${space};
-  ${sx}
-`;
+const Space = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Space",
+  componentId: "sc-4g4g8r-0"
+})(["width:inherit;", ";", ""], space, sx);
 
 export { Space as default };

package/esm/core/Spinner/index.js

@@ -11,18 +11,18 @@ const spin = keyframes`
     transform: rotate(360deg);
   }
 `;
-const ProgressGradientSpinner = styled(ProgressGradientIcon)`
-  color: ${({
+const ProgressGradientSpinner = /*#__PURE__*/styled(ProgressGradientIcon).withConfig({
+  displayName: "Spinner__ProgressGradientSpinner",
+  componentId: "sc-13dlgyx-0"
+})(["color:", ";animation:", " 1000ms infinite steps(8,end);"], ({
   theme
-}) => theme.colors['icon/neutral']};
-  animation: ${spin} 1000ms infinite steps(8, end);
-`;
-const ProgressLineSpinner = styled(ProgressLineIcon)`
-  color: ${({
+}) => theme.colors['icon/neutral'], spin);
+const ProgressLineSpinner = /*#__PURE__*/styled(ProgressLineIcon).withConfig({
+  displayName: "Spinner__ProgressLineSpinner",
+  componentId: "sc-13dlgyx-1"
+})(["color:", ";animation:", " 1000ms infinite linear;"], ({
   theme
-}) => theme.colors['icon/neutral']};
-  animation: ${spin} 1000ms infinite linear;
-`;
+}) => theme.colors['icon/neutral'], spin);
 const Spinner = /*#__PURE__*/forwardRef(({
   variant: propsVariant,
   width = 32,

package/esm/core/Stack/index.js

@@ -23,7 +23,10 @@ const Stack = /*#__PURE__*/forwardRef(({
   ...props,
   children: children
 }));
-const BaseStack = styled(View)({
+const BaseStack = /*#__PURE__*/styled(View).withConfig({
+  displayName: "Stack__BaseStack",
+  componentId: "sc-1lqh56h-0"
+})({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap'