@wavemaker/foundation-css 11.15.1-rc.6451 → 11.15.2-rc.249

package/cjs/src_tokens_mobile_components_switch_switch_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"switch":{"meta":{"mapping":{"selector":{"mobile":".app-switch"},"states":{"selected":{"selector":{"mobile":"-btn-selected, .app-switch-btn-selected-text"}},"disabled":{"selector":{"mobile":"-disabled"}}}}},"mapping":{"button":{"background":{"color":{"value":"{color.surface.@.value}","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-button-background-color"}}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of switch button text. This affects how large the text appears on switch buttons. Acceptable units: px.<br>CSS variable: --wm-switch-button-font-size"}},"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of switch button text. This determines which font is used for the text on switch buttons.<br>CSS variable: --wm-switch-button-font-family"}},"weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of switch button text. This affects how bold the text appears on switch buttons.<br>CSS variable: --wm-switch-button-font-weight"}}},"text":{"transform":{"value":"capitalize","type":"font","attributes":{"subtype":"text-transform","description":"Controls text transformation for switch button text (the text content within clickable buttons). \'none\' keeps the original case, \'uppercase\' makes all text uppercase, \'lowercase\' makes all text lowercase, and \'capitalize\' capitalizes the first letter of each word.<br>CSS variable: --wm-switch-button-text-transform"}}},"height":{"value":"{space.10.value}","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-button-height"}},"color":{"value":"{color.outline.@.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-button-color"}},"border":{"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-button-border-color"}},"width":{"value":"1px","type":"radius","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-button-border-width"}},"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of switch buttons. When set to a large radius value, the buttons appear with rounded corners, creating a softer, more modern appearance.<br>CSS variable: --wm-switch-button-border-radius"}}},"padding":{"left":{"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 on the left side.<br>CSS variable: --wm-switch-button-padding-left"}},"right":{"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 on the right side.<br>CSS variable: --wm-switch-button-padding-right"}}},"ripple":{"color":{"value":"rgba(255, 255, 255, 0.08)","type":"color","attributes":{"subtype":"color","description":"Sets the color of the ripple effect that appears when users interact with switch buttons. This creates visual feedback to show that the button is interactive and responsive to user actions, typically appearing as a subtle overlay when the button is pressed.<br>CSS variable: --wm-switch-button-ripple-color"}}}},"states":{"selected":{"button":{"background":{"color":{"value":"{color.secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of selected switch buttons. When a button is selected, it uses this background color to visually distinguish it from unselected buttons, typically using a secondary container color to indicate the active state.<br>CSS variable: --wm-switch-button-background-color (selected state)"}}},"color":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of selected switch buttons. This ensures the text remains readable against the selected button\'s background, typically using a color that contrasts well with the secondary container background.<br>CSS variable: --wm-switch-button-color (selected state)"}},"border":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of selected switch buttons. This maintains the border outline even when the button is selected, helping to maintain visual consistency with the overall switch component design.<br>CSS variable: --wm-switch-button-border-color (selected state)"}}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of switch button text. This affects how large the text appears on switch buttons. Acceptable units: px.<br>CSS variable: --wm-switch-button-font-size"}},"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of switch button text. This determines which font is used for the text on switch buttons.<br>CSS variable: --wm-switch-button-font-family"}},"weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of switch button text. This affects how bold the text appears on switch buttons.<br>CSS variable: --wm-switch-button-font-weight"}}},"text":{"transform":{"value":"capitalize","type":"font","attributes":{"subtype":"text-transform","description":"Controls text transformation for switch button text (the text content within clickable buttons). \'none\' keeps the original case, \'uppercase\' makes all text uppercase, \'lowercase\' makes all text lowercase, and \'capitalize\' capitalizes the first letter of each word.<br>CSS variable: --wm-switch-button-text-transform"}}}}},"disabled":{"opacity":{"value":"0.6","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of disabled switch buttons. When set to 0.6, disabled switches appear faded to indicate they are not interactive. Lower values make them more transparent, higher values make them more opaque.<br>CSS variable: --wm-switch-opacity"}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"switch":{"meta":{"mapping":{"selector":{"mobile":".app-switch"},"states":{"selected":{"selector":{"mobile":"-btn-selected, .app-switch-btn-selected-text"}},"disabled":{"selector":{"mobile":"-disabled"}}}}},"mapping":{"button":{"background":{"color":{"value":"{color.surface.@.value}","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-button-background-color"}}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of switch button text. This affects how large the text appears on switch buttons. Acceptable units: px.<br>CSS variable: --wm-switch-button-font-size"}},"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of switch button text. This determines which font is used for the text on switch buttons.<br>CSS variable: --wm-switch-button-font-family"}},"weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of switch button text. This affects how bold the text appears on switch buttons.<br>CSS variable: --wm-switch-button-font-weight"}}},"text":{"transform":{"value":"capitalize","type":"font","attributes":{"subtype":"text-transform","description":"Controls text transformation for switch button text (the text content within clickable buttons). \'none\' keeps the original case, \'uppercase\' makes all text uppercase, \'lowercase\' makes all text lowercase, and \'capitalize\' capitalizes the first letter of each word.<br>CSS variable: --wm-switch-button-text-transform"}}},"height":{"value":"{space.10.value}","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-button-height"}},"color":{"value":"{color.outline.@.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-button-color"}},"border":{"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-button-border-color"}},"width":{"value":"1px","type":"radius","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-button-border-width"}},"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of switch buttons. When set to a large radius value, the buttons appear with rounded corners, creating a softer, more modern appearance.<br>CSS variable: --wm-switch-button-border-radius"}}},"padding":{"value":"{space.0.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons. Acceptable units: px.<br>CSS variable: --wm-switch-button-padding"}},"ripple":{"color":{"value":"rgba(255, 255, 255, 0.08)","type":"color","attributes":{"subtype":"color","description":"Sets the color of the ripple effect that appears when users interact with switch buttons. This creates visual feedback to show that the button is interactive and responsive to user actions, typically appearing as a subtle overlay when the button is pressed.<br>CSS variable: --wm-switch-button-ripple-color"}}}},"states":{"selected":{"button":{"background":{"color":{"value":"{color.secondary.fixed.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of selected switch buttons. When a button is selected, it uses this background color to visually distinguish it from unselected buttons, typically using a secondary container color to indicate the active state.<br>CSS variable: --wm-switch-button-background-color (selected state)"}}},"color":{"value":"{color.on-secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of selected switch buttons. This ensures the text remains readable against the selected button\'s background, typically using a color that contrasts well with the secondary container background.<br>CSS variable: --wm-switch-button-color (selected state)"}},"border":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of selected switch buttons. This maintains the border outline even when the button is selected, helping to maintain visual consistency with the overall switch component design.<br>CSS variable: --wm-switch-button-border-color (selected state)"}}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of switch button text. This affects how large the text appears on switch buttons. Acceptable units: px.<br>CSS variable: --wm-switch-button-font-size"}},"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of switch button text. This determines which font is used for the text on switch buttons.<br>CSS variable: --wm-switch-button-font-family"}},"weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of switch button text. This affects how bold the text appears on switch buttons.<br>CSS variable: --wm-switch-button-font-weight"}}},"text":{"transform":{"value":"capitalize","type":"font","attributes":{"subtype":"text-transform","description":"Controls text transformation for switch button text (the text content within clickable buttons). \'none\' keeps the original case, \'uppercase\' makes all text uppercase, \'lowercase\' makes all text lowercase, and \'capitalize\' capitalizes the first letter of each word.<br>CSS variable: --wm-switch-button-text-transform"}}}}},"disabled":{"opacity":{"value":"0.6","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of disabled switch buttons. When set to 0.6, disabled switches appear faded to indicate they are not interactive. Lower values make them more transparent, higher values make them more opaque.<br>CSS variable: --wm-switch-opacity"}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_tabbar_tabbar_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"tabbar":{"meta":{"mapping":{"selector":{"mobile":".app-tabbar"},"states":{"active":{"selector":{"mobile":"-active-item, .app-tabbar-active-icon, .app-tabbar-active-label "}}}}},"mapping":{"height":{"value":"80px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tabbar components (navigation bars with tabs at the bottom of the screen). This determines the vertical size of the tabbar. Acceptable units: px.<br>CSS variable: --wm-tabbar-height"}},"border":{"top":{"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"space","description":"Controls the border top width of tabbar. This determines border top width of the tabbar. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-border-top-width"}},"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border top color of tabbar. This determines what color the border top of the tabbar menu appears in.<br>CSS variable: --wm-tabbar-border-top-color"}},"style":{"value":"{border.style.solid.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border top style. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-tabbar-border-top-style"}}}},"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of tabbar components. This determines the shadow depth and visual elevation of the tabbar above the content.<br>CSS variable: --wm-tabbar-box-shadow"}},"menu":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabbar menus (the container that holds tab items). This determines what color the background of the tabbar menu appears in.<br>CSS variable: --wm-tabbar-menu-background"}},"height":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the height of tabbar menus. This determines the vertical size of the menu container. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-menu-height"}}},"more-menu":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of tabbar more menus (overflow menus that appear when there are too many tabs). This determines how wide the more menu appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-more-menu-width"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabbar more menus. This determines what color the background of the more menu appears in.<br>CSS variable: --wm-tabbar-more-menu-background"}},"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of tabbar more menus. This determines the shadow depth and visual elevation of the more menu above the content.<br>CSS variable: --wm-tabbar-more-menu-box-shadow"}}},"more-menu-row":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of tabbar more menu rows (individual rows in the more menu). This determines how wide each row appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-more-menu-row-width"}},"padding":{"top":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) of tabbar more menu rows. This creates breathing room at the top of each row. Acceptable units: px.<br>CSS variable: --wm-tabbar-more-menu-row-padding-top"}},"bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of tabbar more menu rows. This creates breathing room at the bottom of each row. Acceptable units: px.<br>CSS variable: --wm-tabbar-more-menu-row-padding-bottom"}}}},"item":{"min":{"height":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of tabbar items (individual tabs in the tabbar). This determines the minimum vertical size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-min-height"}},"width":{"value":"{spacer.7.value}","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of tabbar items. This determines the minimum horizontal size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-min-width"}}},"border":{"radius":{"value":"0px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabbar items. This determines how rounded the corners of tab items appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-radius"}}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabbar items. This determines what color the background of tab items appears in.<br>CSS variable: --wm-tabbar-item-background-color"}}},"opacity":{"value":"1","type":"space","attributes":{"subtype":"opacity","description":"Controls the transparency of tabbar items. When set to 1, items are fully opaque. Lower values make items more transparent, higher values make them more opaque.<br>CSS variable: --wm-tabbar-item-opacity"}}},"icon":{"size":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of tabbar icons (icons that appear in tab items). This affects how large the icons appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-size"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of tabbar icons. This determines what color the icons appear in.<br>CSS variable: --wm-tabbar-icon-color"}},"padding":{"right":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) of tabbar icons. This creates breathing room on the right side of icons. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-padding-right"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) of tabbar icons. This creates breathing room at the bottom of icons. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-padding-bottom"}}},"border-bottom-color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the bottom border color of tabbar icons. This determines what color the bottom border of icons appears in, typically matching the primary theme color.<br>CSS variable: --wm-tabbar-icon-border-bottom-color"}}},"text":{"font":{"size":{"value":"{label.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of tabbar text (labels that appear in tab items). This affects how large the text appears. Acceptable units: px.<br>CSS variable: --wm-tabbar-text-font-size"}},"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of tabbar text. This determines which font is used for the text in tab items.<br>CSS variable: --wm-tabbar-text-font-family"}},"weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of tabbar text. This affects how bold the text appears in tab items.<br>CSS variable: --wm-tabbar-text-font-weight"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of tabbar labels. This determines what color the text in tab items appears in.<br>CSS variable: --wm-tabbar-text-color"}},"margin":{"top":{"value":"{space.rule.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top margin (vertical spacing) of tabbar text. This creates spacing above the text. Acceptable units: px.<br>CSS variable: --wm-tabbar-text-margin-top"}}}},"states":{"active":{"item":{"border":{"radius":{"value":"50px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of active tabbar items. This determines how rounded the corners of active tab items appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-radius (active state)"}}},"background":{"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of active tabbar items (tabs that are currently selected). This determines what color the background appears in for active items, typically matching the primary container theme color.<br>CSS variable: --wm-tabbar-item-background-color (active state)"}}},"margin":{"bottom":{"value":"-2","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin (vertical spacing) of active tabbar items. This creates spacing below active tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-margin-bottom (active state)"}}}},"icon":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of active tabbar icons. This determines what color the icons appear in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabbar-icon-color (active state)"}}},"text":{"font":{"weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of active tabbar text. This affects how bold the text appears in active tab items.<br>CSS variable: --wm-tabbar-text-font-weight (active state)"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of active tabbar labels. This determines what color the text appears in for active tabs.<br>CSS variable: --wm-tabbar-text-color (active state)"}}}}}},"appearences":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"tabbar":{"meta":{"mapping":{"selector":{"mobile":".app-tabbar"},"states":{"active":{"selector":{"mobile":"-active-item, .app-tabbar-active-icon, .app-tabbar-active-label "}}}}},"mapping":{"height":{"value":"80px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tabbar components (navigation bars with tabs at the bottom of the screen). This determines the vertical size of the tabbar. Acceptable units: px.<br>CSS variable: --wm-tabbar-height"}},"border":{"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"space","description":"Controls the border width of tabbar (top, right, bottom, left). Acceptable units: %, px.<br>CSS variable: --wm-tabbar-border-width"}},"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tabbar. This determines what color the border of the tabbar menu appears in.<br>CSS variable: --wm-tabbar-border-color"}},"style":{"value":"{border.style.solid.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the border style. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-tabbar-border-style"}}},"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of tabbar components. This determines the shadow depth and visual elevation of the tabbar above the content.<br>CSS variable: --wm-tabbar-box-shadow"}},"menu":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabbar menus (the container that holds tab items). This determines what color the background of the tabbar menu appears in.<br>CSS variable: --wm-tabbar-menu-background"}},"height":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the height of tabbar menus. This determines the vertical size of the menu container. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-menu-height"}}},"more-menu":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of tabbar more menus (overflow menus that appear when there are too many tabs). This determines how wide the more menu appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-more-menu-width"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabbar more menus. This determines what color the background of the more menu appears in.<br>CSS variable: --wm-tabbar-more-menu-background"}},"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of tabbar more menus. This determines the shadow depth and visual elevation of the more menu above the content.<br>CSS variable: --wm-tabbar-more-menu-box-shadow"}}},"more-menu-row":{"width":{"value":"100%","type":"space","attributes":{"subtype":"space","description":"Controls the width of tabbar more menu rows (individual rows in the more menu). This determines how wide each row appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-more-menu-row-width"}},"padding":{"value":"{space.1.value} {space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) of tabbar more menu rows. This creates breathing room around each row. Acceptable units: px.<br>CSS variable: --wm-tabbar-more-menu-row-padding"}}},"item":{"min":{"height":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of tabbar items (individual tabs in the tabbar). This determines the minimum vertical size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-min-height"}},"width":{"value":"{spacer.7.value}","type":"space","attributes":{"subtype":"space","description":"Controls the minimum width of tabbar items. This determines the minimum horizontal size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-min-width"}}},"border":{"radius":{"value":"0px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabbar items. This determines how rounded the corners of tab items appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-radius"}},"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"space","description":"Controls the border width of tabbar items. This determines the minimum width horizontal size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-width"}}},"background":{"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabbar items. This determines what color the background of tab items appears in.<br>CSS variable: --wm-tabbar-item-background-color"}}},"opacity":{"value":"1","type":"space","attributes":{"subtype":"opacity","description":"Controls the transparency of tabbar items. When set to 1, items are fully opaque. Lower values make items more transparent, higher values make them more opaque.<br>CSS variable: --wm-tabbar-item-opacity"}}},"icon":{"size":{"value":"{space.6.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of tabbar icons (icons that appear in tab items). This affects how large the icons appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-size"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of tabbar icons. This determines what color the icons appear in.<br>CSS variable: --wm-tabbar-icon-color"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top, right, bottom, left) of tabbar icons. This creates breathing room around icons. Acceptable units: px.<br>CSS variable: --wm-tabbar-icon-padding"}},"border-bottom-color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the bottom border color of tabbar icons. This determines what color the bottom border of icons appears in, typically matching the primary theme color.<br>CSS variable: --wm-tabbar-icon-border-bottom-color"}}},"text":{"font":{"size":{"value":"{label.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of tabbar text (labels that appear in tab items). This affects how large the text appears. Acceptable units: px.<br>CSS variable: --wm-tabbar-text-font-size"}},"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family of tabbar text. This determines which font is used for the text in tab items.<br>CSS variable: --wm-tabbar-text-font-family"}},"weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of tabbar text. This affects how bold the text appears in tab items.<br>CSS variable: --wm-tabbar-text-font-weight"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of tabbar labels. This determines what color the text in tab items appears in.<br>CSS variable: --wm-tabbar-text-color"}},"margin":{"top":{"value":"{space.rule.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top margin (vertical spacing) of tabbar text. This creates spacing above the text. Acceptable units: px.<br>CSS variable: --wm-tabbar-text-margin-top"}}}},"states":{"active":{"item":{"border":{"radius":{"value":"50px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of active tabbar items. This determines how rounded the corners of active tab items appear. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-radius (active state)"}},"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"space","description":"Controls the border width of tabbar items. This determines the minimum width horizontal size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-border-width(active state)"}}},"background":{"color":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of active tabbar items (tabs that are currently selected). This determines what color the background appears in for active items, typically matching the primary container theme color.<br>CSS variable: --wm-tabbar-item-background-color (active state)"}}},"margin":{"bottom":{"value":"-2","type":"space","attributes":{"subtype":"space","description":"Controls the bottom margin (vertical spacing) of active tabbar items. This creates spacing below active tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-margin-bottom (active state)"}}}},"icon":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of active tabbar icons. This determines what color the icons appear in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabbar-icon-color (active state)"}}},"text":{"font":{"weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the font weight (boldness) of active tabbar text. This affects how bold the text appears in active tab items.<br>CSS variable: --wm-tabbar-text-font-weight (active state)"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of active tabbar labels. This determines what color the text appears in for active tabs.<br>CSS variable: --wm-tabbar-text-color (active state)"}}}}}},"appearences":{}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_tabs_tabs_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*****************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"tabs":{"meta":{"mapping":{"selector":{"web":".app-tabheader","mobile":".app-tabheader"},"states":{"active":{"selector":{"mobile":"-active-item, .app-tabheader-active-item-text, .app-tabheader-active-item-icon, .app-tabheader-active-indicator"}}}}},"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"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabs components. This determines how rounded the corners of the tabs container appear. Acceptable units: px.<br>CSS variable: --wm-tabs-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tabs components. \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<br>CSS variable: --wm-tabs-border-style"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tabs components. This determines what color the border around the tabs container appears in.<br>CSS variable: --wm-tabs-border-color"}},"width":{"value":"{border.width.1.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tabs components. This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-border-width"}}},"heading":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabs headings (the header section that contains tab labels). This determines what color the background of the heading appears in.<br>CSS variable: --wm-tabs-heading-background"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabs headings. This determines how rounded the corners of the heading appear. Acceptable units: px.<br>CSS variable: --wm-tabs-heading-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tabs headings (the section containing the tab labels). \'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-heading-border-style"}},"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tabs headings. This determines what color the border around the heading appears in.<br>CSS variable: --wm-tabs-heading-border-color"}},"width":{"value":"{border.width.1.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tabs headings (the section containing the tab labels). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-heading-border-width"}}}},"item":{"heading":{"padding":{"value":"{space.2.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"}},"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"}}},"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"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab item headings. This determines what color the background of tab headings appears in.<br>CSS variable: --wm-tabs-item-heading-background"}},"text":{"color":{"value":"{color.outline.@.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-text"}}},"icon":{"size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"font","description":"Controls the size of tab item heading icons. This determines how large the icons appear in tab headings.<br>CSS variable: --wm-tabs-item-heading-icon-size"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of tab item heading icons (icons that appear in tab labels). This determines what color the icons appear in, which should match or complement the tab text color for visual consistency.<br>CSS variable: --wm-tabs-item-heading-icon-color"}}},"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"}},"background":{"value":"{color.primary.@.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"}}}},"icon":{"display":{"value":"inline-flex","type":"text","attributes":{"subtype":"cursor","description":"Controls the display property of tab item icons. This determines how icons are displayed in the layout.<br>CSS variable: --wm-tabs-item-heading-icon-display"}},"height":{"value":"1","type":"size","attributes":{"subtype":"space","description":"Controls the height of tab item icons. This determines the vertical size of the icons. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-icon-height"}},"width":{"value":"1","type":"size","attributes":{"subtype":"space","description":"Controls the width of tab item icons. This determines the horizontal size of the icons. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-icon-width"}}}},"min":{"height":{"value":"240px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of tabs components. This determines the minimum vertical size of the tabs container. Acceptable units: px.<br>CSS variable: --wm-tabs-min-height"}}},"states":{"active":{"item":{"heading":{"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"}},"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"}}},"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"}},"indicator":{"height":{"value":"3px","type":"space","attributes":{"subtype":"space","description":"Controls the height of active tab item heading indicators. This determines the vertical size of the indicator for active tabs. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-indicator-height (active state)"}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of active tab item heading indicators. This determines what color the indicator appears in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-indicator-background (active state)"}}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of active tab item headings. This determines what color the background appears in for active tab headings.<br>CSS variable: --wm-tabs-item-heading-background (active state)"}},"text":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of active tab item headings. This determines what color the text appears in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-text (active state)"}}},"icon":{"size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"font","description":"Controls the size of active tab item heading icons. This determines how large the icons appear in active tab headings, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-icon-size (active state)"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of active tab item heading icons. This determines what color the icons appear in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-icon-color (active state)"}}}}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"tabs":{"meta":{"mapping":{"selector":{"web":".app-tabheader","mobile":".app-tabheader"},"states":{"active":{"selector":{"mobile":"-active-item, .app-tabheader-active-item-text, .app-tabheader-active-item-icon, .app-tabheader-active-indicator"}}}}},"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"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabs components. This determines how rounded the corners of the tabs container appear. Acceptable units: px.<br>CSS variable: --wm-tabs-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tabs components. \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<br>CSS variable: --wm-tabs-border-style"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tabs components. This determines what color the border around the tabs container appears in.<br>CSS variable: --wm-tabs-border-color"}},"width":{"value":"{border.width.1.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tabs components. This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-border-width"}}},"heading":{"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tabs headings (the header section that contains tab labels). This determines what color the background of the heading appears in.<br>CSS variable: --wm-tabs-heading-background"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabs headings. This determines how rounded the corners of the heading appear. Acceptable units: px.<br>CSS variable: --wm-tabs-heading-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tabs headings (the section containing the tab labels). \'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-heading-border-style"}},"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tabs headings. This determines what color the border around the heading appears in.<br>CSS variable: --wm-tabs-heading-border-color"}},"width":{"value":"{border.width.1.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tabs headings (the section containing the tab labels). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-heading-border-width"}}}},"item":{"heading":{"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabs headings. This determines how rounded the corners of the heading appear. Acceptable units: px.<br>CSS variable: --wm-tabs-heading-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tabs headings (the section containing the tab labels). \'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-heading-border-style"}},"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tabs headings. This determines what color the border around the heading appears in.<br>CSS variable: --wm-tabs-heading-border-color"}},"width":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tabs headings (vertical horizontal / top right bottom left). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-heading-border-width"}}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tab item headings (vertical horizontal / top right bottom left). 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"}},"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"}},"family":{"value":"{h6.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Controls the font family used for tab item headings (the clickable tab labels that users click to switch between different content sections). This determines which typeface is used for the tab text.<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"}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab item headings. This determines what color the background of tab headings appears in.<br>CSS variable: --wm-tabs-item-heading-background"}},"text":{"color":{"value":"{color.outline.@.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-text"}}},"icon":{"size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of tab item heading icons. This determines how large the icons appear in tab headings.<br>CSS variable: --wm-tabs-item-heading-icon-size"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of tab item heading icons (icons that appear in tab labels). This determines what color the icons appear in, which should match or complement the tab text color for visual consistency.<br>CSS variable: --wm-tabs-item-heading-icon-color"}}},"indicator":{"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the margin of tab item heading indicators (vertical horizontal / top right bottom left) in Active state only. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-margin"}},"height":{"value":"3px","type":"space","attributes":{"subtype":"space","description":"Controls the height of tab item heading indicators in Active state only. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height"}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of tab item heading indicators in Active state only.<br>CSS variable: --wm-tabs-item-heading-indicator-background"}}}},"icon":{"display":{"value":"inline-flex","type":"text","attributes":{"subtype":"cursor","description":"Controls the display property of tab item icons. This determines how icons are displayed in the layout.<br>CSS variable: --wm-tabs-item-heading-icon-display"}},"height":{"value":"1","type":"size","attributes":{"subtype":"space","description":"Controls the height of tab item icons. This determines the vertical size of the icons. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-icon-height"}},"width":{"value":"1","type":"size","attributes":{"subtype":"space","description":"Controls the width of tab item icons. This determines the horizontal size of the icons. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-icon-width"}}}},"min":{"height":{"value":"240px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of tabs components. This determines the minimum vertical size of the tabs container. Acceptable units: px.<br>CSS variable: --wm-tabs-min-height"}}},"states":{"active":{"item":{"heading":{"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside tab item headings (vertical horizontal / top right bottom left). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of tabs headings. This determines how rounded the corners of the heading appear. Acceptable units: px.<br>CSS variable: --wm-tabs-heading-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around tabs headings (the section containing the tab labels). \'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-heading-border-style"}},"color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of tabs headings. This determines what color the border around the heading appears in.<br>CSS variable: --wm-tabs-heading-border-color"}},"width":{"value":"{border.width.0.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tabs headings (vertical horizontal / top right bottom left). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-heading-border-width"}}},"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"}},"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"}},"family":{"value":"{h6.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Controls the font family used for tab item headings (the clickable tab labels that users click to switch between different content sections). This determines which typeface is used for the tab text.<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"}},"indicator":{"margin":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the margin of tab item heading indicators (vertical horizontal / top right bottom left) in Active state only. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-margin"}},"height":{"value":"3px","type":"space","attributes":{"subtype":"space","description":"Controls the height of active tab item heading indicators. This determines the vertical size of the indicator for active tabs. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-indicator-height (active state)"}},"background":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of active tab item heading indicators. This determines what color the indicator appears in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-indicator-background (active state)"}}},"background":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of active tab item headings. This determines what color the background appears in for active tab headings.<br>CSS variable: --wm-tabs-item-heading-background (active state)"}},"text":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of active tab item headings. This determines what color the text appears in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-text (active state)"}}},"icon":{"size":{"value":"{icon.size.@.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the size of active tab item heading icons. This determines how large the icons appear in active tab headings, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-icon-size (active state)"}},"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of active tab item heading icons. This determines what color the icons appear in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-icon-color (active state)"}}}}}}}},"appearances":{}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_tile_tile_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*****************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"tile":{"meta":{"mapping":{"selector":{"mobile":".app-tile"}},"appearances":{"default":{"mapping":{"selector":{"mobile":".app-tile"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".bg-default.app-tile"}},"primary":{"selector":{"mobile":".bg-primary.app-tile"}},"secondary":{"selector":{"mobile":".bg-secondary.app-tile"}},"tertiary":{"selector":{"mobile":".bg-tertiary.app-tile"}},"success":{"selector":{"mobile":".bg-success.app-tile"}},"info":{"selector":{"mobile":".bg-info.app-tile"}},"warning":{"selector":{"mobile":".bg-warning.app-tile"}},"danger":{"selector":{"mobile":".bg-danger.app-tile"}}}}},"filled":{"mapping":{"selector":{"mobile":".app-tile"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".bg-default-filled.app-tile"}},"primary":{"selector":{"mobile":".bg-primary-filled.app-tile"}},"secondary":{"selector":{"mobile":".bg-secondary-filled.app-tile"}},"tertiary":{"selector":{"mobile":".bg-tertiary-filled.app-tile"}},"success":{"selector":{"mobile":".bg-success-filled.app-tile"}},"info":{"selector":{"mobile":".bg-info-filled.app-tile"}},"warning":{"selector":{"mobile":".bg-warning-filled.app-tile"}},"danger":{"selector":{"mobile":".bg-danger-filled.app-tile"}}}}}}},"mapping":{"background":{"color":{"value":"{color.surface.container.low.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the background color of tile components (rectangular content blocks that hold information). This determines the color of the tile. <br>CSS variable: --wm-tile-background-color"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the template color of tile components (rectangular content blocks that hold information). This determines the color of the tile template. <br>CSS variable: --wm-tile-color"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of tile components (rectangular content blocks that hold information). This makes the tiles appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-tile-border-radius"}},"width":{"value":"1px","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tile components (rectangular content blocks that hold information). This creates the outline that defines the tile shape and makes it visible to users.<br>CSS variable: --wm-tile-border-width"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around tile components (rectangular content blocks that hold information). This determines the color of the outline that defines the tile shape. When transparent, no border is visible.<br>CSS variable: --wm-tile-border-color"}}},"padding":{"top":{"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-top"}},"bottom":{"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-bottom"}},"left":{"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-left"}},"right":{"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-right"}}}},"appearances":{"default":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"color":{"value":"{color.surface.container.low.@.value}","type":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}},"primary":{"background":{"color":{"value":"{color.primary.container.@.value}","type":"color"}},"color":{"value":"{color.primary.@.value}","type":"color"}},"secondary":{"background":{"color":{"value":"{color.secondary.container.@.value}","type":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color"}},"tertiary":{"background":{"color":{"value":"{color.tertiary.container.@.value}","type":"color"}},"color":{"value":"{color.tertiary.@.value}","type":"color"}},"success":{"background":{"color":{"value":"{color.success.container.@.value}","type":"color"}},"color":{"value":"{color.success.@.value}","type":"color"}},"info":{"background":{"color":{"value":"{color.info.container.@.value}","type":"color"}},"color":{"value":"{color.info.@.value}","type":"color"}},"warning":{"background":{"color":{"value":"{color.warning.container.@.value}","type":"color"}},"color":{"value":"{color.warning.@.value}","type":"color"}},"danger":{"background":{"color":{"value":"{color.error.container.@.value}","type":"color"}},"color":{"value":"{color.error.@.value}","type":"color"}}}}},"filled":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}},"primary":{"background":{"color":{"value":"{color.primary.@.value}","type":"color"}},"color":{"value":"{color.on-primary.@.value}","type":"color"}},"secondary":{"background":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"color":{"value":"{color.on-secondary.@.value}","type":"color"}},"tertiary":{"background":{"color":{"value":"{color.tertiary.@.value}","type":"color"}},"color":{"value":"{color.on-tertiary.@.value}","type":"color"}},"success":{"background":{"color":{"value":"{color.success.@.value}","type":"color"}},"color":{"value":"{color.on-success.@.value}","type":"color"}},"info":{"background":{"color":{"value":"{color.info.@.value}","type":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color"}},"warning":{"background":{"color":{"value":"{color.warning.@.value}","type":"color"}},"color":{"value":"{color.on-warning.@.value}","type":"color"}},"danger":{"background":{"color":{"value":"{color.error.@.value}","type":"color"}},"color":{"value":"{color.on-error.@.value}","type":"color"}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"tile":{"meta":{"mapping":{"selector":{"mobile":".app-tile"}},"appearances":{"default":{"mapping":{"selector":{"mobile":".app-tile"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".bg-default.app-tile"}},"primary":{"selector":{"mobile":".bg-primary.app-tile"}},"secondary":{"selector":{"mobile":".bg-secondary.app-tile"}},"tertiary":{"selector":{"mobile":".bg-tertiary.app-tile"}},"success":{"selector":{"mobile":".bg-success.app-tile"}},"info":{"selector":{"mobile":".bg-info.app-tile"}},"warning":{"selector":{"mobile":".bg-warning.app-tile"}},"danger":{"selector":{"mobile":".bg-danger.app-tile"}}}}},"filled":{"mapping":{"selector":{"mobile":".app-tile"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".bg-default-filled.app-tile"}},"primary":{"selector":{"mobile":".bg-primary-filled.app-tile"}},"secondary":{"selector":{"mobile":".bg-secondary-filled.app-tile"}},"tertiary":{"selector":{"mobile":".bg-tertiary-filled.app-tile"}},"success":{"selector":{"mobile":".bg-success-filled.app-tile"}},"info":{"selector":{"mobile":".bg-info-filled.app-tile"}},"warning":{"selector":{"mobile":".bg-warning-filled.app-tile"}},"danger":{"selector":{"mobile":".bg-danger-filled.app-tile"}}}}}}},"mapping":{"background":{"color":{"value":"{color.surface.container.low.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the background color of tile components (rectangular content blocks that hold information). This determines the color of the tile. <br>CSS variable: --wm-tile-background-color"}}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Controls the template color of tile components (rectangular content blocks that hold information). This determines the color of the tile template. <br>CSS variable: --wm-tile-color"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of tile components (rectangular content blocks that hold information). This makes the tiles appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-tile-border-radius"}},"width":{"value":"1px","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around tile components (rectangular content blocks that hold information). This creates the outline that defines the tile shape and makes it visible to users.<br>CSS variable: --wm-tile-border-width"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around tile components (rectangular content blocks that hold information). This determines the color of the outline that defines the tile shape. When transparent, no border is visible.<br>CSS variable: --wm-tile-border-color"}}},"padding":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (all sides) inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content. Acceptable units: px.<br>CSS variable: --wm-tile-padding"}}},"appearances":{"default":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"color":{"value":"{color.surface.container.low.@.value}","type":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}},"primary":{"background":{"color":{"value":"{color.primary.container.@.value}","type":"color"}},"color":{"value":"{color.primary.@.value}","type":"color"}},"secondary":{"background":{"color":{"value":"{color.secondary.container.@.value}","type":"color"}},"color":{"value":"{color.secondary.@.value}","type":"color"}},"tertiary":{"background":{"color":{"value":"{color.tertiary.container.@.value}","type":"color"}},"color":{"value":"{color.tertiary.@.value}","type":"color"}},"success":{"background":{"color":{"value":"{color.success.container.@.value}","type":"color"}},"color":{"value":"{color.success.@.value}","type":"color"}},"info":{"background":{"color":{"value":"{color.info.container.@.value}","type":"color"}},"color":{"value":"{color.info.@.value}","type":"color"}},"warning":{"background":{"color":{"value":"{color.warning.container.@.value}","type":"color"}},"color":{"value":"{color.warning.@.value}","type":"color"}},"danger":{"background":{"color":{"value":"{color.error.container.@.value}","type":"color"}},"color":{"value":"{color.error.@.value}","type":"color"}}}}},"filled":{"mapping":{},"variantGroups":{"status":{"default":{"background":{"color":{"value":"{color.surface.container.highest.@.value}","type":"color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}},"primary":{"background":{"color":{"value":"{color.primary.@.value}","type":"color"}},"color":{"value":"{color.on-primary.@.value}","type":"color"}},"secondary":{"background":{"color":{"value":"{color.secondary.@.value}","type":"color"}},"color":{"value":"{color.on-secondary.@.value}","type":"color"}},"tertiary":{"background":{"color":{"value":"{color.tertiary.@.value}","type":"color"}},"color":{"value":"{color.on-tertiary.@.value}","type":"color"}},"success":{"background":{"color":{"value":"{color.success.@.value}","type":"color"}},"color":{"value":"{color.on-success.@.value}","type":"color"}},"info":{"background":{"color":{"value":"{color.info.@.value}","type":"color"}},"color":{"value":"{color.on-info.@.value}","type":"color"}},"warning":{"background":{"color":{"value":"{color.warning.@.value}","type":"color"}},"color":{"value":"{color.on-warning.@.value}","type":"color"}},"danger":{"background":{"color":{"value":"{color.error.@.value}","type":"color"}},"color":{"value":"{color.on-error.@.value}","type":"color"}}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_webview_webview_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \***********************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"webview":{"meta":{"mapping":{"selector":{"mobile":".app-webview"}}},"mapping":{"background":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the webview. When transparent, only the webview is visible. When filled with a color, the webview appears with a colored background.<br>CSS variable: --wm-webview-background-color"}}},"padding":{"top":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside webview. This creates breathing room above the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-top"}},"bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the bottom padding (vertical spacing) inside webview. This creates breathing room below the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-bottom"}},"left":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside webview. This creates breathing room on the left side of the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-left"}},"right":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the right padding (horizontal spacing) inside webview. This creates breathing room on the right side of the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-right"}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"webview":{"meta":{"mapping":{"selector":{"mobile":".app-webview"}}},"mapping":{"background":{"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the webview. When transparent, only the webview is visible. When filled with a color, the webview appears with a colored background.<br>CSS variable: --wm-webview-background-color"}}},"padding":{"value":"{space.0.value} {space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding around the webview content. The first value sets vertical padding (top/bottom) and the second value sets horizontal padding (left/right).<br>CSS variable: --wm-webview-padding"}}},"appearances":{}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_wizard_wizard_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"wizard":{"meta":{"mapping":{"selector":{"mobile":".app-wizard"},"states":{"current":{"selector":{"mobile":"-active-step, .app-wizard-active-step-counter"}},"active":{"selector":{"mobile":"-done-step"}}}},"appearances":{"default":{"mapping":{"selector":{"mobile":".app-wizard"}}}}},"mapping":{"background-color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard components (multi-step forms that guide users through a process like account setup, checkout, or configuration). This is the main background color that appears behind the entire wizard container.<br>CSS variable: --wm-wizard-background-color"}},"border-radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of wizard components (multi-step forms that guide users through a process). This makes the wizard container corners slightly rounded for a softer appearance.<br>CSS variable: --wm-wizard-border-radius"}},"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around wizard components (multi-step forms that guide users through a process). This creates a subtle shadow that makes the wizard appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-wizard-box-shadow"}},"padding-top":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside wizard components (the space between the wizard content and its borders). This creates breathing room around the entire wizard container.<br>CSS variable: --wm-wizard-padding-top"}},"padding-bottom":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside wizard components (the space between the wizard content and its borders). This creates breathing room around the entire wizard container.<br>CSS variable: --wm-wizard-padding-bottom"}},"padding-left":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside wizard components (the space between the wizard content and its borders). This creates breathing room around the entire wizard container.<br>CSS variable: --wm-wizard-padding-left"}},"padding-right":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside wizard components (the space between the wizard content and its borders). This creates breathing room around the entire wizard container.<br>CSS variable: --wm-wizard-padding-right"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between wizard step elements (the space between step indicators, titles, and descriptions within each step). This creates visual separation between different parts of each step.<br>CSS variable: --wm-wizard-gap"}},"heading":{"background-color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard headings (the top section that contains the step navigation and progress indicators). This creates a distinct background color for the wizard header area.<br>CSS variable: --wm-wizard-heading-background-color"}},"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of wizard headings (the top section that contains the step navigation). This makes the wizard header corners slightly rounded for a softer appearance.<br>CSS variable: --wm-wizard-heading-radius"}},"padding-top":{"value":"{space.7.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside wizard headings (the space between the wizard header content and its borders). This creates breathing room around the step navigation and progress indicators.<br>CSS variable: --wm-wizard-heading-padding-top"}},"padding-bottom":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside wizard headings (the space between the wizard header content and its borders). This creates breathing room around the step navigation and progress indicators.<br>CSS variable: --wm-wizard-heading-padding-bottom"}},"padding-left":{"value":"{space.7.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside wizard headings (the space between the wizard header content and its borders). This creates breathing room around the step navigation and progress indicators.<br>CSS variable: --wm-wizard-heading-padding-left"}},"padding-right":{"value":"{space.7.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside wizard headings (the space between the wizard header content and its borders). This creates breathing room around the step navigation and progress indicators.<br>CSS variable: --wm-wizard-heading-padding-right"}}},"body":{"height":{"value":"50vh","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of wizard body content (the main area where users fill out forms and see step content). This ensures the wizard body is always tall enough to display content properly. Acceptable units: px, em, rem, vh.<br>CSS variable: --wm-wizard-body-height"}},"padding-top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside wizard body content (the main area where users fill out forms and see step content). This creates breathing room around the wizard body content.<br>CSS variable: --wm-wizard-body-padding-top"}}},"step":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between wizard step elements (the space between step indicators, titles, and descriptions within each step). This creates visual separation between different parts of each step.<br>CSS variable: --wm-wizard-step-gap"}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step titles (the main text labels for each step like \'Personal Information\', \'Payment Details\', \'Confirmation\'). This determines what color the step title text appears in.<br>CSS variable: --wm-wizard-step-title-color"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for wizard step titles (the main text labels for each step like \'Personal Information\', \'Payment Details\', \'Confirmation\'). This determines whether the step title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-title-font-family"}},"font-weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step titles appear (the main text labels for each step). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-title-font-weight"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step titles appear (the main text labels for each step like \'Personal Information\', \'Payment Details\', \'Confirmation\'). This affects the size of the text that users see for each step.<br>CSS variable: --wm-wizard-step-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 wizard step titles wrap to multiple lines. This ensures proper spacing for the step title text displayed in the wizard navigation.<br>CSS variable: --wm-wizard-step-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 wizard step titles (the main text labels for each step). This can help make the step title text more readable and properly spaced.<br>CSS variable: --wm-wizard-step-title-letter-spacing"}}},"description":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step descriptions (the smaller text that provides additional details about each step like \'Enter your personal details\' or \'Review your information\'). This determines what color the step description text appears in.<br>CSS variable: --wm-wizard-step-description-color"}},"font-family":{"value":"{label.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for wizard step descriptions (the smaller text that provides additional details about each step). This determines whether the step description text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-description-font-family"}},"font-weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step descriptions appear (the smaller text that provides additional details about each step). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-description-font-weight"}},"font-size":{"value":"{label.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step descriptions appear (the smaller text that provides additional details about each step). This affects the size of the description text that users see for each step.<br>CSS variable: --wm-wizard-step-description-font-size"}},"line-height":{"value":"{label.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when wizard step descriptions wrap to multiple lines. This ensures proper spacing for the step description text displayed in the wizard navigation.<br>CSS variable: --wm-wizard-step-description-line-height"}},"letter-spacing":{"value":"{label.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in wizard step descriptions (the smaller text that provides additional details about each step). This can help make the step description text more readable and properly spaced.<br>CSS variable: --wm-wizard-step-description-letter-spacing"}}},"indicator":{"size":{"value":"33px","type":"space","attributes":{"subtype":"space","description":"Controls the size of wizard step indicators (the circular or numbered badges that show the current step position). This determines how large the step indicator appears.<br>CSS variable: --wm-wizard-step-indicator-size"}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard step indicators (the circular or numbered badges that show the current step position). When transparent, only the border is visible. When filled with a color, the indicator appears with a colored background.<br>CSS variable: --wm-wizard-step-indicator-background-color"}},"border-width":{"value":"{border.width.2.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around wizard step indicators (the circular or numbered badges that show the current step position). This creates the outline that defines the indicator shape.<br>CSS variable: --wm-wizard-step-indicator-border-width"}},"border-style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around wizard step indicators (the circular or numbered badges that show the current step position). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<br>CSS variable: --wm-wizard-step-indicator-border-style"}},"border-color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around wizard step indicators (the circular or numbered badges that show the current step position). This determines the color of the outline that defines the indicator shape.<br>CSS variable: --wm-wizard-step-indicator-border-color"}},"border-radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of wizard step indicators (the circular or numbered badges that show the current step position). When set to \'circle\', the indicator appears as a perfect circle.<br>CSS variable: --wm-wizard-step-indicator-border-radius"}}},"count":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step count numbers (the numeric labels that appear inside step indicators like \'1\', \'2\', \'3\'). This determines what color the step number text appears in.<br>CSS variable: --wm-wizard-step-count-color"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for wizard step count numbers (the numeric labels that appear inside step indicators). This determines whether the step number text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-count-font-family"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step count numbers appear (the numeric labels that appear inside step indicators like \'1\', \'2\', \'3\'). This affects the size of the step number text.<br>CSS variable: --wm-wizard-step-count-font-size"}},"font-weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step count numbers appear (the numeric labels that appear inside step indicators). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-count-font-weight"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when wizard step count numbers wrap to multiple lines. This ensures proper spacing for the step number text.<br>CSS variable: --wm-wizard-step-count-line-height"}}},"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of wizard step icons (the icon symbols that appear inside step indicators to represent each step). This determines what color the step icons appear in.<br>CSS variable: --wm-wizard-step-icon-color"}},"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of wizard step icons (the icon symbols that appear inside step indicators to represent each step). This determines how large the step icons appear.<br>CSS variable: --wm-wizard-step-icon-size"}}},"connector":{"width":{"value":"1px","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of wizard step connectors (the lines that connect one step indicator to the next, showing the progression through the wizard). This determines how thick the connecting lines appear.<br>CSS variable: --wm-wizard-step-connector-width"}},"style":{"value":"{border.style.solid.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of wizard step connectors (the lines that connect one step indicator to the next). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<br>CSS variable: --wm-wizard-step-connector-style"}},"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of wizard step connectors (the lines that connect one step indicator to the next, showing the progression through the wizard). This determines what color the connecting lines appear in.<br>CSS variable: --wm-wizard-step-connector-color"}}}},"states":{"current":{"step":{"indicator":{"background-color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard step indicators when they are in the current/active state (the step the user is currently on). This is the color that appears when the step is the active one.<br>CSS variable: --wm-wizard-step-indicator-background-color (current state)"}},"border-color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around wizard step indicators when they are in the current/active state (the step the user is currently on). This determines the color of the outline when the step is active.<br>CSS variable: --wm-wizard-step-indicator-border-color (current state)"}}},"count":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step count numbers when they are in the current/active state (the step the user is currently on). This determines what color the step number text appears in when the step is active.<br>CSS variable: --wm-wizard-step-count-color (current state)"}}},"icon":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of wizard step icons when they are in the current/active state (the step the user is currently on). This determines what color the step icons appear in when the step is active.<br>CSS variable: --wm-wizard-step-icon-color (current state)"}}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step titles when they are in the current/active state (the step the user is currently on). This determines what color the step title text appears in when the step is active.<br>CSS variable: --wm-wizard-step-title-color (current state)"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for wizard step titles when they are in the current/active state (the step the user is currently on). This determines whether the step title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-title-font-family (current state)"}},"font-weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step titles appear when they are in the current/active state (the step the user is currently on). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-title-font-weight (current state)"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step titles appear when they are in the current/active state (the step the user is currently on). This affects the size of the text that users see for the active step.<br>CSS variable: --wm-wizard-step-title-font-size (current state)"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when wizard step titles wrap to multiple lines in the current/active state. This ensures proper spacing for the step title text displayed in the wizard navigation.<br>CSS variable: --wm-wizard-step-title-line-height (current state)"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in wizard step titles when they are in the current/active state (the step the user is currently on). This can help make the step title text more readable and properly spaced.<br>CSS variable: --wm-wizard-step-title-letter-spacing (current state)"}}}}},"active":{"step":{"indicator":{"background-color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard step indicators when they are in the active/completed state (steps that have been successfully completed). This is the color that appears when the step is done.<br>CSS variable: --wm-wizard-step-indicator-background-color (active state)"}},"border-color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around wizard step indicators when they are in the active/completed state (steps that have been successfully completed). This determines the color of the outline when the step is done.<br>CSS variable: --wm-wizard-step-indicator-border-color (active state)"}}},"count":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step count numbers when they are in the active/completed state (steps that have been successfully completed). This determines what color the step number text appears in when the step is done.<br>CSS variable: --wm-wizard-step-count-color (active state)"}}},"icon":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of wizard step icons when they are in the active/completed state (steps that have been successfully completed). This determines what color the step icons appear in when the step is done.<br>CSS variable: --wm-wizard-step-icon-color (active state)"}}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step titles when they are in the active/completed state (steps that have been successfully completed). This determines what color the step title text appears in when the step is done.<br>CSS variable: --wm-wizard-step-title-color (active state)"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for wizard step titles when they are in the active/completed state (steps that have been successfully completed). This determines whether the step title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-title-font-family (active state)"}},"font-weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step titles appear when they are in the active/completed state (steps that have been successfully completed). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-title-font-weight (active state)"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step titles appear when they are in the active/completed state (steps that have been successfully completed). This affects the size of the text that users see for completed steps.<br>CSS variable: --wm-wizard-step-title-font-size (active state)"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when wizard step titles wrap to multiple lines in the active/completed state. This ensures proper spacing for the step title text displayed in the wizard navigation.<br>CSS variable: --wm-wizard-step-title-line-height (active state)"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in wizard step titles when they are in the active/completed state (steps that have been successfully completed). This can help make the step title text more readable and properly spaced.<br>CSS variable: --wm-wizard-step-title-letter-spacing (active state)"}}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"wizard":{"meta":{"mapping":{"selector":{"mobile":".app-wizard"},"states":{"current":{"selector":{"mobile":"-active-step, .app-wizard-active-step-counter"}},"active":{"selector":{"mobile":"-done-step"}}}},"appearances":{"default":{"mapping":{"selector":{"mobile":".app-wizard"}}}}},"mapping":{"background-color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard components (multi-step forms that guide users through a process like account setup, checkout, or configuration). This is the main background color that appears behind the entire wizard container.<br>CSS variable: --wm-wizard-background-color"}},"border-radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of wizard components (multi-step forms that guide users through a process). This makes the wizard container corners slightly rounded for a softer appearance.<br>CSS variable: --wm-wizard-border-radius"}},"box-shadow":{"value":"{elevation.shadow.1.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around wizard components (multi-step forms that guide users through a process). This creates a subtle shadow that makes the wizard appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-wizard-box-shadow"}},"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside wizard components (the space between the wizard content and its borders). This creates breathing room around the entire wizard container.<br>CSS variable: --wm-wizard-padding"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between wizard step elements (the space between step indicators, titles, and descriptions within each step). This creates visual separation between different parts of each step.<br>CSS variable: --wm-wizard-gap"}},"heading":{"background-color":{"value":"{color.surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard headings (the top section that contains the step navigation and progress indicators). This creates a distinct background color for the wizard header area.<br>CSS variable: --wm-wizard-heading-background-color"}},"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of wizard headings (the top section that contains the step navigation). This makes the wizard header corners slightly rounded for a softer appearance.<br>CSS variable: --wm-wizard-heading-radius"}},"padding":{"value":"{space.7.value} {space.7.value} {space.0.value} {space.7.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside wizard headings (the space between the wizard header content and its borders). This creates breathing room around the step navigation and progress indicators.<br>CSS variable: --wm-wizard-heading-padding"}}},"body":{"height":{"value":"50vh","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of wizard body content (the main area where users fill out forms and see step content). This ensures the wizard body is always tall enough to display content properly. Acceptable units: px, em, rem, vh.<br>CSS variable: --wm-wizard-body-height"}},"padding":{"value":"{space.3.value} {space.0.value} {space.0.value} {space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside wizard body content (the main area where users fill out forms and see step content). This creates breathing room around the wizard body content.<br>CSS variable: --wm-wizard-body-padding"}}},"step":{"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between wizard step elements (the space between step indicators, titles, and descriptions within each step). This creates visual separation between different parts of each step.<br>CSS variable: --wm-wizard-step-gap"}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step titles (the main text labels for each step like \'Personal Information\', \'Payment Details\', \'Confirmation\'). This determines what color the step title text appears in.<br>CSS variable: --wm-wizard-step-title-color"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for wizard step titles (the main text labels for each step like \'Personal Information\', \'Payment Details\', \'Confirmation\'). This determines whether the step title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-title-font-family"}},"font-weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step titles appear (the main text labels for each step). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-title-font-weight"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step titles appear (the main text labels for each step like \'Personal Information\', \'Payment Details\', \'Confirmation\'). This affects the size of the text that users see for each step.<br>CSS variable: --wm-wizard-step-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 wizard step titles wrap to multiple lines. This ensures proper spacing for the step title text displayed in the wizard navigation.<br>CSS variable: --wm-wizard-step-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 wizard step titles (the main text labels for each step). This can help make the step title text more readable and properly spaced.<br>CSS variable: --wm-wizard-step-title-letter-spacing"}}},"description":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step descriptions (the smaller text that provides additional details about each step like \'Enter your personal details\' or \'Review your information\'). This determines what color the step description text appears in.<br>CSS variable: --wm-wizard-step-description-color"}},"font-family":{"value":"{label.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for wizard step descriptions (the smaller text that provides additional details about each step). This determines whether the step description text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-description-font-family"}},"font-weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step descriptions appear (the smaller text that provides additional details about each step). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-description-font-weight"}},"font-size":{"value":"{label.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step descriptions appear (the smaller text that provides additional details about each step). This affects the size of the description text that users see for each step.<br>CSS variable: --wm-wizard-step-description-font-size"}},"line-height":{"value":"{label.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when wizard step descriptions wrap to multiple lines. This ensures proper spacing for the step description text displayed in the wizard navigation.<br>CSS variable: --wm-wizard-step-description-line-height"}},"letter-spacing":{"value":"{label.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in wizard step descriptions (the smaller text that provides additional details about each step). This can help make the step description text more readable and properly spaced.<br>CSS variable: --wm-wizard-step-description-letter-spacing"}}},"indicator":{"size":{"value":"33px","type":"space","attributes":{"subtype":"space","description":"Controls the size of wizard step indicators (the circular or numbered badges that show the current step position). This determines how large the step indicator appears.<br>CSS variable: --wm-wizard-step-indicator-size"}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard step indicators (the circular or numbered badges that show the current step position). When transparent, only the border is visible. When filled with a color, the indicator appears with a colored background.<br>CSS variable: --wm-wizard-step-indicator-background-color"}},"border-width":{"value":"{border.width.2.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around wizard step indicators (the circular or numbered badges that show the current step position). This creates the outline that defines the indicator shape.<br>CSS variable: --wm-wizard-step-indicator-border-width"}},"border-style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around wizard step indicators (the circular or numbered badges that show the current step position). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<br>CSS variable: --wm-wizard-step-indicator-border-style"}},"border-color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around wizard step indicators (the circular or numbered badges that show the current step position). This determines the color of the outline that defines the indicator shape.<br>CSS variable: --wm-wizard-step-indicator-border-color"}},"border-radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of wizard step indicators (the circular or numbered badges that show the current step position). When set to \'circle\', the indicator appears as a perfect circle.<br>CSS variable: --wm-wizard-step-indicator-border-radius"}}},"count":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step count numbers (the numeric labels that appear inside step indicators like \'1\', \'2\', \'3\'). This determines what color the step number text appears in.<br>CSS variable: --wm-wizard-step-count-color"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for wizard step count numbers (the numeric labels that appear inside step indicators). This determines whether the step number text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-count-font-family"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step count numbers appear (the numeric labels that appear inside step indicators like \'1\', \'2\', \'3\'). This affects the size of the step number text.<br>CSS variable: --wm-wizard-step-count-font-size"}},"font-weight":{"value":"{font.weight.400.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step count numbers appear (the numeric labels that appear inside step indicators). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-count-font-weight"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when wizard step count numbers wrap to multiple lines. This ensures proper spacing for the step number text.<br>CSS variable: --wm-wizard-step-count-line-height"}}},"icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of wizard step icons (the icon symbols that appear inside step indicators to represent each step). This determines what color the step icons appear in.<br>CSS variable: --wm-wizard-step-icon-color"}},"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of wizard step icons (the icon symbols that appear inside step indicators to represent each step). This determines how large the step icons appear.<br>CSS variable: --wm-wizard-step-icon-size"}}},"connector":{"width":{"value":"1px","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of wizard step connectors (the lines that connect one step indicator to the next, showing the progression through the wizard). This determines how thick the connecting lines appear.<br>CSS variable: --wm-wizard-step-connector-width"}},"style":{"value":"{border.style.solid.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of wizard step connectors (the lines that connect one step indicator to the next). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<br>CSS variable: --wm-wizard-step-connector-style"}},"color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of wizard step connectors (the lines that connect one step indicator to the next, showing the progression through the wizard). This determines what color the connecting lines appear in.<br>CSS variable: --wm-wizard-step-connector-color"}}}},"states":{"current":{"step":{"indicator":{"background-color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard step indicators when they are in the current/active state (the step the user is currently on). This is the color that appears when the step is the active one.<br>CSS variable: --wm-wizard-step-indicator-background-color (current state)"}},"border-color":{"value":"{color.secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around wizard step indicators when they are in the current/active state (the step the user is currently on). This determines the color of the outline when the step is active.<br>CSS variable: --wm-wizard-step-indicator-border-color (current state)"}}},"count":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step count numbers when they are in the current/active state (the step the user is currently on). This determines what color the step number text appears in when the step is active.<br>CSS variable: --wm-wizard-step-count-color (current state)"}}},"icon":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of wizard step icons when they are in the current/active state (the step the user is currently on). This determines what color the step icons appear in when the step is active.<br>CSS variable: --wm-wizard-step-icon-color (current state)"}}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step titles when they are in the current/active state (the step the user is currently on). This determines what color the step title text appears in when the step is active.<br>CSS variable: --wm-wizard-step-title-color (current state)"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for wizard step titles when they are in the current/active state (the step the user is currently on). This determines whether the step title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-title-font-family (current state)"}},"font-weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step titles appear when they are in the current/active state (the step the user is currently on). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-title-font-weight (current state)"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step titles appear when they are in the current/active state (the step the user is currently on). This affects the size of the text that users see for the active step.<br>CSS variable: --wm-wizard-step-title-font-size (current state)"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when wizard step titles wrap to multiple lines in the current/active state. This ensures proper spacing for the step title text displayed in the wizard navigation.<br>CSS variable: --wm-wizard-step-title-line-height (current state)"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in wizard step titles when they are in the current/active state (the step the user is currently on). This can help make the step title text more readable and properly spaced.<br>CSS variable: --wm-wizard-step-title-letter-spacing (current state)"}}}}},"active":{"step":{"indicator":{"background-color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of wizard step indicators when they are in the active/completed state (steps that have been successfully completed). This is the color that appears when the step is done.<br>CSS variable: --wm-wizard-step-indicator-background-color (active state)"}},"border-color":{"value":"{color.success.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around wizard step indicators when they are in the active/completed state (steps that have been successfully completed). This determines the color of the outline when the step is done.<br>CSS variable: --wm-wizard-step-indicator-border-color (active state)"}}},"count":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step count numbers when they are in the active/completed state (steps that have been successfully completed). This determines what color the step number text appears in when the step is done.<br>CSS variable: --wm-wizard-step-count-color (active state)"}}},"icon":{"color":{"value":"{color.on-secondary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of wizard step icons when they are in the active/completed state (steps that have been successfully completed). This determines what color the step icons appear in when the step is done.<br>CSS variable: --wm-wizard-step-icon-color (active state)"}}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of wizard step titles when they are in the active/completed state (steps that have been successfully completed). This determines what color the step title text appears in when the step is done.<br>CSS variable: --wm-wizard-step-title-color (active state)"}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for wizard step titles when they are in the active/completed state (steps that have been successfully completed). This determines whether the step title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-wizard-step-title-font-family (active state)"}},"font-weight":{"value":"{font.weight.600.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold wizard step titles appear when they are in the active/completed state (steps that have been successfully completed). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-wizard-step-title-font-weight (active state)"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large wizard step titles appear when they are in the active/completed state (steps that have been successfully completed). This affects the size of the text that users see for completed steps.<br>CSS variable: --wm-wizard-step-title-font-size (active state)"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when wizard step titles wrap to multiple lines in the active/completed state. This ensures proper spacing for the step title text displayed in the wizard navigation.<br>CSS variable: --wm-wizard-step-title-line-height (active state)"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in wizard step titles when they are in the active/completed state (steps that have been successfully completed). This can help make the step title text more readable and properly spaced.<br>CSS variable: --wm-wizard-step-title-letter-spacing (active state)"}}}}}}}}}');
 
 /***/ }
 

package/index.d.ts

@@ -6,3 +6,4 @@ export declare const getTokens: (platform: "web" | "native_mobile") => Record<st
 export declare function loadComponentTokens(componentName: string, platform?: 'web' | 'native_mobile'): Promise<any>;
 export declare const getComponentsList: (platform: "web" | "native_mobile") => {};
 export { getSelectorFromGroup, cssVarCalcMixFormatter, componentVariantsFormatter } from "./src/utils/style-dictionary-utils.js";
+export { default as validateTokenValue } from "./src/token-validation/validate-value.js";

package/index.js

@@ -43,4 +43,5 @@ export const getComponentsList = (platform) => {
     }
 };
 export { getSelectorFromGroup, cssVarCalcMixFormatter, componentVariantsFormatter } from "./src/utils/style-dictionary-utils.js";
