@veracity/vui 2.17.1 → 2.17.2-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (110) hide show
  1. package/dist/cjs/footer/footer.js +1 -1
  2. package/dist/cjs/index.d.ts +1 -1
  3. package/dist/cjs/index.d.ts.map +1 -1
  4. package/dist/cjs/index.js +1 -1
  5. package/dist/cjs/stepIndicator/index.d.ts.map +1 -0
  6. package/dist/cjs/stepIndicator/stepIndicator.d.ts.map +1 -0
  7. package/dist/cjs/{step → stepIndicator}/stepIndicator.js +2 -2
  8. package/dist/cjs/stepIndicator/stepIndicatorTypes.d.ts.map +1 -0
  9. package/dist/cjs/stepIndicator/theme.d.ts.map +1 -0
  10. package/dist/cjs/stepperHorizontal/consts.d.ts +3 -7
  11. package/dist/cjs/stepperHorizontal/consts.d.ts.map +1 -1
  12. package/dist/cjs/stepperHorizontal/consts.js +3 -1
  13. package/dist/cjs/stepperHorizontal/stepHorizontal.js +2 -2
  14. package/dist/cjs/stepperHorizontal/stepHorizontalTail.d.ts.map +1 -1
  15. package/dist/cjs/stepperHorizontal/stepHorizontalTail.js +1 -1
  16. package/dist/cjs/stepperHorizontal/stepperHorizontalBase.d.ts.map +1 -1
  17. package/dist/cjs/stepperHorizontal/stepperHorizontalBase.js +9 -0
  18. package/dist/cjs/stepperHorizontal/stepperHorizontalTypes.d.ts +1 -1
  19. package/dist/cjs/stepperHorizontal/stepperHorizontalTypes.d.ts.map +1 -1
  20. package/dist/cjs/stepperVertical/stepVertical.js +2 -2
  21. package/dist/cjs/stepperVertical/stepperVerticalTypes.d.ts +1 -1
  22. package/dist/cjs/stepperVertical/stepperVerticalTypes.d.ts.map +1 -1
  23. package/dist/cjs/tabs/tab.d.ts.map +1 -1
  24. package/dist/cjs/tabs/tabs.d.ts +5 -3
  25. package/dist/cjs/tabs/tabs.d.ts.map +1 -1
  26. package/dist/cjs/tabs/tabs.js +19 -15
  27. package/dist/cjs/tabs/tabs.types.d.ts +12 -6
  28. package/dist/cjs/tabs/tabs.types.d.ts.map +1 -1
  29. package/dist/cjs/tabs/tabsNavBar.d.ts.map +1 -1
  30. package/dist/cjs/tabs/tabsNavBar.js +3 -3
  31. package/dist/cjs/tabs/useTabsState.d.ts +4 -4
  32. package/dist/cjs/tabs/useTabsState.d.ts.map +1 -1
  33. package/dist/cjs/tabs/useTabsState.js +2 -2
  34. package/dist/cjs/theme/components.js +1 -1
  35. package/dist/esm/footer/footer.js +1 -1
  36. package/dist/esm/index.d.ts +1 -1
  37. package/dist/esm/index.d.ts.map +1 -1
  38. package/dist/esm/index.js +1 -1
  39. package/dist/esm/stepIndicator/index.d.ts.map +1 -0
  40. package/dist/esm/stepIndicator/stepIndicator.d.ts.map +1 -0
  41. package/dist/esm/{step → stepIndicator}/stepIndicator.js +2 -2
  42. package/dist/esm/stepIndicator/stepIndicatorTypes.d.ts.map +1 -0
  43. package/dist/esm/stepIndicator/theme.d.ts.map +1 -0
  44. package/dist/esm/stepperHorizontal/consts.d.ts +3 -7
  45. package/dist/esm/stepperHorizontal/consts.d.ts.map +1 -1
  46. package/dist/esm/stepperHorizontal/consts.js +2 -0
  47. package/dist/esm/stepperHorizontal/stepHorizontal.js +2 -2
  48. package/dist/esm/stepperHorizontal/stepHorizontalTail.d.ts.map +1 -1
  49. package/dist/esm/stepperHorizontal/stepHorizontalTail.js +2 -2
  50. package/dist/esm/stepperHorizontal/stepperHorizontalBase.d.ts.map +1 -1
  51. package/dist/esm/stepperHorizontal/stepperHorizontalBase.js +10 -1
  52. package/dist/esm/stepperHorizontal/stepperHorizontalTypes.d.ts +1 -1
  53. package/dist/esm/stepperHorizontal/stepperHorizontalTypes.d.ts.map +1 -1
  54. package/dist/esm/stepperVertical/stepVertical.js +1 -1
  55. package/dist/esm/stepperVertical/stepperVerticalTypes.d.ts +1 -1
  56. package/dist/esm/stepperVertical/stepperVerticalTypes.d.ts.map +1 -1
  57. package/dist/esm/tabs/tab.d.ts.map +1 -1
  58. package/dist/esm/tabs/tabs.d.ts +5 -3
  59. package/dist/esm/tabs/tabs.d.ts.map +1 -1
  60. package/dist/esm/tabs/tabs.js +19 -15
  61. package/dist/esm/tabs/tabs.types.d.ts +12 -6
  62. package/dist/esm/tabs/tabs.types.d.ts.map +1 -1
  63. package/dist/esm/tabs/tabsNavBar.d.ts.map +1 -1
  64. package/dist/esm/tabs/tabsNavBar.js +3 -3
  65. package/dist/esm/tabs/useTabsState.d.ts +4 -4
  66. package/dist/esm/tabs/useTabsState.d.ts.map +1 -1
  67. package/dist/esm/tabs/useTabsState.js +2 -2
  68. package/dist/esm/theme/components.js +1 -1
  69. package/package.json +1 -1
  70. package/src/footer/footer.tsx +1 -1
  71. package/src/index.ts +1 -1
  72. package/src/{step → stepIndicator}/stepIndicator.tsx +12 -8
  73. package/src/stepperHorizontal/consts.ts +5 -1
  74. package/src/stepperHorizontal/stepHorizontal.tsx +2 -2
  75. package/src/stepperHorizontal/stepHorizontalTail.tsx +3 -5
  76. package/src/stepperHorizontal/stepperHorizontalBase.ts +12 -1
  77. package/src/stepperHorizontal/stepperHorizontalTypes.ts +1 -1
  78. package/src/stepperVertical/stepVertical.tsx +1 -1
  79. package/src/stepperVertical/stepperVerticalTypes.ts +1 -1
  80. package/src/tabs/tab.tsx +0 -2
  81. package/src/tabs/tabs.tsx +20 -16
  82. package/src/tabs/tabs.types.ts +13 -7
  83. package/src/tabs/tabsNavBar.tsx +11 -5
  84. package/src/tabs/useTabsState.ts +4 -4
  85. package/src/theme/components.ts +1 -1
  86. package/dist/cjs/step/index.d.ts.map +0 -1
  87. package/dist/cjs/step/stepIndicator.d.ts.map +0 -1
  88. package/dist/cjs/step/stepIndicatorTypes.d.ts.map +0 -1
  89. package/dist/cjs/step/theme.d.ts.map +0 -1
  90. package/dist/esm/step/index.d.ts.map +0 -1
  91. package/dist/esm/step/stepIndicator.d.ts.map +0 -1
  92. package/dist/esm/step/stepIndicatorTypes.d.ts.map +0 -1
  93. package/dist/esm/step/theme.d.ts.map +0 -1
  94. /package/dist/cjs/{step → stepIndicator}/index.d.ts +0 -0
  95. /package/dist/cjs/{step → stepIndicator}/index.js +0 -0
  96. /package/dist/cjs/{step → stepIndicator}/stepIndicator.d.ts +0 -0
  97. /package/dist/cjs/{step → stepIndicator}/stepIndicatorTypes.d.ts +0 -0
  98. /package/dist/cjs/{step → stepIndicator}/stepIndicatorTypes.js +0 -0
  99. /package/dist/cjs/{step → stepIndicator}/theme.d.ts +0 -0
  100. /package/dist/cjs/{step → stepIndicator}/theme.js +0 -0
  101. /package/dist/esm/{step → stepIndicator}/index.d.ts +0 -0
  102. /package/dist/esm/{step → stepIndicator}/index.js +0 -0
  103. /package/dist/esm/{step → stepIndicator}/stepIndicator.d.ts +0 -0
  104. /package/dist/esm/{step → stepIndicator}/stepIndicatorTypes.d.ts +0 -0
  105. /package/dist/esm/{step → stepIndicator}/stepIndicatorTypes.js +0 -0
  106. /package/dist/esm/{step → stepIndicator}/theme.d.ts +0 -0
  107. /package/dist/esm/{step → stepIndicator}/theme.js +0 -0
  108. /package/src/{step → stepIndicator}/index.ts +0 -0
  109. /package/src/{step → stepIndicator}/stepIndicatorTypes.ts +0 -0
  110. /package/src/{step → stepIndicator}/theme.ts +0 -0
