@team_yumi/ramen 0.4.0-next.20231120-9c1481a-370e6b3173b28305b5e6dbadf08eca03 → 0.4.0-next.20231122-6c23a89-c587da26d90e05e962417adff5551535

package/components/core/{xicon → x-icon}/root.d.ts

@@ -1,8 +1,17 @@
 import React from 'react';
 import { Collections } from './../../../models';
 export interface IProps {
+    /**
+     * Icon name
+     */
     icon?: (typeof Collections.IIcon)[number];
+    /**
+     * Icon size
+     */
     size?: (typeof Collections.ISize)[number];
+    /**
+     * Icon color can be any color from the palette fundamentals
+     */
     color?: (typeof Collections.IIconColor)[number];
 }
 declare const XIcon: React.FC<IProps>;

package/components/mobile/xselect/root.d.ts

@@ -18,7 +18,9 @@ export interface IProps {
     disabled?: boolean;
     hasError?: boolean;
     searchable?: boolean;
-    onChange?: (value: IOption) => void;
+    selectionAsTag?: boolean;
+    searchPlaceholder?: string;
+    onChange?: (value: IOption | undefined) => void;
 }
 declare const XSelect: React.FC<IProps>;
 export default XSelect;

package/index.core.d.ts

@@ -4,7 +4,7 @@ declare const _default: {
     XCardCounter: import("react").FC<import("./components/core/xcard-counter/root").IProps>;
     XBox: import("react").FC<import("./components/core/xbox/root").IProps>;
     XText: import("react").FC<import("./components/core/xtext/root").IProps>;
-    XIcon: import("react").FC<import("./components/core/xicon/root").IProps>;
+    XIcon: import("react").FC<import("./components/core/x-icon/root").IProps>;
     XButton: import("react").FC<import("./components/core/xbutton/root").IProps>;
     XButtonIcon: import("react").FC<import("./components/core/xbuttonicon/root").IProps>;
     XBadge: import("react").FC<import("./components/core/xbadge/root").IProps>;

package/index.css

@@ -506,41 +506,44 @@
   color: var(--color-neutral-lightest);
 }
 
