@teamturing/react-kit 1.2.3 → 1.2.4

package/esm/core/Button/index.js

@@ -2,7 +2,7 @@ import color from '../../packages/token-studio/esm/token/color/index.js';
 import radii from '../../packages/token-studio/esm/token/radii/index.js';
 import typography from '../../packages/token-studio/esm/token/typography/index.js';
 import { forwardRef } from 'react';
-import Qe from '../../node_modules/styled-components/dist/styled-components.esm.js';
+import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import Spinner from '../Spinner/index.js';
 import View from '../View/index.js';
@@ -60,7 +60,10 @@ const Button = /*#__PURE__*/forwardRef(({
     }) : null]
   });
 });
-const BaseButton = Qe(UnstyledButton)(({
+const BaseButton = styled(UnstyledButton).withConfig({
+  displayName: "Button__BaseButton",
+  componentId: "sc-1yhc0ra-0"
+})(({
   $loading,
   $disabled,
   fillWidth
@@ -308,7 +311,10 @@ const BaseButton = Qe(UnstyledButton)(({
     }
   }
 }));
-const BaseSpinner = Qe(Spinner)(variant({
+const BaseSpinner = styled(Spinner).withConfig({
+  displayName: "Button__BaseSpinner",
+  componentId: "sc-1yhc0ra-1"
+})(variant({
   prop: 'size',
   variants: {
     l: {

package/esm/core/Chip/index.js

@@ -1,7 +1,7 @@
 import color from '../../packages/token-studio/esm/token/color/index.js';
 import radii from '../../packages/token-studio/esm/token/radii/index.js';
 import typography from '../../packages/token-studio/esm/token/typography/index.js';
-import Qe from '../../node_modules/styled-components/dist/styled-components.esm.js';
+import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import { sx } from '../../utils/styled-system/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
@@ -22,7 +22,10 @@ const Chip = ({
   trailingIcon: TrailingIcon,
   children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {}) : null]
 });
-const BaseChip = Qe.span({
+const BaseChip = styled.span.withConfig({
+  displayName: "Chip__BaseChip",
+  componentId: "sc-sq73uo-0"
+})({
   position: 'relative',
   width: 'fit-content',
   borderRadius: radii.full,

package/esm/core/GradientText/index.js

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

package/esm/core/Grid/index.js

@@ -1,6 +1,6 @@
 import space from '../../packages/token-studio/esm/token/space/index.js';
 import { forwardRef } from 'react';
-import Qe from '../../node_modules/styled-components/dist/styled-components.esm.js';
+import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { isArray } from '../../utils/isArray.js';
@@ -28,7 +28,10 @@ const Grid = /*#__PURE__*/forwardRef(({
     children: children
   });
 });
-const BaseGrid = Qe(View)({
+const BaseGrid = styled(View).withConfig({
+  displayName: "Grid__BaseGrid",
+  componentId: "sc-4l957f-0"
+})({
   display: 'flex',
   flexDirection: 'row'
 }, variant({

package/esm/core/IconButton/index.js

@@ -1,7 +1,7 @@
 import color from '../../packages/token-studio/esm/token/color/index.js';
 import radii from '../../packages/token-studio/esm/token/radii/index.js';
 import { forwardRef } from 'react';
-import Qe from '../../node_modules/styled-components/dist/styled-components.esm.js';
+import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import Spinner from '../Spinner/index.js';
 import UnstyledButton from '../_UnstyledButton.js';
@@ -32,7 +32,10 @@ const IconButton = /*#__PURE__*/forwardRef(({
     })
   });
 });
-const BaseIconButton = Qe(UnstyledButton)(({
+const BaseIconButton = styled(UnstyledButton).withConfig({
+  displayName: "IconButton__BaseIconButton",
+  componentId: "sc-13ybfes-0"
+})(({
   $loading,
   $disabled
 }) => ({

package/esm/core/IconToggleButton/index.js

@@ -1,6 +1,6 @@
 import color from '../../packages/token-studio/esm/token/color/index.js';
 import radii from '../../packages/token-studio/esm/token/radii/index.js';
-import Qe from '../../node_modules/styled-components/dist/styled-components.esm.js';
+import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import { sx } from '../../utils/styled-system/index.js';
 import UnstyledButton from '../_UnstyledButton.js';
@@ -29,7 +29,10 @@ const IconToggleButton = ({
     children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
   });
 };
-const BaseIconToggleButton = Qe(UnstyledButton)(({
+const BaseIconToggleButton = styled(UnstyledButton).withConfig({
+  displayName: "IconToggleButton__BaseIconToggleButton",
+  componentId: "sc-1y68w0-0"
+})(({
   $disabled
 }) => ({
   'position': 'relative',

package/esm/core/Space/index.js

@@ -1,12 +1,11 @@
-import Qe from '../../node_modules/styled-components/dist/styled-components.esm.js';
+import styled from 'styled-components';
 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 = Qe.div`
-  width: inherit;
-  ${space};
-  ${sx}
-`;
+const Space = styled.div.withConfig({
+  displayName: "Space",
+  componentId: "sc-4g4g8r-0"
+})(["width:inherit;", ";", ""], space, sx);
 
 export { Space as default };

package/esm/core/Spinner/index.js

@@ -1,19 +1,13 @@
 import 'react';
 import SvgProgressGradient from '../../packages/icons/esm/ProgressGradient.js';
 import color from '../../packages/token-studio/esm/token/color/index.js';
-import Qe, { keyframes as nt } from '../../node_modules/styled-components/dist/styled-components.esm.js';
+import styled, { keyframes } from 'styled-components';
 
-const spin = nt`
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
-const Spinner = Qe(SvgProgressGradient)`
-  animation: ${spin} 1000ms infinite steps(8, end);
-`;
+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);
 Spinner.defaultProps = {
   width: 32,
   height: 32,

package/esm/core/Stack/index.js

@@ -1,6 +1,6 @@
 import space from '../../packages/token-studio/esm/token/space/index.js';
 import { forwardRef } from 'react';
-import Qe from '../../node_modules/styled-components/dist/styled-components.esm.js';
+import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import View from '../View/index.js';
@@ -21,7 +21,10 @@ const Stack = /*#__PURE__*/forwardRef(({
   ...props,
   children: children
 }));
-const BaseStack = Qe(View)({
+const BaseStack = styled(View).withConfig({
+  displayName: "Stack__BaseStack",
+  componentId: "sc-1lqh56h-0"
+})({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap'

package/esm/core/Text/index.js

@@ -1,12 +1,15 @@
 import typography from '../../packages/token-studio/esm/token/typography/index.js';
-import Qe from '../../node_modules/styled-components/dist/styled-components.esm.js';
+import styled from 'styled-components';
 import { fontSize, fontWeight, lineHeight, textAlign } from '../../node_modules/styled-system/dist/index.esm.js';
 import { sx, wordBreak, whiteSpace, textDecoration } from '../../utils/styled-system/index.js';
 import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
 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 = Qe.span({
+const Text = styled.span.withConfig({
+  displayName: "Text",
+  componentId: "sc-yuorjy-0"
+})({
   'display': 'block',
   'whiteSpace': 'pre-wrap',
   '& > span': {

package/esm/core/View/index.js

@@ -1,4 +1,4 @@
-import Qe from '../../node_modules/styled-components/dist/styled-components.esm.js';
+import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import { sx } from '../../utils/styled-system/index.js';
 import { compose } from '../../node_modules/@styled-system/core/dist/index.esm.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 = Qe.div`
-  ${compose(layout, color, flexbox, background, border, position, shadow)}
-  ${sx}
-`;
+const View = styled.div.withConfig({
+  displayName: "View",
+  componentId: "sc-1v428e-0"
+})(["", " ", ""], compose(layout, color, flexbox, background, border, position, shadow), sx);
 
 export { View as default };

package/esm/core/_UnstyledButton.js

@@ -1,14 +1,9 @@
-import Qe from '../node_modules/styled-components/dist/styled-components.esm.js';
+import styled from 'styled-components';
 import { sx } from '../utils/styled-system/index.js';
 
-const UnstyledButton = Qe.button`
-  background: none;
-  border: 0;
-  padding: 0;
-  outline: none;
-  cursor: pointer;
-
-  ${sx}
-`;
+const UnstyledButton = styled.button.withConfig({
+  displayName: "_UnstyledButton__UnstyledButton",
+  componentId: "sc-j96ib-0"
+})(["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.3",
+  "version": "1.2.4",
   "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",
@@ -32,6 +32,7 @@
     "@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",
     "styled-components": "^6.0.7"
@@ -41,12 +42,12 @@
     "@types/styled-system": "^5.1.17",
     "@types/styled-system__css": "^5.0.17",
     "react": "*",
-    "styled-component": "*"
+    "styled-components": "*"
   },
   "dependencies": {
     "@teamturing/icons": "^1.17.6",
     "@teamturing/token-studio": "^1.1.6",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "6caa1ad5a9e4de618caf305b9b26ae46c40455c2"
+  "gitHead": "9322765304ef558814b573121f206de2c696603a"
 }

package/esm/node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js

@@ -1,12 +0,0 @@
-import memoize from '../../memoize/dist/emotion-memoize.esm.js';
-
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
-
-var isPropValid = /* #__PURE__ */memoize(function (prop) {
-  return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
-  /* o */ && prop.charCodeAt(1) === 110
-  /* n */ && prop.charCodeAt(2) < 91;
-}
-/* Z+1 */);
-
-export { isPropValid as default };

package/esm/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js

@@ -1,9 +0,0 @@
-function memoize(fn) {
-  var cache = Object.create(null);
-  return function (arg) {
-    if (cache[arg] === undefined) cache[arg] = fn(arg);
-    return cache[arg];
-  };
-}
-
-export { memoize as default };

package/esm/node_modules/@emotion/unitless/dist/emotion-unitless.esm.js

@@ -1,51 +0,0 @@
-var unitlessKeys = {
-  animationIterationCount: 1,
-  aspectRatio: 1,
-  borderImageOutset: 1,
-  borderImageSlice: 1,
-  borderImageWidth: 1,
-  boxFlex: 1,
-  boxFlexGroup: 1,
-  boxOrdinalGroup: 1,
-  columnCount: 1,
-  columns: 1,
-  flex: 1,
-  flexGrow: 1,
-  flexPositive: 1,
-  flexShrink: 1,
-  flexNegative: 1,
-  flexOrder: 1,
-  gridRow: 1,
-  gridRowEnd: 1,
-  gridRowSpan: 1,
-  gridRowStart: 1,
-  gridColumn: 1,
-  gridColumnEnd: 1,
-  gridColumnSpan: 1,
-  gridColumnStart: 1,
-  msGridRow: 1,
-  msGridRowSpan: 1,
-  msGridColumn: 1,
-  msGridColumnSpan: 1,
-  fontWeight: 1,
-  lineHeight: 1,
-  opacity: 1,
-  order: 1,
-  orphans: 1,
-  tabSize: 1,
-  widows: 1,
-  zIndex: 1,
-  zoom: 1,
-  WebkitLineClamp: 1,
-  // SVG-related properties
-  fillOpacity: 1,
-  floodOpacity: 1,
-  stopOpacity: 1,
-  strokeDasharray: 1,
-  strokeDashoffset: 1,
-  strokeMiterlimit: 1,
-  strokeOpacity: 1,
-  strokeWidth: 1
-};
-
-export { unitlessKeys as default };