@thecb/components 7.3.1 → 7.3.2-beta.2

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,23 @@
+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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,17 @@
+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

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

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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,24 @@
+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

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

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

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

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

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

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

@@ -0,0 +1,60 @@
+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

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

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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,22 @@
+// 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

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

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

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

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

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

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

@@ -0,0 +1,126 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,16 @@
+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

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

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

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

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

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