@team_yumi/ramen 0.4.0-next.20231227-de405c4-09379fe933156a3b642c37fb112ad30d → 0.4.0-next.20231228-60938e2-0fe37d2506dfdb3a3a03d709d698f72b

package/components/core/xskeleton/index.d.ts

@@ -1,2 +1,2 @@
-import Root from "./root";
+import Root from './root';
 export default Root;

package/components/core/xtext/root.d.ts

@@ -1,18 +1,46 @@
 import React from 'react';
 import { Collections } from './../../../models';
 export interface IProps {
+    /**
+     * Text content
+     */
     children?: React.ReactNode;
+    /**
+     * Text overflow can be normal or ellipsis
+     */
     textOverflow?: (typeof Collections.ITextOverflow)[number];
+    /**
+     * Line height can be normal, title or copy
+     */
     lineHeight?: (typeof Collections.ILineHeight)[number];
+    /**
+     * Font weight can be lighter, normal or bold
+     */
     weight?: (typeof Collections.IWeight)[number];
+    /**
+     * Font size can be 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Fewer means bigger
+     */
     fontSize?: (typeof Collections.IFontSize)[number];
+    /**
+     * Line clamp can be none, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ... 20
+     */
     lineClamp?: (typeof Collections.ILineClamp)[number];
+    /**
+     * Text align can be 'justify', 'left', 'center' or 'right'
+     */
     textAlign?: (typeof Collections.ITextAlign)[number];
+    /**
+     * Text color thone can be darkest, dark, medium, dim, light or lightest
+     */
     colorThone?: (typeof Collections.ITextColorThone)[number];
     /**
      * Text color can be any color from the palette fundamentals
      */
     color?: (typeof Collections.IColor)[number];
+    /**
+     * If true, the content will be rendered with a skeleton effect
+     */
+    skeleton?: boolean;
 }
 declare const XText: React.FC<IProps>;
 export default XText;

package/index.css

@@ -103,23 +103,22 @@
   gap: var(--xbox-padding-xl);
 }
 
-
 /* PDA Support GAP FIXED VALUES */
 .root-module_xbox__6Wa3G.root-module_pda-support__rBZrl {
   gap: var(--xbox-padding-none);
 }
 
 /* HORIZONATL GAP FIXED VALUES */
