@wavemaker/foundation-css 11.14.2-rc.6311 → 11.14.4-rc.647538

package/cjs/src_tokens_mobile_components_left-nav_left-nav_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_left-nav_left-nav_json"],{
 
-/***/ "./src/tokens/mobile/components/left-nav/left-nav.json":
+/***/ "./src/tokens/mobile/components/left-nav/left-nav.json"
 /*!*************************************************************!*\
   !*** ./src/tokens/mobile/components/left-nav/left-nav.json ***!
   \*************************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"left-panel":{"mapping":{"min-height":{"type":"space","value":"100%","attributes":{"subtype":"space","description":"Controls the minimum height of the left navigation panel (the side panel that slides in from the left). When set to 100%, the panel takes up the full height of the viewport. Acceptable units: %, px.<br>CSS variable: --wm-left-panel-min-height"}},"background":{"type":"color","value":"#ffffff","attributes":{"subtype":"color","description":"Sets the background color of the left navigation panel (the side panel that slides in from the left). This is the main background color that appears behind the navigation content.<br>CSS variable: --wm-left-panel-background"}},"elevation":{"type":"radius","value":"{elevation.shadow.1.value}","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the left navigation panel. This creates a subtle shadow that makes the panel appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-left-panel-elevation"}},"border":{"top":{"right":{"radius":{"type":"radius","value":"{radius.lg.value}","attributes":{"subtype":"radius","description":"Controls the corner rounding of the top-right corner of the left navigation panel. This makes the panel appear with rounded corners on the top-right for a softer appearance.<br>CSS variable: --wm-left-panel-border-top-right-radius"}}}},"bottom":{"right":{"radius":{"type":"radius","value":"{radius.lg.value}","attributes":{"subtype":"radius","description":"Controls the corner rounding of the bottom-right corner of the left navigation panel. This makes the panel appear with rounded corners on the bottom-right for a softer appearance.<br>CSS variable: --wm-left-panel-border-bottom-right-radius"}}}}},"max-width":{"type":"space","value":"360px","attributes":{"subtype":"space","description":"Controls the maximum width of the left navigation panel (the side panel that slides in from the left). This determines how wide the panel can be when it\'s open. Acceptable units: px.<br>CSS variable: --wm-left-panel-max-width"}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"left-panel":{"mapping":{"min-height":{"type":"space","value":"100%"},"background":{"type":"color","value":"#ffffff"},"elevation":{"type":"radius","value":"{elevation.shadow.1.value}"},"border":{"top":{"right":{"radius":{"type":"radius","value":"{radius.lg.value}"}}},"bottom":{"right":{"radius":{"type":"radius","value":"{radius.lg.value}"}}}},"max-width":{"type":"space","value":"360px"}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_list_list_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_list_list_json"],{
 
-/***/ "./src/tokens/mobile/components/list/list.json":
+/***/ "./src/tokens/mobile/components/list/list.json"
 /*!*****************************************************!*\
   !*** ./src/tokens/mobile/components/list/list.json ***!
   \*****************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"list":{"meta":{"mapping":{"selector":{"mobile":".app-list"}}},"mapping":{"heading":{"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside list headings (section titles at the top of lists). This creates breathing room around the heading content. Acceptable units: px.<br>CSS variable: --wm-list-heading-padding"}},"margin-bottom":{"value":"6px","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin (vertical spacing) of list headings (section titles at the top of lists). This creates spacing below the heading, separating it from the list items. Acceptable units: px.<br>CSS variable: --wm-list-heading-margin-bottom"}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of list headings (section titles at the top of lists). When transparent, only the heading text is visible. When filled with a color, the heading appears with a colored background.<br>CSS variable: --wm-list-heading-background-color"}}},"title":{"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when list title text wraps to multiple lines. This ensures proper spacing for the title text displayed in list items.<br>CSS variable: --wm-list-title-line-height"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of list title text (the primary text that appears in each list item). This affects how large the title text appears.<br>CSS variable: --wm-list-title-font-size"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of list titles (the primary text that appears in each list item). This determines what color the title text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-list-title-color"}},"font-family":{"value":"{font.family.plain.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for list title text (the primary text that appears in each list item). This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-list-title-font-family"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold list title text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-list-title-font-weight"}}},"sub-heading":{"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of list sub-heading text (secondary text that appears below the title in each list item). This affects how large the sub-heading text appears.<br>CSS variable: --wm-list-sub-heading-font-size"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when list sub-heading text wraps to multiple lines. This ensures proper spacing for the sub-heading text displayed in list items.<br>CSS variable: --wm-list-sub-heading-line-height"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of list sub-headings (secondary text that appears below the title in each list item). This determines what color the sub-heading text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-list-sub-heading-color"}},"font-family":{"value":"{font.family.plain.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for list sub-heading text (secondary text that appears below the title in each list item). This determines whether the sub-heading text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-list-sub-heading-font-family"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold list sub-heading text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-list-sub-heading-font-weight"}}},"item":{"border":{"radius":{"value":"6px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of list items (individual entries in a list). This makes the list items appear with rounded corners for a softer appearance.<br>CSS variable: --wm-list-item-border-radius"}}},"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside list items (the space between the list item content and its borders). This creates breathing room around each list item content.<br>CSS variable: --wm-list-item-padding"}},"min-height":{"value":"56px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of list items (individual entries in a list that users can interact with). This ensures each list item is always tall enough to be visible and properly displayed. Acceptable units: px, em, rem.<br>CSS variable: --wm-list-item-min-height"}},"header":{"background-color":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of list item headers (section titles that group related list items). This is the main background color that appears behind the header text.<br>CSS variable: --wm-list-item-header-background-color"}}}},"select":{"icon":{"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of selection icons in lists (checkmarks or other icons that indicate selected list items). This affects how large the selection icons appear.<br>CSS variable: --wm-list-select-icon-font-size"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of selection icons in lists (checkmarks or other icons that indicate selected list items). This determines what color the selection icons appear in, typically matching the primary theme color.<br>CSS variable: --wm-list-select-icon-color"}}}},"appearances":{}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"list":{"meta":{"mapping":{"selector":{"mobile":".app-list"}}},"mapping":{"select":{"icon":{"font-size":{"value":"{body.medium.font-size.value}","type":"font"},"color":{"value":"{color.primary.@.value}","type":"color"}}},"listicon":{"margin":{"top":{"value":"10px","type":"space"},"right":{"value":"{space.2.value}","type":"space"}}},"group":{"margin":{"bottom":{"value":"{space.4.value}","type":"space"}}},"group-heading":{"background-color":{"value":"transparent","type":"color"},"font-size":{"value":"{body.large.font-size.value}","type":"font"},"padding":{"left":{"value":"{space.2.value}","type":"space"},"right":{"value":"{space.2.value}","type":"space"}},"line-height":{"value":"40px","type":"font"},"font-family":{"value":"{font.family.plain.value}","type":"font"}},"loading":{"icon":{"font":{"size":{"value":"{space.4.value}","type":"font"}},"text":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}}}},"heading":{"padding":{"value":"{space.2.value}","type":"space"},"margin-bottom":{"value":"6px","type":"space"},"background-color":{"value":"transparent","type":"color"}},"title":{"line-height":{"value":"{body.large.line-height.value}","type":"font"},"font-size":{"value":"{body.large.font-size.value}","type":"font"},"color":{"value":"{color.on-surface.@.value}","type":"color"},"font-family":{"value":"{font.family.plain.value}","type":"font"},"font-weight":{"value":"{body.large.font-weight.value}","type":"font"}},"sub-heading":{"font-size":{"value":"{body.medium.font-size.value}","type":"font"},"line-height":{"value":"{body.medium.line-height.value}","type":"font"},"color":{"value":"{color.on-surface.@.value}","type":"color"},"font-family":{"value":"{font.family.plain.value}","type":"font"},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font"}},"empty":{"message":{"line-height":{"value":"18px","type":"font"},"font-size":{"value":"{body.large.font-size.value}","type":"font"},"color":{"value":"{color.on-surface.@.value}","type":"color"}}},"on-demand-messsage":{"padding":{"vertical":{"value":"{space.2.value}","type":"space"}},"width":{"value":"100%","type":"space"},"text":{"value":"{color.on-surface.@.value}","type":"color"}},"item":{"background-color":{"active":{"value":"{color.surface.container.high.@.value}","type":"color"}},"padding":{"value":"{space.1.value}","type":"space"},"min-height":{"value":"56px","type":"space"},"header":{"background-color":{"value":"{color.surface.container.lowest.@.value}","type":"color"},"color":{"value":"{color.on-surface.@.value}","type":"color"}},"border":{"radius":{"value":"6px","type":"radius"},"style":{"value":"{border.style.base.value}","type":"radius"},"color":{"value":"transparent","type":"color"}}}},"appearances":{}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_login_login_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_login_login_json"],{
 
-/***/ "./src/tokens/mobile/components/login/login.json":
+/***/ "./src/tokens/mobile/components/login/login.json"
 /*!*******************************************************!*\
   !*** ./src/tokens/mobile/components/login/login.json ***!
   \*******************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"login":{"meta":{"mapping":{"selector":{"mobile":".app-login"}}},"mapping":{"error":{"text":{"color":{"value":"{color.on-error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of login error messages (messages that appear when login fails or validation errors occur). This determines what color the error message text appears in, typically a contrasting color to ensure visibility against the error background.<br>CSS variable: --wm-login-error-text-color"}}},"background":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of login error messages (messages that appear when login fails or validation errors occur). This is the main background color that appears behind the error message text.<br>CSS variable: --wm-login-error-background-color"}}},"border":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around login error messages. This determines the color of the outline that defines the error message container.<br>CSS variable: --wm-login-error-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of login error messages. This makes the error messages appear with rounded corners for a softer appearance.<br>CSS variable: --wm-login-error-border-radius"}}}},"form":{"padding":{"top":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside the login form container. This creates breathing room above the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding-top"}},"bottom":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside the login form container. This creates breathing room below the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding-bottom"}},"left":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside the login form container. This creates breathing room on the left side of the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding-left"}},"right":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside the login form container. This creates breathing room on the right side of the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding-right"}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"login":{"meta":{"mapping":{"selector":{"mobile":".app-login"}}},"mapping":{"error":{"text":{"color":{"value":"{color.on-error.@.value}","type":"color"}},"background":{"color":{"value":"{color.error.@.value}","type":"color"}},"border":{"color":{"value":"{color.error.@.value}","type":"color"},"radius":{"value":"{radius.sm.value}","type":"radius"}}},"form":{"padding":{"top":{"value":"{space.9.value}","type":"space"},"bottom":{"value":"{space.9.value}","type":"space"},"left":{"value":"{space.9.value}","type":"space"},"right":{"value":"{space.9.value}","type":"space"}}}},"appearances":{}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_lottie_lottie_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_lottie_lottie_json"],{
 
-/***/ "./src/tokens/mobile/components/lottie/lottie.json":
+/***/ "./src/tokens/mobile/components/lottie/lottie.json"
 /*!*********************************************************!*\
   !*** ./src/tokens/mobile/components/lottie/lottie.json ***!
   \*********************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"lottie":{"mapping":{"content":{"height":{"value":"{spacer.7.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of lottie animation content (animated graphics and illustrations). This determines how tall the lottie animation appears. Acceptable units: px.<br>CSS variable: --wm-lottie-content-height"}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of lottie animation content (animated graphics and illustrations). When set to 100%, the animation takes up the full width of its container. Acceptable units: %, px.<br>CSS variable: --wm-lottie-content-width"}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"lottie":{"mapping":{"content":{"height":{"value":"{spacer.7.value}","type":"space"},"width":{"value":"100%","type":"space"}}},"appearances":{}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_message_message_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_message_message_json"],{
 
-/***/ "./src/tokens/mobile/components/message/message.json":
+/***/ "./src/tokens/mobile/components/message/message.json"
 /*!***********************************************************!*\
   !*** ./src/tokens/mobile/components/message/message.json ***!
   \***********************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"message":{"meta":{"mapping":{"selector":{"mobile":".app-message"}},"appearances":{"filled":{"variantGroups":{"status":{"success":{"selector":{"mobile":".alert-success"}},"info":{"selector":{"mobile":".alert-info"}},"warning":{"selector":{"mobile":".alert-warning"}},"error":{"selector":{"mobile":".alert-error"}},"loading":{"selector":{"mobile":".alert-loading"}}}}}}},"mapping":{"container":{"border":{"radius":{"value":"6px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of message containers (alert boxes that display notifications, warnings, or information). This makes the message containers appear with rounded corners for a softer appearance.<br>CSS variable: --wm-message-container-border-radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around message containers. This determines how thick the outline appears around the message container. Acceptable units: px.<br>CSS variable: --wm-message-container-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around message containers. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-message-container-border-style"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around message containers. This determines the color of the outline that defines the message container.<br>CSS variable: --wm-message-container-border-color"}}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of message containers (alert boxes that display notifications, warnings, or information). This is the main background color that appears behind the message content.<br>CSS variable: --wm-message-container-background"}},"padding":{"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside message containers. This creates breathing room above the message content. Acceptable units: px.<br>CSS variable: --wm-message-container-padding-top"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside message containers. This creates breathing room below the message content. Acceptable units: px.<br>CSS variable: --wm-message-container-padding-bottom"}},"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside message containers. This creates breathing room on the left side of the message content. Acceptable units: px.<br>CSS variable: --wm-message-container-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside message containers. This creates breathing room on the right side of the message content. Acceptable units: px.<br>CSS variable: --wm-message-container-padding-right"}}}},"text-wrapper":{"padding":{"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside the message text wrapper (the container that holds the message text). This creates breathing room on the left side of the text content. Acceptable units: px.<br>CSS variable: --wm-message-text-wrapper-padding-left"}}}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of message content (the main text that appears in message containers). This determines what color the message text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-message-color"}},"title":{"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of message title text (the heading text that appears at the top of message containers). This affects how large the title text appears.<br>CSS variable: --wm-message-title-font-size"}},"weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold message title text appears. When set to 700, the title text appears bold to emphasize the message heading.<br>CSS variable: --wm-message-title-font-weight"}}},"padding":{"bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) below message titles. This creates spacing between the title and the message text content. Acceptable units: px.<br>CSS variable: --wm-message-title-padding-bottom"}}}},"text":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of message text (the main content text that appears in message containers). This affects how large the message text appears.<br>CSS variable: --wm-message-text-size"}}},"icon":{"size":{"value":"20px","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of message icons (icons that appear alongside message content to indicate the message type). This affects how large the icons appear. Acceptable units: px.<br>CSS variable: --wm-message-icon-size"}}},"close-btn":{"padding":{"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside the message close button. This creates breathing room on the left side of the close button. Acceptable units: px.<br>CSS variable: --wm-message-close-btn-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside the message close button. This creates breathing room on the right side of the close button. Acceptable units: px.<br>CSS variable: --wm-message-close-btn-padding-right"}}},"border":{"radius":{"value":"6px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the message close button. This makes the close button appear with rounded corners for a softer appearance.<br>CSS variable: --wm-message-close-btn-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the message close button. When transparent, no border is visible. When filled with a color, the close button has a visible outline.<br>CSS variable: --wm-message-close-btn-border-color"}}},"icon":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of the close button icon (the X or close symbol that appears in the message close button). This affects how large the close icon appears.<br>CSS variable: --wm-message-close-btn-icon-size"}}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the message close button. When transparent, only the close icon is visible. When filled with a color, the close button appears with a colored background.<br>CSS variable: --wm-message-close-btn-background-color"}}},"ripple":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the ripple effect that appears when the message close button is pressed or tapped. When transparent, no ripple effect is visible. When filled with a color, a ripple animation appears on interaction.<br>CSS variable: --wm-message-close-btn-ripple-color"}}}}},"appearances":{"filled":{"variantGroups":{"status":{"success":{"container":{"background":{"value":"{color.success.@.value}","type":"color"},"border":{"color":{"value":"{color.success.@.value}","type":"color"}}},"color":{"value":"{color.on-success.@.value}","type":"color"}},"info":{"container":{"background":{"value":"{color.info.@.value}","type":"color"},"border":{"color":{"value":"{color.info.@.value}","type":"color"}}},"color":{"value":"{color.on-info.@.value}","type":"color"}},"warning":{"container":{"background":{"value":"{color.warning.@.value}","type":"color"},"border":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"color":{"value":"{color.on-warning.@.value}","type":"color"}},"error":{"container":{"background":{"value":"{color.error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}},"color":{"value":"{color.on-error.@.value}","type":"color"}},"loading":{"container":{"background":{"value":"{color.primary.@.value}","type":"color"},"border":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"color":{"value":"{color.on-primary.@.value}","type":"color"}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"message":{"meta":{"mapping":{"selector":{"mobile":".app-message"}},"appearances":{"filled":{"variantGroups":{"status":{"success":{"selector":{"mobile":".alert-success"}},"info":{"selector":{"mobile":".alert-info"}},"warning":{"selector":{"mobile":".alert-warning"}},"error":{"selector":{"mobile":".alert-error"}},"loading":{"selector":{"mobile":".alert-loading"}}}}}}},"mapping":{"container":{"border":{"radius":{"value":"6px","type":"radius"},"width":{"value":"{border.width.base.value}","type":"space"},"style":{"value":"{border.style.base.value}","type":"radius"},"color":{"value":"{color.primary.@.value}","type":"color"}},"background":{"value":"{color.primary.@.value}","type":"color"},"padding":{"top":{"value":"{space.2.value}","type":"space"},"bottom":{"value":"{space.2.value}","type":"space"},"left":{"value":"{space.2.value}","type":"space"},"right":{"value":"{space.2.value}","type":"space"}}},"text-wrapper":{"padding":{"left":{"value":"{space.4.value}","type":"space"}}},"color":{"value":"{color.on-primary.@.value}","type":"color"},"title":{"font":{"size":{"value":"{body.medium.font-size.value}","type":"font"},"weight":{"value":"{font.weight.700.value}","type":"font"}},"padding":{"bottom":{"value":"{space.1.value}","type":"space"}}},"text":{"size":{"value":"{body.large.font-size.value}","type":"font"}},"icon":{"size":{"value":"20px","type":"font"}},"close-btn":{"padding":{"left":{"value":"{space.2.value}","type":"space"},"right":{"value":"{space.2.value}","type":"space"}},"border":{"radius":{"value":"6px","type":"space"},"color":{"value":"transparent","type":"color"}},"icon":{"size":{"value":"{body.large.font-size.value}","type":"font"}},"background":{"color":{"value":"transparent","type":"color"}},"ripple":{"color":{"value":"transparent","type":"color"}}}},"appearances":{"filled":{"variantGroups":{"status":{"success":{"container":{"background":{"value":"{color.success.@.value}","type":"color"},"border":{"color":{"value":"{color.success.@.value}","type":"color"}}},"color":{"value":"{color.on-success.@.value}","type":"color"}},"info":{"container":{"background":{"value":"{color.info.@.value}","type":"color"},"border":{"color":{"value":"{color.info.@.value}","type":"color"}}},"color":{"value":"{color.on-info.@.value}","type":"color"}},"warning":{"container":{"background":{"value":"{color.warning.@.value}","type":"color"},"border":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"color":{"value":"{color.on-warning.@.value}","type":"color"}},"error":{"container":{"background":{"value":"{color.error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}},"color":{"value":"{color.on-error.@.value}","type":"color"}},"loading":{"container":{"background":{"value":"{color.primary.@.value}","type":"color"},"border":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"color":{"value":"{color.on-primary.@.value}","type":"color"}}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_modal-dialog_modal-dialog_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_modal-dialog_modal-dialog_json"],{
 
-/***/ "./src/tokens/mobile/components/modal-dialog/modal-dialog.json":
+/***/ "./src/tokens/mobile/components/modal-dialog/modal-dialog.json"
 /*!*********************************************************************!*\
   !*** ./src/tokens/mobile/components/modal-dialog/modal-dialog.json ***!
   \*********************************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"modal":{"meta":{"mapping":{"selector":{"mobile":".app-dialog.root"}}},"mapping":{"margin":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the outer margin (spacing) around modal dialogs (overlay windows that appear on top of the main content). This creates breathing room around the dialog container. Acceptable units: px.<br>CSS variable: --wm-modal-margin"}},"z-index":{"value":"1000","type":"radius","attributes":{"subtype":"opacity","description":"Controls the stacking order of modal dialogs (determines which elements appear on top when multiple elements overlap). Higher values make the dialog appear above other elements. This ensures modals are always visible above page content.<br>CSS variable: --wm-modal-z-index"}},"min-width":{"value":"320px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of modal dialogs. This ensures the dialog is always wide enough to be visible and properly displayed. Acceptable units: px.<br>CSS variable: --wm-modal-min-width"}},"max-height":{"value":"793px","type":"space","attributes":{"subtype":"space","description":"Controls the maximum height of modal dialogs. This prevents the dialog from becoming too tall and ensures it fits within the viewport. Acceptable units: px.<br>CSS variable: --wm-modal-max-height"}},"background":{"value":"{color.surface.container.high.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of modal dialogs (overlay windows that appear on top of the main content). This is the main background color that appears behind the dialog content.<br>CSS variable: --wm-modal-background"}},"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of modal dialogs. This makes the dialogs appear with rounded corners for a softer appearance.<br>CSS variable: --wm-modal-radius"}},"header":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside modal dialog headers (the top section that contains the title and close button). This creates breathing room around the header content. Acceptable units: px.<br>CSS variable: --wm-modal-header-padding"}},"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border at the bottom of modal dialog headers. This determines how thick the separator line appears between the header and body. Acceptable units: px.<br>CSS variable: --wm-modal-header-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border at the bottom of modal dialog headers. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-modal-header-border-style"}},"color":{"value":"#cccccc","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border at the bottom of modal dialog headers. This determines the color of the separator line between the header and body.<br>CSS variable: --wm-modal-header-border-color"}}},"close-btn":{"margin":{"value":"0","type":"space","attributes":{"subtype":"space","description":"Controls the outer margin (spacing) around the modal dialog close button. This creates spacing around the close button. Acceptable units: px.<br>CSS variable: --wm-modal-header-close-btn-margin"}},"border-width":{"value":"0","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the modal dialog close button. When set to 0, no border is visible. Acceptable units: px.<br>CSS variable: --wm-modal-header-close-btn-border-width"}},"font-size":{"value":"14px","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of the close button icon (the X or close symbol that appears in the modal dialog header). This affects how large the close icon appears. Acceptable units: px.<br>CSS variable: --wm-modal-header-close-btn-font-size"}},"color":{"value":"#aaaaaa","type":"color","attributes":{"subtype":"color","description":"Sets the color of the close button icon in modal dialog headers. This determines what color the close icon appears in.<br>CSS variable: --wm-modal-header-close-btn-color"}}}},"title":{"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between modal dialog title elements (the gap between the title text and adjacent elements like icons). This creates breathing room around the title. Acceptable units: px.<br>CSS variable: --wm-modal-title-gap"}},"font-size":{"value":"{h3.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of modal dialog title text (the heading text that appears at the top of modal dialogs). This affects how large the title text appears.<br>CSS variable: --wm-modal-title-font-size"}},"font-family":{"value":"{h3.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for modal dialog title text. This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-modal-title-font-family"}},"font-weight":{"value":"{h3.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold modal dialog title text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-modal-title-font-weight"}},"line-height":{"value":"{h3.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when modal dialog title text wraps to multiple lines. This ensures proper spacing for the title text.<br>CSS variable: --wm-modal-title-line-height"}},"letter-spacing":{"value":"{h3.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in modal dialog title text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-modal-title-letter-spacing"}}},"body":{"padding":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside modal dialog body sections (the main content area of the dialog). This creates breathing room around the body content. Acceptable units: px.<br>CSS variable: --wm-modal-body-padding"}}},"footer":{"padding":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside modal dialog footers (the bottom section that contains action buttons). This creates breathing room around the footer content. Acceptable units: px.<br>CSS variable: --wm-modal-footer-padding"}},"gap":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between footer buttons in modal dialogs (the gap between action buttons in the footer). This creates breathing room between buttons. Acceptable units: px.<br>CSS variable: --wm-modal-footer-gap"}},"btn":{"padding-vertical":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical padding (top and bottom spacing) inside footer buttons in modal dialogs. This creates breathing room above and below the button text. Acceptable units: px.<br>CSS variable: --wm-modal-footer-btn-padding-vertical"}},"padding-horizontal":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal padding (left and right spacing) inside footer buttons in modal dialogs. This creates breathing room on the left and right sides of the button text. Acceptable units: px.<br>CSS variable: --wm-modal-footer-btn-padding-horizontal"}}}},"icon":{"font-size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of modal dialog icons (icons that appear in the dialog to indicate the dialog type or provide visual context). This affects how large the icons appear.<br>CSS variable: --wm-modal-icon-font-size"}},"font-weight":{"value":"{h4.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold modal dialog icons appear. This affects the visual weight of the icons.<br>CSS variable: --wm-modal-icon-font-weight"}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"modal":{"meta":{"mapping":{"selector":{"mobile":".app-dialog.root"}}},"mapping":{"margin":{"value":"{space.6.value}","type":"space"},"z-index":{"value":"1000","type":"radius"},"min-width":{"value":"320px","type":"space"},"max-height":{"value":"793px","type":"space"},"background":{"value":"{color.surface.container.high.@.value}","type":"color"},"radius":{"value":"{radius.lg.value}","type":"radius"},"header":{"padding":{"value":"{space.4.value}","type":"space"},"border":{"width":{"value":"{border.width.base.value}","type":"space"},"style":{"value":"{border.style.base.value}","type":"radius"},"color":{"value":"#cccccc","type":"color"}},"close-btn":{"margin":{"value":"0","type":"space"},"border-width":{"value":"0","type":"radius"},"font-size":{"value":"14px","type":"font"},"color":{"value":"#aaaaaa","type":"color"}}},"title":{"gap":{"value":"{space.1.value}","type":"space"},"font-size":{"value":"{h3.font-size.value}","type":"font"},"font-family":{"value":"{h3.font-family.value}","type":"font"},"font-weight":{"value":"{h3.font-weight.value}","type":"font"},"line-height":{"value":"{h3.line-height.value}","type":"font"},"letter-spacing":{"value":"{h3.letter-spacing.value}","type":"font"}},"body":{"padding":{"value":"{space.6.value}","type":"space"}},"footer":{"padding":{"value":"{space.6.value}","type":"space"},"gap":{"value":"{space.3.value}","type":"space"},"btn":{"padding-vertical":{"value":"{space.3.value}","type":"space"},"padding-horizontal":{"value":"{space.6.value}","type":"space"}}},"icon":{"font-size":{"value":"{h4.font-size.value}","type":"font"},"font-weight":{"value":"{h4.font-weight.value}","type":"font"}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_nav_nav_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_nav_nav_json"],{
 
-/***/ "./src/tokens/mobile/components/nav/nav.json":
+/***/ "./src/tokens/mobile/components/nav/nav.json"
 /*!***************************************************!*\
   !*** ./src/tokens/mobile/components/nav/nav.json ***!
   \***************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"nav":{"item":{"background":{"value":"#ffffff","type":"color","attributes":{"subtype":"color","description":"Sets the background color of navigation items (individual menu items in navigation menus). This is the main background color that appears behind each navigation item.<br>CSS variable: --wm-nav-item-background"}},"min":{"height":{"value":"44px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of navigation items (individual menu items in navigation menus). This ensures each navigation item is always tall enough to be visible and properly displayed. Acceptable units: px.<br>CSS variable: --wm-nav-item-min-height"}}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of navigation item text (the text that appears in each navigation menu item). This affects how large the navigation text appears.<br>CSS variable: --wm-nav-item-font-size"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for navigation item text. This determines whether the navigation text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-nav-item-font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold navigation item text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-nav-item-font-weight"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when navigation item text wraps to multiple lines. This ensures proper spacing for the navigation text.<br>CSS variable: --wm-nav-item-line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in navigation item text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-nav-item-letter-spacing"}},"color":{"value":"#151420","type":"color","attributes":{"subtype":"color","description":"Sets the text color of navigation items (individual menu items in navigation menus). This determines what color the navigation text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-color"}},"padding":{"left":{"type":"space","value":"{space.3.value}","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside navigation items. This creates breathing room on the left side of the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-left"}},"right":{"type":"space","value":"{space.3.value}","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside navigation items. This creates breathing room on the right side of the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-right"}},"top":{"type":"space","value":"{space.3.value}","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside navigation items. This creates breathing room above the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-top"}},"bottom":{"type":"space","value":"{space.3.value}","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside navigation items. This creates breathing room below the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-bottom"}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"nav":{"item":{"background":{"value":"#ffffff","type":"color"},"min":{"height":{"value":"44px","type":"space"}},"font-size":{"value":"{label.large.font-size.value}","type":"font"},"font-family":{"value":"{label.large.font-family.value}","type":"font"},"font-weight":{"value":"{label.large.font-weight.value}","type":"font"},"line-height":{"value":"{label.large.line-height.value}","type":"font"},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font"},"color":{"value":"#151420","type":"color"},"padding":{"left":{"type":"space","value":"{space.3.value}"},"right":{"type":"space","value":"{space.3.value}"},"top":{"type":"space","value":"{space.3.value}"},"bottom":{"type":"space","value":"{space.3.value}"}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_page-content_page-content_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_page-content_page-content_json"],{
 
-/***/ "./src/tokens/mobile/components/page-content/page-content.json":
+/***/ "./src/tokens/mobile/components/page-content/page-content.json"
 /*!*********************************************************************!*\
   !*** ./src/tokens/mobile/components/page-content/page-content.json ***!
   \*********************************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"page":{"meta":{"mapping":{"selector":{"mobile":".app-page-content"}}},"mapping":{"content":{"background":{"value":"{color.surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of page content (the main content area of a page that displays below the navigation bar). This is the main background color that appears behind the page content.<br>CSS variable: --wm-page-content-background"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside page content (the main content area of a page that displays below the navigation bar). This creates breathing room around the page content. When set to 0, there is no padding.<br>CSS variable: --wm-page-content-padding"}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"page":{"meta":{"mapping":{"selector":{"mobile":".app-page-content"}}},"mapping":{"content":{"background":{"value":"{color.surface.@.value}","type":"color"}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_page-layout_page-layout_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_page-layout_page-layout_json"],{
 
-/***/ "./src/tokens/mobile/components/page-layout/page-layout.json":
+/***/ "./src/tokens/mobile/components/page-layout/page-layout.json"
 /*!*******************************************************************!*\
   !*** ./src/tokens/mobile/components/page-layout/page-layout.json ***!
   \*******************************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"app":{"font-family":{"value":"{body.medium.font-family.value}","type":"font"},"font-size":{"value":"{body.medium.font-size.value}","type":"font"},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font"},"line-height":{"value":"{body.medium.line-height.value}","type":"font"},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font"},"font-smoothing":{"value":"antialiased","type":"font"},"background":{"value":"{color.surface.@.value}","type":"color"},"color":{"value":"{color.on-background.@.value}","type":"color"},"text":{"transform":{"value":"none","type":"radius"}},"margin":{"value":"0","type":"space"},"padding":{"value":"0","type":"space"}},"aside":{"panel":{"width":{"value":"220px","type":"space"},"background":{"value":"{color.surface.@.value}","type":"color"},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"},"border":{"color":{"value":"{color.outline.variant.value}","type":"color"},"style":{"value":"solid","type":"radius"},"width":{"value":"0px 1px 0px 0px","type":"radius"},"radius":{"value":"{radius.none.value}","type":"radius"}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius"},"padding":{"top":{"value":"{space.5.value}","type":"space"},"right":{"value":"{space.0.value}","type":"space"},"bottom":{"value":"{space.0.value}","type":"space"},"left":{"value":"{space.0.value}","type":"space"}},"rail":{"width":{"value":"102px","type":"space"},"background":{"value":"{color.surface.@.value}","type":"color"},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"},"border":{"color":{"value":"{color.outline.variant.value}","type":"color"},"style":{"value":"solid","type":"radius"},"width":{"value":"0px 1px 0px 0px","type":"radius"},"radius":{"value":"{radius.none.value}","type":"radius"}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius"},"padding":{"top":{"value":"{space.7.value}","type":"space"},"right":{"value":"{space.0.value}","type":"space"},"bottom":{"value":"{space.0.value}","type":"space"},"left":{"value":"{space.0.value}","type":"space"}}}},"nav":{"padding":{"value":"{space.0.value}","type":"space"},"background":{"value":"{aside.panel.background.value}","type":"color"},"color":{"value":"{aside.panel.color.value}","type":"color"},"gap":{"value":"{space.1.value}","type":"space"},"item":{"min":{"height":{"value":"56px","type":"space"}},"padding":{"value":"{space.2.value} {space.6.value}","type":"space"},"font-size":{"value":"{label.large.font-size.value}","type":"font"},"font-family":{"value":"{label.large.font-family.value}","type":"font"},"font-weight":{"value":"{label.large.font-weight.value}","type":"font"},"line-height":{"value":"{label.large.line-height.value}","type":"font"},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font"},"radius":{"value":"{radius.none.value}","type":"radius"},"icon":{"size":{"value":"{icon.size.@.value}","type":"space"},"width":{"value":"{icon.size.@.value}","type":"space"},"height":{"value":"{icon.size.@.value}","type":"space"},"background":{"@":{"value":"inherit","type":"color"},"active":{"value":"inherit","type":"color"}},"color":{"@":{"value":"inherit","type":"color"},"active":{"value":"inherit","type":"color"}}},"gap":{"value":"{space.2.value}","type":"space"},"color":{"@":{"value":"{aside.nav.color.value}","type":"color"},"active":{"value":"{color.secondary.@.value}","type":"color"}},"background":{"@":{"value":"none","type":"color"},"active":{"value":"linear-gradient(105.79deg, ~\\"color-mix(in srgb, {color.secondary.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 44.21%, ~\\"color-mix(in srgb, {color.white.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 103.73%)","type":"color"}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color"},"opacity":{"hover":{"value":"{opacity.hover.value}","type":"radius"},"focus":{"value":"{opacity.focus.value}","type":"radius"},"active":{"value":"{opacity.active.value}","type":"radius"}}}},"caret":{"size":{"value":"{icon.size.sm.value}","type":"space"}},"indicator":{"width":{"value":"1px","type":"space"},"height":{"value":"100%","type":"space"},"position":{"top":{"value":"0","type":"space"},"right":{"value":"0","type":"space"},"bottom":{"value":"0","type":"space"},"left":{"value":"auto","type":"space"}},"radius":{"value":"0","type":"radius"},"color":{"@":{"value":"none","type":"color"},"active":{"value":"{color.secondary.@.value}","type":"color"}}}},"submenu":{"padding":{"value":"{space.0.value} {space.0.value} {space.0.value} {space.3.value}","type":"space"},"background":{"value":"{aside.nav.item.background.@.value}","type":"color"},"color":{"value":"{aside.nav.item.color.@.value}","type":"color"},"box":{"shadow":{"value":"none","type":"radius"}},"radius":{"value":"{radius.none.value} {radius.sm.value} {radius.sm.value} {radius.none.value}","type":"radius"},"item":{"min":{"height":{"value":"44px","type":"space"}},"padding":{"value":"{space.2.value} {space.6.value}","type":"space"},"font-size":{"value":"{label.large.font-size.value}","type":"font"},"font-family":{"value":"{label.large.font-family.value}","type":"font"},"font-weight":{"value":"{label.large.font-weight.value}","type":"font"},"line-height":{"value":"{label.large.line-height.value}","type":"font"},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font"},"radius":{"value":"{aside.nav.item.radius.value}","type":"radius"},"gap":{"value":"{space.2.value}","type":"space"},"color":{"@":{"value":"{aside.nav.submenu.color.value}","type":"color"},"active":{"value":"{color.on-secondary.container.@.value}","type":"color"}},"background":{"@":{"value":"{aside.nav.submenu.background.value}","type":"color"},"active":{"value":"{color.secondary.container.@.value}","type":"color"}}}},"rail":{"padding":{"value":"{space.0.value}","type":"space"},"background":{"value":"{aside.panel.rail.background.value}","type":"color"},"color":{"value":"{aside.panel.rail.color.value}","type":"color"},"gap":{"value":"{space.3.value}","type":"space"},"item":{"height":{"value":"90px","type":"space"},"padding":{"value":"{space.3.value} {space.0.value}","type":"space"},"font-size":{"value":"{label.medium.font-size.value}","type":"font"},"font-family":{"value":"{label.medium.font-family.value}","type":"font"},"font-weight":{"@":{"value":"{label.medium.font-weight.value}","type":"font"},"active":{"value":"{font.weight.600.value}","type":"font"}},"line-height":{"value":"{label.medium.line-height.value}","type":"font"},"letter-spacing":{"value":"{label.medium.letter-spacing.value}","type":"font"},"color":{"@":{"value":"{aside.nav.rail.color.value}","type":"color"},"active":{"value":"{color.secondary.@.value}","type":"color"}},"background":{"@":{"value":"{aside.nav.rail.background.value}","type":"color"},"active":{"value":"linear-gradient(105.79deg, ~\\"color-mix(in srgb, {color.secondary.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 44.21%, ~\\"color-mix(in srgb, {color.white.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 103.73%)","type":"color"}},"radius":{"value":"{radius.none.value}","type":"radius"},"gap":{"value":"{space.1.value}","type":"space"},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color"},"opacity":{"hover":{"value":"{opacity.hover.value}","type":"radius"},"focus":{"value":"{opacity.focus.value}","type":"radius"},"active":{"value":"{opacity.active.value}","type":"radius"}}}},"icon":{"size":{"value":"24px","type":"space"},"width":{"value":"40px","type":"space"},"height":{"value":"40px","type":"space"},"radius":{"@":{"value":"{radius.none.value}","type":"radius"},"active":{"value":"{radius.none.value}","type":"radius"}},"color":{"@":{"value":"{aside.nav.rail.item.color.@.value}","type":"color"},"active":{"value":"{aside.nav.rail.item.color.active.value}","type":"color"}},"background":{"@":{"value":"none","type":"color"},"active":{"value":"none","type":"color"}},"state":{"layer":{"color":{"value":"none","type":"color"},"opacity":{"hover":{"value":"{opacity.hover.value}","type":"radius"},"focus":{"value":"{opacity.focus.value}","type":"radius"},"active":{"value":"{opacity.active.value}","type":"radius"}}}}},"indicator":{"width":{"value":"{aside.nav.item.indicator.width.value}","type":"space"},"height":{"value":"{aside.nav.item.indicator.height.value}","type":"space"},"position":{"top":{"value":"{aside.nav.item.indicator.position.top.value}","type":"space"},"right":{"value":"{aside.nav.item.indicator.position.right.value}","type":"space"},"bottom":{"value":"{aside.nav.item.indicator.position.bottom.value}","type":"space"},"left":{"value":"{aside.nav.item.indicator.position.left.value}","type":"space"}},"radius":{"value":"{aside.nav.item.indicator.radius.value}","type":"radius"},"color":{"@":{"value":"{aside.nav.item.indicator.color.@.value}","type":"color"},"active":{"value":"{aside.nav.item.indicator.color.active.value}","type":"color"}}}},"submenu":{"padding":{"value":"{space.2.value}","type":"space"},"background":{"value":"{aside.nav.rail.background.value}","type":"color"},"color":{"value":"{aside.nav.rail.color.value}","type":"color"},"box":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius"}},"radius":{"value":"{aside.nav.submenu.radius.value}","type":"radius"},"width":{"value":"260px","type":"space"},"item":{"min":{"height":{"value":"44px","type":"space"}},"padding":{"value":"{space.2.value} {space.6.value}","type":"space"},"font-size":{"value":"{label.large.font-size.value}","type":"font"},"font-family":{"value":"{label.large.font-family.value}","type":"font"},"font-weight":{"value":"{label.large.font-weight.value}","type":"font"},"line-height":{"value":"{label.large.line-height.value}","type":"font"},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font"},"radius":{"value":"{aside.nav.rail.item.radius.value}","type":"radius"},"gap":{"value":"{space.2.value}","type":"space"},"color":{"@":{"value":"{aside.nav.rail.submenu.color.value}","type":"color"},"active":{"value":"{color.on-secondary.container.@.value}","type":"color"}},"background":{"@":{"value":"{aside.nav.rail.submenu.background.value}","type":"color"},"active":{"value":"{color.secondary.container.@.value}","type":"color"}}}}}},"right":{"nav":{"rail":{"submenu":{"radius":{"value":"{radius.sm.value} {radius.none.value} {radius.none.value} {radius.sm.value}","type":"radius"}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_pagination_pagination_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_pagination_pagination_json"],{
 
-/***/ "./src/tokens/mobile/components/pagination/pagination.json":
+/***/ "./src/tokens/mobile/components/pagination/pagination.json"
 /*!*****************************************************************!*\
   !*** ./src/tokens/mobile/components/pagination/pagination.json ***!
   \*****************************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"pagination":{"item":{"padding":{"value":"{space.1.value} {space.1.value}","type":"space"},"gap":{"@":{"value":"{space.1.value}","type":"space"}}},"page":{"item":{"link":{"color":{"value":"{color.on-surface.@.value}","type":"color"},"height":{"value":"32px","type":"space"},"width":{"value":"32px","type":"space"},"padding":{"value":"{space.2.value}","type":"space"},"radius":{"value":"{radius.xs.value}","type":"radius"},"active":{"background":{"value":"{color.primary.@.value}","type":"color"},"color":{"value":"{color.on-primary.@.value}","type":"color"},"font-weight":{"value":"{label.medium.font-weight.value}","type":"font"}},"hover":{"background":{"value":"{color.primary.container.@.value}","type":"color"}}},"icon":{"size":{"value":"{icon.size.sm.value}","type":"space"}},"totalcount":{"color":{"value":"{color.on-surface.@.value}","type":"color"}}}},"pager":{"link":{"elevation":{"value":"0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)","type":"radius"},"radius":{"value":"{radius.pill.value}","type":"radius"},"padding":{"value":"{space.2.value} {space.6.value}","type":"space"},"background":{"value":"transparent","type":"color"},"border":{"color":{"value":"{color.primary.@.value}","type":"color"},"width":{"value":"{border.width.base.value}","type":"space"},"style":{"value":"{border.style.base.value}","type":"radius"}},"min":{"width":{"value":"auto","type":"space"},"height":{"value":"32px","type":"space"}},"gap":{"value":"{space.2.value}","type":"space"},"color":{"value":"{color.on-surface.@.value}","type":"color"}},"previous":{"link":{"background":{"value":"transparent","type":"color"},"color":{"value":"{color.primary.@.value}","type":"color"}}},"next":{"link":{"color":{"value":"{color.on-primary.@.value}","type":"color"},"background":{"value":"{color.primary.@.value}","type":"color"}}},"state":{"previous":{"link":{"background":{"value":"{color.primary.@.value}","type":"color"},"focus":{"background":{"value":"{opacity.focus.value}","type":"radius"}},"hover":{"background":{"value":"{opacity.hover.value}","type":"radius"}},"active":{"background":{"value":"{opacity.active.value}","type":"radius"}}}},"next":{"link":{"focus":{"background":{"value":"{opacity.focus.value}","type":"radius"}},"hover":{"background":{"value":"{opacity.hover.value}","type":"radius"}},"active":{"background":{"value":"{opacity.active.value}","type":"radius"}},"background":{"value":"{color.on-primary.@.value}","type":"color"}}}},"gap":{"value":"{space.2.value}","type":"space"}},"pagecount":{"input":{"height":{"value":"32px","type":"space"},"width":{"value":"48px","type":"space"},"padding":{"value":"{space.1.value}","type":"space"}}}},"horizontal":{"page":{"slider":{"padding":{"value":"{space.1.value}","type":"space"},"gap":{"value":"{space.1.value}","type":"space"},"anchor":{"width":{"value":"32px","type":"space"},"icon":{"size":{"value":"{icon.size.sm.value}","type":"space"}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_panel_panel_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_panel_panel_json"],{
 
-/***/ "./src/tokens/mobile/components/panel/panel.json":
+/***/ "./src/tokens/mobile/components/panel/panel.json"
 /*!*******************************************************!*\
   !*** ./src/tokens/mobile/components/panel/panel.json ***!
   \*******************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"panel":{"meta":{"mapping":{"selector":{"mobile":".app-panel"}},"appearances":{"default":{"mapping":{"selector":{"mobile":".app-panel.panel-default"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".panel-default"}},"primary":{"selector":{"mobile":".panel-primary"}},"secondary":{"selector":{"mobile":".panel-secondary.root"}},"tertiary":{"selector":{"mobile":".panel-tertiary"}},"success":{"selector":{"mobile":".panel-success"}},"info":{"selector":{"mobile":".panel-info"}},"warning":{"selector":{"mobile":".panel-warning"}},"danger":{"selector":{"mobile":".panel-danger"}}}}}}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of panels (containers that group related content with headers and footers). This is the main background color that appears behind the panel content.<br>CSS variable: --wm-panel-background"}},"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of panels. This makes the panels appear with rounded corners for a softer appearance.<br>CSS variable: --wm-panel-radius"}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around panels. This creates a subtle shadow that makes the panel appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-panel-shadow"}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the border color of the panel.<br>CSS variable: --wm-panel-border-color"}},"width":{"value":"{border.width.base.value}","type":"border","attributes":{"subtype":"border","description":"Controls the border width of the panel.<br>CSS variable: --wm-panel-border-width"}}},"heading":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between panel heading elements (the gap between the heading text and adjacent elements like icons). This creates breathing room around the heading. Acceptable units: px.<br>CSS variable: --wm-panel-heading-gap"}},"padding":{"block":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical padding (top and bottom spacing) inside panel headings. This creates breathing room above and below the heading content. Acceptable units: px.<br>CSS variable: --wm-panel-heading-padding-block"}},"inline":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal padding (left and right spacing) inside panel headings. This creates breathing room on the left and right sides of the heading content. Acceptable units: px.<br>CSS variable: --wm-panel-heading-padding-inline"}}},"font-family":{"value":"{h4.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for panel heading text. This determines whether the heading text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-panel-heading-font-family"}},"font-size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of panel heading text (the title text that appears at the top of panels). This affects how large the heading text appears.<br>CSS variable: --wm-panel-heading-font-size"}},"font-weight":{"value":"{h4.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold panel heading text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-panel-heading-font-weight"}},"line-height":{"value":"{h4.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when panel heading text wraps to multiple lines. This ensures proper spacing for the heading text.<br>CSS variable: --wm-panel-heading-line-height"}},"letter-spacing":{"value":"{h4.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in panel heading text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-panel-heading-letter-spacing"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of panel headings (the title text that appears at the top of panels). This determines what color the heading text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-panel-heading-color"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of panel headings (the header section at the top of panels). This is the main background color that appears behind the heading content.<br>CSS variable: --wm-panel-heading-background"}}},"description":{"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for panel description text (secondary text that appears below the heading). This determines whether the description text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-panel-description-font-family"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of panel description text (secondary text that appears below the heading). This affects how large the description text appears.<br>CSS variable: --wm-panel-description-font-size"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold panel description text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-panel-description-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when panel description text wraps to multiple lines. This ensures proper spacing for the description text.<br>CSS variable: --wm-panel-description-line-height"}},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in panel description text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-panel-description-letter-spacing"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of panel descriptions (secondary text that appears below the heading). This determines what color the description text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-panel-description-color"}}},"actions":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between action buttons in panels (the gap between action buttons in the panel). This creates breathing room between buttons. Acceptable units: px.<br>CSS variable: --wm-panel-actions-gap"}}},"content":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside panel content sections (the main content area of the panel). This creates breathing room around the panel content. Acceptable units: px.<br>CSS variable: --wm-panel-content-padding"}}},"footer":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the background color of the panel footer.<br>CSS variable: --wm-panel-footer-background"}},"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside panel footers (the bottom section that contains action buttons or additional content). This creates breathing room around the footer content. Acceptable units: px.<br>CSS variable: --wm-panel-footer-padding"}},"border":{"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border at the top of panel footers. This determines the color of the separator line between the footer and the panel content.<br>CSS variable: --wm-panel-footer-border-color"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border at the top of panel footers. This determines how thick the separator line appears between the footer and the panel content. Acceptable units: px.<br>CSS variable: --wm-panel-footer-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border at the top of panel footers. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-panel-footer-border-style"}}}}},"appearances":{"default":{"variantGroups":{"status":{"default":{"heading":{"background":{"value":"{color.surface.container.@.value}","type":"color"},"color":{"value":"{color.on-surface.@.value}","type":"color"}},"description":{"color":{"value":"{color.on-surface.@.value}","type":"color"}}},"primary":{"heading":{"background":{"value":"{color.primary.container.@.value}","type":"color"},"color":{"value":"{color.primary.@.value}","type":"color"}},"description":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"secondary":{"heading":{"background":{"value":"{color.secondary.container.@.value}","type":"color"},"color":{"value":"{color.secondary.@.value}","type":"color"}},"description":{"color":{"value":"{color.secondary.@.value}","type":"color"}}},"tertiary":{"heading":{"background":{"value":"{color.tertiary.container.@.value}","type":"color"},"color":{"value":"{color.tertiary.@.value}","type":"color"}},"description":{"color":{"value":"{color.tertiary.@.value}","type":"color"}}},"success":{"heading":{"background":{"value":"{color.success.container.@.value}","type":"color"},"color":{"value":"{color.success.@.value}","type":"color"}},"description":{"color":{"value":"{color.success.@.value}","type":"color"}}},"info":{"heading":{"background":{"value":"{color.info.container.@.value}","type":"color"},"color":{"value":"{color.info.@.value}","type":"color"}},"description":{"color":{"value":"{color.info.@.value}","type":"color"}}},"warning":{"heading":{"background":{"value":"{color.warning.container.@.value}","type":"color"},"color":{"value":"{color.warning.@.value}","type":"color"}},"description":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"danger":{"heading":{"background":{"value":"{color.error.container.@.value}","type":"color"},"color":{"value":"{color.error.@.value}","type":"color"}},"description":{"color":{"value":"{color.error.@.value}","type":"color"}}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"panel":{"meta":{"mapping":{"selector":{"mobile":".app-panel"}},"appearances":{"default":{"mapping":{"selector":{"mobile":".app-panel.panel-default"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".panel-default"}},"primary":{"selector":{"mobile":".panel-primary"}},"secondary":{"selector":{"mobile":".panel-secondary.root"}},"tertiary":{"selector":{"mobile":".panel-tertiary"}},"success":{"selector":{"mobile":".panel-success"}},"info":{"selector":{"mobile":".panel-info"}},"warning":{"selector":{"mobile":".panel-warning"}},"danger":{"selector":{"mobile":".panel-danger"}}}}}}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color"},"radius":{"value":"{radius.xs.value}","type":"radius"},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius"},"heading":{"gap":{"value":"{space.2.value}","type":"space"},"padding":{"block":{"value":"{space.4.value}","type":"space"},"inline":{"value":"{space.4.value}","type":"space"}},"font-family":{"value":"{h4.font-family.value}","type":"font"},"font-size":{"value":"{h4.font-size.value}","type":"font"},"font-weight":{"value":"{h4.font-weight.value}","type":"font"},"line-height":{"value":"{h4.line-height.value}","type":"font"},"letter-spacing":{"value":"{h4.letter-spacing.value}","type":"font"},"color":{"value":"{color.on-surface.@.value}","type":"color"},"background":{"value":"{color.surface.@.value}","type":"color"}},"description":{"font-family":{"value":"{body.medium.font-family.value}","type":"font"},"font-size":{"value":"{body.medium.font-size.value}","type":"font"},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font"},"line-height":{"value":"{body.medium.line-height.value}","type":"font"},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font"},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}},"actions":{"gap":{"value":"{space.2.value}","type":"space"}},"content":{"padding":{"value":"{space.4.value}","type":"space"}},"help":{"message":{"header-background":{"value":"{color.surface.@.value}","type":"color"},"border":{"color":{"value":"{color.outline.variant.value}","type":"color"},"width":{"value":"{border.width.base.value}","type":"space"},"style":{"value":"{border.style.base.value}","type":"radius"}},"padding":{"value":"{space.2.value}","type":"space"},"background":{"value":"#fffed0","type":"color"}}},"footer":{"padding":{"value":"{space.4.value}","type":"space"},"border":{"color":{"value":"{color.outline.variant.value}","type":"color"},"width":{"value":"{border.width.base.value}","type":"space"},"style":{"value":"{border.style.base.value}","type":"radius"}}}},"appearances":{"default":{"variantGroups":{"status":{"default":{"heading":{"background":{"value":"{color.surface.container.@.value}","type":"color"},"color":{"value":"{color.on-surface.@.value}","type":"color"}},"description":{"color":{"value":"{color.on-surface.@.value}","type":"color"}}},"primary":{"heading":{"background":{"value":"{color.primary.container.@.value}","type":"color"},"color":{"value":"{color.primary.@.value}","type":"color"}},"description":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"secondary":{"heading":{"background":{"value":"{color.secondary.container.@.value}","type":"color"},"color":{"value":"{color.secondary.@.value}","type":"color"}},"description":{"color":{"value":"{color.secondary.@.value}","type":"color"}}},"tertiary":{"heading":{"background":{"value":"{color.tertiary.container.@.value}","type":"color"},"color":{"value":"{color.tertiary.@.value}","type":"color"}},"description":{"color":{"value":"{color.tertiary.@.value}","type":"color"}}},"success":{"heading":{"background":{"value":"{color.success.container.@.value}","type":"color"},"color":{"value":"{color.success.@.value}","type":"color"}},"description":{"color":{"value":"{color.success.@.value}","type":"color"}}},"info":{"heading":{"background":{"value":"{color.info.container.@.value}","type":"color"},"color":{"value":"{color.info.@.value}","type":"color"}},"description":{"color":{"value":"{color.info.@.value}","type":"color"}}},"warning":{"heading":{"background":{"value":"{color.warning.container.@.value}","type":"color"},"color":{"value":"{color.warning.@.value}","type":"color"}},"description":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"danger":{"heading":{"background":{"value":"{color.error.container.@.value}","type":"color"},"color":{"value":"{color.error.@.value}","type":"color"}},"description":{"color":{"value":"{color.error.@.value}","type":"color"}}}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_picture_picture_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_picture_picture_json"],{
 
-/***/ "./src/tokens/mobile/components/picture/picture.json":
+/***/ "./src/tokens/mobile/components/picture/picture.json"
 /*!***********************************************************!*\
   !*** ./src/tokens/mobile/components/picture/picture.json ***!
   \***********************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"picture":{"meta":{"appearances":{"default":{"mapping":{"selector":{"web":".app-picture","mobile":".app-picture"}},"variantGroups":{"shape":{"rounded":{"selector":{"web":".img-rounded","mobile":".rounded-image.app-picture"}},"circle":{"selector":{"web":".img-circle","mobile":".circle-image.app-picture"}}}}},"thumbnail":{"mapping":{"selector":{"web":".img-thumbnail","mobile":".thumbnail-image.app-picture"}}}}},"mapping":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of pictures (image elements). This makes the pictures appear with rounded corners for a softer appearance.<br>CSS variable: --wm-picture-radius"}},"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside pictures. This creates breathing room above the image content. Acceptable units: px.<br>CSS variable: --wm-picture-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside pictures. This creates breathing room below the image content. Acceptable units: px.<br>CSS variable: --wm-picture-padding-bottom"}},"left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside pictures. This creates breathing room on the left side of the image content. Acceptable units: px.<br>CSS variable: --wm-picture-padding-left"}},"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside pictures. This creates breathing room on the right side of the image content. Acceptable units: px.<br>CSS variable: --wm-picture-padding-right"}}},"border":{"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around pictures. This determines the color of the outline that defines the picture container.<br>CSS variable: --wm-picture-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around pictures. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-picture-border-style"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around pictures. When set to 0, no border is visible. Acceptable units: px.<br>CSS variable: --wm-picture-border-width"}}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of pictures (image elements). When transparent, only the image is visible. When filled with a color, the picture appears with a colored background.<br>CSS variable: --wm-picture-background"}}},"appearances":{"default":{"mapping":{"radius":{"value":"{radius.none.value}","type":"radius"},"padding":{"top":{"value":"{space.0.value}","type":"space"},"bottom":{"value":"{space.0.value}","type":"space"},"left":{"value":"{space.0.value}","type":"space"},"right":{"value":"{space.0.value}","type":"space"}},"border":{"color":{"value":"{color.border.@.value}","type":"color"},"style":{"value":"{border.style.base.value}","type":"radius"},"width":{"value":"{border.width.0.value}","type":"space"}},"background":{"value":"transparent","type":"color"}},"variantGroups":{"shape":{"rounded":{"radius":{"value":"{radius.xs.value}","type":"radius"}},"circle":{"radius":{"value":"{radius.circle.value}","type":"radius"}}}}},"thumbnail":{"mapping":{"radius":{"value":"{radius.xs.value}","type":"radius"},"padding":{"top":{"value":"{space.1.value}","type":"space"},"bottom":{"value":"{space.1.value}","type":"space"},"left":{"value":"{space.1.value}","type":"space"},"right":{"value":"{space.1.value}","type":"space"}},"border":{"color":{"value":"{color.border.@.value}","type":"color"},"style":{"value":"{border.style.base.value}","type":"radius"},"width":{"value":"{border.width.base.value}","type":"space"}},"background":{"value":"{color.surface.container.low.@.value}","type":"color"}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"picture":{"meta":{"appearances":{"default":{"mapping":{"selector":{"web":".app-picture","mobile":".app-picture"}},"variantGroups":{"shape":{"rounded":{"selector":{"web":".img-rounded","mobile":".rounded-image.app-picture"}},"circle":{"selector":{"web":".img-circle","mobile":".circle-image.app-picture"}}}}},"thumbnail":{"mapping":{"selector":{"web":".img-thumbnail","mobile":".thumbnail-image.app-picture"}}}}},"mapping":{"radius":{"value":"{radius.none.value}","type":"radius"},"padding":{"top":{"value":"{space.0.value}","type":"space"},"bottom":{"value":"{space.0.value}","type":"space"},"left":{"value":"{space.0.value}","type":"space"},"right":{"value":"{space.0.value}","type":"space"}},"border":{"color":{"value":"{color.border.@.value}","type":"color"},"style":{"value":"{border.style.base.value}","type":"radius"},"width":{"value":"{border.width.0.value}","type":"space"}},"background":{"value":"transparent","type":"color"}},"appearances":{"default":{"mapping":{"radius":{"value":"{radius.none.value}","type":"radius"},"padding":{"top":{"value":"{space.0.value}","type":"space"},"bottom":{"value":"{space.0.value}","type":"space"},"left":{"value":"{space.0.value}","type":"space"},"right":{"value":"{space.0.value}","type":"space"}},"border":{"color":{"value":"{color.border.@.value}","type":"color"},"style":{"value":"{border.style.base.value}","type":"radius"},"width":{"value":"{border.width.0.value}","type":"space"}},"background":{"value":"transparent","type":"color"}},"variantGroups":{"shape":{"rounded":{"radius":{"value":"{radius.xs.value}","type":"radius"}},"circle":{"radius":{"value":"{radius.circle.value}","type":"radius"}}}}},"thumbnail":{"mapping":{"radius":{"value":"{radius.xs.value}","type":"radius"},"padding":{"top":{"value":"{space.1.value}","type":"space"},"bottom":{"value":"{space.1.value}","type":"space"},"left":{"value":"{space.1.value}","type":"space"},"right":{"value":"{space.1.value}","type":"space"}},"border":{"color":{"value":"{color.border.@.value}","type":"color"},"style":{"value":"{border.style.base.value}","type":"radius"},"width":{"value":"{border.width.base.value}","type":"space"}},"background":{"value":"{color.surface.container.low.@.value}","type":"color"}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_popover_popover_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_popover_popover_json"],{
 
-/***/ "./src/tokens/mobile/components/popover/popover.json":
+/***/ "./src/tokens/mobile/components/popover/popover.json"
 /*!***********************************************************!*\
   !*** ./src/tokens/mobile/components/popover/popover.json ***!
   \***********************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"popover":{"meta":{"mapping":{"selector":{"mobile":".app-popover"}}},"mapping":{"position":{"value":"absolute","type":"space","attributes":{"subtype":"space","description":"Controls the positioning method of popovers (overlay menus that appear above other content). When set to \'absolute\', the popover is positioned relative to its nearest positioned ancestor.<br>CSS variable: --wm-popover-position"}},"left":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left position offset of popovers (the distance from the left edge of the viewport or parent container). This determines how far from the left the popover appears. Acceptable units: px.<br>CSS variable: --wm-popover-left"}},"bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom position offset of popovers (the distance from the bottom edge of the viewport or parent container). This determines how far from the bottom the popover appears. Acceptable units: px.<br>CSS variable: --wm-popover-bottom"}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of popovers. When set to 100%, the popover takes up the full width of its container. Acceptable units: %, px.<br>CSS variable: --wm-popover-width"}},"min-height":{"value":"240px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of popover components (small overlay windows that appear when users hover or click on elements). This ensures the popover is always tall enough to be visible and properly displayed.<br>CSS variable: --wm-popover-min-height"}},"elevation":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around popovers. This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-elevation"}},"padding-top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside popovers. This creates breathing room above the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-top"}},"padding-left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside popovers. This creates breathing room on the left side of the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-left"}},"padding-right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside popovers. This creates breathing room on the right side of the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-right"}},"padding-bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside popovers. This creates breathing room below the popover content. Acceptable units: px.<br>CSS variable: --wm-popover-padding-bottom"}},"background-color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popover components (small overlay windows that appear when users hover or click on elements). This is the main background color that appears behind the popover content.<br>CSS variable: --wm-popover-background-color"}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around popover components (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-shadow"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of popover components (small overlay windows that appear when users hover or click on elements). This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-radius"}},"border":{"top":{"left":{"radius":{"value":"{radius.xl.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the top-left corner of popovers. This makes the popover appear with rounded corners on the top-left for a softer appearance.<br>CSS variable: --wm-popover-border-top-left-radius"}}},"right":{"radius":{"value":"{radius.xl.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the top-right corner of popovers. This makes the popover appear with rounded corners on the top-right for a softer appearance.<br>CSS variable: --wm-popover-border-top-right-radius"}}}}},"header":{"padding-top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-top"}},"padding-bottom":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-bottom"}},"padding-left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-left"}},"padding-right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding-right"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of popover headers (the top section of popover windows that contains the title). This determines what color the header text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-header-color"}},"font-family":{"value":"{h5.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for popover headers (the top section of popover windows that contains the title). This determines whether the header text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-header-font-family"}},"font-weight":{"value":"{h5.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the popover headers appear (the top section of popover windows that contains the title). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-popover-header-font-weight"}},"font-size":{"value":"{h5.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the popover headers appear (the top section of popover windows that contains the title). This affects the size of the header text that users see in the popover.<br>CSS variable: --wm-popover-header-font-size"}},"line-height":{"value":"{h5.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when popover headers wrap to multiple lines. This ensures proper spacing for the header text displayed in the popover.<br>CSS variable: --wm-popover-header-line-height"}},"letter-spacing":{"value":"{h5.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in popover headers. This can help make the header text more readable and properly spaced.<br>CSS variable: --wm-popover-header-letter-spacing"}},"background-color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popover header. This determines what color the title background appears in.<br>CSS variable: --wm-popover-header-background-color"}}},"link":{"text":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of popover caption. This determines what color the link text appears in.<br>CSS variable: --wm-popover-link-text-color"}}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text in popover caption. This affects how large the link text appears.<br>CSS variable: --wm-popover-link-font-size"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for popover caption text.<br>CSS variable: --wm-popover-link-font-family"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the popover caption text appears.<br>CSS variable: --wm-popover-link-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when popover caption text wraps to multiple lines.<br>CSS variable: --wm-popover-link-line-height"}},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in popover caption text.<br>CSS variable: --wm-popover-link-letter-spacing"}},"icon":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons in popover links.<br>CSS variable: --wm-popover-link-icon-size"}},"color":{"@":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons in popover links.<br>CSS variable: --wm-popover-link-icon-color"}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"popover":{"mapping":{"position":{"value":"absolute","type":"space"},"left":{"value":"{space.1.value}","type":"space"},"bottom":{"value":"{space.1.value}","type":"space"},"width":{"value":"100%","type":"space"},"min-height":{"value":"240px","type":"space"},"elevation":{"value":"{elevation.shadow.none.value}","type":"radius"},"padding-top":{"value":"{space.0.value}","type":"space"},"padding-left":{"value":"{space.0.value}","type":"space"},"padding-right":{"value":"{space.0.value}","type":"space"},"padding-bottom":{"value":"{space.0.value}","type":"space"},"background-color":{"value":"{color.on-primary.@.value}","type":"color"},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius"},"radius":{"value":"{radius.none.value}","type":"radius"},"border":{"top":{"left":{"radius":{"value":"{radius.xl.value}","type":"radius"}},"right":{"radius":{"value":"{radius.xl.value}","type":"radius"}}}},"header":{"padding-top":{"value":"{space.3.value}","type":"space"},"padding-bottom":{"value":"{space.3.value}","type":"space"},"padding-left":{"value":"{space.3.value}","type":"space"},"padding-right":{"value":"{space.3.value}","type":"space"},"color":{"value":"{color.on-surface.@.value}","type":"color"},"font-family":{"value":"{h5.font-family.value}","type":"font"},"font-weight":{"value":"{h5.font-weight.value}","type":"font"},"font-size":{"value":"{h5.font-size.value}","type":"font"},"line-height":{"value":"{h5.line-height.value}","type":"font"},"letter-spacing":{"value":"{h5.letter-spacing.value}","type":"font"}}}}}');
 
-/***/ })
+/***/ }
 
 }]);