@teamturing/react-kit 2.60.3 → 2.61.1

package/esm/core/UploadInput/index.js

@@ -92,89 +92,36 @@ const UploadInput = ({
     })]
   });
 };
-const UploadInputWrapper = styled.div`
-  width: 100%;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  row-gap: ${({
+const UploadInputWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "UploadInput__UploadInputWrapper",
+  componentId: "sc-1q0agb1-0"
+})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:", ";padding:", ";& > svg{width:16px;height:16px;color:", ";}& > span{font-size:", ";font-weight:", ";line-height:", ";color:", ";}border-width:", ";border-style:dashed;border-color:", ";border-radius:", ";background-color:", ";&.upload-input__wrapper__active{background-color:", ";}position:relative;&:after{content:'';position:absolute;top:", ";right:", ";bottom:", ";left:", ";border:", " solid transparent;border-radius:", ";pointer-events:none;}&:focus-within{&:after{border-color:", ";}}& > button:focus-visible{outline:none;}", " transition:background-color 200ms ease-in-out;"], ({
   theme
-}) => forcePixelValue(theme.space[2])};
-  padding: ${({
+}) => forcePixelValue(theme.space[2]), ({
   theme
-}) => forcePixelValue(theme.space[4])};
-
-  & > svg {
-    width: 16px;
-    height: 16px;
-    color: ${({
+}) => forcePixelValue(theme.space[4]), ({
   theme
-}) => theme.colors['icon/neutral/bold']};
-  }
-
-  & > span {
-    font-size: ${({
+}) => theme.colors['icon/neutral/bold'], ({
   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/subtlest']};
-  }
-
-  border-width: ${forcePixelValue(1)};
-  border-style: dashed;
-  border-color: ${({
+}) => theme.colors['text/neutral/subtlest'], forcePixelValue(1), ({
   theme
-}) => theme.colors['border/neutral/bolder']};
-  border-radius: ${({
+}) => theme.colors['border/neutral/bolder'], ({
   theme
-}) => forcePixelValue(theme.radii.xs)};
-  background-color: ${({
+}) => forcePixelValue(theme.radii.xs), ({
   theme
-}) => theme.colors['bg/neutral/subtlest']};
-
-  &.upload-input__wrapper__active {
-    background-color: ${({
+}) => theme.colors['bg/neutral/subtlest'], ({
   theme
-}) => theme.colors['bg/selected/subtle']};
-  }
-
-  position: relative;
-  &: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['bg/selected/subtle'], forcePixelValue(-1), forcePixelValue(-1), forcePixelValue(-1), forcePixelValue(-1), forcePixelValue(2), ({
   theme
-}) => forcePixelValue(theme.radii.xs)};
-    pointer-events: none;
-  }
-  &:focus-within {
-    &:after {
-      border-color: ${({
+}) => forcePixelValue(theme.radii.xs), ({
   theme
-}) => theme.colors['border/focused']};
-    }
-  }
-
-  & > button:focus-visible {
-    outline: none;
-  }
-
-  ${({
+}) => theme.colors['border/focused'], ({
   theme,
   disabled
 }) => disabled ? {
@@ -186,26 +133,11 @@ const UploadInputWrapper = styled.div`
   '& > span': {
     color: theme.colors['text/disabled']
   }
-} : {}}
-
-  transition: background-color 200ms ease-in-out;
-`;
-const UnstyledInput = styled.input`
-  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;
-  }
-`;
+} : {});
+const UnstyledInput = /*#__PURE__*/styled.input.withConfig({
+  displayName: "UploadInput__UnstyledInput",
+  componentId: "sc-1q0agb1-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;}"]);
 var index = /*#__PURE__*/forwardRef(UploadInput);
 
 export { index as default };

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

package/esm/core/_UnstyledButton.js

@@ -1,16 +1,20 @@
+import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { sx } from '../utils/styled-system/index.js';
+import { jsx } from 'react/jsx-runtime';
 
-const UnstyledButton = styled.button.attrs(props => ({
-  type: props.type ?? 'button'
-}))`
-  background: none;
-  border: 0;
-  padding: 0;
-  outline: none;
-  cursor: pointer;
-
-  ${sx}
-`;
+const BaseButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "_UnstyledButton__BaseButton",
+  componentId: "sc-j96ib-0"
+})(["background:none;border:0;padding:0;outline:none;cursor:pointer;", ""], sx);
+const UnstyledButton = /*#__PURE__*/forwardRef(({
+  type = 'button',
+  ...props
+}, ref) => /*#__PURE__*/jsx(BaseButton, {
+  ref: ref,
+  type: type,
+  ...props
+}));
+UnstyledButton.displayName = 'UnstyledButton';
 
 export { UnstyledButton as default };

package/esm/core/_UnstyledTable/UnstyledTableBody.js

@@ -1,8 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledTableBody = styled.tbody`
-  ${sx}
-`;
+const UnstyledTableBody = /*#__PURE__*/styled.tbody.withConfig({
+  displayName: "UnstyledTableBody",
+  componentId: "sc-uj992b-0"
+})(["", ""], sx);
 
 export { UnstyledTableBody as default };

package/esm/core/_UnstyledTable/UnstyledTableCell.js

@@ -1,8 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledTableCell = styled.td`
-  ${sx}
-`;
+const UnstyledTableCell = /*#__PURE__*/styled.td.withConfig({
+  displayName: "UnstyledTableCell",
+  componentId: "sc-1cmo9z9-0"
+})(["", ""], sx);
 
 export { UnstyledTableCell as default };

package/esm/core/_UnstyledTable/UnstyledTableHead.js

@@ -1,8 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledTableHead = styled.thead`
-  ${sx}
-`;
+const UnstyledTableHead = /*#__PURE__*/styled.thead.withConfig({
+  displayName: "UnstyledTableHead",
+  componentId: "sc-1o3dlyt-0"
+})(["", ""], sx);
 
 export { UnstyledTableHead as default };

package/esm/core/_UnstyledTable/UnstyledTableRow.js

@@ -1,8 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledTableRow = styled.tr`
-  ${sx}
-`;
+const UnstyledTableRow = /*#__PURE__*/styled.tr.withConfig({
+  displayName: "UnstyledTableRow",
+  componentId: "sc-1a9loy1-0"
+})(["", ""], sx);
 
 export { UnstyledTableRow as default };

package/esm/core/_UnstyledTable/index.js

@@ -5,11 +5,10 @@ import UnstyledTableCell from './UnstyledTableCell.js';
 import UnstyledTableHead from './UnstyledTableHead.js';
 import UnstyledTableRow from './UnstyledTableRow.js';
 
-const UnstyledTable = styled.table`
-  border-collapse: collapse;
-
-  ${sx}
-`;
+const UnstyledTable = /*#__PURE__*/styled.table.withConfig({
+  displayName: "_UnstyledTable__UnstyledTable",
+  componentId: "sc-1okwtam-0"
+})(["border-collapse:collapse;", ""], sx);
 var index = Object.assign(UnstyledTable, {
   Head: UnstyledTableHead,
   Body: UnstyledTableBody,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.60.3",
+  "version": "2.61.1",
   "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",
@@ -37,6 +37,7 @@
     "@types/react-is": "^18.2.2",
     "@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",
@@ -64,5 +65,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "4e658f5693e051d89c2eac67c125086b9635dfdc"
+  "gitHead": "6ec3a2fbe8c64af81d4f2e27ab88ebccc7792073"
 }