@teamturing/react-kit 2.39.1 → 2.40.0

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ColorKey, RadiiKey, SurfaceElevationKey } from '@teamturing/token-studio';
+import { ColorKey, RadiiKey, SpaceKey, SurfaceElevationKey } from '@teamturing/token-studio';
 import { LayoutProps, ColorProps, FlexboxProps, BackgroundProps, BorderProps, PositionProps, ShadowProps, BorderRadiusProps, Theme, BorderColorProps } from 'styled-system';
-import { SxProp } from '../../utils/styled-system';
-type Props = {} & SxProp & LayoutProps & ColorProps<Theme, ColorKey | SurfaceElevationKey> & FlexboxProps & BackgroundProps & BorderProps & BorderColorProps<Theme, ColorKey | SurfaceElevationKey> & PositionProps & ShadowProps<Theme> & BorderRadiusProps<Theme, RadiiKey>;
+import { ColumnGapProps, GapProps, RowGapProps, SxProp } from '../../utils/styled-system';
+type Props = {} & SxProp & LayoutProps & ColorProps<Theme, ColorKey | SurfaceElevationKey> & FlexboxProps & BackgroundProps & BorderProps & BorderColorProps<Theme, ColorKey | SurfaceElevationKey> & PositionProps & ShadowProps<Theme> & BorderRadiusProps<Theme, RadiiKey> & GapProps<Theme, SpaceKey> & ColumnGapProps<Theme, SpaceKey> & RowGapProps<Theme, SpaceKey>;
 declare const View: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>>;
 export default View;
 export type { Props as ViewProps };

package/dist/index.js

@@ -1062,6 +1062,24 @@ const lineClamp = system({
     scale: 'WebkitLineClamp'
   }
 });
