@veracity/vui 0.7.0-beta.1 → 0.7.0-beta.2

package/dist/esm/footer/footerColumn.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import Box from '../box';
 import { useStyleConfig, vui } from '../core';
+import { cs } from '../utils';
 import { useFooterContext } from './context';
 import FooterSection from './footerSection';
 /** Organizes sections with links into a single column. Different width per breakpoint. */
 const FooterColumn = vui((props, ref) => {
-    const { children, sections, ...rest } = props;
+    const { children, className, sections, ...rest } = props;
     const styles = useStyleConfig('Footer', useFooterContext());
-    return (React.createElement(Box, { className: "vui-footerColumn", column: true, flex: { xs: '0 0 100%', sm: '0 0 50%', md: '0 0 25%' }, p: 1.5, ref: ref, spaceY: 4, ...styles.column, ...rest }, children ?? sections?.map((section, index) => React.createElement(FooterSection, { key: index, ...section }))));
+    return (React.createElement(Box, { className: cs('vui-footerColumn', className), column: true, flex: { xs: '0 0 100%', sm: '0 0 50%', md: '0 0 25%' }, p: 1.5, ref: ref, spaceY: 4, ...styles.column, ...rest }, children ?? sections?.map((section, index) => React.createElement(FooterSection, { key: index, ...section }))));
 });
 export default FooterColumn;

package/dist/esm/footer/footerContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footerContent.d.ts","sourceRoot":"","sources":["../../../src/footer/footerContent.tsx"],"names":[],"mappings":"AAOA,yEAAyE;AACzE,eAAO,MAAM,aAAa,kEAMxB,CAAA;AAIF,eAAe,aAAa,CAAA"}
+{"version":3,"file":"footerContent.d.ts","sourceRoot":"","sources":["../../../src/footer/footerContent.tsx"],"names":[],"mappings":"AAQA,yEAAyE;AACzE,eAAO,MAAM,aAAa,kEAgBxB,CAAA;AAIF,eAAe,aAAa,CAAA"}

package/dist/esm/footer/footerContent.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import Box from '../box';
 import { useStyleConfig, vui } from '../core';
+import { cs } from '../utils';
 import { useFooterContext } from './context';
 /** Controls max-width of the content and centers itself horizontally. */
 export const FooterContent = vui((props, ref) => {
+    const { className, ...rest } = props;
     const styles = useStyleConfig('Footer', useFooterContext());
-    return (React.createElement(Box, { className: "vui-footerContent", column: true, maxW: 1200, mx: "auto", ref: ref, w: "100%", ...styles.content, ...props }));
+    return (React.createElement(Box, { className: cs('vui-footerContent', className), column: true, maxW: 1200, mx: "auto", ref: ref, w: "100%", ...styles.content, ...rest }));
 });
 FooterContent.displayName = 'FooterContent';
 export default FooterContent;

package/dist/esm/footer/footerHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footerHeading.d.ts","sourceRoot":"","sources":["../../../src/footer/footerHeading.tsx"],"names":[],"mappings":"AAGA,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAGlD,kCAAkC;AAClC,eAAO,MAAM,aAAa,oDAIxB,CAAA;AAIF,eAAe,aAAa,CAAA"}
+{"version":3,"file":"footerHeading.d.ts","sourceRoot":"","sources":["../../../src/footer/footerHeading.tsx"],"names":[],"mappings":"AAGA,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAIlD,kCAAkC;AAClC,eAAO,MAAM,aAAa,oDAOxB,CAAA;AAIF,eAAe,aAAa,CAAA"}

package/dist/esm/footer/footerHeading.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import Heading from '../heading';
+import { cs } from '../utils';
 import { useFooterContext } from './context';
 /** Heading of a links section. */
 export const FooterHeading = vui((props, ref) => {
+    const { className, ...rest } = props;
     const styles = useStyleConfig('Footer', useFooterContext());
-    return React.createElement(Heading, { className: "vui-footerHeading", mb: 1, ref: ref, size: "h5", ...styles.heading, ...props });
+    return (React.createElement(Heading, { className: cs('vui-footerHeading', className), mb: 1, ref: ref, size: "h5", ...styles.heading, ...rest }));
 });
 FooterHeading.displayName = 'FooterHeading';
 export default FooterHeading;