-.root-module_xicon__qDYRt {
+.root-module_x-icon__YwX20 {
   display: inline-block;
-  max-height: var(--xicon-size-xl);
+  box-sizing: content-box;
   max-width: var(--xicon-size-xl);
   color: var(--color-neutral-darkest);
-  box-sizing: content-box;
+  max-height: var(--xicon-size-xl);
 }
-.root-module_icon_size-xs__YasmD {
+
+.root-module_icon_size-xs__VJ8Yg {
   height: var(--xicon-size-xs);
   width: var(--xicon-size-xs);
 }
-.root-module_icon_size-s__spR6F {
+
+.root-module_icon_size-s__QusCx {
   height: var(--xicon-size-s);
   width: var(--xicon-size-s);
 }
-.root-module_icon_size-m__q8qe4 {
+
+.root-module_icon_size-m__8yA3P {
   height: var(--xicon-size-m);
   width: var(--xicon-size-m);
 }
-.root-module_icon_size-l__vdZri {
+
+.root-module_icon_size-l__MPjv2 {
   height: var(--xicon-size-l);
   width: var(--xicon-size-l);
 }
-.root-module_icon_size-xl__pWJJQ {
+
+.root-module_icon_size-xl__XlQMm {
   height: var(--xicon-size-xl);
   width: var(--xicon-size-xl);
 }
-.root-module_icon-spin__bKBJP {
-  /* display: flex; */
-}
-.root-module_icon-spin__bKBJP > svg {
-  animation: root-module_spin__4ShxB infinite 1s linear;
+
+.root-module_icon-spin__uqWV8 > svg {
+  animation: root-module_spin__7LPA9 infinite 1s linear;
 }
 
-@keyframes root-module_spin__4ShxB {
+@keyframes root-module_spin__7LPA9 {
   from {
     transform: rotate(0deg);
   }
@@ -549,67 +552,61 @@
   }
 }
 
-
-/* colors */
-.root-module_xicon--color-gray__i4eGf  {
+/**
+ * Colors
+ */
+.root-module_x-icon--color-gray__jRldv {
   color: var(--color-neutral-light);
 }
 
-.root-module_xicon--color-black__dkBZA {
+.root-module_x-icon--color-disabled__pL0O- {
+  color: var(--neutral-dark-50);
+}
+
+.root-module_x-icon--color-black__k2ZgM {
   color: var(--color-neutral-darkest);
 }
 
-/* color green */
-.root-module_xicon--color-green__soVpr {
+.root-module_x-icon--color-green__2cdrt {
   color: var(--xicon-color-green);
 }
 
-/* color sky blue */
-.root-module_xicon--color-sky-blue__qmBYA  {
+.root-module_x-icon--color-sky-blue__mLai3 {
   color: var(--xicon-color-sky-blue);
 }
 
-/* color orange */
-.root-module_xicon--color-orange__pDL4U  {
+.root-module_x-icon--color-orange__-T6TO {
   color: var(--xicon-color-orange);
 }
 
-/* color red */
-.root-module_xicon--color-red__LNA1l {
+.root-module_x-icon--color-red__deo-Z {
   color: var(--xicon-color-red);
 }
 
-/* color purple */
-.root-module_xicon--color-purple__9tpjx {
+.root-module_x-icon--color-purple__0QLxp {
   color: var(--xicon-color-purple);
 }
 
-/* color pink */
-.root-module_xicon--color-pink__rbZmZ {
+.root-module_x-icon--color-pink__sti-5 {
   color: var(--xicon-color-pink);
 }
 
-/* color green check */
-.root-module_xicon--color-green-check__8Io7V {
+.root-module_x-icon--color-green-check__IsMGW {
   color: var(--xicon-color-green-check);
 }
 
-/* color red refuse */
-.root-module_xicon--color-red-refuse__LAOo3  {
+.root-module_x-icon--color-red-refuse__tSafm {
   color: var(--xicon-color-red-refuse);
 }
 
-/* color yellow */
-.root-module_xicon--color-yellow__Dfi5S  {
+.root-module_x-icon--color-yellow__LyUe9 {
   color: var(--xicon-color-yellow);
 }
 
-/* color yellow */
-.root-module_xicon--color-turquoise__qmGHm  {
+.root-module_x-icon--color-turquoise__xokP5 {
   color: var(--xicon-color-turquoise);
 }
 
-
 .root-module_xbutton__isOXp {
   display: flex;
   align-items: center;
@@ -3483,6 +3480,14 @@
           user-select: none;
 }
 
+.root-module_xselect__tag_container__nalJG {
+  display: flex;
+  flex-flow: wrap;
+  padding: 8px;
+  gap: 8px;
+  width: 100%;
+}
+
 .root-module_xselect--has-error__2-N-L .root-module_xselect__content__0LFVf {
   border: 1px solid var(--global-error-red-50);
 }
@@ -3533,7 +3538,7 @@
   width: 168px;
 }
 
-.root-module_xselect__text__aVJZj > div {
+.root-module_xselect__text__aVJZj>div {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3574,7 +3579,7 @@
   flex-direction: column;
 }
 
-.root-module_modal__ExdYM > .root-module_modal__item__uJVqQ {
+.root-module_modal__ExdYM>.root-module_modal__item__uJVqQ {
   cursor: pointer;
 }
 
@@ -3590,18 +3595,17 @@
   border: 2px solid #1F1F1F;
 }
 
-.root-module_modal__item--selected__h9fcZ > div > div:nth-child(1) {
+.root-module_modal__item--selected__h9fcZ>div>div:nth-child(1) {
   border: 2px solid #1F1F1F;
 }
 
 
-.theme-arcus  .root-module_modal__item--selected__h9fcZ {
+.theme-arcus .root-module_modal__item--selected__h9fcZ {
   color: var(--color-neutral-darkest);
   background: linear-gradient(#fff, #fff) padding-box, var(--color-gradient-arcus) border-box;
   border-color: transparent;
 
 }
-
 .root-module_xfloat-button__naGjT {
     position: fixed;
     bottom: env(safe-area-inset-bottom, 33px);