@thecb/components 7.3.2-beta.5 → 7.4.0

package/dist/src/components/atoms/tab/Tab.d.ts

@@ -1,6 +0,0 @@
-export default Tab;
-declare function Tab({ label, activeTab, setActiveTab }: {
-    label: any;
-    activeTab: any;
-    setActiveTab: any;
-}): JSX.Element;

package/dist/src/components/atoms/tab/Tab.js

@@ -1,17 +0,0 @@
-import React from "react";
-import Text from "../text";
-import { WHITE, GRECIAN_GREY } from "../../../constants/colors";
-import { Box } from "../../atoms/layouts";
-var Tab = function (_a) {
-    var label = _a.label, activeTab = _a.activeTab, setActiveTab = _a.setActiveTab;
-    var onClick = function () {
-        setActiveTab(label);
-    };
-    var className = "tab-list-item";
-    if (activeTab === label) {
-        className += " tab-list-active";
-    }
-    return (React.createElement(Box, { className: className, onClick: onClick, margin: "0 0 -1px 0", padding: "0.5rem 0.75rem", background: activeTab === label ? WHITE : GRECIAN_GREY, extraStyles: "cursor: pointer; flex-grow: 1; text-align: center; ".concat(activeTab === label ? "list-style: none;" : "") },
-        React.createElement(Text, null, label)));
-};
-export default Tab;

package/dist/src/components/atoms/tab/Tab.stories.d.ts

@@ -1,7 +0,0 @@
-export function tab(): JSX.Element;
-export default story;
-declare const story: {
-    title: any;
-    component: any;
-    decorators: ((storyFn: any) => JSX.Element)[];
-};

package/dist/src/components/atoms/tab/Tab.stories.js

@@ -1,9 +0,0 @@
-import React from "react";
-import Tab from "./Tab";
-import page from "../../../../.storybook/page";
-export var tab = function () { return (React.createElement(Tab, { label: "Test", onClick: function () { return console.log("test"); } })); };
-var story = page({
-    title: "Components|Atoms/Tab",
-    Component: Tab
-});
-export default story;

package/dist/src/components/atoms/tab/Tab.theme.d.ts

@@ -1,27 +0,0 @@
-export namespace fallbackValues {
-    export { fontFamily };
-    export { fontSize };
-}
-declare namespace fontFamily {
-    const p: string;
-    const pL: string;
-    const pS: string;
-    const pXS: string;
-    const pXXS: string;
-    const pXL: string;
-}
-declare namespace fontSize {
-    const p_1: string;
-    export { p_1 as p };
-    const pL_1: string;
-    export { pL_1 as pL };
-    const pS_1: string;
-    export { pS_1 as pS };
-    const pXS_1: string;
-    export { pXS_1 as pXS };
-    const pXXS_1: string;
-    export { pXXS_1 as pXXS };
-    const pXL_1: string;
-    export { pXL_1 as pXL };
-}
-export {};

package/dist/src/components/atoms/tab/Tab.theme.js

@@ -1,23 +0,0 @@
-var fontFamily = {
-    p: "Public Sans",
-    pL: "Public Sans",
-    pS: "Public Sans",
-    pXS: "Public Sans",
-    pXXS: "Public Sans",
-    pXL: "Public Sans"
-};
-// Text uses the same variants as paragraph
-// Use a Paragraph if you want a block level element
-// Use a Text if you want an inline element
-var fontSize = {
-    p: "1rem",
-    pL: "1.125rem",
-    pS: "0.875rem",
-    pXS: "0.75rem",
-    pXXS: "0.65rem",
-    pXL: "1.5rem"
-};
-export var fallbackValues = {
-    fontFamily: fontFamily,
-    fontSize: fontSize
-};

package/dist/src/components/atoms/tab/index.d.ts

@@ -1,2 +0,0 @@
-export default Tab;
-import Tab from "./Tab";

package/dist/src/components/atoms/tab/index.js

@@ -1,2 +0,0 @@
-import Tab from "./Tab";
-export default Tab;

package/dist/src/components/atoms/text/Text.d.ts

@@ -1,5 +0,0 @@
-declare const _default: ({ variant, ...props }: {
-    [x: string]: any;
-    variant?: any;
-}) => any;
-export default _default;

package/dist/src/components/atoms/text/Text.js

