@team_yumi/ramen 0.4.0-next.20231219-decd25b-61c12120c13e6cf198e03e06cba26629 → 0.4.0-next.20231227-5618a4f-e5f6b9ce4a5e711b5af6aa6a9a1429bf

package/components/mobile/x-modal/root.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Collections } from './../../../models';
+export interface IAction {
+    /**
+     * The key of the action
+     */
+    key: string;
+    /**
+     * Text for button
+     */
+    text?: string;
+    /**
+     * Type of button 'default', 'solid', 'tonal', 'outline', 'clear'
+     */
+    type?: (typeof Collections.IType)[number];
+    /**
+     * Icon for button
+     */
+    icon?: (typeof Collections.IIcon)[number];
+    /**
+     * State disabled for button
+     */
+    disabled?: boolean;
+    /**
+     * Loading state in button
+     */
+    loading?: boolean;
+    /**
+     * Render custom component
+     */
+    render?: (key: string) => React.ReactNode;
+    /**
+     * Event fired when button is clicked
+     */
+    onAction?: () => void;
+}
+export interface IProps {
+    /**
+     * Child elements to wrap
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom component, which is placed below the title and subtitle
+     */
+    headerChildren?: React.ReactNode;
+    /**
+     * Icon for modal
+     */
+    icon?: (typeof Collections.IIcon)[number];
+    /**
+     * Title for modal
+     */
+    title?: string;
+    /**
+     * Subtitle for modal
+     */
+    subtitle?: string;
+    /**
+     * Size of modal 'xxs', 'xs', 's', 'm', 'l', 'xl'
+     */
+    size?: (typeof Collections.ISize)[number];
+    /**
+     * Show or hide modal
+     */
+    visible: boolean;
+    /**
+     * If true, show icon close
+     */
+    closable?: boolean;
+    /**
+     * Event fired when icon close is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Arrays for show button
+     */
+    actions?: Array<IAction>;
+    /**
+     * Event fired on buttons
+     */
+    onActionClick?: (key: string) => void;
+}
+declare const XModal: React.FC<IProps>;
+export default XModal;

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);
@@ -3625,7 +3624,7 @@
     background-color: transparent;
 }
 
-.root-module_xmodal__IIep8 {
+.root-module_x-modal__bOyFq {
   position: fixed;
   top: 0px;
   left: 0px;
@@ -3635,41 +3634,41 @@
   display: none;
 }
 
-.root-module_xmodal__IIep8.root-module_xmodal-visible__rNM4C {
+.root-module_x-modal__bOyFq.root-module_x-modal-visible__kkdBb {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
 }
 
-.root-module_xmodal-size_xl__uHWRl.root-module_xmodal-visible__rNM4C .root-module_xmodal__modal-show__vB6WU {
+.root-module_x-modal-size_xl__bYyI9.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
   height: 95%;
 }
 
-.root-module_xmodal-size_l__-Np16.root-module_xmodal-visible__rNM4C .root-module_xmodal__modal-show__vB6WU {
+.root-module_x-modal-size_l__3Ur5b.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
   height: 85%;
 }
 
-.root-module_xmodal-size_m__wi3d-.root-module_xmodal-visible__rNM4C .root-module_xmodal__modal-show__vB6WU {
+.root-module_x-modal-size_m__qnsVl.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
   height: 70%;
 }
 
-.root-module_xmodal-size_s__qLBMt.root-module_xmodal-visible__rNM4C .root-module_xmodal__modal-show__vB6WU {
+.root-module_x-modal-size_s__9YkzV.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
   height: 415px;
 }
 
-.root-module_xmodal-size_xs__jgYyX.root-module_xmodal-visible__rNM4C .root-module_xmodal__modal-show__vB6WU {
+.root-module_x-modal-size_xs__-1-Vc.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
   height: 352px;
 }
 
-.root-module_xmodal-size_xxs__sqPRk.root-module_xmodal-visible__rNM4C .root-module_xmodal__modal-show__vB6WU {
+.root-module_x-modal-size_xxs__DcvRv.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
   height: 250px;
 }
 
-.root-module_xmodal__IIep8.root-module_xmodal-visible__rNM4C .root-module_xmodal__backdrop__6xGWs {
+.root-module_x-modal__bOyFq.root-module_x-modal-visible__kkdBb .root-module_x-modal__backdrop__Kj2dm {
   display: block;
 }
 
-.root-module_xmodal__modal__iutrg {
+.root-module_x-modal__modal__4ywZm {
   height: 0;
   position: relative;
   background-color: var(--color-neutral-lightest);
@@ -3681,7 +3680,7 @@
   justify-content: space-between;
 }
 
-.root-module_xmodal__backdrop__6xGWs {
+.root-module_x-modal__backdrop__Kj2dm {
   position: fixed;
   top: 0px;
   left: 0px;
@@ -3691,58 +3690,64 @@
   opacity: 0.6;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__close__87-1a {
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__close__2-hP- {
   position: absolute;
-  right: var(--xbox-padding-m);
-  top: var(--xbox-padding-m);
+  right: var(--xbox-padding-l);
+  top: var(--xbox-padding-l);
   border-radius: 50%;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__close__87-1a > button > div {
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__close__2-hP- > button > div {
   background-color: var(--color-neutral-light);
   padding: 4px;
   border-radius: 50%;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__header__FtI0L > .root-module_xmodal__modal__header__icon__s-sye {
-  padding-bottom: 4px;
+.root-module_x-modal__modal__header__icon__KbIDv,  .root-module_x-modal__modal__header__icon__KbIDv > div{
+  height: 36px;
+  width: 36px;
+}
+
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__header__RlJEZ > .root-module_x-modal__modal__header__icon__KbIDv {
+  padding-bottom: var(--xbox-padding-s);
   display: block;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__header__FtI0L > .root-module_xmodal__modal__header__title__sYCME {
-  padding-top: 24px;
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__header__RlJEZ > .root-module_x-modal__modal__header__title__WQZg7 {
   display: block;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__header__FtI0L > .root-module_xmodal__modal__header__subtitle__xPXVt {
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__header__RlJEZ > .root-module_x-modal__modal__header__subtitle__2KWGW {
   display: block;
   padding-top: var(--xbox-padding-xs);
   opacity: 0.5;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__header__FtI0L > .root-module_xmodal__modal__header__children__rTV29 {
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__header__RlJEZ > .root-module_x-modal__modal__header__children__RYX9d {
   padding-top: var(--xbox-padding-xs);
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__header__FtI0L {
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__header__RlJEZ {
   padding: 0 var(--xbox-padding-xl);
-  padding-top: 32px;
-  padding-bottom: 8px;
+  padding-top: 24px;
+  padding-bottom: 16px;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__body__eiE3Y {
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__body__bBjAl {
   padding: var(--xbox-padding-xl);
+  padding-top: 0;
   overflow: auto;
   flex: 1;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__actions__hybm9 {
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__actions__cGHKS {
   display: block;
   padding: var(--xbox-padding-xl);
   margin-bottom: env(safe-area-inset-bottom);
+  padding-bottom: 32px;
 }
 
 .root-module_xselect__eYomf {