@teamturing/react-kit 2.20.0 → 2.20.2

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

@@ -1,10 +1,8 @@
 import { ElementType, InputHTMLAttributes, ReactNode, Ref } from 'react';
+import { OverlayProps } from '../Overlay';
 import { OverlayPopperProps } from '../OverlayPopper';
 import { TextInputProps } from '../TextInput';
-type Props<T extends {
-    label: string;
-    value?: string | number | readonly string[];
-}> = {
+type Props<T> = {
     /**
      * TODO asdf
      */
@@ -13,24 +11,25 @@ type Props<T extends {
      * 입력 창 앞에 보여질 시각적 요소를 정의합니다. Icon, Text, Image 등이 될 수 있습니다.
      */
     leadingVisual?: ElementType | ReactNode;
+    /**
+     * 입력 창 뒤에 보여질 시각적 요소를 정의합니다. Icon, Text, Image 등이 될 수 있습니다.
+     * Default: chevron down icon
+     */
+    trailingVisual?: ElementType | ReactNode;
     children: (selectionHandler: {
         handleSelect: (item: T) => void;
     }, overlayHandler: {
         isOpen: boolean;
         closeOverlay: () => void;
     }) => ReactNode;
-    onChange?: (item: T) => void;
+    overlayProps?: Pick<OverlayProps, 'size' | 'maxHeight'>;
     searchInputProps?: Pick<TextInputProps, 'placeholder' | 'trailingVisual' | 'trailingAction' | 'onChange'>;
-    renderValue?: (value: T['value']) => ReactNode;
-} & Pick<OverlayPopperProps, 'focusTrapSettings' | 'focusZoneSettings' | 'onClose' | 'onOpen'> & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'disabled' | 'onClick' | 'placeholder' | 'value'>;
-declare const SearchSelectInput: <T extends {
-    label: string;
-    value: string | number | readonly string[];
-}>({ validationStatus, leadingVisual: LeadingVisual, children, onChange, focusTrapSettings, focusZoneSettings, onOpen, onClose, searchInputProps, value, renderValue, ...props }: Props<T>, ref: Ref<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
-declare const _default: <T extends {
-    label: string;
-    value: string | number | readonly string[];
-}>(props: {
+    value?: T;
+    renderValue?: (value: T) => ReactNode;
+    onChange?: (item: T) => void;
+} & Pick<OverlayPopperProps, 'focusTrapSettings' | 'focusZoneSettings' | 'onClose' | 'onOpen'> & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'disabled' | 'onClick' | 'placeholder'>;
+declare const SearchSelectInput: <T>({ validationStatus, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, children, focusTrapSettings, focusZoneSettings, onOpen, onClose, overlayProps: propOverlayProps, searchInputProps, value, renderValue, onChange, ...props }: Props<T>, ref: Ref<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
+declare const _default: <T>(props: {
     /**
      * TODO asdf
      */
@@ -39,16 +38,23 @@ declare const _default: <T extends {
      * 입력 창 앞에 보여질 시각적 요소를 정의합니다. Icon, Text, Image 등이 될 수 있습니다.
      */
     leadingVisual?: string | number | boolean | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined;
+    /**
+     * 입력 창 뒤에 보여질 시각적 요소를 정의합니다. Icon, Text, Image 등이 될 수 있습니다.
+     * Default: chevron down icon
+     */
+    trailingVisual?: string | number | boolean | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined;
     children: (selectionHandler: {
         handleSelect: (item: T) => void;
     }, overlayHandler: {
         isOpen: boolean;
         closeOverlay: () => void;
     }) => ReactNode;
-    onChange?: ((item: T) => void) | undefined;
+    overlayProps?: Pick<OverlayProps, "maxHeight" | "size"> | undefined;
     searchInputProps?: Pick<TextInputProps, "placeholder" | "onChange" | "trailingVisual" | "trailingAction"> | undefined;
-    renderValue?: ((value: T["value"]) => ReactNode) | undefined;
-} & Pick<OverlayPopperProps, "onClose" | "focusZoneSettings" | "focusTrapSettings" | "onOpen"> & Pick<InputHTMLAttributes<HTMLInputElement>, "disabled" | "placeholder" | "value" | "id" | "onClick"> & {
+    value?: T | undefined;
+    renderValue?: ((value: T) => ReactNode) | undefined;
+    onChange?: ((item: T) => void) | undefined;
+} & Pick<OverlayPopperProps, "onClose" | "focusZoneSettings" | "focusTrapSettings" | "onOpen"> & Pick<InputHTMLAttributes<HTMLInputElement>, "disabled" | "placeholder" | "id" | "onClick"> & {
     ref?: Ref<HTMLInputElement> | undefined;
 }) => ReturnType<typeof SearchSelectInput>;
 export default _default;

package/dist/index.js

@@ -3985,6 +3985,28 @@ const SvgTop = props => /*#__PURE__*/React__namespace.createElement("svg", _exte
   clipRule: "evenodd"
 }));
 
+const SvgTouch = 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("g", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  clipPath: "url(#touch_svg__a)",
+  clipRule: "evenodd"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M.6 5.906A4.106 4.106 0 0 1 4.706 1.8h9.1a4.106 4.106 0 0 1 4.106 4.106v2.868a1.073 1.073 0 0 1-2.145 0V5.906a1.96 1.96 0 0 0-1.96-1.96H4.705a1.96 1.96 0 0 0-1.961 1.96v9.1a1.96 1.96 0 0 0 1.961 1.961h1.848a1.073 1.073 0 1 1 0 2.145H4.706A4.106 4.106 0 0 1 .6 15.006v-9.1Z"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M11.483 10.636a.695.695 0 0 0-.192.968l3.048 4.515c.883 1.31-.353 3.008-1.87 2.569l-.86-.249a.367.367 0 0 0-.216.702l4.634 1.503a1.96 1.96 0 0 0 1.693-.233l2.812-1.875a1.96 1.96 0 0 0 .538-2.729l-1.115-1.652a1.96 1.96 0 0 0-2.717-.532l-.452.303a1.872 1.872 0 0 1-2.594-.508l-1.75-2.591a.694.694 0 0 0-.959-.19Zm-1.97 2.168a2.84 2.84 0 0 1 4.708-3.177l1.597 2.366.226-.152a4.106 4.106 0 0 1 5.689 1.115l1.115 1.651a4.106 4.106 0 0 1-1.126 5.713l-2.812 1.875a4.106 4.106 0 0 1-3.545.49l-4.634-1.503a2.512 2.512 0 0 1 1.147-4.875l-2.365-3.503Z"
+})), /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  id: "touch_svg__a"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#fff",
+  d: "M0 0h24v24H0z"
+}))));
+
 const SvgTrash = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -4064,60 +4086,6 @@ const SvgUniversity = props => /*#__PURE__*/React__namespace.createElement("svg"
   d: "M21.426 15.401a.92.92 0 1 1-1.841 0 .92.92 0 0 1 1.841 0Z"
 }));
 
