@teamturing/react-kit 2.60.2 → 2.61.0

package/esm/core/ActionList/ActionListItem.js

@@ -128,8 +128,10 @@ const ActionListItem = ({
     })]
   });
 };
-const VisualWrapper = styled(View)`
-  ${variant({
+const VisualWrapper = /*#__PURE__*/styled(View).withConfig({
+  displayName: "ActionListItem__VisualWrapper",
+  componentId: "sc-cpn5js-0"
+})(["", ""], variant({
   prop: 'variant',
   variants: {
     neutral: {
@@ -145,40 +147,23 @@ const VisualWrapper = styled(View)`
       }
     }
   }
-})}
-`;
-const BaseActionListItem = styled.li`
-  display: flex;
-  align-items: flex-start;
-
-  font-size: ${({
+}));
+const BaseActionListItem = /*#__PURE__*/styled.li.withConfig({
+  displayName: "ActionListItem__BaseActionListItem",
+  componentId: "sc-cpn5js-1"
+})(["display:flex;align-items:flex-start;font-size:", ";font-weight:", ";line-height:", ";& svg{width:", ";height:", ";}padding:", ";background-color:", ";border-radius:", ";cursor:pointer;transition:background-color 100ms;", " ", " ", ";"], ({
   theme
-}) => forcePixelValue(theme.fontSizes.xs)};
-  font-weight: ${({
+}) => forcePixelValue(theme.fontSizes.xs), ({
   theme
-}) => theme.fontWeights.medium};
-  line-height: ${({
+}) => theme.fontWeights.medium, ({
   theme
-}) => theme.lineHeights[2]};
-
-  & svg {
-    width: ${forcePixelValue(20)};
-    height: ${forcePixelValue(20)};
-  }
-
-  padding: ${({
+}) => theme.lineHeights[2], forcePixelValue(20), forcePixelValue(20), ({
   theme
-}) => forcePixelValue(theme.space[3])};
-  background-color: ${({
+}) => forcePixelValue(theme.space[3]), ({
   theme
-}) => theme.colors['bg/neutral/subtler']};
-  border-radius: ${({
+}) => theme.colors['bg/neutral/subtler'], ({
   theme
-}) => forcePixelValue(theme.radii.xs)};
-  cursor: pointer;
-  transition: background-color 100ms;
-
-  ${({
+}) => forcePixelValue(theme.radii.xs), ({
   theme,
   disabled
 }) => disabled ? css`
@@ -202,9 +187,7 @@ const BaseActionListItem = styled.li`
             outline-color: ${theme.colors['border/focused']};
             outline-offset: ${forcePixelValue(-2)};
           }