+const gap = system({
+  gap: {
+    property: 'gap',
+    scale: 'space'
+  }
+});
+const columnGap = system({
+  columnGap: {
+    property: 'columnGap',
+    scale: 'space'
+  }
+});
+const rowGap = system({
+  rowGap: {
+    property: 'rowGap',
+    scale: 'space'
+  }
+});
 
 const UnstyledTableBody = styled__default.default.tbody`
   ${sx}
@@ -1594,6 +1612,32 @@ const SvgCamera = props => /*#__PURE__*/React__namespace.createElement("svg", _e
   clipRule: "evenodd"
 }));
 
+const SvgCameraColor = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#9C7EEF",
+  fillRule: "evenodd",
+  d: "M11.98 18.28a5.26 5.26 0 1 0 0-10.52 5.26 5.26 0 0 0 0 10.52ZM12 16.4a3.36 3.36 0 1 0 0-6.72 3.36 3.36 0 0 0 0 6.72Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React__namespace.createElement("circle", {
+  cx: 19.125,
+  cy: 8.625,
+  r: 1.125,
+  fill: "#9C7EEF"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#D9CDF9",
+  d: "M9.628 10.648A3.359 3.359 0 0 1 12 9.664a3.359 3.359 0 0 1 3.355 3.356A3.358 3.358 0 0 1 12 16.376a3.358 3.358 0 0 1-3.355-3.356c0-.89.354-1.743.983-2.372Z"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#D9CDF9",
+  fillRule: "evenodd",
+  d: "M17.159 5.136h2.954a2.52 2.52 0 0 1 2.521 2.52v11.601a2.52 2.52 0 0 1-2.521 2.52H3.887a2.522 2.522 0 0 1-2.521-2.52V7.656a2.52 2.52 0 0 1 2.521-2.52h2.954l1.036-2.129a2.1 2.1 0 0 1 1.888-1.18h4.413a2.1 2.1 0 0 1 1.868 1.14l1.113 2.169ZM8.292 16.729A5.252 5.252 0 0 0 12 18.267a5.252 5.252 0 0 0 5.246-5.246A5.252 5.252 0 0 0 12 7.774a5.252 5.252 0 0 0-5.246 5.247 5.252 5.252 0 0 0 1.538 3.708ZM19.125 9.75a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25Z",
+  clipRule: "evenodd"
+}));
+
 const SvgCard = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -3456,26 +3500,15 @@ const SvgPaperPenColor = props => /*#__PURE__*/React__namespace.createElement("s
   height: "1em",
   fill: "none",
   viewBox: "0 0 24 24"
-}, props), /*#__PURE__*/React__namespace.createElement("g", {
-  clipPath: "url(#paper_pen_color_svg__a)"
-}, /*#__PURE__*/React__namespace.createElement("rect", {
-  width: 16.457,
-  height: 20.197,
-  x: 3.5,
-  y: 1.645,
-  fill: "#C6D8FA",
-  rx: 1.175
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#D9CDF9",
+  d: "M3.5 2.82c0-.65.526-1.175 1.175-1.175h14.106c.65 0 1.176.526 1.176 1.175v17.846c0 .65-.527 1.175-1.176 1.175H4.675c-.649 0-1.175-.526-1.175-1.175V2.82Z"
 }), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "#6D99F1",
+  fill: "#9C7EEF",
   fillRule: "evenodd",
-  d: "m19.205 11.89-4.239 4.239-.578 2.156-.38 1.42a.235.235 0 0 0 .287.287l1.42-.38 2.156-.579 4.24-4.238-2.906-2.905Zm4.658.491-2.244-2.244a.466.466 0 0 0-.66 0L19.8 11.294l2.906 2.906 1.157-1.158a.469.469 0 0 0 0-.661Z",
+  d: "m19.205 11.89-4.239 4.239-.578 2.156-.38 1.42a.235.235 0 0 0 .287.287l1.42-.38 2.156-.579 4.24-4.238-2.906-2.905Zm4.658.491-2.244-2.244a.467.467 0 0 0-.66 0L19.8 11.294l2.906 2.906 1.157-1.158a.469.469 0 0 0 0-.661Z",
   clipRule: "evenodd"
-})), /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-  id: "paper_pen_color_svg__a"
-}, /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "#fff",
-  d: "M0 0h24v24H0z"
-}))));
+}));
 
 const SvgPaperTwo = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -4806,6 +4839,7 @@ var icons = /*#__PURE__*/Object.freeze({
   CalendarCheckIcon: SvgCalendarCheck,
   CalendarColorIcon: SvgCalendarColor,
   CalendarIcon: SvgCalendar,
+  CameraColorIcon: SvgCameraColor,
   CameraIcon: SvgCamera,
   CardIcon: SvgCard,
   CardsPercentColorIcon: SvgCardsPercentColor,
@@ -5416,7 +5450,7 @@ if (process.env.NODE_ENV === 'production') {
 var reactIsExports = reactIs.exports;
 
 const View = styled__default.default.div`