@@ -70,7 +70,7 @@ exports.Footer = (0, core_1.vui)((props, ref) => {
70
70
  });
71
71
  const downMd = (0, core_1.useDown)('md');
72
72
  const downLg = (0, core_1.useDown)('lg');
73
- return ((0, jsx_runtime_1.jsx)(context_1.FooterProvider, { value: context, children: (0, jsx_runtime_1.jsxs)(exports.FooterBase, Object.assign({ className: (0, utils_1.cs)('vui-footer', isApplication ? 'vui-footer-app' : '', className), px: isApplication ? '40px' : 3, py: isSlim ? (downMd ? '16px' : '9px') : 5, role: "contentinfo" }, styles.container, { ref: ref }, rest, { children: [isApplication && ((0, jsx_runtime_1.jsx)(footerContent_1.default, { alignContent: "center", alignItems: "center", maxW: "100%", children: (0, jsx_runtime_1.jsxs)(footerRow_1.default, { alignContent: "space-between", w: 1, children: [(0, jsx_runtime_1.jsx)(box_1.Box, { alignItems: "self-start", columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: applicationLinks === null || applicationLinks === void 0 ? void 0 : applicationLinks.map((link, index) => ((0, jsx_runtime_1.jsxs)(box_1.Box, { flex: { xs: '0 0 50%', sm: '0 0 auto' }, children: [link.items && ((0, jsx_runtime_1.jsxs)(menu_1.default, Object.assign({ isLazy: false, offset: [-16, 9], placement: "top-start", size: "lg" }, rest, { children: [(0, jsx_runtime_1.jsx)(menu_1.default.Button, Object.assign({ as: link_1.Link, className: "vui-footerLink-trigger", pt: "3px", role: "button", text: link.text, title: link.text }, styles.link, rest)), (0, jsx_runtime_1.jsx)(menu_1.default.List, Object.assign({ maxH: 400, right: 0, w: 320 }, styles.list, { children: link.items.map(({ text, url }, index) => ((0, jsx_runtime_1.jsx)(menu_1.default.Item, Object.assign({ isTruncated: true, linkProps: { href: url }, text: text, title: text }, styles.item), index))) }))] }))), !link.items && (0, jsx_runtime_1.jsx)(footerLink_1.default, Object.assign({}, link, { href: link.url }))] }, index))) }), downLg && (0, jsx_runtime_1.jsx)(divider_1.Divider, { borderColor: "sandstone.main", mb: 0.5, mt: 1, w: 1 }), (0, jsx_runtime_1.jsxs)(box_1.Box, { centerV: true, columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, justifyContent: { sm: 'center', lg: 'flex-end' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: [applicationStaticItems === null || applicationStaticItems === void 0 ? void 0 : applicationStaticItems.map((text, index) => ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsx)(t_1.T, { size: "sm", children: text }) }, index))), isDNV ? ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsx)(t_1.T, { size: "sm", children: "@ DNV AS 2021" }) })) : ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsxs)(t_1.T, { size: "sm", children: [(0, jsx_runtime_1.jsx)(t_1.T, { weight: "demi", children: "Veracity by DNV" }), ", DNV AS"] }) })), (0, jsx_runtime_1.jsxs)(box_1.Box, { children: [applicationSocialLinks === null || applicationSocialLinks === void 0 ? void 0 : applicationSocialLinks.map((link, index) => ((0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({ "aria-label": link.text, fontWeight: "demi", href: link.url, iconLeft: (0, jsx_runtime_1.jsx)(link_1.Link.Icon, { name: `cubCircle${link.text}`, radius: "50%", size: "xs" }), isExternal: true, mr: 1, size: { _: 'sm', md: 'md' } }, styles.link), index))), (0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({ fontWeight: "demi", href: linkedIn !== null && linkedIn !== void 0 ? linkedIn : footerTrademark_1.defaultLinkedInUrl, isExternal: true, size: { _: 'sm', md: 'md' } }, styles.link, { children: (0, jsx_runtime_1.jsx)(footerHeading_1.default, { fontSize: "16px", mb: 0, text: "Follow us" }) }))] })] })] }) })), !isApplication && isSlim && ((0, jsx_runtime_1.jsx)(footerContent_1.default, { alignContent: "center", alignItems: "center", maxW: { xs: 343, sm: 305, md: 720, lg: 975 }, children: (0, jsx_runtime_1.jsxs)(footerRow_1.default, { children: [slimLinks.map((link, index) => {
73
+ return ((0, jsx_runtime_1.jsx)(context_1.FooterProvider, { value: context, children: (0, jsx_runtime_1.jsxs)(exports.FooterBase, Object.assign({ className: (0, utils_1.cs)('vui-footer', isApplication ? 'vui-footer-app' : '', className), px: isApplication ? '40px' : 3, py: isSlim ? (downMd ? '16px' : '9px') : 5, role: "contentinfo" }, styles.container, { ref: ref }, rest, { children: [isApplication && ((0, jsx_runtime_1.jsx)(footerContent_1.default, { alignContent: "center", alignItems: "center", maxW: "100%", children: (0, jsx_runtime_1.jsxs)(footerRow_1.default, { alignContent: "space-between", w: 1, children: [(0, jsx_runtime_1.jsx)(box_1.Box, { alignItems: "self-start", columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: applicationLinks === null || applicationLinks === void 0 ? void 0 : applicationLinks.map((link, index) => ((0, jsx_runtime_1.jsxs)(box_1.Box, { flex: { xs: '0 0 50%', sm: '0 0 auto' }, children: [link.items && ((0, jsx_runtime_1.jsxs)(menu_1.default, Object.assign({ isLazy: false, offset: [-16, 9], placement: "top-start", size: "lg" }, rest, { children: [(0, jsx_runtime_1.jsx)(menu_1.default.Button, Object.assign({ as: link_1.Link, className: "vui-footerLink-trigger", pt: "3px", role: "button", text: link.text, title: link.text }, styles.link, rest)), (0, jsx_runtime_1.jsx)(menu_1.default.List, Object.assign({ maxH: 400, right: 0, w: 320 }, styles.list, { children: link.items.map(({ text, url }, index) => ((0, jsx_runtime_1.jsx)(menu_1.default.Item, Object.assign({ isTruncated: true, linkProps: { href: url }, text: text, title: text }, styles.item), index))) }))] }))), !link.items && (0, jsx_runtime_1.jsx)(footerLink_1.default, Object.assign({}, link, { href: link.url }))] }, index))) }), downLg && (0, jsx_runtime_1.jsx)(divider_1.Divider, { borderColor: "sandstone.main", mb: 0.5, mt: 1, w: 1 }), (0, jsx_runtime_1.jsxs)(box_1.Box, { centerV: true, columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, justifyContent: { sm: 'center', lg: 'flex-end' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: [applicationStaticItems === null || applicationStaticItems === void 0 ? void 0 : applicationStaticItems.map((text, index) => ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsx)(t_1.T, { size: "sm", children: text }) }, index))), isDNV ? ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsx)(t_1.T, { size: "sm", children: "\u00A9 DNV AS 2021" }) })) : ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsxs)(t_1.T, { size: "sm", children: [(0, jsx_runtime_1.jsx)(t_1.T, { weight: "demi", children: "Veracity by DNV" }), ", DNV AS"] }) })), (0, jsx_runtime_1.jsxs)(box_1.Box, { children: [applicationSocialLinks === null || applicationSocialLinks === void 0 ? void 0 : applicationSocialLinks.map((link, index) => ((0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({ "aria-label": link.text, fontWeight: "demi", href: link.url, iconLeft: (0, jsx_runtime_1.jsx)(link_1.Link.Icon, { name: `cubCircle${link.text}`, radius: "50%", size: "xs" }), isExternal: true, mr: 1, size: { _: 'sm', md: 'md' } }, styles.link), index))), (0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({ fontWeight: "demi", href: linkedIn !== null && linkedIn !== void 0 ? linkedIn : footerTrademark_1.defaultLinkedInUrl, isExternal: true, size: { _: 'sm', md: 'md' } }, styles.link, { children: (0, jsx_runtime_1.jsx)(footerHeading_1.default, { fontSize: "16px", mb: 0, text: "Follow us" }) }))] })] })] }) })), !isApplication && isSlim && ((0, jsx_runtime_1.jsx)(footerContent_1.default, { alignContent: "center", alignItems: "center", maxW: { xs: 343, sm: 305, md: 720, lg: 975 }, children: (0, jsx_runtime_1.jsxs)(footerRow_1.default, { children: [slimLinks.map((link, index) => {
74
74
  /** if the screen is small drop one specific link */
75
75
  if (downLg && (link === null || link === void 0 ? void 0 : link.id) === 'support')
76
76
  return;
@@ -43,7 +43,7 @@ export * from './radio';
43
43
  export * from './select';
44
44
  export * from './sidemenu';
45
45
  export * from './skeleton';
46
- export * from './step';
46
+ export * from './stepIndicator';
47
47
  export * from './stepperHorizontal';
48
48
  export * from './stepperVertical';
49
49
  export * from './spinner';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}
package/dist/cjs/index.js CHANGED
@@ -59,7 +59,7 @@ __exportStar(require("./radio"), exports);
59
59
  __exportStar(require("./select"), exports);
60
60
  __exportStar(require("./sidemenu"), exports);
61
61
  __exportStar(require("./skeleton"), exports);
62
- __exportStar(require("./step"), exports);
62
+ __exportStar(require("./stepIndicator"), exports);
63
63
  __exportStar(require("./stepperHorizontal"), exports);
64
64
  __exportStar(require("./stepperVertical"), exports);
65
65
  __exportStar(require("./spinner"), exports);
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,cAAc,iBAAiB,CAAA"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"stepIndicator.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/stepIndicator.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAazD;;GAEG;AACH,eAAO,MAAM,aAAa,2DAmCxB,CAAA;AAIF,eAAe,aAAa,CAAA"}
@@ -29,7 +29,7 @@ const Content = ({ number, variant, size }) => {
29
29
  return (0, jsx_runtime_1.jsx)(icon_1.default, { name: "falCheck", size: size });
30
30
  if (variant === 'error')
31
31
  return (0, jsx_runtime_1.jsx)(icon_1.default, { name: "falTimes", size: size });
32
- return (0, jsx_runtime_1.jsx)(t_1.default, { fontWeight: 600, children: number });
32
+ return ((0, jsx_runtime_1.jsx)(t_1.default, { fontSize: size === 'md' ? 16 : 14, fontWeight: 600, children: number }));
33
33
  };
34
34
  /**
35
35
  * Implements stepper indicator **
@@ -37,7 +37,7 @@ const Content = ({ number, variant, size }) => {
37
37
  exports.StepIndicator = (0, core_1.vui)((props, ref) => {
38
38
  const { icon, number, className, size, variant } = props, rest = __rest(props, ["icon", "number", "className", "size", "variant"]);
39
39
  const styles = (0, core_1.useStyleConfig)('StepIndicator', props);
40
- return icon ? ((0, jsx_runtime_1.jsx)(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-stepIndicator', className), icon: icon, ref: ref }, styles.icon, rest, { isRound: true, minW: "auto", pointerEvents: "none", size: size }))) : ((0, jsx_runtime_1.jsxs)(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-stepIndicator', className), ref: ref }, styles.button, rest, { isRound: true, minW: "auto", outline: "6px solid white", pointerEvents: "none", position: "relative", size: size, children: [(0, jsx_runtime_1.jsx)(box_1.default, { mx: 0.5, position: "relative" }), (0, jsx_runtime_1.jsx)(box_1.default, { fontSize: `${size === 'md' ? 16 : 13}px`, mx: 0.5, position: "absolute", children: (0, jsx_runtime_1.jsx)(Content, { number: number, size: size, variant: variant }) })] })));
40
+ return icon ? ((0, jsx_runtime_1.jsx)(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-stepIndicator', 'vui-stepIndicatorIcon', className), icon: icon, ref: ref }, styles.icon, rest, { isRound: true, minW: "auto", pointerEvents: "none", size: size }))) : ((0, jsx_runtime_1.jsxs)(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-stepIndicator', 'vui-stepIndicatorNumber', className), ref: ref }, styles.button, rest, { isRound: true, minW: "auto", outline: "6px solid white", pointerEvents: "none", position: "relative", size: size, children: [(0, jsx_runtime_1.jsx)(box_1.default, { mx: 0.5, position: "relative" }), (0, jsx_runtime_1.jsx)(box_1.default, { mx: 0.5, position: "absolute", children: (0, jsx_runtime_1.jsx)(Content, { number: number, size: String(size), variant: String(variant) }) })] })));
41
41
  });
42
42
  exports.StepIndicator.displayName = 'StepIndicator';
43
43
  exports.default = exports.StepIndicator;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"stepIndicatorTypes.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/stepIndicatorTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,YAAY,CAAC,eAAe,CAAC,GAAG;IAC9B,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAEH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAA"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,wBAKC"}
@@ -1,10 +1,4 @@
1
- export declare const variantColor: {
2
- active: string;
3
- completed: string;
4
- optional: string;
5
- pending: string;
6
- error: string;
7
- };
1
+ export declare const variantColor: Record<string, string>;
8
2
  export declare const titleColor: {
9
3
  active: string;
10
4
  completed: string;
@@ -15,4 +9,6 @@ export declare const titleColor: {
15
9
  export declare const boldTitles: string[];
16
10
  export declare const stepClassName = "vui-stepHorizontal";
17
11
  export declare const tailClassName: string;
12
+ export declare const tailClassNameLeft: string;
13
+ export declare const tailClassNameRight: string;
18
14
  //# sourceMappingURL=consts.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;;;CAMxB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAA;AAED,eAAO,MAAM,UAAU,UAAsB,CAAA;AAE7C,eAAO,MAAM,aAAa,uBAAuB,CAAA;AAEjD,eAAO,MAAM,aAAa,QAAyB,CAAA"}
1
+ {"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAM/C,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAA;AAED,eAAO,MAAM,UAAU,UAAsB,CAAA;AAE7C,eAAO,MAAM,aAAa,uBAAuB,CAAA;AAEjD,eAAO,MAAM,aAAa,QAAyB,CAAA;AAEnD,eAAO,MAAM,iBAAiB,QAAyB,CAAA;AAEvD,eAAO,MAAM,kBAAkB,QAA0B,CAAA"}
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.tailClassName = exports.stepClassName = exports.boldTitles = exports.titleColor = exports.variantColor = void 0;
3
+ exports.tailClassNameRight = exports.tailClassNameLeft = exports.tailClassName = exports.stepClassName = exports.boldTitles = exports.titleColor = exports.variantColor = void 0;
4
4
  exports.variantColor = {
5
5
  active: 'seaBlue.main',
6
6
  completed: 'landGreen.41',
@@ -18,3 +18,5 @@ exports.titleColor = {
18
18
  exports.boldTitles = ['active', 'error'];
19
19
  exports.stepClassName = 'vui-stepHorizontal';
20
20
  exports.tailClassName = exports.stepClassName + 'Tail';
21
+ exports.tailClassNameLeft = exports.tailClassName + 'Left';
22
+ exports.tailClassNameRight = exports.tailClassName + 'Right';
@@ -7,7 +7,7 @@ exports.StepHorizontal = exports.StepHorizontalBase = void 0;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const box_1 = require("../box");
9
9
  const core_1 = require("../core");
10
- const step_1 = require("../step");
10
+ const stepIndicator_1 = require("../stepIndicator");
11
11
  const utils_1 = require("../utils");
12
12
  const consts_1 = require("./consts");
13
13
  const context_1 = require("./context");
@@ -25,7 +25,7 @@ exports.StepHorizontalBase = core_1.styled.divBox `
25
25
  exports.StepHorizontal = (0, core_1.vui)(({ icon, number, size: propSize = 'md', description, title, className, variant, children }, ref) => {
26
26
  const context = (0, context_1.useStepperHorizontalContext)();
27
27
  const size = (context === null || context === void 0 ? void 0 : context.size) || propSize;
28
- return ((0, jsx_runtime_1.jsxs)(exports.StepHorizontalBase, { className: (0, utils_1.cs)(consts_1.stepClassName, className), ref: ref, children: [(0, jsx_runtime_1.jsx)(stepHorizontalTail_1.default, { size: size, variant: variant }), (0, jsx_runtime_1.jsx)(box_1.Box, { display: "block", textAlign: "center", children: (0, jsx_runtime_1.jsx)(step_1.StepIndicator, { icon: icon, number: number, size: size, variant: variant }) }), (0, jsx_runtime_1.jsxs)(box_1.Box, { display: "block", textAlign: "center", children: [!!title && ((0, jsx_runtime_1.jsx)(stepHorizontalTitle_1.default, { size: size, variant: variant, children: title })), !!description && ((0, jsx_runtime_1.jsx)(box_1.Box, { color: "sandstone.45", display: "block", fontSize: `${size === 'md' ? 14 : 12}px`, textAlign: "center", children: description })), (0, jsx_runtime_1.jsx)(box_1.Box, { display: "block", children: children })] })] }));
28
+ return ((0, jsx_runtime_1.jsxs)(exports.StepHorizontalBase, { className: (0, utils_1.cs)(consts_1.stepClassName, consts_1.stepClassName + variant, className), ref: ref, children: [(0, jsx_runtime_1.jsx)(stepHorizontalTail_1.default, { size: size, variant: variant }), (0, jsx_runtime_1.jsx)(box_1.Box, { display: "block", textAlign: "center", children: (0, jsx_runtime_1.jsx)(stepIndicator_1.StepIndicator, { icon: icon, number: number, size: size, variant: variant }) }), (0, jsx_runtime_1.jsxs)(box_1.Box, { display: "block", textAlign: "center", children: [!!title && ((0, jsx_runtime_1.jsx)(stepHorizontalTitle_1.default, { size: size, variant: variant, children: title })), !!description && ((0, jsx_runtime_1.jsx)(box_1.Box, { color: "sandstone.45", display: "block", fontSize: `${size === 'md' ? 14 : 12}px`, textAlign: "center", children: description })), (0, jsx_runtime_1.jsx)(box_1.Box, { display: "block", children: children })] })] }));
29
29
  });
30
30
  exports.StepHorizontal.displayName = 'StepHorizontal';
31
31
  exports.default = exports.StepHorizontal;
@@ -1 +1 @@
1
- {"version":3,"file":"stepHorizontalTail.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepHorizontalTail.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAA;AAElE;;GAEG;AACH,eAAO,MAAM,kBAAkB,gEAgB7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}
1
+ {"version":3,"file":"stepHorizontalTail.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepHorizontalTail.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAA;AAElE;;GAEG;AACH,eAAO,MAAM,kBAAkB,gEAgB7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}
@@ -22,7 +22,7 @@ const consts_1 = require("./consts");
22
22
  */
23
23
  exports.StepHorizontalTail = (0, core_1.vui)((props, ref) => {
24
24
  const { children, className, variant = 'active' } = props, rest = __rest(props, ["children", "className", "variant"]);
25
- return ((0, jsx_runtime_1.jsxs)(box_1.Box, Object.assign({ className: (0, utils_1.cs)(consts_1.tailClassName), h: "16px", justifyContent: "space-between", position: "absolute", ref: ref, w: "100%" }, rest, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, { borderBottom: `1px solid ${consts_1.variantColor[variant]}`, className: `${consts_1.tailClassName}Left`, w: "50%" }), (0, jsx_runtime_1.jsx)(box_1.Box, { borderBottom: `1px solid ${consts_1.variantColor[variant]}`, className: `${consts_1.tailClassName}Right`, w: "50%" })] })));
25
+ return ((0, jsx_runtime_1.jsxs)(box_1.Box, Object.assign({ className: (0, utils_1.cs)(consts_1.tailClassName), h: "16px", justifyContent: "space-between", position: "absolute", ref: ref, w: "100%" }, rest, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, { className: (0, utils_1.cs)(consts_1.tailClassName, consts_1.tailClassNameLeft, consts_1.tailClassNameLeft + variant) }), (0, jsx_runtime_1.jsx)(box_1.Box, { className: (0, utils_1.cs)(consts_1.tailClassName, consts_1.tailClassNameRight, consts_1.tailClassNameLeft + variant) })] })));
26
26
  });
27
27
  exports.StepHorizontalTail.displayName = 'StepHorizontalTail';
28
28
  exports.default = exports.StepHorizontalTail;
@@ -1 +1 @@
1
- {"version":3,"file":"stepperHorizontalBase.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepperHorizontalBase.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,qBAAqB,kpJAO1B,CAAA;AACD,eAAe,qBAAqB,CAAA"}
1
+ {"version":3,"file":"stepperHorizontalBase.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepperHorizontalBase.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,qBAAqB,kpJAkB1B,CAAA;AACD,eAAe,qBAAqB,CAAA"}
@@ -9,5 +9,14 @@ const StepperHorizontalBase = core_1.styled.divBox `
9
9
  .${consts_1.stepClassName}:first-of-type .${consts_1.tailClassName}Left, .${consts_1.stepClassName}:last-of-type .${consts_1.tailClassName}Right {
10
10
  visibility: hidden;
11
11
  }
12
+
13
+ .${consts_1.tailClassNameLeft}, .${consts_1.tailClassNameRight} {
14
+ width: 50%;
15
+ }
16
+ ${Object.keys(consts_1.variantColor).map((variant) => `.${consts_1.tailClassNameLeft + variant},
17
+ .${consts_1.tailClassNameRight + variant},
18
+ .${consts_1.stepClassName + variant} + .${consts_1.stepClassName} .${consts_1.tailClassNameLeft} {
19
+ border-bottom: 1px solid ${consts_1.variantColor[variant]};
20
+ }`)}
12
21
  `;
13
22
  exports.default = StepperHorizontalBase;
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
2
2
  import { BoxProps } from '../box';
3
3
  import { ChildrenProp } from '../core';
4
4
  import { IconProp } from '../icon';
5
- import { StepIndicatorVariant } from '../step/stepIndicatorTypes';
5
+ import { StepIndicatorVariant } from '../stepIndicator/stepIndicatorTypes';
6
6
  import { SystemProps } from '../system';
7
7
  import { ThemingProps } from '../theme';
8
8
  export type StepHorizontalSize = 'md' | 'sm' | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"stepperHorizontalTypes.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepperHorizontalTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAExD,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,YAAY,CAAC,mBAAmB,CAAC,GAAG,YAAY,CAAA;AAEnG,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG;IAC/C,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG;IAChD,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA"}
1
+ {"version":3,"file":"stepperHorizontalTypes.d.ts","sourceRoot":"","sources":["../../../src/stepperHorizontal/stepperHorizontalTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAExD,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,YAAY,CAAC,mBAAmB,CAAC,GAAG,YAAY,CAAA;AAEnG,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG;IAC/C,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG;IAChD,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA"}
@@ -7,7 +7,7 @@ exports.StepVertical = exports.StepVerticalBase = void 0;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const box_1 = require("../box");
9
9
  const core_1 = require("../core");
10
- const step_1 = require("../step");
10
+ const stepIndicator_1 = require("../stepIndicator");
11
11
  const utils_1 = require("../utils");
12
12
  const consts_1 = require("./consts");
13
13
  const context_1 = require("./context");
@@ -24,7 +24,7 @@ exports.StepVerticalBase = core_1.styled.divBox `
24
24
  exports.StepVertical = (0, core_1.vui)(({ icon, number, size: propSize = 'md', description, title, className, variant, children }, ref) => {
25
25
  const context = (0, context_1.useStepperVerticalContext)();
26
26
  const size = (context === null || context === void 0 ? void 0 : context.size) || propSize;
27
- return ((0, jsx_runtime_1.jsxs)(exports.StepVerticalBase, { className: (0, utils_1.cs)(consts_1.stepClassName, className), ref: ref, children: [(0, jsx_runtime_1.jsx)(stepVerticalTail_1.default, { size: size, variant: variant }), (0, jsx_runtime_1.jsx)(box_1.Box, { flex: `0 0 ${size === 'md' ? 40 : 30}px`, children: (0, jsx_runtime_1.jsx)(step_1.StepIndicator, { icon: icon, number: number, size: size, variant: variant }) }), (0, jsx_runtime_1.jsxs)(box_1.Box, { flex: "1", flexDirection: "column", children: [!!title && ((0, jsx_runtime_1.jsx)(stepVerticalTitle_1.default, { size: size, variant: variant, children: title })), !!description && ((0, jsx_runtime_1.jsx)(box_1.Box, { color: "sandstone.45", fontSize: `${size === 'md' ? 14 : 12}px`, children: description })), (0, jsx_runtime_1.jsx)(box_1.Box, { children: children })] })] }));
27
+ return ((0, jsx_runtime_1.jsxs)(exports.StepVerticalBase, { className: (0, utils_1.cs)(consts_1.stepClassName, className), ref: ref, children: [(0, jsx_runtime_1.jsx)(stepVerticalTail_1.default, { size: size, variant: variant }), (0, jsx_runtime_1.jsx)(box_1.Box, { flex: `0 0 ${size === 'md' ? 40 : 30}px`, children: (0, jsx_runtime_1.jsx)(stepIndicator_1.StepIndicator, { icon: icon, number: number, size: size, variant: variant }) }), (0, jsx_runtime_1.jsxs)(box_1.Box, { flex: "1", flexDirection: "column", children: [!!title && ((0, jsx_runtime_1.jsx)(stepVerticalTitle_1.default, { size: size, variant: variant, children: title })), !!description && ((0, jsx_runtime_1.jsx)(box_1.Box, { color: "sandstone.45", fontSize: `${size === 'md' ? 14 : 12}px`, children: description })), (0, jsx_runtime_1.jsx)(box_1.Box, { children: children })] })] }));
28
28
  });
29
29
  exports.StepVertical.displayName = 'StepVertical';
30
30
  exports.default = exports.StepVertical;
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
2
2
  import { BoxProps } from '../box';
3
3
  import { ChildrenProp } from '../core';
4
4
  import { IconProp } from '../icon';
5
- import { StepIndicatorVariant } from '../step/stepIndicatorTypes';
5
+ import { StepIndicatorVariant } from '../stepIndicator/stepIndicatorTypes';
6
6
  import { SystemProps } from '../system';
7
7
  import { ThemingProps } from '../theme';
8
8
  export type StepVerticalSize = 'md' | 'sm' | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"stepperVerticalTypes.d.ts","sourceRoot":"","sources":["../../../src/stepperVertical/stepperVerticalTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEtD,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC,iBAAiB,CAAC,GAAG,YAAY,CAAA;AAE/F,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAEH,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG;IAC7C,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG;IAC9C,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA"}
1
+ {"version":3,"file":"stepperVerticalTypes.d.ts","sourceRoot":"","sources":["../../../src/stepperVertical/stepperVerticalTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEtD,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC,iBAAiB,CAAC,GAAG,YAAY,CAAA;AAE/F,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAEH,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG;IAC7C,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG;IAC9C,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,eAAO,MAAM,OAAO,+HAEnB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,GAAG,iDAId,CAAA;AAIF,eAAe,GAAG,CAAA"}
1
+ {"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,eAAO,MAAM,OAAO,+HAEnB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,GAAG,iDAId,CAAA;AAIF,eAAe,GAAG,CAAA"}
@@ -1,8 +1,10 @@
1
- import { TabsProps } from './tabs.types';
1
+ import React from 'react';
2
+ import { TabId, TabsProps } from './tabs.types';
2
3
  export declare const TabsBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & import("..").ThemingProps<"Tabs"> & import("../core").ChildrenProp & {
3
- activeTabId?: number | undefined;
4
+ actions?: React.ReactNode;
5
+ activeTabId?: TabId | undefined;
4
6
  showBorder?: boolean | undefined;
5
- onTabClick?: ((id: number) => void) | undefined;
7
+ onTabClick?: ((tabId: TabId) => void) | undefined;
6
8
  }, never>;
7
9
  /**
8
10
  * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDA+Df,CAAA;AAIF,eAAe,IAAI,CAAA"}
1
+ {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAMhE,OAAO,EAAE,KAAK,EAA2B,SAAS,EAAE,MAAM,cAAc,CAAA;AAIxE,eAAO,MAAM,QAAQ;;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDAmEf,CAAA;AAIF,eAAe,IAAI,CAAA"}
@@ -30,20 +30,22 @@ exports.TabsBase = core_1.styled.divBox `
30
30
  * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**
31
31
  */
32
32
  exports.Tabs = (0, core_1.vui)((props, ref) => {
33
- const { activeTabId, showBorder = true, children, className, size, onTabClick } = props, rest = __rest(props, ["activeTabId", "showBorder", "children", "className", "size", "onTabClick"]);
33
+ const { actions, activeTabId, showBorder = true, children, className, size, onTabClick } = props, rest = __rest(props, ["actions", "activeTabId", "showBorder", "children", "className", "size", "onTabClick"]);
34
34
  const styles = (0, core_1.useStyleConfig)('Tabs', props);
35
- const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = (0, useTabsState_1.useTabsState)('fadeIn', activeTabId);
35
+ const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = (0, useTabsState_1.useTabsState)('fadeIn', 0);
36
36
  (0, react_1.useEffect)(() => {
37
- const t = [];
37
+ const _tabs = [];
38
38
  if (children) {
39
39
  ;
40
40
  react_1.Children.toArray(children).forEach((child, index) => {
41
41
  var _a;
42
42
  if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.title)
43
- t.push({
44
- id: index,
43
+ _tabs.push({
44
+ id: child.props.id,
45
+ index: index,
45
46
  title: child.props.title,
46
47
  icon: child.props.icon,
48
+ className: child.props.className,
47
49
  children: child.props.children,
48
50
  disabled: child.props.disabled,
49
51
  onClick: child.props.onClick,
@@ -51,23 +53,25 @@ exports.Tabs = (0, core_1.vui)((props, ref) => {
51
53
  });
52
54
  });
53
55
  }
54
- setTabs(t);
55
- if (activeTabId !== undefined && (tabs === null || tabs === void 0 ? void 0 : tabs[activeTabId])) {
56
- setActiveTabIndex(activeTabId);
56
+ setTabs(_tabs);
57
+ if (activeTabId !== undefined) {
58
+ const tab = _tabs.find((t) => (t === null || t === void 0 ? void 0 : t.id) === activeTabId || (t === null || t === void 0 ? void 0 : t.index) === activeTabId);
59
+ if (tab === null || tab === void 0 ? void 0 : tab.index)
60
+ setActiveTabIndex(tab.index);
57
61
  }
58
62
  }, [children, activeTabId]);
59
- const onNavItemClick = (id, e) => {
63
+ const onNavItemClick = (tabIndex, e) => {
60
64
  var _a;
61
- const tab = tabs.find(t => t.id === id);
62
- if ((tab === null || tab === void 0 ? void 0 : tab.children) !== undefined) {
63
- setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight');
64
- setActiveTabIndex(id);
65
- onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(id);
65
+ const tab = tabs.find(t => t.index === tabIndex);
66
+ if ((tab === null || tab === void 0 ? void 0 : tab.children) !== undefined && (tab === null || tab === void 0 ? void 0 : tab.index) !== undefined) {
67
+ setAnimationDirection(tab.index < activeTabIndex ? 'fadeLeft' : 'fadeRight');
68
+ setActiveTabIndex(tab.index);
69
+ onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tab.id || tab.index);
66
70
  }
67
71
  (_a = tab === null || tab === void 0 ? void 0 : tab.onClick) === null || _a === void 0 ? void 0 : _a.call(tab, e);
68
72
  };
69
73
  const activeTab = tabs === null || tabs === void 0 ? void 0 : tabs[activeTabIndex];
70
- return ((0, jsx_runtime_1.jsxs)(exports.TabsBase, Object.assign({ className: (0, utils_1.cs)('vui-tabs', className), ref: ref }, styles.container, rest, { children: [!!(tabs === null || tabs === void 0 ? void 0 : tabs.length) && ((0, jsx_runtime_1.jsx)(tabsNavBar_1.default, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: (id, e) => onNavItemClick(id, e), showBorder: showBorder, size: size, tabs: tabs })), (tabs === null || tabs === void 0 ? void 0 : tabs.length) ? ((0, jsx_runtime_1.jsx)(tab_1.default, { onClick: activeTab === null || activeTab === void 0 ? void 0 : activeTab.onClick, title: activeTab === null || activeTab === void 0 ? void 0 : activeTab.title, children: !(activeTab === null || activeTab === void 0 ? void 0 : activeTab.disabled) && (activeTab === null || activeTab === void 0 ? void 0 : activeTab.children) })) : ((0, jsx_runtime_1.jsx)(p_1.P, { p: 2, children: "Please specify Tabs." }))] })));
74
+ return ((0, jsx_runtime_1.jsxs)(exports.TabsBase, Object.assign({ className: (0, utils_1.cs)('vui-tabs', className), ref: ref }, styles.container, rest, { children: [!!(tabs === null || tabs === void 0 ? void 0 : tabs.length) && ((0, jsx_runtime_1.jsx)(tabsNavBar_1.default, { actions: actions, activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: (tabIndex, e) => onNavItemClick(tabIndex, e), showBorder: showBorder, size: size, tabs: tabs })), (tabs === null || tabs === void 0 ? void 0 : tabs.length) ? ((0, jsx_runtime_1.jsx)(tab_1.default, { onClick: activeTab === null || activeTab === void 0 ? void 0 : activeTab.onClick, title: activeTab === null || activeTab === void 0 ? void 0 : activeTab.title, children: !(activeTab === null || activeTab === void 0 ? void 0 : activeTab.disabled) && (activeTab === null || activeTab === void 0 ? void 0 : activeTab.children) })) : ((0, jsx_runtime_1.jsx)(p_1.P, { p: 2, children: "Please specify Tabs." }))] })));
71
75
  });
72
76
  exports.Tabs.displayName = 'Tabs';
73
77
  exports.default = exports.Tabs;
@@ -4,16 +4,18 @@ import { IconProp } from '../icon';
4
4
  import { SystemProps } from '../system';
5
5
  import { ThemingProps } from '../theme';
6
6
  export type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn';
7
+ export type TabId = string | number;
7
8
  export type TabsSize = 'md' | 'sm' | 'lg' | 'xl' | 'xxl';
8
9
  export type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | 'xl' | undefined;
9
10
  export type TabsProps = SystemProps & ThemingProps<'Tabs'> & ChildrenProp & {
10
- activeTabId?: number;
11
+ actions?: ReactNode;
12
+ activeTabId?: TabId;
11
13
  showBorder?: boolean;
12
- onTabClick?: (id: number) => void;
14
+ onTabClick?: (tabId: TabId) => void;
13
15
  };
14
16
  export type TabProps = SystemProps & ChildrenProp & {
15
17
  icon?: IconProp;
16
- id?: number;
18
+ id?: TabId;
17
19
  title: ReactNode;
18
20
  disabled?: boolean;
19
21
  className?: string;
@@ -21,10 +23,14 @@ export type TabProps = SystemProps & ChildrenProp & {
21
23
  /** If provided, displays a remove button with this function as onClick. */
22
24
  onDelete?: (nativeEvent?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
23
25
  };
26
+ export type TabIndexProps = TabProps & {
27
+ index?: number;
28
+ };
24
29
  export type TabNavBarProps = {
25
- tabs: TabProps[];
26
- onNavItemClick: (id: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
27
- activeNavItem?: number;
30
+ actions?: ReactNode;
31
+ tabs: TabIndexProps[];
32
+ onNavItemClick: (tabIndex: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
33
+ activeNavItem?: TabId;
28
34
  animationDirection?: AnimationDirection;
29
35
  showBorder?: boolean;
30
36
  size?: TabsSize;
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAC7E,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CACnF,CAAA;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IACpF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}
1
+ {"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AACpE,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAA;AACnC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACpC,CAAA;AAEH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAC7E,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CACnF,CAAA;AAEH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,IAAI,EAAE,aAAa,EAAE,CAAA;IACrB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAC1F,aAAa,CAAC,EAAE,KAAK,CAAA;IACrB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,cAAc,EAAY,MAAM,cAAc,CAAA;AAKvE,eAAO,MAAM,UAAU,uDA0ErB,CAAA;AAIF,eAAe,UAAU,CAAA"}
1
+ {"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAiC,cAAc,EAAE,MAAM,cAAc,CAAA;AAK5E,eAAO,MAAM,UAAU,uDAgFrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
@@ -16,7 +16,7 @@ const theme_1 = __importDefault(require("./theme"));
16
16
  const { activeBg, border, color, hover, main } = consts_1.colors;
17
17
  exports.TabsNavBar = (0, core_1.vui)((props, ref) => {
18
18
  var _a, _b;
19
- const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props;
19
+ const { actions, tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props;
20
20
  const iconSize = (consts_1.iconSizeMapper === null || consts_1.iconSizeMapper === void 0 ? void 0 : consts_1.iconSizeMapper[size]) || 'md';
21
21
  const { sizes } = (_a = theme_1.default) !== null && _a !== void 0 ? _a : {};
22
22
  const fontSize = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.fontSize;
@@ -24,8 +24,8 @@ exports.TabsNavBar = (0, core_1.vui)((props, ref) => {
24
24
  const borderWidth = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.borderWidth;
25
25
  const py = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.py;
26
26
  const iconMarginRight = size === 'xxl' ? '16px' : '8px';
27
- const isActive = (tab) => !tab.disabled && tab.id === activeNavItem;
28
- return ((0, jsx_runtime_1.jsx)(list_1.List, { borderBottom: showBorder ? `1px solid ${border}` : 'none', className: (0, utils_1.cs)('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1, children: (_b = tabs === null || tabs === void 0 ? void 0 : tabs.map) === null || _b === void 0 ? void 0 : _b.call(tabs, tab => ((0, jsx_runtime_1.jsxs)(list_1.ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab === null || tab === void 0 ? void 0 : tab.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, onClick: e => onNavItemClick === null || onNavItemClick === void 0 ? void 0 : onNavItemClick(tab.id || 0, e), position: "relative", px: "16px", py: py, children: [(0, jsx_runtime_1.jsxs)(box_1.default, { alignItems: "center", children: [!!tab.icon && (0, jsx_runtime_1.jsx)(icon_1.Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }), tab.title] }), !!tab.onDelete && ((0, jsx_runtime_1.jsx)(tag_1.TagButton, { disabled: tab.disabled, hoverBg: "skyBlue.80", hoverColor: "seaBlue.main", isRound: false, ml: 1, onClick: e => { var _a; return (_a = tab === null || tab === void 0 ? void 0 : tab.onDelete) === null || _a === void 0 ? void 0 : _a.call(tab, e); }, title: "Delete" })), isActive(tab) && ((0, jsx_runtime_1.jsx)(box_1.default, { animation: animationDirection, bg: main, bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1, children: "\u00A0" }))] }, tab.id))) }));
27
+ const isActive = (tab) => !tab.disabled && (tab === null || tab === void 0 ? void 0 : tab.index) === activeNavItem;
28
+ return ((0, jsx_runtime_1.jsxs)(list_1.List, { alignItems: "end", borderBottom: showBorder ? `1px solid ${border}` : 'none', className: (0, utils_1.cs)('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1, children: [(_b = tabs === null || tabs === void 0 ? void 0 : tabs.map) === null || _b === void 0 ? void 0 : _b.call(tabs, tab => ((0, jsx_runtime_1.jsxs)(list_1.ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab === null || tab === void 0 ? void 0 : tab.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, onClick: e => onNavItemClick === null || onNavItemClick === void 0 ? void 0 : onNavItemClick(tab.index || 0, e), position: "relative", px: "16px", py: py, children: [(0, jsx_runtime_1.jsxs)(box_1.default, { alignItems: "center", children: [!!tab.icon && (0, jsx_runtime_1.jsx)(icon_1.Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }), tab.title] }), !!tab.onDelete && ((0, jsx_runtime_1.jsx)(tag_1.TagButton, { disabled: tab.disabled, hoverBg: "skyBlue.80", hoverColor: "seaBlue.main", isRound: false, ml: 1, onClick: e => { var _a; return (_a = tab === null || tab === void 0 ? void 0 : tab.onDelete) === null || _a === void 0 ? void 0 : _a.call(tab, e); }, title: "Delete" })), isActive(tab) && ((0, jsx_runtime_1.jsx)(box_1.default, { animation: animationDirection, bg: main, bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1, children: "\u00A0" }))] }, tab.index))), !!actions && ((0, jsx_runtime_1.jsx)(box_1.default, { ml: "auto", px: 0.75, py: 0.5, children: actions }))] }));
29
29
  });
30
30
  exports.TabsNavBar.displayName = 'TabsNavBar';
31
31
  exports.default = exports.TabsNavBar;
@@ -1,8 +1,8 @@
1
1
  /// <reference types="react" />
2
- import { AnimationDirection, TabProps } from './tabs.types';
3
- export declare const useTabsState: (initialAnimation: AnimationDirection, activeTabId?: number) => {
4
- tabs: TabProps[];
5
- setTabs: import("react").Dispatch<import("react").SetStateAction<TabProps[]>>;
2
+ import { AnimationDirection, TabIndexProps } from './tabs.types';
3
+ export declare const useTabsState: (initialAnimation: AnimationDirection, tabIndex?: number) => {
4
+ tabs: TabIndexProps[];
5
+ setTabs: import("react").Dispatch<import("react").SetStateAction<TabIndexProps[]>>;
6
6
  activeTabIndex: number;
7
7
  setActiveTabIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
8
8
  animationDirection: AnimationDirection;
@@ -1 +1 @@
1
- {"version":3,"file":"useTabsState.d.ts","sourceRoot":"","sources":["../../../src/tabs/useTabsState.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAE3D,eAAO,MAAM,YAAY,qBAAsB,kBAAkB,gBAAgB,MAAM;;;;;;;CAMtF,CAAA"}
1
+ {"version":3,"file":"useTabsState.d.ts","sourceRoot":"","sources":["../../../src/tabs/useTabsState.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAEhE,eAAO,MAAM,YAAY,qBAAsB,kBAAkB,aAAa,MAAM;;;;;;;CAMnF,CAAA"}
@@ -2,9 +2,9 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useTabsState = void 0;
4
4
  const react_1 = require("react");
5
- const useTabsState = (initialAnimation, activeTabId) => {
5
+ const useTabsState = (initialAnimation, tabIndex) => {
6
6
  const [tabs, setTabs] = (0, react_1.useState)([]);
7
- const [activeTabIndex, setActiveTabIndex] = (0, react_1.useState)(activeTabId !== null && activeTabId !== void 0 ? activeTabId : 0);
7
+ const [activeTabIndex, setActiveTabIndex] = (0, react_1.useState)(tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0);
8
8
  const [animationDirection, setAnimationDirection] = (0, react_1.useState)(initialAnimation);
9
9
  return { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection };
10
10
  };
@@ -42,7 +42,7 @@ const theme_35 = __importDefault(require("../select/theme"));
42
42
  const theme_36 = __importDefault(require("../sidemenu/theme"));
43
43
  const theme_37 = __importDefault(require("../skeleton/theme"));
44
44
  const theme_38 = __importDefault(require("../spinner/theme"));
45
- const theme_39 = __importDefault(require("../step/theme"));
45
+ const theme_39 = __importDefault(require("../stepIndicator/theme"));
46
46
  const theme_40 = __importDefault(require("../stepperHorizontal/theme"));
47
47
  const theme_41 = __importDefault(require("../stepperVertical/theme"));
48
48
  const theme_42 = __importDefault(require("../switch/theme"));
@@ -52,7 +52,7 @@ export const Footer = vui((props, ref) => {
52
52
  });
53
53
  const downMd = useDown('md');
54
54
  const downLg = useDown('lg');
55
- return (_jsx(FooterProvider, { value: context, children: _jsxs(FooterBase, { className: cs('vui-footer', isApplication ? 'vui-footer-app' : '', className), px: isApplication ? '40px' : 3, py: isSlim ? (downMd ? '16px' : '9px') : 5, role: "contentinfo", ...styles.container, ref: ref, ...rest, children: [isApplication && (_jsx(FooterContent, { alignContent: "center", alignItems: "center", maxW: "100%", children: _jsxs(FooterRow, { alignContent: "space-between", w: 1, children: [_jsx(Box, { alignItems: "self-start", columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: applicationLinks?.map((link, index) => (_jsxs(Box, { flex: { xs: '0 0 50%', sm: '0 0 auto' }, children: [link.items && (_jsxs(Menu, { isLazy: false, offset: [-16, 9], placement: "top-start", size: "lg", ...rest, children: [_jsx(Menu.Button, { as: Link, className: "vui-footerLink-trigger", pt: "3px", role: "button", text: link.text, title: link.text, ...styles.link, ...rest }), _jsx(Menu.List, { maxH: 400, right: 0, w: 320, ...styles.list, children: link.items.map(({ text, url }, index) => (_jsx(Menu.Item, { isTruncated: true, linkProps: { href: url }, text: text, title: text, ...styles.item }, index))) })] })), !link.items && _jsx(FooterLink, { ...link, href: link.url })] }, index))) }), downLg && _jsx(Divider, { borderColor: "sandstone.main", mb: 0.5, mt: 1, w: 1 }), _jsxs(Box, { centerV: true, columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, justifyContent: { sm: 'center', lg: 'flex-end' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: [applicationStaticItems?.map((text, index) => (_jsx(Box, { children: _jsx(T, { size: "sm", children: text }) }, index))), isDNV ? (_jsx(Box, { children: _jsx(T, { size: "sm", children: "@ DNV AS 2021" }) })) : (_jsx(Box, { children: _jsxs(T, { size: "sm", children: [_jsx(T, { weight: "demi", children: "Veracity by DNV" }), ", DNV AS"] }) })), _jsxs(Box, { children: [applicationSocialLinks?.map((link, index) => (_jsx(Link, { "aria-label": link.text, fontWeight: "demi", href: link.url, iconLeft: _jsx(Link.Icon, { name: `cubCircle${link.text}`, radius: "50%", size: "xs" }), isExternal: true, mr: 1, size: { _: 'sm', md: 'md' }, ...styles.link }, index))), _jsx(Link, { fontWeight: "demi", href: linkedIn ?? defaultLinkedInUrl, isExternal: true, size: { _: 'sm', md: 'md' }, ...styles.link, children: _jsx(FooterHeading, { fontSize: "16px", mb: 0, text: "Follow us" }) })] })] })] }) })), !isApplication && isSlim && (_jsx(FooterContent, { alignContent: "center", alignItems: "center", maxW: { xs: 343, sm: 305, md: 720, lg: 975 }, children: _jsxs(FooterRow, { children: [slimLinks.map((link, index) => {
55
+ return (_jsx(FooterProvider, { value: context, children: _jsxs(FooterBase, { className: cs('vui-footer', isApplication ? 'vui-footer-app' : '', className), px: isApplication ? '40px' : 3, py: isSlim ? (downMd ? '16px' : '9px') : 5, role: "contentinfo", ...styles.container, ref: ref, ...rest, children: [isApplication && (_jsx(FooterContent, { alignContent: "center", alignItems: "center", maxW: "100%", children: _jsxs(FooterRow, { alignContent: "space-between", w: 1, children: [_jsx(Box, { alignItems: "self-start", columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: applicationLinks?.map((link, index) => (_jsxs(Box, { flex: { xs: '0 0 50%', sm: '0 0 auto' }, children: [link.items && (_jsxs(Menu, { isLazy: false, offset: [-16, 9], placement: "top-start", size: "lg", ...rest, children: [_jsx(Menu.Button, { as: Link, className: "vui-footerLink-trigger", pt: "3px", role: "button", text: link.text, title: link.text, ...styles.link, ...rest }), _jsx(Menu.List, { maxH: 400, right: 0, w: 320, ...styles.list, children: link.items.map(({ text, url }, index) => (_jsx(Menu.Item, { isTruncated: true, linkProps: { href: url }, text: text, title: text, ...styles.item }, index))) })] })), !link.items && _jsx(FooterLink, { ...link, href: link.url })] }, index))) }), downLg && _jsx(Divider, { borderColor: "sandstone.main", mb: 0.5, mt: 1, w: 1 }), _jsxs(Box, { centerV: true, columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, justifyContent: { sm: 'center', lg: 'flex-end' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: [applicationStaticItems?.map((text, index) => (_jsx(Box, { children: _jsx(T, { size: "sm", children: text }) }, index))), isDNV ? (_jsx(Box, { children: _jsx(T, { size: "sm", children: "\u00A9 DNV AS 2021" }) })) : (_jsx(Box, { children: _jsxs(T, { size: "sm", children: [_jsx(T, { weight: "demi", children: "Veracity by DNV" }), ", DNV AS"] }) })), _jsxs(Box, { children: [applicationSocialLinks?.map((link, index) => (_jsx(Link, { "aria-label": link.text, fontWeight: "demi", href: link.url, iconLeft: _jsx(Link.Icon, { name: `cubCircle${link.text}`, radius: "50%", size: "xs" }), isExternal: true, mr: 1, size: { _: 'sm', md: 'md' }, ...styles.link }, index))), _jsx(Link, { fontWeight: "demi", href: linkedIn ?? defaultLinkedInUrl, isExternal: true, size: { _: 'sm', md: 'md' }, ...styles.link, children: _jsx(FooterHeading, { fontSize: "16px", mb: 0, text: "Follow us" }) })] })] })] }) })), !isApplication && isSlim && (_jsx(FooterContent, { alignContent: "center", alignItems: "center", maxW: { xs: 343, sm: 305, md: 720, lg: 975 }, children: _jsxs(FooterRow, { children: [slimLinks.map((link, index) => {
56
56
  /** if the screen is small drop one specific link */
57
57
  if (downLg && link?.id === 'support')
58
58
  return;
@@ -43,7 +43,7 @@ export * from './radio';
43
43
  export * from './select';
44
44
  export * from './sidemenu';
45
45
  export * from './skeleton';
46
- export * from './step';
46
+ export * from './stepIndicator';
47
47
  export * from './stepperHorizontal';
48
48
  export * from './stepperVertical';
49
49
  export * from './spinner';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}
package/dist/esm/index.js CHANGED
@@ -43,7 +43,7 @@ export * from './radio';
43
43
  export * from './select';
44
44
  export * from './sidemenu';
45
45
  export * from './skeleton';
46
- export * from './step';
46
+ export * from './stepIndicator';
47
47
  export * from './stepperHorizontal';
48
48
  export * from './stepperVertical';
49
49
  export * from './spinner';
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,cAAc,iBAAiB,CAAA"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"stepIndicator.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/stepIndicator.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAazD;;GAEG;AACH,eAAO,MAAM,aAAa,2DAmCxB,CAAA;AAIF,eAAe,aAAa,CAAA"}
@@ -12,7 +12,7 @@ const Content = ({ number, variant, size }) => {
12
12
  return _jsx(Icon, { name: "falCheck", size: size });
13
13
  if (variant === 'error')
14
14
  return _jsx(Icon, { name: "falTimes", size: size });
15
- return _jsx(T, { fontWeight: 600, children: number });
15
+ return (_jsx(T, { fontSize: size === 'md' ? 16 : 14, fontWeight: 600, children: number }));
16
16
  };
17
17
  /**
18
18
  * Implements stepper indicator **
@@ -20,7 +20,7 @@ const Content = ({ number, variant, size }) => {
20
20
  export const StepIndicator = vui((props, ref) => {
21
21
  const { icon, number, className, size, variant, ...rest } = props;
22
22
  const styles = useStyleConfig('StepIndicator', props);
23
- return icon ? (_jsx(Button, { className: cs('vui-stepIndicator', className), icon: icon, ref: ref, ...styles.icon, ...rest, isRound: true, minW: "auto", pointerEvents: "none", size: size })) : (_jsxs(Button, { className: cs('vui-stepIndicator', className), ref: ref, ...styles.button, ...rest, isRound: true, minW: "auto", outline: "6px solid white", pointerEvents: "none", position: "relative", size: size, children: [_jsx(Box, { mx: 0.5, position: "relative" }), _jsx(Box, { fontSize: `${size === 'md' ? 16 : 13}px`, mx: 0.5, position: "absolute", children: _jsx(Content, { number: number, size: size, variant: variant }) })] }));
23
+ return icon ? (_jsx(Button, { className: cs('vui-stepIndicator', 'vui-stepIndicatorIcon', className), icon: icon, ref: ref, ...styles.icon, ...rest, isRound: true, minW: "auto", pointerEvents: "none", size: size })) : (_jsxs(Button, { className: cs('vui-stepIndicator', 'vui-stepIndicatorNumber', className), ref: ref, ...styles.button, ...rest, isRound: true, minW: "auto", outline: "6px solid white", pointerEvents: "none", position: "relative", size: size, children: [_jsx(Box, { mx: 0.5, position: "relative" }), _jsx(Box, { mx: 0.5, position: "absolute", children: _jsx(Content, { number: number, size: String(size), variant: String(variant) }) })] }));
24
24
  });
25
25
  StepIndicator.displayName = 'StepIndicator';
26
26
  export default StepIndicator;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"stepIndicatorTypes.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/stepIndicatorTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,YAAY,CAAC,eAAe,CAAC,GAAG;IAC9B,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAEH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAA"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/stepIndicator/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,wBAKC"}