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

package/cjs/src_tokens_mobile_components_accordion-pane_accordion-pane_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_accordion-pane_accordion-pane_json"],{
+
+/***/ "./src/tokens/mobile/components/accordion-pane/accordion-pane.json"
+/*!*************************************************************************!*\
+  !*** ./src/tokens/mobile/components/accordion-pane/accordion-pane.json ***!
+  \*************************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"accordion-pane":{"meta":{"mapping":{"selector":{"mobile":".app-accordionpane"}}},"mapping":{"content":{"background-color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the accordion pane content. This is the background color that appears behind the accordion content.<br>CSS variable: --wm-accordion-content-background-color"}},"padding":{"value":"0px","type":"space","attributes":{"subtype":"space","description":"Sets the internal spacing inside the accordion pane content. This creates breathing room around the content.<br>CSS variable: --wm-accordion-content-padding"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners of the accordion pane content. This makes the content appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-accordion-content-border-radius"}},"style":{"value":"{border.style.solid.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style of the accordion pane content. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-accordion-content-border-style"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border thickness of the accordion pane content. This determines how thick the border around the content appears.<br>CSS variable: --wm-accordion-content-border-width"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the accordion pane content. This determines what color the border around the content appears in.<br>CSS variable: --wm-accordion-content-border-color"}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_accordion_accordion_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_accordion_accordion_json"],{
+
+/***/ "./src/tokens/mobile/components/accordion/accordion.json"
+/*!***************************************************************!*\
+  !*** ./src/tokens/mobile/components/accordion/accordion.json ***!
+  \***************************************************************/
+(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"}},"gap":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the gap between accordion items. This determines the spacing between accordion headers and content.<br>CSS variable: --wm-accordion-gap"}},"border":{"width":{"value":"{border.width.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.value}","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":{"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the accordion title. This is the background color that appears <br>CSS variable: --wm-accordion-active-text-background-color"}}},"border":{"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Sets the border width of the accordion title. This determines the thickness of the border that appears <br>CSS variable: --wm-accordion-active-text-border-width"}},"radius":{"value":"0px","type":"radius","attributes":{"subtype":"radius","description":"Sets the border radius of the accordion title. This determines the roundness of the border that appears <br>CSS variable: --wm-accordion-active-text-border-radius"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the accordion title. This determines what color the border appears <br>CSS variable: --wm-accordion-active-text-border-color"}}},"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":{"width":{"value":"{space.0.value} {space.0.value} {border.width.1.value} {space.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border thickness of the accordion header (bottom only). This determines how thick the border at the bottom of the header appears.<br>CSS variable: --wm-accordion-header-border-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"}}},"pane":{"border":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the accordion pane. This determines what color the border around the pane appears in.<br>CSS variable: --wm-accordion-pane-border-color"}},"radius":{"value":"0px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of the accordion pane. This determines the radius of the border around the pane.<br>CSS variable: --wm-accordion-pane-border-radius"}},"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border thickness of the accordion pane. This determines how thick the border around the pane appears.<br>CSS variable: --wm-accordion-pane-border-width"}},"style":{"value":"{border.style.solid.value}","type":"border","attributes":{"subtype":"border-style","description":"Controls the border style of the accordion pane. This determines the style of the border around the pane.<br>CSS variable: --wm-accordion-pane-border-style"}}}},"title":{"wrapper":{"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding of the accordion title wrapper. This creates spacing around the title content.<br>CSS variable: --wm-accordion-title-wrapper-padding"}},"width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls the width of the accordion title wrapper. This determines the width of the title wrapper.<br>CSS variable: --wm-accordion-title-wrapper-width"}},"border":{"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border thickness of the accordion title wrapper. This determines how thick the border around the title wrapper appears.<br>CSS variable: --wm-accordion-title-wrapper-border-width"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of the accordion title wrapper. This determines the roundness of the border around the title wrapper.<br>CSS variable: --wm-accordion-title-wrapper-border-radius"}},"style":{"value":"{border.style.solid.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of the accordion title wrapper. This determines the style of the border around the title wrapper.<br>CSS variable: --wm-accordion-title-wrapper-border-style"}}},"background-color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the accordion title wrapper. This is the background color that appears behind the title content.<br>CSS variable: --wm-accordion-title-wrapper-background-color"}}},"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":{"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the active accordion content. This is the background color that appears when the accordion is expanded.<br>CSS variable: --wm-accordion-active-text-background-color"}}},"border":{"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Sets the border width of the active accordion content. This determines the thickness of the border that appears when the accordion is expanded.<br>CSS variable: --wm-accordion-active-text-border-width"}},"radius":{"value":"0px","type":"radius","attributes":{"subtype":"radius","description":"Sets the border radius of the active accordion content. This determines the roundness of the border that appears when the accordion is expanded.<br>CSS variable: --wm-accordion-active-text-border-radius"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the active accordion content. This determines what color the border appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-text-border-color"}}},"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

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_anchor_anchor_json"],{
+
+/***/ "./src/tokens/mobile/components/anchor/anchor.json"
+/*!*********************************************************!*\
+  !*** ./src/tokens/mobile/components/anchor/anchor.json ***!
+  \*********************************************************/
+(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"}}},"padding":{"value":"{space.0.value} {space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) inside anchor link text. This creates space around the text, making the anchor text more comfortable to read and click. Acceptable units: px.<br>CSS variable: --wm-anchor-text-padding"}}},"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

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_audio_audio_json"],{
+
+/***/ "./src/tokens/mobile/components/audio/audio.json"
+/*!*******************************************************!*\
+  !*** ./src/tokens/mobile/components/audio/audio.json ***!
+  \*******************************************************/
+(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

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_badge_badge_json"],{
+
+/***/ "./src/tokens/mobile/components/badge/badge.json"
+/*!*******************************************************!*\
+  !*** ./src/tokens/mobile/components/badge/badge.json ***!
+  \*******************************************************/
+(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

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_barcodescanner_barcodescanner_json"],{
+
+/***/ "./src/tokens/mobile/components/barcodescanner/barcodescanner.json"
+/*!*************************************************************************!*\
+  !*** ./src/tokens/mobile/components/barcodescanner/barcodescanner.json ***!
+  \*************************************************************************/
+(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":{"value":"{space.0.value} {space.0.value} {space.0.value} {space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top, right, bottom, left) of the text in the barcode scanner component. This creates spacing around the text. Acceptable units: px.<br>CSS variable: --wm-barcodescanner-text-padding"}}},"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":{"value":"10px {space.2.value} {space.2.value} {space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top, right, bottom, left) of the barcode scanner component. This creates spacing around the component content. Acceptable units: px.<br>CSS variable: --wm-barcodescanner-padding"}},"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

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_bottomsheet_bottomsheet_json"],{
+
+/***/ "./src/tokens/mobile/components/bottomsheet/bottomsheet.json"
+/*!*******************************************************************!*\
+  !*** ./src/tokens/mobile/components/bottomsheet/bottomsheet.json ***!
+  \*******************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"bottomsheet":{"meta":{"mapping":{"selector":{"mobile":".app-bottomsheet"}}},"mapping":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of the bottom sheet. This determines how wide the bottom sheet appears on the screen. Acceptable units: px, %.<br>CSS variable: --wm-bottomsheet-width"}},"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":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border width (all sides) of the bottom sheet component. This determines how thick the border around the bottom sheet appears. Acceptable units: px.<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"}},"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":{"value":"{space.0.value} {space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the margin (top/bottom, left/right) of the bottom sheet component. This creates spacing around the bottom sheet. Acceptable units: px.<br>CSS variable: --wm-bottomsheet-margin"}},"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":{"value":"{space.4.value} {space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) of the bottom sheet drag handle. This creates spacing around the drag handle area. Acceptable units: px.<br>CSS variable: --wm-bottomsheet-handle-padding"}},"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":{"value":"{space.0.value} {space.5.value} {space.5.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top, left/right, bottom) of the bottom sheet content area. This creates spacing around the content. Acceptable units: px.<br>CSS variable: --wm-bottomsheet-content-padding"}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_breadcrumb_breadcrumb_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_breadcrumb_breadcrumb_json"],{
+
+/***/ "./src/tokens/mobile/components/breadcrumb/breadcrumb.json"
+/*!*****************************************************************!*\
+  !*** ./src/tokens/mobile/components/breadcrumb/breadcrumb.json ***!
+  \*****************************************************************/
+(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

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_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 ***!
+  \*********************************************************************/
+(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

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_button_button_json"],{
+
+/***/ "./src/tokens/mobile/components/button/button.json"
+/*!*********************************************************!*\
+  !*** ./src/tokens/mobile/components/button/button.json ***!
+  \*********************************************************/
+(module) {
+
+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"}},"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.pill.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius for rounded corners.<br>CSS variable: --wm-btn-radius"}},"padding":{"value":"{space.0.value} {space.6.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal spacing between content and border (top/bottom, left/right).<br>CSS variable: --wm-btn-padding"}},"min-width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Sets the minimum width.<br>CSS variable: --wm-btn-min-width"}},"min-height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height.<br>CSS variable: --wm-btn-min-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"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the icon color of buttons (clickable elements that users interact with to perform actions). This determines what color the button icon appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-btn-icon-color"}}},"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":{"value":"{space.2.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":{"value":"{space.2.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":{"min-height":{"value":"40px","type":"space"},"min-width":{"value":"40px","type":"space"},"padding":{"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":{"min-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

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_calendar_calendar_json"],{
+
+/***/ "./src/tokens/mobile/components/calendar/calendar.json"
+/*!*************************************************************!*\
+  !*** ./src/tokens/mobile/components/calendar/calendar.json ***!
+  \*************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"calendar":{"meta":{"mapping":{"selector":{"mobile":".app-calendar"}}},"mapping":{"wrapper":{"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Applies a shadow effect around the calendar container to create depth and visual hierarchy. Higher elevation values create more pronounced shadows.<br>CSS variable: --wm-calendar-wrapper-shadow"}},"border":{"color":{"value":"{color.border.translucent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border surrounding the calendar container. This affects the outer edge of the entire calendar component.<br>CSS variable: --wm-calendar-wrapper-border-color"}},"style":{"value":"{border.style.base.value}","type":"border-style","attributes":{"subtype":"border-style","description":"Defines the style of the calendar\'s border. Available options: solid, dashed, dotted, double, groove, ridge, inset, outset, or none.<br>CSS variable: --wm-calendar-wrapper-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the calendar\'s border. Larger values create a more prominent border around the calendar\'s edges.<br>CSS variable: --wm-calendar-wrapper-border-width"}},"radius":{"value":"{radius.md.value}","type":"radius","attributes":{"subtype":"radius","description":"Adjusts the roundness of the calendar\'s corners. Higher values create softer, more rounded corners.<br>CSS variable: --wm-calendar-wrapper-border-radius"}}},"background":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color for the calendar wrapper, providing the base color for the entire calendar component.<br>CSS variable: --wm-calendar-wrapper-background"}}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Sets the width of the calendar component. A value of 100% makes the calendar responsive to its container\'s width.<br>CSS variable: --wm-calendar-width"}},"min-height":{"value":"456px","type":"space","attributes":{"subtype":"space","description":"Sets the minimum height of the calendar, ensuring consistent spacing even with minimal content.<br>CSS variable: --wm-calendar-min-height"}},"header":{"background-color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Defines the background color for the calendar header, which contains navigation controls and title.<br>CSS variable: --wm-calendar-header-background-color"}},"border":{"width":{"value":"{border.width.0.value} {border.width.0.value} {border.width.base.value}","type":"border","attributes":{"subtype":"border-width","description":"Sets the thickness of the border for the calendar header, creating visual separation from the calendar body.<br>CSS variable: --wm-calendar-header-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Specifies the style of the header\'s border. Options: solid, dashed, dotted, double, groove, ridge, inset, outset, or none.<br>CSS variable: --wm-calendar-header-border-style"}},"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Defines the border color for calendar events, affecting the visibility of event content.<br>CSS variable: --wm-calendar-header-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Adjusts the corner rounding for the calendar header, creating a softer or more angular appearance.<br>CSS variable: --wm-calendar-header-border-radius"}}},"padding":{"value":"{space.2.value} {space.0.value}","type":"space","attributes":{"subtype":"space","description":"Sets the padding of the calendar header (top/bottom: space.2, left/right: space.0). Creates space above and below the header content.<br>CSS variable: --wm-calendar-header-padding"}}},"weekday":{"background-color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Defines the background color for the calendar header, which contains navigation controls and title.<br>CSS variable: --wm-calendar-weekday-background-color"}},"border":{"width":{"value":"{border.width.0.value} {border.width.0.value} {border.width.base.value}","type":"border","attributes":{"subtype":"border-width","description":"Sets the thickness of the border below weekday labels, creating visual separation from the calendar days.<br>CSS variable: --wm-calendar-weekday-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Defines the style of the border below weekday labels. Options: solid, dashed, dotted, double, groove, ridge, inset, outset, or none.<br>CSS variable: --wm-calendar-weekday-border-style"}},"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border below weekday labels, creating visual separation from the calendar days.<br>CSS variable: --wm-calendar-weekday-border-color"}}},"padding":{"value":"{radius.xxs.value}","type":"radius","attributes":{"subtype":"space","description":"Controls the spacing around weekday labels, affecting the breathing room between text and container edges.<br>CSS variable: --wm-calendar-weekday-padding"}},"text":{"font-family":{"value":"{font.family.plain.value}","type":"font","attributes":{"subtype":"font-family","description":"Specifies the font family for weekday text, allowing customization of the typography used for day names.<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"}},"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Sets the font weight for day numbers in the calendar, controlling the text thickness. Range: 100-900 or normal/bold.<br>CSS variable: --wm-calendar-weekday-text-font-weight"}},"color":{"value":"#aaaaaa","type":"color","attributes":{"subtype":"color","description":"Defines the color for interactive elements like navigation links within the calendar component.<br>CSS variable: --wm-calendar-weekday-text-color"}}}},"daywrapper":{"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Controls the background color surrounding individual day cells in the calendar grid.<br>CSS variable: --wm-calendar-daywrapper-background"}},"border":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Controls the border color surrounding individual day cells in the calendar grid.<br>CSS variable: --wm-calendar-daywrapper-border-color"}}}},"day":{"color":{"value":"#aaaaaa","type":"color","attributes":{"subtype":"color","description":"Defines the color for interactive elements like navigation links within the calendar component.<br>CSS variable: --wm-calendar-day-color"}},"font-family":{"value":"{font.family.plain.value}","type":"font","attributes":{"subtype":"font-family","description":"Specifies the font family for day text, allowing customization of the typography used for day names.<br>CSS variable: --wm-calendar-day-font-family"}},"font-size":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"font-size","description":"Controls the size of the day text in the calendar. This affects how large the day labels appear.<br>CSS variable: --wm-calendar-day-font-size"}},"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Sets the font weight for header text, controlling how bold or light the text appears. Range: 100-900 or normal/bold.<br>CSS variable: --wm-calendar-day-font-weight"}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Controls the border color surrounding individual day cells in the calendar grid.<br>CSS variable: --wm-calendar-day-background"}}},"not-day-of-month":{"color":{"value":"#666666","type":"color","attributes":{"subtype":"color","description":"Defines the text color for days that fall outside the current month\'s date range, typically shown in a muted tone.<br>CSS variable: --wm-calendar-not-day-of-month-color"}},"font-weight":{"value":"normal","type":"font","attributes":{"subtype":"font-weight","description":"Adjusts the font weight for days outside the current month, typically set lighter than current month days. Range: 100-900 or normal/bold.<br>CSS variable: --wm-calendar-not-day-of-month-font-weight"}}},"month-text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Defines the color for interactive elements like navigation links within the calendar component.<br>CSS variable: --wm-calendar-month-text-color"}},"font-family":{"value":"{font.family.plain.value}","type":"font","attributes":{"subtype":"font-family","description":"Specifies the font family for month text, allowing customization of the typography used for day names.<br>CSS variable: --wm-calendar-month-text-font-family"}},"font-weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Sets the font weight for month text, controlling how bold or light the text appears. Range: 100-900 or normal/bold.<br>CSS variable: --wm-calendar-month-text-font-weight"}}},"year-text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Defines the color for year-text within the calendar component.<br>CSS variable: --wm-calendar-year-text-color"}},"font-family":{"value":"{font.family.plain.value}","type":"font","attributes":{"subtype":"font-family","description":"Specifies the font family for weekday text, allowing customization of the typography used for day names.<br>CSS variable: --wm-calendar-year-text-font-family"}},"font-weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Sets the font weight for year-text, controlling how bold or light the text appears. Range: 100-900 or normal/bold.<br>CSS variable: --wm-calendar-year-text-font-weight"}}},"today":{"background-color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Defines the background color for the today.<br>CSS variable: --wm-calendar-today-background-color"}},"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Defines the color for today within the calendar component.<br>CSS variable: --wm-calendar-today-border-color"}}},"text":{"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Defines the background color for the calendar today.<br>CSS variable: --wm-calendar-today-text-background-color"}}}},"event-day1":{"color1":{"value":"rgb(117, 150, 255)","type":"color","attributes":{"subtype":"color","description":"Defines the primary color for event indicators on calendar days, used to visually mark days with scheduled events.<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"}}},"selected-day":{"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-selected-day-background"}},"text":{"background":{"value":"{color.primary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color for the selected day\'s text container, creating a highlight effect for better visibility.<br>CSS variable: --wm-calendar-selected-day-text-background"}},"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Defines the background color for the calendar header, which contains navigation controls and title.<br>CSS variable: --wm-calendar-selected-day-text-color"}},"font-weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Sets the font weight for selected-day text, controlling how bold or light the text appears. Range: 100-900 or normal/bold.<br>CSS variable: --wm-calendar-selected-day-text-font-weight"}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_camera_camera_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_camera_camera_json"],{
+
+/***/ "./src/tokens/mobile/components/camera/camera.json"
+/*!*********************************************************!*\
+  !*** ./src/tokens/mobile/components/camera/camera.json ***!
+  \*********************************************************/
+(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":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal spacing between camera icon and border (top, right, bottom, left).<br>CSS variable: --wm-camera-padding"}},"appearances":{}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_cards_cards_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_cards_cards_json"],{
+
+/***/ "./src/tokens/mobile/components/cards/cards.json"
+/*!*******************************************************!*\
+  !*** ./src/tokens/mobile/components/cards/cards.json ***!
+  \*******************************************************/
+(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":"Controls the padding (all sides) inside the card header. This creates breathing room around the header content. Acceptable units: px.<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":{}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_carousel_carousel_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_mobile_components_carousel_carousel_json"],{
+
+/***/ "./src/tokens/mobile/components/carousel/carousel.json"
+/*!*************************************************************!*\
+  !*** ./src/tokens/mobile/components/carousel/carousel.json ***!
+  \*************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"carousel":{"meta":{"mapping":{"selector":{"mobile":".app-carousel"},"states":{"active":{"selector":{"mobile":"-active-dot,.app-carousel-active-slide"}}}}},"mapping":{"ripple":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the ripple effect color that appears when users interact with the carousel (tap or click). This creates a visual feedback animation to indicate user interaction. When transparent, no ripple effect is visible.<br>CSS variable: --wm-carousel-ripple-color"}}},"slide":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of individual carousel slides (the content panels that display images, text, or other content). When set to 100%, each slide takes up the full width of the carousel container. Acceptable units: %, px, em, rem.<br>CSS variable: --wm-carousel-slide-width"}},"padding":{"value":"{space.0.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) inside carousel slides. This creates breathing room on the sides of the slide content, preventing content from touching the edges. Acceptable units: px.<br>CSS variable: --wm-carousel-slide-padding"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Corner radius for normal (middle) carousel slides.<br>CSS variable: --wm-carousel-slide-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Border color for normal carousel slides. Transparent hides the outline unless a border width is set with a visible style.<br>CSS variable: --wm-carousel-slide-border-color"}},"width":{"value":"{border.width.base.value}","type":"border","attributes":{"subtype":"border-width","description":"Border width for normal carousel slides.<br>CSS variable: --wm-carousel-slide-border-width"}},"style":{"value":"{border.style.solid}","type":"radius","attributes":{"subtype":"border-style","description":"Border style for normal carousel slides (e.g. solid, dashed).<br>CSS variable: --wm-carousel-slide-border-style"}}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Background of normal (non-first, non-last, non-active) carousel slides.<br>CSS variable: --wm-carousel-slide-background"}}},"first-slide":{"padding":{"value":"{space.0.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Padding inside the first carousel slide. Defaults match normal slides; theme editors can diverge.<br>CSS variable: --wm-carousel-first-slide-padding"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Corner radius for the first carousel slide.<br>CSS variable: --wm-carousel-first-slide-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Border color for the first carousel slide.<br>CSS variable: --wm-carousel-first-slide-border-color"}},"width":{"value":"{border.width.base.value}","type":"border","attributes":{"subtype":"border-width","description":"Border width for the first carousel slide.<br>CSS variable: --wm-carousel-first-slide-border-width"}},"style":{"value":"{border.style.solid}","type":"radius","attributes":{"subtype":"border-style","description":"Border style for the first carousel slide.<br>CSS variable: --wm-carousel-first-slide-border-style"}}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Background of the first carousel slide.<br>CSS variable: --wm-carousel-first-slide-background"}}},"last-slide":{"padding":{"value":"{space.0.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Padding inside the last carousel slide. Defaults match normal slides; theme editors can diverge.<br>CSS variable: --wm-carousel-last-slide-padding"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Corner radius for the last carousel slide.<br>CSS variable: --wm-carousel-last-slide-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Border color for the last carousel slide.<br>CSS variable: --wm-carousel-last-slide-border-color"}},"width":{"value":"{border.width.base.value}","type":"border","attributes":{"subtype":"border-width","description":"Border width for the last carousel slide.<br>CSS variable: --wm-carousel-last-slide-border-width"}},"style":{"value":"{border.style.solid}","type":"radius","attributes":{"subtype":"border-style","description":"Border style for the last carousel slide.<br>CSS variable: --wm-carousel-last-slide-border-style"}}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Background of the last carousel slide.<br>CSS variable: --wm-carousel-last-slide-background"}}},"prev-btn":{"height":{"value":"{space.12.value}","type":"space","attributes":{"subtype":"space","description":"Height of the previous-slide control (left arrow). Larger values make the control easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-prev-btn-height"}},"width":{"value":"{space.12.value}","type":"space","attributes":{"subtype":"space","description":"Width of the previous-slide control (left arrow). Larger values make the control easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-prev-btn-width"}},"border":{"radius":{"value":"48px","type":"radius","attributes":{"subtype":"radius","description":"Corner radius of the previous-slide button. Use a large value (e.g. 48px) for a circular control.<br>CSS variable: --wm-carousel-prev-btn-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Border color of the previous-slide button. Transparent hides the outline.<br>CSS variable: --wm-carousel-prev-btn-border-color"}},"width":{"value":"{border.width.base.value}","type":"border","attributes":{"subtype":"border-width","description":"Border width of the previous-slide button.<br>CSS variable: --wm-carousel-prev-btn-border-width"}}},"margin-left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Outer spacing on the leading side of the previous-slide button (away from the slide content).<br>CSS variable: --wm-carousel-prev-btn-margin-left"}},"font-size":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"icon-size","description":"Icon size for the previous arrow glyph inside the button.<br>CSS variable: --wm-carousel-prev-btn-font-size"}},"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Icon color for the previous arrow.<br>CSS variable: --wm-carousel-prev-btn-color"}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Background of the previous-slide button. Transparent shows only the icon.<br>CSS variable: --wm-carousel-prev-btn-background"}},"ripple":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Ripple color when the previous-slide button is pressed. Transparent disables the ripple.<br>CSS variable: --wm-carousel-prev-btn-ripple-color"}}}},"next-btn":{"height":{"value":"{space.12.value}","type":"space","attributes":{"subtype":"space","description":"Height of the next-slide control (right arrow). Larger values make the control easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-next-btn-height"}},"width":{"value":"{space.12.value}","type":"space","attributes":{"subtype":"space","description":"Width of the next-slide control (right arrow). Larger values make the control easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-next-btn-width"}},"border":{"radius":{"value":"48px","type":"radius","attributes":{"subtype":"radius","description":"Corner radius of the next-slide button. Use a large value (e.g. 48px) for a circular control.<br>CSS variable: --wm-carousel-next-btn-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Border color of the next-slide button. Transparent hides the outline.<br>CSS variable: --wm-carousel-next-btn-border-color"}},"width":{"value":"{border.width.base.value}","type":"border","attributes":{"subtype":"border-width","description":"Border width of the next-slide button.<br>CSS variable: --wm-carousel-next-btn-border-width"}}},"margin-left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Spacing used for the next control wrapper (e.g. inset from the trailing edge of the carousel). Often mirrors the previous button spacing.<br>CSS variable: --wm-carousel-next-btn-margin-left"}},"margin-right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Inner margin on the next-slide button (e.g. space between the button surface and the carousel edge).<br>CSS variable: --wm-carousel-next-btn-margin-right"}},"font-size":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"icon-size","description":"Icon size for the next arrow glyph inside the button.<br>CSS variable: --wm-carousel-next-btn-font-size"}},"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Icon color for the next arrow.<br>CSS variable: --wm-carousel-next-btn-color"}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Background of the next-slide button. Transparent shows only the icon.<br>CSS variable: --wm-carousel-next-btn-background"}},"ripple":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Ripple color when the next-slide button is pressed. Transparent disables the ripple.<br>CSS variable: --wm-carousel-next-btn-ripple-color"}}}},"dots":{"wrapper":{"padding":{"value":"{space.1.value} {space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) inside the carousel dots container (the wrapper that holds all the navigation dots). This creates breathing room around the dots. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-wrapper-padding"}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the carousel dots container (the wrapper that holds all the navigation dots). When transparent, only the dots are visible. When filled with a color, the container appears with a colored background.<br>CSS variable: --wm-carousel-dots-wrapper-background-color"}}},"opacity":{"value":"1px","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of the carousel dots container (the wrapper that holds all the navigation dots). When set to 1, the container is fully opaque. Lower values make it more transparent.<br>CSS variable: --wm-carousel-dots-wrapper-opacity"}}},"width":{"value":"10px","type":"space","attributes":{"subtype":"space","description":"Controls the width of carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-width"}},"height":{"value":"10px","type":"space","attributes":{"subtype":"space","description":"Controls the height of carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-height"}},"border":{"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of carousel indicators (the navigation dots). These dots help users navigate between different slides in the carousel. This determines what color the border around each dot appears in.<br>CSS variable: --wm-carousel-dots-border-color"}},"radius":{"value":"5px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of carousel indicators (the navigation dots). When set to 5px, the indicators appear as rounded dots. Other values create different levels of rounding. When set to circle, the indicators appear as perfect round dots.<br>CSS variable: --wm-carousel-dots-border-radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around carousel indicators (the navigation dots). This creates the outline effect around each navigation dot.<br>CSS variable: --wm-carousel-dots-border-width"}}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of carousel indicators (the navigation dots). When transparent, only the border is visible. When filled, the dot appears solid.<br>CSS variable: --wm-carousel-dots-background"}},"margin":{"value":"{space.0.value} {radius.xxs.value}","type":"space","attributes":{"subtype":"space","description":"Controls the margin (top/bottom, left/right) of carousel indicators (navigation dots). This creates visual separation between each dot. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-margin"}},"opacity":{"value":"0.6px","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of inactive carousel indicators (navigation dots). When set to 0.6, the dots appear semi-transparent to indicate they are not the currently active slide. This creates a visual hierarchy that helps users understand their current position.<br>CSS variable: --wm-carousel-dots-opacity"}}},"states":{"active":{"dots":{"background":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the currently active carousel indicator (the dot representing the slide that is currently being displayed). This creates visual feedback to show users which slide they are viewing.<br>CSS variable: --wm-carousel-dots-background"}},"opacity":{"value":"1px","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the active carousel indicator. When set to 1, the active dot is fully opaque, making it stand out from inactive dots. This creates a visual hierarchy that helps users understand their current position.<br>CSS variable: --wm-carousel-dots-opacity"}},"width":{"value":"10px","type":"space","attributes":{"subtype":"space","description":"Controls the width of the active carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-width"}},"height":{"value":"10px","type":"space","attributes":{"subtype":"space","description":"Controls the height of active carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel. Larger values make the dots more prominent and easier to tap. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-height"}},"border":{"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the active carousel indicators (the navigation dots). These dots help users navigate between different slides in the carousel. This determines what color the border around each dot appears in.<br>CSS variable: --wm-carousel-dots-border-color"}},"radius":{"value":"5px","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the active carousel indicators (the navigation dots). When set to 5px, the indicators appear as rounded dots. Other values create different levels of rounding. When set to circle, the indicators appear as perfect round dots.<br>CSS variable: --wm-carousel-dots-border-radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the active carousel indicators (the navigation dots). This creates the outline effect around each navigation dot.<br>CSS variable: --wm-carousel-dots-border-width"}}},"margin":{"value":"{space.0.value} {radius.xxs.value}","type":"space","attributes":{"subtype":"space","description":"Controls the margin (top/bottom, left/right) of active carousel indicators (navigation dots). This creates visual separation between each dot. Acceptable units: px.<br>CSS variable: --wm-carousel-dots-margin"}}},"slide":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Width override for the active carousel slide. Match the keys under mapping.slide; use the same CSS variable names so the active selector block overrides :root defaults.<br>CSS variable: --wm-carousel-slide-width"}},"padding":{"value":"{space.0.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Padding inside the active carousel slide. Mirrors mapping.slide.padding.<br>CSS variable: --wm-carousel-slide-padding"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Border radius for the active carousel slide. Mirrors mapping.slide.border.radius.<br>CSS variable: --wm-carousel-slide-border-radius"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Border color for the active carousel slide. Mirrors mapping.slide.border.color.<br>CSS variable: --wm-carousel-slide-border-color"}},"width":{"value":"{border.width.base.value}","type":"border","attributes":{"subtype":"border-width","description":"Border width for the active carousel slide. Mirrors mapping.slide.border.width.<br>CSS variable: --wm-carousel-slide-border-width"}},"style":{"value":"{border.style.solid}","type":"radius","attributes":{"subtype":"border-style","description":"Border style for the active carousel slide. Mirrors mapping.slide.border.style.<br>CSS variable: --wm-carousel-slide-border-style"}}},"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Background for the active carousel slide. Mirrors mapping.slide.background.<br>CSS variable: --wm-carousel-slide-background"}}}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_mobile_components_checkbox_checkbox_json.foundation-css.cjs

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

package/cjs/src_tokens_mobile_components_checkboxset_checkboxset_json.foundation-css.cjs

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