@teamturing/react-kit 2.60.2 → 2.61.0

package/esm/core/Drawer/index.js

@@ -158,23 +158,16 @@ const Drawer = ({
     }) : null
   });
 };
-const Blanket = styled.span`
-  &:before {
-    position: fixed;
-    z-index: 9999;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    cursor: default;
-    content: '';
-    background: ${({
+const Blanket = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Drawer__Blanket",
+  componentId: "sc-k4n499-0"
+})(["&:before{position:fixed;z-index:9999;top:0;right:0;bottom:0;left:0;display:block;cursor:default;content:'';background:", ";}"], ({
   theme
-}) => theme.colors.dim};
-  }
-`;
-const BaseDrawer = styled.div(({
+}) => theme.colors.dim);
+const BaseDrawer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Drawer__BaseDrawer",
+  componentId: "sc-k4n499-1"
+})(({
   theme
 }) => ({
   display: 'flex',

package/esm/core/EmptyState/index.js

@@ -37,40 +37,24 @@ const EmptyState = ({
     }) : null]
   });
 };
-const BaseEmptyState = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  & > svg {
-    color: ${({
+const BaseEmptyState = /*#__PURE__*/styled.div.withConfig({
+  displayName: "EmptyState__BaseEmptyState",
+  componentId: "sc-vj7hxz-0"
+})(["display:flex;flex-direction:column;align-items:center;& > svg{color:", ";}& > p{color:", ";font-weight:", ";line-height:", ";}& > span{color:", ";font-weight:", ";line-height:", ";}", " ", ""], ({
   theme
-}) => theme.colors['icon/neutral']};
-  }
-  & > p {
-    color: ${({
+}) => theme.colors['icon/neutral'], ({
   theme
-}) => theme.colors['text/neutral']};
-    font-weight: ${({
+}) => theme.colors['text/neutral'], ({
   theme
-}) => theme.fontWeights.bold};
-    line-height: ${({
+}) => theme.fontWeights.bold, ({
   theme
-}) => theme.lineHeights[2]};
-  }
-  & > span {
-    color: ${({
+}) => theme.lineHeights[2], ({
   theme
-}) => theme.colors['text/neutral/subtler']};
-    font-weight: ${({
+}) => theme.colors['text/neutral/subtler'], ({
   theme
-}) => theme.fontWeights.medium};
-    line-height: ${({
+}) => theme.fontWeights.medium, ({
   theme
-}) => theme.lineHeights[2]};
-  }
-
-  ${variant({
+}) => theme.lineHeights[2], variant({
   prop: 'size',
   variants: {
     m: {
@@ -108,9 +92,6 @@ const BaseEmptyState = styled.div`
       }
     }
   }
-})}
-
-  ${sx}
-`;
+}), sx);
 
 export { EmptyState as default };

package/esm/core/FileItem/index.js

@@ -77,7 +77,10 @@ const FileItem = ({
     }) : null
   });
 };
-const BaseFile = styled.div({
+const BaseFile = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FileItem__BaseFile",
+  componentId: "sc-1hkmytj-0"
+})({
   position: 'relative'
 }, ({
   theme,

package/esm/core/Flash/index.js

@@ -38,70 +38,28 @@ const Flash = ({
     }) : null]
   });
 };
-const BaseFlash = styled.div`
-  box-sizing: border-box;
-
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: ${({
+const BaseFlash = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Flash__BaseFlash",
+  componentId: "sc-sffzzy-0"
+})(["box-sizing:border-box;display:flex;flex-direction:row;align-items:flex-start;padding:", ";border-radius:", ";column-gap:", ";& .flash__content{flex:1;display:flex;flex-direction:column;}& .flash__content__children{font-size:", ";font-weight:", ";line-height:", ";color:", ";word-break:keep-all;white-space:pre-wrap;}& .flash__content__buttons{margin-top:", ";}& .flash__leading_icon{min-width:", ";height:", ";}& .flash__trailing_visual{display:flex;flex-direction:column;svg{width:", ";height:", ";color:", ";}}", " ", ""], ({
   theme
-}) => forcePixelValue(theme.space[3])};
-  border-radius: ${({
+}) => forcePixelValue(theme.space[3]), ({
   theme
-}) => forcePixelValue(theme.radii.xs)};
-  column-gap: ${({
+}) => forcePixelValue(theme.radii.xs), ({
   theme
-}) => forcePixelValue(theme.space[2])};
-
-  & .flash__content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
-
-  & .flash__content__children {
-    font-size: ${({
+}) => forcePixelValue(theme.space[2]), ({
   theme
-}) => forcePixelValue(theme.fontSizes.xxs)};
-    font-weight: ${({
+}) => forcePixelValue(theme.fontSizes.xxs), ({
   theme
-}) => theme.fontWeights.medium};
-    line-height: ${({
+}) => theme.fontWeights.medium, ({
   theme
-}) => theme.lineHeights[2]};
-    color: ${({
+}) => theme.lineHeights[2], ({
   theme
-}) => theme.colors['text/neutral']};
-    word-break: keep-all;
-    white-space: pre-wrap;
-  }
-
-  & .flash__content__buttons {
-    margin-top: ${({
+}) => theme.colors['text/neutral'], ({
   theme
-}) => forcePixelValue(theme.space[2])};
-  }
-
-  & .flash__leading_icon {
-    min-width: ${forcePixelValue(16)};
-    height: ${forcePixelValue(16)};
-  }
-
-  & .flash__trailing_visual {
-    display: flex;
-    flex-direction: column;
-
-    svg {
-      width: ${forcePixelValue(16)};
-      height: ${forcePixelValue(16)};
-      color: ${({
+}) => forcePixelValue(theme.space[2]), forcePixelValue(16), forcePixelValue(16), forcePixelValue(16), forcePixelValue(16), ({
   theme
-}) => theme.colors['icon/neutral/bold']};
-    }
-  }
-
-  ${({
+}) => theme.colors['icon/neutral/bold'], ({
   theme
 }) => variant({
   prop: 'variant',
@@ -134,10 +92,7 @@ const BaseFlash = styled.div`
       }
     }
   }
