@veracity/vui 2.0.0 → 2.0.2

package/dist/cjs/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;AAIlD,kCAAkC;AAClC,eAAO,MAAM,aAAa,oDAOxB,CAAA;AAEF,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,oDAexB,CAAA;AAEF,eAAe,aAAa,CAAA"}

package/dist/cjs/footer/footerHeading.js

@@ -24,6 +24,6 @@ const context_1 = require("./context");
 exports.FooterHeading = (0, core_1.vui)((props, ref) => {
     const { className } = props, rest = __rest(props, ["className"]);
     const styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
-    return (react_1.default.createElement(heading_1.default, Object.assign({ className: (0, utils_1.cs)('vui-footerHeading', className), mb: 1, ref: ref, size: "h5" }, styles.heading, rest)));
+    return (react_1.default.createElement(heading_1.default, Object.assign({ className: (0, utils_1.cs)('vui-footerHeading', className), color: "white", mb: 1, ref: ref, size: "h5" }, styles.heading, rest)));
 });
 exports.default = exports.FooterHeading;

package/dist/cjs/footer/footerLink.js

@@ -24,6 +24,6 @@ const context_1 = require("./context");
 exports.FooterLink = (0, core_1.vui)((props, ref) => {
     const { className } = props, rest = __rest(props, ["className"]);
     const styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
-    return (react_1.default.createElement(link_1.default, Object.assign({ className: (0, utils_1.cs)('vui-footerLink', className), colorScheme: "white", py: 0.5, ref: ref, size: "sm" }, styles.link, rest)));
+    return (react_1.default.createElement(link_1.default, Object.assign({ className: (0, utils_1.cs)('vui-footerLink', className), py: 0.5, ref: ref, size: "sm", variant: "white" }, styles.link, rest)));
 });
 exports.default = exports.FooterLink;

package/dist/cjs/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAiBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UA+HV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UA+HV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}

package/dist/cjs/input/input.js

@@ -61,8 +61,7 @@ exports.InputBase = core_1.styled.divBox `
   width: 100%;
 
   &[aria-disabled='true'] {
-    background-color: disabled.bg;
-    color: disabled.color;
+    opacity: 0.5;
     cursor: not-allowed;
   }
 `;
