@laerdal/life-react-components 3.5.1-dev.17 → 3.5.1-dev.18

package/dist/src/Tile/TileTypes.d.ts

@@ -1,62 +0,0 @@
-import React from 'react';
-import { IconButtonProps } from '../Button/Iconbutton';
-import { ToggleButtonProps } from '../Toggles/ToggleButton';
-import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
-import { ButtonProps } from '../Button/Button';
-import { HyperlinkProps } from '../HyperLink/HyperLink';
-import { Size } from '../types';
-import { TooltipProps } from "../Tooltips/TooltipTypes";
-import { TagProps } from "../Tag";
-export declare type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {
-    componentType: 'icon';
-    icon: React.ReactNode;
-};
-export declare type TileToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
-    componentType: 'toggle';
-};
-export declare type TileDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
-    componentType: 'dropdown';
-    icon: React.ReactNode;
-    tooltip?: TooltipProps;
-};
-export declare type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
-    componentType: 'button';
-    buttonText: string;
-};
-export declare type TileNote = {
-    componentType: 'note';
-    noteIcon?: React.ReactNode;
-    noteText: string;
-};
-export declare type TileHyperLink = HyperlinkProps & {
-    componentType: 'link';
-    linkIcon?: React.ReactNode;
-    linkText: string;
-};
-export declare type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;
-export declare type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;
-export interface TileHeaderProps {
-    title: string;
-    tag?: TagProps;
-    tooltip?: string;
-    subtitle?: string;
-    subtitleIcon?: React.ReactNode;
-    buttons?: HeaderButtons[];
-}
-export interface TileFooterProps {
-    leftItem?: TileNote | TileHyperLink | TileStandardButton;
-    buttons?: FooterButtons[];
-}
-export interface TileProps extends React.HTMLAttributes<HTMLDivElement> {
-    style?: {
-        width?: string;
-        minWidth?: string;
-        maxWidth?: string;
-        height?: string;
-        minHeight?: string;
-        maxHeight?: string;
-    };
-    size?: Size.Small | Size.Medium | Size.Large;
-    header?: TileHeaderProps;
-    footer?: TileFooterProps;
-}

package/dist/src/Tile/TileTypes.js

@@ -1 +0,0 @@
-export {};

package/dist/src/Tile/index.d.ts

@@ -1,3 +0,0 @@
-import Tile from './Tile';
-export { Tile };
-export * from './TileTypes';

package/dist/src/Tile/index.js

@@ -1,3 +0,0 @@
-import Tile from './Tile';
-export { Tile };
-export * from './TileTypes';

