@wavemaker/foundation-css 11.14.3-rc.6401 → 11.14.4-rc.647538

package/cjs/src_tokens_mobile_components_cards_cards_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*******************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"card":{"meta":{"mapping":{"selector":{"mobile":".app-card"}},"appearances":{}},"mapping":{"header":{"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Sets the internal spacing inside the card header. This creates breathing room around the header content.<br>CSS variable: --wm-card-header-padding"}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of the card header. This determines how wide the header appears.<br>CSS variable: --wm-card-header-width"}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the card header. This is the background color that appears behind the header content.<br>CSS variable: --wm-card-header-background-color"}}},"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border thickness of the card component. This determines how thick the border around the card appears.<br>CSS variable: --wm-card-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of the card component. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-card-border-style"}},"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the card component. This determines what color the border around the card appears in.<br>CSS variable: --wm-card-border-color"}},"radius":{"value":"6px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the card component. This makes the card appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-card-border-radius"}}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the card component. This creates a subtle elevation effect that makes the card appear to float above the background.<br>CSS variable: --wm-card-shadow"}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the card component. This is the main background color that appears behind all card content.<br>CSS variable: --wm-card-background"}},"padding":{"value":"0px","type":"space","attributes":{"subtype":"space","description":"Sets the internal spacing inside the card component. This creates breathing room around the card content.<br>CSS variable: --wm-card-padding"}}},"appearances":{"default":{"mapping":{"border":{"width":{"value":"{border.width.base.value}","type":"space"},"style":{"value":"{border.style.base.value}","type":"radius"},"color":{"value":"{color.outline.variant.value}","type":"color"},"radius":{"value":"{radius.md.value}","type":"radius"}},"background":{"value":"transparent","type":"color"},"shadow":{"value":"none","type":"radius"}}},"filled":{"mapping":{"border":{"width":{"value":"0","type":"space"},"style":{"value":"{border.style.base.value}","type":"radius"},"color":{"value":"{color.outline.variant.value}","type":"color"},"radius":{"value":"{radius.md.value}","type":"radius"}},"background":{"value":"{color.surface.bright.@.value}","type":"color"},"shadow":{"value":"none","type":"radius"}},"variantGroups":{}},"elevated":{"mapping":{"border":{"width":{"value":"0px","type":"space"}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius"},"background":{"value":"{color.surface.container.lowest.@.value}","type":"color"}},"variantGroups":{}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"card":{"meta":{"mapping":{"selector":{"mobile":".app-card"}},"appearances":{}},"mapping":{"header":{"padding":{"value":"{space.2.value}","type":"space"},"width":{"value":"100%","type":"space"},"background-color":{"value":"transparent","type":"color"}},"border":{"width":{"value":"{border.width.base.value}","type":"space"},"style":{"value":"{border.style.base.value}","type":"radius"},"color":{"value":"{color.outline.variant.value}","type":"color"},"radius":{"value":"6px","type":"radius"}},"shadow":{"value":"none","type":"radius"},"background":{"value":"transparent","type":"color"},"padding":{"value":"0px","type":"space"}},"appearances":{"default":{"mapping":{"border":{"width":{"value":"{border.width.base.value}","type":"space"},"style":{"value":"{border.style.base.value}","type":"radius"},"color":{"value":"{color.outline.variant.value}","type":"color"},"radius":{"value":"{radius.md.value}","type":"radius"}},"background":{"value":"transparent","type":"color"},"shadow":{"value":"none","type":"radius"}}},"filled":{"mapping":{"border":{"width":{"value":"0","type":"space"},"style":{"value":"{border.style.base.value}","type":"radius"},"color":{"value":"{color.outline.variant.value}","type":"color"},"radius":{"value":"{radius.md.value}","type":"radius"}},"background":{"value":"{color.surface.bright.@.value}","type":"color"},"shadow":{"value":"none","type":"radius"}},"variantGroups":{}},"elevated":{"mapping":{"border":{"width":{"value":"0px","type":"space"}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius"},"background":{"value":"{color.surface.container.lowest.@.value}","type":"color"}},"variantGroups":{}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_carousel_carousel_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"carousel":{"meta":{"mapping":{"selector":{"mobile":".app-carousel"},"states":{"active":{"selector":{"mobile":"-active-dot"}}}}},"mapping":{"ripple":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color that appears when users interact with the carousel (tap or click). This creates a visual feedback animation to indicate user interaction. When transparent, no ripple effect is visible.<br>CSS variable: --wm-carousel-ripple-color"}}},"slide":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of individual carousel slides (the content panels that display images, text, or other content). When set to 100%, each slide takes up the full width of the carousel container. Acceptable units: %, px, em, rem.<br>CSS variable: --wm-carousel-slide-width"}},"padding":{"horizontal":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal padding (left and right spacing) inside carousel slides. This creates breathing room on the sides of the slide content, preventing content from touching the edges. Acceptable units: px.<br>CSS variable: --wm-carousel-slide-padding-horizontal"}}}},"navigation-arrows":{"height":{"value":"{space.12.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of carousel navigation arrow buttons (left/right arrows that allow users to manually navigate between slides). Larger values make the arrows more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-navigation-arrows-height"}},"width":{"value":"{space.12.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of carousel navigation arrow buttons (left/right arrows that allow users to manually navigate between slides). Larger values make the arrows more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-navigation-arrows-width"}},"border":{"radius":{"value":"48px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of carousel navigation arrow buttons. When set to 48px, the arrows appear as perfect circles. Other values create rounded rectangles.<br>CSS variable: --wm-carousel-navigation-arrows-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of carousel navigation arrow buttons. When transparent, no border is visible. When filled with a color, the arrows have a visible outline.<br>CSS variable: --wm-carousel-navigation-arrows-border-color"}},"width":{"value":"{border.width.base.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around carousel navigation arrow buttons. This creates the outline effect around each arrow button.<br>CSS variable: --wm-carousel-navigation-arrows-border-width"}}},"margin-left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left margin (horizontal spacing) of carousel navigation arrow buttons. This creates space between the arrows and adjacent elements, affecting the overall layout and positioning.<br>CSS variable: --wm-carousel-navigation-arrows-margin-left"}},"font-size":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of carousel navigation arrow icons (the arrow symbols inside the buttons). Larger values make the arrows more prominent and easier to see. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-navigation-arrows-font-size"}},"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of carousel navigation arrow icons (the arrow symbols inside the buttons). This determines what color the arrow icons appear in, typically matching the primary theme color for visual consistency.<br>CSS variable: --wm-carousel-navigation-arrows-color"}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of carousel navigation arrow buttons. When transparent, only the arrow icon is visible. When filled with a color, the buttons appear with a solid background.<br>CSS variable: --wm-carousel-navigation-arrows-background"}},"ripple":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color that appears when users tap carousel navigation arrow buttons. This creates a visual feedback animation to indicate user interaction. When transparent, no ripple effect is visible.<br>CSS variable: --wm-carousel-navigation-arrows-ripple-color"}}}},"dots":{"wrapper":{"padding":{"top":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside the carousel dots container (the wrapper that holds all the navigation dots). This creates breathing room above the dots. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-dots-wrapper-padding-top"}},"bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside the carousel dots container (the wrapper that holds all the navigation dots). This creates breathing room below the dots. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-dots-wrapper-padding-bottom"}}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the carousel dots container (the wrapper that holds all the navigation dots). When transparent, only the dots are visible. When filled with a color, the container appears with a colored background.<br>CSS variable: --wm-carousel-dots-wrapper-background-color"}}},"opacity":{"value":"1px","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of the carousel dots container (the wrapper that holds all the navigation dots). When set to 1, the container is fully opaque. Lower values make it more transparent.<br>CSS variable: --wm-carousel-dots-wrapper-opacity"}}},"width":{"value":"10px","type":"space","attributes":{"subtype":"space","description":"Controls the width of carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-width"}},"height":{"value":"10px","type":"space","attributes":{"subtype":"space","description":"Controls the height of carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-height"}},"border":{"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of carousel indicators (the navigation dots). These dots help users navigate between different slides in the carousel. This determines what color the border around each dot appears in.<br>CSS variable: --wm-carousel-dots-border-color"}},"radius":{"value":"5px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of carousel indicators (the navigation dots). When set to 5px, the indicators appear as rounded dots. Other values create different levels of rounding. When set to circle, the indicators appear as perfect round dots.<br>CSS variable: --wm-carousel-dots-border-radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around carousel indicators (the navigation dots). This creates the outline effect around each navigation dot.<br>CSS variable: --wm-carousel-dots-border-width"}}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of carousel indicators (the navigation dots). When transparent, only the border is visible. When filled, the dot appears solid.<br>CSS variable: --wm-carousel-dots-background"}},"margin":{"left":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"space","description":"Controls the horizontal spacing between individual carousel indicators (navigation dots). This creates visual separation between each dot so users can easily distinguish between them.<br>CSS variable: --wm-carousel-dots-margin-left"}},"right":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"space","description":"Controls the horizontal spacing between individual carousel indicators (navigation dots). This creates visual separation between each dot so users can easily distinguish between them.<br>CSS variable: --wm-carousel-dots-margin-right"}}},"opacity":{"value":"0.6px","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of inactive carousel indicators (navigation dots). When set to 0.6, the dots appear semi-transparent to indicate they are not the currently active slide. This creates a visual hierarchy that helps users understand their current position.<br>CSS variable: --wm-carousel-dots-opacity"}}},"skeleton":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of the carousel skeleton loader (the placeholder animation that appears while carousel content is loading). When set to 100%, the skeleton takes up the full width of the carousel container. Acceptable units: %, px.<br>CSS variable: --wm-carousel-skeleton-width"}}},"states":{"active":{"dots":{"background":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the currently active carousel indicator (the dot representing the slide that is currently being displayed). This creates visual feedback to show users which slide they are viewing.<br>CSS variable: --wm-carousel-active-dots-background"}},"opacity":{"value":"1px","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the active carousel indicator. When set to 1, the active dot is fully opaque, making it stand out from inactive dots. This creates a visual hierarchy that helps users understand their current position.<br>CSS variable: --wm-carousel-active-dots-opacity"}}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"carousel":{"meta":{"mapping":{"selector":{"mobile":".app-carousel"},"states":{"active":{"selector":{"mobile":"-active-dot"}}}}},"mapping":{"ripple":{"color":{"value":"transparent","type":"color"}},"slide":{"width":{"value":"100%","type":"space"},"padding":{"horizontal":{"value":"{space.4.value}","type":"space"}}},"navigation-arrows":{"height":{"value":"{space.12.value}","type":"space"},"width":{"value":"{space.12.value}","type":"space"},"border":{"radius":{"value":"48px","type":"radius"},"color":{"value":"transparent","type":"color"},"width":{"value":"{border.width.base.value}","type":"border"}},"margin-left":{"value":"{space.3.value}","type":"space"},"font-size":{"value":"{space.8.value}","type":"space"},"color":{"value":"{color.primary.container.@.value}","type":"color"},"background":{"value":"transparent","type":"color"},"ripple":{"color":{"value":"transparent","type":"color"}}},"dots":{"wrapper":{"padding":{"top":{"value":"{space.1.value}","type":"space"},"bottom":{"value":"{space.1.value}","type":"space"}},"background":{"color":{"value":"transparent","type":"color"}},"opacity":{"value":"1px","type":"radius"}},"width":{"value":"10px","type":"space"},"height":{"value":"10px","type":"space"},"border":{"color":{"value":"{color.primary.container.@.value}","type":"color"},"radius":{"value":"5px","type":"radius"},"width":{"value":"{border.width.base.value}","type":"space"}},"background":{"value":"transparent","type":"color"},"margin":{"left":{"value":"{radius.xxs.value}","type":"radius"},"right":{"value":"{radius.xxs.value}","type":"radius"}},"opacity":{"value":"0.6px","type":"radius"}},"skeleton":{"width":{"value":"100%","type":"space"}},"states":{"active":{"dots":{"background":{"value":"{color.primary.container.@.value}","type":"color"},"opacity":{"value":"1px","type":"radius"}}}}},"appearances":{}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_checkbox_checkbox_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"checkbox":{"meta":{"mapping":{"selector":{"mobile":".app-checkbox"},"states":{"checked":{"selector":{"mobile":"-checkicon, .app-checkbox-selected-label"}},"disabled":{"selector":{"mobile":"-disabled"}}}}},"mapping":{"height":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of the checkbox box (the square input element that users click to check/uncheck). This determines how tall the actual checkbox appears visually. Acceptable units: px.<br>CSS variable: --wm-checkbox-height"}},"width":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of the checkbox box (the square input element that users click to check/uncheck). This determines how wide the actual checkbox appears visually. Acceptable units: px.<br>CSS variable: --wm-checkbox-width"}},"label":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the checkbox label text (the descriptive text that appears next to the checkbox). This text explains what the checkbox option represents, such as \'I agree to terms\' or \'Subscribe to newsletter\'.<br>CSS variable: --wm-checkbox-label-font-size"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family (typeface) for the checkbox label text. This determines the visual style of the text that describes what the checkbox option represents.<br>CSS variable: --wm-checkbox-label-font-family"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the checkbox label (the descriptive text that appears next to the checkbox). This determines what color the label text appears in.<br>CSS variable: --wm-checkbox-label-color"}},"margin-left":{"value":"8px","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between the checkbox box (the square input element) and the label text. This creates visual separation so users can easily distinguish between the clickable checkbox and its descriptive text.<br>CSS variable: --wm-checkbox-label-margin-left"}}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the checkbox box (the square input element). When transparent, only the border is visible. When filled with a color, the checkbox appears solid. This affects the visual appearance of the unchecked state.<br>CSS variable: --wm-checkbox-background-color"}}},"icon":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the checkmark icon (the ✓ symbol) that appears inside the checkbox when it\'s checked. This is typically a contrasting color to ensure the checkmark is clearly visible against the checkbox background.<br>CSS variable: --wm-checkbox-icon-color"}},"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of the checkmark icon (the ✓ symbol) that appears inside the checkbox when it\'s checked. This icon is typically smaller than the checkbox box itself to fit nicely inside. Acceptable units: px.<br>CSS variable: --wm-checkbox-icon-size"}}},"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the checkbox box (the square input element). This creates the outline that defines the checkbox shape and makes it visible to users.<br>CSS variable: --wm-checkbox-border-width"}},"radius":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the checkbox box (the square input element). Small values create slightly rounded corners, while larger values make the checkbox more rounded or even circular.<br>CSS variable: --wm-checkbox-border-radius"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the checkbox box (the square input element). This determines the color of the outline that defines the checkbox shape in its default/unchecked state.<br>CSS variable: --wm-checkbox-border-color"}}},"states":{"checked":{"background":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the checkbox box when it\'s checked. This fills the checkbox with a color to visually indicate that the option has been selected.<br>CSS variable: --wm-checkbox-checked-background-color"}}},"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the checkbox box when it\'s checked. This changes the outline color to match the checked state, creating a cohesive visual appearance.<br>CSS variable: --wm-checkbox-checked-border-color"}}},"icon":{"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the checkmark icon (✓) when the checkbox is checked. This ensures the checkmark is clearly visible against the colored background of the checked checkbox.<br>CSS variable: --wm-checkbox-checked-icon-color"}}},"label":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the checkbox label text when the checkbox is checked. This text explains what the checkbox option represents, such as \'I agree to terms\' or \'Subscribe to newsletter\'.<br>CSS variable: --wm-checkbox-checked-label-font-size"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family (typeface) for the checkbox label text when the checkbox is checked. This determines the visual style of the text that describes what the checkbox option represents.<br>CSS variable: --wm-checkbox-checked-label-font-family"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the checkbox label when the checkbox is checked. This determines what color the label text appears in when the checkbox is selected.<br>CSS variable: --wm-checkbox-checked-label-color"}}}},"disabled":{"opacity":{"value":"0.8","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of the checkbox component when it is disabled. When set to 0.8, the component appears semi-transparent to indicate it cannot be interacted with.<br>CSS variable: --wm-checkbox-disabled-opacity"}},"label":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the checkbox label text when the checkbox is disabled. This text explains what the checkbox option represents, such as \'I agree to terms\' or \'Subscribe to newsletter\'.<br>CSS variable: --wm-checkbox-disabled-label-font-size"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family (typeface) for the checkbox label text when the checkbox is disabled. This determines the visual style of the text that describes what the checkbox option represents.<br>CSS variable: --wm-checkbox-disabled-label-font-family"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the checkbox label when the checkbox is disabled. This determines what color the label text appears in when the checkbox is disabled.<br>CSS variable: --wm-checkbox-disabled-label-color"}}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"checkbox":{"meta":{"mapping":{"selector":{"mobile":".app-checkbox"},"states":{"checked":{"selector":{"mobile":"-checkicon"}},"disabled":{"selector":{"mobile":"-disabled"}}}}},"mapping":{"height":{"value":"{space.6.value}","type":"space"},"width":{"value":"{space.6.value}","type":"space"},"label":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font"},"family":{"value":"{body.large.font-family.value}","type":"font"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"},"margin-left":{"value":"8px","type":"space"}},"background":{"color":{"value":"transparent","type":"color"}},"icon":{"color":{"value":"transparent","type":"color"},"size":{"value":"{icon.size.@.value}","type":"space"}},"border":{"width":{"value":"2px","type":"space"},"radius":{"value":"{radius.xxs.value}","type":"radius"},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}},"states":{"checked":{"background":{"color":{"value":"{color.primary.@.value}","type":"color"}},"border":{"color":{"value":"{color.primary.@.value}","type":"color"}},"icon":{"color":{"value":"{color.on-primary.@.value}","type":"color"}},"label":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font"},"family":{"value":"{body.large.font-family.value}","type":"font"}},"color":{"value":"{color.on-primary.@.value}","type":"color"}}},"disabled":{"opacity":{"value":"0.8","type":"radius"},"label":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font"},"family":{"value":"{body.large.font-family.value}","type":"font"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}}}}},"appearances":{}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_checkboxset_checkboxset_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*******************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"checkboxset":{"meta":{"mapping":{"selector":{"mobile":".app-checkboxset"},"states":{"checked":{"selector":{"mobile":"-checkicon, .app-checkboxset-selected-label"}},"disabled":{"selector":{"mobile":"-disabled"}}}}},"mapping":{"height":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of individual checkbox boxes (the square input elements) in a checkbox set (a group of related checkboxes like \'Select all\', \'Option 1\', \'Option 2\'). This determines how tall each checkbox appears visually. Acceptable units: px.<br>CSS variable: --wm-checkboxset-height"}},"width":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of individual checkbox boxes (the square input elements) in a checkbox set (a group of related checkboxes like \'Select all\', \'Option 1\', \'Option 2\'). This determines how wide each checkbox appears visually. Acceptable units: px.<br>CSS variable: --wm-checkboxset-width"}},"label":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the checkbox label text (the descriptive text that appears next to each checkbox in the set). This text explains what each checkbox option represents, such as \'Option 1\', \'Option 2\', etc.<br>CSS variable: --wm-checkboxset-label-font-size"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family (typeface) for the checkbox label text in a checkbox set. This determines the visual style of the text that describes what each checkbox option represents.<br>CSS variable: --wm-checkboxset-label-font-family"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the checkbox labels (the descriptive text that appears next to each checkbox in the set). This determines what color the label text appears in.<br>CSS variable: --wm-checkboxset-label-color"}},"margin":{"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between the checkbox box (the square input element) and the label text in a checkbox set. This creates visual separation so users can easily distinguish between the clickable checkbox and its descriptive text.<br>CSS variable: --wm-checkboxset-label-margin-left"}}}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of individual checkbox boxes (the square input elements) in a checkbox set. When transparent, only the border is visible. When filled with a color, the checkbox appears solid. This affects the visual appearance of the unchecked state.<br>CSS variable: --wm-checkboxset-background-color"}}},"icon":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of the checkmark icon (the ✓ symbol) that appears inside checkboxes in a checkbox set when they\'re checked. This icon is typically smaller than the checkbox box itself to fit nicely inside. Acceptable units: px.<br>CSS variable: --wm-checkboxset-icon-size"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the checkmark icon (the ✓ symbol) that appears inside checkboxes in a checkbox set when they\'re checked. This is typically a contrasting color to ensure the checkmark is clearly visible against the checkbox background.<br>CSS variable: --wm-checkboxset-icon-color"}}},"border":{"width":{"value":"2","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around individual checkbox boxes (the square input elements) in a checkbox set. This creates the outline that defines each checkbox shape and makes it visible to users.<br>CSS variable: --wm-checkboxset-border-width"}},"radius":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of individual checkbox boxes (the square input elements) in a checkbox set. Small values create slightly rounded corners, while larger values make the checkbox more rounded or even circular.<br>CSS variable: --wm-checkboxset-border-radius"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around individual checkbox boxes (the square input elements) in a checkbox set. This determines the color of the outline that defines each checkbox shape in its default/unchecked state.<br>CSS variable: --wm-checkboxset-border-color"}}},"title":{"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the checkbox set title area (the header section that appears above the checkbox options). When transparent, only the title text is visible. When filled with a color, the title area appears with a colored background.<br>CSS variable: --wm-checkboxset-title-background-color"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the checkbox set title (the header text that appears above the checkbox options). This determines what color the title text appears in.<br>CSS variable: --wm-checkboxset-title-color"}},"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the checkbox set title text (the header text that appears above the checkbox options). This affects how large the title text appears.<br>CSS variable: --wm-checkboxset-title-font-size"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family (typeface) for the checkbox set title text (the header text that appears above the checkbox options). This determines the visual style of the title text.<br>CSS variable: --wm-checkboxset-title-font-family"}}},"padding":{"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding of the checkbox set title area (the header section that appears above the checkbox options). This creates spacing on the left side of the title text.<br>CSS variable: --wm-checkboxset-title-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding of the checkbox set title area (the header section that appears above the checkbox options). This creates spacing on the right side of the title text.<br>CSS variable: --wm-checkboxset-title-padding-right"}}}},"item":{"margin":{"right":{"value":"-20","type":"space","attributes":{"subtype":"space","description":"Controls the right margin of individual checkbox options in a checkbox set (a group of related checkboxes like \'Select all\', \'Option 1\', \'Option 2\'). This creates spacing to the right of each checkbox option.<br>CSS variable: --wm-checkboxset-item-margin-right"}},"left":{"value":"{space.5.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left margin of individual checkbox options in a checkbox set (a group of related checkboxes like \'Select all\', \'Option 1\', \'Option 2\'). This creates spacing to the left of each checkbox option.<br>CSS variable: --wm-checkboxset-item-margin-left"}},"top":{"value":"{space.5.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top margin of individual checkbox options in a checkbox set (a group of related checkboxes like \'Select all\', \'Option 1\', \'Option 2\'). This creates spacing above each checkbox option.<br>CSS variable: --wm-checkboxset-item-margin-top"}},"bottom":{"value":"{space.5.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin of individual checkbox options in a checkbox set (a group of related checkboxes like \'Select all\', \'Option 1\', \'Option 2\'). This creates spacing below each checkbox option.<br>CSS variable: --wm-checkboxset-item-margin-bottom"}}}},"states":{"checked":{"background":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of individual checkbox boxes when they\'re checked in a checkbox set. This fills the checkbox with a color to visually indicate that the option has been selected.<br>CSS variable: --wm-checkboxset-checked-background-color"}}},"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of individual checkbox boxes when they\'re checked in a checkbox set. This changes the outline color to match the checked state, creating a cohesive visual appearance.<br>CSS variable: --wm-checkboxset-checked-border-color"}}},"icon":{"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the checkmark icon (✓) when checkboxes are checked in a checkbox set. This ensures the checkmark is clearly visible against the colored background of the checked checkbox.<br>CSS variable: --wm-checkboxset-checked-icon-color"}}},"label":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the checkbox label text when checkboxes are checked in a checkbox set. This text explains what each checkbox option represents, such as \'Option 1\', \'Option 2\', etc.<br>CSS variable: --wm-checkboxset-checked-label-font-size"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family (typeface) for the checkbox label text when checkboxes are checked in a checkbox set. This determines the visual style of the text that describes what each checkbox option represents.<br>CSS variable: --wm-checkboxset-checked-label-font-family"}},"margin":{"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between the checkbox box (the square input element) and the label text when checkboxes are checked in a checkbox set. This creates visual separation so users can easily distinguish between the clickable checkbox and its descriptive text.<br>CSS variable: --wm-checkboxset-checked-label-margin-left"}}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the checkbox labels when checkboxes are checked in a checkbox set. This determines what color the label text appears in when a checkbox is selected.<br>CSS variable: --wm-checkboxset-checked-label-color"}}}},"disabled":{"opacity":{"value":"0.6","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of checkboxes in a checkbox set when they are disabled. When set to 0.6, the checkboxes appear semi-transparent to indicate they cannot be interacted with.<br>CSS variable: --wm-checkboxset-disabled-opacity"}},"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around individual checkbox boxes when they are disabled in a checkbox set. This creates the outline that defines each checkbox shape.<br>CSS variable: --wm-checkboxset-disabled-border-width"}},"radius":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of individual checkbox boxes when they are disabled in a checkbox set. Small values create slightly rounded corners, while larger values make the checkbox more rounded or even circular.<br>CSS variable: --wm-checkboxset-disabled-border-radius"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around individual checkbox boxes when they are disabled in a checkbox set. This determines the color of the outline that defines each checkbox shape in its disabled state.<br>CSS variable: --wm-checkboxset-disabled-border-color"}}},"label":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the checkbox labels when checkboxes are disabled in a checkbox set. This determines what color the label text appears in when checkboxes are disabled.<br>CSS variable: --wm-checkboxset-disabled-label-color"}}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"checkboxset":{"meta":{"mapping":{"selector":{"mobile":".app-checkboxset"},"states":{"checked":{"selector":{"mobile":"-checkicon"}},"disabled":{"selector":{"mobile":"-disabled"}}}}},"mapping":{"height":{"value":"{space.6.value}","type":"space"},"width":{"value":"{space.6.value}","type":"space"},"label":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font"},"family":{"value":"{body.large.font-family.value}","type":"font"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"},"margin":{"left":{"value":"{space.2.value}","type":"space"}}},"background":{"color":{"value":"transparent","type":"color"}},"icon":{"size":{"value":"{icon.size.@.value}","type":"space"},"color":{"value":"transparent","type":"color"}},"border":{"width":{"value":"2","type":"space"},"radius":{"value":"{radius.xxs.value}","type":"radius"},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}},"title":{"background":{"color":{"value":"transparent","type":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"},"font":{"size":{"value":"{body.large.font-size.value}","type":"font"},"family":{"value":"{body.large.font-family.value}","type":"font"}},"padding":{"left":{"value":"{space.2.value}","type":"space"},"right":{"value":"{space.2.value}","type":"space"}}},"item":{"margin":{"right":{"value":"-20","type":"space"},"left":{"value":"{space.5.value}","type":"space"},"top":{"value":"{space.5.value}","type":"space"},"bottom":{"value":"{space.5.value}","type":"space"}}},"states":{"checked":{"background":{"color":{"value":"{color.primary.@.value}","type":"color"}},"border":{"color":{"value":"{color.primary.@.value}","type":"color"}},"icon":{"color":{"value":"{color.on-primary.@.value}","type":"color"}},"label":{"font":{"size":{"value":"{body.large.font-size.value}","type":"font"},"family":{"value":"{body.large.font-family.value}","type":"font"},"margin":{"left":{"value":"{space.2.value}","type":"space"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}}},"disabled":{"opacity":{"value":"0.6","type":"radius"},"border":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}},"label":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}}}}},"appearances":{}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_chips_chips_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*******************************************************/
 (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-top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) at the top of 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.<br>CSS variable: --wm-chips-list-padding-top"}},"padding-bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) at the bottom of 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.<br>CSS variable: --wm-chips-list-padding-bottom"}},"padding-left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) on the left side of 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.<br>CSS variable: --wm-chips-list-padding-left"}},"padding-right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) on the right side of 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.<br>CSS variable: --wm-chips-list-padding-right"}},"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-top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) at the top of the input field where users type to add new chips. This creates breathing room between the input text and the input field border.<br>CSS variable: --wm-chips-input-padding-top"}},"padding-bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) at the bottom of the input field where users type to add new chips. This creates breathing room between the input text and the input field border.<br>CSS variable: --wm-chips-input-padding-bottom"}},"padding-left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) on the left side of the input field where users type to add new chips. This creates breathing room between the input text and the input field border.<br>CSS variable: --wm-chips-input-padding-left"}},"padding-right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) on the right side of the input field where users type to add new chips. This creates breathing room between the input text and the input field border.<br>CSS variable: --wm-chips-input-padding-right"}}},"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-top":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) at the top of each chip item. This creates breathing room between the chip text/icon and the chip border.<br>CSS variable: --wm-chips-item-padding-top"}},"padding-bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) at the bottom of each chip item. This creates breathing room between the chip text/icon and the chip border.<br>CSS variable: --wm-chips-item-padding-bottom"}},"padding-left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) on the left side of each chip item. This creates breathing room between the chip text/icon and the chip border.<br>CSS variable: --wm-chips-item-padding-left"}},"padding-right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing (padding) on the right side of each chip item. This creates breathing room between the chip text/icon and the chip border.<br>CSS variable: --wm-chips-item-padding-right"}},"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"}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"chips":{"meta":{"mapping":{"selector":{"mobile":".app-chips"},"states":{"disabled":{"selector":{"mobile":"-disabled"}},"active":{"selector":{"mobile":"-active"}}}}},"mapping":{"border":{"width":{"value":"{border.width.base.value}","type":"radius"}},"background-color":{"value":"transparent","type":"color"},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"},"opacity":{"value":"1","type":"radius"},"pointer-events":{"value":"auto","type":"radius"},"shadow":{"value":"none","type":"radius"},"list":{"gap":{"value":"{space.3.value}","type":"space"},"padding-top":{"value":"{space.2.value}","type":"space"},"padding-bottom":{"value":"{space.2.value}","type":"space"},"padding-left":{"value":"{space.2.value}","type":"space"},"padding-right":{"value":"{space.2.value}","type":"space"},"background-color":{"value":"transparent","type":"color"},"border":{"color":{"value":"{color.transparent.@.value}","type":"color"},"radius":{"value":"{radius.sm.value}","type":"radius"},"style":{"value":"{border.style.base.value}","type":"style"},"width":{"value":"{border.width.base.value}","type":"space"}},"place":{"holder":{"color":{"value":"{color.outline.@.value}","type":"color"}}},"height":{"value":"70px","type":"space"}},"input":{"padding-top":{"value":"{space.2.value}","type":"space"},"padding-bottom":{"value":"{space.2.value}","type":"space"},"padding-left":{"value":"{space.3.value}","type":"space"},"padding-right":{"value":"{space.3.value}","type":"space"}},"item":{"height":{"value":"32px","type":"space"},"padding-top":{"value":"{space.1.value}","type":"space"},"padding-bottom":{"value":"{space.1.value}","type":"space"},"padding-left":{"value":"{space.3.value}","type":"space"},"padding-right":{"value":"{space.3.value}","type":"space"},"gap":{"value":"{space.2.value}","type":"space"},"icon":{"color":{"value":"{color.outline.@.value}","type":"color"},"size":{"value":"{icon.size.sm.value}","type":"space"},"gap":{"value":"{space.1.value}","type":"space"}},"border":{"style":{"value":"{border.style.base.value}","type":"radius"},"color":{"value":"{color.outline.@.value}","type":"color"},"radius":{"@":{"value":"{radius.sm.value}","type":"radius"}}},"font-family":{"value":"{label.large.font-family.value}","type":"font"},"font-weight":{"value":"{label.large.font-weight.value}","type":"font"},"font-size":{"value":"{label.large.font-size.value}","type":"font"},"line-height":{"value":"{label.large.line-height.value}","type":"font"},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font"},"avatar":{"size":{"value":"{icon.size.@.value}","type":"space"},"radius":{"value":"{radius.pill.value}","type":"radius"}}},"states":{"disabled":{"opacity":{"value":"0.38","type":"radius"},"pointer-events":{"value":"none","type":"radius"}},"active":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color"},"background-color":{"value":"{color.secondary.container.@.value}","type":"color"},"item":{"border":{"color":{"value":"{color.secondary.container.@.value}","type":"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

@@ -7,7 +7,7 @@
   \***************************************************************/
 (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":"radius","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":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around container elements. When set to 0, there\'s no visible border. Higher values create thicker borders around the container.<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":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside container elements. This creates breathing room above the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside container elements. This creates breathing room below the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-bottom"}},"left":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside container elements. This creates breathing room on the left side of the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-left"}},"right":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside container elements. This creates breathing room on the right side of the container content. Acceptable units: px.<br>CSS variable: --wm-container-padding-right"}}}},"appearances":{"default":{"mapping":{"border":{"style":{"value":"{border.style.base.value}","type":"border"},"width":{"value":"{border.width.0.value}","type":"space"},"color":{"value":"transparent","type":"color"},"radius":{"value":"{radius.none.value}","type":"radius"}}}},"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"}}}},"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"}}}}}}}');