@@ -1,34 +0,0 @@
-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 { fallbackValues } from "./Text.theme";
-import { themeComponent } from "../../../util/themeUtils";
-import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-import { FIREFLY_GREY } from "../../../constants/colors";
-import { TextSpan } from "./Text.styled";
-import { safeChildren } from "../../../util/general";
-var Text = function (_a) {
-    var themeValues = _a.themeValues, _b = _a.weight, weight = _b === void 0 ? FONT_WEIGHT_REGULAR : _b, _c = _a.color, color = _c === void 0 ? FIREFLY_GREY : _c, _d = _a.textWrap, textWrap = _d === void 0 ? true : _d, _e = _a.extraStyles, extraStyles = _e === void 0 ? "" : _e, hoverStyles = _a.hoverStyles, onClick = _a.onClick, onKeyPress = _a.onKeyPress, as = _a.as, dataQa = _a.dataQa, children = _a.children, rest = __rest(_a, ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children"]);
-    return (React.createElement(TextSpan, __assign({ fontSize: themeValues.fontSize, weight: weight, color: color, fontFamily: themeValues.fontFamily, as: as, extraStyles: extraStyles, hoverStyles: hoverStyles, onClick: onClick, onKeyPress: onKeyPress, "data-qa": dataQa, "$textWrap": textWrap }, rest), safeChildren(children, React.createElement("span", null))));
-};
-export default themeComponent(Text, "Text", fallbackValues, "p");

package/dist/src/components/atoms/text/Text.stories.d.ts

@@ -1,7 +0,0 @@
-export function text(): JSX.Element;
-export default story;
-declare const story: {
-    title: any;
-    component: any;
-    decorators: ((storyFn: any) => JSX.Element)[];
-};

package/dist/src/components/atoms/text/Text.stories.js

@@ -1,17 +0,0 @@
-import React from "react";
-import { text as storybookText, number, select } from "@storybook/addon-knobs";
-import Text from "./Text";
-import page from "../../../../.storybook/page";
-import { FONT_WEIGHT_BOLD, FONT_WEIGHT_SEMIBOLD, FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-import * as colors from "../../../constants/colors";
-var fontWeights = {
-    FONT_WEIGHT_BOLD: FONT_WEIGHT_BOLD,
-    FONT_WEIGHT_SEMIBOLD: FONT_WEIGHT_SEMIBOLD,
-    FONT_WEIGHT_REGULAR: FONT_WEIGHT_REGULAR
-};
-export var text = function () { return (React.createElement(Text, { extraStyles: storybookText("extraStyles", "text-align: center;", "props"), margin: number("margin", 0, { min: 0, max: 99 }, "props"), weight: select("weight", fontWeights, 400, "props"), color: select("activeColor", colors, "black", "props"), hoverStyles: storybookText("hoverStyles", "color: blue;", "props") }, storybookText("children", "Lorem Ipsum", "props"))); };
-var story = page({
-    title: "Components|Atoms/Text",
-    Component: Text
-});
-export default story;

package/dist/src/components/atoms/text/Text.styled.d.ts

@@ -1 +0,0 @@
-export const TextSpan: any;

package/dist/src/components/atoms/text/Text.styled.js

@@ -1,32 +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 styled, { css } from "styled-components";
-import { ROYAL_BLUE } from "../../../constants/colors";
-export var TextSpan = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  --font-size: ", ";\n  font-size: var(--font-size);\n  line-height: calc(1.5 * var(--font-size));\n  font-weight: ", ";\n  font-family: ", ";\n  color: ", ";\n  white-space: ", ";\n\n  &:hover {\n    ", "\n  }\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  --font-size: ", ";\n  font-size: var(--font-size);\n  line-height: calc(1.5 * var(--font-size));\n  font-weight: ", ";\n  font-family: ", ";\n  color: ", ";\n  white-space: ", ";\n\n  &:hover {\n    ", "\n  }\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
-    var fontSize = _a.fontSize;
-    return fontSize;
-}, function (_a) {
-    var weight = _a.weight;
-    return weight;
-}, function (_a) {
-    var fontFamily = _a.fontFamily;
-    return fontFamily;
-}, function (_a) {
-    var color = _a.color;
-    return color;
-}, function (_a) {
-    var $textWrap = _a.$textWrap;
-    return ($textWrap ? "initial" : "nowrap");
-}, function (_a) {
-    var hoverStyles = _a.hoverStyles;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), hoverStyles);
-}, ROYAL_BLUE, function (_a) {
-    var disabled = _a.disabled, disabledStyles = _a.disabledStyles;
-    return disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), disabledStyles);
-}, function (_a) {
-    var extraStyles = _a.extraStyles;
-    return extraStyles;
-});
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/components/atoms/text/Text.theme.d.ts

