@teamturing/react-kit 1.2.4 → 1.2.6

package/dist/index.js

@@ -1623,11 +1623,17 @@ const SvgProgressGradient = props => /*#__PURE__*/React__namespace.createElement
   opacity: 0.72
 }));
 
-const spin = styled.keyframes(["from{transform:rotate(0);}to{transform:rotate(360deg);}"]);
-const Spinner = styled(SvgProgressGradient).withConfig({
-  displayName: "Spinner",
-  componentId: "sc-13dlgyx-0"
-})(["animation:", " 1000ms infinite steps(8,end);"], spin);
+const spin = styled.keyframes`
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const Spinner = styled(SvgProgressGradient)`
+  animation: ${spin} 1000ms infinite steps(8, end);
+`;
 Spinner.defaultProps = {
   width: 32,
   height: 32,
@@ -1656,15 +1662,20 @@ const wordBreak = system({
   }
 });
 
-const View = styled.div.withConfig({
-  displayName: "View",
-  componentId: "sc-1v428e-0"
-})(["", " ", ""], compose(layout, color, flexbox, background, border, position, shadow), sx);
+const View = styled.div`
+  ${compose(layout, color, flexbox, background, border, position, shadow)}
+  ${sx}
+`;
+
+const UnstyledButton = styled.button`
+  background: none;
+  border: 0;
+  padding: 0;
+  outline: none;
+  cursor: pointer;
 
-const UnstyledButton = styled.button.withConfig({
-  displayName: "_UnstyledButton__UnstyledButton",
-  componentId: "sc-j96ib-0"
-})(["background:none;border:0;padding:0;outline:none;cursor:pointer;", ""], sx);
+  ${sx}
+`;
 
 var jsxRuntime = {exports: {}};
 
@@ -2914,10 +2925,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
     }) : null]
   });
 });
-const BaseButton = styled(UnstyledButton).withConfig({
-  displayName: "Button__BaseButton",
-  componentId: "sc-1yhc0ra-0"
-})(({
+const BaseButton = styled(UnstyledButton)(({
   $loading,
   $disabled,
   fillWidth
@@ -3165,10 +3173,7 @@ const BaseButton = styled(UnstyledButton).withConfig({
     }
   }
 }));
-const BaseSpinner = styled(Spinner).withConfig({
-  displayName: "Button__BaseSpinner",
-  componentId: "sc-1yhc0ra-1"
-})(variant({
+const BaseSpinner = styled(Spinner)(variant({
   prop: 'size',
   variants: {
     l: {
@@ -3223,10 +3228,7 @@ const Chip = ({
   trailingIcon: TrailingIcon,
   children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {}) : null]
 });
-const BaseChip = styled.span.withConfig({
-  displayName: "Chip__BaseChip",
-  componentId: "sc-sq73uo-0"
-})({
+const BaseChip = styled.span({
   position: 'relative',
   width: 'fit-content',
   borderRadius: radii.full,
@@ -3382,10 +3384,7 @@ const BaseChip = styled.span.withConfig({
   }
 }), sx);
 
-const Text = styled.span.withConfig({
-  displayName: "Text",
-  componentId: "sc-yuorjy-0"
-})({
+const Text = styled.span({
   'display': 'block',
   'whiteSpace': 'pre-wrap',
   '& > span': {
@@ -3425,12 +3424,14 @@ Text.defaultProps = {
   color: 'text/neutral'
 };
 
-const GradientText = styled(Text).withConfig({
-  displayName: "GradientText",
-  componentId: "sc-1jku3z1-0"
-})(["background:", ";background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;"], ({
+const GradientText = styled(Text)`
+  background: ${({
   theme
-}) => `linear-gradient(${theme.gradients['text/accent']})`);
+}) => `linear-gradient(${theme.gradients['text/accent']})`};
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;
 
 /**
  * CSS에서 사용할 수 있는 픽셀값으로 강제합니다.
@@ -3462,10 +3463,7 @@ const Grid = /*#__PURE__*/React.forwardRef(({
     children: children
   });
 });
-const BaseGrid = styled(View).withConfig({
-  displayName: "Grid__BaseGrid",
-  componentId: "sc-4l957f-0"
-})({
+const BaseGrid = styled(View)({
   display: 'flex',
   flexDirection: 'row'
 }, variant({
@@ -3569,10 +3567,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
     })
   });
 });