-        `}
-
-  ${({
+        `, ({
   theme,
   disabled,
   variant
@@ -212,93 +195,30 @@ const BaseActionListItem = styled.li`
           color: ${theme.colors['text/danger']};
         ` : !disabled && variant === 'neutral' ? css`
           color: ${theme.colors['text/neutral']};
-        ` : null}
-
-  ${sx};
-`;
-const FakeCheckbox = styled.div`
-  position: relative;
-
-  width: ${forcePixelValue(20)};
-  height: ${forcePixelValue(20)};
-
-  border-width: ${forcePixelValue(2)};
-  border-style: solid;
-  border-color: ${({
+        ` : null, sx);
+const FakeCheckbox = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ActionListItem__FakeCheckbox",
+  componentId: "sc-cpn5js-2"
+})(["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='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A\");mask-size:100%;-webkit-mask-size:100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;}&[aria-disabled='true']{background-color:", ";border-color:", ";}&[aria-checked='true']{background-color:", ";border-width:0;&::before{visibility:visible;}&[aria-disabled='true']{background-color:", ";border-color:", ";&::before{background-color:", ";}}}", ""], forcePixelValue(20), forcePixelValue(20), forcePixelValue(2), ({
   theme
-}) => theme.colors['border/neutral']};
-  border-radius: ${({
+}) => theme.colors['border/neutral'], ({
   theme
-}) => `${forcePixelValue(theme.radii.xxs)}`};
-  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.xxs)}`, ({
   theme
-}) => `${forcePixelValue(theme.radii.xxs)}`};
-
-    background-color: ${({
+}) => `${forcePixelValue(theme.radii.xxs)}`, ({
   theme
-}) => theme.colors['icon/inverse']};
-    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A");
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A");
-    mask-size: 100%;
-    -webkit-mask-size: 100%;
-    mask-repeat: no-repeat;
-    -webkit-mask-repeat: no-repeat;
-    mask-position: center;
-    -webkit-mask-position: center;
-  }
-
-  &[aria-disabled='true'] {
-    background-color: ${({
+}) => theme.colors['icon/inverse'], ({
   theme
-}) => theme.colors['bg/disabled']};
-    border-color: ${({
+}) => theme.colors['bg/disabled'], ({
   theme
-}) => theme.colors['border/disabled']};
-  }
-
-  &[aria-checked='true'] {
-    background-color: ${({
+}) => theme.colors['border/disabled'], ({
   theme
-}) => theme.colors['bg/primary']};
-    border-width: 0;
-
-    &::before {
-      visibility: visible;
-    }
-
-    &[aria-disabled='true'] {
-      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']};
-      }
-    }
-  }
-
-  ${sx}
-`;
+}) => theme.colors['icon/disabled'], sx);
 
 export { ActionListItem as default };

package/esm/core/ActionList/ActionListSectionHeader.js

@@ -12,27 +12,19 @@ const ActionListSectionHeader = ({
     ...props
   });
 };
-const BaseActionListSectionHeader = styled.div`
-  color: ${({
+const BaseActionListSectionHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ActionListSectionHeader__BaseActionListSectionHeader",
+  componentId: "sc-sx3na3-0"
+})(["color:", ";font-size:", ";font-weight:", ";line-height:", ";white-space:pre-wrap;padding:", ";", ";"], ({
   theme
-}) => theme.colors['text/neutral/subtlest']};
-  font-size: ${({
+}) => theme.colors['text/neutral/subtlest'], ({
   theme
-}) => forcePixelValue(theme.fontSizes.xxs)};
-  font-weight: ${({
+}) => forcePixelValue(theme.fontSizes.xxs), ({
   theme
-}) => theme.fontWeights.bold};
-  line-height: ${({
+}) => theme.fontWeights.bold, ({
   theme
-}) => theme.lineHeights[2]};
-
-  white-space: pre-wrap;
-
-  padding: ${({
+}) => theme.lineHeights[2], ({
   theme
-}) => `${forcePixelValue(theme.space[1])} ${forcePixelValue(theme.space[3])}}`};
-
-  ${sx};
-`;
+}) => `${forcePixelValue(theme.space[1])} ${forcePixelValue(theme.space[3])}}`, sx);
 
 export { ActionListSectionHeader as default };

package/esm/core/ActionList/index.js

@@ -24,13 +24,10 @@ const ActionList = ({
     })
   });
 };
-const BaseActionList = styled.ul`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  ${sx}
-`;
+const BaseActionList = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "ActionList__BaseActionList",
+  componentId: "sc-1epqzss-0"
+})(["list-style:none;padding:0;margin:0;", ""], sx);
 var index = Object.assign(ActionList, {
   Item: ActionListItem,
   SectionDivider: ActionListSectionDivider,

package/esm/core/Avatar/index.js

@@ -23,13 +23,12 @@ const Avatar = /*#__PURE__*/forwardRef(({
   size: size,
   ...props
 }));
-const BaseAvatar = styled(Image)`
-  border-radius: ${({
+const BaseAvatar = /*#__PURE__*/styled(Image).withConfig({
+  displayName: "Avatar__BaseAvatar",
+  componentId: "sc-1f1ok6x-0"
+})(["border-radius:", ";object-fit:cover;", " ", ""], ({
   theme
-}) => forcePixelValue(theme.radii.full)};
-  object-fit: cover;
-
-  ${variant({
+}) => forcePixelValue(theme.radii.full), variant({
   prop: 'size',
   variants: {
     xxs: {
@@ -65,9 +64,6 @@ const BaseAvatar = styled(Image)`
       height: 64
     }
   }
-})}
-
-  ${sx}
-`;
+}), sx);
 
 export { Avatar as default };

package/esm/core/AvatarGroup/AvatarGroupItem.js

@@ -18,12 +18,10 @@ const AvatarGroupItem = ({
     })
   })
 });
-const BaseAvatarGroupItem = styled.li`
-  display: inline-flex;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-`;
+const BaseAvatarGroupItem = /*#__PURE__*/styled.li.withConfig({
+  displayName: "AvatarGroupItem__BaseAvatarGroupItem",
+  componentId: "sc-1cmo31h-0"
+})(["display:inline-flex;list-style:none;padding:0;margin:0;"]);
 var AvatarGroupItem$1 = /*#__PURE__*/forwardRef(AvatarGroupItem);
 
 export { AvatarGroupItem$1 as default };

package/esm/core/AvatarGroup/index.js

@@ -80,45 +80,24 @@ const AvatarGroup = ({
     }) : null]
   });
 };
