@wavemaker/foundation-css 12.0.0-next.25480 → 12.0.0-next.28533

package/cjs/src_tokens_mobile_components_accordion_accordion_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_accordion_accordion_json"],{
 
-/***/ "./src/tokens/mobile/components/accordion/accordion.json":
+/***/ "./src/tokens/mobile/components/accordion/accordion.json"
 /*!***************************************************************!*\
   !*** ./src/tokens/mobile/components/accordion/accordion.json ***!
   \***************************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"accordion":{"meta":{"mapping":{"selector":{"mobile":".app-accordion"},"states":{"active":{"selector":{"mobile":"-active-header, .app-accordion-active-header-title, .app-accordion-header-collapse-icon, .app-accordion-active-header-badge, .app-accordion-active-title-icon"}}}}},"mapping":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of the accordion component. This determines how wide the accordion panel appears on the screen.<br>CSS variable: --wm-accordion-width"}},"border":{"width":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border thickness of the accordion component. This determines how thick the border around the accordion panel appears.<br>CSS variable: --wm-accordion-border-width"}},"style":{"value":"{border.style.solid}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of the accordion component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-accordion-border-style"}},"color":{"value":"#eeeeee","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the accordion component. This determines what color the border around the accordion panel appears in.<br>CSS variable: --wm-accordion-border-color"}},"radius":{"value":"6px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the accordion component. This makes the accordion appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-accordion-border-radius"}}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the accordion component. This is the main background color that appears behind all accordion content.<br>CSS variable: --wm-accordion-background-color"}},"text":{"color":{"value":"#333333","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the accordion content. This determines what color the text within the accordion appears in.<br>CSS variable: --wm-accordion-text-color"}},"font-size":{"value":"18px","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text in the accordion. This affects how large the accordion text appears.<br>CSS variable: --wm-accordion-text-font-size"}}},"header":{"border":{"bottom-width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the bottom border thickness of the accordion header. This determines how thick the border at the bottom of the header appears.<br>CSS variable: --wm-accordion-header-border-bottom-width"}},"color":{"value":"#333333","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the accordion header. This determines what color the border around the header appears in.<br>CSS variable: --wm-accordion-header-border-color"}}},"background-color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the accordion header. This is the background color that appears behind the header content.<br>CSS variable: --wm-accordion-header-background-color"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Sets the internal spacing inside the accordion header. This creates breathing room around the header content.<br>CSS variable: --wm-accordion-header-padding"}},"subtitle":{"font-size":{"value":"14px","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the subtitle text in the accordion header. This text is typically smaller than the main heading to create a visual hierarchy.<br>CSS variable: --wm-accordion-header-subtitle-font-size"}},"margin-top":{"value":"8px","type":"space","attributes":{"subtype":"space","description":"Controls the top margin of the accordion header subtitle. This creates spacing above the subtitle text.<br>CSS variable: --wm-accordion-header-subtitle-margin-top"}}}},"icon":{"root":{"width":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of the accordion icon root container. This determines how wide the icon container appears.<br>CSS variable: --wm-accordion-icon-root-width"}},"height":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of the accordion icon root container. This determines how tall the icon container appears.<br>CSS variable: --wm-accordion-icon-root-height"}},"border":{"radius":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"radius","description":"Controls the border radius of the accordion icon root container. This makes the icon container appear with rounded corners.<br>CSS variable: --wm-accordion-icon-root-border-radius"}}}},"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the accordion icon. This determines what color the icon appears in.<br>CSS variable: --wm-accordion-icon-color"}},"font":{"size":{"value":"{spacer.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of the accordion icon. This affects how large the icon appears.<br>CSS variable: --wm-accordion-icon-font-size"}},"weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the thickness/boldness of the accordion icon. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-accordion-icon-font-weight"}}}},"badge":{"font-size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text in the accordion badge. This affects how large the badge text appears.<br>CSS variable: --wm-accordion-badge-font-size"}},"margin-right":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right margin of the accordion badge. This creates spacing to the right of the badge.<br>CSS variable: --wm-accordion-badge-margin-right"}},"width":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of the accordion badge. This determines how wide the badge appears.<br>CSS variable: --wm-accordion-badge-width"}},"height":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of the accordion badge. This determines how tall the badge appears.<br>CSS variable: --wm-accordion-badge-height"}},"border":{"radius":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"radius","description":"Controls the border radius of the accordion badge. This makes the badge appear with rounded corners.<br>CSS variable: --wm-accordion-badge-border-radius"}},"width":{"value":"2px","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border thickness of the accordion badge. This determines how thick the border around the badge appears.<br>CSS variable: --wm-accordion-badge-border-width"}},"color":{"value":"#cccccc","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the accordion badge. This determines what color the border around the badge appears in.<br>CSS variable: --wm-accordion-badge-border-color"}}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the accordion badge of default type. This is the background color that appears behind the badge content.<br>CSS variable: --wm-accordion-badge-background-color"}},"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the accordion badge. This determines what color the badge text appears in.<br>CSS variable: --wm-accordion-badge-color"}}},"title":{"icon":{"color":{"value":"#333333","type":"color","attributes":{"subtype":"color","description":"Sets the icon color of the accordion title. This determines what color the icon within the accordion title appears in.<br>CSS variable: --wm-accordion-title-icon-color"}},"size":{"value":"18px","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of the icon in the accordion title. This affects how large the accordion title icon appears.<br>CSS variable: --wm-accordion-title-icon-size"}}}},"states":{"active":{"header":{"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the active accordion header. This determines what color the border appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-header-border-color"}}},"background-color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the active accordion header. This is the background color that appears when the accordion is expanded.<br>CSS variable: --wm-accordion-active-header-background-color"}}},"text":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the active accordion content. This determines what color the text appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-text-color"}}},"title":{"icon":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the icon color of the active accordion title. This determines what color the icon appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-title-icon-color"}}}},"icon":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the active accordion icon. This determines what color the icon appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-icon-color"}}},"badge":{"border":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the active accordion badge. This determines what color the border appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-badge-border-color"}}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the active accordion badge of default type. This is the background color that appears behind the badge content.<br>CSS variable: --wm-accordion-badge-background-color"}},"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the active accordion badge. This determines what color the badge text appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-badge-color"}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"accordion":{"meta":{"mapping":{"selector":{"mobile":".app-accordion"},"states":{"active":{"selector":{"mobile":"-active-header, .app-accordion-active-header-title, .app-accordion-header-collapse-icon, .app-accordion-active-header-badge, .app-accordion-active-title-icon"}}}}},"mapping":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of the accordion component. This determines how wide the accordion panel appears on the screen.<br>CSS variable: --wm-accordion-width"}},"border":{"width":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border thickness of the accordion component. This determines how thick the border around the accordion panel appears.<br>CSS variable: --wm-accordion-border-width"}},"style":{"value":"{border.style.solid}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of the accordion component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-accordion-border-style"}},"color":{"value":"#eeeeee","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the accordion component. This determines what color the border around the accordion panel appears in.<br>CSS variable: --wm-accordion-border-color"}},"radius":{"value":"6px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the accordion component. This makes the accordion appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-accordion-border-radius"}}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the accordion component. This is the main background color that appears behind all accordion content.<br>CSS variable: --wm-accordion-background-color"}},"text":{"color":{"value":"#333333","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the accordion content. This determines what color the text within the accordion appears in.<br>CSS variable: --wm-accordion-text-color"}},"font-size":{"value":"18px","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text in the accordion. This affects how large the accordion text appears.<br>CSS variable: --wm-accordion-text-font-size"}}},"header":{"border":{"bottom-width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the bottom border thickness of the accordion header. This determines how thick the border at the bottom of the header appears.<br>CSS variable: --wm-accordion-header-border-bottom-width"}},"color":{"value":"#333333","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the accordion header. This determines what color the border around the header appears in.<br>CSS variable: --wm-accordion-header-border-color"}}},"background-color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the accordion header. This is the background color that appears behind the header content.<br>CSS variable: --wm-accordion-header-background-color"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Sets the internal spacing inside the accordion header. This creates breathing room around the header content.<br>CSS variable: --wm-accordion-header-padding"}},"subtitle":{"font-size":{"value":"14px","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the subtitle text in the accordion header. This text is typically smaller than the main heading to create a visual hierarchy.<br>CSS variable: --wm-accordion-header-subtitle-font-size"}},"margin-top":{"value":"8px","type":"space","attributes":{"subtype":"space","description":"Controls the top margin of the accordion header subtitle. This creates spacing above the subtitle text.<br>CSS variable: --wm-accordion-header-subtitle-margin-top"}}}},"icon":{"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the accordion icon. This determines what color the icon appears in.<br>CSS variable: --wm-accordion-icon-color"}},"font":{"size":{"value":"{spacer.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of the accordion icon. This affects how large the icon appears.<br>CSS variable: --wm-accordion-icon-font-size"}},"weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the thickness/boldness of the accordion icon. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-accordion-icon-font-weight"}}}},"badge":{"font-size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text in the accordion badge. This affects how large the badge text appears.<br>CSS variable: --wm-accordion-badge-font-size"}},"margin-right":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right margin of the accordion badge. This creates spacing to the right of the badge.<br>CSS variable: --wm-accordion-badge-margin-right"}},"width":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of the accordion badge. This determines how wide the badge appears.<br>CSS variable: --wm-accordion-badge-width"}},"height":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of the accordion badge. This determines how tall the badge appears.<br>CSS variable: --wm-accordion-badge-height"}},"border":{"radius":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"radius","description":"Controls the border radius of the accordion badge. This makes the badge appear with rounded corners.<br>CSS variable: --wm-accordion-badge-border-radius"}},"width":{"value":"2px","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border thickness of the accordion badge. This determines how thick the border around the badge appears.<br>CSS variable: --wm-accordion-badge-border-width"}},"color":{"value":"#cccccc","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the accordion badge. This determines what color the border around the badge appears in.<br>CSS variable: --wm-accordion-badge-border-color"}}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the accordion badge of default type. This is the background color that appears behind the badge content.<br>CSS variable: --wm-accordion-badge-background-color"}},"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the accordion badge. This determines what color the badge text appears in.<br>CSS variable: --wm-accordion-badge-color"}}},"title":{"icon":{"color":{"value":"#333333","type":"color","attributes":{"subtype":"color","description":"Sets the icon color of the accordion title. This determines what color the icon within the accordion title appears in.<br>CSS variable: --wm-accordion-title-icon-color"}},"size":{"value":"18px","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of the icon in the accordion title. This affects how large the accordion title icon appears.<br>CSS variable: --wm-accordion-title-icon-size"}}}},"states":{"active":{"header":{"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the active accordion header. This determines what color the border appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-header-border-color"}}},"background-color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the active accordion header. This is the background color that appears when the accordion is expanded.<br>CSS variable: --wm-accordion-active-header-background-color"}}},"text":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the active accordion content. This determines what color the text appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-text-color"}}},"title":{"icon":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the icon color of the active accordion title. This determines what color the icon appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-title-icon-color"}}}},"icon":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the active accordion icon. This determines what color the icon appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-icon-color"}}},"badge":{"border":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the active accordion badge. This determines what color the border appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-badge-border-color"}}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the active accordion badge of default type. This is the background color that appears behind the badge content.<br>CSS variable: --wm-accordion-badge-background-color"}},"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the active accordion badge. This determines what color the badge text appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-badge-color"}}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_anchor_anchor_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_anchor_anchor_json"],{
 
-/***/ "./src/tokens/mobile/components/anchor/anchor.json":
+/***/ "./src/tokens/mobile/components/anchor/anchor.json"
 /*!*********************************************************!*\
   !*** ./src/tokens/mobile/components/anchor/anchor.json ***!
   \*********************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"anchor":{"meta":{"mapping":{"selector":{"web":".app-anchor","mobile":".app-anchor"}}},"mapping":{"color":{"@":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of anchor links (clickable text elements that navigate to other pages or sections). This determines what color the anchor text appears in.<br>CSS variable: --wm-anchor-color"}}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text in anchor links. This affects how large the anchor text appears.<br>CSS variable: --wm-anchor-font-size"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for anchor link text. This determines whether the anchor text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-anchor-font-family"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the anchor link text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-anchor-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when anchor link text wraps to multiple lines. This ensures proper spacing for the anchor text.<br>CSS variable: --wm-anchor-line-height"}},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in anchor link text. This can help make the anchor text more readable and properly spaced.<br>CSS variable: --wm-anchor-letter-spacing"}},"text-transform":{"value":"none","type":"radius","attributes":{"subtype":"text-transform","description":"Controls text transformation for anchor link text. \'none\' keeps the original case, \'uppercase\' makes all text uppercase, \'lowercase\' makes all text lowercase, and \'capitalize\' capitalizes the first letter of each word.<br>CSS variable: --wm-anchor-text-transform"}},"text":{"decoration":{"@":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration","description":"Controls the text decoration (underline, overline, line-through) for anchor links. \'none\' removes all decorations, \'underline\' adds an underline, \'overline\' adds a line above, and \'line-through\' adds a line through the text.<br>CSS variable: --wm-anchor-text-decoration"}}}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Sets spacing between icon and text content in anchor links. This creates visual separation between the icon and the anchor text.<br>CSS variable: --wm-anchor-gap"}},"icon":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons in anchor links. This affects how large the icon appears next to the anchor text.<br>CSS variable: --wm-anchor-icon-size"}}},"image":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of images in anchor links. This affects how large the image appears next to the anchor text.<br>CSS variable: --wm-anchor-image-size"}},"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of images in anchor links. This makes the image appear with rounded corners.<br>CSS variable: --wm-anchor-image-radius"}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"anchor":{"meta":{"mapping":{"selector":{"web":".app-anchor","mobile":".app-anchor"}}},"mapping":{"color":{"@":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of anchor links (clickable text elements that navigate to other pages or sections). This determines what color the anchor text appears in.<br>CSS variable: --wm-anchor-color"}}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text in anchor links. This affects how large the anchor text appears.<br>CSS variable: --wm-anchor-font-size"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for anchor link text. This determines whether the anchor text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-anchor-font-family"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the anchor link text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-anchor-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when anchor link text wraps to multiple lines. This ensures proper spacing for the anchor text.<br>CSS variable: --wm-anchor-line-height"}},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in anchor link text. This can help make the anchor text more readable and properly spaced.<br>CSS variable: --wm-anchor-letter-spacing"}},"text-transform":{"value":"none","type":"radius","attributes":{"subtype":"text-transform","description":"Controls text transformation for anchor link text. \'none\' keeps the original case, \'uppercase\' makes all text uppercase, \'lowercase\' makes all text lowercase, and \'capitalize\' capitalizes the first letter of each word.<br>CSS variable: --wm-anchor-text-transform"}},"text":{"decoration":{"@":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration","description":"Controls the text decoration (underline, overline, line-through) for anchor links. \'none\' removes all decorations, \'underline\' adds an underline, \'overline\' adds a line above, and \'line-through\' adds a line through the text.<br>CSS variable: --wm-anchor-text-decoration"}}},"padding":{"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"padding-left","description":"Controls the left padding (spacing) inside anchor link text. This creates space between the left edge of the text and its container, making the anchor text more comfortable to read and click.<br>CSS variable: --wm-anchor-text-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"padding-right","description":"Controls the right padding (spacing) inside anchor link text. This creates space between the right edge of the text and its container, making the anchor text more comfortable to read and click.<br>CSS variable: --wm-anchor-text-padding-right"}}}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Sets spacing between icon and text content in anchor links. This creates visual separation between the icon and the anchor text.<br>CSS variable: --wm-anchor-gap"}},"icon":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons in anchor links. This affects how large the icon appears next to the anchor text.<br>CSS variable: --wm-anchor-icon-size"}}},"image":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of images in anchor links. This affects how large the image appears next to the anchor text.<br>CSS variable: --wm-anchor-image-size"}},"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of images in anchor links. This makes the image appear with rounded corners.<br>CSS variable: --wm-anchor-image-radius"}}}},"appearances":{}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_audio_audio_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_audio_audio_json"],{
 
-/***/ "./src/tokens/mobile/components/audio/audio.json":
+/***/ "./src/tokens/mobile/components/audio/audio.json"
 /*!*******************************************************!*\
   !*** ./src/tokens/mobile/components/audio/audio.json ***!
   \*******************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"audio":{"mapping":{"width":{"value":"300px","type":"space","attributes":{"subtype":"space","description":"Controls the width of the audio component. This determines how wide the audio player appears on the screen.<br>CSS variable: --wm-audio-width"}}},"appearances":{}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_badge_badge_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_badge_badge_json"],{
 
-/***/ "./src/tokens/mobile/components/badge/badge.json":
+/***/ "./src/tokens/mobile/components/badge/badge.json"
 /*!*******************************************************!*\
   !*** ./src/tokens/mobile/components/badge/badge.json ***!
   \*******************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"badge":{"background":{"value":"{color.surface.variant.@.value}","type":"color"},"color":{"value":"{color.on-surface.@.value}","type":"color"},"min-height":{"value":"20px","type":"space"},"inline":{"padding":{"value":"6px","type":"space"}},"block":{"padding":{"value":"{space.1.value}","type":"space"}},"radius":{"value":"{radius.lg.value}","type":"radius"},"font-family":{"value":"{body.small.font-family.value}","type":"font"},"font-size":{"value":"{body.small.font-size.value}","type":"font"},"font-weight":{"value":"{font.weight.700.value}","type":"font"},"line-height":{"value":"1","type":"font"},"letter-spacing":{"value":"{body.small.letter-spacing.value}","type":"font"},"primary":{"@":{"value":"{color.primary.@.value}","type":"color"},"background":{"value":"{color.primary.container.@.value}","type":"color"}},"info":{"@":{"value":"{color.info.@.value}","type":"color"},"background":{"value":"{color.info.container.@.value}","type":"color"}},"success":{"@":{"value":"{color.success.@.value}","type":"color"},"background":{"value":"{color.success.container.@.value}","type":"color"}},"warning":{"@":{"value":"{color.warning.@.value}","type":"color"},"background":{"value":"{color.warning.container.@.value}","type":"color"}},"error":{"@":{"value":"{color.error.@.value}","type":"color"},"background":{"value":"{color.error.container.@.value}","type":"color"}},"secondary":{"@":{"value":"{color.secondary.@.value}","type":"color"},"background":{"value":"{color.secondary.container.@.value}","type":"color"}},"tertiary":{"@":{"value":"{color.tertiary.@.value}","type":"color"},"background":{"value":"{color.tertiary.container.@.value}","type":"color"}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_barcodescanner_barcodescanner_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_barcodescanner_barcodescanner_json"],{
 
-/***/ "./src/tokens/mobile/components/barcodescanner/barcodescanner.json":
+/***/ "./src/tokens/mobile/components/barcodescanner/barcodescanner.json"
 /*!*************************************************************************!*\
   !*** ./src/tokens/mobile/components/barcodescanner/barcodescanner.json ***!
   \*************************************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"barcodescanner":{"meta":{"mapping":{"selector":{"mobile":".app-barcodescanner"}}},"mapping":{"min":{"height":{"value":"30px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of the barcode scanner component. This determines the minimum vertical space the component occupies.<br>CSS variable: --wm-barcodescanner-min-height"}},"width":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of the barcode scanner component. This determines the minimum horizontal space the component occupies.<br>CSS variable: --wm-barcodescanner-min-width"}}},"text":{"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the barcode scanner component. This determines what color the text appears in.<br>CSS variable: --wm-barcodescanner-text-color"}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text in the barcode scanner component. This affects how large the text appears.<br>CSS variable: --wm-barcodescanner-text-font-size"}}},"padding":{"left":{"value":"{space.0.value}","type":"font","attributes":{"subtype":"space","description":"Sets the left padding of the text in the barcode scanner component. This creates spacing to the left of the text.<br>CSS variable: --wm-barcodescanner-text-padding-left"}}}},"icon":{"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the icon in the barcode scanner component. This determines what color the icon appears in.<br>CSS variable: --wm-barcodescanner-icon-color"}},"font":{"size":{"value":"{space.5.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of the icon in the barcode scanner component. This affects how large the icon appears.<br>CSS variable: --wm-barcodescanner-icon-font-size"}}}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the barcode scanner component. This is the main background color that appears behind all content.<br>CSS variable: --wm-barcodescanner-background"}},"padding":{"top":{"value":"10px","type":"space","attributes":{"subtype":"space","description":"Sets the top padding of the barcode scanner component. This creates spacing at the top of the component.<br>CSS variable: --wm-barcodescanner-padding-top"}},"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Sets the left padding of the barcode scanner component. This creates spacing on the left side of the component.<br>CSS variable: --wm-barcodescanner-padding-left"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Sets the bottom padding of the barcode scanner component. This creates spacing at the bottom of the component.<br>CSS variable: --wm-barcodescanner-padding-bottom"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Sets the right padding of the barcode scanner component. This creates spacing on the right side of the component.<br>CSS variable: --wm-barcodescanner-padding-right"}}},"border":{"width":{"value":"{border.width.base.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border thickness of the barcode scanner component. This determines how thick the border around the component appears.<br>CSS variable: --wm-barcodescanner-border-width"}},"style":{"value":"{border.style.solid.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of the barcode scanner component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-barcodescanner-border-style"}},"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the barcode scanner component. This determines what color the border around the component appears in.<br>CSS variable: --wm-barcodescanner-border-color"}},"radius":{"value":"{space.5.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the barcode scanner component. This makes the component appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-barcodescanner-border-radius"}}},"ripple":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color for the barcode scanner component. This determines what color appears when the component is interacted with.<br>CSS variable: --wm-barcodescanner-ripple-color"}}}},"appearances":{}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_bottomsheet_bottomsheet_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_bottomsheet_bottomsheet_json"],{
 
-/***/ "./src/tokens/mobile/components/bottomsheet/bottomsheet.json":
+/***/ "./src/tokens/mobile/components/bottomsheet/bottomsheet.json"
 /*!*******************************************************************!*\
   !*** ./src/tokens/mobile/components/bottomsheet/bottomsheet.json ***!
   \*******************************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"bottomsheet":{"meta":{"mapping":{"selector":{"mobile":".app-bottomsheet"}}},"mapping":{"backdrop":{"background":{"value":"rgba(0,0,0,0.1)","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the bottom sheet backdrop. This is the semi-transparent overlay that appears behind the bottom sheet when it is open.<br>CSS variable: --wm-bottomsheet-backdrop-background"}}},"background":{"value":"{color.surface.bright.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the bottom sheet component. This is the main background color that appears behind all bottom sheet content.<br>CSS variable: --wm-bottomsheet-background"}},"border":{"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the bottom sheet component. This makes the bottom sheet appear with rounded corners at the top.<br>CSS variable: --wm-bottomsheet-border-radius"}},"width":{"value":"1","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border thickness of the bottom sheet component. This determines how thick the border around the bottom sheet appears.<br>CSS variable: --wm-bottomsheet-border-width"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the bottom sheet component. This determines what color the border around the bottom sheet appears in.<br>CSS variable: --wm-bottomsheet-border-color"}}},"margin":{"left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left margin of the bottom sheet component. This creates spacing on the left side of the bottom sheet.<br>CSS variable: --wm-bottomsheet-margin-left"}},"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right margin of the bottom sheet component. This creates spacing on the right side of the bottom sheet.<br>CSS variable: --wm-bottomsheet-margin-right"}}},"handle":{"background":{"value":"{color.surface.bright.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the bottom sheet drag handle. This is the background color that appears behind the drag handle area.<br>CSS variable: --wm-bottomsheet-handle-background"}},"icon":{"width":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of the drag handle icon in the bottom sheet. This determines how wide the drag handle icon appears.<br>CSS variable: --wm-bottomsheet-handle-icon-width"}},"height":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of the drag handle icon in the bottom sheet. This determines how tall the drag handle icon appears.<br>CSS variable: --wm-bottomsheet-handle-icon-height"}},"background":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the drag handle icon in the bottom sheet. This determines what color the drag handle icon appears in.<br>CSS variable: --wm-bottomsheet-handle-icon-background"}}},"padding":{"top":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Sets the top padding of the bottom sheet drag handle. This creates spacing at the top of the drag handle area.<br>CSS variable: --wm-bottomsheet-handle-padding-top"}},"bottom":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Sets the bottom padding of the bottom sheet drag handle. This creates spacing at the bottom of the drag handle area.<br>CSS variable: --wm-bottomsheet-handle-padding-bottom"}}},"border":{"width":{"value":"1","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border thickness of the bottom sheet drag handle. This determines how thick the border around the drag handle appears.<br>CSS variable: --wm-bottomsheet-handle-border-width"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the bottom sheet drag handle. This determines what color the border around the drag handle appears in.<br>CSS variable: --wm-bottomsheet-handle-border-color"}}}},"content":{"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Sets the top padding of the bottom sheet content area. This creates spacing at the top of the content.<br>CSS variable: --wm-bottomsheet-content-padding-top"}},"bottom":{"value":"{space.5.value}","type":"space","attributes":{"subtype":"space","description":"Sets the bottom padding of the bottom sheet content area. This creates spacing at the bottom of the content.<br>CSS variable: --wm-bottomsheet-content-padding-bottom"}},"left":{"value":"{space.5.value}","type":"space","attributes":{"subtype":"space","description":"Sets the left padding of the bottom sheet content area. This creates spacing on the left side of the content.<br>CSS variable: --wm-bottomsheet-content-padding-left"}},"right":{"value":"{space.5.value}","type":"space","attributes":{"subtype":"space","description":"Sets the right padding of the bottom sheet content area. This creates spacing on the right side of the content.<br>CSS variable: --wm-bottomsheet-content-padding-right"}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"bottomsheet":{"meta":{"mapping":{"selector":{"mobile":".app-bottomsheet"}}},"mapping":{"backdrop":{"background":{"value":"rgba(0,0,0,0.1)","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the bottom sheet backdrop. This is the semi-transparent overlay that appears behind the bottom sheet when it is open.<br>CSS variable: --wm-bottomsheet-backdrop-background"}}},"background":{"value":"{color.surface.bright.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the bottom sheet component. This is the main background color that appears behind all bottom sheet content.<br>CSS variable: --wm-bottomsheet-background"}},"border":{"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the bottom sheet component. This makes the bottom sheet appear with rounded corners at the top.<br>CSS variable: --wm-bottomsheet-border-radius"}},"width":{"top":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border thickness of the bottom sheet component. This determines how thick the border around the bottom sheet appears.<br>CSS variable: --wm-bottomsheet-border-width-top"}},"bottom":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border thickness of the bottom sheet component. This determines how thick the border around the bottom sheet appears.<br>CSS variable: --wm-bottomsheet-border-width-bottom"}},"left":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border thickness of the bottom sheet component. This determines how thick the border around the bottom sheet appears.<br>CSS variable: --wm-bottomsheet-border-width-left"}},"right":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border thickness of the bottom sheet component. This determines how thick the border around the bottom sheet appears.<br>CSS variable: --wm-bottomsheet-border-width-right"}}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the bottom sheet component. This determines what color the border around the bottom sheet appears in.<br>CSS variable: --wm-bottomsheet-border-color"}},"style":{"value":"{border.style.base.value}","type":"border","attributes":{"subtype":"border-style","description":"Sets the border style of the bottom sheet component. This determines what style the border around the bottom sheet appears in.<br>CSS variable: --wm-bottomsheet-border-style"}}},"margin":{"left":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left margin of the bottom sheet component. This creates spacing on the left side of the bottom sheet.<br>CSS variable: --wm-bottomsheet-margin-left"}},"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right margin of the bottom sheet component. This creates spacing on the right side of the bottom sheet.<br>CSS variable: --wm-bottomsheet-margin-right"}}},"handle":{"background":{"value":"{color.surface.bright.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the bottom sheet drag handle. This is the background color that appears behind the drag handle area.<br>CSS variable: --wm-bottomsheet-handle-background"}},"icon":{"width":{"value":"{space.9.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of the drag handle icon in the bottom sheet. This determines how wide the drag handle icon appears.<br>CSS variable: --wm-bottomsheet-handle-icon-width"}},"height":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of the drag handle icon in the bottom sheet. This determines how tall the drag handle icon appears.<br>CSS variable: --wm-bottomsheet-handle-icon-height"}},"background":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the drag handle icon in the bottom sheet. This determines what color the drag handle icon appears in.<br>CSS variable: --wm-bottomsheet-handle-icon-background"}}},"padding":{"top":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Sets the top padding of the bottom sheet drag handle. This creates spacing at the top of the drag handle area.<br>CSS variable: --wm-bottomsheet-handle-padding-top"}},"bottom":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Sets the bottom padding of the bottom sheet drag handle. This creates spacing at the bottom of the drag handle area.<br>CSS variable: --wm-bottomsheet-handle-padding-bottom"}}},"border":{"width":{"value":"1","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border thickness of the bottom sheet drag handle. This determines how thick the border around the drag handle appears.<br>CSS variable: --wm-bottomsheet-handle-border-width"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the bottom sheet drag handle. This determines what color the border around the drag handle appears in.<br>CSS variable: --wm-bottomsheet-handle-border-color"}}}},"content":{"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Sets the top padding of the bottom sheet content area. This creates spacing at the top of the content.<br>CSS variable: --wm-bottomsheet-content-padding-top"}},"bottom":{"value":"{space.5.value}","type":"space","attributes":{"subtype":"space","description":"Sets the bottom padding of the bottom sheet content area. This creates spacing at the bottom of the content.<br>CSS variable: --wm-bottomsheet-content-padding-bottom"}},"left":{"value":"{space.5.value}","type":"space","attributes":{"subtype":"space","description":"Sets the left padding of the bottom sheet content area. This creates spacing on the left side of the content.<br>CSS variable: --wm-bottomsheet-content-padding-left"}},"right":{"value":"{space.5.value}","type":"space","attributes":{"subtype":"space","description":"Sets the right padding of the bottom sheet content area. This creates spacing on the right side of the content.<br>CSS variable: --wm-bottomsheet-content-padding-right"}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_breadcrumb_breadcrumb_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_breadcrumb_breadcrumb_json"],{
 
-/***/ "./src/tokens/mobile/components/breadcrumb/breadcrumb.json":
+/***/ "./src/tokens/mobile/components/breadcrumb/breadcrumb.json"
 /*!*****************************************************************!*\
   !*** ./src/tokens/mobile/components/breadcrumb/breadcrumb.json ***!
   \*****************************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"breadcrumb":{"gap":{"value":"{space.1.value}","type":"space"},"item":{"gap":{"@":{"value":"{space.1.value}","type":"space"}},"font-size":{"value":"{body.large.font-size.value}","type":"font"},"font-family":{"value":"{body.large.font-family.value}","type":"font"},"font-weight":{"value":"{body.large.font-weight.value}","type":"font"},"line-height":{"value":"{body.large.line-height.value}","type":"font"},"letter-spacing":{"value":"{body.large.letter-spacing.value}","type":"font"},"text-transform":{"value":"none","type":"radius"},"text":{"decoration":{"@":{"value":"none","type":"radius"},"hover":{"value":"underline","type":"radius"},"focus":{"value":"underline","type":"radius"},"active":{"value":"none","type":"radius"}}},"color":{"@":{"value":"{color.primary.@.value}","type":"color"}},"icon":{"color":{"value":"{color.on-background.@.value}","type":"color"},"size":{"value":"{icon.size.sm.value}","type":"space"}},"separator":{"color":{"value":"{color.outline.@.value}","type":"color"},"size":{"value":"{icon.size.sm.value}","type":"space"}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_button-group_button-group_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_button-group_button-group_json"],{
 
-/***/ "./src/tokens/mobile/components/button-group/button-group.json":
+/***/ "./src/tokens/mobile/components/button-group/button-group.json"
 /*!*********************************************************************!*\
   !*** ./src/tokens/mobile/components/button-group/button-group.json ***!
   \*********************************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"button-group":{"meta":{"appearances":{"outlined":{"mapping":{"selector":{"mobile":".app-buttongroup"}}}}},"mapping":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of button groups (connected buttons that appear as a single unit). This makes the outer corners of the button group rounded while keeping the inner buttons connected.<br>CSS variable: --wm-button-group-radius"}},"border":{"width":{"value":"{border.width.base.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around button groups (connected buttons that appear as a single unit). This determines how thick the border lines appear around the button group container.<br>CSS variable: --wm-button-group-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around button groups (connected buttons that appear as a single unit). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<br>CSS variable: --wm-button-group-border-style"}},"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around button groups (connected buttons that appear as a single unit). This determines what color the border lines appear in that outline the button group container.<br>CSS variable: --wm-button-group-border-color"}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_button_button_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_button_button_json"],{
 
-/***/ "./src/tokens/mobile/components/button/button.json":
+/***/ "./src/tokens/mobile/components/button/button.json"
 /*!*********************************************************!*\
   !*** ./src/tokens/mobile/components/button/button.json ***!
   \*********************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"btn":{"meta":{"mapping":{"selector":{"web":".app-button","mobile":".app-button"},"states":{"disabled":{"selector":{"mobile":"-disabled","web":"[disabled]"}}}},"appearances":{}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons (clickable elements that users interact with to perform actions). This is the main background color that appears behind the button text and icons.<br>CSS variable: --wm-btn-background"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of buttons (clickable elements that users interact with to perform actions). This determines what color the button text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-btn-color"}},"cursor":{"value":"pointer","type":"radius","attributes":{"subtype":"cursor","description":"Controls the mouse cursor appearance when hovering over buttons. \'pointer\' shows a hand cursor indicating the button is clickable, \'default\' shows an arrow cursor, and \'not-allowed\' shows a blocked cursor for disabled buttons. This provides visual feedback to users about button interactivity.<br>CSS variable: --wm-btn-cursor"}},"position":{"@":{"value":"relative","type":"space","attributes":{"description":"Controls the positioning method for buttons. \'relative\' positions the button relative to its normal position, \'absolute\' positions it relative to its nearest positioned ancestor, \'fixed\' positions it relative to the viewport, and \'static\' uses the default flow.<br>CSS variable: --wm-btn-position"}},"bottom":{"value":"none","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the bottom edge when buttons are positioned absolutely or fixed. This determines how far from the bottom the button appears. Acceptable values: px, %.<br>CSS variable: --wm-btn-position-bottom"}},"right":{"value":"none","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the right edge when buttons are positioned absolutely or fixed. This determines how far from the right the button appears. Acceptable values: px, %.<br>CSS variable: --wm-btn-position-right"}}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the state layer (the invisible overlay that provides visual feedback during user interactions). When set to 0, the state layer is invisible. Higher values (0-1) make the interaction feedback more visible when users hover, focus, or click the button.<br>CSS variable: --wm-btn-state-layer-opacity"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the button text appears (the text content within clickable buttons). This affects the size of the button text that users see and interact with.<br>CSS variable: --wm-btn-font-size"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for button text (the text content within clickable buttons). This determines whether the button text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-btn-font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the button text appears (the text content within clickable buttons). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-btn-font-weight"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when button text wraps to multiple lines. This ensures proper spacing for the button text displayed in the button.<br>CSS variable: --wm-btn-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 button text (the text content within clickable buttons). This can help make the button text more readable and properly spaced.<br>CSS variable: --wm-btn-letter-spacing"}},"text-transform":{"value":"none","type":"radius","attributes":{"subtype":"text-transform","description":"Controls text transformation for button text (the text content within clickable buttons). \'none\' keeps the original case, \'uppercase\' makes all text uppercase, \'lowercase\' makes all text lowercase, and \'capitalize\' capitalizes the first letter of each word.<br>CSS variable: --wm-btn-text-transform"}},"border":{"width":{"value":"1px","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border thickness.<br>CSS variable: --wm-btn-border-width"}},"style":{"value":"solid","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-btn-border-style"}},"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color.<br>CSS variable: --wm-btn-border-color"}}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners.<br>CSS variable: --wm-btn-radius"}},"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal top spacing between content and border.<br>CSS variable: --wm-btn-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal bottom spacing between content and border.<br>CSS variable: --wm-btn-padding-bottom"}},"left":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal left spacing between content and border.<br>CSS variable: --wm-btn-padding-left"}},"right":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal right spacing between content and border.<br>CSS variable: --wm-btn-padding-right"}}},"min-width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Sets the minimum width.<br>CSS variable: --wm-btn-min-width"}},"height":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls the height.<br>CSS variable: --wm-btn-height"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Sets spacing between icon and text content.<br>CSS variable: --wm-btn-gap"}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect.<br>CSS variable: --wm-btn-shadow"}},"icon-size":{"value":"{icon.size.md.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons.<br>CSS variable: --wm-btn-icon-size"}},"ripple":{"color":{"value":"rgba(255, 255, 255, 0.08)","type":"color","attributes":{"subtype":"color","description":"Sets the color of the ripple effect that appears when users click or tap buttons (the visual feedback animation that spreads from the point of interaction). This determines what color the ripple animation appears in, typically a semi-transparent overlay.<br>CSS variable: --wm-btn-ripple-color"}}},"skeleton":{"width":{"value":"96px","type":"radius","attributes":{"subtype":"space","description":"Controls the width of button skeleton loaders (placeholder elements that appear while button content is loading). This determines how wide the loading placeholder appears. Acceptable units: px, em, rem, %.<br>CSS variable: --wm-btn-skeleton-width"}},"height":{"value":"{space.12.value}","type":"radius","attributes":{"subtype":"space","description":"Controls the height of button skeleton loaders (placeholder elements that appear while button content is loading). This determines how tall the loading placeholder appears. Acceptable units: px, em, rem.<br>CSS variable: --wm-btn-skeleton-height"}}},"states":{"disabled":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). This determines what color the button text appears in when the button is disabled.<br>CSS variable: --wm-btn-color (disabled state)"}},"background":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). This is the background color that appears when the button is disabled.<br>CSS variable: --wm-btn-background (disabled state)"}},"border-color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). This determines what color the border appears in when the button is disabled.<br>CSS variable: --wm-btn-border-color (disabled state)"}},"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). A value of 0.38 makes the buttons appear dimmed to indicate they are disabled. Lower values make them more transparent.<br>CSS variable: --wm-btn-opacity (disabled state)"}},"cursor":{"value":"not-allowed","type":"radius","attributes":{"subtype":"cursor","description":"Controls the mouse cursor appearance when hovering over disabled buttons (when buttons are not interactive and users cannot click them). \'not-allowed\' shows a blocked cursor indicating the button cannot be clicked, providing visual feedback to users about the button\'s disabled state.<br>CSS variable: --wm-btn-cursor (disabled state)"}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). \'none\' removes shadows completely, making disabled buttons appear flat and less prominent.<br>CSS variable: --wm-btn-shadow (disabled state)"}}}}},"appearances":{"filled":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"value":"{color.surface.@.value}","type":"color"},"color":{"value":"{color.on-surface.@.value}","type":"color"},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color"}}},"primary":{"background":{"value":"{color.primary.@.value}","type":"color"},"color":{"value":"{color.on-primary.@.value}","type":"color"},"border":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"secondary":{"background":{"value":"{color.secondary.@.value}","type":"color"},"color":{"value":"{color.on-secondary.@.value}","type":"color"},"border":{"color":{"value":"{color.secondary.@.value}","type":"color"}}},"tertiary":{"background":{"value":"{color.tertiary.@.value}","type":"color"},"color":{"value":"{color.on-tertiary.@.value}","type":"color"},"border":{"color":{"value":"{color.tertiary.@.value}","type":"color"}}},"success":{"background":{"value":"{color.success.@.value}","type":"color"},"color":{"value":"{color.on-success.@.value}","type":"color"},"border":{"color":{"value":"{color.success.@.value}","type":"color"}}},"info":{"background":{"value":"{color.info.@.value}","type":"color"},"color":{"value":"{color.on-info.@.value}","type":"color"},"border":{"color":{"value":"{color.info.@.value}","type":"color"}}},"warning":{"background":{"value":"{color.warning.@.value}","type":"color"},"color":{"value":"{color.on-warning.@.value}","type":"color"},"border":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"danger":{"background":{"value":"{color.error.@.value}","type":"color"},"color":{"value":"{color.on-error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}}}}},"outlined":{"mapping":{"background":{"value":"transparent","type":"color"}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color"},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color"}}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color"},"border":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color"},"border":{"color":{"value":"{color.secondary.@.value}","type":"color"}}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color"},"border":{"color":{"value":"{color.tertiary.@.value}","type":"color"}}},"success":{"color":{"value":"{color.success.@.value}","type":"color"},"border":{"color":{"value":"{color.success.@.value}","type":"color"}}},"info":{"color":{"value":"{color.info.@.value}","type":"color"},"border":{"color":{"value":"{color.info.@.value}","type":"color"}}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color"},"border":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"danger":{"color":{"value":"{color.error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}},"error":{"color":{"value":"{color.error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}}}}},"text":{"mapping":{"background":{"value":"none","type":"color"},"border":{"color":{"value":"transparent","type":"color"}},"padding":{"top":{"value":"{space.2.value}","type":"space"},"bottom":{"value":"{space.2.value}","type":"space"},"left":{"value":"{space.3.value}","type":"space"},"right":{"value":"{space.3.value}","type":"space"}}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color"}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color"}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color"}},"success":{"color":{"value":"{color.success.@.value}","type":"color"}},"info":{"color":{"value":"{color.info.@.value}","type":"color"}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color"}},"danger":{"color":{"value":"{color.error.@.value}","type":"color"}},"error":{"color":{"value":"{color.error.@.value}","type":"color"}}}}},"standard":{"mapping":{"background":{"value":"none","type":"color"},"border":{"color":{"value":"transparent","type":"color"}},"padding":{"top":{"value":"{space.2.value}","type":"space"},"bottom":{"value":"{space.2.value}","type":"space"},"left":{"value":"{space.3.value}","type":"space"},"right":{"value":"{space.3.value}","type":"space"}}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color"}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color"}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color"}},"success":{"color":{"value":"{color.success.@.value}","type":"color"}},"info":{"color":{"value":"{color.info.@.value}","type":"color"}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color"}},"danger":{"color":{"value":"{color.error.@.value}","type":"color"}},"error":{"color":{"value":"{color.error.@.value}","type":"color"}}}}},"icon":{"mapping":{"height":{"value":"40px","type":"space"},"min-width":{"value":"40px","type":"space"},"padding":{"top":{"value":"{space.0.value}","type":"space"},"bottom":{"value":"{space.0.value}","type":"space"},"left":{"value":"{space.0.value}","type":"space"},"right":{"value":"{space.0.value}","type":"space"}},"icon-size":{"value":"{icon.size.md.value}","type":"space"}}},"elevated":{"mapping":{"shadow":{"@":{"value":"{elevation.shadow.1.value}","type":"radius"}}}},"fab":{"mapping":{"position":{"@":{"value":"absolute","type":"space"},"bottom":{"value":"10px","type":"space"},"right":{"value":"10px","type":"space"}},"height":{"value":"56px","type":"space"},"min-width":{"value":"56px","type":"space"},"border":{"radius":{"value":"16px","type":"radius"}},"shadow":{"@":{"value":"{elevation.shadow.1.value}","type":"radius"}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"btn":{"meta":{"mapping":{"selector":{"mobile":".app-button"},"states":{"disabled":{"selector":{"mobile":"-disabled"}}}},"appearances":{}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons (clickable elements that users interact with to perform actions). This is the main background color that appears behind the button text and icons.<br>CSS variable: --wm-btn-background"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of buttons (clickable elements that users interact with to perform actions). This determines what color the button text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-btn-color"}},"cursor":{"value":"pointer","type":"radius","attributes":{"subtype":"cursor","description":"Controls the mouse cursor appearance when hovering over buttons. \'pointer\' shows a hand cursor indicating the button is clickable, \'default\' shows an arrow cursor, and \'not-allowed\' shows a blocked cursor for disabled buttons. This provides visual feedback to users about button interactivity.<br>CSS variable: --wm-btn-cursor"}},"position":{"@":{"value":"relative","type":"space","attributes":{"description":"Controls the positioning method for buttons. \'relative\' positions the button relative to its normal position, \'absolute\' positions it relative to its nearest positioned ancestor, \'fixed\' positions it relative to the viewport, and \'static\' uses the default flow.<br>CSS variable: --wm-btn-position"}},"bottom":{"value":"none","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the bottom edge when buttons are positioned absolutely or fixed. This determines how far from the bottom the button appears. Acceptable values: px, %.<br>CSS variable: --wm-btn-position-bottom"}},"right":{"value":"none","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the right edge when buttons are positioned absolutely or fixed. This determines how far from the right the button appears. Acceptable values: px, %.<br>CSS variable: --wm-btn-position-right"}}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the state layer (the invisible overlay that provides visual feedback during user interactions). When set to 0, the state layer is invisible. Higher values (0-1) make the interaction feedback more visible when users hover, focus, or click the button.<br>CSS variable: --wm-btn-state-layer-opacity"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the button text appears (the text content within clickable buttons). This affects the size of the button text that users see and interact with.<br>CSS variable: --wm-btn-font-size"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for button text (the text content within clickable buttons). This determines whether the button text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-btn-font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the button text appears (the text content within clickable buttons). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-btn-font-weight"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when button text wraps to multiple lines. This ensures proper spacing for the button text displayed in the button.<br>CSS variable: --wm-btn-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 button text (the text content within clickable buttons). This can help make the button text more readable and properly spaced.<br>CSS variable: --wm-btn-letter-spacing"}},"text-transform":{"value":"none","type":"radius","attributes":{"subtype":"text-transform","description":"Controls text transformation for button text (the text content within clickable buttons). \'none\' keeps the original case, \'uppercase\' makes all text uppercase, \'lowercase\' makes all text lowercase, and \'capitalize\' capitalizes the first letter of each word.<br>CSS variable: --wm-btn-text-transform"}},"border":{"width":{"value":"1px","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border thickness.<br>CSS variable: --wm-btn-border-width"}},"style":{"value":"solid","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-btn-border-style"}},"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color.<br>CSS variable: --wm-btn-border-color"}}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners.<br>CSS variable: --wm-btn-radius"}},"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal top spacing between content and border.<br>CSS variable: --wm-btn-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal bottom spacing between content and border.<br>CSS variable: --wm-btn-padding-bottom"}},"left":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal left spacing between content and border.<br>CSS variable: --wm-btn-padding-left"}},"right":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal right spacing between content and border.<br>CSS variable: --wm-btn-padding-right"}}},"min-width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Sets the minimum width.<br>CSS variable: --wm-btn-min-width"}},"height":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls the height.<br>CSS variable: --wm-btn-height"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Sets spacing between icon and text content.<br>CSS variable: --wm-btn-gap"}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect.<br>CSS variable: --wm-btn-shadow"}},"icon-size":{"value":"{icon.size.md.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons.<br>CSS variable: --wm-btn-icon-size"}},"ripple":{"color":{"value":"rgba(255, 255, 255, 0.08)","type":"color","attributes":{"subtype":"color","description":"Sets the color of the ripple effect that appears when users click or tap buttons (the visual feedback animation that spreads from the point of interaction). This determines what color the ripple animation appears in, typically a semi-transparent overlay.<br>CSS variable: --wm-btn-ripple-color"}}},"skeleton":{"width":{"value":"96px","type":"radius","attributes":{"subtype":"space","description":"Controls the width of button skeleton loaders (placeholder elements that appear while button content is loading). This determines how wide the loading placeholder appears. Acceptable units: px, em, rem, %.<br>CSS variable: --wm-btn-skeleton-width"}},"height":{"value":"{space.12.value}","type":"radius","attributes":{"subtype":"space","description":"Controls the height of button skeleton loaders (placeholder elements that appear while button content is loading). This determines how tall the loading placeholder appears. Acceptable units: px, em, rem.<br>CSS variable: --wm-btn-skeleton-height"}}},"states":{"disabled":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). This determines what color the button text appears in when the button is disabled.<br>CSS variable: --wm-btn-color (disabled state)"}},"background":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). This is the background color that appears when the button is disabled.<br>CSS variable: --wm-btn-background (disabled state)"}},"border-color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). This determines what color the border appears in when the button is disabled.<br>CSS variable: --wm-btn-border-color (disabled state)"}},"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). A value of 0.38 makes the buttons appear dimmed to indicate they are disabled. Lower values make them more transparent.<br>CSS variable: --wm-btn-opacity (disabled state)"}},"cursor":{"value":"not-allowed","type":"radius","attributes":{"subtype":"cursor","description":"Controls the mouse cursor appearance when hovering over disabled buttons (when buttons are not interactive and users cannot click them). \'not-allowed\' shows a blocked cursor indicating the button cannot be clicked, providing visual feedback to users about the button\'s disabled state.<br>CSS variable: --wm-btn-cursor (disabled state)"}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around buttons when they are in the disabled state (when buttons are not interactive and users cannot click them). \'none\' removes shadows completely, making disabled buttons appear flat and less prominent.<br>CSS variable: --wm-btn-shadow (disabled state)"}}}}},"appearances":{"filled":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"value":"{color.surface.@.value}","type":"color"},"color":{"value":"{color.on-surface.@.value}","type":"color"},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color"}}},"primary":{"background":{"value":"{color.primary.@.value}","type":"color"},"color":{"value":"{color.on-primary.@.value}","type":"color"},"border":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"secondary":{"background":{"value":"{color.secondary.@.value}","type":"color"},"color":{"value":"{color.on-secondary.@.value}","type":"color"},"border":{"color":{"value":"{color.secondary.@.value}","type":"color"}}},"tertiary":{"background":{"value":"{color.tertiary.@.value}","type":"color"},"color":{"value":"{color.on-tertiary.@.value}","type":"color"},"border":{"color":{"value":"{color.tertiary.@.value}","type":"color"}}},"success":{"background":{"value":"{color.success.@.value}","type":"color"},"color":{"value":"{color.on-success.@.value}","type":"color"},"border":{"color":{"value":"{color.success.@.value}","type":"color"}}},"info":{"background":{"value":"{color.info.@.value}","type":"color"},"color":{"value":"{color.on-info.@.value}","type":"color"},"border":{"color":{"value":"{color.info.@.value}","type":"color"}}},"warning":{"background":{"value":"{color.warning.@.value}","type":"color"},"color":{"value":"{color.on-warning.@.value}","type":"color"},"border":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"danger":{"background":{"value":"{color.error.@.value}","type":"color"},"color":{"value":"{color.on-error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}}}}},"outlined":{"mapping":{"background":{"value":"transparent","type":"color"}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color"},"border":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color"}}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color"},"border":{"color":{"value":"{color.primary.@.value}","type":"color"}}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color"},"border":{"color":{"value":"{color.secondary.@.value}","type":"color"}}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color"},"border":{"color":{"value":"{color.tertiary.@.value}","type":"color"}}},"success":{"color":{"value":"{color.success.@.value}","type":"color"},"border":{"color":{"value":"{color.success.@.value}","type":"color"}}},"info":{"color":{"value":"{color.info.@.value}","type":"color"},"border":{"color":{"value":"{color.info.@.value}","type":"color"}}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color"},"border":{"color":{"value":"{color.warning.@.value}","type":"color"}}},"danger":{"color":{"value":"{color.error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}},"error":{"color":{"value":"{color.error.@.value}","type":"color"},"border":{"color":{"value":"{color.error.@.value}","type":"color"}}}}}},"text":{"mapping":{"background":{"value":"none","type":"color"},"border":{"color":{"value":"transparent","type":"color"}},"padding":{"top":{"value":"{space.2.value}","type":"space"},"bottom":{"value":"{space.2.value}","type":"space"},"left":{"value":"{space.3.value}","type":"space"},"right":{"value":"{space.3.value}","type":"space"}}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color"}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color"}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color"}},"success":{"color":{"value":"{color.success.@.value}","type":"color"}},"info":{"color":{"value":"{color.info.@.value}","type":"color"}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color"}},"danger":{"color":{"value":"{color.error.@.value}","type":"color"}},"error":{"color":{"value":"{color.error.@.value}","type":"color"}}}}},"standard":{"mapping":{"background":{"value":"none","type":"color"},"border":{"color":{"value":"transparent","type":"color"}},"padding":{"top":{"value":"{space.2.value}","type":"space"},"bottom":{"value":"{space.2.value}","type":"space"},"left":{"value":"{space.3.value}","type":"space"},"right":{"value":"{space.3.value}","type":"space"}}},"variantGroups":{"status":{"default":{"color":{"value":"{color.on-surface.@.value}","type":"color"}},"primary":{"color":{"value":"{color.primary.@.value}","type":"color"}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color"}},"success":{"color":{"value":"{color.success.@.value}","type":"color"}},"info":{"color":{"value":"{color.info.@.value}","type":"color"}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color"}},"danger":{"color":{"value":"{color.error.@.value}","type":"color"}},"error":{"color":{"value":"{color.error.@.value}","type":"color"}}}}},"icon":{"mapping":{"height":{"value":"40px","type":"space"},"min-width":{"value":"40px","type":"space"},"padding":{"top":{"value":"{space.0.value}","type":"space"},"bottom":{"value":"{space.0.value}","type":"space"},"left":{"value":"{space.0.value}","type":"space"},"right":{"value":"{space.0.value}","type":"space"}},"icon-size":{"value":"{icon.size.md.value}","type":"space"}}},"elevated":{"mapping":{"shadow":{"@":{"value":"{elevation.shadow.1.value}","type":"radius"}}}},"fab":{"mapping":{"position":{"@":{"value":"absolute","type":"space"},"bottom":{"value":"10px","type":"space"},"right":{"value":"10px","type":"space"}},"height":{"value":"56px","type":"space"},"min-width":{"value":"56px","type":"space"},"border":{"radius":{"value":"16px","type":"radius"}},"shadow":{"@":{"value":"{elevation.shadow.1.value}","type":"radius"}}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_calendar_calendar_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_calendar_calendar_json"],{
 
-/***/ "./src/tokens/mobile/components/calendar/calendar.json":
+/***/ "./src/tokens/mobile/components/calendar/calendar.json"
 /*!*************************************************************!*\
   !*** ./src/tokens/mobile/components/calendar/calendar.json ***!
   \*************************************************************/
