@wavemaker-ai/foundation-css 1.0.0-rc.647469

package/cjs/src_tokens_mobile_components_chips_chips_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_chips_chips_json"],{
+
+/***/ "./src/tokens/mobile/components/chips/chips.json"
+/*!*******************************************************!*\
+  !*** ./src/tokens/mobile/components/chips/chips.json ***!
+  \*******************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"chips":{"meta":{"mapping":{"selector":{"mobile":".app-chips"},"states":{"disabled":{"selector":{"mobile":"-disabled"}},"active":{"selector":{"mobile":"-active-item, .app-chips-active-item-text"}}}}},"mapping":{"border":{"width":{"value":"{border.width.base.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border width of the main chips container (the wrapper that holds all chips and the input field). This creates the outline around the entire chips component.<br>CSS variable: --wm-chips-border-width"}}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of individual chip items (the small pill-shaped elements). This affects the background color that appears behind each chip, not the container.<br>CSS variable: --wm-chips-background-color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of individual chip items (the small pill-shaped elements). This affects the color of the text content inside each chip, not the container.<br>CSS variable: --wm-chips-color"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of the chips component. When set to 1, the component is fully opaque. Lower values make the entire component more transparent.<br>CSS variable: --wm-chips-opacity"}},"pointer-events":{"value":"auto","type":"radius","attributes":{"subtype":"pointer-events","description":"Controls whether the chips component can receive mouse/touch interactions. Acceptable values: all (fully interactive), none (not clickable), auto (browser default).<br>CSS variable: --wm-chips-pointer-events"}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the main chips container. This creates a subtle elevation effect that makes the chips component appear to float above the background.<br>CSS variable: --wm-chips-shadow"}},"list":{"gap":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between individual chip items (the small pill-shaped elements) within the chips container. This creates visual separation between each chip so users can easily distinguish between them.<br>CSS variable: --wm-chips-list-gap"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (all sides) inside the chips container (the wrapper that holds all chips and the input field). This creates breathing room between the container border and the chips/input inside. Acceptable units: px.<br>CSS variable: --wm-chips-list-padding"}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the chips container (the wrapper that holds all chips and the input field). When set to \'transparent\', the container has no background color, making it transparent.<br>CSS variable: --wm-chips-list-background-color"}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the chips container (the wrapper that holds all chips and the input field). This determines the color of the outline that defines the container shape.<br>CSS variable: --wm-chips-list-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the chips container (the wrapper that holds all chips and the input field). This makes the container appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-chips-list-border-radius"}},"style":{"value":"{border.style.base.value}","type":"style","attributes":{"subtype":"border-style","description":"Controls the border style of the chips container. Acceptable values: solid (continuous line), dashed (dotted line), dotted (small dots), none (no border).<br>CSS variable: --wm-chips-list-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the chips container (the wrapper that holds all chips and the input field). This creates the outline that defines the container shape.<br>CSS variable: --wm-chips-list-border-width"}}},"place":{"holder":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of placeholder text in the input field where users type to add new chips. This determines what color the placeholder text appears in.<br>CSS variable: --wm-chips-list-place-holder-color"}}}},"height":{"value":"70px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of the chips container (the wrapper that holds all chips and the input field). This ensures the container has a consistent height even when empty or with few chips.<br>CSS variable: --wm-chips-list-height"}}},"input":{"padding":{"value":"{space.2.value} {space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) inside the input field where users type to add new chips. This creates breathing room around the input text. Acceptable units: px.<br>CSS variable: --wm-chips-input-padding"}}},"item":{"height":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls the height of individual chip items (the small pill-shaped elements). This determines how tall each chip appears visually. Acceptable units: px.<br>CSS variable: --wm-chips-item-height"}},"padding":{"value":"{space.1.value} {space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) of each chip item. This creates breathing room between the chip text/icon and the chip border. Acceptable units: px.<br>CSS variable: --wm-chips-item-padding"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between elements within individual chip items (like between text and icons, or between text and the remove button). This creates visual separation between different parts of each chip.<br>CSS variable: --wm-chips-item-gap"}},"icon":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons that appear inside individual chip items (like remove buttons or action icons). This determines what color the icons appear in.<br>CSS variable: --wm-chips-item-icon-color"}},"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons that appear inside individual chip items (like remove buttons or action icons). This affects how large the icons appear within each chip.<br>CSS variable: --wm-chips-item-icon-size"}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between icons and text content within individual chip items. This creates visual separation between the icon and text.<br>CSS variable: --wm-chips-item-icon-gap"}}},"border":{"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of individual chip items. Acceptable values: solid (continuous line), dashed (dotted line), dotted (small dots), none (no border).<br>CSS variable: --wm-chips-item-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around individual chip items (the small pill-shaped elements). This determines the color of the outline that defines each chip\'s shape.<br>CSS variable: --wm-chips-item-border-color"}},"radius":{"@":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of individual chip items (the small pill-shaped elements). This makes each chip appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-chips-item-border-radius"}}}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family (typeface) for the text content inside individual chip items (the small pill-shaped elements). This determines the visual style of the text that appears within each chip.<br>CSS variable: --wm-chips-item-font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the thickness/boldness of the text content inside individual chip items. Acceptable values: normal, bold, 100-900. This affects how prominent the text appears within each chip.<br>CSS variable: --wm-chips-item-font-weight"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text content inside individual chip items (the small pill-shaped elements). This determines how large the text appears within each chip.<br>CSS variable: --wm-chips-item-font-size"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines of text inside individual chip items. This is important when chip text wraps to multiple lines, ensuring proper readability.<br>CSS variable: --wm-chips-item-line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in the text content inside chip items. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-chips-item-letter-spacing"}},"avatar":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of user avatars that appear inside chip items (the small pill-shaped elements). This determines how large profile pictures or user images appear within each chip.<br>CSS variable: --wm-chips-item-avatar-size"}},"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of user avatars inside chip items. When set to pill, avatars appear as perfect circles. Other values create rounded rectangles.<br>CSS variable: --wm-chips-item-avatar-radius"}}}},"states":{"disabled":{"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of the chips component when it is disabled. When set to 0.38, the component appears semi-transparent to indicate it cannot be interacted with.<br>CSS variable: --wm-chips-disabled-opacity"}},"pointer-events":{"value":"none","type":"radius","attributes":{"subtype":"pointer-events","description":"Prevents mouse/touch interactions with the chips component when it is disabled. When set to \'none\', the component cannot receive any pointer events, making it non-interactive.<br>CSS variable: --wm-chips-disabled-pointer-events"}}},"active":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of individual chip items when they are in an active/selected state. This determines what color the chip text appears in when a chip is active.<br>CSS variable: --wm-chips-active-color"}},"background-color":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of individual chip items when they are in an active/selected state. This determines what color appears behind chips when they are active.<br>CSS variable: --wm-chips-active-background-color"}},"item":{"border":{"color":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around individual chip items when they are in an active/selected state. This determines what color the border appears in when a chip is active.<br>CSS variable: --wm-chips-active-item-border-color"}}}}}}},"appearances":{"filled":{"mapping":{"border":{"width":{"value":"0","type":"radius"}}},"variantGroups":{"status":{"default":{"background-color":{"value":"{color.surface.@.value}","type":"color"},"color":{"value":"{color.on-surface.@.value}","type":"color"}},"primary":{"background-color":{"value":"{color.primary.@.value}","type":"color"},"color":{"value":"{color.on-primary.@.value}","type":"color"}},"secondary":{"background-color":{"value":"{color.secondary.@.value}","type":"color"},"color":{"value":"{color.on-secondary.@.value}","type":"color"}},"tertiary":{"background-color":{"value":"{color.tertiary.@.value}","type":"color"},"color":{"value":"{color.on-tertiary.@.value}","type":"color"}}}}},"elevated":{"mapping":{"border":{"width":{"value":"0","type":"radius"}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius"}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_container_container_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_container_container_json"],{
+
+/***/ "./src/tokens/mobile/components/container/container.json"
+/*!***************************************************************!*\
+  !*** ./src/tokens/mobile/components/container/container.json ***!
+  \***************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"container":{"meta":{"appearances":{"default":{"mapping":{"selector":{"mobile":".app-default-container"}}},"outlined":{"mapping":{"selector":{"mobile":".app-outlined-container"}}},"elevated":{"mapping":{"selector":{"mobile":".app-elevated-container"}}}}},"mapping":{"border":{"style":{"value":"{border.style.base.value}","type":"border","attributes":{"subtype":"border-style","description":"Controls the style of the outline around container elements (boxes that hold content). \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots. The default container border styles will not change in Studio. They are dotted for user-experience reasons, so we are not going to modify them. The changes can be seen in the preview. For the outlined and elevated styles, the changes are visible both in Studio and in the preview.<br>CSS variable: --wm-container-border-style"}},"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border width (all sides) around container elements. When set to 0, there\'s no visible border. Higher values create thicker borders around the container. Acceptable units: px.<br>CSS variable: --wm-container-border-width"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around container elements. This creates a colored border around the container to define its boundaries.<br>CSS variable: --wm-container-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the container elements. When set to \'none\', containers have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-container-border-radius"}}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of container elements (boxes that hold content). This is the main background color that appears behind all container content.<br>CSS variable: --wm-container-background-color"}}},"box-shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around container elements. This creates a subtle shadow that makes the container appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-container-box-shadow"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of container elements. When set to 1, the container is fully opaque. Lower values make it more transparent.<br>CSS variable: --wm-container-opacity"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (all sides) inside container elements. This creates breathing room around the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding"}}},"appearances":{"default":{"mapping":{"border":{"style":{"value":"{border.style.base.value}","type":"border"},"width":{"value":"{border.width.0.value}","type":"border"},"color":{"value":"transparent","type":"color"},"radius":{"value":"{radius.none.value}","type":"radius"}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius"},"padding":{"value":"{space.0.value}","type":"space"}}},"outlined":{"mapping":{"border":{"style":{"value":"{border.style.base.value}","type":"border"},"width":{"value":"{border.width.base.value}","type":"border"},"color":{"value":"{color.outline.variant.value}","type":"color"},"radius":{"value":"1px","type":"radius"}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius"},"padding":{"value":"{space.0.value}","type":"space"}}},"elevated":{"mapping":{"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius"},"border":{"style":{"value":"{border.style.base.value}","type":"border"},"color":{"value":"transparent","type":"color"},"width":{"value":"{border.width.base.value}","type":"border"},"radius":{"value":"{radius.sm.value}","type":"radius"}},"padding":{"value":"{space.0.value}","type":"space"}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_currency_currency_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_currency_currency_json"],{
+
+/***/ "./src/tokens/mobile/components/currency/currency.json"
+/*!*************************************************************!*\
+  !*** ./src/tokens/mobile/components/currency/currency.json ***!
+  \*************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"currency":{"meta":{"mapping":{"selector":{"mobile":".app-currency"}}},"mapping":{"labelwrapper":{"min":{"height":{"value":"30px","type":"space","attributes":{"subtype":"space","description":"Minimum height of the currency field label wrapper (the strip that holds the currency symbol or label next to the amount input). Keeps the prefix area aligned with the input row.<br>CSS variable: --wm-currency-labelwrapper-min-height"}}},"background":{"value":"#4263eb","type":"color","attributes":{"subtype":"color","description":"Background color of the currency label wrapper (prefix area behind the symbol or label).<br>CSS variable: --wm-currency-labelwrapper-background"}},"border":{"radius":{"value":"6px {space.0.value} {space.0.value} 6px","type":"space","attributes":{"subtype":"border-radius","description":"Corner radius of the currency label wrapper (typically the inner or leading edge that meets the amount field). Use px or theme space tokens.<br>CSS variable: --wm-currency-labelwrapper-border-radius"}}},"padding":{"value":"{space.2.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Padding inside the currency label wrapper around the symbol or label text. Shorthand: vertical and horizontal spacing may use separate theme values.<br>CSS variable: --wm-currency-labelwrapper-padding"}},"width":{"value":"{space.12.value}","type":"border","attributes":{"subtype":"space","description":"Width reserved for the currency label wrapper (prefix column width for the symbol or label). Often matches or complements the amount input layout; use px or theme space tokens.<br>CSS variable: --wm-currency-labelwrapper-width"}}},"label":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Text color for the currency label or symbol shown in the label wrapper (e.g. $, €, or custom label).<br>CSS variable: --wm-currency-label-color"}},"font":{"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Font weight for the currency label or symbol in the label wrapper. Use normal, bold, or numeric weights (100–900) for finer control.<br>CSS variable: --wm-currency-label-font-weight"}},"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Font size for the currency label or symbol in the label wrapper so it balances with the amount input text.<br>CSS variable: --wm-currency-label-font-size"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Font family for the currency label or symbol in the label wrapper.<br>CSS variable: --wm-currency-label-font-family"}}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_datetime_datetime_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_datetime_datetime_json"],{
+
+/***/ "./src/tokens/mobile/components/datetime/datetime.json"
+/*!*************************************************************!*\
+  !*** ./src/tokens/mobile/components/datetime/datetime.json ***!
+  \*************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"datetime":{"meta":{"mapping":{"selector":{"web":".app-datetime","mobile":".app-datetime"}}},"mapping":{"cancel-button":{"text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the cancel button in the datetime picker (the button that dismisses the picker without selecting a date/time). This determines what color the cancel button text appears in.<br>CSS variable: --wm-datetime-cancel-button-text-color"}},"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the cancel button text in the datetime picker. This affects how large the cancel button text appears.<br>CSS variable: --wm-datetime-cancel-button-text-size"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the cancel button text appears in the datetime picker. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-datetime-cancel-button-text-weight"}}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the cancel button in the datetime picker. When transparent, only the button text is visible. When filled with a color, the button appears with a solid background.<br>CSS variable: --wm-datetime-cancel-button-background"}}},"selected-button":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the selected/confirm button in the datetime picker (the button that confirms the selected date/time). This fills the button with a color to visually indicate it\'s the primary action.<br>CSS variable: --wm-datetime-selected-button-background"}},"text":{"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the selected/confirm button in the datetime picker. This ensures the button text is clearly visible against the colored background.<br>CSS variable: --wm-datetime-selected-button-text-color"}},"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the selected/confirm button text in the datetime picker. This affects how large the button text appears.<br>CSS variable: --wm-datetime-selected-button-text-size"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the selected/confirm button text appears in the datetime picker. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-datetime-selected-button-text-weight"}}}},"background":{"value":"{color.surface.container.high.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the datetime picker (the modal interface where users select dates and times). This is the main background color that appears behind the picker interface.<br>CSS variable: --wm-datetime-background"}},"button":{"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around datetime picker buttons. This creates the outline that defines each button shape.<br>CSS variable: --wm-datetime-button-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around datetime picker buttons. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-datetime-button-border-style"}},"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of datetime picker buttons. When set to \'pill\', the buttons appear with fully rounded corners, creating a pill-shaped appearance.<br>CSS variable: --wm-datetime-button-border-radius"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around datetime picker buttons. This determines the color of the outline that defines each button shape.<br>CSS variable: --wm-datetime-button-border-color"}}},"ripple":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color that appears when users tap datetime picker buttons. This creates a visual feedback animation to indicate user interaction. When transparent, no ripple effect is visible.<br>CSS variable: --wm-datetime-button-ripple-color"}}}},"text":{"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the datetime picker text (the date/time values displayed in the picker). This affects how large the text appears.<br>CSS variable: --wm-datetime-text-font-size"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the datetime picker text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-datetime-text-font-weight"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the datetime picker (the date/time values displayed in the picker). This determines what color the text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-datetime-text-color"}}},"selected":{"text":{"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the selected datetime picker text (the date/time value that is currently selected). This affects how large the selected text appears.<br>CSS variable: --wm-datetime-selected-text-font-size"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the selected datetime picker text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-datetime-selected-text-font-weight"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the selected datetime picker value (the date/time that is currently selected). This determines what color the selected text appears in to distinguish it from unselected values.<br>CSS variable: --wm-datetime-selected-text-color"}}}},"header-text":{"font":{"size":{"value":"20px","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the datetime picker header text (the title that appears at the top of the picker interface). This affects how large the header text appears.<br>CSS variable: --wm-datetime-header-text-font-size"}},"weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the datetime picker header text appears. When set to 700, the header text appears bold to emphasize the picker title.<br>CSS variable: --wm-datetime-header-text-font-weight"}}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the datetime picker header (the title that appears at the top of the picker interface). This determines what color the header text appears in.<br>CSS variable: --wm-datetime-header-text-color"}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_dropdown-menu_dropdown-menu_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_dropdown-menu_dropdown-menu_json"],{
+
+/***/ "./src/tokens/mobile/components/dropdown-menu/dropdown-menu.json"
+/*!***********************************************************************!*\
+  !*** ./src/tokens/mobile/components/dropdown-menu/dropdown-menu.json ***!
+  \***********************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"dropdown":{"mapping":{"menu":{"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of dropdown menus (lists of options that appear when users click on a button or link). This is the main background color that appears behind the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-background"}},"box-shadow":{"value":"{elevation.shadow.2.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow on the floating dropdown menu panel (Material 3 menu surface elevation; uses global elevation shadow level 2).<br>CSS variable: --wm-dropdown-menu-box-shadow"}},"padding":{"type":"space","value":"{space.2.value} {space.0.value}","attributes":{"subtype":"space","description":"Controls the padding inside dropdown menu containers (top/bottom, left/right). Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding"}},"color":{"type":"color","value":"{color.on-surface.variant.@.value}","attributes":{"subtype":"color","description":"Sets the text color of dropdown menu triggers (the button or link that opens the dropdown). This determines what color the trigger text appears in.<br>CSS variable: --wm-dropdown-menu-color"}},"text":{"decoration":{"type":"radius","value":"none","attributes":{"subtype":"text-decoration","description":"Controls the text decoration of dropdown menu triggers (underline, overline, line-through, or none). When set to \'none\', no decoration is applied to the trigger text.<br>CSS variable: --wm-dropdown-menu-text-decoration"}},"font-weight":{"type":"font","value":"{font.weight.700.value}","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the dropdown menu trigger text appears. When set to 700, the trigger text appears bold to emphasize the dropdown button.<br>CSS variable: --wm-dropdown-menu-text-font-weight"}},"padding":{"type":"space","value":"{space.0.value} {space.3.value} {space.0.value} {space.2.value}","attributes":{"subtype":"space","description":"Controls the padding of dropdown menu trigger text (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-text-padding"}}},"content":{"width":{"value":"220px","type":"space","attributes":{"subtype":"space","description":"Controls how wide dropdown menu content appears (the container that holds the dropdown menu items). This determines the horizontal size of the dropdown menu container.<br>CSS variable: --wm-dropdown-menu-content-width"}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of dropdown menu content. This makes the dropdown appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-dropdown-menu-content-border-radius"}}},"background":{"value":"#fff","type":"color","attributes":{"subtype":"color","description":"Sets the background color of dropdown menu content (the container that holds the dropdown menu items). This is the main background color that appears behind the menu items.<br>CSS variable: --wm-dropdown-menu-content-background"}}},"caret":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of dropdown menu caret icons (the small arrow symbols that indicate dropdown menus). This determines what color the arrow symbols appear in.<br>CSS variable: --wm-dropdown-menu-caret-color"}},"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large dropdown menu caret icons appear (the small arrow symbols that indicate dropdown menus). This affects the size of the arrow symbols that users see in dropdown buttons.<br>CSS variable: --wm-dropdown-menu-caret-size"}}},"item":{"font-family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for dropdown menu items (individual options in the dropdown list). This determines whether the menu item text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-dropdown-menu-item-font-family"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the dropdown menu items appear (individual options in the dropdown list). This affects the size of the text that users see in each menu option.<br>CSS variable: --wm-dropdown-menu-item-font-size"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the dropdown menu items appear (individual options in the dropdown list). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-dropdown-menu-item-font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when dropdown menu item text wraps to multiple lines. This ensures proper spacing for the menu item text displayed in the dropdown.<br>CSS variable: --wm-dropdown-menu-item-line-height"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of dropdown menu items (individual options in the dropdown list). This determines what color the menu item text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-dropdown-menu-item-color"}},"border":{"style":{"type":"radius","value":"{border.style.solid.value}","attributes":{"subtype":"border-style","description":"Controls the style of the border around dropdown menu items. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-dropdown-menu-item-border-style"}}},"padding":{"value":"{space.3.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding inside dropdown menu items (top/bottom, left/right). Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding"}}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of dropdown menus (lists of options that appear when users click on a button or link). When set to \'none\', dropdowns have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-dropdown-menu-border-radius"}},"width":{"value":"0","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around dropdown menus. When set to 0, there\'s no visible border. Higher values create thicker borders around the dropdown.<br>CSS variable: --wm-dropdown-menu-border-width"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around dropdown menus. This determines the color of the outline that defines the dropdown menu shape.<br>CSS variable: --wm-dropdown-menu-border-color"}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_fileupload_fileupload_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_fileupload_fileupload_json"],{
+
+/***/ "./src/tokens/mobile/components/fileupload/fileupload.json"
+/*!*****************************************************************!*\
+  !*** ./src/tokens/mobile/components/fileupload/fileupload.json ***!
+  \*****************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"fileupload":{"meta":{"mapping":{"selector":{"mobile":".app-fileupload"}}},"mapping":{"border":{"color":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of file upload area (the container where users can drag and drop or select files). This determines the color of the outline that defines the file upload area.<br>CSS variable: --wm-fileupload-border-color"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of file upload area. This creates the outline that defines the file upload area shape.<br>CSS variable: --wm-fileupload-border-width"}},"style":{"value":"{border.style.solid.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of file upload area. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-fileupload-border-style"}},"radius":{"value":"{radius.base.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of file upload area. This makes the file upload area appear with rounded corners for a softer appearance.<br>CSS variable: --wm-fileupload-border-radius"}}},"background":{"value":"{color.surface.container.low.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of file upload area (the container where users can drag and drop or select files). This is the main background color that appears behind the file upload interface.<br>CSS variable: --wm-fileupload-background"}},"text":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of file upload text (the text that appears in the file upload area, such as \'Choose file\' or \'Drag and drop files here\'). This affects how large the text appears.<br>CSS variable: --wm-fileupload-text-font-size"}},"weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of file upload text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-fileupload-text-font-weight"}}},"align":{"value":"center","type":"text","attributes":{"subtype":"text-align","description":"Controls the text alignment of file upload text. Acceptable values: left, center, right, justify.<br>CSS variable: --wm-fileupload-text-align"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of file upload area (the text that appears in the file upload interface). This determines what color the text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-fileupload-text-color"}}},"icon":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of file upload icons (icons that appear in the file upload area, such as upload or file icons). This affects how large the icons appear.<br>CSS variable: --wm-fileupload-icon-font-size"}}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of file upload icons (icons that appear in the file upload area). This determines what color the icons appear in, typically matching the primary theme color for visual consistency.<br>CSS variable: --wm-fileupload-icon-color"}}},"ripple-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color that appears when users interact with the file upload area (tap or click). This creates a visual feedback animation to indicate user interaction. When transparent, no ripple effect is visible.<br>CSS variable: --wm-fileupload-ripple-color"}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_form-controls_form-controls_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_form-controls_form-controls_json"],{
+
+/***/ "./src/tokens/mobile/components/form-controls/form-controls.json"
+/*!***********************************************************************!*\
+  !*** ./src/tokens/mobile/components/form-controls/form-controls.json ***!
+  \***********************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"form-controls":{"meta":{"mapping":{"selector":{"mobile":".app-input"},"states":{"focused":{"selector":{"mobile":"-focused"}},"disabled":{"selector":{"mobile":"-disabled"}}},"appearances":{}}},"mapping":{"opacity":{"value":"{border.width.1.value}","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of form controls (input fields, text areas, select boxes, and other form elements where users enter data). A value of 1 means fully opaque (completely visible), while lower values make the form controls more transparent.<br>CSS variable: --wm-form-controls-opacity"}},"min-height":{"value":"48px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of form controls (input fields, text areas, select boxes, and other form elements). This ensures form fields are always tall enough to be easily clickable and readable. Acceptable units: px, em, rem.<br>CSS variable: --wm-form-controls-min-height"}},"min-width":{"value":"160px","type":"space","attributes":{"subtype":"space","description":"Note: The min-width property does not affect form controls when they are placed inside a <form>. Controls the minimum width of form controls (input fields, text areas, select boxes, and other form elements). This ensures form fields are always wide enough to be easily clickable and readable. Acceptable units: px, em, rem.<br>CSS variable: --wm-form-controls-min-width"}},"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form control text appear (the text that appear next to or above input fields). This affects the size of the text that users see.<br>CSS variable: --wm-form-controls-font-size"}},"weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form control text appear (the text that appear next to or above input fields). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-font-weight"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form control text (the text that appear next to or above input fields). This determines whether the text appears in Roboto, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-font-family"}}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside form controls (the space between the form field content and its borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding"}},"border":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls (input fields, text areas, select boxes, and other form elements). This determines what color the border lines appear in that outline the form fields.<br>CSS variable: --wm-form-controls-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form controls (input fields, text areas, select boxes, and other form elements). This makes the form field corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-controls-border-radius"}},"style":{"value":"{border.style.base.value}","type":"style","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form controls (input fields, text areas, select boxes, and other form elements). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-form-controls-border-style"}},"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-width"}}},"placeholder":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of placeholder text in form controls (the gray text that appears in empty input fields to show users what to enter, like \'Enter your name\' or \'Select an option\'). This determines what color the hint text appears in.<br>CSS variable: --wm-form-controls-placeholder-color"}}},"background":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls (input fields, text areas, select boxes, and other form elements where users enter data). This is the main background color that appears behind the form field content.<br>CSS variable: --wm-form-controls-background"}},"color":{"value":"{color.black.@.value}","type":"color"},"label":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form control labels (the text labels that appear next to or above input fields to describe what information should be entered). This determines what color the label text appears in.<br>CSS variable: --wm-form-controls-label-color"}},"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form control labels (the text labels that appear next to or above input fields). When transparent, only the label text is visible. When filled with a color, the label appears with a colored background.<br>CSS variable: --wm-form-controls-label-background"}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form control labels appear (the text labels that appear next to or above input fields). This affects the size of the label text that users see.<br>CSS variable: --wm-form-controls-label-font-size"}},"weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form control labels appear (the text labels that appear next to or above input fields). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-label-font-weight"}},"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form control labels (the text labels that appear next to or above input fields). This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-label-font-family"}}},"margin":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing around form control labels (the space above and below the label text). This creates visual separation between labels and form fields.<br>CSS variable: --wm-form-controls-label-margin-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing around form control labels (the space to the left and right of the label text). This creates visual separation between labels and form fields.<br>CSS variable: --wm-form-controls-label-margin-horizontal"}}}},"floating":{"color":{"value":"{color.surface.dim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form control labels (the text labels that appear next to or above input fields to describe what information should be entered). This determines what color the label text appears in.<br>CSS variable: --wm-form-controls-label-color"}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form control labels appear (the text labels that appear next to or above input fields). This affects the size of the label text that users see.<br>CSS variable: --wm-form-controls-label-font-size"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form control labels appear (the text labels that appear next to or above input fields). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-label-font-weight"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form control labels (the text labels that appear next to or above input fields). This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-label-font-family"}}},"top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-top"}},"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the left side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-left"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside form controls (the space between the form field content and its borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding"}}},"states":{"focused":{"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the border appears in when the field is active and ready for input.<br>CSS variable: --wm-form-controls-border-color (focused state)"}},"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-width (focused state)"}}},"background":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls when they are in the focused state (when the user clicks or tabs into the form field). This is the background color that appears when the field is active and ready for input.<br>CSS variable: --wm-form-controls-background (focused state)"}},"color":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the text that users type appears in when the field is active.<br>CSS variable: --wm-form-controls-color (focused state)"}},"floating":{"color":{"value":"{color.surface.dim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form control labels (the text labels that appear next to or above input fields to describe what information should be entered). This determines what color the label text appears in.<br>CSS variable: --wm-form-controls-label-color"}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form control labels appear (the text labels that appear next to or above input fields). This affects the size of the label text that users see.<br>CSS variable: --wm-form-controls-label-font-size"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form control labels appear (the text labels that appear next to or above input fields). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-label-font-weight"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form control labels (the text labels that appear next to or above input fields). This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-label-font-family"}}},"top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-top"}},"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the left side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-left"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside form controls (the space between the form field content and its borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding"}}}},"disabled":{"border":{"color":{"value":"{color.shadow.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This determines what color the border appears in when the field is disabled.<br>CSS variable: --wm-form-controls-border-color (disabled state)"}},"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-width (disabled state)"}}},"background":{"value":"{color.surface.dim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This is the background color that appears when the field is disabled.<br>CSS variable: --wm-form-controls-background (disabled state)"}},"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form controls when they are in the disabled state (when the form field is not interactive). This determines what color the text appears in when the field is disabled.<br>CSS variable: --wm-form-controls-color (disabled state)"}},"opacity":{"value":"0.67","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of form controls when they are in the disabled state (when the form field is not interactive). A value of 0.67 makes the form controls appear dimmed to indicate they are disabled. Lower values make them more transparent.<br>CSS variable: --wm-form-controls-opacity (disabled state)"}}}}},"appearances":{"standard":{},"filled":{"mapping":{"opacity":{"value":"{border.width.1.value}","type":"radius"},"min-height":{"value":"56px","type":"space"},"min-width":{"value":"210px","type":"space"},"padding":{"value":"{space.4.value}","type":"space"},"border":{"color":{"value":"{color.outline.@.value}","type":"color"},"radius":{"value":"{radius.sm.value} {radius.sm.value} 0 0","type":"space"},"style":{"value":"{border.style.base.value}","type":"style"},"width":{"value":"0 0 {border.width.1.value} 0","type":"space"}},"placeholder":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}},"background":{"value":"{color.surface.dim.@.value}","type":"color"},"color":{"value":"{color.black.@.value}","type":"color"},"floating":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color"},"top":{"value":"{space.5.value}","type":"space"},"left":{"value":"{space.3.value}","type":"space"}},"label":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color"},"background":{"value":"{color.transparent.@.value}","type":"color"},"font":{"size":{"value":"{label.large.font-size.value}","type":"font"},"weight":{"value":"{label.large.font-weight.value}","type":"font"},"family":{"value":"{label.large.font-family.value}","type":"font"}},"margin":{"vertical":{"value":"{space.0.value}","type":"space"},"horizontal":{"value":"{space.0.value}","type":"space"}}},"states":{"focused":{"min-height":{"value":"56px","type":"space"},"min-width":{"value":"210px","type":"space"},"border":{"width":{"value":"0 0 {border.width.2.value} 0","type":"space"},"style":{"value":"{border.style.base.value}","type":"style"},"radius":{"value":"{radius.sm.value} {radius.sm.value} 0 0","type":"space"}},"floating":{"color":{"value":"{color.outline.@.value}","type":"color"},"top":{"value":"{space.5.value}","type":"space"},"left":{"value":"{space.3.value}","type":"space"}},"label":{"color":{"value":"{color.outline.@.value}","type":"color"}},"padding":{"value":"{space.4.value}","type":"space"}},"disabled":{"border":{"color":{"value":"{color.shadow.@.value}","type":"color"},"width":{"value":"0 0 {border.width.1.value} 0","type":"space"}},"background":{"value":"{color.surface.dim.@.value}","type":"color"},"color":{"value":"{color.scrim.@.value}","type":"color"},"opacity":{"value":"0.67","type":"radius"}}}}},"outlined":{"mapping":{"opacity":{"value":"1","type":"radius"},"min-height":{"value":"56px","type":"space"},"min-width":{"value":"210px","type":"space"},"font":{"size":{"value":"{body.large.font-size.value}","type":"font"},"weight":{"value":"{body.large.font-weight.value}","type":"font"},"family":{"value":"{body.large.font-family.value}","type":"font"}},"padding":{"value":"{space.4.value}","type":"space"},"border":{"value":"{border.width.1.value}","type":"border","radius":{"value":"{radius.md.value}","type":"radius"}},"placeholder":{"color":{"value":"{color.on-surface.@.value}","type":"color"}},"background":{"value":"transparent","type":"color"},"color":{"value":"{color.black.@.value}","type":"color"},"label":{"color":{"value":"{color.on-surface.@.value}","type":"color"},"background":{"value":"{color.transparent.@.value}","type":"color"}},"floating":{"color":{"value":"{color.surface.dim.@.value}","type":"color"},"top":{"value":"{space.5.value}","type":"space"},"left":{"value":"{space.4.value}","type":"space"}},"states":{"focused":{"min-height":{"value":"56px","type":"space"},"min-width":{"value":"210px","type":"space"},"border":{"color":{"value":"{color.secondary.@.value}","type":"color"},"width":{"value":"{border.width.1.value}","type":"space"}},"padding":{"value":"{space.4.value}","type":"space"},"background":{"value":"transparent","type":"color"},"color":{"value":"{color.black.@.value}","type":"color"},"floating":{"color":{"value":"{color.primary.@.value}","type":"color"},"top":{"value":"{space.5.value}","type":"space"},"left":{"value":"{space.4.value}","type":"space"}}},"disabled":{"border":{"value":"1px solid {color.shadow.@.value}","type":"border"},"background":{"value":"transparent","type":"color"},"color":{"value":"{color.scrim.@.value}","type":"color"},"opacity":{"value":"0.67","type":"radius"}}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_form-wrapper_form-wrapper_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_form-wrapper_form-wrapper_json"],{
+
+/***/ "./src/tokens/mobile/components/form-wrapper/form-wrapper.json"
+/*!*********************************************************************!*\
+  !*** ./src/tokens/mobile/components/form-wrapper/form-wrapper.json ***!
+  \*********************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"form":{"meta":{"mapping":{"selector":{"mobile":".app-form"}},"appearances":{}},"mapping":{"background":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form wrapper components (containers that wrap form elements with header, body, and footer sections). This is the main background color that appears behind the entire form wrapper.<br>CSS variable: --wm-form-background"}},"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside form wrapper components (the space between the form wrapper content and its borders). This creates breathing room around the entire form wrapper container.<br>CSS variable: --wm-form-padding"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form wrapper components (containers that wrap form elements). This makes the form wrapper corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-border-radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form wrapper components (containers that wrap form elements). This determines how thick the border lines appear around the form wrapper.<br>CSS variable: --wm-form-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form wrapper components (containers that wrap form elements). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<br>CSS variable: --wm-form-border-style"}},"color":{"@":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form wrapper components (containers that wrap form elements). When transparent, borders are not visible. When filled with a color, the border appears with the specified color.<br>CSS variable: --wm-form-border-color"}}}},"header":{"padding":{"vertical":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal vertical spacing inside form wrapper headers (the top section that contains the form title and subtitle). This creates breathing room around the header content.<br>CSS variable: --wm-form-header-padding-vertical"}},"horizontal":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal horizontal spacing inside form wrapper headers (the top section that contains the form title and subtitle). This creates breathing room around the header content.<br>CSS variable: --wm-form-header-padding-horizontal"}}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form wrapper headers (the top section that contains the form title and subtitle). When transparent, borders are not visible. When filled with a color, the border appears with the specified color.<br>CSS variable: --wm-form-header-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form wrapper headers (the top section that contains the form title and subtitle). This makes the header corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-header-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form wrapper headers (the top section that contains the form title and subtitle). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-form-header-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form wrapper headers (the top section that contains the form title and subtitle). This determines how thick the border lines appear around the header.<br>CSS variable: --wm-form-header-border-width"}}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form wrapper header titles (the main heading text that appears at the top of the form). This determines what color the title text appears in.<br>CSS variable: --wm-form-header-title-color"}},"font":{"size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form wrapper header titles appear (the main heading text that appears at the top of the form). This affects the size of the title text that users see.<br>CSS variable: --wm-form-header-title-font-size"}},"weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form wrapper header titles appear (the main heading text that appears at the top of the form). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-header-title-font-weight"}},"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form wrapper header titles (the main heading text that appears at the top of the form). This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-header-title-font-family"}}},"margin":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing around form wrapper header titles (the space above and below the title text). This creates visual separation between the title and other header elements.<br>CSS variable: --wm-form-header-title-margin-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing around form wrapper header titles (the space to the left and right of the title text). This creates visual separation between the title and other header elements.<br>CSS variable: --wm-form-header-title-margin-horizontal"}}}},"sub-title":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form wrapper header subtitles (the secondary heading text that appears below the main title). This determines what color the subtitle text appears in.<br>CSS variable: --wm-form-header-sub-title-color"}},"font":{"size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form wrapper header subtitles appear (the secondary heading text that appears below the main title). This affects the size of the subtitle text that users see.<br>CSS variable: --wm-form-header-sub-title-font-size"}},"weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form wrapper header subtitles appear (the secondary heading text that appears below the main title). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-header-sub-title-font-weight"}},"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form wrapper header subtitles (the secondary heading text that appears below the main title). This determines whether the subtitle text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-header-sub-title-font-family"}}},"margin":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing around form wrapper header subtitles (the space above and below the subtitle text). This creates visual separation between the subtitle and other header elements.<br>CSS variable: --wm-form-header-sub-title-margin-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing around form wrapper header subtitles (the space to the left and right of the subtitle text). This creates visual separation between the subtitle and other header elements.<br>CSS variable: --wm-form-header-sub-title-margin-horizontal"}}}},"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form wrapper headers (the top section that contains the form title and subtitle). When transparent, only the header content is visible. When filled with a color, the header appears with a colored background.<br>CSS variable: --wm-form-header-background"}}},"body":{"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form wrapper body sections (the main content area where form fields are displayed). When transparent, only the body content is visible. When filled with a color, the body appears with a colored background.<br>CSS variable: --wm-form-body-background"}},"padding":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal vertical spacing inside form wrapper body sections (the main content area where form fields are displayed). This creates breathing room around the body content.<br>CSS variable: --wm-form-body-padding-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal horizontal spacing inside form wrapper body sections (the main content area where form fields are displayed). This creates breathing room around the body content.<br>CSS variable: --wm-form-body-padding-horizontal"}}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form wrapper body sections (the main content area where form fields are displayed). When transparent, borders are not visible. When filled with a color, the border appears with the specified color.<br>CSS variable: --wm-form-body-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form wrapper body sections (the main content area where form fields are displayed). This makes the body corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-body-border-radius"}},"style":{"value":"{border.style.base.value}","type":"style","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form wrapper body sections (the main content area where form fields are displayed). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-form-body-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form wrapper body sections (the main content area where form fields are displayed). This determines how thick the border lines appear around the body.<br>CSS variable: --wm-form-body-border-width"}}}},"footer":{"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form wrapper footer sections (the bottom section that typically contains action buttons like Submit or Cancel). When transparent, only the footer content is visible. When filled with a color, the footer appears with a colored background.<br>CSS variable: --wm-form-footer-background"}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form wrapper footer sections (the bottom section that typically contains action buttons). When transparent, borders are not visible. When filled with a color, the border appears with the specified color.<br>CSS variable: --wm-form-footer-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form wrapper footer sections (the bottom section that typically contains action buttons). This makes the footer corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-footer-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form wrapper footer sections (the bottom section that typically contains action buttons). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-form-footer-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form wrapper footer sections (the bottom section that typically contains action buttons). This determines how thick the border lines appear around the footer.<br>CSS variable: --wm-form-footer-border-width"}}},"padding":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal vertical spacing inside form wrapper footer sections (the bottom section that typically contains action buttons). This creates breathing room around the footer content.<br>CSS variable: --wm-form-footer-padding-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal horizontal spacing inside form wrapper footer sections (the bottom section that typically contains action buttons). This creates breathing room around the footer content.<br>CSS variable: --wm-form-footer-padding-horizontal"}}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_grid-layout_grid-layout_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_grid-layout_grid-layout_json"],{
+
+/***/ "./src/tokens/mobile/components/grid-layout/grid-layout.json"
+/*!*******************************************************************!*\
+  !*** ./src/tokens/mobile/components/grid-layout/grid-layout.json ***!
+  \*******************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"grid-layout":{"mapping":{"width":{"value":"100%","type":"space"},"column":{"padding":{"top":{"value":"{space.2.value}","type":"space"},"left":{"value":"{space.2.value}","type":"space"},"right":{"value":"{space.2.value}","type":"space"},"bottom":{"value":"{space.2.value}","type":"space"}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_icon_icon_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_icon_icon_json"],{
+
+/***/ "./src/tokens/mobile/components/icon/icon.json"
+/*!*****************************************************!*\
+  !*** ./src/tokens/mobile/components/icon/icon.json ***!
+  \*****************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"icon":{"meta":{"mapping":{"selector":{"web":".app-icon","mobile":".app-icon"}},"appearances":{"default":{"mapping":{"selector":{"web":".app-icon","mobile":".app-icon"}},"variantGroups":{"size":{"xs":{"selector":{"mobile":".fa-xs"}},"sm":{"selector":{"mobile":".fa-sm"}},"lg":{"selector":{"mobile":".fa-lg"}},"2x":{"selector":{"mobile":".fa-2x"}},"3x":{"selector":{"mobile":".fa-3x"}},"4x":{"selector":{"mobile":".fa-4x"}},"5x":{"selector":{"mobile":".fa-5x"}}}}}}},"mapping":{"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-icon-color"}},"font-size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-icon-font-size"}},"min-width":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the minimum width of icon symbols to ensure they\'re always wide enough to be visible and clickable, even when they contain small symbols.<br>CSS variable: --wm-icon-min-width"}},"width":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how wide icon symbols appear (like arrows, hearts, settings, etc.). This determines the horizontal space each icon takes up.<br>CSS variable: --wm-icon-width"}},"height":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how tall icon symbols appear (like arrows, hearts, settings, etc.). This determines the vertical space each icon takes up.<br>CSS variable: --wm-icon-height"}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between icons and adjacent elements (like text or other icons). This creates visual separation so icons don\'t appear crowded together.<br>CSS variable: --wm-icon-gap"}}},"appearances":{"default":{"variantGroups":{"size":{"xs":{"font-size":{"value":"{icon.size.xs.value}","type":"font"},"min-width":{"value":"{icon.size.xs.value}","type":"space"},"width":{"value":"{icon.size.xs.value}","type":"space"},"height":{"value":"{icon.size.xs.value}","type":"space"}},"sm":{"font-size":{"value":"{icon.size.sm.value}","type":"font"},"min-width":{"value":"{icon.size.sm.value}","type":"space"},"width":{"value":"{icon.size.sm.value}","type":"space"},"height":{"value":"{icon.size.sm.value}","type":"space"}},"lg":{"font-size":{"value":"{icon.size.lg.value}","type":"font"},"min-width":{"value":"{icon.size.lg.value}","type":"space"},"width":{"value":"{icon.size.lg.value}","type":"space"},"height":{"value":"{icon.size.lg.value}","type":"space"}},"2x":{"font-size":{"value":"{icon.size.2x.value}","type":"font"},"min-width":{"value":"{icon.size.2x.value}","type":"space"},"width":{"value":"{icon.size.2x.value}","type":"space"},"height":{"value":"{icon.size.2x.value}","type":"space"}},"3x":{"font-size":{"value":"{icon.size.3x.value}","type":"font"},"min-width":{"value":"{icon.size.3x.value}","type":"space"},"width":{"value":"{icon.size.3x.value}","type":"space"},"height":{"value":"{icon.size.3x.value}","type":"space"}},"4x":{"font-size":{"value":"{icon.size.4x.value}","type":"font"},"min-width":{"value":"{icon.size.4x.value}","type":"space"},"width":{"value":"{icon.size.4x.value}","type":"space"},"height":{"value":"{icon.size.4x.value}","type":"space"}},"5x":{"font-size":{"value":"{icon.size.5x.value}","type":"font"},"min-width":{"value":"{icon.size.5x.value}","type":"space"},"width":{"value":"{icon.size.5x.value}","type":"space"},"height":{"value":"{icon.size.5x.value}","type":"space"}}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_label_label_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_label_label_json"],{
+
+/***/ "./src/tokens/mobile/components/label/label.json"
+/*!*******************************************************!*\
+  !*** ./src/tokens/mobile/components/label/label.json ***!
+  \*******************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"label":{"meta":{"mapping":{"selector":{"mobile":".app-label"}},"appearances":{"default":{"mapping":{"selector":{"mobile":".app-label"}},"variantGroups":{"size":{"h1":{"selector":{"mobile":".h1"}},"h2":{"selector":{"mobile":".h2"}},"h3":{"selector":{"mobile":".h3"}},"h4":{"selector":{"mobile":".h4"}},"h5":{"selector":{"mobile":".h5"}},"h6":{"selector":{"mobile":".h6"}},"p":{"selector":{"mobile":".p"}},"media-heading":{"selector":{"mobile":".media-heading"}}}}},"text":{"mapping":{"selector":{"mobile":".text"}},"variantGroups":{"status":{"primary":{"selector":{"mobile":".text-primary"}},"secondary":{"selector":{"mobile":".text-secondary"}},"success":{"selector":{"mobile":".text-success"}},"warning":{"selector":{"mobile":".text-warning"}},"danger":{"selector":{"mobile":".text-danger"}},"info":{"selector":{"mobile":".text-info"}},"muted":{"selector":{"mobile":".text-muted"}}}}},"label":{"mapping":{"selector":{"mobile":".label"}},"variantGroups":{"status":{"primary":{"selector":{"mobile":".label-primary"}},"secondary":{"selector":{"mobile":".label-secondary"}},"success":{"selector":{"mobile":".label-success"}},"warning":{"selector":{"mobile":".label-warning"}},"danger":{"selector":{"mobile":".label-danger"}},"info":{"selector":{"mobile":".label-info"}},"muted":{"selector":{"mobile":".label-muted"}}}}}}},"mapping":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of labels (text elements that describe or identify other content). This determines what color the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-label-color"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when label text wraps to multiple lines. Higher values create more space between lines for better readability.<br>CSS variable: --wm-label-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 label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-label-letter-spacing"}},"asterisk":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the asterisk symbol (*) that appears in required field labels. This determines what color the asterisk appears in, typically red to indicate required fields.<br>CSS variable: --wm-label-asterisk-color"}}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding inside label containers (space between label edges and content). Use shorthand (e.g. vertical horizontal or top right bottom left) like web label tokens.<br>CSS variable: --wm-label-padding"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large label text appears (text that describes or identifies other content). Larger values make labels more prominent, smaller values make them more subtle.<br>CSS variable: --wm-label-font-size"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold label text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-label-font-weight"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-label-font-family"}},"background-color":{"value":"none","type":"color","attributes":{"subtype":"color","description":"Sets the background color of labels (text elements that describe or identify other content). This determines what background color the label appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-label-background-color"}},"border":{"radius":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of label (alert boxes that display notifications, warnings, or information). This makes the label appear with rounded corners for a softer appearance.<br>CSS variable: --wm-label-border-radius"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around label. This determines how thick the outline appears around the label. Acceptable units: px.<br>CSS variable: --wm-label-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around label. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-label-border-style"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around label. This determines the color of the outline that defines the label.<br>CSS variable: --wm-label-border-color"}}},"text":{"decoration":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration","description":"Controls the text decoration (underline, overline, line-through) for anchor links. \'none\' removes all decorations, \'underline\' adds an underline, \'overline\' adds a line above, and \'line-through\' adds a line through the text.<br>CSS variable: --wm-anchor-text-decoration"}}}},"appearances":{"default":{"variantGroups":{"size":{"p":{"font-size":{"value":"{p.font-size.value}","type":"font"},"font-weight":{"value":"{p.font-weight.value}","type":"font"},"font-family":{"value":"{p.font-family.value}","type":"font"},"line-height":{"value":"{p.line-height.value}","type":"font"},"letter-spacing":{"value":"{p.letter-spacing.value}","type":"font"}},"h1":{"font-size":{"value":"{h1.font-size.value}","type":"font"},"font-weight":{"value":"{h1.font-weight.value}","type":"font"},"font-family":{"value":"{h1.font-family.value}","type":"font"},"line-height":{"value":"{h1.line-height.value}","type":"font"},"letter-spacing":{"value":"{h1.letter-spacing.value}","type":"font"}},"h2":{"font-size":{"value":"{h2.font-size.value}","type":"font"},"font-weight":{"value":"{h2.font-weight.value}","type":"font"},"font-family":{"value":"{h2.font-family.value}","type":"font"},"line-height":{"value":"{h2.line-height.value}","type":"font"},"letter-spacing":{"value":"{h2.letter-spacing.value}","type":"font"}},"h3":{"font-size":{"value":"{h3.font-size.value}","type":"font"},"font-weight":{"value":"{h3.font-weight.value}","type":"font"},"font-family":{"value":"{h3.font-family.value}","type":"font"},"line-height":{"value":"{h3.line-height.value}","type":"font"},"letter-spacing":{"value":"{h3.letter-spacing.value}","type":"font"}},"h4":{"font-size":{"value":"{h4.font-size.value}","type":"font"},"font-weight":{"value":"{h4.font-weight.value}","type":"font"},"font-family":{"value":"{h4.font-family.value}","type":"font"},"line-height":{"value":"{h4.line-height.value}","type":"font"},"letter-spacing":{"value":"{h4.letter-spacing.value}","type":"font"}},"h5":{"font-size":{"value":"{h5.font-size.value}","type":"font"},"font-weight":{"value":"{h5.font-weight.value}","type":"font"},"font-family":{"value":"{h5.font-family.value}","type":"font"},"line-height":{"value":"{h5.line-height.value}","type":"font"},"letter-spacing":{"value":"{h5.letter-spacing.value}","type":"font"}},"h6":{"font-size":{"value":"{h6.font-size.value}","type":"font"},"font-weight":{"value":"{h6.font-weight.value}","type":"font"},"font-family":{"value":"{h6.font-family.value}","type":"font"},"line-height":{"value":"{h6.line-height.value}","type":"font"},"letter-spacing":{"value":"{h6.letter-spacing.value}","type":"font"}},"media-heading":{"font-size":{"value":"{body.large.font-size.value}","type":"font"}}}}},"text":{"variantGroups":{"status":{"primary":{"color":{"value":"{color.primary.@.value}","type":"color"}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}},"success":{"color":{"value":"{color.success.@.value}","type":"color"}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color"}},"danger":{"color":{"value":"{color.error.@.value}","type":"color"}},"info":{"color":{"value":"{color.info.@.value}","type":"color"}},"muted":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}}}}},"label":{"mapping":{"padding":{"value":"{space.4.value} {space.8.value}","type":"space","attributes":{"subtype":"space","description":"Padding inside label-badge appearance (vertical horizontal: top/bottom and left/right). Mirrors web label single-padding pattern.<br>CSS variable: --wm-label-padding"}},"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold label badge text appears. When set to 700, the label text appears bold to emphasize the label badge.<br>CSS variable: --wm-label-font-weight"}},"border":{"radius":{"value":"6px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of label badges (colored label containers). This makes the label badges appear with rounded corners for a softer appearance.<br>CSS variable: --wm-label-border-radius"}}}},"variantGroups":{"status":{"primary":{"background-color":{"value":"{color.primary.@.value}","type":"color"},"color":{"value":"{color.on-primary.@.value}","type":"color"}},"secondary":{"background-color":{"value":"{color.secondary.@.value}","type":"color"},"color":{"value":"{color.on-secondary.@.value}","type":"color"}},"tertiary":{"background-color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-tertiary.@.value}","type":"color"}},"success":{"background-color":{"value":"{color.success.@.value}","type":"color"},"color":{"value":"{color.on-success.@.value}","type":"color"}},"warning":{"background-color":{"value":"{color.warning.@.value}","type":"color"},"color":{"value":"{color.on-warning.@.value}","type":"color"}},"danger":{"background-color":{"value":"{color.error.@.value}","type":"color"},"color":{"value":"{color.on-error.@.value}","type":"color"}},"info":{"background-color":{"value":"{color.info.@.value}","type":"color"},"color":{"value":"{color.on-info.@.value}","type":"color"}},"muted":{"background-color":{"value":"{color.on-surface.variant.@.value}","type":"color"},"color":{"value":"{color.surface.variant.@.value}","type":"color"}}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_list_list_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_list_list_json"],{
+
+/***/ "./src/tokens/mobile/components/list/list.json"
+/*!*****************************************************!*\
+  !*** ./src/tokens/mobile/components/list/list.json ***!
+  \*****************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"list":{"meta":{"mapping":{"selector":{"mobile":".app-list"}}},"mapping":{"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of list (boxes that hold content). This is the main background color that appears behind all list content.<br>CSS variable: --wm-list-background-color"}}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (all sides) inside the list container. This creates breathing room around the list content. Acceptable units: px.<br>CSS variable: --wm-list-padding"}},"border":{"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the outline around list container \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-list-border-style"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around list. When set to 0, there\'s no visible border. Higher values create thicker borders around the container.<br>CSS variable: --wm-list-border-width"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around list. This creates a colored border around the list to define its boundaries.<br>CSS variable: --wm-list-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the list. When set to \'none\', containers have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-list-border-radius"}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_listtemplate_listtemplate_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_listtemplate_listtemplate_json"],{
+
+/***/ "./src/tokens/mobile/components/listtemplate/listtemplate.json"
+/*!*********************************************************************!*\
+  !*** ./src/tokens/mobile/components/listtemplate/listtemplate.json ***!
+  \*********************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"list-template":{"meta":{"mapping":{"selector":{"mobile":".app-list-template"}}},"mapping":{"background":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of each list row. This is the main background color for list item content.<br>CSS variable: --wm-list-template-background-color"}}},"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding inside each list row. Acceptable units: px.<br>CSS variable: --wm-list-template-padding"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of each list row.<br>CSS variable: --wm-list-template-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of each list row.<br>CSS variable: --wm-list-template-border-color"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border thickness of each list row.<br>CSS variable: --wm-list-template-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of each list row.<br>CSS variable: --wm-list-template-border-style"}}},"min-height":{"value":"56","type":"space","attributes":{"subtype":"space","description":"Minimum height of each list row.<br>CSS variable: --wm-list-template-min-height"}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"boxShadow","description":"Controls the shadow of each list row.<br>CSS variable: --wm-list-template-box-shadow"}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_login_login_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_login_login_json"],{
+
+/***/ "./src/tokens/mobile/components/login/login.json"
+/*!*******************************************************!*\
+  !*** ./src/tokens/mobile/components/login/login.json ***!
+  \*******************************************************/
+(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":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (all sides) inside the login form container. This creates breathing room around the form content. Acceptable units: px.<br>CSS variable: --wm-login-form-padding"}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_lottie_lottie_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_lottie_lottie_json"],{
+
+/***/ "./src/tokens/mobile/components/lottie/lottie.json"
+/*!*********************************************************!*\
+  !*** ./src/tokens/mobile/components/lottie/lottie.json ***!
+  \*********************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"lottie":{"meta":{"mapping":{"selector":{"mobile":".app-lottie"}}},"mapping":{"background":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the lottie. When transparent, only the lottie is visible. When filled with a color, the lottie appears with a colored background.<br>CSS variable: --wm-lottie-background-color"}}},"padding":{"value":"{space.0.value} {space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding around the lottie. First value is for top/bottom, second value is for left/right.<br>CSS variables: --wm-lottie-padding-top, --wm-lottie-padding-right, --wm-lottie-padding-bottom, --wm-lottie-padding-left"}},"content":{"height":{"value":"{spacer.7.value}","type":"space"},"width":{"value":"100%","type":"space"},"background":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color for the content of lottie. When transparent, only the lottie is visible. When filled with a color, the lottie appears with a colored background.<br>CSS variable: --wm-lottie-content-background-color"}}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_message_message_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_message_message_json"],{
+
+/***/ "./src/tokens/mobile/components/message/message.json"
+/*!***********************************************************!*\
+  !*** ./src/tokens/mobile/components/message/message.json ***!
+  \***********************************************************/
+(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":{"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"}}},"text-wrapper":{"padding":{"value":"{space.0.value} {space.0.value} {space.0.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top, right, bottom, left) inside the message text wrapper (the container that holds the message text). This creates breathing room around the text content. Acceptable units: px.<br>CSS variable: --wm-message-text-wrapper-padding"}}},"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":{"value":"{space.0.value} {space.0.value} {space.1.value} {space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top, right, bottom, left) below message titles. This creates spacing between the title and the message text content. Acceptable units: px.<br>CSS variable: --wm-message-title-padding"}},"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"}}},"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"}},"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"}}},"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":{"value":"{space.0.value} {space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) inside the message close button. This creates breathing room around the close button. Acceptable units: px.<br>CSS variable: --wm-message-close-btn-padding"}},"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"}}}}}}}}');
+
+/***/ }
+
+}]);