-const AvatarGroupWrapper = styled.div`
-  display: inline-flex;
-  align-items: center;
-  column-gap: ${({
+const AvatarGroupWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AvatarGroup__AvatarGroupWrapper",
+  componentId: "sc-17ktc6b-0"
+})(["display:inline-flex;align-items:center;column-gap:", ";"], ({
   theme
-}) => forcePixelValue(theme.space[1])};
-`;
-const BaseAvatarGroup = styled.ol`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  display: inline-flex;
-  flex-direction: row-reverse;
-  align-items: center;
-
-  & > * {
-    position: relative;
-    background-color: ${({
+}) => forcePixelValue(theme.space[1]));
+const BaseAvatarGroup = /*#__PURE__*/styled.ol.withConfig({
+  displayName: "AvatarGroup__BaseAvatarGroup",
+  componentId: "sc-17ktc6b-1"
+})(["list-style:none;padding:0;margin:0;display:inline-flex;flex-direction:row-reverse;align-items:center;& > *{position:relative;background-color:", ";padding:", ";border-radius:", ";margin-left:", ";&:last-child{margin-left:0;}}", ""], ({
   theme
-}) => theme.colors['border/neutral/subtle']};
-    padding: ${({
+}) => theme.colors['border/neutral/subtle'], ({
   theme
-}) => forcePixelValue(theme.space['0.25'])};
-    border-radius: ${({
+}) => forcePixelValue(theme.space['0.25']), ({
   theme
-}) => forcePixelValue(theme.radii.full)};
-
-    margin-left: ${({
+}) => forcePixelValue(theme.radii.full), ({
   theme
-}) => forcePixelValue(theme.space[-1])};
-
-    &:last-child {
-      margin-left: 0;
-    }
-  }
-
-  ${sx}
-`;
+}) => forcePixelValue(theme.space[-1]), sx);
 var index = Object.assign( /*#__PURE__*/forwardRef(AvatarGroup), {
   Item: AvatarGroupItem
 });

package/esm/core/BadgeAttacher/index.js

@@ -17,11 +17,9 @@ const BadgeAttacher = ({
     }
   })]
 });
-const BadgeAttacherWrapper = styled.div`
-  position: relative;
-  width: fit-content;
-
-  ${sx}
-`;
+const BadgeAttacherWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BadgeAttacher__BadgeAttacherWrapper",
+  componentId: "sc-9c4lfq-0"
+})(["position:relative;width:fit-content;", ""], sx);
 
 export { BadgeAttacher as default };

package/esm/core/Breadcrumbs/BreadcrumbsItem.js

@@ -32,43 +32,26 @@ const BreadcrumbsItem = ({
     children: baseBreadCrumbsItem
   }) : baseBreadCrumbsItem;
 };
-const BaseBreadcrumbsItem = styled.a`
-  display: inline-block;
-  font-size: ${({
+const BaseBreadcrumbsItem = /*#__PURE__*/styled.a.withConfig({
+  displayName: "BreadcrumbsItem__BaseBreadcrumbsItem",
+  componentId: "sc-p481rg-0"
+})(["display:inline-block;font-size:", ";font-weight:", ";line-height:", ";color:", ";cursor:pointer;&:hover{text-decoration:underline;}text-overflow:ellipsis;overflow:hidden;word-break:break-word;white-space:nowrap;max-width:", ";", ""], ({
   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/subtlest']};
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  text-overflow: ellipsis;
-  overflow: hidden;
-  word-break: break-word;
-  white-space: nowrap;
-
-  max-width: ${({
+}) => theme.colors['text/neutral/subtlest'], ({
   truncatedWidth
-}) => truncatedWidth ? forcePixelValue(truncatedWidth) : ''};
-
-  ${({
+}) => truncatedWidth ? forcePixelValue(truncatedWidth) : '', ({
   selected
 }) => selected ? css`
           color: ${({
   theme
 }) => theme.colors['text/neutral/subtle']};
           pointer-events: none;