+export { default as validateTokenValue } from "./src/token-validation/validate-value.js";
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"./","sources":["index.ts"],"names":[],"mappings":"AAAA,aAAa;AACb,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,cAAc,IAAI,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACtF,OAAO,EAAE,MAAM,IAAI,kBAAkB,EAAE,cAAc,IAAI,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAIlH,MAAM,oBAAoB,GAAG,CAAC,OAAe,EAAU,EAAE;IACvD,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IACvC,OAAO,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iCAAiC;AAC5E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAE,OAAe,EAAU,EAAE;IACjE,MAAM,MAAM,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC7C,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,oBAAoB;AACxE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAa,EAAE,OAAe,EAAU,EAAE;IAC/D,MAAM,MAAM,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC7C,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,kBAAkB;AACpE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAU,EAAE;IAChD,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,QAAiC,EAAE,EAAE;IAC7D,IAAI,QAAQ,KAAK,eAAe,EAAE,CAAC;QACjC,OAAO,kBAAkB,CAAA;IAC3B,CAAC;SAAM,CAAC;QACN,OAAO,SAAS,CAAC;IACnB,CAAC;AACH,CAAC,CAAA;AAED,MAAM,CAAC,KAAK,UAAU,mBAAmB,CAAC,aAAqB,EAAE,WAAoC,KAAK;IACxG,MAAM,sBAAsB,GAAG,aAAa,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IACnE,IAAI,QAAQ,KAAK,eAAe,EAAE,CAAC;QACjC,OAAO,MAAM,CAAC,kCAAkC,sBAAsB,IAAI,sBAAsB,OAAO,CAAC,CAAC;IAC3G,CAAC;SAAM,CAAC;QACN,OAAO,MAAM,CAAC,+BAA+B,sBAAsB,IAAI,sBAAsB,OAAO,CAAC,CAAC;IACxG,CAAC;AACH,CAAC;AAGD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,QAAiC,EAAE,EAAE;IACrE,IAAI,QAAQ,KAAK,eAAe,EAAE,CAAC;QACjC,OAAO,yBAAyB,CAAA;IAClC,CAAC;SAAM,CAAC;QACN,OAAO,gBAAgB,CAAC;IAC1B,CAAC;AACH,CAAC,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC","sourcesContent":["// Primitives\nimport chroma from \"chroma-js\";\nimport { tokens as webTokens, componentsList as webComponentList } from './web.index';\nimport { tokens as nativeMobileTokens, componentsList as nativeMobileComponentList } from './native_mobile.index';\n\nexport { Tokens } from './web.index';\n\nconst getFactorFromFormula = (formula: string): number => {\n  const match = formula.match(/[\\d\\.]+/);\n  return match ? parseFloat(match[0]) : 0; // Default to 0 if no value found\n};\n\nexport const brighten = (value: string, formula: string): string => {\n  const factor = getFactorFromFormula(formula);\n  return chroma(value).brighten(factor / 20).hex(); // Adjust brightness\n};\n\nexport const darken = (value: string, formula: string): string => {\n  const factor = getFactorFromFormula(formula);\n  return chroma(value).darken(factor / 20).hex(); // Adjust darkness\n};\n\nexport const contrast = (value: string): string => {\n  return chroma.contrast(value, '#FFFFFF') > 4.5 ? \"#ffffff\" : '#000000';\n};\n\nexport const getTokens = (platform: 'web' | 'native_mobile') => {\n  if (platform === 'native_mobile') {\n    return nativeMobileTokens\n  } else {\n    return webTokens;\n  }\n}\n\nexport async function loadComponentTokens(componentName: string, platform: 'web' | 'native_mobile' = 'web') {\n  const sanitizedComponentName = componentName.replace(/:\\s*/g, '-');\n  if (platform === 'native_mobile') {\n    return import(`./src/tokens/mobile/components/${sanitizedComponentName}/${sanitizedComponentName}.json`);\n  } else {\n    return import(`./src/tokens/web/components/${sanitizedComponentName}/${sanitizedComponentName}.json`);\n  }\n}\n\n\nexport const getComponentsList = (platform: 'web' | 'native_mobile') => {\n  if (platform === 'native_mobile') {\n    return nativeMobileComponentList\n  } else {\n    return webComponentList;\n  }\n};\n\nexport { getSelectorFromGroup, cssVarCalcMixFormatter, componentVariantsFormatter } from \"./src/utils/style-dictionary-utils.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"./","sources":["index.ts"],"names":[],"mappings":"AAAA,aAAa;AACb,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,cAAc,IAAI,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACtF,OAAO,EAAE,MAAM,IAAI,kBAAkB,EAAE,cAAc,IAAI,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAIlH,MAAM,oBAAoB,GAAG,CAAC,OAAe,EAAU,EAAE;IACvD,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IACvC,OAAO,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iCAAiC;AAC5E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAE,OAAe,EAAU,EAAE;IACjE,MAAM,MAAM,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC7C,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,oBAAoB;AACxE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAa,EAAE,OAAe,EAAU,EAAE;IAC/D,MAAM,MAAM,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC7C,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,kBAAkB;AACpE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAU,EAAE;IAChD,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,QAAiC,EAAE,EAAE;IAC7D,IAAI,QAAQ,KAAK,eAAe,EAAE,CAAC;QACjC,OAAO,kBAAkB,CAAA;IAC3B,CAAC;SAAM,CAAC;QACN,OAAO,SAAS,CAAC;IACnB,CAAC;AACH,CAAC,CAAA;AAED,MAAM,CAAC,KAAK,UAAU,mBAAmB,CAAC,aAAqB,EAAE,WAAoC,KAAK;IACxG,MAAM,sBAAsB,GAAG,aAAa,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IACnE,IAAI,QAAQ,KAAK,eAAe,EAAE,CAAC;QACjC,OAAO,MAAM,CAAC,kCAAkC,sBAAsB,IAAI,sBAAsB,OAAO,CAAC,CAAC;IAC3G,CAAC;SAAM,CAAC;QACN,OAAO,MAAM,CAAC,+BAA+B,sBAAsB,IAAI,sBAAsB,OAAO,CAAC,CAAC;IACxG,CAAC;AACH,CAAC;AAGD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,QAAiC,EAAE,EAAE;IACrE,IAAI,QAAQ,KAAK,eAAe,EAAE,CAAC;QACjC,OAAO,yBAAyB,CAAA;IAClC,CAAC;SAAM,CAAC;QACN,OAAO,gBAAgB,CAAC;IAC1B,CAAC;AACH,CAAC,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC;AAEjI,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0CAA0C,CAAC","sourcesContent":["// Primitives\nimport chroma from \"chroma-js\";\nimport { tokens as webTokens, componentsList as webComponentList } from './web.index';\nimport { tokens as nativeMobileTokens, componentsList as nativeMobileComponentList } from './native_mobile.index';\n\nexport { Tokens } from './web.index';\n\nconst getFactorFromFormula = (formula: string): number => {\n  const match = formula.match(/[\\d\\.]+/);\n  return match ? parseFloat(match[0]) : 0; // Default to 0 if no value found\n};\n\nexport const brighten = (value: string, formula: string): string => {\n  const factor = getFactorFromFormula(formula);\n  return chroma(value).brighten(factor / 20).hex(); // Adjust brightness\n};\n\nexport const darken = (value: string, formula: string): string => {\n  const factor = getFactorFromFormula(formula);\n  return chroma(value).darken(factor / 20).hex(); // Adjust darkness\n};\n\nexport const contrast = (value: string): string => {\n  return chroma.contrast(value, '#FFFFFF') > 4.5 ? \"#ffffff\" : '#000000';\n};\n\nexport const getTokens = (platform: 'web' | 'native_mobile') => {\n  if (platform === 'native_mobile') {\n    return nativeMobileTokens\n  } else {\n    return webTokens;\n  }\n}\n\nexport async function loadComponentTokens(componentName: string, platform: 'web' | 'native_mobile' = 'web') {\n  const sanitizedComponentName = componentName.replace(/:\\s*/g, '-');\n  if (platform === 'native_mobile') {\n    return import(`./src/tokens/mobile/components/${sanitizedComponentName}/${sanitizedComponentName}.json`);\n  } else {\n    return import(`./src/tokens/web/components/${sanitizedComponentName}/${sanitizedComponentName}.json`);\n  }\n}\n\n\nexport const getComponentsList = (platform: 'web' | 'native_mobile') => {\n  if (platform === 'native_mobile') {\n    return nativeMobileComponentList\n  } else {\n    return webComponentList;\n  }\n};\n\nexport { getSelectorFromGroup, cssVarCalcMixFormatter, componentVariantsFormatter } from \"./src/utils/style-dictionary-utils.js\";\n\nexport { default as validateTokenValue } from \"./src/token-validation/validate-value.js\";"]}

package/native_mobile.index.d.ts

@@ -6,6 +6,12 @@ export declare const componentsList: {
         key: string;
         columnWidth: number;
     };
+    "accordion-pane": {
+        widgetTag: string;
+        key: string;
+        columnWidth: number;
+        displayName: string;
+    };
     anchor: {
         widgetTag: string;
         key: string;
@@ -128,6 +134,11 @@ export declare const componentsList: {
         widgetTag: string;
         columnWidth: number;
     };
+    select: {
+        widgetTag: string;
+        key: string;
+        columnWidth: number;
+    };
     lottie: {
         key: string;
         widgetTag: string;
@@ -143,6 +154,12 @@ export declare const componentsList: {
         widgetTag: string;
         columnWidth: number;
     };
+    "page-left-nav": {
+        widgetTag: string;
+        key: string;
+        columnWidth: number;
+        displayName: string;
+    };
     navitem: {
         widgetTag: string;
         key: string;

package/native_mobile.index.js

@@ -48,6 +48,12 @@ export const componentsList = {
         key: "accordion",
         columnWidth: 5,
     },
+    "accordion-pane": {
+        widgetTag: "wm-accordionpane",
+        key: "accordion-pane",
+        columnWidth: 5,
+        displayName: "Accordion: Pane"
+    },
     anchor: {
         widgetTag: "wm-anchor",
         key: "anchor",
@@ -167,6 +173,11 @@ export const componentsList = {
         widgetTag: "wm-login",
         columnWidth: 6,
     },
+    select: {
+        widgetTag: "wm-select",
+        key: "currency",
+        columnWidth: 6,
+    },
     lottie: {
         key: "lottie",
         widgetTag: "wm-lottie",
@@ -182,11 +193,12 @@ export const componentsList = {
         widgetTag: "wm-dialog",
         columnWidth: 6,
     },
-    // nav:{
-    //   widgetTag: "wm-nav",
-    //   key: "nav",
-    //   columnWidth: 6,
-    // },
+    "page-left-nav": {
+        widgetTag: "wm-left-panel",
+        key: "left-nav",
+        columnWidth: 6,
+        displayName: "Left Nav"
+    },
     navitem: {
         widgetTag: "wm-nav-item",
         key: "navitem",