-  ${compose(layout$1, color$2, flexbox, background, border, position, shadow$1)}
+  ${compose(layout$1, color$2, flexbox, background, border, position, shadow$1, gap, columnGap, rowGap)}
   ${sx}
 `;
 
@@ -39935,7 +39969,10 @@ exports.Tooltip = Tooltip$1;
 exports.UnstyledButton = UnstyledButton;
 exports.UnstyledTable = index$e;
 exports.View = View;
+exports.columnGap = columnGap;
+exports.gap = gap;
 exports.lineClamp = lineClamp;
+exports.rowGap = rowGap;
 exports.sx = sx;
 exports.textDecoration = textDecoration;
 exports.theme = theme;

package/dist/utils/styled-system/index.d.ts

@@ -1,6 +1,6 @@
 import { SystemStyleObject } from '@styled-system/css';
 import * as CSS from 'csstype';
-import { RequiredTheme, ResponsiveValue, Theme } from 'styled-system';
+import { RequiredTheme, ResponsiveValue, Theme, ThemeValue } from 'styled-system';
 type CSSCustomProperties = {
     [key: `--${string}`]: string | number;
 };
@@ -31,5 +31,17 @@ type LineClampProps<ThemeType extends Theme = RequiredTheme> = {
     lineClamp?: ResponsiveValue<CSS.Property.LineClamp, ThemeType> | undefined;
 };
 declare const lineClamp: import("styled-system").styleFn;
-export { sx, textDecoration, whiteSpace, wordBreak, lineClamp };
-export type { BetterSystemStyleObject, AsProp, TextDecorationProps, WhiteSpaceProps, WordBreakProps, LineClampProps };
+type GapProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> = {
+    gap?: ResponsiveValue<TVal, ThemeType> | undefined;
+};
+declare const gap: import("styled-system").styleFn;
+type ColumnGapProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> = {
+    columnGap?: ResponsiveValue<TVal, ThemeType> | undefined;
+};
+declare const columnGap: import("styled-system").styleFn;
+type RowGapProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> = {
+    rowGap?: ResponsiveValue<TVal, ThemeType> | undefined;
+};
+declare const rowGap: import("styled-system").styleFn;
+export { sx, textDecoration, whiteSpace, wordBreak, lineClamp, gap, columnGap, rowGap };
+export type { BetterSystemStyleObject, AsProp, TextDecorationProps, WhiteSpaceProps, WordBreakProps, LineClampProps, GapProps, ColumnGapProps, RowGapProps, };

package/esm/core/View/index.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
-import { sx } from '../../utils/styled-system/index.js';
+import { sx, gap, columnGap, rowGap } from '../../utils/styled-system/index.js';
 import { compose } from '../../node_modules/@styled-system/core/dist/index.esm.js';
 import { layout } from '../../node_modules/@styled-system/layout/dist/index.esm.js';
 import { color } from '../../node_modules/@styled-system/color/dist/index.esm.js';
@@ -11,7 +11,7 @@ import { position } from '../../node_modules/@styled-system/position/dist/index.
 import { shadow } from '../../node_modules/@styled-system/shadow/dist/index.esm.js';
 
 const View = styled.div`