@@ -75,7 +74,7 @@ exports.Input = (0, core_1.vui)((props, ref) => {
     var _a, _b, _c, _d;
     const { autoComplete, autoFocus, children, className, colorScheme, defaultValue, disabled, errorText, iconLeft, iconRight, id, input, inputProps, inputRef, isInvalid, itemLeft, itemRight, helpText, max, maxLength, min, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size, state = '', stateMapping, step, type = 'text', value, variant } = props, rest = __rest(props, ["autoComplete", "autoFocus", "children", "className", "colorScheme", "defaultValue", "disabled", "errorText", "iconLeft", "iconRight", "id", "input", "inputProps", "inputRef", "isInvalid", "itemLeft", "itemRight", "helpText", "max", "maxLength", "min", "name", "onBlur", "onChange", "onFocus", "pattern", "placeholder", "readOnly", "required", "showCount", "size", "state", "stateMapping", "step", "type", "value", "variant"]);
     const [count, setCount] = (0, react_1.useState)((0, helpers_1.getInitialCount)(props));
-    const [valueInternal, setValueInternal] = (0, react_1.useState)(defaultValue);
+    const [valueInternal, setValueInternal] = (0, react_1.useState)(defaultValue || '');
     const states = Object.assign(Object.assign({}, consts_1.inputStateMapping), stateMapping);
     const computedColorScheme = (0, utils_1.filterUndefined)({
         colorScheme: (_a = colorScheme !== null && colorScheme !== void 0 ? colorScheme : (isInvalid ? consts_1.redColor : undefined)) !== null && _a !== void 0 ? _a : (_b = states[state]) === null || _b === void 0 ? void 0 : _b.colorScheme
@@ -95,7 +94,7 @@ exports.Input = (0, core_1.vui)((props, ref) => {
     });
     (0, react_1.useEffect)(() => {
         var _a;
-        setValueInternal(value);
+        setValueInternal(value !== null && value !== void 0 ? value : '');
         setCount(((_a = `${value}`) === null || _a === void 0 ? void 0 : _a.length) ? `${value}`.length : 0);
     }, [value]);
     return (react_1.default.createElement(context_1.InputProvider, { value: context },

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;AAIlD,kCAAkC;AAClC,eAAO,MAAM,aAAa,oDAOxB,CAAA;AAEF,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,oDAexB,CAAA;AAEF,eAAe,aAAa,CAAA"}

package/dist/esm/footer/footerHeading.js

@@ -7,6 +7,6 @@ import { useFooterContext } from './context';
 export const FooterHeading = vui((props, ref) => {
     const { className, ...rest } = props;
     const styles = useStyleConfig('Footer', useFooterContext());
-    return (React.createElement(Heading, { className: cs('vui-footerHeading', className), mb: 1, ref: ref, size: "h5", ...styles.heading, ...rest }));
+    return (React.createElement(Heading, { className: cs('vui-footerHeading', className), color: "white", mb: 1, ref: ref, size: "h5", ...styles.heading, ...rest }));
 });
 export default FooterHeading;

package/dist/esm/footer/footerLink.js

@@ -7,6 +7,6 @@ import { useFooterContext } from './context';
 export const FooterLink = vui((props, ref) => {
     const { className, ...rest } = props;
     const styles = useStyleConfig('Footer', useFooterContext());
-    return (React.createElement(Link, { className: cs('vui-footerLink', className), colorScheme: "white", py: 0.5, ref: ref, size: "sm", ...styles.link, ...rest }));
+    return (React.createElement(Link, { className: cs('vui-footerLink', className), py: 0.5, ref: ref, size: "sm", variant: "white", ...styles.link, ...rest }));
 });
 export default FooterLink;

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAiBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UA+HV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UA+HV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}

package/dist/esm/input/input.js

@@ -21,8 +21,7 @@ export const InputBase = styled.divBox `
   width: 100%;
 
   &[aria-disabled='true'] {
-    background-color: disabled.bg;
-    color: disabled.color;
+    opacity: 0.5;
     cursor: not-allowed;
   }
 `;
@@ -34,7 +33,7 @@ export const InputBase = styled.divBox `
 export const Input = vui((props, ref) => {
     const { autoComplete, autoFocus, children, className, colorScheme, defaultValue, disabled, errorText, iconLeft, iconRight, id, input, inputProps, inputRef, isInvalid, itemLeft, itemRight, helpText, max, maxLength, min, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size, state = '', stateMapping, step, type = 'text', value, variant, ...rest } = props;
     const [count, setCount] = useState(getInitialCount(props));
-    const [valueInternal, setValueInternal] = useState(defaultValue);
+    const [valueInternal, setValueInternal] = useState(defaultValue || '');
     const states = { ...inputStateMapping, ...stateMapping };
     const computedColorScheme = filterUndefined({
         colorScheme: colorScheme ?? (isInvalid ? redColor : undefined) ?? states[state]?.colorScheme
@@ -53,7 +52,7 @@ export const Input = vui((props, ref) => {
         focusWithinRingColor: readOnly ? 'transparent' : undefined
     });
     useEffect(() => {
-        setValueInternal(value);
+        setValueInternal(value ?? '');
         setCount(`${value}`?.length ? `${value}`.length : 0);
     }, [value]);
     return (React.createElement(InputProvider, { value: context },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "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/footer/footerHeading.tsx

@@ -11,7 +11,15 @@ export const FooterHeading = vui<'h5', HeadingProps>((props, ref) => {
   const styles = useStyleConfig('Footer', useFooterContext())
 
   return (
-    <Heading className={cs('vui-footerHeading', className)} mb={1} ref={ref} size="h5" {...styles.heading} {...rest} />
+    <Heading
+      className={cs('vui-footerHeading', className)}
+      color="white"
+      mb={1}
+      ref={ref}
+      size="h5"
+      {...styles.heading}
+      {...rest}
+    />
   )
 })
 

package/src/footer/footerLink.tsx

@@ -13,10 +13,10 @@ export const FooterLink = vui<'a', LinkProps>((props, ref) => {
   return (
     <Link
       className={cs('vui-footerLink', className)}
-      colorScheme="white"
       py={0.5}
       ref={ref}
       size="sm"
+      variant="white"
       {...styles.link}
       {...rest}
     />

package/src/input/input.tsx

@@ -24,8 +24,7 @@ export const InputBase = styled.divBox`
   width: 100%;
 
   &[aria-disabled='true'] {
-    background-color: disabled.bg;
-    color: disabled.color;
+    opacity: 0.5;
     cursor: not-allowed;
   }
 `
@@ -78,7 +77,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
   } = props
 
   const [count, setCount] = useState(getInitialCount(props))
-  const [valueInternal, setValueInternal] = useState(defaultValue)
+  const [valueInternal, setValueInternal] = useState(defaultValue || '')
   const states = { ...inputStateMapping, ...stateMapping }
   const computedColorScheme = filterUndefined({
     colorScheme: colorScheme ?? (isInvalid ? redColor : undefined) ?? states[state]?.colorScheme
@@ -105,7 +104,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
   })
 
   useEffect(() => {
-    setValueInternal(value)
+    setValueInternal(value ?? '')
     setCount(`${value}`?.length ? `${value}`.length : 0)
   }, [value])