-})}
-
-  ${sx}
-`;
+}), sx);
 var index = /*#__PURE__*/forwardRef(Flash);
 
 export { index as default };

package/esm/core/FormControl/FormControlErrorMessage.js

@@ -27,8 +27,9 @@ const errorMessageKeyframe = keyframes`
     transform: translateY(0);
   }
 `;
-const StyledText = styled(Text)`
-  animation: 170ms ${errorMessageKeyframe} cubic-bezier(0.44, 0.74, 0.36, 1);
-`;
+const StyledText = /*#__PURE__*/styled(Text).withConfig({
+  displayName: "FormControlErrorMessage__StyledText",
+  componentId: "sc-lezmih-0"
+})(["animation:170ms ", " cubic-bezier(0.44,0.74,0.36,1);"], errorMessageKeyframe);
 
 export { FormControlErrorMessage as default };

package/esm/core/FormControl/FormControlLabel.js

@@ -36,8 +36,10 @@ const FormControlLabel = ({
     })
   });
 };
-const VisuallyHidden = styled.span`
-  ${({
+const VisuallyHidden = /*#__PURE__*/styled.span.withConfig({
+  displayName: "FormControlLabel__VisuallyHidden",
+  componentId: "sc-159foe-0"
+})(["", ""], ({
   isVisible = false
 }) => {
   if (isVisible) {
@@ -54,39 +56,22 @@ const VisuallyHidden = styled.span`
       white-space: nowrap;
       border-width: 0;
     `;
-}}
-`;
-const LabelWrapper = styled(View)`
-  display: inline-block;
-  align-self: flex-start;
-
-  font-size: ${({
+});
+const LabelWrapper = /*#__PURE__*/styled(View).withConfig({
+  displayName: "FormControlLabel__LabelWrapper",
+  componentId: "sc-159foe-1"
+})(["display:inline-block;align-self:flex-start;font-size:", ";font-weight:", ";line-height:", ";color:", ";cursor:", ";span.form_control_label__required__false{font-size:inherit;font-weight:inherit;color:", ";}", ";"], ({
   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/subtle']};
-
-  cursor: ${({
+}) => theme.colors['text/neutral/subtle'], ({
   disabled
-}) => disabled ? 'not-allowed' : 'pointer'};
-
-  span.form_control_label__required__false {
-    font-size: inherit;
-    font-weight: inherit;
-    color: ${({
+}) => disabled ? 'not-allowed' : 'pointer', ({
   theme
-}) => theme.colors['text/neutral/subtlest']};
-  }
-
-  ${sx};
-`;
+}) => theme.colors['text/neutral/subtlest'], sx);
 
 export { FormControlLabel as default };

package/esm/core/FormControl/FormControlSuccessMessage.js

@@ -27,8 +27,9 @@ const successMessageKeyframe = keyframes`
     transform: translateY(0);
   }
 `;
-const StyledText = styled(Text)`
-  animation: 170ms ${successMessageKeyframe} cubic-bezier(0.44, 0.74, 0.36, 1);
-`;
+const StyledText = /*#__PURE__*/styled(Text).withConfig({
+  displayName: "FormControlSuccessMessage__StyledText",
+  componentId: "sc-5lduye-0"
+})(["animation:170ms ", " cubic-bezier(0.44,0.74,0.36,1);"], successMessageKeyframe);
 
 export { FormControlSuccessMessage as default };

package/esm/core/GradientText/index.js

@@ -3,7 +3,12 @@ import '../../node_modules/styled-system/dist/index.esm.js';
 import Text from '../Text/index.js';
 import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
 
-const GradientText = styled(Text)(({
+const GradientText = /*#__PURE__*/styled(Text).attrs(props => ({
+  variant: props.variant ?? 'violet'
+})).withConfig({
+  displayName: "GradientText",
+  componentId: "sc-1jku3z1-0"
+})(({
   theme
 }) => variant({
   prop: 'variant',
@@ -20,8 +25,5 @@ const GradientText = styled(Text)(({
   WebkitBackgroundClip: 'text',
   WebkitTextFillColor: 'transparent'
 });
-GradientText.defaultProps = {
-  variant: 'violet'
-};
 
 export { GradientText as default };

package/esm/core/Grid/index.js

@@ -25,7 +25,10 @@ const Grid = /*#__PURE__*/forwardRef(({
     children: children
   });
 });
-const BaseGrid = styled(View)({
+const BaseGrid = /*#__PURE__*/styled(View).withConfig({
+  displayName: "Grid__BaseGrid",
+  componentId: "sc-4l957f-0"
+})({
   display: 'flex',
   flexDirection: 'row'
 }, ({

package/esm/core/HorizontalDivider/index.js

@@ -17,16 +17,9 @@ const HorizontalDivider = ({
   borderBottomColor: color,
   ...props
 });
-const BaseHorizontalDivider = styled.hr`
-  display: block;
-  margin: 0;
-  padding: 0;
-  border: none;
-
-  width: 100%;
-
-  ${border}
-  ${sx}
-`;
+const BaseHorizontalDivider = /*#__PURE__*/styled.hr.withConfig({
+  displayName: "HorizontalDivider__BaseHorizontalDivider",
+  componentId: "sc-1nsxooh-0"
+})(["display:block;margin:0;padding:0;border:none;width:100%;", " ", ""], border, sx);
 
 export { HorizontalDivider as default };

package/esm/core/IconButton/index.js

@@ -28,7 +28,10 @@ const IconButton = /*#__PURE__*/forwardRef(({
     })
   });
 });
-const BaseIconButton = styled(UnstyledButton)(({
+const BaseIconButton = /*#__PURE__*/styled(UnstyledButton).withConfig({
+  displayName: "IconButton__BaseIconButton",
+  componentId: "sc-13ybfes-0"
+})(({
   $loading,
   $disabled,
   theme

package/esm/core/IconToggleButton/index.js

@@ -29,7 +29,10 @@ const IconToggleButton = ({
   ...props,
   children: /*#__PURE__*/jsx(Icon, {})
 });
-const BaseIconToggleButton = styled(UnstyledButton)(({
+const BaseIconToggleButton = /*#__PURE__*/styled(UnstyledButton).withConfig({
+  displayName: "IconToggleButton__BaseIconToggleButton",
+  componentId: "sc-1y68w0-0"
+})(({
   $disabled,
   theme
 }) => ({

package/esm/core/Image/index.js

@@ -3,9 +3,9 @@ import '../../node_modules/styled-system/dist/index.esm.js';
 import { sx } from '../../utils/styled-system/index.js';
 import { layout } from '../../node_modules/@styled-system/layout/dist/index.esm.js';
 
-const Image = styled.img`
-  ${layout}
-  ${sx}
-`;
+const Image = /*#__PURE__*/styled.img.withConfig({
+  displayName: "Image",
+  componentId: "sc-1qz2ku6-0"
+})(["", " ", ""], layout, sx);
 
 export { Image as default };

package/esm/core/Overlay/index.js

@@ -78,22 +78,16 @@ const Overlay = ({
     children: children
   }) : null;
 };
-const BaseOverlay = styled.div`
-  position: absolute;
-  box-shadow: ${({
+const BaseOverlay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Overlay__BaseOverlay",
+  componentId: "sc-1k2jlh8-0"
+})(["position:absolute;box-shadow:", ";background-color:", ";border-radius:", ";overflow:hidden;margin:auto;z-index:99999;", " ", " ", ""], ({
   theme
-}) => theme.shadows['shadow/overlay']};
-  background-color: ${({
+}) => theme.shadows['shadow/overlay'], ({
   theme
-}) => theme.colors['surface/overlay']};
-  border-radius: ${({
+}) => theme.colors['surface/overlay'], ({
   theme
-}) => forcePixelValue(theme.radii.s)};
-  overflow: hidden;
-  margin: auto;
-  z-index: 99999;
-
-  ${variant({
+}) => forcePixelValue(theme.radii.s), variant({
   prop: 'size',
   variants: {
     s: {
@@ -109,11 +103,7 @@ const BaseOverlay = styled.div`
       width: 'auto'
     }
   }
-})}
-
-  ${maxHeight}
-  ${sx}
-`;
+}), maxHeight, sx);
 var Overlay$1 = /*#__PURE__*/forwardRef(Overlay);
 
 export { Overlay$1 as default };

package/esm/core/Pagination/index.js

@@ -106,16 +106,12 @@ const Pagination = ({
     })]
   });
 };
-const BasePagination = styled.nav`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: nowrap;
-  column-gap: ${({
+const BasePagination = /*#__PURE__*/styled.nav.withConfig({
+  displayName: "Pagination__BasePagination",
+  componentId: "sc-1fu43y9-0"
+})(["display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;column-gap:", ";", " ", ""], ({
   theme
-}) => forcePixelValue(theme.space[1])};
-
-  ${variant({
+}) => forcePixelValue(theme.space[1]), variant({
   prop: 'type',
   variants: {
     default: {
@@ -129,39 +125,25 @@ const BasePagination = styled.nav`
       }
     }
   }
-})}
-  ${sx}
-`;
-const PaginationPage = styled(UnstyledButton)`
-  transition: background-color 100ms;
-
-  height: ${forcePixelValue(32)};
-  min-width: ${forcePixelValue(32)};
-
-  border-radius: ${({
+}), sx);
+const PaginationPage = /*#__PURE__*/styled(UnstyledButton).withConfig({
+  displayName: "Pagination__PaginationPage",
+  componentId: "sc-1fu43y9-1"
+})(["transition:background-color 100ms;height:", ";min-width:", ";border-radius:", ";padding:", ";background-color:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";", ""], forcePixelValue(32), forcePixelValue(32), ({
   theme
-}) => forcePixelValue(theme.radii.xs)};
-  padding: ${({
+}) => forcePixelValue(theme.radii.xs), ({
   theme
-}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
-  background-color: ${({
+}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`, ({
   theme
-}) => theme.colors['bg/neutral/subtler']};
-
-  font-size: ${({
+}) => theme.colors['bg/neutral/subtler'], ({
   theme
-}) => forcePixelValue(theme.fontSizes.xs)};
-  font-weight: ${({
+}) => forcePixelValue(theme.fontSizes.xs), ({
   theme
-}) => theme.fontWeights.regular};
-  line-height: ${({
+}) => theme.fontWeights.regular, ({
   theme
-}) => theme.lineHeights[2]};
-  color: ${({
+}) => theme.lineHeights[2], ({
   theme
-}) => theme.colors['text/neutral']};
-
-  ${({
+}) => theme.colors['text/neutral'], ({
   selected
 }) => selected ? css`
           background-color: ${({
@@ -176,99 +158,53 @@ const PaginationPage = styled(UnstyledButton)`
   theme
 }) => theme.colors['bg/neutral/subtler/hovered']};
           }
-        `}
-`;
-const PaginationPageDirection = styled(UnstyledButton)`
-  transition: background-color 100ms;
-
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  column-gap: ${({
+        `);
+const PaginationPageDirection = /*#__PURE__*/styled(UnstyledButton).withConfig({
+  displayName: "Pagination__PaginationPageDirection",
+  componentId: "sc-1fu43y9-2"
+})(["transition:background-color 100ms;display:inline-flex;align-items:center;flex-wrap:nowrap;column-gap:", ";height:", ";min-width:", ";border-radius:", ";padding:", ";background-color:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";& svg{color:", ";width:", ";height:", ";}&:hover:not(:disabled){background-color:", ";}&:disabled{cursor:not-allowed;color:", ";& > svg{color:", ";}}"], ({
   theme
-}) => forcePixelValue(theme.space[1])};
-
-  height: ${forcePixelValue(32)};
-  min-width: ${forcePixelValue(32)};
-
-  border-radius: ${({
+}) => forcePixelValue(theme.space[1]), forcePixelValue(32), forcePixelValue(32), ({
   theme
-}) => forcePixelValue(theme.radii.xs)};
-  padding: ${({
+}) => forcePixelValue(theme.radii.xs), ({
   theme
-}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
-  background-color: ${({
+}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`, ({
   theme
-}) => theme.colors['bg/neutral/subtler']};
-
-  font-size: ${({
+}) => theme.colors['bg/neutral/subtler'], ({
   theme
-}) => forcePixelValue(theme.fontSizes.xs)};
-  font-weight: ${({
+}) => forcePixelValue(theme.fontSizes.xs), ({
   theme
-}) => theme.fontWeights.regular};
-  line-height: ${({
+}) => theme.fontWeights.regular, ({
   theme
-}) => theme.lineHeights[2]};
-  color: ${({
+}) => theme.lineHeights[2], ({
   theme
-}) => theme.colors['text/neutral']};
-
-  & svg {
-    color: ${({
+}) => theme.colors['text/neutral'], ({
   theme
-}) => theme.colors['icon/accent/gray']};
-    width: ${forcePixelValue(16)};
-    height: ${forcePixelValue(16)};
-  }
-
-  &:hover:not(:disabled) {
-    background-color: ${({
+}) => theme.colors['icon/accent/gray'], forcePixelValue(16), forcePixelValue(16), ({
   theme
-}) => theme.colors['bg/neutral/subtler/hovered']};
-  }
-  &:disabled {
-    cursor: not-allowed;
-    color: ${({
+}) => theme.colors['bg/neutral/subtler/hovered'], ({
   theme
-}) => theme.colors['text/disabled']};
-    & > svg {
-      color: ${({
+}) => theme.colors['text/disabled'], ({
   theme
-}) => theme.colors['icon/disabled']};
-    }
-  }
-`;
-const PaginationTruncationIndicator = styled.div`
-  min-width: ${forcePixelValue(32)};
-
-  border-radius: ${({
+}) => theme.colors['icon/disabled']);
+const PaginationTruncationIndicator = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Pagination__PaginationTruncationIndicator",
+  componentId: "sc-1fu43y9-3"
+})(["min-width:", ";border-radius:", ";padding:", ";background-color:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";pointer-events:none;", ""], forcePixelValue(32), ({
   theme
-}) => forcePixelValue(theme.radii.xs)};
-  padding: ${({
+}) => forcePixelValue(theme.radii.xs), ({
   theme
-}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
-  background-color: ${({
+}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`, ({
   theme
-}) => theme.colors['bg/neutral/subtler']};
-
-  font-size: ${({
+}) => theme.colors['bg/neutral/subtler'], ({
   theme
-}) => forcePixelValue(theme.fontSizes.xs)};
-  font-weight: ${({
+}) => forcePixelValue(theme.fontSizes.xs), ({
   theme
-}) => theme.fontWeights.regular};
-  line-height: ${({
+}) => theme.fontWeights.regular, ({
   theme
-}) => theme.lineHeights[2]};
-  color: ${({
+}) => theme.lineHeights[2], ({
   theme
-}) => theme.colors['text/neutral']};
-
-  pointer-events: none;
-
-  ${sx}
-`;
+}) => theme.colors['text/neutral'], sx);
 var index = Object.assign(Pagination, {
   Page: PaginationPage,
   PageDirection: PaginationPageDirection,