package/dist/src/Toasters/Toast.d.ts

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { keyframes } from 'styled-components';
-import { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';
-export declare const ToastContainer: import("styled-components").StyledComponent<"div", any, {
-    animation: {
-        duration: string;
-        bezier: string;
-        transform: string;
-        keyframes: any;
-    };
-    withLoader: boolean;
-    withClose: boolean;
-}, never>;
-export declare const ToastActionButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ToastCloseButton: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ToastTextContainer: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const ToastIconContainer: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare type ToastOptions = {
-    /** Optional. Color of the toast. Defaults to 'BLACK' */
-    color?: ToastColor;
-    /** Optional. If set Toast will automatically close after delay. Defaults to 'true' */
-    autoClose?: boolean;
-    /** Optional. Delay after which toast will disappear in milliseconds. Defaults to '5000' */
-    delay?: number;
-    /** Optional. If set then Close button will be shown on the right side of the Toast. Defaults to 'false' */
-    showCloseButton?: boolean;
-    /** Optional. Custom action to be available in the Toast, will be shown on the right side of the Toast. */
-    action?: {
-        label: string;
-        handler: () => void;
-        type?: ToastActionType;
-    }[];
-    /** Required. Position on the screen at which Toast will be shown */
-    position: ToastPosition;
-    /** Optional. From which side of the screen appearance animation will start. Defaults to 'TOP' */
-    enterFrom?: ToastEntryDirection;
-    /** Optional. Icon that will be shown on the left side of the Toast */
-    icon?: React.ReactNode;
-};
-declare type Props = {
-    remove?: any;
-    content: any;
-    options?: ToastOptions;
-    testId?: string;
-};
-declare const Toast: ({ content, remove, options, testId }: Props) => React.JSX.Element;
-export default Toast;

package/dist/src/Toasters/Toast.js

@@ -1,166 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var _a, _b;
-import * as React from 'react';
-import styled, { keyframes } from 'styled-components';
-import { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';
-import { BOXSHADOWS, COLORS } from '../styles';
-import { Size } from '../types';
-import { Button, IconButton } from '../Button';
-import { ComponentSStyling, ComponentTextStyle } from '../styles';
-import { HyperLinkDefaultStyling, HyperLinkInvertedStyling } from '../HyperLink';
-import { SystemIcons } from '../icons';
-var LoaderAnimationKeyframes = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n"], ["\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n"])));
-var Loader = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ", " ", "ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n"], ["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ", " ", "ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n"])), LoaderAnimationKeyframes, function (props) { return props.duration; }, ToastColor[ToastColor.BLACK], COLORS.neutral_200, COLORS.neutral_800, ToastColor[ToastColor.WHITE], COLORS.neutral_400, COLORS.white, ToastColor[ToastColor.BLUE], COLORS.accent1_200, COLORS.accent1_600, ToastColor[ToastColor.GREEN], COLORS.correct_200, COLORS.correct_500, ToastColor[ToastColor.ORANGE], COLORS.warning_200, COLORS.warning_500, ToastColor[ToastColor.RED], COLORS.critical_200, COLORS.critical_500);
-export var ToastContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-shadow: ", ";\n  border-radius: 4px;\n\n  animation: ", " ", " ", ";\n  transform: ", ";\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ", " ", " 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ", "\n\n  & a {\n    display: inline;\n    ", "\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n    color: ", ";\n\n    & a {\n      ", "\n    }\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n"], ["\n  box-shadow: ", ";\n  border-radius: 4px;\n\n  animation: ", " ", " ", ";\n  transform: ", ";\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ", " ", " 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ", "\n\n  & a {\n    display: inline;\n    ", "\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n    color: ", ";\n\n    & a {\n      ", "\n    }\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n"])), BOXSHADOWS.BOXSHADOW_L2, function (props) { return props.animation.keyframes; }, function (props) { return props.animation.duration; }, function (props) { return props.animation.bezier; }, function (props) { return props.animation.transform; }, function (props) { return (props.withClose ? '0' : '16px'); }, function (props) { return (props.withLoader ? '4px' : '0'); }, ComponentSStyling(ComponentTextStyle.Regular, COLORS.white), HyperLinkInvertedStyling, ToastColor[ToastColor.BLACK], COLORS.neutral_800, ToastColor[ToastColor.WHITE], COLORS.white, COLORS.black, HyperLinkDefaultStyling, ToastColor[ToastColor.BLUE], COLORS.accent1_600, ToastColor[ToastColor.GREEN], COLORS.correct_500, ToastColor[ToastColor.ORANGE], COLORS.warning_500, ToastColor[ToastColor.RED], COLORS.critical_500);
-export var ToastActionButtons = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n"])));
-export var ToastCloseButton = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ", " !important;\n  }\n\n  &.", " {\n    button svg path {\n      fill: ", " !important;\n    }\n  }\n"], ["\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ", " !important;\n  }\n\n  &.", " {\n    button svg path {\n      fill: ", " !important;\n    }\n  }\n"])), COLORS.white, ToastColor[ToastColor.WHITE], COLORS.neutral_600);
-export var ToastTextContainer = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n"], ["\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n"])));
-export var ToastIconContainer = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: -8px;\n"], ["\n  margin-right: -8px;\n"])));
-var DEFAULT_OPTIONS = {
-    color: ToastColor.BLACK,
-    autoClose: true,
-    delay: 5000,
-    showCloseButton: false,
-    position: ToastPosition.TOPLEFT,
-    enterFrom: ToastEntryDirection.TOP,
-};
-var Toast = function (_a) {
-    var _b, _c, _d;
-    var content = _a.content, remove = _a.remove, _e = _a.options, options = _e === void 0 ? DEFAULT_OPTIONS : _e, testId = _a.testId;
-    if (!remove)
-        throw new Error('remove function is required when rendering Toast. Make sure that you are using useToast hook and ToastProvider for rendering Toasts');
-    var removeRef = React.useRef();
-    removeRef.current = remove;
-    var elementRef = React.useRef(null);
-    var _f = React.useState(false), shouldRemove = _f[0], setShouldRemove = _f[1];
-    var _g = React.useState({ width: 0, height: 0 }), dimensions = _g[0], setDimensions = _g[1];
-    var opts = __assign(__assign({}, DEFAULT_OPTIONS), options);
-    React.useEffect(function () {
-        if (opts === null || opts === void 0 ? void 0 : opts.autoClose) {
-            // @ts-ignore
-            var id_1 = setTimeout(function () { return setShouldRemove(true); }, opts.delay);
-            return function () { return clearTimeout(id_1); };
-        }
-        return undefined;
-    }, []);
-    React.useEffect(function () {
-        if (shouldRemove) {
-            // @ts-ignore
-            var id_2 = setTimeout(function () { return removeRef.current(); }, 200);
-            return function () { return clearTimeout(id_2); };
-        }
-    }, [shouldRemove]);
-    React.useEffect(function () {
-        var _a, _b;
-        setDimensions({ height: (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight, width: (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth });
-    }, []);
-    var animation = animations[shouldRemove ? 'leave' : 'enter'];
-    var direction = animation[(_b = opts.enterFrom) !== null && _b !== void 0 ? _b : ToastEntryDirection.TOP];
-    var fromY = dimensions.height * direction.fromHeight;
-    var toY = dimensions.height * direction.toHeight;
-    var fromX = dimensions.width * direction.fromWidth;
-    var toX = dimensions.width * direction.toWidth;
-    var prop = {
-        duration: animation.duration,
-        bezier: animation.bezier,
-        transform: "translateY(".concat(toY, ") translateX(").concat(toX, ")"),
-        keyframes: keyframes(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        0% {\n          transform: translateY(", "px) translateX(", "px);\n        }\n        100% {\n          transform: translateY(", "px) translateX(", "px);\n        }"], ["\n        0% {\n          transform: translateY(", "px) translateX(", "px);\n        }\n        100% {\n          transform: translateY(", "px) translateX(", "px);\n        }"])), fromY, fromX, toY, toX),
-    };
-    if (!dimensions.height) {
-        prop = __assign(__assign({}, prop), {
-            transform: 'translateY(-1000vh) translateX(-1000vw)',
-            keyframes: keyframes(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
-        });
-    }
-    var theme = ToastColor[(_c = opts.color) !== null && _c !== void 0 ? _c : ToastColor.BLACK];
-    if (!shouldRemove) {
-        setTimeout(function () { var _a; return (_a = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
-    }
-    return (React.createElement(ToastContainer, { "data-testid": testId, animation: prop, ref: elementRef, withLoader: !!opts.autoClose, className: theme, withClose: !!opts.showCloseButton, tabIndex: -1 },
-        opts.icon && React.createElement(ToastIconContainer, null, opts.icon),
-        React.createElement(ToastTextContainer, { className: 'description' }, content),
-        opts.action && (React.createElement(ToastActionButtons, null, opts.action.map(function (action, i) { return (React.createElement(Button, { size: Size.Small, variant: action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary', colorTheme: opts.color !== ToastColor.WHITE ? 'dark' : 'teal', invertFocus: opts.color === ToastColor.BLACK, key: i, onClick: function () {
-                setShouldRemove(true);
-                action.handler();
-            }, className: 'action' }, action.label)); }))),
-        opts.showCloseButton && (React.createElement(ToastCloseButton, { className: "close-button ".concat(theme) },
-            React.createElement(IconButton, { variant: 'secondary', shape: "circular", useTransparentBackground: true, invertFocus: opts.color === ToastColor.BLACK, action: function (event) { return setShouldRemove(true); } },
-                React.createElement(SystemIcons.Close, { size: "24px", color: COLORS.neutral_600 })))),
-        !!opts.autoClose && React.createElement(Loader, { className: "loader ".concat(theme), duration: (_d = opts.delay) !== null && _d !== void 0 ? _d : 0 })));
-};
-export default Toast;
-var animations = {
-    enter: (_a = {
-            bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',
-            duration: '300ms'
-        },
-        _a[ToastEntryDirection.TOP] = {
-            fromHeight: -1,
-            toHeight: 0,
-            fromWidth: 0,
-            toWidth: 0,
-        },
-        _a[ToastEntryDirection.BOTTOM] = {
-            fromHeight: 1,
-            toHeight: 0,
-            fromWidth: 0,
-            toWidth: 0,
-        },
-        _a[ToastEntryDirection.LEFT] = {
-            fromHeight: 0,
-            toHeight: 0,
-            fromWidth: -1,
-            toWidth: 0,
-        },
-        _a[ToastEntryDirection.RIGHT] = {
-            fromHeight: 0,
-            toHeight: 0,
-            fromWidth: 1,
-            toWidth: 0,
-        },
-        _a),
-    leave: (_b = {
-            bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',
-            duration: '205ms'
-        },
-        _b[ToastEntryDirection.TOP] = {
-            fromHeight: 0,
-            toHeight: -1,
-            fromWidth: 0,
-            toWidth: 0,
-        },
-        _b[ToastEntryDirection.BOTTOM] = {
-            fromHeight: 0,
-            toHeight: 1,
-            fromWidth: 0,
-            toWidth: 0,
-        },
-        _b[ToastEntryDirection.LEFT] = {
-            fromHeight: 0,
-            toHeight: 0,
-            fromWidth: 0,
-            toWidth: -1,
-        },
-        _b[ToastEntryDirection.RIGHT] = {
-            fromHeight: 0,
-            toHeight: 0,
-            fromWidth: 0,
-            toWidth: 1,
-        },
-        _b),
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/Toasters/ToastContext.d.ts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { ToastOptions } from './Toast';
-export declare type ToastProviderProps = {
-    children?: any;
-};
-export interface toast {
-    options: ToastOptions;
-    id: string;
-    content: any;
-}
-export declare type ToasterValueProps = {
-    toasts: toast[];
-    addToast: (content: any, options: ToastOptions) => string;
-    removeToast: (id: string) => void;
-};
-export declare const ToastContext: React.Context<ToasterValueProps>;
-export declare const ToastProvider: React.FC<ToastProviderProps>;
-export declare function useToast(): {
-    addToast: (content: any, options: ToastOptions) => string;
-    removeToast: (id: string) => void;
-};

package/dist/src/Toasters/ToastContext.js

@@ -1,69 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { createUUID } from '../Services/functions';
-import Toast from './Toast';
-import { ToastPosition } from '../types';
-import { Z_INDEXES } from '../styles/z-indexes';
-/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/
-export var ToastContext = React.createContext({});
-var ToastBucket = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  z-index: ", ";\n  display: flex;\n  flex-direction: column-reverse;\n"], ["\n  position: fixed;\n  z-index: ", ";\n  display: flex;\n  flex-direction: column-reverse;\n"])), Z_INDEXES.toast);
-var ToastBucketTopLeft = styled(ToastBucket)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  top: 16px;\n  left: 5%;\n"], ["\n  top: 16px;\n  left: 5%;\n"])));
-var ToastBucketTopMiddle = styled(ToastBucket)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"], ["\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
-var ToastBucketTopRight = styled(ToastBucket)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  top: 16px;\n  right: 5%;\n"], ["\n  top: 16px;\n  right: 5%;\n"])));
-var ToastBucketBottomLeft = styled(ToastBucket)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  bottom: 16px;\n  left: 5%;\n"], ["\n  bottom: 16px;\n  left: 5%;\n"])));
-var ToastBucketBottomMiddle = styled(ToastBucket)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"], ["\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
-var ToastBucketBottomRight = styled(ToastBucket)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  bottom: 16px;\n  right: 5%;\n"], ["\n  bottom: 16px;\n  right: 5%;\n"])));
-export var ToastProvider = function (_a) {
-    var children = _a.children;
-    var _b = React.useState([]), toasts = _b[0], setToasts = _b[1];
-    var add = function (content, options) {
-        var id = createUUID();
-        setToasts(function (prev) { return __spreadArray(__spreadArray([], prev, true), [{ id: id, content: content, options: options }], false); });
-        return id;
-    };
-    var remove = function (id) { return setToasts(toasts.filter(function (t) { return t.id !== id; })); };
-    var functions = React.useMemo(function () {
-        return { addToast: add, removeToast: remove };
-    }, [toasts]);
-    return (React.createElement(ToastContext.Provider, { value: { toasts: toasts, addToast: add, removeToast: remove } },
-        React.createElement(ToastBucketTopLeft, null, toasts
-            .filter(function (t) { return t.options.position === ToastPosition.TOPLEFT; })
-            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
-        React.createElement(ToastBucketTopMiddle, null, toasts
-            .filter(function (t) { return t.options.position === ToastPosition.TOPMIDDLE; })
-            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
-        React.createElement(ToastBucketTopRight, null, toasts
-            .filter(function (t) { return t.options.position === ToastPosition.TOPRIGHT; })
-            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
-        React.createElement(ToastBucketBottomLeft, null, toasts
-            .filter(function (t) { return t.options.position === ToastPosition.BOTTOMLEFT; })
-            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
-        React.createElement(ToastBucketBottomMiddle, null, toasts
-            .filter(function (t) { return t.options.position === ToastPosition.BOTTOMMIDDLE; })
-            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
-        React.createElement(ToastBucketBottomRight, null, toasts
-            .filter(function (t) { return t.options.position === ToastPosition.BOTTOMRIGHT; })
-            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
-        children));
-};
-export function useToast() {
-    var _a = React.useContext(ToastContext), addToast = _a.addToast, removeToast = _a.removeToast;
-    return {
-        addToast: addToast,
-        removeToast: removeToast
-    };
-}
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/Toasters/index.d.ts

@@ -1,4 +0,0 @@
-import Toast from './Toast';
-import { ToastProvider, useToast, ToastContext } from './ToastContext';
-export * from './Toast';
-export { Toast, ToastProvider, useToast, ToastContext };

package/dist/src/Toasters/index.js

@@ -1,4 +0,0 @@
-import Toast from './Toast';
-import { ToastProvider, useToast, ToastContext } from './ToastContext';
-export * from './Toast';
-export { Toast, ToastProvider, useToast, ToastContext };

package/dist/src/Toggles/ToggleButton.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-export interface ToggleButtonState {
-    icon: React.ReactNode;
-    color?: string;
-}
-export interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {
-    /** Required. Initial state of the toggle. */
-    active: boolean;
-    /** Optional. Handler to be called when toggle state changes. */
-    onChange?: (value: boolean) => void;
-    /** Optional. If set user can not interact with ToggleButton. */
-    disabled?: boolean;
-    /** Required. Icon and color of toggle in default state. */
-    defaultState: ToggleButtonState;
-    /** Optional. Icon and color of toggle in active state. */
-    activeState?: ToggleButtonState;
-}
-export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default ToggleButton;

package/dist/src/Toggles/ToggleButton.js

@@ -1,48 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import { IconButton } from '../Button';
-import styled from 'styled-components';
-import { IconButtonContentStyles } from '../Button/Iconbutton';
-import { COLORS } from '../styles';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"], ["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.primary_500, IconButtonContentStyles, COLORS.neutral_300);
-export var ToggleButton = React.forwardRef(function (_a, ref) {
-    var _b, _c;
-    var id = _a.id, active = _a.active, onChange = _a.onChange, disabled = _a.disabled, defaultState = _a.defaultState, activeState = _a.activeState, className = _a.className, rest = __rest(_a, ["id", "active", "onChange", "disabled", "defaultState", "activeState", "className"]);
-    var _d = React.useState(false), isActive = _d[0], setIsActive = _d[1];
-    React.useEffect(function () { return setIsActive(active); }, [active]);
-    var cls = "".concat(className || '', " ").concat(isActive ? 'active' : '', " ").concat(activeState ? 'state-change' : '', " ").concat(disabled ? 'disabled' : '');
-    return (React.createElement(Wrapper, { className: cls },
-        React.createElement(IconButton, __assign({ variant: 'secondary', ref: ref, useTransparentBackground: true, shape: 'circular', action: function () {
-                setIsActive(!isActive);
-                if (onChange) {
-                    onChange(!isActive);
-                }
-            }, id: id, iconColor: isActive ? (_b = activeState === null || activeState === void 0 ? void 0 : activeState.color) !== null && _b !== void 0 ? _b : defaultState.color : defaultState.color, disabled: disabled, "aria-pressed": isActive }, rest), isActive ? (_c = activeState === null || activeState === void 0 ? void 0 : activeState.icon) !== null && _c !== void 0 ? _c : defaultState.icon : defaultState.icon)));
-});
-export default ToggleButton;
-var templateObject_1;

package/dist/src/Toggles/ToggleSwitch.d.ts

@@ -1,10 +0,0 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom types.
- */
-import { ToggleSwitchProps } from './TogglerTypes';
-declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<unknown>>;
-export default ToggleSwitch;

package/dist/src/Toggles/ToggleSwitch.js

@@ -1,65 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom styles.
- */
-import { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';
-import { COLORS, Size, SystemIcons } from '..';
-import { useFocusVisibleRef } from '../common';
-import styled from "styled-components";
-var CheckmarkContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n"], ["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n"])));
-var ToggleSwitch = React.forwardRef(function (_a, ref) {
-    var id = _a.id, disabled = _a.disabled, selected = _a.selected, label = _a.label, isSemantic = _a.isSemantic, size = _a.size, onToggle = _a.onToggle, className = _a.className, rest = __rest(_a, ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"]);
-    /**
-     * Does all required pre-requisites and toggles the switcher state.
-     */
-    var toggle = function () {
-        // If disabled, don't do anything
-        if (disabled)
-            return;
-        // Toggle state change
-        onToggle(!selected);
-    };
-    var focusVisibleRef = useFocusVisibleRef([]);
-    React.useImperativeHandle(ref, function () { return focusVisibleRef.current; }, [focusVisibleRef]);
-    size = size !== null && size !== void 0 ? size : Size.Medium;
-    return (React.createElement(StyledSwitch, __assign({ ref: focusVisibleRef, onClick: function (e) { return toggle(); }, onKeyDown: function (e) { return (e.key === 'Enter' || e.key === ' ') && toggle(); }, className: size
-            .toString()
-            .toLowerCase()
-            .concat(disabled ? ' disabled' : '')
-            .concat(className ? " ".concat(className) : ''), selected: selected, id: id, role: "switch", "aria-pressed": selected, tabIndex: disabled ? -1 : 0 }, rest),
-        React.createElement(ToggleSwitchContainer, { id: "switchContainer" },
-            React.createElement(Switch, { className: isSemantic ? 'semantic' : '' }, selected && React.createElement(CheckmarkContainer, null,
-                React.createElement(SystemIcons.CheckMark, { size: '14px', color: COLORS.white })))),
-        label && (React.createElement("label", { className: 'label', htmlFor: id }, label))));
-});
-export default ToggleSwitch;
-var templateObject_1;

package/dist/src/Toggles/TogglerStyles.d.ts

@@ -1,5 +0,0 @@
-export declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, {
-    selected: boolean | undefined;
-}, never>;
-export declare const ToggleSwitchContainer: import("styled-components").StyledComponent<"label", any, {}, never>;
-export declare const ToggleSwitch: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/src/Toggles/TogglerStyles.js

@@ -1,17 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-/**
- * Import custom styles.
- */
-import { COLORS, focusStyles } from '../styles';
-/**
- * Import third-party libraries.
- */
-import styled from 'styled-components';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
-export var StyledSwitch = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled[aria-pressed='true'] label:first-of-type span {\n    background-color: ", " !important;\n    cursor: not-allowed;\n\n    &:before {\n      background-color: ", " !important;\n      cursor: not-allowed;\n    }\n  }\n\n  &[aria-pressed='true']:hover span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &[aria-pressed='true'] label:first-of-type span {\n    background-color: ", ";\n\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      -webkit-transform: translateX(20px);\n      -ms-transform: translateX(20px);\n      transform: translateX(20px);\n    }\n  }\n\n  &.disabled[aria-pressed='false'] label:first-of-type span {\n    background-color: ", " !important;\n    cursor: not-allowed;\n\n    &:before {\n      background-color: ", " !important;\n      cursor: not-allowed;\n    }\n  }\n\n  &[aria-pressed='false']:hover label:first-of-type span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &:not(.disabled).focus-visible {\n    ", "\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled[aria-pressed='true'] label:first-of-type span {\n    background-color: ", " !important;\n    cursor: not-allowed;\n\n    &:before {\n      background-color: ", " !important;\n      cursor: not-allowed;\n    }\n  }\n\n  &[aria-pressed='true']:hover span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &[aria-pressed='true'] label:first-of-type span {\n    background-color: ", ";\n\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      -webkit-transform: translateX(20px);\n      -ms-transform: translateX(20px);\n      transform: translateX(20px);\n    }\n  }\n\n  &.disabled[aria-pressed='false'] label:first-of-type span {\n    background-color: ", " !important;\n    cursor: not-allowed;\n\n    &:before {\n      background-color: ", " !important;\n      cursor: not-allowed;\n    }\n  }\n\n  &[aria-pressed='false']:hover label:first-of-type span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &:not(.disabled).focus-visible {\n    ", "\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.neutral_300, COLORS.primary_100, COLORS.neutral_300, COLORS.neutral_200, COLORS.correct_500, COLORS.primary_20, COLORS.primary_500, COLORS.correct_500, COLORS.neutral_300, COLORS.neutral_100, COLORS.critical_500, COLORS.primary_20, focusStyles);
-export var ToggleSwitchContainer = styled.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n"], ["\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n"])));
-export var ToggleSwitch = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ", ";\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ", ";\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ", ";\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ", ";\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ", ";\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ", ";\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n"])), COLORS.neutral_500, COLORS.critical_500, COLORS.white);
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/Toggles/TogglerTypes.d.ts

@@ -1,20 +0,0 @@
-import { Size } from '..';
-/**
- * Types for the table.
- */
-export interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onKeyDown' | 'onClick' | 'tabIndex'> {
-    /** Required. Id of the ToggleSwitch will be set to top level StyledSwitch div component. */
-    id: string;
-    /** Optional. Label to be shown on the right side of the toggle. */
-    label?: string;
-    /** Optional. If set user can not interact with Toggle. */
-    disabled?: boolean;
-    /** Optional. Initial state of the Toggle, defaults to 'false' */
-    selected?: boolean;
-    /** Optional. If set then 'critical_500' will be used as color for unselected state.*/
-    isSemantic?: boolean;
-    /** Optional. Defaults to 'medium' */
-    size?: Size;
-    /** Required. Handler to handle toggle state change. */
-    onToggle: (selected: boolean) => void;
-}

package/dist/src/Toggles/TogglerTypes.js

@@ -1 +0,0 @@
-export {};

package/dist/src/Toggles/index.d.ts

@@ -1,3 +0,0 @@
-import ToggleSwitch from './ToggleSwitch';
-import ToggleButton from './ToggleButton';
-export { ToggleSwitch, ToggleButton };

package/dist/src/Toggles/index.js

@@ -1,3 +0,0 @@
-import ToggleSwitch from './ToggleSwitch';
-import ToggleButton from './ToggleButton';
-export { ToggleSwitch, ToggleButton };