-  ${compose(layout, color, flexbox, background, border, position, shadow)}
+  ${compose(layout, color, flexbox, background, border, position, shadow, gap, columnGap, rowGap)}
   ${sx}
 `;
 

package/esm/index.js

@@ -59,5 +59,5 @@ export { default as useSafeLayoutEffect } from './hook/useSafeLayoutEffect.js';
 export { default as useTabState } from './hook/useTabState.js';
 export { default as useToggleState } from './hook/useToggleState.js';
 export { default as theme } from './theme/index.js';
-export { lineClamp, sx, textDecoration, whiteSpace, wordBreak } from './utils/styled-system/index.js';
+export { columnGap, gap, lineClamp, rowGap, sx, textDecoration, whiteSpace, wordBreak } from './utils/styled-system/index.js';
 export { AnimatePresence } from './node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';

package/esm/packages/icons/esm/CameraColor.js

@@ -0,0 +1,30 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgCameraColor = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "#9C7EEF",
+  fillRule: "evenodd",
+  d: "M11.98 18.28a5.26 5.26 0 1 0 0-10.52 5.26 5.26 0 0 0 0 10.52ZM12 16.4a3.36 3.36 0 1 0 0-6.72 3.36 3.36 0 0 0 0 6.72Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React.createElement("circle", {
+  cx: 19.125,
+  cy: 8.625,
+  r: 1.125,
+  fill: "#9C7EEF"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "#D9CDF9",
+  d: "M9.628 10.648A3.359 3.359 0 0 1 12 9.664a3.359 3.359 0 0 1 3.355 3.356A3.358 3.358 0 0 1 12 16.376a3.358 3.358 0 0 1-3.355-3.356c0-.89.354-1.743.983-2.372Z"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "#D9CDF9",
+  fillRule: "evenodd",
+  d: "M17.159 5.136h2.954a2.52 2.52 0 0 1 2.521 2.52v11.601a2.52 2.52 0 0 1-2.521 2.52H3.887a2.522 2.522 0 0 1-2.521-2.52V7.656a2.52 2.52 0 0 1 2.521-2.52h2.954l1.036-2.129a2.1 2.1 0 0 1 1.888-1.18h4.413a2.1 2.1 0 0 1 1.868 1.14l1.113 2.169ZM8.292 16.729A5.252 5.252 0 0 0 12 18.267a5.252 5.252 0 0 0 5.246-5.246A5.252 5.252 0 0 0 12 7.774a5.252 5.252 0 0 0-5.246 5.247 5.252 5.252 0 0 0 1.538 3.708ZM19.125 9.75a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25Z",
+  clipRule: "evenodd"
+}));
+
+export { SvgCameraColor as default };

package/esm/packages/icons/esm/PaperPenColor.js

@@ -7,25 +7,14 @@ const SvgPaperPenColor = props => /*#__PURE__*/React.createElement("svg", _exten
   height: "1em",
   fill: "none",
   viewBox: "0 0 24 24"
-}, props), /*#__PURE__*/React.createElement("g", {
-  clipPath: "url(#paper_pen_color_svg__a)"
-}, /*#__PURE__*/React.createElement("rect", {
-  width: 16.457,
-  height: 20.197,
-  x: 3.5,
-  y: 1.645,
-  fill: "#C6D8FA",
-  rx: 1.175
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "#D9CDF9",
+  d: "M3.5 2.82c0-.65.526-1.175 1.175-1.175h14.106c.65 0 1.176.526 1.176 1.175v17.846c0 .65-.527 1.175-1.176 1.175H4.675c-.649 0-1.175-.526-1.175-1.175V2.82Z"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: "#6D99F1",
+  fill: "#9C7EEF",
   fillRule: "evenodd",
-  d: "m19.205 11.89-4.239 4.239-.578 2.156-.38 1.42a.235.235 0 0 0 .287.287l1.42-.38 2.156-.579 4.24-4.238-2.906-2.905Zm4.658.491-2.244-2.244a.466.466 0 0 0-.66 0L19.8 11.294l2.906 2.906 1.157-1.158a.469.469 0 0 0 0-.661Z",
+  d: "m19.205 11.89-4.239 4.239-.578 2.156-.38 1.42a.235.235 0 0 0 .287.287l1.42-.38 2.156-.579 4.24-4.238-2.906-2.905Zm4.658.491-2.244-2.244a.467.467 0 0 0-.66 0L19.8 11.294l2.906 2.906 1.157-1.158a.469.469 0 0 0 0-.661Z",
   clipRule: "evenodd"
-})), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-  id: "paper_pen_color_svg__a"
-}, /*#__PURE__*/React.createElement("path", {
-  fill: "#fff",
-  d: "M0 0h24v24H0z"
-}))));
+}));
 
 export { SvgPaperPenColor as default };

package/esm/packages/icons/esm/index.js

@@ -29,6 +29,7 @@ export { default as CalendarCheckIcon } from './CalendarCheck.js';
 export { default as CalendarCheckColorIcon } from './CalendarCheckColor.js';
 export { default as CalendarColorIcon } from './CalendarColor.js';
 export { default as CameraIcon } from './Camera.js';
+export { default as CameraColorIcon } from './CameraColor.js';
 export { default as CardIcon } from './Card.js';
 export { default as CardsPercentIcon } from './CardsPercent.js';
 export { default as CardsPercentColorIcon } from './CardsPercentColor.js';

package/esm/utils/styled-system/index.js

@@ -29,5 +29,23 @@ const lineClamp = system({
     scale: 'WebkitLineClamp'
   }
 });
+const gap = system({
+  gap: {
+    property: 'gap',
+    scale: 'space'
+  }
+});
+const columnGap = system({
+  columnGap: {
+    property: 'columnGap',
+    scale: 'space'
+  }
+});
+const rowGap = system({
+  rowGap: {
+    property: 'rowGap',
+    scale: 'space'
+  }
+});
 
-export { lineClamp, sx, textDecoration, whiteSpace, wordBreak };
+export { columnGap, gap, lineClamp, rowGap, sx, textDecoration, whiteSpace, wordBreak };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.39.1",
+  "version": "2.40.0",
   "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",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.2",
     "@primer/behaviors": "^1.3.6",
-    "@teamturing/icons": "^1.47.0",
+    "@teamturing/icons": "^1.48.0",
     "@teamturing/token-studio": "^1.10.0",
     "@teamturing/utils": "^1.4.0",
     "framer-motion": "^10.16.4",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "0742fd7257c18f448ebb670bc1ef19ac4dc2b9dd"
+  "gitHead": "e607425d99045e7df51099a69229839c434175b8"
 }