@teamturing/react-kit 2.19.23 → 2.19.24

package/dist/core/Pill/index.d.ts

@@ -1,7 +1,7 @@
 import { ComponentType, ElementType, HTMLAttributes, ReactNode, SVGProps, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { ResponsiveValue } from 'styled-system';
 import { SxProp } from '../../utils/styled-system';
-type PillSizeType = 'm';
+type PillSizeType = 's' | 'm';
 type PillVariantType = 'outlined' | 'secondary';
 type Props = {
     /**
@@ -40,7 +40,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
      * 크기를 정의합니다.
      * 반응형 디자인이 적용됩니다.
      */
-    size?: ResponsiveValue<"m"> | undefined;
+    size?: ResponsiveValue<PillSizeType> | undefined;
     /**
      * 색을 정의합니다.
      * hover, active, focused, disabled, loading 등의 모든 상황에 관여합니다.

package/dist/index.js

@@ -22542,9 +22542,6 @@ const Pill = ({
 const BasePill = styled__default.default(UnstyledButton)`
   display: inline-flex;
   align-items: center;
-  border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.xs)};
   column-gap: ${({
   theme
 }) => forcePixelValue(theme.space[2])};
@@ -22593,10 +22590,28 @@ const BasePill = styled__default.default(UnstyledButton)`
 }) => variant({
   prop: 'size',
   variants: {
+    s: {
+      'pl': 2,
+      'pr': !hasRemoveButton ? 2 : 0.25,
+      'height': forcePixelValue(20),
+      'borderRadius': 'xxs',
+      'fontSize': theme.fontSizes.xxs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
+      'columnGap': 0.25,
+      '& svg': {
+        minWidth: 12,
+        height: 12
+      },
+      '& > div': {
+        p: 1
+      }
+    },
     m: {
       'pl': 3,
       'pr': !hasRemoveButton ? 3 : 1,
       'height': forcePixelValue(32),
+      'borderRadius': 'xs',
       'fontSize': theme.fontSizes.xxs,
       'fontWeight': theme.fontWeights.medium,
       'lineHeight': theme.lineHeights[2],

package/esm/core/Pill/index.js

@@ -71,9 +71,6 @@ const Pill = ({
 const BasePill = styled(UnstyledButton)`
   display: inline-flex;
   align-items: center;
-  border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.xs)};
   column-gap: ${({
   theme
 }) => forcePixelValue(theme.space[2])};
@@ -122,10 +119,28 @@ const BasePill = styled(UnstyledButton)`
 }) => variant({
   prop: 'size',
   variants: {
+    s: {
+      'pl': 2,
+      'pr': !hasRemoveButton ? 2 : 0.25,
+      'height': forcePixelValue(20),
+      'borderRadius': 'xxs',
+      'fontSize': theme.fontSizes.xxs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
+      'columnGap': 0.25,
+      '& svg': {
+        minWidth: 12,
+        height: 12
+      },
+      '& > div': {
+        p: 1
+      }
+    },
     m: {
       'pl': 3,
       'pr': !hasRemoveButton ? 3 : 1,
       'height': forcePixelValue(32),
+      'borderRadius': 'xs',
       'fontSize': theme.fontSizes.xxs,
       'fontWeight': theme.fontWeights.medium,
       'lineHeight': theme.lineHeights[2],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.19.23",
+  "version": "2.19.24",
   "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",
@@ -62,5 +62,5 @@
     "react-is": "^18.2.0",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "58ccb149838349dd9245d2deaf370d14d4040ce9"
+  "gitHead": "f2cd17bfe61fb493b4ae8b36a1f1bd433838caa1"
 }