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

package/cjs/src_tokens_web_components_richtext-editor_richtext-editor_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_richtext-editor_richtext-editor_json"],{
+
+/***/ "./src/tokens/web/components/richtext-editor/richtext-editor.json"
+/*!************************************************************************!*\
+  !*** ./src/tokens/web/components/richtext-editor/richtext-editor.json ***!
+  \************************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"note":{"meta":{"mapping":{"selector":{"web":".app-richtexteditor"},"states":{"hover":{"selector":{"web":" .note-editor.note-frame .note-dropdown-item:hover"}},"active":{"selector":{"web":" .note-editor.note-frame .note-dropdown-item:active"}},"focus":{"selector":{"web":" .note-editor.note-frame .note-dropdown-item:focus"}}}}},"mapping":{"editor":{"toolbar":{"border":{"color":{"value":"{color.border.translucent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of rich text editor toolbars (the top section with formatting buttons like bold, italic, and alignment tools). This creates the outline that defines the toolbar boundaries.<br>CSS variable: --wm-note-editor-toolbar-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of rich text editor toolbars (the top section with formatting buttons like bold, italic, and alignment tools). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-note-editor-toolbar-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of rich text editor toolbars (the top section with formatting buttons like bold, italic, and alignment tools). This determines how thick the toolbar border appears.<br>CSS variable: --wm-note-editor-toolbar-border-width"}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between border elements in rich text editor toolbars (the top section with formatting buttons like bold, italic, and alignment tools). This creates visual separation between different parts of the toolbar border.<br>CSS variable: --wm-note-editor-toolbar-border-gap"}}},"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of rich text editor toolbars (the top section with formatting buttons like bold, italic, and alignment tools). This is the main background color that appears behind the toolbar buttons.<br>CSS variable: --wm-note-editor-toolbar-background"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside rich text editor toolbars (the top section with formatting buttons like bold, italic, and alignment tools). This creates breathing room around the toolbar buttons.<br>CSS variable: --wm-note-editor-toolbar-padding"}},"gap":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between toolbar elements in rich text editor toolbars (the top section with formatting buttons like bold, italic, and alignment tools). This creates visual separation between different toolbar button groups.<br>CSS variable: --wm-note-editor-toolbar-gap"}}},"border":{"color":{"value":"{color.border.translucent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around rich text editor containers (the main editing area where users type and format text). This creates the outline that defines the editor boundaries.<br>CSS variable: --wm-note-editor-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of rich text editor containers (the main editing area where users type and format text). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-note-editor-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around rich text editor containers (the main editing area where users type and format text). This determines how thick the editor border appears.<br>CSS variable: --wm-note-editor-border-width"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of rich text editor containers (the main editing area where users type and format text). This makes the editor corners slightly rounded for a softer appearance.<br>CSS variable: --wm-note-editor-border-radius"}}},"note":{"placeholder":{"pdding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside rich text editor placeholder text (the gray hint text that appears when the editor is empty). This creates breathing room around the placeholder text.<br>CSS variable: --wm-note-editor-placeholder-padding"}}},"code":{"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside code blocks in rich text editors (formatted code snippets that appear with special styling). This creates breathing room around the code content.<br>CSS variable: --wm-note-editor-code-padding"}},"background":{"value":"{color.on-warning.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of code blocks in rich text editors (formatted code snippets that appear with special styling). This creates a distinct background color for code content.<br>CSS variable: --wm-note-editor-code-background"}},"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of code blocks in rich text editors (formatted code snippets that appear with special styling). This determines what color the code text appears in.<br>CSS variable: --wm-note-editor-code-color"}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in code blocks in rich text editors (formatted code snippets). This affects the size of the text that users see in code blocks.<br>CSS variable: --wm-note-editor-code-font-size"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in code blocks in rich text editors (formatted code snippets). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-note-editor-code-font-weight"}},"family":{"value":"Menlo, Monaco, monospace, sans-serif","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for code blocks in rich text editors (formatted code snippets). This uses monospace fonts like Menlo and Monaco that are designed for displaying code with consistent character spacing.<br>CSS variable: --wm-note-editor-code-font-family"}}}}},"btn":{"group":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between button groups in rich text editor toolbars (collections of related formatting buttons like bold, italic, underline). This creates visual separation between different button groups.<br>CSS variable: --wm-note-editor-btn-group-gap"}}},"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside rich text editor toolbar buttons (the space between the button content and its borders). This creates breathing room around the button icons and text.<br>CSS variable: --wm-note-editor-btn-padding"}},"min":{"height":{"value":"28px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of rich text editor toolbar buttons (formatting buttons like bold, italic, and alignment tools). This ensures each button is tall enough to be easily clickable.<br>CSS variable: --wm-note-editor-btn-min-height"}}},"width":{"value":"28px","type":"space","attributes":{"subtype":"space","description":"Controls how wide rich text editor toolbar buttons appear (formatting buttons like bold, italic, and alignment tools). This determines the horizontal size of the toolbar buttons.<br>CSS variable: --wm-note-editor-btn-width"}},"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of rich text editor toolbar buttons (formatting buttons like bold, italic, and alignment tools). This makes the button corners slightly rounded for a softer appearance.<br>CSS variable: --wm-note-editor-btn-radius"}}},"dropdown":{"menu":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of dropdown menus in rich text editors (lists of options that appear when users click on formatting buttons). This is the main background color that appears behind the dropdown menu items.<br>CSS variable: --wm-note-editor-dropdown-menu-background"}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of dropdown menus in rich text editors (lists of options that appear when users click on formatting buttons). This makes the dropdown appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-note-editor-dropdown-menu-border-radius"}}},"box":{"shadow":{"value":"{elevation.shadow.2.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around dropdown menus in rich text editors (lists of options that appear when users click on formatting buttons). This creates a subtle shadow that makes the dropdown appear to float above the background.<br>CSS variable: --wm-note-editor-dropdown-menu-box-shadow"}}},"width":{"value":"200px","type":"space","attributes":{"subtype":"space","description":"Controls how wide dropdown menus appear in rich text editors (lists of options that appear when users click on formatting buttons). This determines the horizontal size of the dropdown menu container.<br>CSS variable: --wm-note-editor-dropdown-menu-width"}},"max":{"height":{"value":"250px","type":"space","attributes":{"subtype":"space","description":"Controls the maximum height of dropdown menus in rich text editors (lists of options that appear when users click on formatting buttons). This prevents dropdowns from becoming too tall and ensures they fit within the viewport.<br>CSS variable: --wm-note-editor-dropdown-menu-max-height"}}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside dropdown menus in rich text editors (the space between the dropdown content and its borders). This creates breathing room around the dropdown menu items.<br>CSS variable: --wm-note-editor-dropdown-menu-padding"}},"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 in rich text editors (individual options like font sizes, colors, or formatting styles). This determines whether the menu item text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-note-editor-dropdown-menu-item-font-family"}},"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in dropdown menu items in rich text editors (individual options like font sizes, colors, or formatting styles). This affects the size of the text that users see in the dropdown options.<br>CSS variable: --wm-note-editor-dropdown-menu-item-font-size"}},"weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in dropdown menu items in rich text editors (individual options like font sizes, colors, or formatting styles). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-note-editor-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 in rich text editors. This ensures proper spacing for the menu item text displayed in the dropdown.<br>CSS variable: --wm-note-editor-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 in rich text editors (individual options like font sizes, colors, or formatting styles). This can help make the menu item text more readable and properly spaced.<br>CSS variable: --wm-note-editor-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 in rich text editors (individual options like font sizes, colors, or formatting styles). This determines what color the menu item text appears in.<br>CSS variable: --wm-note-editor-dropdown-menu-item-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 dropdown menu items in rich text editors (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-note-editor-dropdown-menu-item-state-layer-opacity"}}}}}}},"pre":{"border":{"color":{"value":"{color.secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This creates the outline that defines the preformatted text boundaries.<br>CSS variable: --wm-note-editor-pre-border-color"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This determines how thick the preformatted text border appears.<br>CSS variable: --wm-note-editor-pre-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-note-editor-pre-border-style"}},"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This makes the preformatted text corners slightly rounded for a softer appearance.<br>CSS variable: --wm-note-editor-pre-border-radius"}}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This creates a distinct background color for preformatted content.<br>CSS variable: --wm-note-editor-pre-background"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This creates breathing room around the preformatted content.<br>CSS variable: --wm-note-editor-pre-padding"}},"font":{"family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This determines whether the preformatted text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-note-editor-pre-font-family"}},"size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This affects the size of the text that users see in preformatted content.<br>CSS variable: --wm-note-editor-pre-font-size"}},"weight":{"value":"{body.small.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-note-editor-pre-font-weight"}}},"line-height":{"value":"{body.small.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines in preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This ensures proper spacing for the preformatted text content.<br>CSS variable: --wm-note-editor-pre-line-height"}},"color":{"value":"{color.on-secondary.fixed.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This determines what color the preformatted text appears in.<br>CSS variable: --wm-note-editor-pre-color"}}},"blockquote":{"border":{"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the left border on blockquotes in rich text editors (quoted text that appears with special indentation and styling). This creates a colored vertical line that indicates quoted content.<br>CSS variable: --wm-note-editor-blockquote-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of blockquotes in rich text editors (quoted text that appears with special indentation and styling). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-note-editor-blockquote-border-style"}},"width":{"value":"4px","type":"space","attributes":{"subtype":"space","description":"Controls the thickness of the left border on blockquotes in rich text editors (quoted text that appears with special indentation and styling). This determines how thick the vertical border line appears.<br>CSS variable: --wm-note-editor-blockquote-border-width"}}},"margin":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the external spacing around blockquotes in rich text editors (quoted text that appears with special indentation and styling). This creates space between the blockquote and surrounding content.<br>CSS variable: --wm-note-editor-blockquote-margin"}},"inline":{"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside inline blockquotes in rich text editors (quoted text that appears within a paragraph). This creates breathing room around the quoted text content.<br>CSS variable: --wm-note-editor-blockquote-inline-padding"}},"block":{"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside block-level blockquotes in rich text editors (quoted text that appears as a separate block). This creates breathing room around the quoted text content.<br>CSS variable: --wm-note-editor-blockquote-block-padding"}}}},"para":{"dropdown":{"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside paragraph dropdown menus in rich text editors (formatting options that appear when users click on paragraph-related buttons). This creates breathing room around the dropdown menu items.<br>CSS variable: --wm-note-editor-para-dropdown-padding"}}}},"tooltip":{"border":{"color":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around tooltips in rich text editors (helpful hints that appear when users hover over toolbar buttons). This creates the outline that defines the tooltip boundaries.<br>CSS variable: --wm-note-editor-tooltip-border-color"}}},"content":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of tooltip content in rich text editors (helpful hints that appear when users hover over toolbar buttons). This determines what color the tooltip text appears in.<br>CSS variable: --wm-note-editor-tooltip-content-color"}},"background":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tooltip content in rich text editors (helpful hints that appear when users hover over toolbar buttons). This is the main background color that appears behind the tooltip text.<br>CSS variable: --wm-note-editor-tooltip-content-background"}},"padding":{"value":"{space.1.value} {space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tooltip content in rich text editors (the space between the tooltip text and its borders). This creates breathing room around the tooltip text.<br>CSS variable: --wm-note-editor-tooltip-content-padding"}},"max":{"width":{"value":"200px","type":"space","attributes":{"subtype":"space","description":"Controls the maximum width of tooltip content in rich text editors (helpful hints that appear when users hover over toolbar buttons). This prevents tooltips from becoming too wide and ensures they fit within the viewport.<br>CSS variable: --wm-note-editor-tooltip-content-max-width"}}}},"arrow":{"border":{"width":{"value":"5px","type":"space","attributes":{"subtype":"space","description":"Controls the thickness of the arrow border on tooltips in rich text editors (the small triangular pointer that connects the tooltip to the button). This determines how thick the arrow border appears.<br>CSS variable: --wm-note-editor-tooltip-arrow-border-width"}}},"margin":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing around tooltip arrows in rich text editors (the small triangular pointer that connects the tooltip to the button). This creates visual separation between the arrow and surrounding elements.<br>CSS variable: --wm-note-editor-tooltip-arrow-margin"}}},"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of tooltips in rich text editors (helpful hints that appear when users hover over toolbar buttons). This makes the tooltip corners slightly rounded for a softer appearance.<br>CSS variable: --wm-note-editor-tooltip-radius"}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in tooltips in rich text editors (helpful hints that appear when users hover over toolbar buttons). This affects the size of the text that users see in the tooltip.<br>CSS variable: --wm-note-editor-tooltip-font-size"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in tooltips in rich text editors (helpful hints that appear when users hover over toolbar buttons). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-note-editor-tooltip-font-weight"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for tooltips in rich text editors (helpful hints that appear when users hover over toolbar buttons). This determines whether the tooltip text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-note-editor-tooltip-font-family"}}},"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tooltips in rich text editors (the space between the tooltip content and its borders). This creates breathing room around the tooltip text.<br>CSS variable: --wm-note-editor-tooltip-padding"}},"margin":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the external spacing around tooltips in rich text editors (the space between the tooltip and surrounding elements). This creates visual separation between the tooltip and other interface elements.<br>CSS variable: --wm-note-editor-tooltip-margin"}}},"color":{"btn":{"size":{"value":"16px","type":"space","attributes":{"subtype":"space","description":"Controls the size of color picker buttons in rich text editors (buttons that allow users to select text colors). This determines how large the color selection buttons appear.<br>CSS variable: --wm-note-editor-color-btn-size"}}},"reset":{"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the color reset button in rich text editors (button that removes color formatting and returns to default). This creates a white background for the reset button.<br>CSS variable: --wm-note-editor-color-reset-background"}}},"select":{"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of color selection areas in rich text editors (areas where users can pick colors for text). This creates a white background for the color selection interface.<br>CSS variable: --wm-note-editor-color-select-background"}},"btn":{"width":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls how wide color selection buttons appear in rich text editors (buttons that allow users to select text colors). This determines the horizontal size of the color selection buttons.<br>CSS variable: --wm-note-editor-color-select-btn-width"}},"height":{"value":"14px","type":"space","attributes":{"subtype":"space","description":"Controls how tall color selection buttons appear in rich text editors (buttons that allow users to select text colors). This determines the vertical size of the color selection buttons.<br>CSS variable: --wm-note-editor-color-select-btn-height"}},"min":{"height":{"value":"14px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of color selection buttons in rich text editors (buttons that allow users to select text colors). This ensures each button is tall enough to be easily clickable.<br>CSS variable: --wm-note-editor-color-select-btn-min-height"}}}}},"dropdown":{"gap":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between elements in color picker dropdowns in rich text editors (color selection menus that appear when users click on color buttons). This creates visual separation between different color options.<br>CSS variable: --wm-note-editor-color-dropdown-gap"}},"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside color picker dropdowns in rich text editors (color selection menus that appear when users click on color buttons). This creates breathing room around the color options.<br>CSS variable: --wm-note-editor-color-dropdown-padding"}}},"palette":{"gap":{"xs":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between color palette items in rich text editors (small color swatches that users can click to select colors). This creates visual separation between different color options in the palette.<br>CSS variable: --wm-note-editor-color-palette-gap-xs"}}}},"row":{"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between rows of color options in rich text editors (horizontal rows of color swatches that users can click to select colors). This creates visual separation between different rows of color options.<br>CSS variable: --wm-note-editor-color-row-gap"}}}},"palette":{"width":{"value":"160px","type":"space","attributes":{"subtype":"space","description":"Controls how wide color palettes appear in rich text editors (color selection interfaces that show available colors). This determines the horizontal size of the color palette container.<br>CSS variable: --wm-note-editor-palette-width"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between color palette items in rich text editors (color selection interfaces that show available colors). This creates visual separation between different color options in the palette.<br>CSS variable: --wm-note-editor-palette-gap"}}},"dropzone":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of dropzone elements in rich text editors (areas where users can drag and drop files or content). This determines what color the dropzone text and borders appear in.<br>CSS variable: --wm-note-editor-dropzone-color"}},"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of dropzone elements in rich text editors (areas where users can drag and drop files or content). This creates a white background for the dropzone area.<br>CSS variable: --wm-note-editor-dropzone-background"}}},"td":{"border":{"color":{"value":"{color.border.translucent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around table cells in rich text editors (individual cells within tables that users can create). This creates the outline that defines the table cell boundaries.<br>CSS variable: --wm-note-editor-td-border-color"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around table cells in rich text editors (individual cells within tables that users can create). This determines how thick the table cell borders appear.<br>CSS variable: --wm-note-editor-td-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of table cells in rich text editors (individual cells within tables that users can create). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-note-editor-td-border-style"}}},"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside table cells in rich text editors (individual cells within tables that users can create). This creates breathing room around the table cell content.<br>CSS variable: --wm-note-editor-td-padding"}}},"popover":{"arrow":{"margin":{"value":"{space.2.value}","type":"space","attributes":{"description":"Controls the spacing around popover arrows in rich text editors (small triangular pointers that connect popovers to their trigger elements). This creates visual separation between the arrow and surrounding elements.<br>CSS variable: --wm-note-editor-popover-arrow-margin"}},"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popover arrows in rich text editors (small triangular pointers that connect popovers to their trigger elements). This creates a white background for the arrow.<br>CSS variable: --wm-note-editor-popover-arrow-background"}}},"margin":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the external spacing around popovers in rich text editors (floating panels that appear when users interact with certain elements). This creates visual separation between the popover and surrounding elements.<br>CSS variable: --wm-note-editor-popover-margin"}},"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popovers in rich text editors (floating panels that appear when users interact with certain elements). This is the main background color that appears behind the popover content.<br>CSS variable: --wm-note-editor-popover-background"}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of popovers in rich text editors (floating panels that appear when users interact with certain elements). This makes the popover corners slightly rounded for a softer appearance.<br>CSS variable: --wm-note-editor-popover-border-radius"}},"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around popovers in rich text editors (floating panels that appear when users interact with certain elements). This creates the outline that defines the popover boundaries.<br>CSS variable: --wm-note-editor-popover-border-color"}}},"padding":{"@":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popovers in rich text editors (floating panels that appear when users interact with certain elements). This creates breathing room around the popover content.<br>CSS variable: --wm-note-editor-popover-padding"}},"container":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover containers in rich text editors (floating panels that appear when users interact with certain elements). This creates breathing room around the popover container content.<br>CSS variable: --wm-note-editor-popover-padding-container"}}},"content":{"color":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of popover content in rich text editors (floating panels that appear when users interact with certain elements). This determines what color the popover text appears in.<br>CSS variable: --wm-note-editor-popover-content-color"}},"background":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of popover content in rich text editors (floating panels that appear when users interact with certain elements). This creates a white background for the popover content.<br>CSS variable: --wm-note-editor-popover-content-background"}},"min":{"width":{"value":"100px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of popover content in rich text editors (floating panels that appear when users interact with certain elements). This ensures popovers are wide enough to display their content properly.<br>CSS variable: --wm-note-editor-popover-content-min-width"}},"height":{"value":"30px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of popover content in rich text editors (floating panels that appear when users interact with certain elements). This ensures popovers are tall enough to display their content properly.<br>CSS variable: --wm-note-editor-popover-content-min-height"}}},"padding":{"value":"{space.1.value} {space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside popover content in rich text editors (the space between the popover text and its borders). This creates breathing room around the popover text.<br>CSS variable: --wm-note-editor-popover-content-padding"}}},"btn":{"group":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space"}}}}}},"editable":{"background":{"value":"{color.surface.container.low.@.value}","type":"color","attributes":{"subtype":"color"}},"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space"}},"color":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color"}},"hr":{"color":{"value":"{color.inverse.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}}},"states":{"hover":{"editor":{"dropdown":{"menu":{"item":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"blockquote":{"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}},"dropzone":{"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"opacity"}}}}},"focus":{"editor":{"dropdown":{"menu":{"item":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}}}},"active":{"editor":{"dropdown":{"menu":{"item":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}}}}}},"appearances":{}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_scrollbar_scrollbar_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_scrollbar_scrollbar_json"],{
+
+/***/ "./src/tokens/web/components/scrollbar/scrollbar.json"
+/*!************************************************************!*\
+  !*** ./src/tokens/web/components/scrollbar/scrollbar.json ***!
+  \************************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"scroll":{"bar":{"width":{"value":"6px","type":"space","attributes":{"subtype":"space","description":"Controls how wide scrollbars appear (the vertical scrollbar on the right side of content areas). This determines the thickness of the scrollbar track and thumb.<br>CSS variable: --wm-scroll-bar-width"}},"height":{"value":"6px","type":"space","attributes":{"subtype":"space","description":"Controls how tall scrollbars appear (the horizontal scrollbar at the bottom of content areas). This determines the thickness of the scrollbar track and thumb.<br>CSS variable: --wm-scroll-bar-height"}},"track":{"bg":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of scrollbar tracks (the channel that the scrollbar thumb moves along). This is the background area of the scrollbar.<br>CSS variable: --wm-scroll-bar-track-bg"}},"radius":{"value":"6px","type":"space","attributes":{"subtype":"radius","description":"Controls the corner rounding of scrollbar tracks (the channel that the scrollbar thumb moves along). This makes the scrollbar track appear with rounded corners.<br>CSS variable: --wm-scroll-bar-track-radius"}}},"thumb":{"bg":{"value":"{color.surface.container.high.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of scrollbar thumbs (the draggable part of the scrollbar that users click and drag to scroll). This is the interactive element of the scrollbar.<br>CSS variable: --wm-scroll-bar-thumb-bg"}},"radius":{"value":"6px","type":"space","attributes":{"subtype":"radius","description":"Controls the corner rounding of scrollbar thumbs (the draggable part of the scrollbar). This makes the scrollbar thumb appear with rounded corners.<br>CSS variable: --wm-scroll-bar-thumb-radius"}},"hover":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of scrollbar thumbs when users hover over them (the draggable part of the scrollbar). This provides visual feedback when users interact with the scrollbar.<br>CSS variable: --wm-scroll-bar-thumb-hover"}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_search_search_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_search_search_json"],{
+
+/***/ "./src/tokens/web/components/search/search.json"
+/*!******************************************************!*\
+  !*** ./src/tokens/web/components/search/search.json ***!
+  \******************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"search":{"meta":{"mapping":{"selector":{"web":".app-search"},"states":{"matched":{"selector":{"web":" li > a strong"}},"hover":{"selector":{"web":" li > a:hover:before"}},"active":{"selector":{"web":" li > a:active:before"}},"focus":{"selector":{"web":" li > a:focus:before"}}}}},"mapping":{"full":{"screen":{"background":{"value":"{color.surface.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the full-screen search overlay.<br>CSS variable: --wm-search-full-screen-background"}}}},"back":{"btn":{"margin":{"value":"{space.0.value} {space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls external spacing around the back button.<br>CSS variable: --wm-search-back-btn-margin"}}}},"dropdown":{"menu":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-background"}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-border-radius"}}},"box":{"shadow":{"value":"{elevation.shadow.2.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-box-shadow"}}},"height":{"value":"~\\"calc({search.mapping.dropdown.menu.item.height.value} * 6.5)\\"","type":"space","attributes":{"subtype":"space","description":"Controls the maximum height of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-height"}},"margin":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls external spacing around the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-margin"}},"z":{"index":{"value":"1060","type":"radius","attributes":{"subtype":"elevation","description":"Controls the z-index stacking order of the dropdown menu.<br>CSS variable: --wm-search-dropdown-menu-z-index"}}},"item":{"height":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls the height of dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-height"}},"font":{"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family for dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-font-family"}},"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-font-size"}},"weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the weight of dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-font-weight"}}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Sets the line height for dropdown menu item text.<br>CSS variable: --wm-search-dropdown-menu-item-line-height"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-color"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between elements within dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-gap"}},"padding":{"value":"{space.2.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal spacing within dropdown menu items.<br>CSS variable: --wm-search-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 overlay for dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-state-layer-color"}}}},"img":{"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of images in dropdown menu items.<br>CSS variable: --wm-search-dropdown-menu-item-img-radius"}}}},"group":{"item":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-color"}},"background":{"value":"{color.surface.container.low.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-background"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls spacing between elements within dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-gap"}},"padding":{"value":"{space.2.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal spacing within dropdown menu group items.<br>CSS variable: --wm-search-dropdown-menu-group-item-padding"}},"header":{"font-family":{"value":"{h4.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family for dropdown menu group item headers.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-font-family"}},"font-size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of dropdown menu group item header text.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-font-size"}},"font-weight":{"value":"{h4.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the weight of dropdown menu group item header text.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-font-weight"}},"line-height":{"value":"{h4.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Sets the line height for dropdown menu group item header text.<br>CSS variable: --wm-search-dropdown-menu-group-item-header-line-height"}}}}}},"state":{"layer":{"opacity":{"value":"0","type":"radius","attributes":{"subtype":"opacity","description":"Controls the opacity of the state layer overlay for dropdown items.<br>CSS variable: --wm-search-dropdown-state-layer-opacity"}}}}},"status":{"background":{"value":"{color.surface.dim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the status message area.<br>CSS variable: --wm-search-status-background"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Sets internal spacing within the status message area.<br>CSS variable: --wm-search-status-padding"}}},"btn":{"position":{"left":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left positioning of search buttons.<br>CSS variable: --wm-search-btn-position-left"}},"right":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"Controls the right positioning of search buttons.<br>CSS variable: --wm-search-btn-position-right"}}}},"states":{"matched":{"dropdown":{"menu":{"item":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}},"hover":{"dropdown":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"focus":{"dropdown":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"active":{"dropdown":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}}},"appearance":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_slider_slider_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_slider_slider_json"],{
+
+/***/ "./src/tokens/web/components/slider/slider.json"
+/*!******************************************************!*\
+  !*** ./src/tokens/web/components/slider/slider.json ***!
+  \******************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"slider":{"meta":{"mapping":{"selector":{"web":".app-slider"}},"appearances":{}},"mapping":{"height":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of slider tracks (the horizontal bar that represents the slider range). This determines the vertical size of the track. Acceptable units: px.<br>CSS variable: --wm-slider-track-height"}},"border-radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of slider tracks. This determines how rounded the corners of the track appear. Acceptable units: px.<br>CSS variable: --wm-slider-track-border-radius"}},"track":{"filled":{"background":{"value":"{color.surface.tint.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider filled tracks (the portion of the track from the start to the current value). This determines what color the filled track appears in.<br>CSS variable: --wm-slider-track-filled-background"}}},"unfilled":{"background":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider unfilled tracks (the portion of the track from the current value to the end). This determines what color the unfilled track appears in, typically matching the primary container theme color.<br>CSS variable: --wm-slider-track-unfilled-background"}}}},"handle":{"background":{"value":"{color.surface.tint.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider handle (the draggable handle that users interact with to set values). This determines what color the handle appears in.<br>CSS variable: --wm-slider-handle-background"}},"height":{"value":"{space.10.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of slider handles. This determines the vertical size of the handle. Acceptable units: px.<br>CSS variable: --wm-slider-handle-height"}},"width":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of slider handles. This determines the horizontal size of the handle. Acceptable units: px.<br>CSS variable: --wm-slider-handle-width"}},"border-radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of slider handles. This determines how rounded the corners of the handle appear. Acceptable units: px.<br>CSS variable: --wm-slider-handle-border-radius"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"description":"Controls the visual spacing between slider handles and the filled/unfilled track segments. Acceptable units: px.<br>CSS variable: --wm-slider-handle-gap"}}},"range":{"label":{"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-slider-range-label-color"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside labels (the space between the label text and its border). This creates breathing room around the label content.<br>CSS variable: --wm-slider-range-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-slider-range-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-slider-range-label-font-weight"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-slider-range-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-slider-range-label-background-color"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"description":"Controls the visual spacing between slider and the label segments. Acceptable units: px.<br>CSS variable: --wm-slider-range-label-gap"}}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_spinner_spinner_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_spinner_spinner_json"],{
+
+/***/ "./src/tokens/web/components/spinner/spinner.json"
+/*!********************************************************!*\
+  !*** ./src/tokens/web/components/spinner/spinner.json ***!
+  \********************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"spinner":{"meta":{"mapping":{"selector":{"web":".app-spinner","mobile":".app-spinner"}}},"mapping":{"min-height":{"value":"6rem","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of loading spinners (animated indicators that show content is loading). This ensures the spinner area is always tall enough to be visible and properly centered.<br>CSS variable: --wm-spinner-min-height"}},"background":{"@":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of loading spinners (the overlay that appears behind the spinner animation). This creates a backdrop that dims the content while loading.<br>CSS variable: --wm-spinner-background"}},"opacity":{"value":"0.3","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the spinner background overlay. Lower values make the background more transparent, higher values make it more opaque.<br>CSS variable: --wm-spinner-background-opacity"}}},"loading-data-msg":{"background":{"@":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of loading data messages (text that appears with the spinner to explain what\'s loading). This creates a backdrop for the loading message.<br>CSS variable: --wm-spinner-loading-data-msg-background"}},"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the loading data message background. This affects how visible the background overlay is behind the loading text.<br>CSS variable: --wm-spinner-loading-data-msg-background-opacity"}}},"color":{"value":"inherit","type":"color","attributes":{"subtype":"color","description":"Sets the text color of loading data messages (the text that appears with the spinner to explain what\'s loading). This determines the color of the loading message text.<br>CSS variable: --wm-spinner-loading-data-msg-color"}},"radius":{"value":"inherit","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of loading data messages (the text area that appears with the spinner). This makes the loading message area appear with rounded corners.<br>CSS variable: --wm-spinner-loading-data-msg-radius"}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_switch_switch_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_switch_switch_json"],{
+
+/***/ "./src/tokens/web/components/switch/switch.json"
+/*!******************************************************!*\
+  !*** ./src/tokens/web/components/switch/switch.json ***!
+  \******************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"switch":{"meta":{"mapping":{"selector":{"web":".app-switch"},"states":{"selected":{"selector":{"web":" > .btn-group > .btn.selected"}},"hover":{"selector":{"web":" > .btn-group > .btn:hover"}},"focus":{"selector":{"web":" > .btn-group > .btn:focus"}},"active":{"selector":{"web":" > .btn-group > .btn:active"}}}}},"mapping":{"btn":{"height":{"@":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls how tall switch buttons appear (segmented control buttons that allow users to toggle between different options). This determines the vertical size of each switch button.<br>CSS variable: --wm-switch-btn-height"}}},"padding":{"value":"{space.1.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons.<br>CSS variable: --wm-switch-btn-padding"}},"border":{"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around switch buttons. This creates the outline that defines the button shape and makes it visible to users.<br>CSS variable: --wm-switch-btn-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around switch buttons. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots, \'none\' removes the border.<br>CSS variable: --wm-switch-btn-border-style"}},"color":{"@":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around switch buttons. This determines the color of the outline that defines the button shape in its default/unselected state.<br>CSS variable: --wm-switch-btn-border-color"}}}},"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of switch buttons. When set to \'pill\', the buttons appear with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-switch-btn-radius"}},"icon":{"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large icons appear in switch buttons (symbols that represent different switch options). This affects the size of any icons used within the switch buttons.<br>CSS variable: --wm-switch-btn-icon-size"}}},"background":{"@":{"value":"none","type":"color","attributes":{"subtype":"color","description":"Sets the background color of switch buttons. When set to \'none\', the buttons have no background color, making them transparent.<br>CSS variable: --wm-switch-btn-background"}}},"color":{"@":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of switch buttons (the color of text content within the buttons). This should contrast well with the background for readability.<br>CSS variable: --wm-switch-btn-color"}}},"text-decoration":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration","description":"Controls the text decoration of switch buttons. \'none\' removes any decorative lines, \'underline\' adds a line under the text, \'overline\' adds a line above the text, \'line-through\' adds a line through the middle of the text.<br>CSS variable: --wm-switch-btn-text-decoration"}},"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 switch buttons. This creates visual feedback to show that the button is interactive and responsive to user actions.<br>CSS variable: --wm-switch-btn-state-layer-color"}}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the state layer that appears during user interactions (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-switch-btn-state-layer-opacity"}}}}},"states":{"hover":{"btn":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"focus":{"btn":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"active":{"btn":{"state":{"layer":{"opacity":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"selected":{"btn":{"background":{"@":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}}},"color":{"@":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}}},"border":{"color":{"@":{"value":"{color.outline.@.value}","type":"color"}}},"state":{"layer":{"color":{"@":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_tabs_tabs_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_tabs_tabs_json"],{
+
+/***/ "./src/tokens/web/components/tabs/tabs.json"
+/*!**************************************************!*\
+  !*** ./src/tokens/web/components/tabs/tabs.json ***!
+  \**************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"tabs":{"meta":{"mapping":{"selector":{"web":".app-tabs"},"states":{"hover":{"selector":{"web":" > .nav-tabs > .tab-header .tab-heading:hover:before"}},"focus":{"selector":{"web":" > .nav-tabs > .tab-header .tab-heading:focus:before"}},"active":{"selector":{"web":" > .nav-tabs > .tab-header.active, > .nav-tabs > .tab-header .tab-heading:active:before"}}}}},"mapping":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabs components (navigation interfaces that allow users to switch between different content sections). This is the main background color that appears behind the tab navigation and content.<br>CSS variable: --wm-tabs-background"}},"nav":{"border":{"width":{"value":"{border.width.0.value} {border.width.0.value} {border.width.base.value} {border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tab navigation (the section containing the tab headers). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tab navigation (the section containing the tab headers). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, and \'none\' removes the border.<br>CSS variable: --wm-tabs-nav-border-style"}},"color":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around tab navigation (the section containing the tab headers). This determines the color of the line that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-color"}}},"alignment":{"value":"flex-start","type":"string","attributes":{"subtype":"string","description":"Controls the alignment of tab navigation (the section containing the tab headers). \'flex-start\' aligns tabs to the left, \'center\' centers them, and \'flex-end\' aligns them to the right.<br>CSS variable: --wm-tabs-nav-alignment"}},"gap":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between individual tab headers within the tab navigation (the section containing the tab headers). This creates visual separation between each tab header.<br>CSS variable: --wm-tabs-nav-gap"}}},"item":{"heading":{"height":{"value":"48px","type":"space","attributes":{"subtype":"space","description":"Controls how tall tab item headings appear (the clickable tab labels that users click to switch between different content sections). This determines the vertical size of each tab header.<br>CSS variable: --wm-tabs-item-heading-height"}},"padding":{"value":"{space.2.value} {space.6.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tab item headings (the clickable tab labels that users click to switch between different content sections). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding"}},"font-size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size"}},"font-weight":{"value":"{h6.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-tabs-item-heading-font-weight"}},"font-family":{"value":"{h6.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for tab item headings (the clickable tab labels that users click to switch between different content sections). This determines whether the tab text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-tabs-item-heading-font-family"}},"line-height":{"value":"{h6.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when tab item headings wrap to multiple lines. This ensures proper spacing for the tab text displayed in the tab headers.<br>CSS variable: --wm-tabs-item-heading-line-height"}},"letter-spacing":{"value":"{h6.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in tab item headings (the clickable tab labels that users click to switch between different content sections). This can help make the tab text more readable and properly spaced.<br>CSS variable: --wm-tabs-item-heading-letter-spacing"}},"color":{"@":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of tab item headings (the clickable tab labels that users click to switch between different content sections). This determines what color the tab text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tabs-item-heading-color"}}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab item headings (the clickable tab labels that users click to switch between different content sections). This is the color that appears behind the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-background"}},"border":{"width":{"value":"0px","type":"space","attributes":{"subtype":"border-width","description":"Controls the border width of tab item headings. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of tab item headings. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-tabs-item-heading-border-style"}},"color":{"value":"{color.border.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tab item headings.<br>CSS variable: --wm-tabs-item-heading-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of tab item headings, determining how rounded the corners appear.<br>CSS variable: --wm-tabs-item-heading-border-radius"}}},"state":{"layer":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-color"}},"opacity":{"value":"0","type":"radius","attributes":{"subtype":"radius","description":"Controls the opacity of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-opacity"}}}},"indicator":{"height":{"value":"3px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tab item heading indicators. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height"}},"width":{"value":"~\\"calc(100% - {space.12.value})\\"","type":"space","attributes":{"subtype":"space","description":"Controls the width of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-width"}},"radius":{"value":"{radius.md.value} {radius.md.value} {radius.none.value} {radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-radius"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-background"}}}}},"content":{"background":{"value":"inherit","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab content.<br>CSS variable: --wm-tabs-content-background"}}},"body":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls padding of tab body content.<br>CSS variable: --wm-tabs-body-padding"}},"height":{"value":"100px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tab body content. Acceptable units: px, em, rem, vh.<br>CSS variable: --wm-tabs-body-height"}}},"states":{"hover":{"item":{"heading":{"state":{"layer":{"opacity":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"focus":{"item":{"heading":{"state":{"layer":{"opacity":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}}},"active":{"item":{"heading":{"indicator":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_tile_tile_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_tile_tile_json"],{
+
+/***/ "./src/tokens/web/components/tile/tile.json"
+/*!**************************************************!*\
+  !*** ./src/tokens/web/components/tile/tile.json ***!
+  \**************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"tile":{"meta":{"appearances":{"default":{"mapping":{"selector":{"web":".app-tile","mobile":".app-tile"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".bg-default","web":".bg-default"}},"primary":{"selector":{"mobile":".bg-primary","web":".bg-primary"}},"secondary":{"selector":{"mobile":".bg-secondary","web":".bg-secondary"}},"tertiary":{"selector":{"mobile":".bg-tertiary","web":".bg-tertiary"}},"success":{"selector":{"mobile":".bg-success","web":".bg-success"}},"info":{"selector":{"mobile":".bg-info","web":".bg-info"}},"warning":{"selector":{"mobile":".bg-warning","web":".bg-warning"}},"danger":{"selector":{"mobile":".bg-danger","web":".bg-danger"}}}}},"filled":{"mapping":{"selector":{"web":".app-tile","mobile":".app-tile"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".bg-default-filled","web":".bg-default-filled"}},"primary":{"selector":{"mobile":".bg-primary-filled","web":".bg-primary-filled"}},"secondary":{"selector":{"mobile":".bg-secondary-filled","web":".bg-secondary-filled"}},"tertiary":{"selector":{"mobile":".bg-tertiary-filled","web":".bg-tertiary-filled"}},"success":{"selector":{"mobile":".bg-success-filled","web":".bg-success-filled"}},"info":{"selector":{"mobile":".bg-info-filled","web":".bg-info-filled"}},"warning":{"selector":{"mobile":".bg-warning-filled","web":".bg-warning-filled"}},"danger":{"selector":{"mobile":".bg-danger-filled","web":".bg-danger-filled"}}}}}}},"mapping":{"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tile components (rectangular content blocks that hold information). This is the main background color that appears behind the tile content.<br>CSS variable: --wm-tile-background"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of tile components (the color of text content within rectangular content blocks). This should contrast well with the background color for readability.<br>CSS variable: --wm-tile-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of tile components (rectangular content blocks). This makes the tiles appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-tile-radius"}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around tile components (rectangular content blocks). This creates a subtle shadow that makes the tiles appear to float above the background, giving them depth and elevation.<br>CSS variable: --wm-tile-shadow"}}},"appearances":{"default":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"value":"{color.surface.container.low.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}}},"primary":{"background":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"secondary":{"background":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"tertiary":{"background":{"value":"{color.tertiary.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}},"success":{"background":{"value":"{color.success.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}}},"info":{"background":{"value":"{color.info.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}}},"warning":{"background":{"value":"{color.warning.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}}},"danger":{"background":{"value":"{color.error.container.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}}}}}},"filled":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color"}}},"primary":{"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-primary.@.value}","type":"color","attributes":{"subtype":"color"}}},"secondary":{"background":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color"}}},"tertiary":{"background":{"value":"{color.tertiary.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-tertiary.@.value}","type":"color","attributes":{"subtype":"color"}}},"success":{"background":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-success.@.value}","type":"color","attributes":{"subtype":"color"}}},"info":{"background":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color"}}},"warning":{"background":{"value":"{color.warning.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-warning.@.value}","type":"color","attributes":{"subtype":"color"}}},"danger":{"background":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color"}},"color":{"value":"{color.on-error.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_time_time_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_time_time_json"],{
+
+/***/ "./src/tokens/web/components/time/time.json"
+/*!**************************************************!*\
+  !*** ./src/tokens/web/components/time/time.json ***!
+  \**************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"timepicker":{"meta":{},"mapping":{"input":{"font-family":{"value":"{h3.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for time picker input fields (where users enter hours, minutes, and seconds). This determines whether the time values appear in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-timepicker-input-font-family"}},"font-size":{"value":"{h3.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the time values appear in time picker input fields (where users enter hours, minutes, and seconds). This affects the size of the time numbers that users see and interact with.<br>CSS variable: --wm-timepicker-input-font-size"}},"font-weight":{"value":"{h3.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the time values appear in time picker input fields. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-timepicker-input-font-weight"}},"line-height":{"value":"{h3.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when time picker input text wraps to multiple lines. This ensures proper spacing for time values displayed in the input fields.<br>CSS variable: --wm-timepicker-input-line-height"}},"letter-spacing":{"value":"{h3.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in time picker input fields. This can help make time values more readable and properly spaced.<br>CSS variable: --wm-timepicker-input-letter-spacing"}},"width":{"value":"60px","type":"space","attributes":{"subtype":"space","description":"Controls how wide time picker input fields appear (the boxes where users enter hours, minutes, and seconds). This determines the horizontal space available for time values.<br>CSS variable: --wm-timepicker-input-width"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside time picker input fields (the space between the time values and the field borders). This creates breathing room around the time numbers.<br>CSS variable: --wm-timepicker-input-padding"}},"border":{"width":{"value":"{border.width.0.value} {border.width.0.value} {border.width.base.value} {border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around time picker input fields. This creates a bottom border to separate the time input from other elements.<br>CSS variable: --wm-timepicker-input-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around time picker input fields. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots, \'none\' removes the border.<br>CSS variable: --wm-timepicker-input-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around time picker input fields. This determines the color of the outline that defines the time input area.<br>CSS variable: --wm-timepicker-input-border-color"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of time picker input fields. When set to \'none\', the fields have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-timepicker-input-border-radius"}}}},"background":{"value":"{color.surface.container.high.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of time picker components (the dropdown panel that appears when users click to select time). This is the main background color that appears behind the time selection interface.<br>CSS variable: --wm-timepicker-background"}},"border":{"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of time picker components (the dropdown panel that appears when users click to select time). This makes the time picker appear with rounded corners for a softer appearance.<br>CSS variable: --wm-timepicker-border-radius"}}},"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"radius","description":"Controls the internal spacing inside time picker components (the space between the time selection interface and the panel borders). This creates breathing room around the time selection controls.<br>CSS variable: --wm-timepicker-padding"}},"period":{"selector":{"border":{"@":{"value":"{border.width.base.value} {border.style.base.value} {color.outline.@.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border styling of time picker period selectors (AM/PM buttons that users click to choose morning or afternoon time). This creates the outline that defines the period selector buttons.<br>CSS variable: --wm-timepicker-period-selector-border"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of time picker period selectors (AM/PM buttons). This makes the period selector buttons appear with rounded corners for a softer appearance.<br>CSS variable: --wm-timepicker-period-selector-border-radius"}}},"background":{"value":"{color.tertiary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of time picker period selectors (AM/PM buttons that users click to choose morning or afternoon time). This is the main background color that appears behind the period selector buttons.<br>CSS variable: --wm-timepicker-period-selector-background"}},"color":{"value":"{color.on-tertiary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of time picker period selectors (the AM/PM text that appears on the period selector buttons). This should contrast well with the background for readability.<br>CSS variable: --wm-timepicker-period-selector-color"}},"font-family":{"value":"{h5.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for time picker period selectors (the AM/PM text). This determines whether the period text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-timepicker-period-selector-font-family"}},"font-size":{"value":"{h5.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the period selector text appears (the AM/PM text). This affects the size of the period text that users see and interact with.<br>CSS variable: --wm-timepicker-period-selector-font-size"}},"font-weight":{"value":"{h5.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the period selector text appears (the AM/PM text). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-timepicker-period-selector-font-weight"}},"line-height":{"value":"{h5.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when period selector text wraps to multiple lines. This ensures proper spacing for the AM/PM text displayed on the buttons.<br>CSS variable: --wm-timepicker-period-selector-line-height"}},"letter-spacing":{"value":"{h5.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in period selector text (the AM/PM text). This can help make the period text more readable and properly spaced.<br>CSS variable: --wm-timepicker-period-selector-letter-spacing"}}}},"btn":{"padding":{"value":"{space.1.value} {space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside time picker buttons (the space between the button content and its border). This creates breathing room around the button text and icons.<br>CSS variable: --wm-timepicker-btn-padding"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of time picker buttons (navigation and control buttons in the time picker interface). This makes the buttons appear with rounded corners for a softer appearance.<br>CSS variable: --wm-timepicker-btn-border-radius"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around time picker buttons. This determines the color of the outline that defines the button shape.<br>CSS variable: --wm-timepicker-btn-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around time picker buttons. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots, \'none\' removes the border.<br>CSS variable: --wm-timepicker-btn-border-style"}},"width":{"value":"{border.width.0.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around time picker buttons. When set to 0, there\'s no visible border. Higher values create thicker borders around the buttons.<br>CSS variable: --wm-timepicker-btn-border-width"}}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of time picker buttons. When set to \'transparent\', the buttons have no background color, making them transparent.<br>CSS variable: --wm-timepicker-btn-background"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color"}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_toast_toast_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_toast_toast_json"],{
+
+/***/ "./src/tokens/web/components/toast/toast.json"
+/*!****************************************************!*\
+  !*** ./src/tokens/web/components/toast/toast.json ***!
+  \****************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"toast":{"meta":{"appearances":{"filled":{"mapping":{"selector":{"web":".toast-container .toast"}},"variantGroups":{"status":{"default":{"selector":{"web":" "}},"success":{"selector":{"web":".toast-success "}},"info":{"selector":{"web":".toast-info "}},"warning":{"selector":{"web":".toast-warning "}},"error":{"selector":{"web":".toast-error "}}}}}}},"mapping":{"container":{"background":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of toast notifications (pop-up messages that appear temporarily to inform users about actions or status). This is the main background color that appears behind the toast content.<br>CSS variable: --wm-toast-container-background"}},"color":{"value":"{color.on-info.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of toast notifications (pop-up messages that appear temporarily to inform users). This should contrast well with the background for readability.<br>CSS variable: --wm-toast-container-color"}},"width":{"value":"344px","type":"space","attributes":{"subtype":"space","description":"Controls how wide toast notifications appear (pop-up messages that appear temporarily to inform users). This determines the horizontal size of the toast message box.<br>CSS variable: --wm-toast-container-width"}},"shadow":{"value":"{elevation.shadow.3.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around toast notifications (pop-up messages that appear temporarily). This creates a subtle shadow that makes the toast appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-toast-container-shadow"}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of toast notifications (pop-up messages that appear temporarily). This makes the toast appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-toast-container-border-radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around toast notifications (pop-up messages that appear temporarily). This creates the outline that defines the toast shape and makes it visible to users.<br>CSS variable: --wm-toast-container-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around toast notifications. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots, \'none\' removes the border.<br>CSS variable: --wm-toast-container-border-style"}},"color":{"value":"{color.info.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around toast notifications (pop-up messages that appear temporarily). This determines the color of the outline that defines the toast shape.<br>CSS variable: --wm-toast-container-border-color"}}},"padding":{"block":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical padding inside toast notifications (the space between the toast content and the top/bottom borders). This creates breathing room around the toast content vertically.<br>CSS variable: --wm-toast-container-padding-block"}},"inline":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal padding inside toast notifications (the space between the toast content and the left/right borders). This creates breathing room around the toast content horizontally.<br>CSS variable: --wm-toast-container-padding-inline"}}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between different elements within toast notifications (like the space between the title and message text). This creates visual separation between toast content elements.<br>CSS variable: --wm-toast-container-gap"}}},"title":{"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for toast notification titles (the main heading text in pop-up messages). This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-toast-title-font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the toast notification titles appear (the main heading text in pop-up messages). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-toast-title-font-weight"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the toast notification titles appear (the main heading text in pop-up messages). This affects the size of the title text that users see in the toast.<br>CSS variable: --wm-toast-title-font-size"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when toast notification titles wrap to multiple lines. This ensures proper spacing for the title text displayed in the toast.<br>CSS variable: --wm-toast-title-line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in toast notification titles. This can help make the title text more readable and properly spaced.<br>CSS variable: --wm-toast-title-letter-spacing"}}},"message":{"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for toast notification messages (the descriptive text in pop-up messages). This determines whether the message text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-toast-message-font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the toast notification messages appear (the descriptive text in pop-up messages). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-toast-message-font-weight"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the toast notification messages appear (the descriptive text in pop-up messages). This affects the size of the message text that users see in the toast.<br>CSS variable: --wm-toast-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 toast notification messages wrap to multiple lines. This ensures proper spacing for the message text displayed in the toast.<br>CSS variable: --wm-toast-message-line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in toast notification messages. This can help make the message text more readable and properly spaced.<br>CSS variable: --wm-toast-message-letter-spacing"}}},"icon":{"@":{"value":"\\"\\\\f2ff\\"","type":"radius","attributes":{"subtype":"icon-size","description":"Sets the icon content for toast notifications (the symbol that appears in pop-up messages to indicate the type of notification). This determines which icon symbol is displayed in the toast.<br>CSS variable: --wm-toast-icon"}},"size":{"value":"{icon.size.md.value}","type":"radius","attributes":{"subtype":"icon-size","description":"Controls how large the toast notification icons appear (the symbols that appear in pop-up messages). This affects the size of the icon symbols that users see in the toast.<br>CSS variable: --wm-toast-icon-size"}}},"position":{"top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the top of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far down from the top edge the toast will be positioned.<br>CSS variable: --wm-toast-position-top"}},"left":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the left edge of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far from the left edge the toast will be positioned.<br>CSS variable: --wm-toast-position-left"}},"right":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the right edge of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far from the right edge the toast will be positioned.<br>CSS variable: --wm-toast-position-right"}},"bottom":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the distance from the bottom of the screen where toast notifications appear (pop-up messages that appear temporarily). This determines how far up from the bottom edge the toast will be positioned.<br>CSS variable: --wm-toast-position-bottom"}}}},"appearances":{"filled":{"variantGroups":{"status":{"default":{"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"}}}},"icon":{"@":{"value":"\\"\\\\f1cf\\"","type":"radius","attributes":{"subtype":"icon-size"}}}},"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"}}}},"icon":{"@":{"value":"\\"\\\\f1cf\\"","type":"radius","attributes":{"subtype":"icon-size"}}}},"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"}}}},"icon":{"@":{"value":"\\"\\\\f2ff\\"","type":"radius","attributes":{"subtype":"icon-size"}}}},"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"}}}},"icon":{"@":{"value":"\\"\\\\f24c\\"","type":"radius","attributes":{"subtype":"icon-size"}}}},"error":{"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"}}}},"icon":{"@":{"value":"\\"\\\\f24d\\"","type":"radius","attributes":{"subtype":"icon-size"}}}}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_toggle_toggle_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_toggle_toggle_json"],{
+
+/***/ "./src/tokens/web/components/toggle/toggle.json"
+/*!******************************************************!*\
+  !*** ./src/tokens/web/components/toggle/toggle.json ***!
+  \******************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"toggle":{"meta":{"mapping":{"selector":{"web":".app-checkbox"},"states":{"hover":{"selector":{"web":".app-toggle label > input[type=\'checkbox\']:hover"}},"focus":{"selector":{"web":".app-toggle label > input[type=\'checkbox\']:focus"}},"active":{"selector":{"web":".app-toggle label > input[type=\'checkbox\']:active"}},"checked":{"selector":{"web":".app-toggle label:has(>input[type=\'checkbox\']:checked)"}}}}},"mapping":{"width":{"value":"52px","type":"space","attributes":{"subtype":"space","description":"Controls how wide toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the horizontal size of the toggle switch track.<br>CSS variable: --wm-toggle-width"}},"height":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls how tall toggle switches appear (on/off switches that users can flip to enable or disable features). This determines the vertical size of the toggle switch track.<br>CSS variable: --wm-toggle-height"}},"background":{"@":{"value":"{color.surface.container.highest.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of toggle switches (the track that the toggle handle slides along). This is the main background color of the toggle switch in its default/off state.<br>CSS variable: --wm-toggle-background"}}},"border":{"width":{"value":"2px","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around toggle switches. This creates the outline that defines the toggle switch shape and makes it visible to users.<br>CSS variable: --wm-toggle-border-width"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around toggle switches. This determines the color of the outline that defines the toggle switch shape in its default/off state.<br>CSS variable: --wm-toggle-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around toggle switches. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots, \'none\' removes the border.<br>CSS variable: --wm-toggle-border-style"}}},"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of toggle switches. When set to \'pill\', the toggle appears with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-toggle-radius"}},"state":{"layer":{"size":{"value":"40px","type":"space","attributes":{"subtype":"space","description":"Controls the size of the invisible clickable area around toggle switches (the state layer). This area is larger than the visible toggle, making it easier for users to click and interact with the toggle.<br>CSS variable: --wm-toggle-state-layer-size"}},"color":{"@":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the state layer that appears when users hover, focus, or interact with toggle switches. This creates visual feedback to show that the toggle is interactive and responsive to user actions.<br>CSS variable: --wm-toggle-state-layer-color"}}},"opacity":{"@":{"value":"0","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of the state layer that appears during user interactions (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-toggle-state-layer-opacity"}}}}},"handle":{"size":{"@":{"value":"16px","type":"space","attributes":{"subtype":"space","description":"Controls the size of toggle handles (the circular element that slides along the toggle track). This determines how large the draggable part of the toggle appears.<br>CSS variable: --wm-toggle-handle-size"}}},"color":{"@":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of toggle handles (the circular element that slides along the toggle track). This determines what color the draggable part of the toggle appears in.<br>CSS variable: --wm-toggle-handle-color"}}}},"states":{"hover":{"state":{"layer":{"opacity":{"hover":{"value":"{opacity.hover.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"focus":{"state":{"layer":{"opacity":{"focus":{"value":"{opacity.focus.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"active":{"state":{"layer":{"opacity":{"active":{"value":"{opacity.active.value}","type":"radius","attributes":{"subtype":"opacity"}}}}}},"checked":{"handle":{"size":{"@":{"value":"16px","type":"space","attributes":{"subtype":"space"}}},"color":{"@":{"value":"{color.on-secondary.@.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"}}},"state":{"layer":{"color":{"@":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color"}}}}}}}}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_tree_tree_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_tree_tree_json"],{
+
+/***/ "./src/tokens/web/components/tree/tree.json"
+/*!**************************************************!*\
+  !*** ./src/tokens/web/components/tree/tree.json ***!
+  \**************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"tree":{"meta":{"mapping":{"selector":{"web":".app-tree:not(.app-tree-custom)"},"states":{"hover":{"selector":{"web":" li a:has(:hover)"}},"selected":{"selector":{"web":" li[treenode].selected>a, li[treenode].selected>span, li[treenode].selected>span::before, li[treenode].selected .curSelectedNode .node_name"}}}},"appearances":{}},"mapping":{"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Outer margin around the tree.<br>CSS variable: --wm-tree-margin"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Inner padding of the tree root.<br>CSS variable: --wm-tree-padding"}},"font-family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Font stack for tree labels.<br>CSS variable: --wm-tree-font-family"}},"node":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Default (resting) text color for tree node labels.<br>CSS variable: --wm-tree-node-color"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Default (resting) label background for tree nodes.<br>CSS variable: --wm-tree-node-background"}},"radius":{"value":"0px","type":"radius","attributes":{"subtype":"radius","description":"Border radius for tree node links and icon controls in the default state.<br>CSS variable: --wm-tree-node-radius"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Inner padding of the tree root.<br>CSS variable: --wm-tree-node-padding"}},"margin":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Outer margin of each tree node.<br>CSS variable: --wm-tree-node-margin"}},"height":{"value":"30px","type":"space","attributes":{"subtype":"space","description":"ZTree: height of the tree node. <br>CSS variable: --wm-tree-node-height"}},"width":{"value":"auto","type":"space","attributes":{"subtype":"space","description":"ZTree: width of the tree node. <br>CSS variable: --wm-tree-node-width"}},"label":{"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"ZTree: <code>.app-tree li a</code> <code>font-size</code>.<br>CSS variable: --wm-tree-node-label-font-size"}},"font-weight":{"value":"inherit","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-tree-node-label-font-weight"}},"text-align":{"value":"start","type":"text","attributes":{"subtype":"text-align","description":"Sets the text alignment of labels (text elements that describe or identify other content). This determines how the label text appears in relation to the surrounding content.<br>CSS variable: --wm-tree-node-label-text-align"}},"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-tree-node-label-letter-spacing"}},"text-decoration":{"value":"none","type":"text","attributes":{"subtype":"text-decoration","description":"Sets the text decoration of labels (text elements that describe or identify other content). This determines what decoration the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tree-node-label-text-decoration"}}},"child-indent":{"value":"0 0 0 20px","type":"space","attributes":{"subtype":"space","description":"Nested list indent.<br>CSS variable: --wm-tree-node-child-indent"}},"icon":{"size":{"value":"14px","type":"space","attributes":{"subtype":"icon-size","description":"ZTree: size of the tree node icon. <br>CSS variable: --wm-tree-node-icon-size"}},"align-items":{"value":"center","type":"font","attributes":{"subtype":"font-family","description":"ZTree: align-items of the tree node icon. <br>CSS variable: --wm-tree-node-icon-align-items"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Default (resting) expand/collapse icon color.<br>CSS variable: --wm-tree-node-icon-color"}}}},"states":{"hover":{"node":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Label text color when hovering a tree link.<br>CSS variable: --wm-tree-node-color"}},"background":{"value":"{color.transparent.value}","type":"color","attributes":{"subtype":"color","description":"Label background when hovering a tree link.<br>CSS variable: --wm-tree-node-background"}},"icon":{"color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Icon color when hovering expand/collapse controls (sibling link).<br>CSS variable: --wm-tree-node-icon-color"}}},"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Border radius for the tree node link on hover.<br>CSS variable: --wm-tree-node-radius"}}}},"selected":{"node":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Label text color for a selected tree node.<br>CSS variable: --wm-tree-node-color"}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Label background for a selected tree node.<br>CSS variable: --wm-tree-node-background"}},"icon":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Expand/collapse icon color for a selected tree node.<br>CSS variable: --wm-tree-node-icon-color"}}},"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Border radius for the selected tree node link.<br>CSS variable: --wm-tree-node-radius"}}}}}},"appearances":{}}}');
+
+/***/ }
+
+}]);

package/cjs/src_tokens_web_components_video_video_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_video_video_json"],{
+
+/***/ "./src/tokens/web/components/video/video.json"
+/*!****************************************************!*\
+  !*** ./src/tokens/web/components/video/video.json ***!
+  \****************************************************/
+(module) {
+
+module.exports = /*#__PURE__*/JSON.parse('{"video":{"mapping":{"width":{"value":"300px","type":"space","attributes":{"subtype":"space","description":"Controls how wide video players appear on the page. This determines the horizontal size of the video player window that users interact with to play video content.<br>CSS variable: --wm-video-width"}},"height":{"value":"150px","type":"space","attributes":{"subtype":"space","description":"Controls how tall video players appear on the page. This determines the vertical size of the video player window that users interact with to play video content.<br>CSS variable: --wm-video-height"}}},"appearances":{}}}');
+
+/***/ }
+
+}]);