@@ -1,27 +0,0 @@
-export namespace fallbackValues {
-    export { fontFamily };
-    export { fontSize };
-}
-declare namespace fontFamily {
-    const p: string;
-    const pL: string;
-    const pS: string;
-    const pXS: string;
-    const pXXS: string;
-    const pXL: string;
-}
-declare namespace fontSize {
-    const p_1: string;
-    export { p_1 as p };
-    const pL_1: string;
-    export { pL_1 as pL };
-    const pS_1: string;
-    export { pS_1 as pS };
-    const pXS_1: string;
-    export { pXS_1 as pXS };
-    const pXXS_1: string;
-    export { pXXS_1 as pXXS };
-    const pXL_1: string;
-    export { pXL_1 as pXL };
-}
-export {};

package/dist/src/components/atoms/text/Text.theme.js

@@ -1,24 +0,0 @@
-var fontFamily = {
-    p: "Public Sans",
-    pL: "Public Sans",
-    pS: "Public Sans",
-    pXS: "Public Sans",
-    pXXS: "Public Sans",
-    pXL: "Public Sans"
-};
-// Text uses the same variants as paragraph
-// Use a Paragraph if you want a block level element
-// Use a Text if you want an inline element
-// Comments assume base font size of 16px
-var fontSize = {
-    p: "1rem",
-    pL: "1.125rem",
-    pS: "0.875rem",
-    pXS: "0.75rem",
-    pXXS: "0.65rem",
-    pXL: "1.5rem" // 24px
-};
-export var fallbackValues = {
-    fontFamily: fontFamily,
-    fontSize: fontSize
-};

package/dist/src/components/atoms/text/index.d.ts

@@ -1,2 +0,0 @@
-export default Text;
-import Text from "./Text";

package/dist/src/components/atoms/text/index.js

@@ -1,2 +0,0 @@
-import Text from "./Text";
-export default Text;

package/dist/src/components/atoms/title/Title.d.ts

@@ -1,5 +0,0 @@
-declare const _default: ({ variant, ...props }: {
-    [x: string]: any;
-    variant?: any;
-}) => any;
-export default _default;

package/dist/src/components/atoms/title/Title.js