package/dist/esm/footer/footerLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footerLink.d.ts","sourceRoot":"","sources":["../../../src/footer/footerLink.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGzC,0CAA0C;AAC1C,eAAO,MAAM,UAAU,gDAMrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"footerLink.d.ts","sourceRoot":"","sources":["../../../src/footer/footerLink.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIzC,0CAA0C;AAC1C,eAAO,MAAM,UAAU,gDAerB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/esm/footer/footerLink.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import Link from '../link';
+import { cs } from '../utils';
 import { useFooterContext } from './context';
 /** Individual link item of the Footer. */
 export const FooterLink = vui((props, ref) => {
+    const { className, ...rest } = props;
     const styles = useStyleConfig('Footer', useFooterContext());
-    return (React.createElement(Link, { className: "vui-footerLink", colorScheme: "white", py: 0.5, ref: ref, size: "sm", ...styles.link, ...props }));
+    return (React.createElement(Link, { className: cs('vui-footerLink', className), colorScheme: "white", py: 0.5, ref: ref, size: "sm", ...styles.link, ...rest }));
 });
 FooterLink.displayName = 'FooterLink';
 export default FooterLink;

package/dist/esm/footer/footerRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footerRow.d.ts","sourceRoot":"","sources":["../../../src/footer/footerRow.tsx"],"names":[],"mappings":"AAEA,OAAY,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAItC,+DAA+D;AAC/D,QAAA,MAAM,SAAS,iDAIb,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"footerRow.d.ts","sourceRoot":"","sources":["../../../src/footer/footerRow.tsx"],"names":[],"mappings":"AAEA,OAAY,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAKtC,+DAA+D;AAC/D,QAAA,MAAM,SAAS,iDAKb,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/esm/footer/footerRow.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import Box from '../box';
 import { useStyleConfig, vui } from '../core';
+import { cs } from '../utils';
 import { useFooterContext } from './context';
 /** Organizes Footer content into a row of multuple columns. */
 const FooterRow = vui((props, ref) => {
+    const { className, ...rest } = props;
     const styles = useStyleConfig('Footer', useFooterContext());
-    return React.createElement(Box, { className: "vui-footerRow", m: -1.5, ref: ref, wrap: true, ...styles.row, ...props });
+    return React.createElement(Box, { className: cs('vui-footerRow', className), m: -1.5, ref: ref, wrap: true, ...styles.row, ...rest });
 });
 export default FooterRow;

package/dist/esm/footer/footerSection.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import Box from '../box';
 import { useStyleConfig, v, vui } from '../core';
-import { isJsx } from '../utils';
+import { cs, isJsx } from '../utils';
 import { useFooterContext } from './context';
 import FooterHeading from './footerHeading';
 import FooterLink from './footerLink';
 /** Section includes a heading and a set of links. */
 export const FooterSection = vui((props, ref) => {
-    const { children, heading, links, ...rest } = props;
+    const { children, className, heading, links, ...rest } = props;
     const styles = useStyleConfig('Footer', useFooterContext());
-    return (React.createElement(Box, { className: "vui-footerSection", column: true, ref: ref, ...styles.section, ...rest },
+    return (React.createElement(Box, { className: cs('vui-footerSection', className), column: true, ref: ref, ...styles.section, ...rest },
         isJsx(heading) ? heading : React.createElement(FooterHeading, { text: heading }),
         children ??
             (isJsx(links) ? (links) : (React.createElement(v.ul, null, links?.map(({ text, url }, index) => (React.createElement(v.li, { key: index },

package/dist/esm/footer/footerTrademark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footerTrademark.d.ts","sourceRoot":"","sources":["../../../src/footer/footerTrademark.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAKrD,qDAAqD;AACrD,eAAO,MAAM,eAAe,6DA4B1B,CAAA;AAEF,eAAe,eAAe,CAAA"}
+{"version":3,"file":"footerTrademark.d.ts","sourceRoot":"","sources":["../../../src/footer/footerTrademark.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAKrD,qDAAqD;AACrD,eAAO,MAAM,eAAe,6DA4B1B,CAAA;AAEF,eAAe,eAAe,CAAA"}

package/dist/esm/footer/footerTrademark.js

@@ -3,14 +3,15 @@ import Box from '../box';
 import { useStyleConfig, vui } from '../core';
 import Link from '../link';
 import T from '../t';
+import { cs } from '../utils';
 import { useFooterContext } from './context';
 import FooterColumn from './footerColumn';
 const defaultLinkedInUrl = 'https://www.linkedin.com/showcase/veracity-data-platform';
 /** Section includes a heading and a set of links. */
 export const FooterTrademark = vui((props, ref) => {
-    const { linkedIn, ...rest } = props;
+    const { className, linkedIn, ...rest } = props;
     const styles = useStyleConfig('Footer', useFooterContext());
-    return (React.createElement(Box, { className: "vui-footerTrademark", ref: ref, w: "100%", wrap: true, ...styles.trademark, ...rest },
+    return (React.createElement(Box, { className: cs('vui-footerTrademark', className), ref: ref, w: "100%", wrap: true, ...styles.trademark, ...rest },
         React.createElement(FooterColumn, { centerV: true, flex: { xs: '0 0 100%', md: '0 0 25%' } },
             React.createElement(Link, { colorScheme: "white", fontWeight: "demi", href: linkedIn ?? defaultLinkedInUrl, iconLeft: React.createElement(Link.Icon, { mr: 1, name: "fabLinkedin", size: "sm" }), isExternal: true }, "Follow us")),
         React.createElement(FooterColumn, { centerV: true, flex: { xs: '0 0 100%', md: '0 0 75%' } },

package/dist/esm/header/headerAccount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerAccount.d.ts","sourceRoot":"","sources":["../../../src/header/headerAccount.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,kBAAkB,EAA6B,MAAM,uBAAuB,CAAA;AAMrF,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAmDtD;yBAnDe,aAAa;;;AAuD7B,eAAe,aAAa,CAAA"}
+{"version":3,"file":"headerAccount.d.ts","sourceRoot":"","sources":["../../../src/header/headerAccount.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,kBAAkB,EAA6B,MAAM,uBAAuB,CAAA;AAMrF,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eA0DtD;yBA1De,aAAa;;;AA8D7B,eAAe,aAAa,CAAA"}

package/dist/esm/header/headerAccount.js

@@ -18,14 +18,14 @@ export function HeaderAccount(props) {
     const contentScreenProps = isMobile
         ? { h: `calc(100vh - ${headerHeight}px)`, left: 0, position: 'fixed', top: headerHeight, w: '100vw' }
         : { maxH: 360, py: 1, w: 320 };
-    const name = isObject(userInfo) ? userInfo.userName : '';
-    return (React.createElement(Popover, { offset: [0, 8], options: popoverOptions, placement: "bottom-end", ...rest },
-        React.createElement(Popover.Trigger, { as: Avatar, colorScheme: "prussian", isInteractive: true, ml: 2, name: name, title: "Account", variant: "solid", ...styles.trigger, ...triggerProps }),
-        React.createElement(Popover.Content, { column: true, ...styles.content, ...contentScreenProps, ...contentProps },
+    const name = isObject(userInfo) ? userInfo.displayName : '';
+    return (React.createElement(Popover, { isLazy: false, offset: [0, 8], options: popoverOptions, placement: "bottom-end", ...rest },
+        React.createElement(Popover.Trigger, { as: Avatar, className: "vui-headerAccountTrigger", colorScheme: "prussian", isInteractive: true, ml: 2, name: name, title: "Account", variant: "solid", ...styles.trigger, ...triggerProps }),
+        React.createElement(Popover.Content, { className: "vui-headerAccountContent", column: true, ...styles.content, ...contentScreenProps, ...contentProps },
             isJsx(userInfo) ? userInfo : userInfo && React.createElement(HeaderAccountUserInfo, { ...userInfo }),
             isJsx(sections)
                 ? sections
-                : sections && (React.createElement(List, null, sections.map(({ heading, links }, index) => (React.createElement(Fragment, { key: index },
+                : sections && (React.createElement(List, { className: "vui-headerAccountList" }, sections.map(({ heading, links }, index) => (React.createElement(Fragment, { key: index },
                     React.createElement(List.Divider, null),
                     heading && React.createElement(List.Heading, { text: heading }),
                     links?.map(({ icon, url, ...rest }, index) => (React.createElement(List.Item, { iconLeft: icon, key: index, linkProps: { href: url }, ...rest })))))))))));

package/dist/esm/header/headerAccount.types.d.ts

@@ -30,7 +30,7 @@ export declare type HeaderAccountUserInfoData = {
     /** Displays company name in account user info section. */
     companyName?: string;
     /** Displays user name in account user info section. */
-    userName?: string;
+    displayName?: string;
 };
 export declare type HeaderAccountUserInfoProps = BoxProps & HeaderAccountUserInfoData;
 //# sourceMappingURL=headerAccount.types.d.ts.map

package/dist/esm/header/headerAccount.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerAccount.types.d.ts","sourceRoot":"","sources":["../../../src/header/headerAccount.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,0DAA0D;AAC1D,oBAAY,iBAAiB,GAAG;IAC/B,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAA;IACrC,QAAQ,CAAC,EAAE,yBAAyB,CAAA;CACpC,CAAA;AAED,oBAAY,kBAAkB,GAAG,YAAY,GAAG;IAC/C,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,OAAO,CAAA;IACtD,2DAA2D;IAC3D,YAAY,CAAC,EAAE,cAAc,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAA;IAC/D,iEAAiE;IACjE,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,OAAO,CAAA;CACtD,CAAA;AAED,gEAAgE;AAChE,oBAAY,wBAAwB,GAAG;IACtC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,cAAc,EAAE,CAAA;CACxB,CAAA;AAED,oBAAY,yBAAyB,GAAG;IACvC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,oBAAY,0BAA0B,GAAG,QAAQ,GAAG,yBAAyB,CAAA"}
+{"version":3,"file":"headerAccount.types.d.ts","sourceRoot":"","sources":["../../../src/header/headerAccount.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,0DAA0D;AAC1D,oBAAY,iBAAiB,GAAG;IAC/B,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAA;IACrC,QAAQ,CAAC,EAAE,yBAAyB,CAAA;CACpC,CAAA;AAED,oBAAY,kBAAkB,GAAG,YAAY,GAAG;IAC/C,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,OAAO,CAAA;IACtD,2DAA2D;IAC3D,YAAY,CAAC,EAAE,cAAc,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAA;IAC/D,iEAAiE;IACjE,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,OAAO,CAAA;CACtD,CAAA;AAED,gEAAgE;AAChE,oBAAY,wBAAwB,GAAG;IACtC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,cAAc,EAAE,CAAA;CACxB,CAAA;AAED,oBAAY,yBAAyB,GAAG;IACvC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,oBAAY,0BAA0B,GAAG,QAAQ,GAAG,yBAAyB,CAAA"}

package/dist/esm/header/headerAccountUserInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerAccountUserInfo.d.ts","sourceRoot":"","sources":["../../../src/header/headerAccountUserInfo.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAA;AAElE,4FAA4F;AAC5F,eAAO,MAAM,qBAAqB,mEAqBhC,CAAA;AAIF,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"headerAccountUserInfo.d.ts","sourceRoot":"","sources":["../../../src/header/headerAccountUserInfo.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAA;AAElE,4FAA4F;AAC5F,eAAO,MAAM,qBAAqB,mEAmChC,CAAA;AAIF,eAAe,qBAAqB,CAAA"}

package/dist/esm/header/headerAccountUserInfo.js

@@ -3,15 +3,16 @@ import Avatar from '../avatar';
 import Box from '../box';
 import { useStyleConfig, vui } from '../core';
 import T from '../t';
+import { cs } from '../utils';
 import { useHeaderContext } from './context';
 /** Displays user information, like username and company name, within HeaderAccount part. */
 export const HeaderAccountUserInfo = vui((props, ref) => {
-    const { children, companyName, userName, ...rest } = props;
+    const { children, className, companyName, displayName, ...rest } = props;
     const styles = useStyleConfig('Header', useHeaderContext());
-    return (React.createElement(Box, { className: "vui-headerAccountUserInfo", p: 2, pb: 1, ref: ref, spaceX: 2, ...styles.accountUserInfo, ...rest }, children ?? (React.createElement(React.Fragment, null,
-        React.createElement(Avatar, { colorScheme: "prussian", name: userName, size: "lg", variant: "solid" }),
+    return (React.createElement(Box, { className: cs('vui-headerAccountUserInfo', className), p: 2, pb: 1, ref: ref, spaceX: 2, ...styles.accountUserInfo, ...rest }, children ?? (React.createElement(React.Fragment, null,
+        React.createElement(Avatar, { className: "vui-headerAccountUserInfoAvatar", colorScheme: "prussian", name: displayName, size: "lg", variant: "solid" }),
         React.createElement(Box, { column: true },
-            userName && (React.createElement(T, { mb: 0.5, weight: "demi" }, userName)),
+            displayName && (React.createElement(T, { mb: 0.5, weight: "demi" }, displayName)),
             companyName && React.createElement(T, null, companyName))))));
 });
 HeaderAccountUserInfo.displayName = 'HeaderAccountUserInfo';

package/dist/esm/header/headerContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerContent.d.ts","sourceRoot":"","sources":["../../../src/header/headerContent.tsx"],"names":[],"mappings":"AAOA,yEAAyE;AACzE,eAAO,MAAM,aAAa,kEAIxB,CAAA;AAIF,eAAe,aAAa,CAAA"}
+{"version":3,"file":"headerContent.d.ts","sourceRoot":"","sources":["../../../src/header/headerContent.tsx"],"names":[],"mappings":"AAQA,yEAAyE;AACzE,eAAO,MAAM,aAAa,kEAgBxB,CAAA;AAIF,eAAe,aAAa,CAAA"}

package/dist/esm/header/headerContent.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import Box from '../box';
 import { useStyleConfig, vui } from '../core';
+import { cs } from '../utils';
 import { useHeaderContext } from './context';
 /** Controls max-width of the content and centers itself horizontally. */
 export const HeaderContent = vui((props, ref) => {
+    const { className, ...rest } = props;
     const styles = useStyleConfig('Header', useHeaderContext());
-    return React.createElement(Box, { centerV: true, className: "vui-headerContent", h: 1, mx: "auto", ref: ref, w: 1, ...styles.content, ...props });
+    return (React.createElement(Box, { centerV: true, className: cs('vui-headerContent', className), h: 1, mx: "auto", ref: ref, w: 1, ...styles.content, ...rest }));
 });
 HeaderContent.displayName = 'HeaderContent';
 export default HeaderContent;

package/dist/esm/header/headerCreateAccount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerCreateAccount.d.ts","sourceRoot":"","sources":["../../../src/header/headerCreateAccount.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,0DAA0D;AAC1D,eAAO,MAAM,mBAAmB,iEA8B9B,CAAA;AAIF,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"headerCreateAccount.d.ts","sourceRoot":"","sources":["../../../src/header/headerCreateAccount.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,0DAA0D;AAC1D,eAAO,MAAM,mBAAmB,iEA8B9B,CAAA;AAIF,eAAe,mBAAmB,CAAA"}

package/dist/esm/header/headerCreateAccount.js

@@ -3,14 +3,15 @@ import Box from '../box';
 import { useStyleConfig, vui } from '../core';
 import Link from '../link';
 import T from '../t';
+import { cs } from '../utils';
 import { useHeaderContext } from './context';
 /** Text inviting to create an account when logged out. */
 export const HeaderCreateAccount = vui((props, ref) => {
-    const { children, url, ...rest } = props;
+    const { children, className, url, ...rest } = props;
     const { isMobile, links } = useHeaderContext() ?? {};
     const styles = useStyleConfig('Header', useHeaderContext()).createAccount;
     const screenProps = isMobile ? { borderBottom: '1px solid grey.40', p: 2 } : { ml: 3 };
-    return (React.createElement(Box, { className: "vui-headerCreateAccount", column: true, flexShrink: 0, ref: ref, ...styles.container, ...screenProps, ...rest }, children ?? (React.createElement(React.Fragment, null,
+    return (React.createElement(Box, { className: cs('vui-headerCreateAccount', className), column: true, flexShrink: 0, ref: ref, ...styles.container, ...screenProps, ...rest }, children ?? (React.createElement(React.Fragment, null,
         React.createElement(T, { size: "sm", ...styles.text }, "New to Veracity?"),
         React.createElement(Link, { fontWeight: "medium", href: url ?? links.signUp, isUnderlined: true, size: "sm", ...styles.link }, "Create account")))));
 });

package/dist/esm/header/headerDivider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerDivider.d.ts","sourceRoot":"","sources":["../../../src/header/headerDivider.tsx"],"names":[],"mappings":"AAGA,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAGlD,yDAAyD;AACzD,eAAO,MAAM,aAAa,oDAcxB,CAAA;AAIF,eAAe,aAAa,CAAA"}
+{"version":3,"file":"headerDivider.d.ts","sourceRoot":"","sources":["../../../src/header/headerDivider.tsx"],"names":[],"mappings":"AAGA,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAIlD,yDAAyD;AACzD,eAAO,MAAM,aAAa,oDAexB,CAAA;AAIF,eAAe,aAAa,CAAA"}

package/dist/esm/header/headerDivider.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import Divider from '../divider';
+import { cs } from '../utils';
 import { useHeaderContext } from './context';
 /** Vertical line dividing some of the Header content. */
 export const HeaderDivider = vui((props, ref) => {
+    const { className, ...rest } = props;
     const styles = useStyleConfig('Header', useHeaderContext());
-    return (React.createElement(Divider, { borderColor: "prussian.80", className: "vui-headerDivider", h: 40, isVertical: true, ref: ref, ...styles.divider, ...props }));
+    return (React.createElement(Divider, { borderColor: "prussian.80", className: cs('vui-headerDivider', className), h: 40, isVertical: true, ref: ref, ...styles.divider, ...rest }));
 });
 HeaderDivider.displayName = 'HeaderDivider';
 export default HeaderDivider;

package/dist/esm/header/headerLogo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerLogo.d.ts","sourceRoot":"","sources":["../../../src/header/headerLogo.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAIhD,yFAAyF;AACzF,eAAO,MAAM,UAAU,wDAuBrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"headerLogo.d.ts","sourceRoot":"","sources":["../../../src/header/headerLogo.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAIhD,yFAAyF;AACzF,eAAO,MAAM,UAAU,wDAuBrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/esm/header/headerLogo.js

@@ -2,16 +2,17 @@ import React from 'react';
 import Box from '../box';
 import { cdnUrl, useStyleConfig, vui } from '../core';
 import Svg from '../svg';
+import { cs } from '../utils';
 import { useHeaderContext } from './context';
 const defaultLogo = `${cdnUrl}/common/icons/logos/veracity-logo.svg`;
 /** Logo displayed in the left corner of the Header. By default Veracity logo is used. */
 export const HeaderLogo = vui((props, ref) => {
-    const { children, src = defaultLogo, url, ...rest } = props;
+    const { children, className, src = defaultLogo, url, ...rest } = props;
     const { links } = useHeaderContext() ?? {};
     const styles = useStyleConfig('Header', useHeaderContext()).logo;
     const logoUrl = url ?? links.home;
     const linkProps = logoUrl ? { as: 'a', href: logoUrl, outline: 'none', focusRing: 2 } : {};
-    return (React.createElement(Box, { centerV: true, className: "vui-headerLogo", flexShrink: 0, h: 40, mr: 2, ref: ref, ...styles.container, ...linkProps, ...rest }, children ?? React.createElement(Svg, { "aria-label": "logo", h: "100%", src: src, ...styles.svg })));
+    return (React.createElement(Box, { centerV: true, className: cs('vui-headerLogo', className), flexShrink: 0, h: 40, mr: 2, ref: ref, ...styles.container, ...linkProps, ...rest }, children ?? React.createElement(Svg, { "aria-label": "logo", h: "100%", src: src, ...styles.svg })));
 });
 HeaderLogo.displayName = 'HeaderLogo';
 export default HeaderLogo;

package/dist/esm/header/headerMainLinks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerMainLinks.d.ts","sourceRoot":"","sources":["../../../src/header/headerMainLinks.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAGrD,4BAA4B;AAC5B,eAAO,MAAM,eAAe,4DAY1B,CAAA;AAIF,eAAe,eAAe,CAAA"}
+{"version":3,"file":"headerMainLinks.d.ts","sourceRoot":"","sources":["../../../src/header/headerMainLinks.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAGrD,4BAA4B;AAC5B,eAAO,MAAM,eAAe,4DAmB1B,CAAA;AAIF,eAAe,eAAe,CAAA"}

package/dist/esm/header/headerMainLinks.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import List from '../list';
+import { cs } from '../utils';
 import { useHeaderContext } from './context';
 import HeaderLinkItem from './headerLinkItem';
 /** List of Header Links. */
 export const HeaderMainLinks = vui((props, ref) => {
-    const { children, links, ...rest } = props;
+    const { children, className, links, ...rest } = props;
     const { isMobile } = useHeaderContext() ?? {};
     const styles = useStyleConfig('Header', useHeaderContext());
     const screenStyles = isMobile ? { borderBottom: '1px solid grey.40', flexDirection: 'column', mb: 1 } : { h: '100%' };
-    return (React.createElement(List, { className: "vui-headerMainLinks", display: "flex", ref: ref, ...styles.mainLinks, ...screenStyles, ...rest }, children ?? links?.map((link, index) => React.createElement(HeaderLinkItem, { key: index, ...link }))));
+    return (React.createElement(List, { className: cs('vui-headerMainLinks', className), display: "flex", ref: ref, ...styles.mainLinks, ...screenStyles, ...rest }, children ?? links?.map((link, index) => React.createElement(HeaderLinkItem, { key: index, ...link }))));
 });
 HeaderMainLinks.displayName = 'HeaderMainLinks';
 export default HeaderMainLinks;

package/dist/esm/header/headerMobileContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerMobileContent.d.ts","sourceRoot":"","sources":["../../../src/header/headerMobileContent.tsx"],"names":[],"mappings":"AAEA,OAAY,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAKtC,mEAAmE;AACnE,eAAO,MAAM,mBAAmB,iDAsB9B,CAAA;AAIF,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"headerMobileContent.d.ts","sourceRoot":"","sources":["../../../src/header/headerMobileContent.tsx"],"names":[],"mappings":"AAEA,OAAY,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAKtC,mEAAmE;AACnE,eAAO,MAAM,mBAAmB,iDAuB9B,CAAA;AAIF,eAAe,mBAAmB,CAAA"}

package/dist/esm/header/headerMobileContent.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import Box from '../box';
 import { useStyleConfig, vui } from '../core';
-import { mergeRefs } from '../utils';
+import { cs, mergeRefs } from '../utils';
 import { useHeaderContext } from './context';
 /** Displays some of the Header content when on a mobile screen. */
 export const HeaderMobileContent = vui((props, ref) => {
+    const { className, ...rest } = props;
     const { isMobileOpen, mobileContentRef } = useHeaderContext() ?? {};
     const styles = useStyleConfig('Header', useHeaderContext());
-    return isMobileOpen ? (React.createElement(Box, { bg: "white", className: "vui-headerMobileContent", column: true, h: `calc(100vh - 100% - 1px)`, left: 0, overflowX: "hidden", overflowY: "auto", position: "absolute", ref: mergeRefs(ref, mobileContentRef), right: 0, top: "calc(100% + 1px)", zIndex: "100", ...styles.mobileContent, ...props })) : null;
+    return isMobileOpen ? (React.createElement(Box, { bg: "white", className: cs('vui-headerMobileContent', className), column: true, h: `calc(100vh - 100% - 1px)`, left: 0, overflowX: "hidden", overflowY: "auto", position: "absolute", ref: mergeRefs(ref, mobileContentRef), right: 0, top: "calc(100% + 1px)", zIndex: "100", ...styles.mobileContent, ...rest })) : null;
 });
 HeaderMobileContent.displayName = 'HeaderMobileContent';
 export default HeaderMobileContent;

package/dist/esm/header/headerMobileToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerMobileToggle.d.ts","sourceRoot":"","sources":["../../../src/header/headerMobileToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,WAAW,CAAA;AAMnD,yDAAyD;AACzD,eAAO,MAAM,kBAAkB,uDAmB7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"headerMobileToggle.d.ts","sourceRoot":"","sources":["../../../src/header/headerMobileToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,WAAW,CAAA;AAMnD,yDAAyD;AACzD,eAAO,MAAM,kBAAkB,uDAoB7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}

package/dist/esm/header/headerMobileToggle.js

@@ -2,14 +2,15 @@ import React from 'react';
 import { IconButton } from '../button';
 import { useStyleConfig, vui } from '../core';
 import Icon from '../icon';
-import { mergeRefs } from '../utils';
+import { cs, mergeRefs } from '../utils';
 import { useHeaderContext } from './context';
 /** Button that toggles display of the mobile content. */
 export const HeaderMobileToggle = vui((props, ref) => {
+    const { className, ...rest } = props;
     const { isMobileOpen, mobileToggleRef, setIsMobileOpen } = useHeaderContext() ?? {};
     const styles = useStyleConfig('Header', useHeaderContext());
     const iconName = isMobileOpen ? 'falTimes' : 'falBars';
-    return (React.createElement(IconButton, { className: "vui-headerMobileToggle", colorScheme: "prussian", icon: React.createElement(Icon, { name: iconName, scale: 2 }), ml: 2, onClick: () => setIsMobileOpen(s => !s), p: "3px", ref: mergeRefs(ref, mobileToggleRef), ...styles.mobileToggle, ...props }));
+    return (React.createElement(IconButton, { className: cs('vui-headerMobileToggle', className), colorScheme: "prussian", icon: React.createElement(Icon, { name: iconName, scale: 2 }), ml: 2, onClick: () => setIsMobileOpen(s => !s), p: "3px", ref: mergeRefs(ref, mobileToggleRef), ...styles.mobileToggle, ...rest }));
 });
 HeaderMobileToggle.displayName = 'HeaderMobileToggle';
 export default HeaderMobileToggle;

package/dist/esm/header/headerNotifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerNotifications.d.ts","sourceRoot":"","sources":["../../../src/header/headerNotifications.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAkBzD,+FAA+F;AAC/F,eAAO,MAAM,mBAAmB,+DA4B9B,CAAA;AAIF,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"headerNotifications.d.ts","sourceRoot":"","sources":["../../../src/header/headerNotifications.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAkBzD,+FAA+F;AAC/F,eAAO,MAAM,mBAAmB,+DA6B9B,CAAA;AAIF,eAAe,mBAAmB,CAAA"}

package/dist/esm/header/headerNotifications.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Button from '../button';
 import { styled, useStyleConfig, vui } from '../core';
+import { cs } from '../utils';
 import { useHeaderContext } from './context';
 const Badge = styled.spanBox `
 	align-items: center;
@@ -19,10 +20,10 @@ const Badge = styled.spanBox `
 `;
 /** Icon link to Veracity notifications engine with an optional number of new notifications. */
 export const HeaderNotifications = vui((props, ref) => {
-    const { children, count = 0, url, ...rest } = props;
+    const { children, className, count = 0, url, ...rest } = props;
     const { links } = useHeaderContext() ?? {};
     const styles = useStyleConfig('Header', useHeaderContext()).notifications;
-    return (React.createElement(Button, { as: "a", href: url ?? links.notifications, minW: 0, ml: 1, position: "relative", px: "7px", ref: ref, title: "Notifications", variant: "text", ...styles.container, ...rest }, children ?? (React.createElement(React.Fragment, null,
+    return (React.createElement(Button, { as: "a", className: cs('vui-headerNotifications', className), href: url ?? links.notifications, minW: 0, ml: 1, position: "relative", px: "7px", ref: ref, title: "Notifications", variant: "text", ...styles.container, ...rest }, children ?? (React.createElement(React.Fragment, null,
         React.createElement(Button.Icon, { name: "falBell" }),
         count > 0 && React.createElement(Badge, null, count < 100 ? count : '99+')))));
 });

package/dist/esm/header/headerServices.js

@@ -7,7 +7,7 @@ import HeaderServicesMessage from './headerServicesMessage';
 /** Supporting internal component to avoid code duplication. */
 function ListContent({ links = [] }) {
     const styles = useStyleConfig('Header', useHeaderContext()).services;
-    return (React.createElement(React.Fragment, null, links.length > 0 ? (links.map(({ text, url }, index) => (React.createElement(Menu.Item, { isTruncated: true, key: index, linkProps: { href: url }, text: text, ...styles.item })))) : (React.createElement(HeaderServicesMessage, null))));
+    return (React.createElement(React.Fragment, null, links.length > 0 ? (links.map(({ text, url }, index) => (React.createElement(Menu.Item, { isTruncated: true, key: index, linkProps: { href: url }, text: text, title: text, ...styles.item })))) : (React.createElement(HeaderServicesMessage, null))));
 }
 /** Displays a list of services available to the user. */
 export function HeaderServices(props) {
@@ -15,7 +15,7 @@ export function HeaderServices(props) {
     const styles = useStyleConfig('Header', useHeaderContext()).services;
     return (React.createElement(React.Fragment, null,
         React.createElement(RenderOnDesktop, null,
-            React.createElement(Menu, { offset: [0, 8], placement: "bottom-end", size: "lg", ...rest },
+            React.createElement(Menu, { isLazy: false, offset: [0, 8], placement: "bottom-end", size: "lg", ...rest },
                 React.createElement(Menu.Button, { colorScheme: "prussian", icon: "falTh", ml: 1, title: "My services", ...styles.button, ...buttonProps }),
                 React.createElement(Menu.List, { heading: "My Services", maxH: 400, w: 320, ...styles.list },
                     React.createElement(ListContent, { links: links })))),

package/dist/esm/header/headerServicesMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerServicesMessage.d.ts","sourceRoot":"","sources":["../../../src/header/headerServicesMessage.tsx"],"names":[],"mappings":"AAIA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAGhC,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,6CAmBhC,CAAA;AAIF,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"headerServicesMessage.d.ts","sourceRoot":"","sources":["../../../src/header/headerServicesMessage.tsx"],"names":[],"mappings":"AAIA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,6CA0BhC,CAAA;AAIF,eAAe,qBAAqB,CAAA"}

package/dist/esm/header/headerServicesMessage.js

@@ -2,13 +2,14 @@ import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import Link from '../link';
 import P from '../p';
+import { cs } from '../utils';
 import { useHeaderContext } from './context';
 /** Displays a message with link to Marketplace if user has no services available. */
 export const HeaderServicesMessage = vui((props, ref) => {
-    const { children, ...rest } = props;
+    const { children, className, ...rest } = props;
     const { links } = useHeaderContext() ?? {};
     const styles = useStyleConfig('Header', useHeaderContext());
-    return (React.createElement(P, { mb: 2, ml: 2, ref: ref, ...styles.servicesMessage, ...rest }, children ?? (React.createElement(React.Fragment, null,
+    return (React.createElement(P, { className: cs('vui-headerServicesMessage', className), mb: 2, ml: 2, ref: ref, ...styles.servicesMessage, ...rest }, children ?? (React.createElement(React.Fragment, null,
         "No services available. ",
         React.createElement("br", null),
         "Explore more on the",

package/dist/esm/header/headerSignIn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerSignIn.d.ts","sourceRoot":"","sources":["../../../src/header/headerSignIn.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD,qDAAqD;AACrD,eAAO,MAAM,YAAY,6DAUvB,CAAA;AAIF,eAAe,YAAY,CAAA"}
+{"version":3,"file":"headerSignIn.d.ts","sourceRoot":"","sources":["../../../src/header/headerSignIn.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD,qDAAqD;AACrD,eAAO,MAAM,YAAY,6DAiBvB,CAAA;AAIF,eAAe,YAAY,CAAA"}

package/dist/esm/header/headerSignIn.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import Button from '../button';
 import { useStyleConfig, vui } from '../core';
+import { cs } from '../utils';
 import { useHeaderContext } from './context';
 /** Sign in button leading to Veracity login page. */
 export const HeaderSignIn = vui((props, ref) => {
-    const { children, url, ...rest } = props;
+    const { children, className, url, ...rest } = props;
     const { links } = useHeaderContext() ?? {};
     const styles = useStyleConfig('Header', useHeaderContext());
-    return (React.createElement(Button, { as: "a", className: "vui-headerSignIn", href: url ?? links.signIn, ref: ref, ...styles.signIn, ...rest }, children ?? 'Sign in'));
+    return (React.createElement(Button, { as: "a", className: cs('vui-headerSignIn', className), href: url ?? links.signIn, ref: ref, ...styles.signIn, ...rest }, children ?? 'Sign in'));
 });
 HeaderSignIn.displayName = 'HeaderSignIn';
 export default HeaderSignIn;

package/dist/esm/input/context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { InputProps } from './input.types';
-declare const InputProvider: import("react").Provider<Partial<InputProps>>, useInput: () => Partial<InputProps>;
-export { InputProvider, useInput };
+declare const InputProvider: import("react").Provider<Partial<InputProps>>, useInputContext: () => Partial<InputProps>;
+export { InputProvider, useInputContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/esm/input/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/input/context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,QAAA,MAAO,aAAa,iDAAE,QAAQ,2BAA4D,CAAA;AAE1F,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/input/context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,QAAA,MAAO,aAAa,iDAAE,eAAe,2BAA4D,CAAA;AAEjG,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,CAAA"}

package/dist/esm/input/context.js

@@ -1,3 +1,3 @@
 import { createContext } from '../utils';
-const [InputProvider, useInput] = createContext({ isOptional: true });
-export { InputProvider, useInput };
+const [InputProvider, useInputContext] = createContext({ isOptional: true });
+export { InputProvider, useInputContext };

package/dist/esm/input/input.js

@@ -77,7 +77,7 @@ export const Input = vui((props, ref) => {
             isString(iconRight) ? React.createElement(InputIcon, { mr: 1, name: iconRight }) : iconRight,
             itemRight,
             state && React.createElement(InputIcon, { mr: 1, ...states[state]?.iconProps }),
-            showCount && (React.createElement(T, { color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
+            showCount && (React.createElement(T, { className: "vui-inputCount", color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
                 count,
                 " / ",
                 maxLength)))));

package/dist/esm/input/inputIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputIcon.d.ts","sourceRoot":"","sources":["../../../src/input/inputIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGzC,yCAAyC;AACzC,eAAO,MAAM,SAAS,kDAQpB,CAAA;AAIF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"inputIcon.d.ts","sourceRoot":"","sources":["../../../src/input/inputIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIzC,yCAAyC;AACzC,eAAO,MAAM,SAAS,kDASpB,CAAA;AAIF,eAAe,SAAS,CAAA"}

package/dist/esm/input/inputIcon.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import { useStyleConfig, vui } from '../core';
 import Icon from '../icon';
-import { useInput } from './context';
+import { cs } from '../utils';
+import { useInputContext } from './context';
 /** Displays an icon within the Input. */
 export const InputIcon = vui((props, ref) => {
-    const inputProps = useInput();
+    const { className, ...rest } = props;
+    const inputProps = useInputContext();
     const mergedProps = { ...inputProps, ...props };
     const styles = useStyleConfig('Input', mergedProps);
     const color = !mergedProps.disabled ? 'blue.80' : 'grey.50';
-    return React.createElement(Icon, { className: "vui-inputIcon", color: color, ref: ref, ...styles.icon, ...props });
+    return React.createElement(Icon, { className: cs('vui-inputIcon', className), color: color, ref: ref, ...styles.icon, ...rest });
 });
 InputIcon.displayName = 'InputIcon';
 export default InputIcon;

package/dist/esm/input/inputInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputInput.d.ts","sourceRoot":"","sources":["../../../src/input/inputInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,cAAc,2GAoB1B,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,UAAU,0DAUrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"inputInput.d.ts","sourceRoot":"","sources":["../../../src/input/inputInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,cAAc,2GAoB1B,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,UAAU,0DAmBrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/esm/input/inputInput.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { styled, useStyleConfig, vui } from '../core';
-import { filterUndefined } from '../utils';
-import { useInput } from './context';
+import { cs, filterUndefined } from '../utils';
+import { useInputContext } from './context';
 export const InputInputBase = styled.input `
 	align-self: stretch;
 	background-color: transparent;
@@ -25,13 +25,14 @@ export const InputInputBase = styled.input `
 `;
 /** Displays an input element within the Input component. */
 export const InputInput = vui((props, ref) => {
-    const inputProps = useInput();
+    const { className, ...rest } = props;
+    const inputProps = useInputContext();
     const mergedProps = { ...inputProps, ...props };
     const styles = useStyleConfig('Input', mergedProps);
     const aliasedProps = filterUndefined({
         'aria-disabled': mergedProps.disabled
     });
-    return React.createElement(InputInputBase, { className: "vui-inputInput", ref: ref, ...styles.input, ...aliasedProps, ...props });
+    return (React.createElement(InputInputBase, { className: cs('vui-inputInput', className), ref: ref, ...styles.input, ...aliasedProps, ...rest }));
 });
 InputInput.displayName = 'InputInput';
 export default InputInput;

package/dist/esm/link/context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { Dict } from '../utils';
-declare const LinkProvider: import("react").Provider<Dict<any>>, useLink: () => Dict<any>;
-export { LinkProvider, useLink };
+declare const LinkProvider: import("react").Provider<Dict<any>>, useLinkContext: () => Dict<any>;
+export { LinkProvider, useLinkContext };
 //# sourceMappingURL=context.d.ts.map