-.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_gap-none__5SZka>* {
+.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_gap-none__5SZka > * {
   margin-left: var(--xbox-padding-none);
   margin-top: var(--xbox-padding-none);
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_gap-xxs__2Pq9d>*:not(:first-child) {
+.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_gap-xxs__2Pq9d > *:not(:first-child) {
   margin-left: var(--xbox-padding-xxs);
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_flexWrap__4U4l5.root-module_gap-xxs__2Pq9d>* {
+.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_flexWrap__4U4l5.root-module_gap-xxs__2Pq9d > * {
   margin-left: var(--xbox-padding-xxs);
   margin-top: var(--xbox-padding-xxs);
 }
@@ -129,11 +128,11 @@
   margin-top: calc(-1 * var(--xbox-padding-xxs));
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_gap-xs__SYU-p>*:not(:first-child) {
+.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_gap-xs__SYU-p > *:not(:first-child) {
   margin-left: var(--xbox-padding-xs);
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_flexWrap__4U4l5.root-module_gap-xs__SYU-p>* {
+.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_flexWrap__4U4l5.root-module_gap-xs__SYU-p > * {
   margin-left: var(--xbox-padding-xs);
   margin-top: var(--xbox-padding-xs);
 }
@@ -143,11 +142,11 @@
   margin-top: calc(-1 * var(--xbox-padding-xs));
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_gap-s__ipYgr>*:not(:first-child) {
+.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_gap-s__ipYgr > *:not(:first-child) {
   margin-left: var(--xbox-padding-s);
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_flexWrap__4U4l5.root-module_gap-s__ipYgr>* {
+.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_flexWrap__4U4l5.root-module_gap-s__ipYgr > * {
   margin-left: var(--xbox-padding-s);
   margin-top: var(--xbox-padding-s);
 }
@@ -157,11 +156,11 @@
   margin-top: calc(-1 * var(--xbox-padding-s));
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_gap-m__CMXzK>*:not(:first-child) {
+.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_gap-m__CMXzK > *:not(:first-child) {
   margin-left: var(--xbox-padding-m);
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_flexWrap__4U4l5.root-module_gap-m__CMXzK>* {
+.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_flexWrap__4U4l5.root-module_gap-m__CMXzK > * {
   margin-left: var(--xbox-padding-m);
   margin-top: var(--xbox-padding-m);
 }
@@ -171,11 +170,11 @@
   margin-top: calc(-1 * var(--xbox-padding-m));
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_gap-l__FJTxi>*:not(:first-child) {
+.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_gap-l__FJTxi > *:not(:first-child) {
   margin-left: var(--xbox-padding-l);
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_flexWrap__4U4l5.root-module_gap-l__FJTxi>* {
+.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_flexWrap__4U4l5.root-module_gap-l__FJTxi > * {
   margin-left: var(--xbox-padding-l);
   margin-top: var(--xbox-padding-l);
 }
@@ -185,11 +184,11 @@
   margin-top: calc(-1 * var(--xbox-padding-l));
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_gap-xl__taf3g>*:not(:first-child) {
+.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_gap-xl__taf3g > *:not(:first-child) {
   margin-left: var(--xbox-padding-xl);
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_flexWrap__4U4l5.root-module_gap-xl__taf3g>* {
+.root-module_pda-support__rBZrl.root-module_orientation-horizontal__8h-SN.root-module_flexWrap__4U4l5.root-module_gap-xl__taf3g > * {
   margin-left: var(--xbox-padding-xl);
   margin-top: var(--xbox-padding-xl);
 }
@@ -200,31 +199,31 @@
 }
 
 /* VERTICAL GAP FIXED VALUES */
-.root-module_pda-support__rBZrl.root-module_orientation-vertical__mSiJF.root-module_gap-none__5SZka>*:not(:first-child) {
+.root-module_pda-support__rBZrl.root-module_orientation-vertical__mSiJF.root-module_gap-none__5SZka > *:not(:first-child) {
   margin-top: var(--xbox-padding-none);
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-vertical__mSiJF.root-module_gap-xxs__2Pq9d>*:not(:first-child) {
+.root-module_pda-support__rBZrl.root-module_orientation-vertical__mSiJF.root-module_gap-xxs__2Pq9d > *:not(:first-child) {
   margin-top: var(--xbox-padding-xxs);
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-vertical__mSiJF.root-module_gap-xs__SYU-p>*:not(:first-child) {
+.root-module_pda-support__rBZrl.root-module_orientation-vertical__mSiJF.root-module_gap-xs__SYU-p > *:not(:first-child) {
   margin-top: var(--xbox-padding-xs);
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-vertical__mSiJF.root-module_gap-s__ipYgr>*:not(:first-child) {
+.root-module_pda-support__rBZrl.root-module_orientation-vertical__mSiJF.root-module_gap-s__ipYgr > *:not(:first-child) {
   margin-top: var(--xbox-padding-s);
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-vertical__mSiJF.root-module_gap-m__CMXzK>*:not(:first-child) {
+.root-module_pda-support__rBZrl.root-module_orientation-vertical__mSiJF.root-module_gap-m__CMXzK > *:not(:first-child) {
   margin-top: var(--xbox-padding-m);
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-vertical__mSiJF.root-module_gap-l__FJTxi>*:not(:first-child) {
+.root-module_pda-support__rBZrl.root-module_orientation-vertical__mSiJF.root-module_gap-l__FJTxi > *:not(:first-child) {
   margin-top: var(--xbox-padding-l);
 }
 
-.root-module_pda-support__rBZrl.root-module_orientation-vertical__mSiJF.root-module_gap-xl__taf3g>*:not(:first-child) {
+.root-module_pda-support__rBZrl.root-module_orientation-vertical__mSiJF.root-module_gap-xl__taf3g > *:not(:first-child) {
   margin-top: var(--xbox-padding-xl);
 }
 
@@ -395,7 +394,6 @@
   display: none;
 }
 
-
 .root-module_background_thone-darkest__i0opu {
   background-color: var(--color-neutral-dark);
 }
@@ -424,37 +422,38 @@
   background-color: var(--neutral-dark-30);
 }
 
-.root-module_border_radius-xxs__fG-b3{
+.root-module_background_thone-dark-10__UKKoN {
+  background-color: var(--neutral-dark-10);
+}
+
+.root-module_border_radius-xxs__fG-b3 {
   border-radius: var(--xbox-border-small);
 }
 
-.root-module_border_radius-xs__6rvkQ{
+.root-module_border_radius-xs__6rvkQ {
   border-radius: var(--xbox-rounding-default);
 }
 
-.root-module_border_radius-s__HnVwV{
+.root-module_border_radius-s__HnVwV {
   border-radius: var(--xbox-rounding-s);
 }
 
-.root-module_border_radius-m__Cz-lB{
+.root-module_border_radius-m__Cz-lB {
   border-radius: var(--xbox-rounding-m);
 }
 
-.root-module_border_radius-l__PB9Hh{
+.root-module_border_radius-l__PB9Hh {
   border-radius: var(--xbox-rounding-l);
 }
 
-.root-module_border_radius-xl__rGaRy{
+.root-module_border_radius-xl__rGaRy {
   border-radius: var(--xbox-rounding-xl);
 }
 
-.root-module_border_radius-full__HuBVW{
+.root-module_border_radius-full__HuBVW {
   border-radius: var(--xbox-rounding-circle);
 }
 
-
-
-
 .root-module_xtext__IcpGn {
   font-style: normal;
   font-family: var(--xtext-font);
@@ -630,6 +629,142 @@
   color: var(--xicon-color-turquoise);
 }
 
+.root-module_xskeleton__UmX7A {
+  background-color: var(--color-neutral-light);
+  display: inline-block;
+  height: 1em;
+  position: relative;
+  overflow: hidden;
+}
+
+.root-module_xskeleton__UmX7A::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(110deg, #ececec 0%, #f5f5f5 20%, #ececec 60%, #ececec 0%);
+  animation: root-module_shimmer__ZfOg- 2s infinite;
+  background-size: 200% 100%;
+  content: "";
+}
+
+@keyframes root-module_shimmer__ZfOg- {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.root-module_xskeleton--icon__VY22L {
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  border-radius: 50%;
+}
+
+.root-module_xskeleton--text__6O-w6 {
+  border-radius: 8px;
+}
+
+.root-module_xskeleton--text__6O-w6.root-module_xskeleton--size-xs__iatOY {
+  height: var(--xbox-size-14);
+}
+
+.root-module_xskeleton--text__6O-w6.root-module_xskeleton--size-s__-y2j2 {
+  height: var(--xbox-size-13);
+}
+
+.root-module_xskeleton--text__6O-w6.root-module_xskeleton--size-m__qSmGh {
+  height: var(--xbox-size-11);
+}
+
+.root-module_xskeleton--text__6O-w6.root-module_xskeleton--size-l__VbENw {
+  height: var(--xbox-size-10);
+}
+
+.root-module_xskeleton--text__6O-w6.root-module_xskeleton--size-xl__W86iA {
+  height: var(--xbox-size-9);
+}
+
+.root-module_xskeleton--text__6O-w6.root-module_xskeleton--width-s__FS3XR {
+  width: 25%;
+}
+
+.root-module_xskeleton--text__6O-w6.root-module_xskeleton--width-m__kuQiB {
+  width: 50%;
+}
+
+.root-module_xskeleton--text__6O-w6.root-module_xskeleton--width-l__9bZo- {
+  width: 75%;
+}
+
+.root-module_xskeleton--text__6O-w6.root-module_xskeleton--width-xl__7PVRT {
+  width: 100%;
+}
+
+.root-module_xskeleton--tag__Nsgdl {
+  min-width: 52px;
+  border-radius: 16px;
+  height: 24px;
+}
+
+.root-module_xskeleton--image__H4Y7y {
+  border-radius: 16px;
+}
+
+.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--size-xs__iatOY {
+  height: var(--xbox-size-6);
+  width: var(--xbox-size-6);
+  min-height: var(--xbox-size-6);
+  min-width: var(--xbox-size-6);
+}
+
+.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--size-s__-y2j2 {
+  height: var(--xbox-size-5);
+  width: var(--xbox-size-5);
+  min-width: var(--xbox-size-5);
+  min-height: var(--xbox-size-5);
+}
+
+.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--size-m__qSmGh {
+  height: var(--xbox-size-4);
+  min-height: var(--xbox-size-4);
+  width: var(--xbox-size-4);
+  min-width: var(--xbox-size-4);
+}
+
+.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--size-l__VbENw {
+  height: var(--xbox-size-3);
+  min-height: var(--xbox-size-3);
+  width: var(--xbox-size-3);
+  min-width: var(--xbox-size-3);
+}
+
+.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--size-xl__W86iA {
+  height: var(--xbox-size-2);
+  min-height: var(--xbox-size-2);
+  width: var(--xbox-size-2);
+  min-width: var(--xbox-size-2);
+}
+
+.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--width-s__FS3XR {
+
+}
+
+.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--width-m__kuQiB {
+
+}
+
+.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--width-l__9bZo- {
+
+}
+
+.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--width-xl__7PVRT {
+  width: 100%;
+}
+
 .root-module_x-icon__YwX20 {
   display: inline-block;
   box-sizing: content-box;
@@ -923,142 +1058,6 @@
   border-radius: var(--xbox-rounding-pill);
 }
 
-.root-module_xskeleton__UmX7A {
-  background-color: var(--color-neutral-light);
-  display: inline-block;
-  height: 1em;
-  position: relative;
-  overflow: hidden;
-}
-
-.root-module_xskeleton__UmX7A::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  transform: translateX(-100%);
-  background: linear-gradient(110deg, #ececec 0%, #f5f5f5 20%, #ececec 60%, #ececec 0%);
-  animation: root-module_shimmer__ZfOg- 2s infinite;
-  background-size: 200% 100%;
-  content: "";
-}
-
-@keyframes root-module_shimmer__ZfOg- {
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-.root-module_xskeleton--icon__VY22L {
-  width: 24px;
-  height: 24px;
-  min-width: 24px;
-  min-height: 24px;
-  border-radius: 50%;
-}
-
-.root-module_xskeleton--text__6O-w6 {
-  border-radius: 8px;
-}
-
-.root-module_xskeleton--text__6O-w6.root-module_xskeleton--size-xs__iatOY {
-  height: var(--xbox-size-14);
-}
-
-.root-module_xskeleton--text__6O-w6.root-module_xskeleton--size-s__-y2j2 {
-  height: var(--xbox-size-13);
-}
-
-.root-module_xskeleton--text__6O-w6.root-module_xskeleton--size-m__qSmGh {
-  height: var(--xbox-size-11);
-}
-
-.root-module_xskeleton--text__6O-w6.root-module_xskeleton--size-l__VbENw {
-  height: var(--xbox-size-10);
-}
-
-.root-module_xskeleton--text__6O-w6.root-module_xskeleton--size-xl__W86iA {
-  height: var(--xbox-size-9);
-}
-
-.root-module_xskeleton--text__6O-w6.root-module_xskeleton--width-s__FS3XR {
-  width: 25%;
-}
-
-.root-module_xskeleton--text__6O-w6.root-module_xskeleton--width-m__kuQiB {
-  width: 50%;
-}
-
-.root-module_xskeleton--text__6O-w6.root-module_xskeleton--width-l__9bZo- {
-  width: 75%;
-}
-
-.root-module_xskeleton--text__6O-w6.root-module_xskeleton--width-xl__7PVRT {
-  width: 100%;
-}
-
-.root-module_xskeleton--tag__Nsgdl {
-  min-width: 52px;
-  border-radius: 16px;
-  height: 24px;
-}
-
-.root-module_xskeleton--image__H4Y7y {
-  border-radius: 16px;
-}
-
-.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--size-xs__iatOY {
-  height: var(--xbox-size-6);
-  width: var(--xbox-size-6);
-  min-height: var(--xbox-size-6);
-  min-width: var(--xbox-size-6);
-}
-
-.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--size-s__-y2j2 {
-  height: var(--xbox-size-5);
-  width: var(--xbox-size-5);
-  min-width: var(--xbox-size-5);
-  min-height: var(--xbox-size-5);
-}
-
-.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--size-m__qSmGh {
-  height: var(--xbox-size-4);
-  min-height: var(--xbox-size-4);
-  width: var(--xbox-size-4);
-  min-width: var(--xbox-size-4);
-}
-
-.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--size-l__VbENw {
-  height: var(--xbox-size-3);
-  min-height: var(--xbox-size-3);
-  width: var(--xbox-size-3);
-  min-width: var(--xbox-size-3);
-}
-
-.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--size-xl__W86iA {
-  height: var(--xbox-size-2);
-  min-height: var(--xbox-size-2);
-  width: var(--xbox-size-2);
-  min-width: var(--xbox-size-2);
-}
-
-.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--width-s__FS3XR {
-
-}
-
-.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--width-m__kuQiB {
-
-}
-
-.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--width-l__9bZo- {
-
-}
-
-.root-module_xskeleton--image__H4Y7y.root-module_xskeleton--width-xl__7PVRT {
-  width: 100%;
-}
-
 .root-module_xbuttonicon__4dXbb {
   display: flex;
   align-items: center;