@veracity/vui 2.17.0-beta.2 → 2.17.1-beta.0

package/dist/cjs/calendar/calendar.d.ts

@@ -1,5 +1,5 @@
 import { CalendarProps } from './calendar.types';
-/** [Beta] Displays calendar. */
+/** Displays calendar. */
 export declare const Calendar: import("../core").VuiComponent<"div", CalendarProps>;
 export default Calendar;
 //# sourceMappingURL=calendar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAsD,MAAM,kBAAkB,CAAA;AAepG,gCAAgC;AAChC,eAAO,MAAM,QAAQ,sDAuHnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAsD,MAAM,kBAAkB,CAAA;AAepG,yBAAyB;AACzB,eAAO,MAAM,QAAQ,sDAuHnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}

package/dist/cjs/calendar/calendar.js

@@ -23,7 +23,7 @@ const utils_1 = require("../utils");
 const components_1 = require("./components");
 const hooks_1 = require("./hooks");
 const utils_2 = require("./utils");
-/** [Beta] Displays calendar. */
+/** Displays calendar. */
 exports.Calendar = (0, core_1.vui)((props, ref) => {
     const _a = (0, core_1.omitThemingProps)(props), { boundaries, className, fixedNumberOfWeeks = false, disabled, isStartDate, mode, onSelectDates, selectedDates } = _a, rest = __rest(_a, ["boundaries", "className", "fixedNumberOfWeeks", "disabled", "isStartDate", "mode", "onSelectDates", "selectedDates"]);
     const styles = (0, core_1.useStyleConfig)('Calendar', props);

package/dist/cjs/datePicker/datePicker.d.ts

@@ -1,5 +1,5 @@
 import { DatePickerProps } from './datePicker.types';
-/** [Beta] Select or input a date. */
+/** Select or input a date. */
 export declare const DatePicker: import("../core").VuiComponent<"span", DatePickerProps>;
 export default DatePicker;
 //# sourceMappingURL=datePicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"datePicker.d.ts","sourceRoot":"","sources":["../../../src/datePicker/datePicker.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAMpD,qCAAqC;AACrC,eAAO,MAAM,UAAU,yDAsJrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"datePicker.d.ts","sourceRoot":"","sources":["../../../src/datePicker/datePicker.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAMpD,8BAA8B;AAC9B,eAAO,MAAM,UAAU,yDAsJrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/cjs/datePicker/datePicker.js

@@ -50,7 +50,7 @@ const dateInput_1 = require("./dateInput");
 const DatePickerPanel = (0, core_1.styled)(pickerPanel_1.PickerPanel) `
   width: 320px;
 `;
-/** [Beta] Select or input a date. */
+/** Select or input a date. */
 exports.DatePicker = (0, core_1.vui)((props, ref) => {
     const _a = (0, core_1.omitThemingProps)(props), { autoOpened, boundaries, popupPosition = 'left', selectedDate: selectedDateProps, showClearButton, slotBottom, slotTop, onSelected, children, className } = _a, rest = __rest(_a, ["autoOpened", "boundaries", "popupPosition", "selectedDate", "showClearButton", "slotBottom", "slotTop", "onSelected", "children", "className"]);
     const styles = (0, core_1.useStyleConfig)('DatePicker', props);

package/dist/cjs/progress/progress.d.ts

@@ -1,6 +1,6 @@
 import { ProgressProps } from './progress.types';
 export declare const ProgressBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
-/** [Beta] Indicates a process progress. */
+/** Indicates a process progress. */
 export declare const Progress: import("../core").VuiComponent<"div", ProgressProps>;
 export default Progress;
 //# sourceMappingURL=progress.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/progress/progress.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAEhD,eAAO,MAAM,YAAY,+HAGxB,CAAA;AAKD,2CAA2C;AAC3C,eAAO,MAAM,QAAQ,sDAuCnB,CAAA;AAGF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/progress/progress.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAEhD,eAAO,MAAM,YAAY,+HAGxB,CAAA;AAKD,oCAAoC;AACpC,eAAO,MAAM,QAAQ,sDAuCnB,CAAA;AAGF,eAAe,QAAQ,CAAA"}

package/dist/cjs/progress/progress.js

@@ -23,7 +23,7 @@ exports.ProgressBase = core_1.styled.divBox `
 `;
 const minPercentageDisplay = 3;
 const maxValue = 100;
-/** [Beta] Indicates a process progress. */
+/** Indicates a process progress. */
 exports.Progress = (0, core_1.vui)((props, ref) => {
     const { className, value = 0, showPercentage } = props, rest = __rest(props, ["className", "value", "showPercentage"]);
     const [width, setWidth] = (0, react_1.useState)(0);

package/dist/cjs/progressCircular/progressCircular.d.ts

@@ -1,6 +1,6 @@
 import { ProgressCircularProps } from './progressCircular.types';
 export declare const ProgressCircularBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
-/** [Beta] Indicates a process progress. */
+/** Indicates a process progress. */
 export declare const ProgressCircular: import("../core").VuiComponent<"div", ProgressCircularProps>;
 export default ProgressCircular;
 //# sourceMappingURL=progressCircular.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"progressCircular.d.ts","sourceRoot":"","sources":["../../../src/progressCircular/progressCircular.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,eAAO,MAAM,oBAAoB,+HAIhC,CAAA;AAWD,2CAA2C;AAC3C,eAAO,MAAM,gBAAgB,8DA8D3B,CAAA;AAGF,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"progressCircular.d.ts","sourceRoot":"","sources":["../../../src/progressCircular/progressCircular.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,eAAO,MAAM,oBAAoB,+HAIhC,CAAA;AAWD,oCAAoC;AACpC,eAAO,MAAM,gBAAgB,8DA8D3B,CAAA;AAGF,eAAe,gBAAgB,CAAA"}

package/dist/cjs/progressCircular/progressCircular.js

@@ -32,7 +32,7 @@ const ProgressCircle = (0, core_1.styled)(MainCircle) `
   transform-origin: 50% 50%;
   transition: stroke-dashoffset 0.5s ease-out;
 `;
-/** [Beta] Indicates a process progress. */
+/** Indicates a process progress. */
 exports.ProgressCircular = (0, core_1.vui)((props, ref) => {
     const { children, className, label, value = 0, showPercentage } = props, rest = __rest(props, ["children", "className", "label", "value", "showPercentage"]);
     const styles = (0, core_1.useStyleConfig)('ProgressCircular', props);

package/dist/cjs/stepperHorizontal/stepperHorizontal.d.ts

@@ -1,7 +1,7 @@
 import StepperHorizontalBase from './stepperHorizontalBase';
 import { StepperHorizontalProps } from './stepperHorizontalTypes';
 /**
- * Implements Horizontal stepper **
+ * [Beta] Implements Horizontal stepper **
  */
 export declare const StepperHorizontal: import("../core").VuiComponent<"div", StepperHorizontalProps>;
 export default StepperHorizontalBase;

package/dist/cjs/stepperHorizontal/stepperHorizontal.js

@@ -22,7 +22,7 @@ const utils_1 = require("../utils");
 const context_1 = require("./context");
 const stepperHorizontalBase_1 = __importDefault(require("./stepperHorizontalBase"));
 /**
- * Implements Horizontal stepper **
+ * [Beta] Implements Horizontal stepper **
  */
 exports.StepperHorizontal = (0, core_1.vui)((props, ref) => {
     const { children, className, size } = props, rest = __rest(props, ["children", "className", "size"]);

package/dist/cjs/toast/useToast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/toast/useToast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKjC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAEvE,eAAO,MAAM,eAAe,SAAS,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AAWrC,eAAO,MAAM,QAAQ;0BAKU,YAAY,KAAG,IAAI;oBAFzB,MAAM;qBAqCL,SAAS,aAAY,aAAa;wBAE/B,SAAS,aAAY,aAAa;wBAElC,SAAS,aAAY,aAAa;sBAEpC,SAAS,aAAY,aAAa;wBAEhC,SAAS,aAAY,aAAa;CAI9D,CAAA"}
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/toast/useToast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAe,MAAM,OAAO,CAAA;AAK9C,OAAO,EAAE,aAAa,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAEvE,eAAO,MAAM,eAAe,SAAS,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AAWrC,eAAO,MAAM,QAAQ;0BAGsB,YAAY,KAAG,IAAI;;qBA+BnD,SAAS,aAAY,aAAa;wBAKlC,SAAS,aAAY,aAAa;wBAKlC,SAAS,aAAY,aAAa;sBAKlC,SAAS,aAAY,aAAa;wBAKlC,SAAS,aAAY,aAAa;CAa5C,CAAA"}

package/dist/cjs/toast/useToast.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useToast = exports.slowToastDuration = exports.fastToastDuration = exports.defaultDuration = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const core_1 = require("../core");
 const notification_1 = require("../notification");
 const utils_1 = require("../utils");
@@ -17,29 +18,31 @@ const setup = {
 const getDurationTime = (duration) => (duration === 'fast' ? exports.fastToastDuration : exports.slowToastDuration);
 const useToast = () => {
     const { addToast, removeToast } = (0, core_1.useVuiContext)();
-    const hideToast = (id) => removeToast(id);
-    const showToast = (options) => {
+    const showToast = (0, react_1.useCallback)((options) => {
         const id = (options === null || options === void 0 ? void 0 : options.id) ? options.id : (0, utils_1.uid)('toast');
-        const { duration = setup.options.duration } = options || {};
-        const { status = setup.options.duration } = options || {};
-        const { action } = options || {};
-        const { icon } = options || {};
-        const { text } = options || {};
-        const { title } = options || {};
-        const onClose = () => hideToast(id);
+        const { duration = setup.options.duration, status = 'info', action, icon, text, title } = options || {};
         const toast = {
             id,
-            component: ((0, jsx_runtime_1.jsx)(notification_1.Notification, { action: action, animation: "fadeDown", icon: icon, mt: { md: 1, sm: '4px', xs: '4px' }, onClose: onClose, shadow: 3, status: status, text: text, title: title, verticalAlign: "center", w: 1 }))
+            component: ((0, jsx_runtime_1.jsx)(notification_1.Notification, { action: action, animation: "fadeDown", elevation: 3, icon: icon, mt: { md: 1, sm: '4px', xs: '4px' }, onClose: () => removeToast(id), status: status, text: text, title: title, verticalAlign: "center", w: 1 }))
         };
         addToast(toast);
-        if (duration && duration !== 'sticky')
-            window.setTimeout(() => hideToast(id), getDurationTime(duration));
+        if (duration && duration !== 'sticky') {
+            window.setTimeout(() => removeToast(id), getDurationTime(duration));
+        }
+    }, []);
+    const showInfo = (0, react_1.useCallback)((text, duration = exports.defaultDuration) => showToast({ text, status: 'info', duration }), [showToast]);
+    const showSuccess = (0, react_1.useCallback)((text, duration = exports.defaultDuration) => showToast({ text, status: 'success', duration }), [showToast]);
+    const showWarning = (0, react_1.useCallback)((text, duration = exports.defaultDuration) => showToast({ text, status: 'warning', duration }), [showToast]);
+    const showError = (0, react_1.useCallback)((text, duration = exports.defaultDuration) => showToast({ text, status: 'error', duration }), [showToast]);
+    const showLoading = (0, react_1.useCallback)((text, duration = exports.defaultDuration) => showToast({ text, status: 'loading', duration }), [showToast]);
+    return {
+        showToast,
+        hideToast: removeToast,
+        showInfo,
+        showSuccess,
+        showWarning,
+        showError,
+        showLoading
     };
-    const showInfo = (text, duration = exports.defaultDuration) => showToast({ text, status: 'info', duration });
-    const showSuccess = (text, duration = exports.defaultDuration) => showToast({ text, status: 'success', duration });
-    const showWarning = (text, duration = exports.defaultDuration) => showToast({ text, status: 'warning', duration });
-    const showError = (text, duration = exports.defaultDuration) => showToast({ text, status: 'error', duration });
-    const showLoading = (text, duration = exports.defaultDuration) => showToast({ text, status: 'loading', duration });
-    return { showToast, hideToast, showInfo, showSuccess, showWarning, showError, showLoading };
 };
 exports.useToast = useToast;

package/dist/cjs/tutorial/tutorial.d.ts

@@ -1,5 +1,5 @@
 import { TutorialProps } from './tutorial.types';
-/** [Beta] Popover Tutorial is used to display information about a new, or existing feature. */
+/** Popover Tutorial is used to display information about a new, or existing feature. */
 export declare function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title, id, placement, showSkipButton }: TutorialProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Tutorial {
     var displayName: string;

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

@@ -1 +1 @@
-{"version":3,"file":"tutorial.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAI5D,+FAA+F;AAC/F,wBAAgB,QAAQ,CAAC,EACvB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,EACL,KAAK,EACL,EAAE,EACF,SAAmB,EACnB,cAAc,EACf,EAAE,aAAa,2CAwCf;yBApDe,QAAQ"}
+{"version":3,"file":"tutorial.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAI5D,wFAAwF;AACxF,wBAAgB,QAAQ,CAAC,EACvB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,EACL,KAAK,EACL,EAAE,EACF,SAAmB,EACnB,cAAc,EACf,EAAE,aAAa,2CAwCf;yBApDe,QAAQ"}

package/dist/cjs/tutorial/tutorial.js

@@ -9,7 +9,7 @@ const react_1 = __importDefault(require("@tippyjs/react"));
 const utils_1 = require("../utils");
 const tutorialCard_1 = require("./tutorialCard");
 const useTutorial_1 = require("./useTutorial");
-/** [Beta] Popover Tutorial is used to display information about a new, or existing feature. */
+/** Popover Tutorial is used to display information about a new, or existing feature. */
 function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title, id, placement = 'right', showSkipButton }) {
     const { isVisible, setIsVisible, saveDisplayed } = (0, useTutorial_1.useTutorial)(id);
     const onClose = (e) => {

package/dist/esm/calendar/calendar.d.ts

@@ -1,5 +1,5 @@
 import { CalendarProps } from './calendar.types';
-/** [Beta] Displays calendar. */
+/** Displays calendar. */
 export declare const Calendar: import("../core").VuiComponent<"div", CalendarProps>;
 export default Calendar;
 //# sourceMappingURL=calendar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAsD,MAAM,kBAAkB,CAAA;AAepG,gCAAgC;AAChC,eAAO,MAAM,QAAQ,sDAuHnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAsD,MAAM,kBAAkB,CAAA;AAepG,yBAAyB;AACzB,eAAO,MAAM,QAAQ,sDAuHnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}

package/dist/esm/calendar/calendar.js

@@ -6,7 +6,7 @@ import { cs } from '../utils';
 import { CalendarHeader, DayPicker, MonthPicker, YearPicker } from './components';
 import { useCalendar, useDefaultViewMonth } from './hooks';
 import { isDay, isExact, isFrom, isMonth, isTo, isYear, processSelectMonth, processSelectYear, processViewDate } from './utils';
-/** [Beta] Displays calendar. */
+/** Displays calendar. */
 export const Calendar = vui((props, ref) => {
     const { boundaries, className, fixedNumberOfWeeks = false, disabled, isStartDate, mode, onSelectDates, selectedDates, ...rest } = omitThemingProps(props);
     const styles = useStyleConfig('Calendar', props);

package/dist/esm/datePicker/datePicker.d.ts

@@ -1,5 +1,5 @@
 import { DatePickerProps } from './datePicker.types';
-/** [Beta] Select or input a date. */
+/** Select or input a date. */
 export declare const DatePicker: import("../core").VuiComponent<"span", DatePickerProps>;
 export default DatePicker;
 //# sourceMappingURL=datePicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"datePicker.d.ts","sourceRoot":"","sources":["../../../src/datePicker/datePicker.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAMpD,qCAAqC;AACrC,eAAO,MAAM,UAAU,yDAsJrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"datePicker.d.ts","sourceRoot":"","sources":["../../../src/datePicker/datePicker.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAMpD,8BAA8B;AAC9B,eAAO,MAAM,UAAU,yDAsJrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/esm/datePicker/datePicker.js

@@ -10,7 +10,7 @@ import { DateInput } from './dateInput';
 const DatePickerPanel = styled(PickerPanel) `
   width: 320px;
 `;
-/** [Beta] Select or input a date. */
+/** Select or input a date. */
 export const DatePicker = vui((props, ref) => {
     const { autoOpened, boundaries, popupPosition = 'left', selectedDate: selectedDateProps, showClearButton, slotBottom, slotTop, onSelected, children, className, ...rest } = omitThemingProps(props);
     const styles = useStyleConfig('DatePicker', props);

package/dist/esm/progress/progress.d.ts

@@ -1,6 +1,6 @@
 import { ProgressProps } from './progress.types';
 export declare const ProgressBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
-/** [Beta] Indicates a process progress. */
+/** Indicates a process progress. */
 export declare const Progress: import("../core").VuiComponent<"div", ProgressProps>;
 export default Progress;
 //# sourceMappingURL=progress.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/progress/progress.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAEhD,eAAO,MAAM,YAAY,+HAGxB,CAAA;AAKD,2CAA2C;AAC3C,eAAO,MAAM,QAAQ,sDAuCnB,CAAA;AAGF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/progress/progress.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAEhD,eAAO,MAAM,YAAY,+HAGxB,CAAA;AAKD,oCAAoC;AACpC,eAAO,MAAM,QAAQ,sDAuCnB,CAAA;AAGF,eAAe,QAAQ,CAAA"}

package/dist/esm/progress/progress.js

@@ -9,7 +9,7 @@ export const ProgressBase = styled.divBox `
 `;
 const minPercentageDisplay = 3;
 const maxValue = 100;
-/** [Beta] Indicates a process progress. */
+/** Indicates a process progress. */
 export const Progress = vui((props, ref) => {
     const { className, value = 0, showPercentage, ...rest } = props;
     const [width, setWidth] = useState(0);

package/dist/esm/progressCircular/progressCircular.d.ts

@@ -1,6 +1,6 @@
 import { ProgressCircularProps } from './progressCircular.types';
 export declare const ProgressCircularBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
-/** [Beta] Indicates a process progress. */
+/** Indicates a process progress. */
 export declare const ProgressCircular: import("../core").VuiComponent<"div", ProgressCircularProps>;
 export default ProgressCircular;
 //# sourceMappingURL=progressCircular.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"progressCircular.d.ts","sourceRoot":"","sources":["../../../src/progressCircular/progressCircular.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,eAAO,MAAM,oBAAoB,+HAIhC,CAAA;AAWD,2CAA2C;AAC3C,eAAO,MAAM,gBAAgB,8DA8D3B,CAAA;AAGF,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"progressCircular.d.ts","sourceRoot":"","sources":["../../../src/progressCircular/progressCircular.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,eAAO,MAAM,oBAAoB,+HAIhC,CAAA;AAWD,oCAAoC;AACpC,eAAO,MAAM,gBAAgB,8DA8D3B,CAAA;AAGF,eAAe,gBAAgB,CAAA"}

package/dist/esm/progressCircular/progressCircular.js

@@ -18,7 +18,7 @@ const ProgressCircle = styled(MainCircle) `
   transform-origin: 50% 50%;
   transition: stroke-dashoffset 0.5s ease-out;
 `;
-/** [Beta] Indicates a process progress. */
+/** Indicates a process progress. */
 export const ProgressCircular = vui((props, ref) => {
     const { children, className, label, value = 0, showPercentage, ...rest } = props;
     const styles = useStyleConfig('ProgressCircular', props);

package/dist/esm/stepperHorizontal/stepperHorizontal.d.ts

@@ -1,7 +1,7 @@
 import StepperHorizontalBase from './stepperHorizontalBase';
 import { StepperHorizontalProps } from './stepperHorizontalTypes';
 /**
- * Implements Horizontal stepper **
+ * [Beta] Implements Horizontal stepper **
  */
 export declare const StepperHorizontal: import("../core").VuiComponent<"div", StepperHorizontalProps>;
 export default StepperHorizontalBase;

package/dist/esm/stepperHorizontal/stepperHorizontal.js

@@ -5,7 +5,7 @@ import { cs, filterUndefined } from '../utils';
 import { StepperHorizontalProvider } from './context';
 import StepperHorizontalBase from './stepperHorizontalBase';
 /**
- * Implements Horizontal stepper **
+ * [Beta] Implements Horizontal stepper **
  */
 export const StepperHorizontal = vui((props, ref) => {
     const { children, className, size, ...rest } = props;

package/dist/esm/toast/useToast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/toast/useToast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKjC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAEvE,eAAO,MAAM,eAAe,SAAS,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AAWrC,eAAO,MAAM,QAAQ;0BAKU,YAAY,KAAG,IAAI;oBAFzB,MAAM;qBAqCL,SAAS,aAAY,aAAa;wBAE/B,SAAS,aAAY,aAAa;wBAElC,SAAS,aAAY,aAAa;sBAEpC,SAAS,aAAY,aAAa;wBAEhC,SAAS,aAAY,aAAa;CAI9D,CAAA"}
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/toast/useToast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAe,MAAM,OAAO,CAAA;AAK9C,OAAO,EAAE,aAAa,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAEvE,eAAO,MAAM,eAAe,SAAS,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AAWrC,eAAO,MAAM,QAAQ;0BAGsB,YAAY,KAAG,IAAI;;qBA+BnD,SAAS,aAAY,aAAa;wBAKlC,SAAS,aAAY,aAAa;wBAKlC,SAAS,aAAY,aAAa;sBAKlC,SAAS,aAAY,aAAa;wBAKlC,SAAS,aAAY,aAAa;CAa5C,CAAA"}

package/dist/esm/toast/useToast.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { useVuiContext } from '../core';
 import { Notification } from '../notification';
 import { uid } from '../utils';
@@ -14,28 +15,30 @@ const setup = {
 const getDurationTime = (duration) => (duration === 'fast' ? fastToastDuration : slowToastDuration);
 export const useToast = () => {
     const { addToast, removeToast } = useVuiContext();
-    const hideToast = (id) => removeToast(id);
-    const showToast = (options) => {
+    const showToast = useCallback((options) => {
         const id = options?.id ? options.id : uid('toast');
-        const { duration = setup.options.duration } = options || {};
-        const { status = setup.options.duration } = options || {};
-        const { action } = options || {};
-        const { icon } = options || {};
-        const { text } = options || {};
-        const { title } = options || {};
-        const onClose = () => hideToast(id);
+        const { duration = setup.options.duration, status = 'info', action, icon, text, title } = options || {};
         const toast = {
             id,
-            component: (_jsx(Notification, { action: action, animation: "fadeDown", icon: icon, mt: { md: 1, sm: '4px', xs: '4px' }, onClose: onClose, shadow: 3, status: status, text: text, title: title, verticalAlign: "center", w: 1 }))
+            component: (_jsx(Notification, { action: action, animation: "fadeDown", elevation: 3, icon: icon, mt: { md: 1, sm: '4px', xs: '4px' }, onClose: () => removeToast(id), status: status, text: text, title: title, verticalAlign: "center", w: 1 }))
         };
         addToast(toast);
-        if (duration && duration !== 'sticky')
-            window.setTimeout(() => hideToast(id), getDurationTime(duration));
+        if (duration && duration !== 'sticky') {
+            window.setTimeout(() => removeToast(id), getDurationTime(duration));
+        }
+    }, []);
+    const showInfo = useCallback((text, duration = defaultDuration) => showToast({ text, status: 'info', duration }), [showToast]);
+    const showSuccess = useCallback((text, duration = defaultDuration) => showToast({ text, status: 'success', duration }), [showToast]);
+    const showWarning = useCallback((text, duration = defaultDuration) => showToast({ text, status: 'warning', duration }), [showToast]);
+    const showError = useCallback((text, duration = defaultDuration) => showToast({ text, status: 'error', duration }), [showToast]);
+    const showLoading = useCallback((text, duration = defaultDuration) => showToast({ text, status: 'loading', duration }), [showToast]);
+    return {
+        showToast,
+        hideToast: removeToast,
+        showInfo,
+        showSuccess,
+        showWarning,
+        showError,
+        showLoading
     };
-    const showInfo = (text, duration = defaultDuration) => showToast({ text, status: 'info', duration });
-    const showSuccess = (text, duration = defaultDuration) => showToast({ text, status: 'success', duration });
-    const showWarning = (text, duration = defaultDuration) => showToast({ text, status: 'warning', duration });
-    const showError = (text, duration = defaultDuration) => showToast({ text, status: 'error', duration });
-    const showLoading = (text, duration = defaultDuration) => showToast({ text, status: 'loading', duration });
-    return { showToast, hideToast, showInfo, showSuccess, showWarning, showError, showLoading };
 };

package/dist/esm/tutorial/tutorial.d.ts

@@ -1,5 +1,5 @@
 import { TutorialProps } from './tutorial.types';
-/** [Beta] Popover Tutorial is used to display information about a new, or existing feature. */
+/** Popover Tutorial is used to display information about a new, or existing feature. */
 export declare function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title, id, placement, showSkipButton }: TutorialProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Tutorial {
     var displayName: string;

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

@@ -1 +1 @@
-{"version":3,"file":"tutorial.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAI5D,+FAA+F;AAC/F,wBAAgB,QAAQ,CAAC,EACvB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,EACL,KAAK,EACL,EAAE,EACF,SAAmB,EACnB,cAAc,EACf,EAAE,aAAa,2CAwCf;yBApDe,QAAQ"}
+{"version":3,"file":"tutorial.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAI5D,wFAAwF;AACxF,wBAAgB,QAAQ,CAAC,EACvB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,EACL,KAAK,EACL,EAAE,EACF,SAAmB,EACnB,cAAc,EACf,EAAE,aAAa,2CAwCf;yBApDe,QAAQ"}

package/dist/esm/tutorial/tutorial.js

@@ -3,7 +3,7 @@ import Tippy from '@tippyjs/react';
 import { cs } from '../utils';
 import { TutorialCard } from './tutorialCard';
 import { useTutorial } from './useTutorial';
-/** [Beta] Popover Tutorial is used to display information about a new, or existing feature. */
+/** Popover Tutorial is used to display information about a new, or existing feature. */
 export function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title, id, placement = 'right', showSkipButton }) {
     const { isVisible, setIsVisible, saveDisplayed } = useTutorial(id);
     const onClose = (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.17.0-beta.2",
+  "version": "2.17.1-beta.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",
@@ -12,6 +12,8 @@
     "build": "tsc -p tsconfig.json && tsc -p tsconfig.legacy.json",
     "dev": "tsc --watch -p tsconfig.json",
     "eslint": "eslint \"src/**/*.{ts,tsx}\"",
+    "eslint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
+    "fix": "npm run eslint:fix",
     "lint": "npm run eslint && npm run tslint",
     "tslint": "tsc --noEmit"
   },

package/src/calendar/calendar.tsx

@@ -18,7 +18,7 @@ import {
   processViewDate
 } from './utils'
 
-/** [Beta] Displays calendar. */
+/** Displays calendar. */
 export const Calendar = vui<'div', CalendarProps>((props, ref) => {
   const {
     boundaries,

package/src/datePicker/datePicker.tsx

@@ -13,7 +13,7 @@ const DatePickerPanel = styled(PickerPanel)`
   width: 320px;
 `
 
-/** [Beta] Select or input a date. */
+/** Select or input a date. */
 export const DatePicker = vui<'span', DatePickerProps>((props, ref) => {
   const {
     autoOpened,

package/src/progress/progress.tsx

@@ -13,7 +13,7 @@ export const ProgressBase = styled.divBox`
 const minPercentageDisplay = 3
 const maxValue = 100
 
-/** [Beta] Indicates a process progress. */
+/** Indicates a process progress. */
 export const Progress = vui<'div', ProgressProps>((props, ref) => {
   const { className, value = 0, showPercentage, ...rest } = props
 

package/src/progressCircular/progressCircular.tsx

@@ -22,7 +22,7 @@ const ProgressCircle = styled(MainCircle)`
   transition: stroke-dashoffset 0.5s ease-out;
 `
 
-/** [Beta] Indicates a process progress. */
+/** Indicates a process progress. */
 export const ProgressCircular = vui<'div', ProgressCircularProps>((props, ref) => {
   const { children, className, label, value = 0, showPercentage, ...rest } = props
 

package/src/stepperHorizontal/stepperHorizontal.tsx

@@ -7,7 +7,7 @@ import StepperHorizontalBase from './stepperHorizontalBase'
 import { StepperHorizontalProps } from './stepperHorizontalTypes'
 
 /**
- * Implements Horizontal stepper **
+ * [Beta] Implements Horizontal stepper **
  */
 export const StepperHorizontal = vui<'div', StepperHorizontalProps>((props, ref) => {
   const { children, className, size, ...rest } = props

package/src/toast/useToast.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { ReactNode, useCallback } from 'react'
 
 import { useVuiContext } from '../core'
 import { Notification, NotificationStatus } from '../notification'
@@ -21,18 +21,9 @@ const getDurationTime = (duration: ToastDuration) => (duration === 'fast' ? fast
 export const useToast = () => {
   const { addToast, removeToast } = useVuiContext()
 
-  const hideToast = (id: string) => removeToast(id)
-
-  const showToast = (options?: ToastOptions): void => {
+  const showToast = useCallback((options?: ToastOptions): void => {
     const id = options?.id ? options.id : uid('toast')
-    const { duration = setup.options.duration } = options || {}
-    const { status = setup.options.duration } = options || {}
-    const { action } = options || {}
-    const { icon } = options || {}
-    const { text } = options || {}
-    const { title } = options || {}
-
-    const onClose = () => hideToast(id)
+    const { duration = setup.options.duration, status = 'info', action, icon, text, title } = options || {}
 
     const toast = {
       id,
@@ -40,10 +31,10 @@ export const useToast = () => {
         <Notification
           action={action}
           animation="fadeDown"
+          elevation={3}
           icon={icon}
           mt={{ md: 1, sm: '4px', xs: '4px' }}
-          onClose={onClose}
-          shadow={3}
+          onClose={() => removeToast(id)}
           status={status as NotificationStatus}
           text={text}
           title={title}
@@ -55,19 +46,43 @@ export const useToast = () => {
 
     addToast(toast)
 
-    if (duration && duration !== 'sticky') window.setTimeout(() => hideToast(id), getDurationTime(duration))
-  }
+    if (duration && duration !== 'sticky') {
+      window.setTimeout(() => removeToast(id), getDurationTime(duration))
+    }
+  }, [])
+
+  const showInfo = useCallback(
+    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'info', duration }),
+    [showToast]
+  )
 
-  const showInfo = (text: ReactNode, duration: ToastDuration = defaultDuration) =>
-    showToast({ text, status: 'info', duration })
-  const showSuccess = (text: ReactNode, duration: ToastDuration = defaultDuration) =>
-    showToast({ text, status: 'success', duration })
-  const showWarning = (text: ReactNode, duration: ToastDuration = defaultDuration) =>
-    showToast({ text, status: 'warning', duration })
-  const showError = (text: ReactNode, duration: ToastDuration = defaultDuration) =>
-    showToast({ text, status: 'error', duration })
-  const showLoading = (text: ReactNode, duration: ToastDuration = defaultDuration) =>
-    showToast({ text, status: 'loading', duration })
+  const showSuccess = useCallback(
+    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'success', duration }),
+    [showToast]
+  )
 
-  return { showToast, hideToast, showInfo, showSuccess, showWarning, showError, showLoading }
+  const showWarning = useCallback(
+    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'warning', duration }),
+    [showToast]
+  )
+
+  const showError = useCallback(
+    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'error', duration }),
+    [showToast]
+  )
+
+  const showLoading = useCallback(
+    (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'loading', duration }),
+    [showToast]
+  )
+
+  return {
+    showToast,
+    hideToast: removeToast,
+    showInfo,
+    showSuccess,
+    showWarning,
+    showError,
+    showLoading
+  }
 }

package/src/tutorial/tutorial.tsx

@@ -6,7 +6,7 @@ import { CloseEvent, TutorialProps } from './tutorial.types'
 import { TutorialCard } from './tutorialCard'
 import { useTutorial } from './useTutorial'
 
-/** [Beta] Popover Tutorial is used to display information about a new, or existing feature. */
+/** Popover Tutorial is used to display information about a new, or existing feature. */
 export function Tutorial({
   actionLabel,
   children,