-        ` : ''}
-`;
+        ` : '');
 
 export { BreadcrumbsItem as default };

package/esm/core/Breadcrumbs/index.js

@@ -24,47 +24,28 @@ const Breadcrumbs = ({
     }))
   });
 };
-const BaseBreadcrumbs = styled.nav`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-
-  column-gap: ${({
+const BaseBreadcrumbs = /*#__PURE__*/styled.nav.withConfig({
+  displayName: "Breadcrumbs__BaseBreadcrumbs",
+  componentId: "sc-1lwv2x7-0"
+})(["display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;column-gap:", ";row-gap:", ";"], ({
   theme
-}) => forcePixelValue(theme.space[2])};
-  row-gap: ${({
+}) => forcePixelValue(theme.space[2]), ({
   theme
-}) => forcePixelValue(theme.space[1])};
-`;
-const BreadcrumbsItemWrapper = styled.span`
-  display: inline-flex;
-
-  &::after {
-    content: '/';
-    font-size: ${({
+}) => forcePixelValue(theme.space[1]));
+const BreadcrumbsItemWrapper = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbsItemWrapper",
+  componentId: "sc-1lwv2x7-1"
+})(["display:inline-flex;&::after{content:'/';font-size:", ";font-weight:", ";line-height:", ";color:", ";margin-left:", ";}&:last-child{&::after{content:none;}}"], ({
   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/subtlest']};
-    margin-left: ${({
+}) => theme.colors['text/neutral/subtlest'], ({
   theme
-}) => forcePixelValue(theme.space[2])};
-  }
-
-  &:last-child {
-    &::after {
-      content: none;
-    }
-  }
-`;
+}) => forcePixelValue(theme.space[2]));
 var index = Object.assign(Breadcrumbs, {
   Item: BreadcrumbsItem
 });

package/esm/core/Button/index.js

@@ -64,7 +64,10 @@ const Button = /*#__PURE__*/forwardRef(({
     }) : null]
   });
 });
-const BaseButton = styled(UnstyledButton)(({
+const BaseButton = /*#__PURE__*/styled(UnstyledButton).withConfig({
+  displayName: "Button__BaseButton",
+  componentId: "sc-1yhc0ra-0"
+})(({
   $loading,
   $disabled,
   fillWidth,
@@ -327,7 +330,10 @@ const BaseButton = styled(UnstyledButton)(({
     }
   }
 }));
-const BaseSpinner = styled(Spinner)(variant({
+const BaseSpinner = /*#__PURE__*/styled(Spinner).withConfig({
+  displayName: "Button__BaseSpinner",
+  componentId: "sc-1yhc0ra-1"
+})(variant({
   prop: 'size',
   variants: {
     l: {

package/esm/core/Card/index.js

@@ -11,18 +11,13 @@ import { border } from '../../node_modules/@styled-system/border/dist/index.esm.
 import { position } from '../../node_modules/@styled-system/position/dist/index.esm.js';
 import { shadow } from '../../node_modules/@styled-system/shadow/dist/index.esm.js';
 
-const Card = styled.div`
-  border-width: ${forcePixelValue(1)};
-  border-style: solid;
-  border-color: ${({
+const Card = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Card",
+  componentId: "sc-1eobla7-0"
+})(["border-width:", ";border-style:solid;border-color:", ";border-radius:", ";", " ", ""], forcePixelValue(1), ({
   theme
-}) => theme.colors['border/neutral']};
-  border-radius: ${({
+}) => theme.colors['border/neutral'], ({
   theme
-}) => forcePixelValue(theme.radii['s'])};
-
-  ${compose(layout, color, flexbox, background, border, position, shadow)}
-  ${sx}
-`;
+}) => forcePixelValue(theme.radii['s']), compose(layout, color, flexbox, background, border, position, shadow), sx);
 
 export { Card as default };