+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":{"color":{"value":"transparent","type":"color"},"radius":{"value":"{radius.none.value}","type":"radius"},"width":{"value":"{border.width.0.value}","type":"border"},"style":{"value":"{border.style.base.value}","type":"border"}}},"appearances":{"default":{"mapping":{"border":{"color":{"value":"transparent","type":"color"},"radius":{"value":"{radius.none.value}","type":"radius"},"width":{"value":"{border.width.0.value}","type":"border"},"style":{"value":"{border.style.base.value}","type":"border"}}}},"outlined":{"mapping":{"border":{"color":{"value":"{color.outline.variant.value}","type":"color"},"width":{"value":"{border.width.base.value}","type":"border"},"style":{"value":"{border.style.base.value}","type":"border"},"radius":{"value":"1px","type":"radius"}}}},"elevated":{"mapping":{"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius"},"border":{"color":{"value":"transparent","type":"color"},"radius":{"value":"{radius.sm.value}","type":"radius"},"width":{"value":"{border.width.base.value}","type":"border"},"style":{"value":"{border.style.base.value}","type":"border"}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_datetime_datetime_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*************************************************************/
 (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":{}}}');
+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"},"size":{"value":"{body.medium.font-size.value}","type":"font"},"weight":{"value":"{body.medium.font-weight.value}","type":"font"}},"background":{"value":"transparent","type":"color"}},"selected-button":{"background":{"value":"{color.primary.@.value}","type":"color"},"text":{"color":{"value":"{color.on-primary.@.value}","type":"color"},"size":{"value":"{body.medium.font-size.value}","type":"font"},"weight":{"value":"{body.medium.font-weight.value}","type":"font"}}},"background":{"value":"{color.surface.container.high.@.value}","type":"color"},"button":{"border":{"width":{"value":"{border.width.base.value}","type":"space"},"style":{"value":"{border.style.base.value}","type":"radius"},"radius":{"value":"{radius.pill.value}","type":"radius"},"color":{"value":"{color.on-surface.@.value}","type":"color"}},"ripple":{"color":{"value":"transparent","type":"color"}}},"text":{"font-size":{"value":"{body.medium.font-size.value}","type":"font"},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font"},"color":{"value":"{color.on-surface.@.value}","type":"color"}},"selected":{"text":{"font-size":{"value":"{body.medium.font-size.value}","type":"font"},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font"},"color":{"value":"{color.on-surface.@.value}","type":"color"}}},"header-text":{"font":{"size":{"value":"20px","type":"font"},"weight":{"value":"{font.weight.700.value}","type":"font"}},"color":{"value":"{color.on-surface.@.value}","type":"color"}}},"appearances":{}}}');
 
 /***/ }
 

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

@@ -7,7 +7,7 @@
   \***********************************************************************/
 (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"}},"padding":{"left":{"type":"space","value":"{space.0.value}","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside dropdown menu containers. This creates breathing room on the left side of the dropdown menu content. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding-left"}},"right":{"type":"space","value":"{space.0.value}","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside dropdown menu containers. This creates breathing room on the right side of the dropdown menu content. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding-right"}},"top":{"type":"space","value":"{space.2.value}","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside dropdown menu containers. This creates breathing room above the dropdown menu content. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding-top"}},"bottom":{"type":"space","value":"{space.2.value}","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside dropdown menu containers. This creates breathing room below the dropdown menu content. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding-bottom"}}},"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":{"left":{"type":"space","value":"{space.2.value}","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) of dropdown menu trigger text. This creates spacing on the left side of the trigger text. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-text-padding-left"}},"right":{"type":"space","value":"{space.3.value}","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of dropdown menu trigger text. This creates spacing on the right side of the trigger text. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-text-padding-right"}}}},"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"}}},"icon":{"size":{"value":"{icon.size.md.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large dropdown menu icons appear (icons that appear alongside menu items). This affects the size of the icons that users see in the dropdown menu.<br>CSS variable: --wm-dropdown-menu-icon-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":{"bottom":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside dropdown menu items. This creates breathing room below each menu option. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding-bottom"}},"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside dropdown menu items. This creates breathing room on the left side of each menu option. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding-left"}},"right":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside dropdown menu items. This creates breathing room on the right side of each menu option. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding-right"}},"top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside dropdown menu items. This creates breathing room above each menu option. Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding-top"}}}},"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"}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"dropdown":{"mapping":{"menu":{"background":{"value":"transparent","type":"color"},"padding":{"left":{"type":"space","value":"{space.0.value}"},"right":{"type":"space","value":"{space.0.value}"},"top":{"type":"space","value":"{space.2.value}"},"bottom":{"type":"space","value":"{space.2.value}"}},"color":{"type":"color","value":"{color.on-surface.variant.@.value}"},"text":{"decoration":{"type":"radius","value":"none"},"font-weight":{"type":"font","value":"{font.weight.700.value}"},"padding":{"left":{"type":"space","value":"{space.2.value}"},"right":{"type":"space","value":"{space.3.value}"}}},"content":{"width":{"value":"220px","type":"space"},"border":{"radius":{"value":"{radius.xs.value}","type":"radius"}},"background":{"value":"#fff","type":"color"}},"caret":{"size":{"value":"{icon.size.sm.value}","type":"space"}},"icon":{"size":{"value":"{icon.size.md.value}","type":"space"}},"item":{"font-family":{"value":"{body.large.font-family.value}","type":"font"},"font-size":{"value":"{body.large.font-size.value}","type":"font"},"font-weight":{"value":"{body.large.font-weight.value}","type":"font"},"line-height":{"value":"{body.large.line-height.value}","type":"font"},"color":{"value":"{color.on-surface.@.value}","type":"color"},"border":{"style":{"type":"radius","value":"{border.style.solid.value}"}},"padding":{"bottom":{"value":"{space.3.value}","type":"space"},"left":{"value":"{space.4.value}","type":"space"},"right":{"value":"{space.4.value}","type":"space"},"top":{"value":"{space.3.value}","type":"space"}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_fileupload_fileupload_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*****************************************************************/
 (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.xxl.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":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"fileupload":{"meta":{"mapping":{"selector":{"mobile":".app-fileupload"}}},"mapping":{"border":{"color":{"value":"{color.black.@.value}","type":"color"},"width":{"value":"{border.width.base.value}","type":"space"},"style":{"value":"{border.style.solid.value}","type":"border"},"radius":{"value":"{radius.xxl.value}","type":"radius"}},"background":{"value":"{color.surface.container.low.@.value}","type":"color"},"text":{"font":{"size":{"value":"{body.large.font-size.value}","type":"text"},"weight":{"value":"{font.weight.400.value}","type":"text"}},"align":{"value":"center","type":"text"},"color":{"value":"{color.primary.@.value}","type":"color"}},"icon":{"font":{"size":{"value":"{body.large.font-size.value}","type":"text"}},"color":{"value":"{color.primary.@.value}","type":"color"}},"ripple-color":{"value":"transparent","type":"color"}},"appearances":{}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_form-control_form-control_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_form-control_form-control_json"],{
+
+/***/ "./src/tokens/mobile/components/form-control/form-control.json"
+/*!*********************************************************************!*\
+  !*** ./src/tokens/mobile/components/form-control/form-control.json ***!
+  \*********************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"form-default":{"meta":{"mapping":{"selector":{"mobile":".app-form"}},"appearances":{"default":{"mapping":{"selector":{"mobile":".form-default"}}}}},"mapping":{"background":{"value":"{color.outline.variant.value}","type":"color"},"padding":{"value":"{space.3.value}","type":"space"},"margin":{"value":"{space.2.value}","type":"space"},"border":{"radius":{"value":"{radius.sm.value}","type":"radius"},"width":{"value":"{border.width.base.value}","type":"space"},"style":{"value":"{border.style.base.value}","type":"style"},"color":{"@":{"value":"{color.transparent.@.value}","type":"color"}}},"header":{"padding":{"vertical":{"value":"{space.2.value}","type":"space"},"horizontal":{"value":"{space.2.value}","type":"space"}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color"},"radius":{"value":"{radius.sm.value}","type":"radius"},"style":{"value":"{border.style.base.value}","type":"style"},"width":{"value":"{border.width.base.value}","type":"space"}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color"},"font":{"size":{"value":"{h4.font-size.value}","type":"font"},"weight":{"value":"{font.weight.700.value}","type":"font"},"family":{"value":"{font.family.brand.value}","type":"font"}},"margin":{"vertical":{"value":"{space.1.value}","type":"space"},"horizontal":{"value":"{space.1.value}","type":"space"}}},"sub-title":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color"},"font":{"size":{"value":"{h6.font-size.value}","type":"font"},"weight":{"value":"{font.weight.500.value}","type":"font"},"family":{"value":"{font.family.brand.value}","type":"font"}},"margin":{"vertical":{"value":"{space.1.value}","type":"space"},"horizontal":{"value":"{space.1.value}","type":"space"}}},"background":{"value":"{color.transparent.@.value}","type":"color"}},"body":{"background":{"value":"{color.transparent.@.value}","type":"color"},"padding":{"vertical":{"value":"{space.1.value}","type":"space"},"horizontal":{"value":"{space.1.value}","type":"space"}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color"},"radius":{"value":"{radius.sm.value}","type":"radius"},"style":{"value":"{border.style.base.value}","type":"style"},"width":{"value":"{border.width.base.value}","type":"space"}}},"footer":{"background":{"value":"{color.transparent.@.value}","type":"color"},"border":{"color":{"value":"{color.transparent.@.value}","type":"color"},"radius":{"value":"{radius.sm.value}","type":"radius"},"style":{"value":"{border.style.base.value}","type":"radius"},"width":{"value":"{border.width.base.value}","type":"space"}},"padding":{"vertical":{"value":"{space.1.value}","type":"space"},"horizontal":{"value":"{space.1.value}","type":"space"}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_form-input_form-input_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_form-input_form-input_json"],{
+
+/***/ "./src/tokens/mobile/components/form-input/form-input.json"
+/*!*****************************************************************!*\
+  !*** ./src/tokens/mobile/components/form-input/form-input.json ***!
+  \*****************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"form-input":{"meta":{"mapping":{"selector":{"mobile":".app-input"},"states":{"focused":{"selector":{"mobile":"-focused"}},"disabled":{"selector":{"mobile":"-disabled"}}},"appearances":{}}},"mapping":{"opacity":{"value":"1","type":"radius"},"min-height":{"value":"48px","type":"space"},"padding":{"vertical":{"value":"{space.2.value}","type":"space"},"horizontal":{"value":"{space.2.value}","type":"space"}},"border":{"color":{"value":"{color.outline.@.value}","type":"color"},"radius":{"value":"{radius.sm.value}","type":"radius"},"style":{"value":"{border.style.base.value}","type":"style"},"width":{"value":"{border.width.base.value}","type":"space"}},"placeholder":{"color":{"value":"{color.on-surface.@.value}","type":"color"}},"background":{"value":"{color.outline.variant.value}","type":"color"},"label":{"color":{"value":"{color.on-surface.@.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.1.value}","type":"space"},"horizontal":{"value":"{space.1.value}","type":"space"}}},"states":{"focused":{"border":{"color":{"value":"{color.primary.@.value}","type":"color"},"width":{"value":"{border.width.base.value}","type":"space"}},"background":{"value":"{color.on-primary.@.value}","type":"color"},"color":{"value":"{color.on-primary.@.value}","type":"color"}},"disabled":{"border":{"color":{"value":"{color.shadow.@.value}","type":"color"},"width":{"value":"{border.width.base.value}","type":"space"}},"background":{"value":"{color.surface.dim.@.value}","type":"color"},"color":{"value":"{color.scrim.@.value}","type":"color"},"opacity":{"value":"0.67","type":"radius"}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_icon_icon_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*****************************************************/
 (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"}}}}}}}}');
+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"},"font-size":{"value":"{icon.size.@.value}","type":"font"},"min-width":{"value":"{icon.size.@.value}","type":"space"},"width":{"value":"{icon.size.@.value}","type":"space"},"height":{"value":"{icon.size.@.value}","type":"space"},"gap":{"value":"{space.1.value}","type":"space"}},"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

@@ -7,7 +7,7 @@
   \*******************************************************/
 (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"}},"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the outer spacing around labels (the space between the label and surrounding elements). This creates breathing room around label text.<br>CSS variable: --wm-label-margin"}},"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 the internal spacing inside labels (the space between the label text and its border). This creates breathing room around the label content.<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"}}},"appearances":{"default":{"variantGroups":{"size":{"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"}},"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"}},"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"}},"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"}},"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"}},"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"}},"p":{"font-size":{"value":"{body.small.font-size.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"}},"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":{"left":{"value":"{space.8.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"}},"right":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the right side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-right"}},"top":{"value":"{space.4.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"}},"bottom":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside label badges (colored label containers). This creates breathing room below the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-bottom"}}},"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"}},"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"}}}}}}}}');
+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"},"margin":{"value":"{space.0.value}","type":"space"},"asterisk":{"color":{"value":"{color.error.@.value}","type":"color"}},"padding":{"value":"{space.0.value}","type":"space"},"font-size":{"value":"{body.large.font-size.value}","type":"font"},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font"},"font-family":{"value":"{body.medium.font-family.value}","type":"font"}},"appearances":{"default":{"variantGroups":{"size":{"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"}},"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"}},"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"}},"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"}},"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"}},"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"}},"p":{"font-size":{"value":"{body.small.font-size.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"}},"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":{"left":{"value":"{space.8.value}","type":"space"},"right":{"value":"{space.8.value}","type":"space"},"top":{"value":"{space.4.value}","type":"space"},"bottom":{"value":"{space.4.value}","type":"space"}},"font-weight":{"value":"{font.weight.700.value}","type":"font"},"border-radius":{"value":"6px","type":"border"}},"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"}},"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_left-nav_left-nav_json.foundation-css.cjs

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