-/***/ ((module) => {
+(module) {
 
 module.exports = /*#__PURE__*/JSON.parse('{"calendar":{"meta":{"mapping":{"selector":{"mobile":".app-calendar"}}},"mapping":{"view":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the calendar view. This creates a subtle elevation effect that makes the calendar appear to float above the background.<br>CSS variable: --wm-calendar-view-shadow"}},"border":{"@":{"value":"{color.border.translucent.value}","type":"radius","attributes":{"subtype":"color","description":"Sets the border color of the calendar view. This determines what color the border around the calendar appears in.<br>CSS variable: --wm-calendar-view-border"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of the calendar view. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-calendar-view-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border thickness of the calendar view. This determines how thick the border around the calendar appears.<br>CSS variable: --wm-calendar-view-border-width"}}},"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the calendar view. This makes the calendar appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-calendar-view-radius"}}},"fc":{"button":{"bg-color":{"value":"#2c3e50","type":"color","attributes":{"subtype":"color","description":"Sets the background color of buttons in the calendar component. This determines what color appears behind the button content.<br>CSS variable: --wm-calendar-fc-button-bg-color"}},"border-color":{"value":"#2C3E50","type":"color","attributes":{"subtype":"color","description":"Sets the border color of buttons in the calendar component. This determines what color the border around buttons appears in.<br>CSS variable: --wm-calendar-fc-button-border-color"}}},"header":{"vertical-padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Sets the vertical padding (top and bottom) of the calendar header. This creates spacing above and below the header content.<br>CSS variable: --wm-calendar-fc-header-vertical-padding"}},"horizontal-padding":{"value":"{space.5.value}","type":"space","attributes":{"subtype":"space","description":"Sets the horizontal padding (left and right) of the calendar header. This creates spacing on the sides of the header content.<br>CSS variable: --wm-calendar-fc-header-horizontal-padding"}},"text-font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the thickness/boldness of the text in the calendar header. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-fc-header-text-font-weight"}}},"events-gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Sets spacing between events in the calendar. This creates visual separation between different calendar events.<br>CSS variable: --wm-calendar-fc-events-gap"}},"event":{"background":{"value":"{color.primary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of calendar events. This determines what color appears behind event content.<br>CSS variable: --wm-calendar-fc-event-background"}},"color":{"value":"{color.surface.tint.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of calendar events. This determines what color the event text appears in.<br>CSS variable: --wm-calendar-fc-event-color"}},"today":{"background":{"value":"{color.success.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color for today\'s date in the calendar. This determines what color appears behind today\'s date.<br>CSS variable: --wm-calendar-fc-event-today-background"}},"color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color for today\'s date in the calendar. This determines what color today\'s date text appears in.<br>CSS variable: --wm-calendar-fc-event-today-color"}},"dot":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the dot indicator for today\'s date in the calendar. This determines what color the dot appears in.<br>CSS variable: --wm-calendar-fc-event-today-dot"}}}},"anchor-color":{"value":"#aaaaaa","type":"color","attributes":{"subtype":"color","description":"Sets the color of anchor links in the calendar component. This determines what color calendar navigation links appear in.<br>CSS variable: --wm-calendar-fc-anchor-color"}}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of the calendar component. This determines how wide the calendar appears on the screen.<br>CSS variable: --wm-calendar-width"}},"min-height":{"value":"456px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of the calendar component. This determines the minimum vertical space the calendar occupies.<br>CSS variable: --wm-calendar-min-height"}},"header":{"background-color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the calendar header. This is the background color that appears behind the header content.<br>CSS variable: --wm-calendar-header-background-color"}},"border":{"bottom-width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the bottom border thickness of the calendar header. This determines how thick the border at the bottom of the header appears.<br>CSS variable: --wm-calendar-header-border-bottom-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of the calendar header. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-calendar-header-border-style"}}}},"weekday":{"border":{"bottom-width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the bottom border thickness of weekday labels in the calendar. This determines how thick the border at the bottom of weekday labels appears.<br>CSS variable: --wm-calendar-weekday-border-bottom-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of weekday labels in the calendar. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-calendar-weekday-border-style"}}},"padding":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"space","description":"Sets the padding of weekday labels in the calendar. This creates spacing around the weekday text.<br>CSS variable: --wm-calendar-weekday-padding"}},"text":{"font-family":{"value":"{font.family.plain.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for weekday text in the calendar. This determines whether the weekday text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-calendar-weekday-text-font-family"}},"font-size":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"font-size","description":"Controls the size of the weekday text in the calendar. This affects how large the weekday labels appear.<br>CSS variable: --wm-calendar-weekday-text-font-size"}}}},"day-border-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of calendar day cells. This determines what color the border around each day appears in.<br>CSS variable: --wm-calendar-day-border-color"}},"not-day-of-month":{"color":{"value":"#666666","type":"color","attributes":{"subtype":"color","description":"Sets the text color for days that are not in the current month. This determines what color these days appear in.<br>CSS variable: --wm-calendar-not-day-of-month-color"}},"font-weight":{"value":"normal","type":"font","attributes":{"subtype":"font-weight","description":"Controls the thickness/boldness of text for days that are not in the current month. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-not-day-of-month-font-weight"}}},"event-day1":{"color1":{"value":"rgb(117, 150, 255)","type":"color","attributes":{"subtype":"color","description":"Sets the first color variant for event days in the calendar. This determines what color appears for the first event indicator.<br>CSS variable: --wm-calendar-event-day1-color1"}},"color2":{"value":"rgb(168, 201, 255)","type":"color","attributes":{"subtype":"color","description":"Sets the second color variant for event days in the calendar. This determines what color appears for the second event indicator.<br>CSS variable: --wm-calendar-event-day1-color2"}},"color3":{"value":"rgb(194, 203, 248)","type":"color","attributes":{"subtype":"color","description":"Sets the third color variant for event days in the calendar. This determines what color appears for the third event indicator.<br>CSS variable: --wm-calendar-event-day1-color3"}}},"prev-month-btn-color":{"value":"#aaaaaa","type":"color","attributes":{"subtype":"color","description":"Sets the color of the previous month button in the calendar. This determines what color the navigation button appears in.<br>CSS variable: --wm-calendar-prev-month-btn-color"}},"header-skeleton":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of the calendar header skeleton (loading state). This determines how wide the skeleton loader appears.<br>CSS variable: --wm-calendar-header-skeleton-width"}},"margin-bottom":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin of the calendar header skeleton. This creates spacing below the skeleton loader.<br>CSS variable: --wm-calendar-header-skeleton-margin-bottom"}}}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_camera_camera_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_camera_camera_json"],{
 
-/***/ "./src/tokens/mobile/components/camera/camera.json":
+/***/ "./src/tokens/mobile/components/camera/camera.json"
 /*!*********************************************************!*\
   !*** ./src/tokens/mobile/components/camera/camera.json ***!
   \*********************************************************/
-/***/ ((module) => {
+(module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"camera":{"mapping":{"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the camera component. This is the main background color that appears behind all camera content.<br>CSS variable: --wm-camera-background"}},"color":{"value":"#151420","type":"color","attributes":{"subtype":"color","description":"Sets the text and icon color of the camera component. This determines what color the text and icons appear in.<br>CSS variable: --wm-camera-color"}},"border":{"color":{"value":"#ccc","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the camera component. This determines what color the border around the camera appears in.<br>CSS variable: --wm-camera-border-color"}},"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border thickness of the camera component. This determines how thick the border around the camera appears.<br>CSS variable: --wm-camera-border-width"}},"radius":{"value":"20px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the camera component. This makes the camera appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-camera-border-radius"}}},"min-height":{"value":"30px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of the camera component. This determines the minimum vertical space the camera occupies.<br>CSS variable: --wm-camera-min-height"}},"min-width":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of the camera component. This determines the minimum horizontal space the camera occupies.<br>CSS variable: --wm-camera-min-width"}},"padding":{"value":"0","type":"space","attributes":{"subtype":"space","description":"Sets the internal spacing inside the camera component. This creates breathing room around the camera content.<br>CSS variable: --wm-camera-padding"}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"camera":{"mapping":{"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the camera component. This is the main background color that appears behind all camera content.<br>CSS variable: --wm-camera-background"}},"color":{"value":"#151420","type":"color","attributes":{"subtype":"color","description":"Sets the text and icon color of the camera component. This determines what color the text and icons appear in.<br>CSS variable: --wm-camera-color"}},"border":{"color":{"value":"#ccc","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the camera component. This determines what color the border around the camera appears in.<br>CSS variable: --wm-camera-border-color"}},"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border thickness of the camera component. This determines how thick the border around the camera appears.<br>CSS variable: --wm-camera-border-width"}},"radius":{"value":"20px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the camera component. This makes the camera appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-camera-border-radius"}}},"min-height":{"value":"30px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of the camera component. This determines the minimum vertical space the camera occupies.<br>CSS variable: --wm-camera-min-height"}},"min-width":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of the camera component. This determines the minimum horizontal space the camera occupies.<br>CSS variable: --wm-camera-min-width"}},"padding":{"top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal top spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-top"}},"bottom":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal bottom spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-bottom"}},"left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal left spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-left"}},"right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal right spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-right"}}},"appearances":{}}}}');
 
-/***/ })
+/***/ }
 
 }]);

package/cjs/src_tokens_mobile_components_cards_cards_json.foundation-css.cjs

@@ -1,14 +1,14 @@
 "use strict";
 (this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || []).push([["src_tokens_mobile_components_cards_cards_json"],{
 
-/***/ "./src/tokens/mobile/components/cards/cards.json":
+/***/ "./src/tokens/mobile/components/cards/cards.json"
 /*!*******************************************************!*\
   !*** ./src/tokens/mobile/components/cards/cards.json ***!
   \*******************************************************/
-/***/ ((module) => {
+(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":{"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside card. This creates breathing room in the left side of the card. Acceptable units: px.<br>CSS variable: --wm-card-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside card. This creates breathing room in the right side card. Acceptable units: px.<br>CSS variable: --wm-card-padding-right"}},"top":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside card. This creates breathing room in the card. Acceptable units: px.<br>CSS variable: --wm-card-padding-top"}},"bottom":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside card.This creates breathing room in the card. Acceptable units: px.<br>CSS variable: --wm-card-padding-bottom"}}},"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":{}}}}}');
 
-/***/ })
+/***/ }
 
 }]);