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

package/cjs/src_tokens_web_components_date_date_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_web_components_date_date_json"],{
+
+/***/ "./src/tokens/web/components/date/date.json"
+/*!**************************************************!*\
+  !*** ./src/tokens/web/components/date/date.json ***!
+  \**************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"datepicker":{"meta":{"mapping":{"selector":{"web":".app-date"},"states":{"hover":{"selector":{"web":" span:hover"}},"active":{"selector":{"web":" span:active"}},"focus":{"selector":{"web":" span:focus"}},"select":{"selector":{"web":" span.selected"}}}}},"mapping":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of date picker elements (calendar interface where users select dates). This determines what color the date picker text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-datepicker-color"}},"background":{"value":"{color.surface.container.high.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of date picker elements (calendar interface where users select dates). This is the main background color that appears behind the calendar interface.<br>CSS variable: --wm-datepicker-background"}},"border":{"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of date picker elements (calendar interface where users select dates). This makes the date picker appear with rounded corners for a softer appearance.<br>CSS variable: --wm-datepicker-border-radius"}}},"previous":{"icon":{"value":"\\"\\\\f30f\\"","type":"radius","attributes":{"subtype":"radius","description":"Sets the icon for previous navigation in date picker (the arrow button that moves to the previous month). This determines which icon symbol is displayed for the previous month button.<br>CSS variable: --wm-datepicker-previous-icon"}}},"next":{"icon":{"value":"\\"\\\\f310\\"","type":"radius","attributes":{"subtype":"radius","description":"Sets the icon for next navigation in date picker (the arrow button that moves to the next month). This determines which icon symbol is displayed for the next month button.<br>CSS variable: --wm-datepicker-next-icon"}}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for date picker text (calendar interface where users select dates). This determines whether the date picker text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-datepicker-font-family"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the date picker text appears (calendar interface where users select dates). This affects the size of the text that users see in the date picker.<br>CSS variable: --wm-datepicker-font-size"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the date picker text appears (calendar interface where users select dates). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-datepicker-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when date picker text wraps to multiple lines. This ensures proper spacing for the text displayed in the date picker.<br>CSS variable: --wm-datepicker-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 date picker text. This can help make the date picker text more readable and properly spaced.<br>CSS variable: --wm-datepicker-letter-spacing"}},"date":{"width":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space","description":"Controls how wide date cells appear in the date picker (individual date boxes in the calendar grid). This determines the horizontal size of each date cell that users can click to select dates.<br>CSS variable: --wm-datepicker-date-width"}},"height":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space","description":"Controls how tall date cells appear in the date picker (individual date boxes in the calendar grid). This determines the vertical size of each date cell that users can click to select dates.<br>CSS variable: --wm-datepicker-date-height"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of date cells (individual date boxes in the calendar grid). This determines what color the date numbers appear in, which should contrast well with the background for readability.<br>CSS variable: --wm-datepicker-date-color"}},"background":{"value":"{color.surface.container.high.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of date cells (individual date boxes in the calendar grid). This is the main background color that appears behind each date number.<br>CSS variable: --wm-datepicker-date-background"}},"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around date cells (individual date boxes in the calendar grid). This creates the outline that defines each date cell shape.<br>CSS variable: --wm-datepicker-date-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around date cells (individual date boxes in the calendar grid). \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots, \'none\' removes the border.<br>CSS variable: --wm-datepicker-date-border-style"}},"color":{"value":"{color.surface.container.high.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around date cells (individual date boxes in the calendar grid). This determines the color of the outline that defines each date cell shape.<br>CSS variable: --wm-datepicker-date-border-color"}},"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of date cells (individual date boxes in the calendar grid). When set to \'pill\', the date cells appear with fully rounded corners, creating a pill-shaped appearance.<br>CSS variable: --wm-datepicker-date-border-radius"}}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for date cell text (the numbers that appear in each date box). This determines whether the date numbers appear in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-datepicker-date-font-family"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the date cell text appears (the numbers that appear in each date box). This affects the size of the date numbers that users see and interact with.<br>CSS variable: --wm-datepicker-date-font-size"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the date cell text appears (the numbers that appear in each date box). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-datepicker-date-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when date cell text wraps to multiple lines. This ensures proper spacing for the date numbers displayed in each cell.<br>CSS variable: --wm-datepicker-date-line-height"}},"other":{"month":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of other month dates (dates from previous/next months that appear in the current month view). This determines what color these dates appear in to distinguish them from the current month\'s dates.<br>CSS variable: --wm-datepicker-date-other-month-color"}}}},"state":{"layer":{"opacity":{"value":"0","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the state layer that appears during user interactions with date cells (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-datepicker-date-state-layer-opacity"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the state layer that appears when users hover, focus, or interact with date cells. This creates visual feedback to show that the date cell is interactive and responsive to user actions.<br>CSS variable: --wm-datepicker-date-state-layer-color"}}}}},"states":{"hover":{"date":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"focus":{"date":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"active":{"date":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"select":{"date":{"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color"}},"background":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

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

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_dropdown-menu_dropdown-menu_json"],{
+
+/***/ "./src/tokens/web/components/dropdown-menu/dropdown-menu.json"
+/*!********************************************************************!*\
+  !*** ./src/tokens/web/components/dropdown-menu/dropdown-menu.json ***!
+  \********************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"dropdown":{"meta":{"mapping":{"selector":{"web":".dropdown"},"states":{"active":{"selector":{"web":" .dropdown-menu .app-menu-item a:active:before, .dropdown-menu li a:active:before"}},"focus":{"selector":{"web":" .dropdown-menu .app-menu-item a:focus:before, .dropdown-menu li a:focus:before"}},"hover":{"selector":{"web":" .dropdown-menu .app-menu-item a:hover:before, .dropdown-menu li a:hover:before"}}}}},"mapping":{"menu":{"padding":{"value":"{space.0.value} {space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside dropdown menu containers (the space between the menu content and its borders). This creates breathing room around the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-padding"}},"inline":{"submenu":{"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside inline submenu items (nested menu items that appear within the main dropdown). This creates breathing room around the submenu content.<br>CSS variable: --wm-dropdown-menu-inline-submenu-padding"}}}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of dropdown menus (lists of options that appear when users click on a button or link). This is the main background color that appears behind the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-background"}},"box-shadow":{"value":"{elevation.shadow.2.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around dropdown menus (lists of options that appear when users click on a button or link). This creates a subtle shadow that makes the dropdown appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-dropdown-menu-box-shadow"}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of dropdown menus (lists of options that appear when users click on a button or link). This makes the dropdown appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-dropdown-menu-border-radius"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style"}},"width":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"radius"}}},"width":{"value":"220px","type":"space","attributes":{"subtype":"space","description":"Controls how wide dropdown menus appear (lists of options that appear when users click on a button or link). This determines the horizontal size of the dropdown menu container.<br>CSS variable: --wm-dropdown-menu-width"}},"caret":{"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large dropdown menu caret icons appear (the small arrow symbols that indicate dropdown menus). This affects the size of the arrow symbols that users see in dropdown buttons.<br>CSS variable: --wm-dropdown-menu-caret-size"}}},"item":{"font-family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for dropdown menu items (individual options in the dropdown list). This determines whether the menu item text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-dropdown-menu-item-font-family"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the dropdown menu items appear (individual options in the dropdown list). This affects the size of the text that users see in each menu option.<br>CSS variable: --wm-dropdown-menu-item-font-size"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the dropdown menu items appear (individual options in the dropdown list). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-dropdown-menu-item-font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when dropdown menu item text wraps to multiple lines. This ensures proper spacing for the menu item text displayed in the dropdown.<br>CSS variable: --wm-dropdown-menu-item-line-height"}},"letter-spacing":{"value":"{body.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in dropdown menu items. This can help make the menu item text more readable and properly spaced.<br>CSS variable: --wm-dropdown-menu-item-letter-spacing"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of dropdown menu items (individual options in the dropdown list). This determines what color the menu item text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-dropdown-menu-item-color"}},"gap":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between elements within dropdown menu items (like the space between text and icons). This creates visual separation between different parts of each menu item.<br>CSS variable: --wm-dropdown-menu-item-gap"}},"padding":{"value":"{space.3.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside dropdown menu items (the space between the menu item content and its borders). This creates breathing room around each menu option.<br>CSS variable: --wm-dropdown-menu-item-padding"}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the state layer that appears when users hover, focus, or interact with dropdown menu items. This creates visual feedback to show that the menu item is interactive and responsive to user actions.<br>CSS variable: --wm-dropdown-menu-item-state-layer-color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the state layer that appears during user interactions with dropdown menu items (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-dropdown-menu-item-state-layer-opacity"}}}}}},"states":{"hover":{"menu":{"item":{"state":{"layer":{"opacity":{"hover":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}}},"focus":{"menu":{"item":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"active":{"menu":{"item":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_fileupload_fileupload_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_fileupload_fileupload_json"],{
+
+/***/ "./src/tokens/web/components/fileupload/fileupload.json"
+/*!**************************************************************!*\
+  !*** ./src/tokens/web/components/fileupload/fileupload.json ***!
+  \**************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"file-upload":{"mapping":{"min-height":{"type":"space","value":"3em","attributes":{"subtype":"space","description":"Controls the minimum height of file upload area. Acceptable units: em, px, rem.<br>CSS variable: --wm-file-upload-min-height"}},"status":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of file upload status area.<br>CSS variable: --wm-file-upload-status-padding"}},"border":{"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of file upload status area.<br>CSS variable: --wm-file-upload-status-border-color"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of file upload status area.<br>CSS variable: --wm-file-upload-status-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of file upload status area. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-file-upload-status-border-style"}}},"background":{"value":"{color.surface.container.low.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of file upload status area.<br>CSS variable: --wm-file-upload-status-background"}},"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of file upload status area.<br>CSS variable: --wm-file-upload-status-radius"}},"bottom":{"space":{"value":"{space.1.value}","type":"radius","attributes":{"subtype":"space","description":"Controls bottom spacing of file upload status area.<br>CSS variable: --wm-file-upload-status-bottom-space"}}}},"bottom":{"space":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls bottom spacing of file upload area.<br>CSS variable: --wm-file-upload-bottom-space"}}},"title":{"color":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of file upload titles.<br>CSS variable: --wm-file-upload-title-color"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of file upload titles.<br>CSS variable: --wm-file-upload-title-font-size"}},"font-family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of file upload titles.<br>CSS variable: --wm-file-upload-title-font-family"}},"font-weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of file upload titles. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-file-upload-title-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of file upload titles.<br>CSS variable: --wm-file-upload-title-line-height"}}},"size":{"color":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of file size information.<br>CSS variable: --wm-file-upload-size-color"}},"font":{"size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of file size information.<br>CSS variable: --wm-file-upload-size-font-size"}},"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of file size information.<br>CSS variable: --wm-file-upload-size-font-family"}},"weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of file size information. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-file-upload-size-font-weight"}}},"line-height":{"value":"{body.small.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of file size information.<br>CSS variable: --wm-file-upload-size-line-height"}}},"gap":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between file upload elements.<br>CSS variable: --wm-file-upload-gap"}},"drop":{"box":{"gap":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between elements in drop box area.<br>CSS variable: --wm-file-upload-drop-box-gap"}},"bottom":{"space":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls bottom spacing of drop box area.<br>CSS variable: --wm-file-upload-drop-box-bottom-space"}}},"background":{"value":"none","type":"color","attributes":{"subtype":"color","description":"Sets the background color of drop box area.<br>CSS variable: --wm-file-upload-drop-box-background"}}}},"multi":{"file":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of multi-file upload items.<br>CSS variable: --wm-file-upload-multi-file-radius"}}}},"message":{"caption":{"color":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of file upload message captions.<br>CSS variable: --wm-file-upload-message-caption-color"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of file upload message captions.<br>CSS variable: --wm-file-upload-message-caption-font-size"}},"font-family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of file upload message captions.<br>CSS variable: --wm-file-upload-message-caption-font-family"}},"font-weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of file upload message captions. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-file-upload-message-caption-font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of file upload message captions.<br>CSS variable: --wm-file-upload-message-caption-line-height"}}},"anchor":{"color":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of file upload message anchors.<br>CSS variable: --wm-file-upload-message-anchor-color"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of file upload message anchors.<br>CSS variable: --wm-file-upload-message-anchor-font-size"}},"font-family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of file upload message anchors.<br>CSS variable: --wm-file-upload-message-anchor-font-family"}},"font-weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of file upload message anchors. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-file-upload-message-anchor-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of file upload message anchors.<br>CSS variable: --wm-file-upload-message-anchor-line-height"}}}},"media":{"icon":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of file upload media icons.<br>CSS variable: --wm-file-upload-media-icon-size"}},"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of file upload media icons.<br>CSS variable: --wm-file-upload-media-icon-padding"}}}}}}}');
+
+/***/ }
+
+}]);

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

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_form-controls_form-controls_json"],{
+
+/***/ "./src/tokens/web/components/form-controls/form-controls.json"
+/*!********************************************************************!*\
+  !*** ./src/tokens/web/components/form-controls/form-controls.json ***!
+  \********************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"form":{"meta":{"mapping":{"selector":{"web":".app-composite-widget"},"states":{"hover":{"selector":{"web":":has(.form-control:not(.ng-touched.ng-invalid):hover), .form-control:hover,.form-control:hover"}},"focus":{"selector":{"web":":has(.form-control:not(.ng-touched.ng-invalid):focus), .form-control:focus,.form-control:focus"}},"active":{"selector":{"web":":has(.form-control:not(.ng-touched.ng-invalid):active), .form-control:active,.form-control:active"}},"error":{"selector":{"web":":has(.form-control.ng-touched.ng-invalid),:has(.input-group.ng-touched.ng-invalid), .form-control.ng-touched.ng-invalid,.form-group .ng-touched.ng-invalid .form-control,:has(.control-label.text-danger)"}}}}},"mapping":{"group":{"gap":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between form groups (collections of related form fields like a group of address fields or contact information fields). This creates visual separation between different sections of a form.<br>CSS variable: --wm-form-group-gap"}}},"form":{"width":{"value":"1240px","type":"space"},"min-width":{"value":"320px","type":"space"}},"field":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space"}}},"control":{"color":{"@":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form controls (input fields, text areas, select boxes, and other form elements where users enter data). This determines what color the text that users type appears in.<br>CSS variable: --wm-form-control-color"}},"place-holder":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of placeholder text in form controls (the gray text that appears in empty input fields to show users what to enter, like \'Enter your name\' or \'Select an option\'). This determines what color the hint text appears in.<br>CSS variable: --wm-form-control-place-holder-color"}}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls (input fields, text areas, select boxes, and other form elements where users enter data). This is the main background color that appears behind the form field content.<br>CSS variable: --wm-form-control-background"}},"border":{"width":{"@":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-control-border-width"}}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form controls (input fields, text areas, select boxes, and other form elements). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-form-control-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls (input fields, text areas, select boxes, and other form elements). This determines what color the border lines appear in that outline the form fields.<br>CSS variable: --wm-form-control-border-color"}},"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form controls (input fields, text areas, select boxes, and other form elements). This makes the form field corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-control-border-radius"}}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls how wide form controls appear (input fields, text areas, select boxes, and other form elements). This determines the horizontal size of the form fields. Acceptable units: %, px, em, rem.<br>CSS variable: --wm-form-control-width"}},"height":{"value":"56px","type":"space","attributes":{"subtype":"space","description":"Controls how tall form controls appear (input fields, text areas, select boxes, and other form elements). This determines the vertical size of the form fields. Acceptable units: px, em, rem.<br>CSS variable: --wm-form-control-height"}},"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside form controls (the space between the form field content and its borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-control-padding"}},"font-family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form controls (input fields, text areas, select boxes, and other form elements). This determines whether the form field text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-control-font-family"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in form controls (input fields, text areas, select boxes, and other form elements). This affects the size of the text that users see and type in the form fields.<br>CSS variable: --wm-form-control-font-size"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in form controls (input fields, text areas, select boxes, and other form elements). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-control-font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when form control text wraps to multiple lines (like in text areas). This ensures proper spacing for the text displayed in the form fields.<br>CSS variable: --wm-form-control-line-height"}},"letter-spacing":{"value":"{body.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in form controls (input fields, text areas, select boxes, and other form elements). This can help make the form field text more readable and properly spaced.<br>CSS variable: --wm-form-control-letter-spacing"}}},"caption":{"font":{"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of form captions.<br>CSS variable: --wm-form-caption-font-family"}},"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of form captions.<br>CSS variable: --wm-form-caption-font-size"}},"weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of form captions. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-form-caption-font-weight"}}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of form captions.<br>CSS variable: --wm-form-caption-line-height"}},"letter-spacing":{"value":"{body.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls spacing between characters in form captions.<br>CSS variable: --wm-form-caption-letter-spacing"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form captions.<br>CSS variable: --wm-form-caption-color"}},"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls margin of form captions.<br>CSS variable: --wm-form-caption-margin"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of form captions.<br>CSS variable: --wm-form-caption-padding"}},"display":{"value":"inline-block","type":"other","attributes":{"subtype":"display","description":"Sets the display property of form captions.<br>CSS variable: --wm-form-caption-display"}},"gap":{"value":"~\\"calc({space.1.value} * 0.5)\\"","type":"space","attributes":{"subtype":"space","description":"Controls spacing between form caption elements.<br>CSS variable: --wm-form-caption-gap"}}},"required":{"content":{"value":"\\"*\\"","type":"radius","attributes":{"subtype":"radius","description":"Sets the content for required field indicators.<br>CSS variable: --wm-form-required-content"}},"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of required field indicators.<br>CSS variable: --wm-form-required-color"}},"font-size":{"value":"inherit","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of required field indicators.<br>CSS variable: --wm-form-required-font-size"}},"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of required field indicators. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-form-required-font-weight"}}},"help":{"block":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form help blocks.<br>CSS variable: --wm-form-help-block-color"}},"font-family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of form help blocks.<br>CSS variable: --wm-form-help-block-font-family"}},"font-size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of form help blocks.<br>CSS variable: --wm-form-help-block-font-size"}},"font-weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight of form help blocks. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-form-help-block-font-weight"}},"line-height":{"value":"{body.small.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of form help blocks.<br>CSS variable: --wm-form-help-block-line-height"}},"letter-spacing":{"value":"{body.small.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls spacing between characters in form help blocks.<br>CSS variable: --wm-form-help-block-letter-spacing"}}}},"input":{"group":{"btn":{"width":{"value":"{space.7.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of input group buttons.<br>CSS variable: --wm-form-input-group-btn-width"}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of input group buttons.<br>CSS variable: --wm-form-input-group-btn-height"}},"font":{"size":{"value":"{icon.size.md.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the font size of input group button icons.<br>CSS variable: --wm-form-input-group-btn-font-size"}}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of input group buttons.<br>CSS variable: --wm-form-input-group-btn-border-radius"}}}}}},"states":{"hover":{"control":{"border":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}}},"caption":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}}}},"focus":{"control":{"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"space"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"caption":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}}}},"error":{"control":{"border":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}}},"caption":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}}},"help":{"block":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"active":{"control":{"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"border-width"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"caption":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}}}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

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

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_grid-layout_grid-layout_json"],{
+
+/***/ "./src/tokens/web/components/grid-layout/grid-layout.json"
+/*!****************************************************************!*\
+  !*** ./src/tokens/web/components/grid-layout/grid-layout.json ***!
+  \****************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"grid-layout":{"mapping":{"width":{"type":"space","value":"100%","attributes":{"subtype":"space","description":"Controls how wide the grid layout container appears on the page. This determines the overall width of the grid system that holds rows and columns of content.<br>CSS variable: --wm-grid-layout-width"}},"row":{"gap":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing between grid rows (horizontal lines of content). This creates breathing room between different rows of grid content.<br>CSS variable: --wm-grid-layout-row-gap"}}},"column":{"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside grid columns (the individual cells that hold content). This creates breathing room around the content within each grid cell.<br>CSS variable: --wm-grid-layout-column-padding"}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_icon_icon_json.foundation-css.cjs

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

package/cjs/src_tokens_web_components_iconbutton-toggleable_iconbutton-toggleable_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_web_components_iconbutton-toggleable_iconbutton-toggleable_json"],{
+
+/***/ "./src/tokens/web/components/iconbutton-toggleable/iconbutton-toggleable.json"
+/*!************************************************************************************!*\
+  !*** ./src/tokens/web/components/iconbutton-toggleable/iconbutton-toggleable.json ***!
+  \************************************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"iconbutton-toggle":{"meta":{"mapping":{"selector":{"web":".app-iconbutton-toggle"},"states":{"hover":{"selector":{"web":":has(label > input[type=\'checkbox\']:hover)"}},"focus":{"selector":{"web":":has(label > input[type=\'checkbox\']:focus)"}},"selected":{"selector":{"web":":has(label > input[type=\'checkbox\']:checked)"}}}},"appearances":{}},"mapping":{"font-size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-iconbutton-toggle-font-size"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-iconbutton-toggle-color"}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of iconbutton toggle components. This determines the shadow depth and visual elevation of the tabbar above the content.<br>CSS variable: --wm-iconbutton-toggle-box-shadow"}},"background":{"value":"{color.transparent.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 icons.<br>CSS variable: --wm-iconbutton-toggle-background"}},"border":{"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the icon button toggleable. This creates the outline that defines the icon button toggleable shape and makes it visible to users.<br>CSS variable: --wm-iconbutton-toggle-border-width"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the iconbutton toggleable. This determines the color of the outline that defines the iconbutton-toggle shape in its default/selected state.<br>CSS variable: --wm-iconbutton-toggle-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the iconbutton toggleable. Small values create slightly rounded corners, while larger values make the iconbutton toggleable more rounded or even circular.<br>CSS variable: --wm-iconbutton-toggle-border-radius"}},"style":{"value":"{border.style.solid}","type":"border","attributes":{"subtype":"border-style","description":"Sets the border style of the iconbutton toggleable component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-iconbutton-toggle-border-style"}}},"width":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how wide icon symbols appear (like arrows, hearts, settings, etc.). This determines the horizontal space each icon takes up.<br>CSS variable: --wm-icon-width"}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls how tall icon symbols appear (like arrows, hearts, settings, etc.). This determines the vertical space each icon takes up.<br>CSS variable: --wm-iconbutton-toggle-height"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users hover their mouse over the icon button. This creates a subtle visual feedback effect to indicate that the icon button is interactive and ready to be clicked.<br>CSS variable: --wm-iconbutton-toggle-opacity (hover state)"}}},"appearances":{"default":{"mapping":{"states":{"hover":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-iconbutton-toggle-color"}}},"selected":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-iconbutton-toggle-color"}},"font-size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-iconbutton-toggle-font-size"}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of iconbutton toggle components. This determines the shadow depth and visual elevation of the tabbar above the content.<br>CSS variable: --wm-iconbutton-toggle-box-shadow"}},"border":{"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the icon button toggleable. This creates the outline that defines the icon button toggleable shape and makes it visible to users.<br>CSS variable: --wm-iconbutton-toggle-border-width"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the iconbutton toggleable. This determines the color of the outline that defines the iconbutton-toggle shape in its default/selected state.<br>CSS variable: --wm-iconbutton-toggle-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the iconbutton toggleable. Small values create slightly rounded corners, while larger values make the iconbutton toggleable more rounded or even circular.<br>CSS variable: --wm-iconbutton-toggle-border-radius"}},"style":{"value":"{border.style.solid}","type":"border","attributes":{"subtype":"border-style","description":"Sets the border style of the iconbutton toggleable component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-iconbutton-toggle-border-style"}}},"width":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how wide icon symbols appear (like arrows, hearts, settings, etc.). This determines the horizontal space each icon takes up.<br>CSS variable: --wm-icon-width"}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls how tall icon symbols appear (like arrows, hearts, settings, etc.). This determines the vertical space each icon takes up.<br>CSS variable: --wm-iconbutton-toggle-height"}},"background":{"value":"{color.transparent.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 icons.<br>CSS variable: --wm-iconbutton-toggle-background"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users hover their mouse over the icon button. This creates a subtle visual feedback effect to indicate that the icon button is interactive and ready to be clicked.<br>CSS variable: --wm-iconbutton-toggle-opacity (hover state)"}}}}}},"outlined":{"mapping":{"border":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the icon button toggleable. This creates the outline that defines the icon button toggleable shape and makes it visible to users.<br>CSS variable: --wm-iconbutton-toggle-border-width"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the iconbutton toggleable. This determines the color of the outline that defines the iconbutton-toggle shape in its default/selected state.<br>CSS variable: --wm-iconbutton-toggle-border-color"}},"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the iconbutton toggleable. Small values create slightly rounded corners, while larger values make the iconbutton toggleable more rounded or even circular.<br>CSS variable: --wm-iconbutton-toggle-border-radius"}},"style":{"value":"{border.style.solid}","type":"border","attributes":{"subtype":"border-style","description":"Sets the border style of the iconbutton toggleable component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-iconbutton-toggle-border-style"}}},"states":{"hover":{"background":{"value":"{color.primary.@.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 icons.<br>CSS variable: --wm-iconbutton-toggle-background"}},"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users hover their mouse over the icon button. This creates a subtle visual feedback effect to indicate that the icon button is interactive and ready to be clicked.<br>CSS variable: --wm-iconbutton-toggle-opacity (hover state)"}}},"selected":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-iconbutton-toggle-color"}},"font-size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-iconbutton-toggle-font-size"}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of iconbutton toggle components. This determines the shadow depth and visual elevation of the tabbar above the content.<br>CSS variable: --wm-iconbutton-toggle-box-shadow"}},"border":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the icon button toggleable. This creates the outline that defines the icon button toggleable shape and makes it visible to users.<br>CSS variable: --wm-iconbutton-toggle-border-width"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the iconbutton toggleable. This determines the color of the outline that defines the iconbutton-toggle shape in its default/selected state.<br>CSS variable: --wm-iconbutton-toggle-border-color"}},"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the iconbutton toggleable. Small values create slightly rounded corners, while larger values make the iconbutton toggleable more rounded or even circular.<br>CSS variable: --wm-iconbutton-toggle-border-radius"}},"style":{"value":"{border.style.solid}","type":"border","attributes":{"subtype":"border-style","description":"Sets the border style of the iconbutton toggleable component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-iconbutton-toggle-border-style"}}},"width":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls how wide icon symbols appear (like arrows, hearts, settings, etc.). This determines the horizontal space each icon takes up.<br>CSS variable: --wm-icon-width"}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls how tall icon symbols appear (like arrows, hearts, settings, etc.). This determines the vertical space each icon takes up.<br>CSS variable: --wm-iconbutton-toggle-height"}},"background":{"value":"{color.transparent.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 icons.<br>CSS variable: --wm-iconbutton-toggle-background"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users hover their mouse over the icon button. This creates a subtle visual feedback effect to indicate that the icon button is interactive and ready to be clicked.<br>CSS variable: --wm-iconbutton-toggle-opacity (hover state)"}}}}},"variantGroups":{}},"filled":{"mapping":{"border":{"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the icon button toggleable. This creates the outline that defines the icon button toggleable shape and makes it visible to users.<br>CSS variable: --wm-iconbutton-toggle-border-width"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the iconbutton toggleable. This determines the color of the outline that defines the iconbutton-toggle shape in its default/selected state.<br>CSS variable: --wm-iconbutton-toggle-border-color"}},"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the iconbutton toggleable. Small values create slightly rounded corners, while larger values make the iconbutton toggleable more rounded or even circular.<br>CSS variable: --wm-iconbutton-toggle-border-radius"}},"style":{"value":"{border.style.solid}","type":"border","attributes":{"subtype":"border-style","description":"Sets the border style of the iconbutton toggleable component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-iconbutton-toggle-border-style"}}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-iconbutton-toggle-color"}},"background":{"value":"{color.primary.@.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 icons.<br>CSS variable: --wm-iconbutton-toggle-background"}},"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users hover their mouse over the icon button. This creates a subtle visual feedback effect to indicate that the icon button is interactive and ready to be clicked.<br>CSS variable: --wm-iconbutton-toggle-opacity (hover state)"}},"states":{"hover":{"background":{"value":"{color.primary.@.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 icons.<br>CSS variable: --wm-iconbutton-toggle-background"}},"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users hover their mouse over the icon button. This creates a subtle visual feedback effect to indicate that the icon button is interactive and ready to be clicked.<br>CSS variable: --wm-iconbutton-toggle-opacity (hover state)"}}},"selected":{"background":{"value":"{color.primary.@.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 icons.<br>CSS variable: --wm-iconbutton-toggle-background"}},"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-iconbutton-toggle-color"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer when users hover their mouse over the icon button. This creates a subtle visual feedback effect to indicate that the icon button is interactive and ready to be clicked.<br>CSS variable: --wm-iconbutton-toggle-opacity (hover state)"}},"font-size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-iconbutton-toggle-font-size"}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of iconbutton toggle components. This determines the shadow depth and visual elevation of the tabbar above the content.<br>CSS variable: --wm-iconbutton-toggle-box-shadow"}},"border":{"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the icon button toggleable. This creates the outline that defines the icon button toggleable shape and makes it visible to users.<br>CSS variable: --wm-iconbutton-toggle-border-width"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the iconbutton toggleable. This determines the color of the outline that defines the iconbutton-toggle shape in its default/selected state.<br>CSS variable: --wm-iconbutton-toggle-border-color"}},"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the iconbutton toggleable. Small values create slightly rounded corners, while larger values make the iconbutton toggleable more rounded or even circular.<br>CSS variable: --wm-iconbutton-toggle-border-radius"}},"style":{"value":"{border.style.solid}","type":"border","attributes":{"subtype":"border-style","description":"Sets the border style of the iconbutton toggleable component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-iconbutton-toggle-border-style"}}},"width":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how wide icon symbols appear (like arrows, hearts, settings, etc.). This determines the horizontal space each icon takes up.<br>CSS variable: --wm-icon-width"}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls how tall icon symbols appear (like arrows, hearts, settings, etc.). This determines the vertical space each icon takes up.<br>CSS variable: --wm-iconbutton-toggle-height"}}}}},"variantGroups":{}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_iframe_iframe_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_web_components_iframe_iframe_json"],{
+
+/***/ "./src/tokens/web/components/iframe/iframe.json"
+/*!******************************************************!*\
+  !*** ./src/tokens/web/components/iframe/iframe.json ***!
+  \******************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"iframe":{"mapping":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls how wide embedded content appears (like embedded videos, maps, or web pages). This determines the horizontal size of the embedded content window.<br>CSS variable: --wm-iframe-width"}},"height":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls how tall embedded content appears (like embedded videos, maps, or web pages). This determines the vertical size of the embedded content window.<br>CSS variable: --wm-iframe-height"}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_label_label_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_label_label_json"],{
+
+/***/ "./src/tokens/web/components/label/label.json"
+/*!****************************************************!*\
+  !*** ./src/tokens/web/components/label/label.json ***!
+  \****************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"label":{"meta":{"mapping":{"selector":{"web":".app-label","mobile":".app-label"}},"appearances":{"default":{"mapping":{"selector":{"web":".app-label","mobile":".app-label"}},"variantGroups":{"size":{"p":{"selector":{"web":".p","mobile":"p"}},"h1":{"selector":{"web":".h1","mobile":".h1"}},"h2":{"selector":{"web":".h2","mobile":".h2"}},"h3":{"selector":{"web":".h3","mobile":".h3"}},"h4":{"selector":{"web":".h4","mobile":".h4"}},"h5":{"selector":{"web":".h5","mobile":".h5"}},"h6":{"selector":{"web":".h6","mobile":".h6"}}}}},"text":{"mapping":{"selector":{"web":".app-label"}},"variantGroups":{"status":{"primary":{"selector":{"web":".text-primary"}},"secondary":{"selector":{"web":".text-secondary"}},"tertiary":{"selector":{"web":".text-tertiary"}},"success":{"selector":{"web":".text-success"}},"warning":{"selector":{"web":".text-warning"}},"danger":{"selector":{"web":".text-danger"}},"info":{"selector":{"web":".text-info"}},"muted":{"selector":{"web":".text-muted"}}}}},"label":{"mapping":{"selector":{"web":".app-label"}},"variantGroups":{"status":{"primary":{"selector":{"web":".label-primary"}},"secondary":{"selector":{"web":".label-secondary"}},"tertiary":{"selector":{"web":".label-tertiary"}},"success":{"selector":{"web":".label-success"}},"warning":{"selector":{"web":".label-warning"}},"danger":{"selector":{"web":".label-danger"}},"info":{"selector":{"web":".label-info"}},"muted":{"selector":{"web":".label-muted"}}}}}}},"mapping":{"color":{"value":"inherit","type":"color","attributes":{"subtype":"color","description":"Sets the text color of labels (text elements that describe or identify other content). This determines what color the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-label-color"}},"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the outer spacing around labels (the space between the label and surrounding elements). This creates breathing room around label text.<br>CSS variable: --wm-label-margin"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside labels (the space between the label text and its border). This creates breathing room around the label content.<br>CSS variable: --wm-label-padding"}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large label text appears (text that describes or identifies other content). Larger values make labels more prominent, smaller values make them more subtle.<br>CSS variable: --wm-label-font-size"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold label text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-label-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when label text wraps to multiple lines. Higher values create more space between lines for better readability.<br>CSS variable: --wm-label-line-height"}},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-label-letter-spacing"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-label-font-family"}},"background-color":{"value":"none","type":"color","attributes":{"subtype":"color","description":"Sets the background color of labels (the area behind the label text). When set to \'none\', labels have no background color, making them transparent.<br>CSS variable: --wm-label-background-color"}}},"appearances":{"default":{"variantGroups":{"size":{"p":{"font-size":{"value":"{p.font-size.value}","type":"font","attributes":{"subtype":"font-size"}},"font-weight":{"value":"{p.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"line-height":{"value":"{p.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{p.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}},"font-family":{"value":"{p.font-family.value}","type":"font","attributes":{"subtype":"font-family"}}},"h1":{"font-size":{"value":"{h1.font-size.value}","type":"font","attributes":{"subtype":"font-size"}},"font-weight":{"value":"{h1.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"line-height":{"value":"{h1.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{h1.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}},"font-family":{"value":"{h1.font-family.value}","type":"font","attributes":{"subtype":"font-family"}}},"h2":{"font-size":{"value":"{h2.font-size.value}","type":"font","attributes":{"subtype":"font-size"}},"font-weight":{"value":"{h2.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"line-height":{"value":"{h2.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{h2.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}},"font-family":{"value":"{h2.font-family.value}","type":"font","attributes":{"subtype":"font-family"}}},"h3":{"font-size":{"value":"{h3.font-size.value}","type":"font","attributes":{"subtype":"font-size"}},"font-weight":{"value":"{h3.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"line-height":{"value":"{h3.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{h3.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}},"font-family":{"value":"{h3.font-family.value}","type":"font","attributes":{"subtype":"font-family"}}},"h4":{"font-size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"font-size"}},"font-weight":{"value":"{h4.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"line-height":{"value":"{h4.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{h4.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}},"font-family":{"value":"{h4.font-family.value}","type":"font","attributes":{"subtype":"font-family"}}},"h5":{"font-size":{"value":"{h5.font-size.value}","type":"font","attributes":{"subtype":"font-size"}},"font-weight":{"value":"{h5.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"line-height":{"value":"{h5.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{h5.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}},"font-family":{"value":"{h5.font-family.value}","type":"font","attributes":{"subtype":"font-family"}}},"h6":{"font-size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"font-size"}},"font-weight":{"value":"{h6.font-weight.value}","type":"font","attributes":{"subtype":"font-weight"}},"line-height":{"value":"{h6.line-height.value}","type":"font","attributes":{"subtype":"line-height"}},"letter-spacing":{"value":"{h6.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing"}},"font-family":{"value":"{h6.font-family.value}","type":"font","attributes":{"subtype":"font-family"}}}}}},"text":{"variantGroups":{"status":{"primary":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"secondary":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"tertiary":{"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}},"success":{"color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}}},"warning":{"color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}}},"danger":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}},"info":{"color":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}}},"muted":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}}}}}},"label":{"variantGroups":{"status":{"primary":{"background-color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"secondary":{"background-color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"tertiary":{"background-color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}},"success":{"background-color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-success.@.value}","type":"color","attributes":{"subtype":"color"}}},"warning":{"background-color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-warning.@.value}","type":"color","attributes":{"subtype":"color"}}},"danger":{"background-color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-error.@.value}","type":"color","attributes":{"subtype":"color"}}},"info":{"background-color":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color"}}},"muted":{"background-color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_list_list_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_list_list_json"],{
+
+/***/ "./src/tokens/web/components/list/list.json"
+/*!**************************************************!*\
+  !*** ./src/tokens/web/components/list/list.json ***!
+  \**************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"list":{"meta":{"mapping":{"selector":{"web":".app-list, .app-livelist"},"states":{"hover":{"selector":{"web":" .app-list-item:hover, .app-list-item.hover"}},"focus":{"selector":{"web":" .app-list-item:focus, .app-list-item.focus"}},"active":{"selector":{"web":" .app-list-item:active, .app-list-item.active"}},"disabled":{"selector":{"web":" .app-list-item.disable-item"}}}}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of lists (containers that hold multiple list items in a vertical or horizontal arrangement). This is the main background color that appears behind the list container.<br>CSS variable: --wm-list-background"}},"min-height":{"value":"6rem","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of lists (containers that hold multiple list items). This ensures the list is always tall enough to be visible and properly displayed, even when it has few items.<br>CSS variable: --wm-list-min-height"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"radius","description":"Controls the transparency of lists (containers that hold multiple list items). When set to 1, the list is fully opaque. Lower values make the list more transparent, higher values make it more opaque.<br>CSS variable: --wm-list-opacity"}},"pointer-events":{"value":"all","type":"radius","attributes":{"subtype":"cursor","description":"Controls whether list items can receive mouse/touch interactions. \'all\' makes list items fully interactive (clickable, hoverable), \'none\' makes them ignore all mouse/touch events (like they\'re invisible to the mouse), and \'auto\' lets the browser decide. This is useful for enabling/disabling list functionality.<br>CSS variable: --wm-list-pointer-events"}},"state":{"layer":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the state layer that appears when users hover, focus, or interact with list items. This creates visual feedback to show that the list item is interactive and responsive to user actions.<br>CSS variable: --wm-list-state-layer-color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the state layer that appears during user interactions with list items (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-list-state-layer-opacity"}}}},"item":{"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of list items (individual entries in a list that users can interact with). This is the main background color that appears behind each list item content.<br>CSS variable: --wm-list-item-background"}},"padding":{"value":"{space.3.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside list items (the space between the list item content and its borders). This creates breathing room around each list item content.<br>CSS variable: --wm-list-item-padding"}},"header":{"padding":{"value":"{space.3.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside list item headers (section titles that group related list items). This creates breathing room around the header text.<br>CSS variable: --wm-list-item-header-padding"}},"background":{"value":"{color.surface.container.lowest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of list item headers (section titles that group related list items). This is the main background color that appears behind the header text.<br>CSS variable: --wm-list-item-header-background"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of list item headers (section titles that group related list items). This determines what color the header text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-list-item-header-color"}}}},"states":{"hover":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"focus":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"active":{"item":{"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}}},"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}},"disabled":{"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity"}},"pointer-events":{"value":"none","type":"radius","attributes":{"subtype":"cursor","description":"Disables mouse/touch interactions for disabled list items. When set to \'none\', disabled list items ignore all mouse/touch events, making them completely non-interactive. This prevents users from clicking or hovering over disabled items.<br>CSS variable: --wm-list-pointer-events (disabled state)"}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_message_message_json.foundation-css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_message_message_json"],{
+
+/***/ "./src/tokens/web/components/message/message.json"
+/*!********************************************************!*\
+  !*** ./src/tokens/web/components/message/message.json ***!
+  \********************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"message":{"meta":{"appearances":{"filled":{"mapping":{"selector":{"web":".app-message","mobile":".app-message"}},"variantGroups":{"status":{"success":{"selector":{"mobile":".alert-success","web":".alert-success"}},"info":{"selector":{"mobile":".alert-info","web":".alert-info"}},"warning":{"selector":{"mobile":".alert-warning","web":".alert-warning"}},"danger":{"selector":{"mobile":".alert-danger","web":".alert-danger"}},"loading":{"selector":{"mobile":".alert-loading","web":".alert-loading"}}}}}}},"mapping":{"container":{"shadow":{"value":"{elevation.shadow.3.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around message containers (notification boxes that show alerts, warnings, or success messages). This creates a subtle shadow that makes the message appear to float above the background.<br>CSS variable: --wm-message-container-shadow"}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of message containers (notification boxes). This makes the message appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-message-container-border-radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the outline around message containers (notification boxes). This creates a colored border around the message to define its boundaries.<br>CSS variable: --wm-message-container-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the outline around message containers. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots, \'none\' removes the border.<br>CSS variable: --wm-message-container-border-style"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the outline around message containers (notification boxes). This creates a colored border around the message to define its boundaries.<br>CSS variable: --wm-message-container-border-color"}}},"padding":{"value":"{space.3.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside message containers (the space between the message content and the container border). This creates breathing room around the message text and icons.<br>CSS variable: --wm-message-container-padding"}},"gap":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between elements within message containers (like between icons and text, or between text and close buttons). This creates visual separation between different parts of the message.<br>CSS variable: --wm-message-container-gap"}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of message containers (notification boxes). This is the main background color that appears behind the message content.<br>CSS variable: --wm-message-container-background"}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of message containers (the color of the message text). This should contrast well with the background color for readability.<br>CSS variable: --wm-message-container-color"}}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for message text. This determines whether the message text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-message-font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold message text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-message-font-weight"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large message text appears. Larger values make the message more prominent and easier to read, while smaller values make it more subtle.<br>CSS variable: --wm-message-font-size"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when message text wraps to multiple lines. Higher values create more space between lines for better readability.<br>CSS variable: --wm-message-line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in message text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-message-letter-spacing"}}},"appearances":{"filled":{"mapping":{},"variantGroups":{"status":{"success":{"container":{"background":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-success.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"info":{"container":{"background":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"warning":{"container":{"background":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-warning.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"danger":{"container":{"background":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-error.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}}}},"loading":{"container":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_modal-dialog_modal-dialog_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_web_components_modal-dialog_modal-dialog_json"],{
+
+/***/ "./src/tokens/web/components/modal-dialog/modal-dialog.json"
+/*!******************************************************************!*\
+  !*** ./src/tokens/web/components/modal-dialog/modal-dialog.json ***!
+  \******************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"modal":{"meta":{"appearances":{"default":{"mapping":{"selector":{"web":".modal-dialog"}},"variantGroups":{"size":{"xs":{"selector":{"web":".modal-xs"}},"sm":{"selector":{"web":".modal-sm"}},"md":{"selector":{"web":".modal-md"}},"lg":{"selector":{"web":".modal-lg"}},"xl":{"selector":{"web":".modal-xl"}},"full-screen":{"selector":{"web":".modal-full-screen"}}}}},"sheet":{"mapping":{"selector":{"web":".modal-dialog.modal-sheet"}},"variantGroups":{"position":{"top":{"selector":{"web":".sheet-position-top"}},"right":{"selector":{"web":".sheet-position-right"}},"bottom":{"selector":{"web":".sheet-position-bottom"}},"left":{"selector":{"web":".sheet-position-left"}}}}}}},"mapping":{"align-items":{"value":"center","type":"space","attributes":{"subtype":"space","description":"Controls the vertical alignment of modal dialogs (pop-up windows that appear over the main content). \'center\' positions the modal in the middle of the screen vertically, \'flex-start\' positions it at the top, \'flex-end\' positions it at the bottom, and \'stretch\' makes it fill the full height.<br>CSS variable: --wm-modal-align-items"}},"justify-content":{"value":"center","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal alignment of modal dialogs (pop-up windows that appear over the main content). \'center\' positions the modal in the middle of the screen horizontally, \'flex-start\' positions it at the left, \'flex-end\' positions it at the right, and \'space-between\'/\'space-around\' distributes space around the modal.<br>CSS variable: --wm-modal-justify-content"}},"margin":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the margin around modal dialogs (pop-up windows that appear over the main content). This creates space between the modal and the edges of the screen, ensuring the modal doesn\'t touch the screen edges.<br>CSS variable: --wm-modal-margin"}},"backdrop":{"opacity":{"value":"50%","type":"radius","attributes":{"subtype":"radius","description":"Controls the transparency of the modal backdrop (the dark overlay that appears behind modal dialogs). This determines how much the background content is dimmed when a modal is open.<br>CSS variable: --wm-modal-backdrop-opacity"}},"background":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the modal backdrop (the dark overlay that appears behind modal dialogs). This is the color that dims the background content when a modal is open.<br>CSS variable: --wm-modal-backdrop-background"}},"z-index":{"value":"999","type":"radius","attributes":{"subtype":"elevation","description":"Controls the stacking order of the modal backdrop (the dark overlay that appears behind modal dialogs). Higher values make the backdrop appear above other elements, ensuring it covers the background content.<br>CSS variable: --wm-modal-backdrop-z-index"}}},"z-index":{"value":"1000","type":"radius","attributes":{"subtype":"elevation","description":"Controls the stacking order of modal dialogs (pop-up windows that appear over the main content). Higher values make the modal appear above other elements, ensuring it\'s visible on top of all other content.<br>CSS variable: --wm-modal-z-index"}},"width":{"value":"600px","type":"space","attributes":{"subtype":"space","description":"Controls how wide modal dialogs appear (pop-up windows that appear over the main content). This determines the horizontal size of the modal window that users interact with.<br>CSS variable: --wm-modal-width"}},"height":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls how tall modal dialogs appear (pop-up windows that appear over the main content). \'auto\' lets the modal size itself based on its content, while specific values (px, %, em, rem, vh) set a fixed height.<br>CSS variable: --wm-modal-height"}},"background":{"value":"{color.surface.container.high.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of modal dialogs (pop-up windows that appear over the main content). This is the main background color that appears behind the modal content.<br>CSS variable: --wm-modal-background"}},"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of modal dialogs (pop-up windows that appear over the main content). This makes the modal appear with rounded corners for a softer appearance.<br>CSS variable: --wm-modal-radius"}},"header":{"padding":{"value":"{space.6.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside modal headers (the top section of modal dialogs that contains the title and close button). This creates breathing room around the header content.<br>CSS variable: --wm-modal-header-padding"}}},"title":{"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between title elements in modal dialogs (like the space between the title text and any icons). This creates visual separation between different parts of the modal title.<br>CSS variable: --wm-modal-title-gap"}},"font-size":{"value":"{h3.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the modal titles appear (the main heading text in modal dialogs). This affects the size of the title text that users see in the modal header.<br>CSS variable: --wm-modal-title-font-size"}},"font-family":{"value":"{h3.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for modal titles (the main heading text in modal dialogs). This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-modal-title-font-family"}},"font-weight":{"value":"{h3.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the modal titles appear (the main heading text in modal dialogs). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-modal-title-font-weight"}},"line-height":{"value":"{h3.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when modal titles wrap to multiple lines. This ensures proper spacing for the title text displayed in the modal header.<br>CSS variable: --wm-modal-title-line-height"}},"letter-spacing":{"value":"{h3.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in modal titles. This can help make the title text more readable and properly spaced.<br>CSS variable: --wm-modal-title-letter-spacing"}}},"body":{"padding":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside modal body content (the main content area of modal dialogs). This creates breathing room around the modal content.<br>CSS variable: --wm-modal-body-padding"}}},"footer":{"padding":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside modal footers (the bottom section of modal dialogs that contains action buttons). This creates breathing room around the footer content.<br>CSS variable: --wm-modal-footer-padding"}},"gap":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between footer elements in modal dialogs (like the space between action buttons). This creates visual separation between different footer elements.<br>CSS variable: --wm-modal-footer-gap"}}},"login":{"dialog":{"form":{"body":{"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of login dialog form body.<br>CSS variable: --wm-modal-login-dialog-form-body-padding"}}},"elements":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between login dialog form elements.<br>CSS variable: --wm-modal-login-dialog-form-elements-gap"}}}}}}},"appearances":{"default":{"variantGroups":{"size":{"xs":{"width":{"value":"440px","type":"space","attributes":{"subtype":"space"}}},"sm":{"width":{"value":"600px","type":"space","attributes":{"subtype":"space"}}},"md":{"width":{"value":"900px","type":"space","attributes":{"subtype":"space"}}},"lg":{"width":{"value":"1200px","type":"space","attributes":{"subtype":"space"}}},"xl":{"width":{"value":"1536px","type":"space","attributes":{"subtype":"space"}}},"full-screen":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space"}},"height":{"value":"100%","type":"space","attributes":{"subtype":"space"}},"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius"}}}}}},"sheet":{"mapping":{"width":{"value":"400px","type":"space","attributes":{"subtype":"space"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius"}},"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space"}}},"variantGroups":{"position":{"top":{"align-items":{"value":"flex-start","type":"space","attributes":{"subtype":"space"}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space"}}},"right":{"justify-content":{"value":"flex-end","type":"space","attributes":{"subtype":"space"}},"height":{"value":"100%","type":"space","attributes":{"subtype":"space"}}},"bottom":{"align-items":{"value":"flex-end","type":"space","attributes":{"subtype":"space"}},"width":{"value":"100%","type":"space","attributes":{"subtype":"space"}}},"left":{"justify-content":{"value":"flex-start","type":"space","attributes":{"subtype":"space"}},"height":{"value":"100%","type":"space","attributes":{"subtype":"space"}}}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_nav_nav_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_web_components_nav_nav_json"],{
+
+/***/ "./src/tokens/web/components/nav/nav.json"
+/*!************************************************!*\
+  !*** ./src/tokens/web/components/nav/nav.json ***!
+  \************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"nav":{"meta":{"mapping":{"selector":{"web":".nav.app-nav"},"states":{"hover":{"selector":{"web":" .app-nav-item:has(:hover)"}},"active":{"selector":{"web":" .app-nav-item:has(:active), .app-nav-item.active"}},"focus":{"selector":{"web":" .app-nav-item:has(:focus)"}}}}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of navigation components (menus and navigation bars that help users move around the application). This is the main background color that appears behind the navigation items.<br>CSS variable: --wm-nav-background"}},"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the external spacing around the navigation component (space outside the nav container). This separates the navigation from surrounding content.<br>CSS variable: --wm-nav-margin"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside navigation components (the space between the navigation content and its borders). This creates breathing room around the navigation items.<br>CSS variable: --wm-nav-padding"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of navigation items (individual menu options and links). This makes the navigation items appear with rounded corners for a softer appearance.<br>CSS variable: --wm-nav-item-radius"}},"width":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border thickness of the navigation container. Higher values create thicker borders.<br>CSS variable: --wm-nav-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of the navigation container. Allowed values: solid, dashed, dotted, none.<br>CSS variable: --wm-nav-border-style"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the navigation container. Use a color that contrasts the background for visibility.<br>CSS variable: --wm-nav-border-color"}}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow of the navigation container to create depth. Use to lift the nav above the page background.<br>CSS variable: --wm-nav-shadow"}},"item":{"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of individual navigation items (links/menu options).<br>CSS variable: --wm-nav-item-background"}},"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the external spacing around each navigation item (space between adjacent items).<br>CSS variable: --wm-nav-item-margin"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside each navigation item (space around the text/icon inside the item).<br>CSS variable: --wm-nav-item-padding"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of each navigation item. Use higher values for rounded chips/pills.<br>CSS variable: --wm-nav-item-border-radius"}},"width":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border thickness of each navigation item.<br>CSS variable: --wm-nav-item-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of each navigation item. Allowed values: solid, dashed, dotted, none.<br>CSS variable: --wm-nav-item-border-style"}},"color":{"value":"{color.inherit.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of each navigation item.<br>CSS variable: --wm-nav-item-border-color"}}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow of navigation items to add depth and focus.<br>CSS variable: --wm-nav-item-shadow"}},"caret":{"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of the caret indicator shown on items that open a submenu (the small triangle/arrow).<br>CSS variable: --wm-nav-item-caret-size"}}}},"states":{"active":{"item":{"background":{"value":"linear-gradient(105.79deg, ~\\"color-mix(in srgb, {color.secondary.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 44.21%, ~\\"color-mix(in srgb, {color.white.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 103.73%)","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color"}}}}},"hover":{"item":{"background":{"value":"linear-gradient(105.79deg, ~\\"color-mix(in srgb, {color.secondary.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 44.21%, ~\\"color-mix(in srgb, {color.white.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 103.73%)","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color"}}}}},"focus":{"item":{"background":{"value":"linear-gradient(105.79deg, ~\\"color-mix(in srgb, {color.secondary.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 44.21%, ~\\"color-mix(in srgb, {color.white.@.value}, transparent calc(100% - {opacity.hover.value}))\\" 103.73%)","type":"color","attributes":{"subtype":"color"}},"border":{"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_page-content_page-content_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_web_components_page-content_page-content_json"],{
+
+/***/ "./src/tokens/web/components/page-content/page-content.json"
+/*!******************************************************************!*\
+  !*** ./src/tokens/web/components/page-content/page-content.json ***!
+  \******************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"page":{"meta":{},"mapping":{"content":{"padding":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside page content areas (the main content sections of web pages). This creates breathing room around the page content.<br>CSS variable: --wm-page-content-padding"}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_page-footer_page-footer_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_web_components_page-footer_page-footer_json"],{
+
+/***/ "./src/tokens/web/components/page-footer/page-footer.json"
+/*!****************************************************************!*\
+  !*** ./src/tokens/web/components/page-footer/page-footer.json ***!
+  \****************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"footer":{"meta":{"mapping":{"selector":{"web":".app-footer"}}},"mapping":{"height":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls how tall page footers appear (the bottom sections of web pages that contain copyright, links, and other information). \'auto\' lets the footer size itself based on its content, while specific values (px, %, em, rem, vh) set a fixed height.<br>CSS variable: --wm-footer-height"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of page footers (the bottom sections of web pages that contain copyright, links, and other information). This is the main background color that appears behind the footer content.<br>CSS variable: --wm-footer-background"}},"color":{"@":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the default text color of page footers (the bottom sections of web pages that contain copyright, links, and other information). This determines what color the footer text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-footer-color"}},"muted":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the muted text color of page footers (the bottom sections of web pages that contain copyright, links, and other information). This is used for secondary or less important text in the footer, making it appear more subtle.<br>CSS variable: --wm-footer-color-muted"}}},"border":{"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of page footers (the bottom sections of web pages that contain copyright, links, and other information). This creates the outline that defines the footer boundaries.<br>CSS variable: --wm-footer-border-color"}},"style":{"value":"solid","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of page footers (the bottom sections of web pages that contain copyright, links, and other information). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-footer-border-style"}},"width":{"value":"1px 0px 0px 0px","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border width of page footers (the bottom sections of web pages that contain copyright, links, and other information). This determines how thick the footer border appears.<br>CSS variable: --wm-footer-border-width"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of page footers (the bottom sections of web pages that contain copyright, links, and other information). This makes the footer appear with rounded corners for a softer appearance.<br>CSS variable: --wm-footer-border-radius"}}},"shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around page footers (the bottom sections of web pages that contain copyright, links, and other information). This creates a subtle shadow that makes the footer appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-footer-shadow"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside page footers (the bottom sections of web pages that contain copyright, links, and other information). This creates breathing room around the footer content.<br>CSS variable: --wm-footer-padding"}}},"appearances":{}}}');
+
+/***/ }
+
+}]);