-const BaseIconButton = styled(UnstyledButton).withConfig({
-  displayName: "IconButton__BaseIconButton",
-  componentId: "sc-13ybfes-0"
-})(({
+const BaseIconButton = styled(UnstyledButton)(({
   $loading,
   $disabled
 }) => ({
@@ -3773,10 +3768,7 @@ const IconToggleButton = ({
     children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
   });
 };
-const BaseIconToggleButton = styled(UnstyledButton).withConfig({
-  displayName: "IconToggleButton__BaseIconToggleButton",
-  componentId: "sc-1y68w0-0"
-})(({
+const BaseIconToggleButton = styled(UnstyledButton)(({
   $disabled
 }) => ({
   'position': 'relative',
@@ -3863,10 +3855,11 @@ const ItemList = ({
   });
 };
 
-const Space = styled.div.withConfig({
-  displayName: "Space",
-  componentId: "sc-4g4g8r-0"
-})(["width:inherit;", ";", ""], space, sx);
+const Space = styled.div`
+  width: inherit;
+  ${space};
+  ${sx}
+`;
 
 const Stack = /*#__PURE__*/React.forwardRef(({
   gapX = 0,
@@ -3882,10 +3875,7 @@ const Stack = /*#__PURE__*/React.forwardRef(({
   ...props,
   children: children
 }));
-const BaseStack = styled(View).withConfig({
-  displayName: "Stack__BaseStack",
-  componentId: "sc-1lqh56h-0"
-})({
+const BaseStack = styled(View)({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap'

package/esm/core/Button/index.js

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

package/esm/core/Chip/index.js

@@ -22,10 +22,7 @@ const Chip = ({
   trailingIcon: TrailingIcon,
   children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {}) : null]
 });
-const BaseChip = styled.span.withConfig({
-  displayName: "Chip__BaseChip",
-  componentId: "sc-sq73uo-0"
-})({
+const BaseChip = styled.span({
   position: 'relative',
   width: 'fit-content',
   borderRadius: radii.full,

package/esm/core/GradientText/index.js

@@ -1,11 +1,13 @@
 import styled from 'styled-components';
 import Text from '../Text/index.js';
 
-const GradientText = styled(Text).withConfig({
-  displayName: "GradientText",
-  componentId: "sc-1jku3z1-0"
-})(["background:", ";background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;"], ({
+const GradientText = styled(Text)`
+  background: ${({
   theme
-}) => `linear-gradient(${theme.gradients['text/accent']})`);
+}) => `linear-gradient(${theme.gradients['text/accent']})`};
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;
 
 export { GradientText as default };

package/esm/core/Grid/index.js

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

package/esm/core/IconButton/index.js

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

package/esm/core/IconToggleButton/index.js

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

package/esm/core/Space/index.js

@@ -3,9 +3,10 @@ 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.withConfig({
-  displayName: "Space",
-  componentId: "sc-4g4g8r-0"
-})(["width:inherit;", ";", ""], space, sx);
+const Space = styled.div`
+  width: inherit;
+  ${space};
+  ${sx}
+`;
 
 export { Space as default };

package/esm/core/Spinner/index.js

@@ -3,11 +3,17 @@ import SvgProgressGradient from '../../packages/icons/esm/ProgressGradient.js';
 import color from '../../packages/token-studio/esm/token/color/index.js';
 import styled, { keyframes } from 'styled-components';
 
-const spin = keyframes(["from{transform:rotate(0);}to{transform:rotate(360deg);}"]);
-const Spinner = styled(SvgProgressGradient).withConfig({
-  displayName: "Spinner",
-  componentId: "sc-13dlgyx-0"
-})(["animation:", " 1000ms infinite steps(8,end);"], spin);
+const spin = keyframes`
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const Spinner = styled(SvgProgressGradient)`
+  animation: ${spin} 1000ms infinite steps(8, end);
+`;
 Spinner.defaultProps = {
   width: 32,
   height: 32,

package/esm/core/Stack/index.js

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

package/esm/core/Text/index.js

@@ -6,10 +6,7 @@ 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.withConfig({
-  displayName: "Text",
-  componentId: "sc-yuorjy-0"
-})({
+const Text = styled.span({
   'display': 'block',
   'whiteSpace': 'pre-wrap',
   '& > span': {

package/esm/core/View/index.js

@@ -10,9 +10,9 @@ 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 View = styled.div.withConfig({
-  displayName: "View",
-  componentId: "sc-1v428e-0"
-})(["", " ", ""], compose(layout, color, flexbox, background, border, position, shadow), sx);
+const View = styled.div`
+  ${compose(layout, color, flexbox, background, border, position, shadow)}
+  ${sx}
+`;
 
 export { View as default };

package/esm/core/_UnstyledButton.js

@@ -1,9 +1,14 @@
 import styled from 'styled-components';
 import { sx } from '../utils/styled-system/index.js';
 
-const UnstyledButton = styled.button.withConfig({
-  displayName: "_UnstyledButton__UnstyledButton",
-  componentId: "sc-j96ib-0"
-})(["background:none;border:0;padding:0;outline:none;cursor:pointer;", ""], sx);
+const UnstyledButton = styled.button`
+  background: none;
+  border: 0;
+  padding: 0;
+  outline: none;
+  cursor: pointer;
+
+  ${sx}
+`;
 
 export { UnstyledButton as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "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",
@@ -11,9 +11,11 @@
     "esm"
   ],
   "exports": {
-    "require": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "import": "./esm/index.js"
+    ".": {
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./esm/index.js"
+    }
   },
   "repository": {
     "type": "git",
@@ -32,9 +34,9 @@
     "@types/lodash-es": "^4.17.9",
     "@types/styled-system": "^5.1.17",
     "@types/styled-system__css": "^5.0.17",
-    "babel-plugin-styled-components": "^2.1.4",
     "csstype": "^3.1.2",
     "react": "^18.2.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "styled-components": "^6.0.7"
   },
   "peerDependencies": {
@@ -49,5 +51,5 @@
     "@teamturing/token-studio": "^1.1.6",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "9322765304ef558814b573121f206de2c696603a"
+  "gitHead": "132ebfc316f17f955e98cb7a55cdebce59b219be"
 }