-const SvgUnlimitedTicket = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "1em",
-  height: "1em",
-  fill: "none",
-  viewBox: "0 0 32 32"
-}, props), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "#D1D5DB",
-  fillRule: "evenodd",
-  d: "M2.396 8.313c-.53 0-.958.429-.958.958v4.312a1.917 1.917 0 0 1 0 3.834v4.312c0 .53.429.959.958.959h18.208c.53 0 .959-.43.959-.959v-4.312a1.917 1.917 0 0 1 0-3.834V9.271c0-.53-.43-.959-.959-.959H2.396Zm6.331 9.44c.02.173.161.303.33.303h4.886c.169 0 .31-.13.33-.302l.419-3.719c.038-.333-.366-.516-.58-.262l-1.243 1.475-.919-2.01a.491.491 0 0 0-.9 0l-.92 2.01-1.242-1.475c-.214-.254-.618-.071-.58.262l.42 3.719Z",
-  clipRule: "evenodd"
-}), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M29.382 17.39a4.089 4.089 0 0 0-2.937-1.09c-1.89.064-3.056 1.28-4.407 2.688l-.007.007-.008-.007c-1.35-1.407-2.51-2.623-4.406-2.687A4.072 4.072 0 0 0 14.7 17.39a3.947 3.947 0 0 0-1.284 2.9c0 1.117.45 2.149 1.27 2.906.76.7 1.749 1.089 2.797 1.089h.147c1.89-.064 3.056-1.28 4.407-2.688v-.007l.007.008c1.351 1.407 2.51 2.623 4.407 2.687h.148a4.078 4.078 0 0 0 2.797-1.09 3.914 3.914 0 0 0 1.27-2.906c0-1.089-.465-2.15-1.285-2.9Zm-11.817 5.127a2.221 2.221 0 0 1-1.594-.587 2.206 2.206 0 0 1-.709-1.64 2.232 2.232 0 0 1 2.222-2.228h.081c1.07.035 1.808.75 3.115 2.114.03.036.066.07.096.1l-.008.013.008.007c-.03.036-.067.071-.096.1-1.307 1.371-2.045 2.085-3.115 2.12Zm10.548-.587a2.226 2.226 0 0 1-1.595.587c-1.07-.035-1.808-.75-3.114-2.115a1.264 1.264 0 0 0-.096-.099l.007-.014h-.007c.03-.035.066-.07.096-.099 1.306-1.365 2.044-2.079 3.114-2.114a2.278 2.278 0 0 1 1.587.594c.465.424.716 1.004.716 1.633 0 .623-.25 1.203-.708 1.627Z"
-}), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "#fff",
-  fillRule: "evenodd",
-  d: "M22.53 18.479c1.157-1.18 2.258-2.122 3.915-2.178a4.089 4.089 0 0 1 2.937 1.089c.82.75 1.285 1.81 1.285 2.9 0 1.117-.45 2.149-1.27 2.906a4.078 4.078 0 0 1-2.797 1.089h-.148c-1.661-.056-2.757-.996-3.91-2.174l-.256-.263-.154-.16-.09-.087.003-.003-.007-.008v.008l-.003.002-.007.008-.077.08c-.137.143-.274.285-.409.423-1.155 1.178-2.256 2.118-3.91 2.174h-.148a4.111 4.111 0 0 1-2.798-1.09 3.914 3.914 0 0 1-1.27-2.906c0-1.089.466-2.15 1.285-2.9a4.072 4.072 0 0 1 2.916-1.088c1.663.056 2.759.998 3.914 2.177l.318.329.155.161.02.02.007.007.007-.007.003-.003.172-.179.317-.327Zm-.5-.519c1.167-1.191 2.45-2.312 4.39-2.378a4.81 4.81 0 0 1 3.45 1.28 4.665 4.665 0 0 1 1.515 3.427c0 1.317-.533 2.54-1.5 3.434a4.797 4.797 0 0 1-3.285 1.28H26.428c-1.945-.065-3.223-1.184-4.386-2.374-1.166 1.19-2.448 2.309-4.386 2.374H17.484a4.83 4.83 0 0 1-3.285-1.279 4.632 4.632 0 0 1-1.501-3.435c0-1.29.55-2.542 1.515-3.427a4.79 4.79 0 0 1 3.427-1.28c1.947.066 3.226 1.187 4.39 2.378Zm-.168.86.161.168-.161-.169Zm-4.297 3.697c1.07-.035 1.808-.75 3.115-2.122.03-.028.066-.063.096-.099l-.008-.007.008-.014a1.264 1.264 0 0 1-.096-.099c-1.307-1.365-2.045-2.079-3.115-2.114h-.081a2.232 2.232 0 0 0-2.222 2.228c0 .636.251 1.216.709 1.64.428.396.996.608 1.594.587Zm4.477-.916-.004-.003h.007l-.003.003Zm1.963-2.03c-.188.188-.387.395-.601.62a1.39 1.39 0 0 0-.089.09l-.007.008h.007l-.007.014c.03.029.066.064.096.1 1.306 1.364 2.044 2.079 3.114 2.114a2.226 2.226 0 0 0 1.595-.587 2.197 2.197 0 0 0 .708-1.627c0-.629-.25-1.209-.716-1.633a2.278 2.278 0 0 0-1.587-.594c-.894.03-1.556.533-2.513 1.494Z",
-  clipRule: "evenodd"
-}));
-
-const SvgUnlimitedTicketColor = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "1em",
-  height: "1em",
-  fill: "none",
-  viewBox: "0 0 32 32"
-}, props), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "url(#unlimited_ticket_color_svg__a)",
-  fillRule: "evenodd",
-  d: "M2.396 8.313c-.53 0-.958.429-.958.958v4.312a1.917 1.917 0 0 1 0 3.834v4.312c0 .53.429.959.958.959h18.208c.53 0 .959-.43.959-.959v-4.312a1.917 1.917 0 0 1 0-3.834V9.271c0-.53-.43-.959-.959-.959H2.396Zm6.331 9.44c.02.173.161.303.33.303h4.886c.169 0 .31-.13.33-.302l.419-3.719c.038-.333-.366-.516-.58-.262l-1.243 1.475-.919-2.01a.491.491 0 0 0-.9 0l-.92 2.01-1.242-1.475c-.214-.254-.618-.071-.58.262l.42 3.719Z",
-  clipRule: "evenodd"
-}), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "#9C7EEF",
-  d: "M29.382 17.39a4.089 4.089 0 0 0-2.937-1.09c-1.89.064-3.056 1.28-4.407 2.688l-.007.007-.008-.007c-1.35-1.407-2.51-2.623-4.406-2.687A4.072 4.072 0 0 0 14.7 17.39a3.947 3.947 0 0 0-1.284 2.9c0 1.117.45 2.149 1.27 2.906.76.7 1.749 1.089 2.797 1.089h.147c1.89-.064 3.056-1.28 4.407-2.688v-.007l.007.008c1.351 1.407 2.51 2.623 4.407 2.687h.148a4.078 4.078 0 0 0 2.797-1.09 3.914 3.914 0 0 0 1.27-2.906c0-1.089-.465-2.15-1.285-2.9Zm-11.817 5.127a2.221 2.221 0 0 1-1.594-.587 2.206 2.206 0 0 1-.709-1.64 2.232 2.232 0 0 1 2.222-2.228h.081c1.07.035 1.808.75 3.115 2.114.03.036.066.07.096.1l-.008.013.008.007c-.03.036-.067.071-.096.1-1.307 1.371-2.045 2.085-3.115 2.12Zm10.548-.587a2.226 2.226 0 0 1-1.595.587c-1.07-.035-1.808-.75-3.114-2.115a1.264 1.264 0 0 0-.096-.099l.007-.014h-.007c.03-.035.066-.07.096-.099 1.306-1.365 2.044-2.079 3.114-2.114a2.278 2.278 0 0 1 1.587.594c.465.424.716 1.004.716 1.633 0 .623-.25 1.203-.708 1.627Z"
-}), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "#fff",
-  fillRule: "evenodd",
-  d: "M22.53 18.479c1.157-1.18 2.258-2.122 3.915-2.178a4.089 4.089 0 0 1 2.937 1.089c.82.75 1.285 1.81 1.285 2.9 0 1.117-.45 2.149-1.27 2.906a4.078 4.078 0 0 1-2.797 1.089h-.148c-1.661-.056-2.757-.996-3.91-2.174l-.256-.263-.154-.16-.09-.087.003-.003-.007-.008v.008l-.003.002-.007.008-.077.08c-.137.143-.274.285-.409.423-1.155 1.178-2.256 2.118-3.91 2.174h-.148a4.111 4.111 0 0 1-2.798-1.09 3.914 3.914 0 0 1-1.27-2.906c0-1.089.466-2.15 1.285-2.9a4.072 4.072 0 0 1 2.916-1.088c1.663.056 2.759.998 3.914 2.177l.318.329.155.161.02.02.007.007.007-.007.003-.003.172-.179.317-.327Zm-.5-.519c1.167-1.191 2.45-2.312 4.39-2.378a4.81 4.81 0 0 1 3.45 1.28 4.665 4.665 0 0 1 1.515 3.427c0 1.317-.533 2.54-1.5 3.434a4.797 4.797 0 0 1-3.285 1.28H26.428c-1.945-.065-3.223-1.184-4.386-2.374-1.166 1.19-2.448 2.309-4.386 2.374H17.484a4.83 4.83 0 0 1-3.285-1.279 4.632 4.632 0 0 1-1.501-3.435c0-1.29.55-2.542 1.515-3.427a4.79 4.79 0 0 1 3.427-1.28c1.947.066 3.226 1.187 4.39 2.378Zm-.168.86.161.168-.161-.169Zm-4.297 3.697c1.07-.035 1.808-.75 3.115-2.122.03-.028.066-.063.096-.099l-.008-.007.008-.014a1.264 1.264 0 0 1-.096-.099c-1.307-1.365-2.045-2.079-3.115-2.114h-.081a2.232 2.232 0 0 0-2.222 2.228c0 .636.251 1.216.709 1.64.428.396.996.608 1.594.587Zm4.477-.916-.004-.003h.007l-.003.003Zm1.963-2.03c-.188.188-.387.395-.601.62a1.39 1.39 0 0 0-.089.09l-.007.008h.007l-.007.014c.03.029.066.064.096.1 1.306 1.364 2.044 2.079 3.114 2.114a2.226 2.226 0 0 0 1.595-.587 2.197 2.197 0 0 0 .708-1.627c0-.629-.25-1.209-.716-1.633a2.278 2.278 0 0 0-1.587-.594c-.894.03-1.556.533-2.513 1.494Z",
-  clipRule: "evenodd"
-}), /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
-  id: "unlimited_ticket_color_svg__a",
-  x1: 2.587,
-  x2: 14.343,
-  y1: 10.058,
-  y2: 25.686,
-  gradientUnits: "userSpaceOnUse"
-}, /*#__PURE__*/React__namespace.createElement("stop", {
-  stopColor: "#0F0E0F"
-}), /*#__PURE__*/React__namespace.createElement("stop", {
-  offset: 1,
-  stopColor: "#595959"
-}))));
-
 const SvgUserBlocked = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -4519,13 +4487,12 @@ var icons = /*#__PURE__*/Object.freeze({
   TicketIcon: SvgTicket,
   TimeIcon: SvgTime,
   TopIcon: SvgTop,
+  TouchIcon: SvgTouch,
   TrashIcon: SvgTrash,
   TreasureboxIcon: SvgTreasurebox,
   TrophyIcon: SvgTrophy,
   UndoIcon: SvgUndo,
   UniversityIcon: SvgUniversity,
-  UnlimitedTicketColorIcon: SvgUnlimitedTicketColor,
-  UnlimitedTicketIcon: SvgUnlimitedTicket,
   UserBlockedIcon: SvgUserBlocked,
   UserCheckIcon: SvgUserCheck,
   UserPlusIcon: SvgUserPlus,
@@ -21587,18 +21554,23 @@ var TextInput$1 = Object.assign( /*#__PURE__*/React.forwardRef(TextInput), {
 const SearchSelectInput = ({
   validationStatus,
   leadingVisual: LeadingVisual,
+  trailingVisual: TrailingVisual,
   children,
-  onChange,
   focusTrapSettings,
   focusZoneSettings,
   onOpen,
   onClose,
+  overlayProps: propOverlayProps,
   searchInputProps,
   value,
-  renderValue = value => value?.toString(),
+  renderValue = value => /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
+    children: value
+  }),
+  onChange,
   ...props
 }, ref) => {
   const theme = styled.useTheme();
+  const isVisibleValueExist = value && isArray$1(value) && !isNullable(renderValue(value)) ? value.length > 0 : value && !isNullable(renderValue(value));
   const hasLeadingVisual = !isNullable(LeadingVisual);
   const valueInputRef = useProvidedOrCreatedRef(ref);
   const labelInputRef = React.useRef(null);
@@ -21621,7 +21593,7 @@ const SearchSelectInput = ({
        * ! 일단 Custom onChange를 만들어서 해결.
        */
       const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
-      nativeInputValueSetter?.call(valueInputRef.current, item.value.toString());
+      nativeInputValueSetter?.call(valueInputRef.current, item);
       onChange?.(item);
     }
   };
@@ -21666,8 +21638,9 @@ const SearchSelectInput = ({
     renderOverlay: (overlayProps, overlayHandler, {
       elements
     }) => /*#__PURE__*/jsxRuntimeExports.jsxs(Overlay$1, {
+      ...propOverlayProps,
       ...overlayProps,
-      maxHeight: 200,
+      maxHeight: 300,
       sx: {
         display: 'flex',
         flexDirection: 'column'
@@ -21676,6 +21649,12 @@ const SearchSelectInput = ({
         ...overlayProps.style,
         width: elements?.reference?.getBoundingClientRect().width
       },
+      onKeyDown: e => {
+        if (e.code === 'Escape') {
+          e.stopPropagation();
+          overlayHandler.closeOverlay();
+        }
+      },
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(Space, {
         p: 2,
         sx: {
@@ -21690,6 +21669,7 @@ const SearchSelectInput = ({
             if (e.code === 'Enter' && activeDescendantRef.current) {
               const activeDescendantEvent = new KeyboardEvent(e.type, e.nativeEvent);
               activeDescendantRef.current?.dispatchEvent(activeDescendantEvent);
+              e.preventDefault();
             }
           },
           ...searchInputProps
@@ -21707,22 +21687,18 @@ const SearchSelectInput = ({
         }, overlayHandler)
       })]
     }),
-    children: (popperProps, {
-      openOverlay
-    }) => /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper, {
-      ...popperProps,
-      tabIndex: disabled ? -1 : 0,
+    children: popperProps => /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper, {
+      ...(disabled ? {} : {
+        ...popperProps,
+        onClick: e => {
+          focusInput();
+          popperProps.onClick?.(e);
+        }
+      }),
+      tabIndex: -1,
       disabled: disabled,
-      onClick: focusInput,
       hasLeadingVisual: hasLeadingVisual,
       validationStatus: validationStatus,
-      onKeyDown: e => {
-        if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
-          e.preventDefault();
-          openOverlay();
-        }
-        e.stopPropagation();
-      },
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
         sx: {
           'flexShrink': 0,
@@ -21747,12 +21723,10 @@ const SearchSelectInput = ({
           paddingLeft: hasLeadingVisual ? 2 : 4,
           whiteSpace: 'pre',
           textOverflow: 'ellipsis',
-          width: '100%'
+          width: '100%',
+          cursor: disabled ? 'not-allowed' : 'default'
         },
-        onClick: e => {
-          popperProps.onClick?.(e);
-        },
-        children: [!isNullable(renderValue(value)) ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        children: [isVisibleValueExist ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
           sx: {
             flex: '0 1 auto',
             maxWidth: '100%',
@@ -21760,20 +21734,20 @@ const SearchSelectInput = ({
             whiteSpace: 'pre',
             overflow: 'hidden'
           },
-          children: renderValue(value)
+          children: value && renderValue(value)
         }) : null, /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
           id: id,
           ref: labelInputRef,
           readOnly: true,
           onChange: noop$2,
           autoComplete: 'off',
-          tabIndex: -1,
+          disabled: disabled,
           onClick: e => {
             props.onClick?.(e);
           },
-          placeholder: !isNullable(renderValue(value)) ? '' : placeholder
+          placeholder: isVisibleValueExist ? '' : placeholder
         })]
-      }), /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
         sx: {
           position: 'absolute',
           top: '50%',
@@ -21781,9 +21755,11 @@ const SearchSelectInput = ({
           right: 4,
           pointerEvents: 'none'
         },
-        icon: SvgChevronDown,
-        color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
-        size: 16
+        children: typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual ? TrailingVisual : /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+          icon: SvgChevronDown,
+          color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
+          size: 16
+        })
       }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
         ref: e => {
           isFunction$1(ref) ? ref(e) : null;

package/esm/core/SearchSelectInput/index.js

@@ -2,6 +2,7 @@ import { forwardRef, useRef } from 'react';
 import SvgChevronDown from '../../packages/icons/esm/ChevronDown.js';
 import SvgSearch from '../../packages/icons/esm/Search.js';
 import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
+import { isArray } from '../../packages/utils/esm/isArray.js';
 import { isFunction } from '../../packages/utils/esm/isFunction.js';
 import { isNullable } from '../../packages/utils/esm/isNullable.js';
 import { noop } from '../../packages/utils/esm/noop.js';
@@ -21,18 +22,23 @@ import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js'
 const SearchSelectInput = ({
   validationStatus,
   leadingVisual: LeadingVisual,
+  trailingVisual: TrailingVisual,
   children,
-  onChange,
   focusTrapSettings,
   focusZoneSettings,
   onOpen,
   onClose,
+  overlayProps: propOverlayProps,
   searchInputProps,
   value,
-  renderValue = value => value?.toString(),
+  renderValue = value => /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
+    children: value
+  }),
+  onChange,
   ...props
 }, ref) => {
   const theme = useTheme();
+  const isVisibleValueExist = value && isArray(value) && !isNullable(renderValue(value)) ? value.length > 0 : value && !isNullable(renderValue(value));
   const hasLeadingVisual = !isNullable(LeadingVisual);
   const valueInputRef = useProvidedOrCreatedRef(ref);
   const labelInputRef = useRef(null);
@@ -55,7 +61,7 @@ const SearchSelectInput = ({
        * ! 일단 Custom onChange를 만들어서 해결.
        */
       const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
-      nativeInputValueSetter?.call(valueInputRef.current, item.value.toString());
+      nativeInputValueSetter?.call(valueInputRef.current, item);
       onChange?.(item);
     }
   };
@@ -100,8 +106,9 @@ const SearchSelectInput = ({
     renderOverlay: (overlayProps, overlayHandler, {
       elements
     }) => /*#__PURE__*/jsxRuntimeExports.jsxs(Overlay, {
+      ...propOverlayProps,
       ...overlayProps,
-      maxHeight: 200,
+      maxHeight: 300,
       sx: {
         display: 'flex',
         flexDirection: 'column'
@@ -110,6 +117,12 @@ const SearchSelectInput = ({
         ...overlayProps.style,
         width: elements?.reference?.getBoundingClientRect().width
       },
+      onKeyDown: e => {
+        if (e.code === 'Escape') {
+          e.stopPropagation();
+          overlayHandler.closeOverlay();
+        }
+      },
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(Space, {
         p: 2,
         sx: {
@@ -124,6 +137,7 @@ const SearchSelectInput = ({
             if (e.code === 'Enter' && activeDescendantRef.current) {
               const activeDescendantEvent = new KeyboardEvent(e.type, e.nativeEvent);
               activeDescendantRef.current?.dispatchEvent(activeDescendantEvent);
+              e.preventDefault();
             }
           },
           ...searchInputProps
@@ -141,22 +155,18 @@ const SearchSelectInput = ({
         }, overlayHandler)
       })]
     }),
-    children: (popperProps, {
-      openOverlay
-    }) => /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper, {
-      ...popperProps,
-      tabIndex: disabled ? -1 : 0,
+    children: popperProps => /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper, {
+      ...(disabled ? {} : {
+        ...popperProps,
+        onClick: e => {
+          focusInput();
+          popperProps.onClick?.(e);
+        }
+      }),
+      tabIndex: -1,
       disabled: disabled,
-      onClick: focusInput,
       hasLeadingVisual: hasLeadingVisual,
       validationStatus: validationStatus,
-      onKeyDown: e => {
-        if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
-          e.preventDefault();
-          openOverlay();
-        }
-        e.stopPropagation();
-      },
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
         sx: {
           'flexShrink': 0,
@@ -181,12 +191,10 @@ const SearchSelectInput = ({
           paddingLeft: hasLeadingVisual ? 2 : 4,
           whiteSpace: 'pre',
           textOverflow: 'ellipsis',
-          width: '100%'
+          width: '100%',
+          cursor: disabled ? 'not-allowed' : 'default'
         },
-        onClick: e => {
-          popperProps.onClick?.(e);
-        },
-        children: [!isNullable(renderValue(value)) ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        children: [isVisibleValueExist ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
           sx: {
             flex: '0 1 auto',
             maxWidth: '100%',
@@ -194,20 +202,20 @@ const SearchSelectInput = ({
             whiteSpace: 'pre',
             overflow: 'hidden'
           },
-          children: renderValue(value)
+          children: value && renderValue(value)
         }) : null, /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
           id: id,
           ref: labelInputRef,
           readOnly: true,
           onChange: noop,
           autoComplete: 'off',
-          tabIndex: -1,
+          disabled: disabled,
           onClick: e => {
             props.onClick?.(e);
           },
-          placeholder: !isNullable(renderValue(value)) ? '' : placeholder
+          placeholder: isVisibleValueExist ? '' : placeholder
         })]
-      }), /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
         sx: {
           position: 'absolute',
           top: '50%',
@@ -215,9 +223,11 @@ const SearchSelectInput = ({
           right: 4,
           pointerEvents: 'none'
         },
-        icon: SvgChevronDown,
-        color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
-        size: 16
+        children: typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual ? TrailingVisual : /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+          icon: SvgChevronDown,
+          color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
+          size: 16
+        })
       }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
         ref: e => {
           isFunction(ref) ? ref(e) : null;

package/esm/packages/icons/esm/Touch.js

@@ -0,0 +1,26 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgTouch = 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("g", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  clipPath: "url(#touch_svg__a)",
+  clipRule: "evenodd"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M.6 5.906A4.106 4.106 0 0 1 4.706 1.8h9.1a4.106 4.106 0 0 1 4.106 4.106v2.868a1.073 1.073 0 0 1-2.145 0V5.906a1.96 1.96 0 0 0-1.96-1.96H4.705a1.96 1.96 0 0 0-1.961 1.96v9.1a1.96 1.96 0 0 0 1.961 1.961h1.848a1.073 1.073 0 1 1 0 2.145H4.706A4.106 4.106 0 0 1 .6 15.006v-9.1Z"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M11.483 10.636a.695.695 0 0 0-.192.968l3.048 4.515c.883 1.31-.353 3.008-1.87 2.569l-.86-.249a.367.367 0 0 0-.216.702l4.634 1.503a1.96 1.96 0 0 0 1.693-.233l2.812-1.875a1.96 1.96 0 0 0 .538-2.729l-1.115-1.652a1.96 1.96 0 0 0-2.717-.532l-.452.303a1.872 1.872 0 0 1-2.594-.508l-1.75-2.591a.694.694 0 0 0-.959-.19Zm-1.97 2.168a2.84 2.84 0 0 1 4.708-3.177l1.597 2.366.226-.152a4.106 4.106 0 0 1 5.689 1.115l1.115 1.651a4.106 4.106 0 0 1-1.126 5.713l-2.812 1.875a4.106 4.106 0 0 1-3.545.49l-4.634-1.503a2.512 2.512 0 0 1 1.147-4.875l-2.365-3.503Z"
+})), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  id: "touch_svg__a"
+}, /*#__PURE__*/React.createElement("path", {
+  fill: "#fff",
+  d: "M0 0h24v24H0z"
+}))));
+
+export { SvgTouch as default };

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

@@ -178,13 +178,12 @@ export { default as TicketIcon } from './Ticket.js';
 export { default as TicketColorIcon } from './TicketColor.js';
 export { default as TimeIcon } from './Time.js';
 export { default as TopIcon } from './Top.js';
+export { default as TouchIcon } from './Touch.js';
 export { default as TrashIcon } from './Trash.js';
 export { default as TreasureboxIcon } from './Treasurebox.js';
 export { default as TrophyIcon } from './Trophy.js';
 export { default as UndoIcon } from './Undo.js';
 export { default as UniversityIcon } from './University.js';
-export { default as UnlimitedTicketIcon } from './UnlimitedTicket.js';
-export { default as UnlimitedTicketColorIcon } from './UnlimitedTicketColor.js';
 export { default as UserBlockedIcon } from './UserBlocked.js';
 export { default as UserCheckIcon } from './UserCheck.js';
 export { default as UserPlusIcon } from './UserPlus.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.20.0",
+  "version": "2.20.2",
   "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.25.1",
+    "@teamturing/icons": "^1.26.0",
     "@teamturing/token-studio": "^1.2.2",
     "@teamturing/utils": "^1.2.0",
     "framer-motion": "^10.16.4",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "3225404dea633972d9f80b321b36bc1ff50c0335"
+  "gitHead": "c52d8650767c8e059b534a03b081cd449bcc6f05"
 }

package/esm/packages/icons/esm/UnlimitedTicket.js

@@ -1,25 +0,0 @@
-import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
-import * as React from 'react';
-
-const SvgUnlimitedTicket = props => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "1em",
-  height: "1em",
-  fill: "none",
-  viewBox: "0 0 32 32"
-}, props), /*#__PURE__*/React.createElement("path", {
-  fill: "#D1D5DB",
-  fillRule: "evenodd",
-  d: "M2.396 8.313c-.53 0-.958.429-.958.958v4.312a1.917 1.917 0 0 1 0 3.834v4.312c0 .53.429.959.958.959h18.208c.53 0 .959-.43.959-.959v-4.312a1.917 1.917 0 0 1 0-3.834V9.271c0-.53-.43-.959-.959-.959H2.396Zm6.331 9.44c.02.173.161.303.33.303h4.886c.169 0 .31-.13.33-.302l.419-3.719c.038-.333-.366-.516-.58-.262l-1.243 1.475-.919-2.01a.491.491 0 0 0-.9 0l-.92 2.01-1.242-1.475c-.214-.254-.618-.071-.58.262l.42 3.719Z",
-  clipRule: "evenodd"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "currentColor",
-  d: "M29.382 17.39a4.089 4.089 0 0 0-2.937-1.09c-1.89.064-3.056 1.28-4.407 2.688l-.007.007-.008-.007c-1.35-1.407-2.51-2.623-4.406-2.687A4.072 4.072 0 0 0 14.7 17.39a3.947 3.947 0 0 0-1.284 2.9c0 1.117.45 2.149 1.27 2.906.76.7 1.749 1.089 2.797 1.089h.147c1.89-.064 3.056-1.28 4.407-2.688v-.007l.007.008c1.351 1.407 2.51 2.623 4.407 2.687h.148a4.078 4.078 0 0 0 2.797-1.09 3.914 3.914 0 0 0 1.27-2.906c0-1.089-.465-2.15-1.285-2.9Zm-11.817 5.127a2.221 2.221 0 0 1-1.594-.587 2.206 2.206 0 0 1-.709-1.64 2.232 2.232 0 0 1 2.222-2.228h.081c1.07.035 1.808.75 3.115 2.114.03.036.066.07.096.1l-.008.013.008.007c-.03.036-.067.071-.096.1-1.307 1.371-2.045 2.085-3.115 2.12Zm10.548-.587a2.226 2.226 0 0 1-1.595.587c-1.07-.035-1.808-.75-3.114-2.115a1.264 1.264 0 0 0-.096-.099l.007-.014h-.007c.03-.035.066-.07.096-.099 1.306-1.365 2.044-2.079 3.114-2.114a2.278 2.278 0 0 1 1.587.594c.465.424.716 1.004.716 1.633 0 .623-.25 1.203-.708 1.627Z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "#fff",
-  fillRule: "evenodd",
-  d: "M22.53 18.479c1.157-1.18 2.258-2.122 3.915-2.178a4.089 4.089 0 0 1 2.937 1.089c.82.75 1.285 1.81 1.285 2.9 0 1.117-.45 2.149-1.27 2.906a4.078 4.078 0 0 1-2.797 1.089h-.148c-1.661-.056-2.757-.996-3.91-2.174l-.256-.263-.154-.16-.09-.087.003-.003-.007-.008v.008l-.003.002-.007.008-.077.08c-.137.143-.274.285-.409.423-1.155 1.178-2.256 2.118-3.91 2.174h-.148a4.111 4.111 0 0 1-2.798-1.09 3.914 3.914 0 0 1-1.27-2.906c0-1.089.466-2.15 1.285-2.9a4.072 4.072 0 0 1 2.916-1.088c1.663.056 2.759.998 3.914 2.177l.318.329.155.161.02.02.007.007.007-.007.003-.003.172-.179.317-.327Zm-.5-.519c1.167-1.191 2.45-2.312 4.39-2.378a4.81 4.81 0 0 1 3.45 1.28 4.665 4.665 0 0 1 1.515 3.427c0 1.317-.533 2.54-1.5 3.434a4.797 4.797 0 0 1-3.285 1.28H26.428c-1.945-.065-3.223-1.184-4.386-2.374-1.166 1.19-2.448 2.309-4.386 2.374H17.484a4.83 4.83 0 0 1-3.285-1.279 4.632 4.632 0 0 1-1.501-3.435c0-1.29.55-2.542 1.515-3.427a4.79 4.79 0 0 1 3.427-1.28c1.947.066 3.226 1.187 4.39 2.378Zm-.168.86.161.168-.161-.169Zm-4.297 3.697c1.07-.035 1.808-.75 3.115-2.122.03-.028.066-.063.096-.099l-.008-.007.008-.014a1.264 1.264 0 0 1-.096-.099c-1.307-1.365-2.045-2.079-3.115-2.114h-.081a2.232 2.232 0 0 0-2.222 2.228c0 .636.251 1.216.709 1.64.428.396.996.608 1.594.587Zm4.477-.916-.004-.003h.007l-.003.003Zm1.963-2.03c-.188.188-.387.395-.601.62a1.39 1.39 0 0 0-.089.09l-.007.008h.007l-.007.014c.03.029.066.064.096.1 1.306 1.364 2.044 2.079 3.114 2.114a2.226 2.226 0 0 0 1.595-.587 2.197 2.197 0 0 0 .708-1.627c0-.629-.25-1.209-.716-1.633a2.278 2.278 0 0 0-1.587-.594c-.894.03-1.556.533-2.513 1.494Z",
-  clipRule: "evenodd"
-}));
-
-export { SvgUnlimitedTicket as default };

package/esm/packages/icons/esm/UnlimitedTicketColor.js

@@ -1,37 +0,0 @@
-import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
-import * as React from 'react';
-
-const SvgUnlimitedTicketColor = props => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "1em",
-  height: "1em",
-  fill: "none",
-  viewBox: "0 0 32 32"
-}, props), /*#__PURE__*/React.createElement("path", {
-  fill: "url(#unlimited_ticket_color_svg__a)",
-  fillRule: "evenodd",
-  d: "M2.396 8.313c-.53 0-.958.429-.958.958v4.312a1.917 1.917 0 0 1 0 3.834v4.312c0 .53.429.959.958.959h18.208c.53 0 .959-.43.959-.959v-4.312a1.917 1.917 0 0 1 0-3.834V9.271c0-.53-.43-.959-.959-.959H2.396Zm6.331 9.44c.02.173.161.303.33.303h4.886c.169 0 .31-.13.33-.302l.419-3.719c.038-.333-.366-.516-.58-.262l-1.243 1.475-.919-2.01a.491.491 0 0 0-.9 0l-.92 2.01-1.242-1.475c-.214-.254-.618-.071-.58.262l.42 3.719Z",
-  clipRule: "evenodd"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "#9C7EEF",
-  d: "M29.382 17.39a4.089 4.089 0 0 0-2.937-1.09c-1.89.064-3.056 1.28-4.407 2.688l-.007.007-.008-.007c-1.35-1.407-2.51-2.623-4.406-2.687A4.072 4.072 0 0 0 14.7 17.39a3.947 3.947 0 0 0-1.284 2.9c0 1.117.45 2.149 1.27 2.906.76.7 1.749 1.089 2.797 1.089h.147c1.89-.064 3.056-1.28 4.407-2.688v-.007l.007.008c1.351 1.407 2.51 2.623 4.407 2.687h.148a4.078 4.078 0 0 0 2.797-1.09 3.914 3.914 0 0 0 1.27-2.906c0-1.089-.465-2.15-1.285-2.9Zm-11.817 5.127a2.221 2.221 0 0 1-1.594-.587 2.206 2.206 0 0 1-.709-1.64 2.232 2.232 0 0 1 2.222-2.228h.081c1.07.035 1.808.75 3.115 2.114.03.036.066.07.096.1l-.008.013.008.007c-.03.036-.067.071-.096.1-1.307 1.371-2.045 2.085-3.115 2.12Zm10.548-.587a2.226 2.226 0 0 1-1.595.587c-1.07-.035-1.808-.75-3.114-2.115a1.264 1.264 0 0 0-.096-.099l.007-.014h-.007c.03-.035.066-.07.096-.099 1.306-1.365 2.044-2.079 3.114-2.114a2.278 2.278 0 0 1 1.587.594c.465.424.716 1.004.716 1.633 0 .623-.25 1.203-.708 1.627Z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "#fff",
-  fillRule: "evenodd",
-  d: "M22.53 18.479c1.157-1.18 2.258-2.122 3.915-2.178a4.089 4.089 0 0 1 2.937 1.089c.82.75 1.285 1.81 1.285 2.9 0 1.117-.45 2.149-1.27 2.906a4.078 4.078 0 0 1-2.797 1.089h-.148c-1.661-.056-2.757-.996-3.91-2.174l-.256-.263-.154-.16-.09-.087.003-.003-.007-.008v.008l-.003.002-.007.008-.077.08c-.137.143-.274.285-.409.423-1.155 1.178-2.256 2.118-3.91 2.174h-.148a4.111 4.111 0 0 1-2.798-1.09 3.914 3.914 0 0 1-1.27-2.906c0-1.089.466-2.15 1.285-2.9a4.072 4.072 0 0 1 2.916-1.088c1.663.056 2.759.998 3.914 2.177l.318.329.155.161.02.02.007.007.007-.007.003-.003.172-.179.317-.327Zm-.5-.519c1.167-1.191 2.45-2.312 4.39-2.378a4.81 4.81 0 0 1 3.45 1.28 4.665 4.665 0 0 1 1.515 3.427c0 1.317-.533 2.54-1.5 3.434a4.797 4.797 0 0 1-3.285 1.28H26.428c-1.945-.065-3.223-1.184-4.386-2.374-1.166 1.19-2.448 2.309-4.386 2.374H17.484a4.83 4.83 0 0 1-3.285-1.279 4.632 4.632 0 0 1-1.501-3.435c0-1.29.55-2.542 1.515-3.427a4.79 4.79 0 0 1 3.427-1.28c1.947.066 3.226 1.187 4.39 2.378Zm-.168.86.161.168-.161-.169Zm-4.297 3.697c1.07-.035 1.808-.75 3.115-2.122.03-.028.066-.063.096-.099l-.008-.007.008-.014a1.264 1.264 0 0 1-.096-.099c-1.307-1.365-2.045-2.079-3.115-2.114h-.081a2.232 2.232 0 0 0-2.222 2.228c0 .636.251 1.216.709 1.64.428.396.996.608 1.594.587Zm4.477-.916-.004-.003h.007l-.003.003Zm1.963-2.03c-.188.188-.387.395-.601.62a1.39 1.39 0 0 0-.089.09l-.007.008h.007l-.007.014c.03.029.066.064.096.1 1.306 1.364 2.044 2.079 3.114 2.114a2.226 2.226 0 0 0 1.595-.587 2.197 2.197 0 0 0 .708-1.627c0-.629-.25-1.209-.716-1.633a2.278 2.278 0 0 0-1.587-.594c-.894.03-1.556.533-2.513 1.494Z",
-  clipRule: "evenodd"
-}), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
-  id: "unlimited_ticket_color_svg__a",
-  x1: 2.587,
-  x2: 14.343,
-  y1: 10.058,
-  y2: 25.686,
-  gradientUnits: "userSpaceOnUse"
-}, /*#__PURE__*/React.createElement("stop", {
-  stopColor: "#0F0E0F"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 1,
-  stopColor: "#595959"
-}))));
-
-export { SvgUnlimitedTicketColor as default };