@@ -1,60 +0,0 @@
-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 { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-import { FIREFLY_GREY } from "../../../constants/colors";
-import { TitleText } from "./Title.styled";
-import { safeChildren } from "../../../util/general";
-import { fallbackValues, mobileFallbackValues, MOBILE_BREAKPOINT } from "./Title.theme";
-import { themeComponent } from "../../../util/themeUtils";
-/*
-  New responsive text component for Title elements
-  Size is decoupled from tag
-  Comes with two variants - "large" and "small"
-  Large variant results in text that is 1.5rem (24px desktop, 21px mobile)
-  Small variant results in text that is 1.25rem/1.2142rem (20px desktop, 17px mobile)
-  
-  If you need a smaller text size, use the <Detail /> atom, which has smaller variants
-  
-  Use the "as" prop to specify element type, can use any of: h1/h2/h3/h4/h5/h6/p
-  If you need an inline text element (span), use the <Text /> atom
-  The "as" value should be dictated by the structure of your page, not what font-size you want
-
-  Title / Detail both use slightly different desktop/mobile scales
-  (Mobile scale is different to allow for design-friendly px values)
-  Both atoms detect the presence of a mobile device on their own
-  and apply the corresponding scale
-
-  Mobile breakpoint value is specified in Title.theme.js
-
-  If you want to disable mobile text scales (use the same rem scale for desktop/mobile), then use a theme in FCS to set both the "large" and "small" variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file
-*/
-var isBelowBreakpoint = window.innerWidth < MOBILE_BREAKPOINT;
-var isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1;
-var mobileDeviceDetected = isBelowBreakpoint && isTouchDevice;
-var fallbacks = mobileDeviceDetected ? mobileFallbackValues : fallbackValues;
-var Title = function (_a) {
-    var themeValues = _a.themeValues, _b = _a.weight, weight = _b === void 0 ? FONT_WEIGHT_REGULAR : _b, _c = _a.color, color = _c === void 0 ? FIREFLY_GREY : _c, _d = _a.margin, margin = _d === void 0 ? 0 : _d, textAlign = _a.textAlign, _e = _a.extraStyles, extraStyles = _e === void 0 ? "" : _e, className = _a.className, _f = _a.variant, variant = _f === void 0 ? "large" : _f, _g = _a.as, as = _g === void 0 ? "h1" : _g, dataQa = _a.dataQa, children = _a.children, rest = __rest(_a, ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"]);
-    return (React.createElement(TitleText, __assign({ variant: variant, as: as, weight: weight, color: color, margin: margin, textAlign: textAlign, extraStyles: extraStyles, className: className, fontFamily: themeValues.fontFamily, fontSize: themeValues.fontSize, "data-qa": dataQa }, rest), safeChildren(children, React.createElement("span", null))));
-};
-export default themeComponent(Title, "Title", fallbacks, "large");

package/dist/src/components/atoms/title/Title.styled.d.ts

@@ -1 +0,0 @@
-export const TitleText: any;

package/dist/src/components/atoms/title/Title.styled.js

@@ -1,28 +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 styled from "styled-components";
-export var TitleText = styled.h1(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: 1.5;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n  text-align: ", ";\n  font-family: ", ";\n\n  ", ";\n"], ["\n  font-size: ", ";\n  line-height: 1.5;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n  text-align: ", ";\n  font-family: ", ";\n\n  ", ";\n"])), function (_a) {
-    var fontSize = _a.fontSize;
-    return fontSize;
-}, function (_a) {
-    var color = _a.color;
-    return color;
-}, function (_a) {
-    var weight = _a.weight;
-    return weight;
-}, function (_a) {
-    var margin = _a.margin;
-    return margin;
-}, function (_a) {
-    var textAlign = _a.textAlign;
-    return textAlign;
-}, function (_a) {
-    var fontFamily = _a.fontFamily;
-    return fontFamily;
-}, function (_a) {
-    var extraStyles = _a.extraStyles;
-    return extraStyles;
-});
-var templateObject_1;

package/dist/src/components/atoms/title/Title.theme.d.ts

@@ -1,26 +0,0 @@
-export namespace fallbackValues {
-    export { fontFamily };
-    export { fontSize };
-}
-export namespace mobileFallbackValues {
-    export { fontFamily };
-    export { mobileFontSize as fontSize };
-}
-export const MOBILE_BREAKPOINT: 768;
-declare namespace fontFamily {
-    const large: string;
-    const small: string;
-}
-declare namespace fontSize {
-    const large_1: string;
-    export { large_1 as large };
-    const small_1: string;
-    export { small_1 as small };
-}
-declare namespace mobileFontSize {
-    const large_2: string;
-    export { large_2 as large };
-    const small_2: string;
-    export { small_2 as small };
-}
-export {};

package/dist/src/components/atoms/title/Title.theme.js

@@ -1,22 +0,0 @@
-// Comments assume desktop base font size of 16px, mobile base font size of 14px
-var fontSize = {
-    large: "1.5rem",
-    small: "1.25rem" // 20px
-};
-var fontFamily = {
-    large: "Public Sans",
-    small: "Public Sans"
-};
-var mobileFontSize = {
-    large: "1.5rem",
-    small: "1.2142rem" // 17px
-};
-export var fallbackValues = {
-    fontFamily: fontFamily,
-    fontSize: fontSize
-};
-export var mobileFallbackValues = {
-    fontFamily: fontFamily,
-    fontSize: mobileFontSize
-};
-export var MOBILE_BREAKPOINT = 768;

package/dist/src/components/atoms/title/index.d.ts

@@ -1,2 +0,0 @@
-export default Title;
-import Title from "./Title";

package/dist/src/components/atoms/title/index.js

@@ -1,2 +0,0 @@
-import Title from "./Title";
-export default Title;

package/dist/src/components/atoms/toggle-switch/ToggleSwitch.d.ts

@@ -1,5 +0,0 @@
-declare const _default: ({ variant, ...props }: {
-    [x: string]: any;
-    variant?: any;
-}) => any;
-export default _default;

package/dist/src/components/atoms/toggle-switch/ToggleSwitch.js

@@ -1,126 +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 React from "react";
-import styled from "styled-components";
-import posed from "react-pose";
-import { fallbackValues } from "./ToggleSwitch.theme";
-import { themeComponent } from "../../../util/themeUtils";
-import Heading from "../heading";
-import { Box, Center, Cover, Cluster } from "../layouts";
-import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
-import { CHARADE_GREY } from "../../../constants/colors";
-import { noop } from "../../../util/general";
-var HiddenToggleSwitchBox = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  cursor: ", ";\n  height: 24px;\n  width: 50px;\n  ", "\n"], ["\n  opacity: 0;\n  position: absolute;\n  cursor: ", ";\n  height: 24px;\n  width: 50px;\n  ", "\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? "auto" : "pointer");
-}, function (_a) {
-    var isMobile = _a.isMobile;
-    return (isMobile ? "transform: scale(0.75)" : "");
-});
-var VisibleSwitchComponent = styled.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 48px;\n  height: 24px;\n  border-radius: 48px;\n  border: none;\n  position: relative;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-block;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);\n  }\n\n  ", "\n"], ["\n  width: 48px;\n  height: 24px;\n  border-radius: 48px;\n  border: none;\n  position: relative;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-block;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);\n  }\n\n  ", "\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? "auto" : "pointer");
-}, function (_a) {
-    var disabled = _a.disabled;
-    return disabled ? "none" : "0px 2px 5px 0px rgba(0, 0, 0, 0.5) !important";
-}, function (_a) {
-    var isMobile = _a.isMobile;
-    return (isMobile ? "transform: scale(0.75)" : "");
-});
-var ToggleSwitchMiddleRingComponent = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  border: none;\n  border-radius: 50%;\n  box-sizing: border-box;\n"], ["\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  border: none;\n  border-radius: 50%;\n  box-sizing: border-box;\n"])));
-var ToggleSwitchInnerRingComponent = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  top: 3px;\n  left: 3px;\n  right: 3px;\n  bottom: 3px;\n  border-radius: 50%;\n  box-sizing: border-box;\n"], ["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  top: 3px;\n  left: 3px;\n  right: 3px;\n  bottom: 3px;\n  border-radius: 50%;\n  box-sizing: border-box;\n"])));
-var ToggleSwitch = function (_a) {
-    var _b = _a.isOn, isOn = _b === void 0 ? false : _b, _c = _a.onToggle, onToggle = _c === void 0 ? noop : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.name, name = _e === void 0 ? "" : _e, _f = _a.label, label = _f === void 0 ? null : _f, _g = _a.labelLeft, labelLeft = _g === void 0 ? false : _g, themeValues = _a.themeValues, isMobile = _a.isMobile, dataQa = _a.dataQa;
-    var ToggleSwitchInnerRing = posed(ToggleSwitchInnerRingComponent)({
-        off: {
-            backgroundColor: themeValues.offBackground,
-            transition: {
-                ease: "easeOut"
-            }
-        },
-        on: {
-            backgroundColor: themeValues.onBackground,
-            transition: {
-                ease: "easeIn"
-            }
-        },
-        disabled: {
-            backgroundColor: themeValues.disabledBackground
-        }
-    });
-    var ToggleSwitchMiddleRing = posed(ToggleSwitchMiddleRingComponent)({
-        off: {
-            backgroundColor: themeValues.white,
-            left: "2px",
-            top: "2px",
-            bottom: "2px",
-            right: "24px",
-            transition: {
-                ease: "backIn"
-            }
-        },
-        on: {
-            backgroundColor: themeValues.white,
-            right: "2px",
-            top: "2px",
-            bottom: "2px",
-            left: "24px",
-            transition: {
-                ease: "backIn"
-            }
-        },
-        disabled: {
-            backgroundColor: themeValues.white,
-            left: "2px",
-            top: "2px",
-            bottom: "2px",
-            right: "24px"
-        }
-    });
-    var VisibleSwitch = posed(VisibleSwitchComponent)({
-        focusable: true,
-        hoverable: true,
-        pressable: true,
-        focus: {
-            outline: "0px ridge rgba(170, 50, 220, 0)",
-            boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
-        },
-        hover: {
-            boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
-        },
-        off: {
-            backgroundColor: themeValues.offBackground,
-            transition: {
-                ease: "easeOut"
-            }
-        },
-        on: {
-            backgroundColor: themeValues.onBackground,
-            transition: {
-                ease: "easeIn"
-            }
-        },
-        disabled: {
-            backgroundColor: themeValues.disabledBackground
-        }
-    });
-    var handleKeyDown = function (e) {
-        if (e.keyCode === 13) {
-            onToggle();
-        }
-    };
-    return (React.createElement(Box, { padding: "0", extraStyles: labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles },
-        React.createElement(Center, null,
-            React.createElement(Cluster, { justify: "stretch", align: "center" },
-                React.createElement(Cover, { minHeight: "100%", singleChild: true },
-                    React.createElement(Box, { minWidth: "100%", padding: "0", extraStyles: "display: flex; align-items: center;", dataQa: dataQa },
-                        React.createElement(HiddenToggleSwitchBox, { "aria-label": name, checked: isOn, onChange: disabled ? noop : onToggle, disabled: disabled, id: "#toggle-".concat(name), isMobile: isMobile }),
-                        React.createElement(VisibleSwitch, { name: name, htmlFor: "#toggle-".concat(name), onClick: disabled ? noop : onToggle, onKeyDown: disabled ? noop : handleKeyDown, pose: disabled ? "disabled" : isOn ? "on" : "off", tabIndex: disabled ? -1 : 0, disabled: disabled, isMobile: isMobile },
-                            React.createElement(ToggleSwitchMiddleRing, null,
-                                React.createElement(ToggleSwitchInnerRing, null))))),
-                label && (React.createElement(Heading, { variant: "h4", weight: FONT_WEIGHT_SEMIBOLD, extraStyles: "margin: 0 0.5rem; position: relative; bottom: 1px; display: inline-block;", color: CHARADE_GREY }, label))))));
-};
-export default themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/components/atoms/toggle-switch/ToggleSwitch.stories.d.ts

