@veracity/vui 2.10.0 → 2.11.0

package/dist/esm/theme/components.d.ts

@@ -883,6 +883,7 @@ declare const _default: {
                         activeBorderColor: string;
                     };
                     link: {
+                        size: string;
                         color: string;
                         borderColor: string;
                         hoverColor: string;
@@ -950,6 +951,7 @@ declare const _default: {
                         activeBorderColor: string;
                     };
                     link: {
+                        size: string;
                         color: string;
                         borderColor: string;
                         hoverBg: string;
@@ -1714,6 +1716,69 @@ declare const _default: {
             };
         };
     };
+    Definition: {
+        baseStyle: {};
+        defaultProps: {
+            size: string;
+            variant: string;
+        };
+        parts: string[];
+        sizes: {
+            sm: {
+                container: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                dt: {
+                    fontSize: string;
+                    spaceX: number;
+                };
+                dd: {
+                    fontSize: string;
+                    spaceX: number;
+                };
+                icon: {
+                    size: string;
+                    mx: number;
+                    my: string;
+                };
+            };
+            md: {
+                container: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                dt: {
+                    fontSize: string;
+                    spaceX: number;
+                };
+                dd: {
+                    fontSize: string;
+                    spaceX: number;
+                };
+                icon: {
+                    size: string;
+                    mx: number;
+                    my: string;
+                };
+            };
+        };
+        variants: {
+            light: {
+                container: {
+                    bg: string;
+                    color: string;
+                    borderColor: string;
+                };
+            };
+            dark: {
+                container: {
+                    bg: string;
+                    color: string;
+                };
+            };
+        };
+    };
     Popover: {
         baseStyle: {};
         defaultProps: {};
@@ -1879,7 +1944,11 @@ declare const _default: {
         };
     };
     Spinner: {
-        baseStyle: {};
+        baseStyle: {
+            container: {
+                padding: number;
+            };
+        };
         defaultProps: {
             size: string;
             variant: string;
@@ -1914,14 +1983,28 @@ declare const _default: {
                     w: number;
                 };
             };
-            card: {
+            xl: {
+                circle: {
+                    borderWidth: number;
+                    h: number;
+                    w: number;
+                };
+            };
+            xxl: {
                 circle: {
                     borderWidth: number;
                     h: number;
                     w: number;
                 };
             };
-            page: {
+            xxxl: {
+                circle: {
+                    borderWidth: number;
+                    h: number;
+                    w: number;
+                };
+            };
+            xxxxl: {
                 circle: {
                     borderWidth: number;
                     h: number;
@@ -1930,7 +2013,7 @@ declare const _default: {
             };
         };
         variants: {
-            lightBackground: {
+            light: {
                 circle: {
                     borderColor: string;
                     borderTopColor: string;
@@ -1939,7 +2022,10 @@ declare const _default: {
                     color: string;
                 };
             };
-            darkBackground: {
+            dark: {
+                container: {
+                    bg: string;
+                };
                 circle: {
                     borderColor: string;
                     borderTopColor: string;

package/dist/esm/theme/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,wBA6CC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,wBA8CC"}

package/dist/esm/theme/components.js

@@ -7,6 +7,7 @@ import Breadcrumbs from '../breadcrumbs/theme';
 import Button from '../button/theme';
 import Card from '../card/theme';
 import Checkbox from '../checkbox/theme';
+import Definition from '../definition/theme';
 import Dialog from '../dialog/theme';
 import Divider from '../divider/theme';
 import DragAndDrop from '../dragAndDrop/theme';
@@ -77,6 +78,7 @@ export default {
     Panel,
     Progress,
     ProgressCircular,
+    Definition,
     Popover,
     Radio,
     Select,

package/dist/esm/theme/defaultTheme.d.ts

@@ -466,6 +466,7 @@ declare const defaultTheme: {
         md: number;
         lg: number;
         xl: number;
+        xxl: number;
         '2xl': number;
     };
     shadows: {
@@ -1388,6 +1389,7 @@ declare const defaultTheme: {
                             activeBorderColor: string;
                         };
                         link: {
+                            size: string;
                             color: string;
                             borderColor: string;
                             hoverColor: string;
@@ -1455,6 +1457,7 @@ declare const defaultTheme: {
                             activeBorderColor: string;
                         };
                         link: {
+                            size: string;
                             color: string;
                             borderColor: string;
                             hoverBg: string;
@@ -2219,6 +2222,69 @@ declare const defaultTheme: {
                 };
             };
         };
+        Definition: {
+            baseStyle: {};
+            defaultProps: {
+                size: string;
+                variant: string;
+            };
+            parts: string[];
+            sizes: {
+                sm: {
+                    container: {
+                        fontSize: string;
+                        lineHeight: string;
+                    };
+                    dt: {
+                        fontSize: string;
+                        spaceX: number;
+                    };
+                    dd: {
+                        fontSize: string;
+                        spaceX: number;
+                    };
+                    icon: {
+                        size: string;
+                        mx: number;
+                        my: string;
+                    };
+                };
+                md: {
+                    container: {
+                        fontSize: string;
+                        lineHeight: string;
+                    };
+                    dt: {
+                        fontSize: string;
+                        spaceX: number;
+                    };
+                    dd: {
+                        fontSize: string;
+                        spaceX: number;
+                    };
+                    icon: {
+                        size: string;
+                        mx: number;
+                        my: string;
+                    };
+                };
+            };
+            variants: {
+                light: {
+                    container: {
+                        bg: string;
+                        color: string;
+                        borderColor: string;
+                    };
+                };
+                dark: {
+                    container: {
+                        bg: string;
+                        color: string;
+                    };
+                };
+            };
+        };
         Popover: {
             baseStyle: {};
             defaultProps: {};
@@ -2384,7 +2450,11 @@ declare const defaultTheme: {
             };
         };
         Spinner: {
-            baseStyle: {};
+            baseStyle: {
+                container: {
+                    padding: number;
+                };
+            };
             defaultProps: {
                 size: string;
                 variant: string;
@@ -2419,14 +2489,28 @@ declare const defaultTheme: {
                         w: number;
                     };
                 };
-                card: {
+                xl: {
+                    circle: {
+                        borderWidth: number;
+                        h: number;
+                        w: number;
+                    };
+                };
+                xxl: {
                     circle: {
                         borderWidth: number;
                         h: number;
                         w: number;
                     };
                 };
-                page: {
+                xxxl: {
+                    circle: {
+                        borderWidth: number;
+                        h: number;
+                        w: number;
+                    };
+                };
+                xxxxl: {
                     circle: {
                         borderWidth: number;
                         h: number;
@@ -2435,7 +2519,7 @@ declare const defaultTheme: {
                 };
             };
             variants: {
-                lightBackground: {
+                light: {
                     circle: {
                         borderColor: string;
                         borderTopColor: string;
@@ -2444,7 +2528,10 @@ declare const defaultTheme: {
                         color: string;
                     };
                 };
-                darkBackground: {
+                dark: {
+                    container: {
+                        bg: string;
+                    };
                     circle: {
                         borderColor: string;
                         borderTopColor: string;

package/dist/esm/theme/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/esm/theme/foundations/colors.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore - the missing types have to be added into the onedesign-tokens package
-import * as oneDesignButtonTokens from '../../onedesign-tokens/dist/js/es6/rem/button';
+import * as oneDesignButtonTokens from '../../onedesign-tokens/dist/js/rem/button';
 const buttonTypePrimaryDefaultBorderColorDark = oneDesignButtonTokens.buttonTypePrimaryDefaultBorderColorDark;
 const buttonTypePrimaryDefaultBorderColorLight = oneDesignButtonTokens.buttonTypePrimaryDefaultBorderColorLight;
 const buttonTypePrimaryDefaultBackgroundColorDark = oneDesignButtonTokens.buttonTypePrimaryDefaultBackgroundColorDark;

package/dist/esm/theme/foundations/index.d.ts

@@ -466,6 +466,7 @@ declare const _default: {
         md: number;
         lg: number;
         xl: number;
+        xxl: number;
         '2xl': number;
     };
     shadows: {

package/dist/esm/theme/foundations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,wBAqBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,wBAqBC"}

package/dist/esm/theme/foundations/screens.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
     md: number;
     lg: number;
     xl: number;
+    xxl: number;
     '2xl': number;
 };
 export default _default;

package/dist/esm/theme/foundations/screens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screens.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/screens.ts"],"names":[],"mappings":";;;;;;;;AACA,wBAOC"}
+{"version":3,"file":"screens.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/screens.ts"],"names":[],"mappings":";;;;;;;;;AACA,wBAQC"}

package/dist/esm/theme/foundations/screens.js

@@ -5,5 +5,6 @@ export default {
     md: 768,
     lg: 1024,
     xl: 1280,
-    '2xl': 1536
+    xxl: 1536,
+    '2xl': 1536 // Obsolete, please use 'xxl' instead
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/accordion/accordion.types.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react'
 
+import { IconProps } from '../icon'
 import { ListItemProps } from '../list'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
@@ -45,8 +46,9 @@ export type AccordionItemProps = ListItemProps & {
   onToggle?: (event: AccordionOnToggleEvent) => void
 }
 
-export type AccordionItemArrowProps = {
+export type AccordionItemArrowProps = IconProps & {
   collapsed?: boolean
-  orientation?: AccordionOrientation
   color?: string
+  disabled?: boolean
+  orientation?: AccordionOrientation
 }

package/src/accordion/accordionItem.tsx

@@ -76,12 +76,16 @@ export const AccordionItem = (props: AccordionItemProps) => {
             <AccordionItemArrow collapsed={collapsedInternal} color={styles.icon.color} />
           </Box>
         )}
-        <Box fontWeight={typeof title === 'string' ? '500' : 'inherit'} ml={isIconStart ? 2 : 0}>
+        <Box
+          fontWeight={typeof title === 'string' ? '500' : 'inherit'}
+          ml={isIconStart ? 2 : 0}
+          opacity={disabled ? 0.5 : 1}
+        >
           {title}
         </Box>
         {isIconEnd && (
           <Box>
-            <AccordionItemArrow collapsed={collapsedInternal} color={styles.icon.color} />
+            <AccordionItemArrow collapsed={collapsedInternal} color={styles.icon.color} disabled={disabled} />
           </Box>
         )}
       </Box>

package/src/accordion/accordionItemArrow.tsx

@@ -17,9 +17,17 @@ const names = {
 const AccordionItemArrow = ({
   collapsed,
   color = 'sandstone.10',
-  orientation = 'vertical'
+  disabled = false,
+  orientation = 'vertical',
+  ...rest
 }: AccordionItemArrowProps) => (
-  <Icon name={names[orientation][collapsed ? 'collapsed' : 'expanded']} pathFill={color} size="sm" />
+  <Icon
+    name={names[orientation][collapsed ? 'collapsed' : 'expanded']}
+    opacity={disabled ? 0.5 : 1}
+    pathFill={color}
+    size="sm"
+    {...rest}
+  />
 )
 
 export default React.memo(AccordionItemArrow)

package/src/accordion/accordionItemHorizontal.tsx

@@ -64,8 +64,17 @@ export const AccordionItemHorizontal = (props: AccordionItemProps) => {
         p={styles.item.pt}
         w="100%"
       >
-        {!collapsedInternal && <Box fontWeight={fontWeight}>{title}</Box>}
-        <AccordionItemArrow collapsed={collapsedInternal} orientation="horizontal" />
+        {!collapsedInternal && (
+          <Box fontWeight={fontWeight} opacity={disabled ? 0.5 : 1}>
+            {title}
+          </Box>
+        )}
+        <AccordionItemArrow
+          collapsed={collapsedInternal}
+          color={styles.icon.color}
+          disabled={disabled}
+          orientation="horizontal"
+        />
       </Box>
 
       {!collapsedInternal ? (

package/src/button/button.tsx

@@ -6,7 +6,7 @@ import { activeClassName, cs, filterUndefined, isReactText, isString } from '../
 import { ButtonProps } from './button.types'
 import ButtonIcon from './buttonIcon'
 import ButtonText from './buttonText'
-import { buttonStateMapping } from './consts'
+import { buttonStateMapping, loadingIconProps } from './consts'
 import { ButtonProvider } from './context'
 
 const ContentWrapper = styled.span`
@@ -65,7 +65,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
     isSplit,
     isTruncated,
     size,
-    state = props.isLoading ? 'loading' : '',
+    state = '',
     stateMapping,
     text,
     title,
@@ -94,26 +94,19 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
   const spaceXText = spaceX * 2 - border
   const iconLeftMr = spaceXItem + 1 + 'px'
   const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px'
-  const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px'
+  const pl = (icon || iconLeft || isLoading ? spaceXItem : spaceXText) + 'px'
   const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px'
 
   let ariaLabel = 'vui-button'
 
-  if (title) {
-    ariaLabel = title
-  } else {
-    if (isString(text)) {
-      ariaLabel = text
-    } else if (isReactText(text)) {
-      ariaLabel = text.toString()
-    } else {
-      if (isString(icon)) {
-        ariaLabel = icon
-      } else if (isString(iconLeft)) {
-        ariaLabel = iconLeft
-      } else if (isString(iconRight)) {
-        ariaLabel = iconRight
-      }
+  if (title) ariaLabel = title
+  else {
+    if (isString(text)) ariaLabel = text
+    else if (isReactText(text)) ariaLabel = text.toString()
+    else {
+      if (isString(icon)) ariaLabel = icon
+      else if (isString(iconLeft)) ariaLabel = iconLeft
+      else if (isString(iconRight)) ariaLabel = iconRight
     }
   }
 
@@ -169,7 +162,13 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
           {isString(icon) ? <ButtonIcon name={icon} /> : icon}
           {!icon && (
             <>
-              {isString(iconLeft) ? <ButtonIcon mr={isDropDown ? 0 : iconLeftMr} name={iconLeft} /> : iconLeft}
+              {isLoading ? (
+                <ButtonIcon mr={isDropDown ? 0 : iconLeftMr} {...loadingIconProps} />
+              ) : isString(iconLeft) ? (
+                <ButtonIcon mr={isDropDown ? 0 : iconLeftMr} name={iconLeft} />
+              ) : (
+                iconLeft
+              )}
 
               {children ?? (isReactText(text) ? <ButtonText {...{ isTruncated, text }} /> : text)}
 

package/src/button/consts.ts

@@ -1,5 +1,11 @@
 import { ButtonStateMapping } from './button.types'
 
+export const loadingIconProps = {
+  animation: 'vui-spin 0.6s linear infinite',
+  name: 'fadSpinnerThird',
+  pathFill: ['', 'transparent']
+}
+
 export const buttonStateMapping: ButtonStateMapping = {
   error: {
     variant: 'solidRed',
@@ -10,11 +16,7 @@ export const buttonStateMapping: ButtonStateMapping = {
   },
   loading: {
     variant: 'primaryDark',
-    iconProps: {
-      animation: 'vui-spin 0.6s linear infinite',
-      name: 'fadSpinnerThird',
-      pathFill: ['', 'transparent']
-    }
+    iconProps: loadingIconProps
   },
   success: {
     variant: 'solidGreen',

package/src/core/vuiProvider/globalStyle.tsx

@@ -30,6 +30,7 @@ export default createGlobalStyle<GlobalStyleProps>`
   button,
   .vui-avatar,
   .vui-tag,
+  .vui-sidemenu-item,
   .vui-switchTrack {
     --x-ring-color: transparent;
   }
@@ -38,6 +39,7 @@ export default createGlobalStyle<GlobalStyleProps>`
   li:focus-visible,
   .vui-avatar:focus-visible,
   .vui-tag:focus-visible,
+  .vui-sidemenu-item:focus-visible,
   .vui-switchTrack:focus-visible {
     --x-ring-color: var(--vui-colors-focusColor);
     outline: var(--vui-colors-focusColor) solid 3px;