@@ -1,7 +0,0 @@
-export function toggleSwitchDefault(): JSX.Element;
-export default story;
-declare const story: {
-    title: any;
-    component: any;
-    decorators: ((storyFn: any) => JSX.Element)[];
-};

package/dist/src/components/atoms/toggle-switch/ToggleSwitch.stories.js

@@ -1,15 +0,0 @@
-import React, { useState, Fragment } from "react";
-import { boolean } from "@storybook/addon-knobs";
-import ToggleSwitch from "./ToggleSwitch";
-import page from "../../../../.storybook/page";
-export var toggleSwitchDefault = function () {
-    var _a = useState(false), isOn = _a[0], onToggle = _a[1];
-    var disabled = boolean("disabled", false, "props");
-    return (React.createElement(Fragment, null,
-        React.createElement(ToggleSwitch, { name: "toggle-switch", label: "Toggle Switch Label", isOn: isOn, onToggle: function () { return onToggle(!isOn); }, disabled: disabled })));
-};
-var story = page({
-    title: "Components|Atoms/ToggleSwitch",
-    Component: ToggleSwitch
-});
-export default story;

package/dist/src/components/atoms/toggle-switch/ToggleSwitch.theme.d.ts

@@ -1,15 +0,0 @@
-export namespace fallbackValues {
-    export { onBackground };
-    export { disabledBackground };
-    export { white };
-    export { offBackground };
-    export { rightLabelStyles };
-    export { leftLabelStyles };
-}
-declare const onBackground: string;
-declare const disabledBackground: string;
-declare const white: string;
-declare const offBackground: string;
-declare const rightLabelStyles: string;
-declare const leftLabelStyles: string;
-export {};

package/dist/src/components/atoms/toggle-switch/ToggleSwitch.theme.js

@@ -1,16 +0,0 @@
-import { WHITE, REGENT_GREY, IRON_GREY, MATISSE_BLUE } from "../../../constants/colors";
-var onBackground = "".concat(MATISSE_BLUE);
-var disabledBackground = "".concat(IRON_GREY);
-var white = "".concat(WHITE);
-var offBackground = "".concat(REGENT_GREY);
-var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
-var rightLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row;\n");
-var leftLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row-reverse;\n");
-export var fallbackValues = {
-    onBackground: onBackground,
-    disabledBackground: disabledBackground,
-    white: white,
-    offBackground: offBackground,
-    rightLabelStyles: rightLabelStyles,
-    leftLabelStyles: leftLabelStyles
-};

package/dist/src/components/atoms/toggle-switch/index.d.ts

@@ -1,2 +0,0 @@
-export default ToggleSwitch;
-import ToggleSwitch from "./ToggleSwitch";

package/dist/src/components/atoms/toggle-switch/index.js

@@ -1,2 +0,0 @@
-import ToggleSwitch from "./ToggleSwitch";
-export default ToggleSwitch;

package/dist/src/components/atoms/typeahead-input/TypeaheadIinput.stories.d.ts

@@ -1,7 +0,0 @@
-export function text(): JSX.Element;
-export default story;
-declare const story: {
-    title: any;
-    component: any;
-    decorators: ((storyFn: any) => JSX.Element)[];
-};