@thecb/components 7.3.1 → 7.3.2-beta.2

package/dist/src/components/atoms/country-dropdown/options.js

@@ -0,0 +1,249 @@
+export var options = [
+    { text: "Afghanistan", value: "AF" },
+    { text: "Aland Islands", value: "AX" },
+    { text: "Albania", value: "AL" },
+    { text: "Algeria", value: "DZ" },
+    { text: "American Samoa", value: "AS" },
+    { text: "Andorra", value: "AD" },
+    { text: "Angola", value: "AO" },
+    { text: "Anguilla", value: "AI" },
+    { text: "Antarctica", value: "AQ" },
+    { text: "Antigua and Barbuda", value: "AG" },
+    { text: "Argentina", value: "AR" },
+    { text: "Armenia", value: "AM" },
+    { text: "Aruba", value: "AW" },
+    { text: "Australia", value: "AU" },
+    { text: "Austria", value: "AT" },
+    { text: "Azerbaijan", value: "AZ" },
+    { text: "Bahamas", value: "BS" },
+    { text: "Bahrain", value: "BH" },
+    { text: "Bangladesh", value: "BD" },
+    { text: "Barbados", value: "BB" },
+    { text: "Belarus", value: "BY" },
+    { text: "Belgium", value: "BE" },
+    { text: "Belize", value: "BZ" },
+    { text: "Benin", value: "BJ" },
+    { text: "Bermuda", value: "BM" },
+    { text: "Bhutan", value: "BT" },
+    { text: "Bolivia", value: "BO" },
+    { text: "Bosnia and Herzegovina", value: "BA" },
+    { text: "Botswana", value: "BW" },
+    { text: "Bouvet Island", value: "BV" },
+    { text: "Brazil", value: "BR" },
+    { text: "British Virgin Islands", value: "VG" },
+    { text: "British Indian Ocean Territory", value: "IO" },
+    { text: "Brunei Darussalam", value: "BN" },
+    { text: "Bulgaria", value: "BG" },
+    { text: "Burkina Faso", value: "BF" },
+    { text: "Burundi", value: "BI" },
+    { text: "Cambodia", value: "KH" },
+    { text: "Cameroon", value: "CM" },
+    { text: "Canada", value: "CA" },
+    { text: "Cape Verde", value: "CV" },
+    { text: "Cayman Islands", value: "KY" },
+    { text: "Central African Republic", value: "CF" },
+    { text: "Chad", value: "TD" },
+    { text: "Chile", value: "CL" },
+    { text: "China", value: "CN" },
+    { text: "Hong Kong, SAR China", value: "HK" },
+    { text: "Macao, SAR China", value: "MO" },
+    { text: "Christmas Island", value: "CX" },
+    { text: "Cocos (Keeling) Islands", value: "CC" },
+    { text: "Colombia", value: "CO" },
+    { text: "Comoros", value: "KM" },
+    { text: "Congo, (Brazzaville)", value: "CG" },
+    { text: "Congo, (Kinshasa)", value: "CD" },
+    { text: "Cook Islands", value: "CK" },
+    { text: "Costa Rica", value: "CR" },
+    { text: "Côte d'Ivoire", value: "CI" },
+    { text: "Croatia", value: "HR" },
+    { text: "Cuba", value: "CU" },
+    { text: "Cyprus", value: "CY" },
+    { text: "Czech Republic", value: "CZ" },
+    { text: "Denmark", value: "DK" },
+    { text: "Djibouti", value: "DJ" },
+    { text: "Dominica", value: "DM" },
+    { text: "Dominican Republic", value: "DO" },
+    { text: "Ecuador", value: "EC" },
+    { text: "Egypt", value: "EG" },
+    { text: "El Salvador", value: "SV" },
+    { text: "Equatorial Guinea", value: "GQ" },
+    { text: "Eritrea", value: "ER" },
+    { text: "Estonia", value: "EE" },
+    { text: "Ethiopia", value: "ET" },
+    { text: "Falkland Islands (Malvinas)", value: "FK" },
+    { text: "Faroe Islands", value: "FO" },
+    { text: "Fiji", value: "FJ" },
+    { text: "Finland", value: "FI" },
+    { text: "France", value: "FR" },
+    { text: "French Guiana", value: "GF" },
+    { text: "French Polynesia", value: "PF" },
+    { text: "French Southern Territories", value: "TF" },
+    { text: "Gabon", value: "GA" },
+    { text: "Gambia", value: "GM" },
+    { text: "Georgia", value: "GE" },
+    { text: "Germany", value: "DE" },
+    { text: "Ghana", value: "GH" },
+    { text: "Gibraltar", value: "GI" },
+    { text: "Greece", value: "GR" },
+    { text: "Greenland", value: "GL" },
+    { text: "Grenada", value: "GD" },
+    { text: "Guadeloupe", value: "GP" },
+    { text: "Guam", value: "GU" },
+    { text: "Guatemala", value: "GT" },
+    { text: "Guernsey", value: "GG" },
+    { text: "Guinea", value: "GN" },
+    { text: "Guinea-Bissau", value: "GW" },
+    { text: "Guyana", value: "GY" },
+    { text: "Haiti", value: "HT" },
+    { text: "Heard and Mcdonald Islands", value: "HM" },
+    { text: "Holy See (Vatican City State)", value: "VA" },
+    { text: "Honduras", value: "HN" },
+    { text: "Hungary", value: "HU" },
+    { text: "Iceland", value: "IS" },
+    { text: "India", value: "IN" },
+    { text: "Indonesia", value: "ID" },
+    { text: "Iran, Islamic Republic of", value: "IR" },
+    { text: "Iraq", value: "IQ" },
+    { text: "Ireland", value: "IE" },
+    { text: "Isle of Man", value: "IM" },
+    { text: "Israel", value: "IL" },
+    { text: "Italy", value: "IT" },
+    { text: "Jamaica", value: "JM" },
+    { text: "Japan", value: "JP" },
+    { text: "Jersey", value: "JE" },
+    { text: "Jordan", value: "JO" },
+    { text: "Kazakhstan", value: "KZ" },
+    { text: "Kenya", value: "KE" },
+    { text: "Kiribati", value: "KI" },
+    { text: "Korea (North)", value: "KP" },
+    { text: "Korea (South)", value: "KR" },
+    { text: "Kuwait", value: "KW" },
+    { text: "Kyrgyzstan", value: "KG" },
+    { text: "Lao PDR", value: "LA" },
+    { text: "Latvia", value: "LV" },
+    { text: "Lebanon", value: "LB" },
+    { text: "Lesotho", value: "LS" },
+    { text: "Liberia", value: "LR" },
+    { text: "Libya", value: "LY" },
+    { text: "Liechtenstein", value: "LI" },
+    { text: "Lithuania", value: "LT" },
+    { text: "Luxembourg", value: "LU" },
+    { text: "Macedonia, Republic of", value: "MK" },
+    { text: "Madagascar", value: "MG" },
+    { text: "Malawi", value: "MW" },
+    { text: "Malaysia", value: "MY" },
+    { text: "Maldives", value: "MV" },
+    { text: "Mali", value: "ML" },
+    { text: "Malta", value: "MT" },
+    { text: "Marshall Islands", value: "MH" },
+    { text: "Martinique", value: "MQ" },
+    { text: "Mauritania", value: "MR" },
+    { text: "Mauritius", value: "MU" },
+    { text: "Mayotte", value: "YT" },
+    { text: "Mexico", value: "MX" },
+    { text: "Micronesia, Federated States of", value: "FM" },
+    { text: "Moldova", value: "MD" },
+    { text: "Monaco", value: "MC" },
+    { text: "Mongolia", value: "MN" },
+    { text: "Montenegro", value: "ME" },
+    { text: "Montserrat", value: "MS" },
+    { text: "Morocco", value: "MA" },
+    { text: "Mozambique", value: "MZ" },
+    { text: "Myanmar", value: "MM" },
+    { text: "Namibia", value: "NA" },
+    { text: "Nauru", value: "NR" },
+    { text: "Nepal", value: "NP" },
+    { text: "Netherlands", value: "NL" },
+    { text: "Netherlands Antilles", value: "AN" },
+    { text: "New Caledonia", value: "NC" },
+    { text: "New Zealand", value: "NZ" },
+    { text: "Nicaragua", value: "NI" },
+    { text: "Niger", value: "NE" },
+    { text: "Nigeria", value: "NG" },
+    { text: "Niue", value: "NU" },
+    { text: "Norfolk Island", value: "NF" },
+    { text: "Northern Mariana Islands", value: "MP" },
+    { text: "Norway", value: "NO" },
+    { text: "Oman", value: "OM" },
+    { text: "Pakistan", value: "PK" },
+    { text: "Palau", value: "PW" },
+    { text: "Palestinian Territory", value: "PS" },
+    { text: "Panama", value: "PA" },
+    { text: "Papua New Guinea", value: "PG" },
+    { text: "Paraguay", value: "PY" },
+    { text: "Peru", value: "PE" },
+    { text: "Philippines", value: "PH" },
+    { text: "Pitcairn", value: "PN" },
+    { text: "Poland", value: "PL" },
+    { text: "Portugal", value: "PT" },
+    { text: "Puerto Rico", value: "PR" },
+    { text: "Qatar", value: "QA" },
+    { text: "Réunion", value: "RE" },
+    { text: "Romania", value: "RO" },
+    { text: "Russian Federation", value: "RU" },
+    { text: "Rwanda", value: "RW" },
+    { text: "Saint-Barthélemy", value: "BL" },
+    { text: "Saint Helena", value: "SH" },
+    { text: "Saint Kitts and Nevis", value: "KN" },
+    { text: "Saint Lucia", value: "LC" },
+    { text: "Saint-Martin (French part)", value: "MF" },
+    { text: "Saint Pierre and Miquelon", value: "PM" },
+    { text: "Saint Vincent and Grenadines", value: "VC" },
+    { text: "Samoa", value: "WS" },
+    { text: "San Marino", value: "SM" },
+    { text: "Sao Tome and Principe", value: "ST" },
+    { text: "Saudi Arabia", value: "SA" },
+    { text: "Senegal", value: "SN" },
+    { text: "Serbia", value: "RS" },
+    { text: "Seychelles", value: "SC" },
+    { text: "Sierra Leone", value: "SL" },
+    { text: "Singapore", value: "SG" },
+    { text: "Slovakia", value: "SK" },
+    { text: "Slovenia", value: "SI" },
+    { text: "Solomon Islands", value: "SB" },
+    { text: "Somalia", value: "SO" },
+    { text: "South Africa", value: "ZA" },
+    { text: "South Georgia and the South Sandwich Islands", value: "GS" },
+    { text: "South Sudan", value: "SS" },
+    { text: "Spain", value: "ES" },
+    { text: "Sri Lanka", value: "LK" },
+    { text: "Sudan", value: "SD" },
+    { text: "Suriname", value: "SR" },
+    { text: "Svalbard and Jan Mayen Islands", value: "SJ" },
+    { text: "Swaziland", value: "SZ" },
+    { text: "Sweden", value: "SE" },
+    { text: "Switzerland", value: "CH" },
+    { text: "Syrian Arab Republic (Syria)", value: "SY" },
+    { text: "Taiwan, Republic of China", value: "TW" },
+    { text: "Tajikistan", value: "TJ" },
+    { text: "Tanzania, United Republic of", value: "TZ" },
+    { text: "Thailand", value: "TH" },
+    { text: "Timor-Leste", value: "TL" },
+    { text: "Togo", value: "TG" },
+    { text: "Tokelau", value: "TK" },
+    { text: "Tonga", value: "TO" },
+    { text: "Trinidad and Tobago", value: "TT" },
+    { text: "Tunisia", value: "TN" },
+    { text: "Turkey", value: "TR" },
+    { text: "Turkmenistan", value: "TM" },
+    { text: "Turks and Caicos Islands", value: "TC" },
+    { text: "Tuvalu", value: "TV" },
+    { text: "Uganda", value: "UG" },
+    { text: "Ukraine", value: "UA" },
+    { text: "United Arab Emirates", value: "AE" },
+    { text: "United Kingdom", value: "GB" },
+    { text: "United States of America", value: "US" },
+    { text: "US Minor Outlying Islands", value: "UM" },
+    { text: "Uruguay", value: "UY" },
+    { text: "Uzbekistan", value: "UZ" },
+    { text: "Vanuatu", value: "VU" },
+    { text: "Venezuela (Bolivarian Republic)", value: "VE" },
+    { text: "Viet Nam", value: "VN" },
+    { text: "Virgin Islands, US", value: "VI" },
+    { text: "Wallis and Futuna Islands", value: "WF" },
+    { text: "Western Sahara", value: "EH" },
+    { text: "Yemen", value: "YE" },
+    { text: "Zambia", value: "ZM" },
+    { text: "Zimbabwe", value: "ZW" }
+];

package/dist/src/components/atoms/detail/Detail.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/detail/Detail.js

@@ -0,0 +1,63 @@
+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 { DetailText } from "./Detail.styled";
+import { safeChildren } from "../../../util/general";
+import { fallbackValues, mobileFallbackValues, MOBILE_BREAKPOINT } from "./Detail.theme";
+import { themeComponent } from "../../../util/themeUtils";
+/*
+  New responsive text component for Detail elements
+  (Block level text elements which are smaller than "Title" elements)
+  Size is decoupled from tag
+  Comes with four variants - "large", "regular", "small", "extraSmall"
+  Large variant results in text that is 1.125rem/1.1428rem (18px desktop, 16px mobile)
+  Regular variant results in text that is 1rem (16px desktop, 14px mobile)
+  Small variant reuslts in text that is 0.875rem/0.8571rem (14px desktop, 12px mobile)
+  ExtraSmall variant results in text that is 0.75rem/0.7142rem (12px desktop, 10px mobile)
+  
+  If you need a larger font size, use the <Title /> atom, which has larger 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 Detail.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 all of the 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 Detail = 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 ? "regular" : _f, _g = _a.as, as = _g === void 0 ? "p" : _g, dataQa = _a.dataQa, children = _a.children, rest = __rest(_a, ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"]);
+    return (React.createElement(DetailText, __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(Detail, "Detail", fallbacks, "regular");

package/dist/src/components/atoms/detail/Detail.styled.d.ts

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

package/dist/src/components/atoms/detail/Detail.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 DetailText = styled.p(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/detail/Detail.theme.d.ts

@@ -0,0 +1,36 @@
+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 regular: string;
+    const small: string;
+    const extraSmall: string;
+}
+declare namespace fontSize {
+    const large_1: string;
+    export { large_1 as large };
+    const regular_1: string;
+    export { regular_1 as regular };
+    const small_1: string;
+    export { small_1 as small };
+    const extraSmall_1: string;
+    export { extraSmall_1 as extraSmall };
+}
+declare namespace mobileFontSize {
+    const large_2: string;
+    export { large_2 as large };
+    const regular_2: string;
+    export { regular_2 as regular };
+    const small_2: string;
+    export { small_2 as small };
+    const extraSmall_2: string;
+    export { extraSmall_2 as extraSmall };
+}
+export {};

package/dist/src/components/atoms/detail/Detail.theme.js

@@ -0,0 +1,28 @@
+// Comments assume desktop base font size of 16px, mobile base font size of 14px
+var fontSize = {
+    large: "1.125rem",
+    regular: "1rem",
+    small: "0.875rem",
+    extraSmall: "0.75rem" // 12px
+};
+var fontFamily = {
+    large: "Public Sans",
+    regular: "Public Sans",
+    small: "Public Sans",
+    extraSmall: "Public Sans"
+};
+var mobileFontSize = {
+    large: "1.14285rem",
+    regular: "1",
+    small: "0.85714rem",
+    extraSmall: "0.71428rem" // 10px
+};
+export var fallbackValues = {
+    fontFamily: fontFamily,
+    fontSize: fontSize
+};
+export var mobileFallbackValues = {
+    fontFamily: fontFamily,
+    fontSize: mobileFontSize
+};
+export var MOBILE_BREAKPOINT = 768;

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

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

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

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

package/dist/src/components/atoms/display-box/DisplayBox.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/display-box/DisplayBox.js

@@ -0,0 +1,11 @@
+import React from "react";
+import Box from "../layouts/Box";
+import { fallbackValues } from "./DisplayBox.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { RED } from "../../../constants/colors";
+var DisplayBox = function (_a) {
+    var children = _a.children, themeValues = _a.themeValues, showError = _a.showError;
+    return (React.createElement(Box, { padding: "0.5rem 0 1.5rem 0" },
+        React.createElement(Box, { padding: "1.5rem", background: themeValues.backgroundColor, borderSize: showError && "1px", borderColor: showError && RED, borderRadius: "4px", boxShadow: themeValues.boxShadow }, children)));
+};
+export default themeComponent(DisplayBox, "DisplayBox", fallbackValues);

package/dist/src/components/atoms/display-box/DisplayBox.stories.d.ts

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

package/dist/src/components/atoms/display-box/DisplayBox.stories.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { boolean } from "@storybook/addon-knobs";
+import DisplayBox from "./DisplayBox";
+import FormattedAddress from "../formatted-address";
+import page from "../../../../.storybook/page";
+export var displayBox = function () { return (React.createElement(DisplayBox, { showError: boolean("showError", false, "props") },
+    React.createElement(FormattedAddress, { qaPrefix: "billing-info", name: "Citybase", street1: "30 North Lasalle", city: "Chicago", country: "USA", stateProvince: "Illinois", zip: "60606" }))); };
+var story = page({
+    title: "Components|Atoms/DisplayBox",
+    Component: DisplayBox
+});
+export default story;

package/dist/src/components/atoms/display-box/DisplayBox.theme.d.ts

@@ -0,0 +1,7 @@
+export namespace fallbackValues {
+    export { backgroundColor };
+    export { boxShadow };
+}
+declare const backgroundColor: "#FFFFFF";
+declare const boxShadow: string;
+export {};

package/dist/src/components/atoms/display-box/DisplayBox.theme.js

@@ -0,0 +1,7 @@
+import { GHOST_GREY, ATHENS_GREY, WHITE } from "../../../constants/colors";
+var backgroundColor = WHITE;
+var boxShadow = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
+export var fallbackValues = {
+    backgroundColor: backgroundColor,
+    boxShadow: boxShadow
+};

package/dist/src/components/atoms/display-box/index.d.ts

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

package/dist/src/components/atoms/display-box/index.js

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

package/dist/src/components/atoms/display-card/DisplayCard.d.ts

@@ -0,0 +1,9 @@
+export default DisplayCard;
+declare function DisplayCard({ title, item, buttonText, buttonAction, url, link }: {
+    title: any;
+    item: any;
+    buttonText: any;
+    buttonAction: any;
+    url: any;
+    link?: boolean | undefined;
+}): JSX.Element;

package/dist/src/components/atoms/display-card/DisplayCard.js

@@ -0,0 +1,22 @@
+import React, { Fragment } from "react";
+import Stack from "../layouts/Stack";
+import Box from "../layouts/Box";
+import Text from "../text";
+import Paragraph from "../paragraph";
+import Cluster from "../layouts/Cluster";
+import ButtonWithAction from "../button-with-action";
+import ButtonWithLink from "../button-with-link";
+import { WHITE, CHARADE_GREY } from "../../../constants/colors";
+var DisplayCard = function (_a) {
+    var title = _a.title, item = _a.item, buttonText = _a.buttonText, buttonAction = _a.buttonAction, url = _a.url, _b = _a.link, link = _b === void 0 ? false : _b;
+    return (React.createElement(Box, { padding: "0 0 16px" },
+        React.createElement(Stack, { childGap: "0rem" },
+            React.createElement(Box, { padding: "0 0 8px 0" },
+                React.createElement(Paragraph, { variant: "pL", color: CHARADE_GREY, extraStyles: "letter-spacing: 0.29px" }, title)),
+            React.createElement(Box, { padding: "0" },
+                React.createElement(Box, { padding: "24px", borderSize: "1px", borderRadius: "4px", background: WHITE, boxShadow: "0px 2px 14px 0px rgb(246, 246, 249),\n            0px 3px 8px 0px rgb(202, 206, 216)" },
+                    React.createElement(Cluster, { justify: "space-between", align: "center" },
+                        React.createElement(Text, { variant: "p", color: CHARADE_GREY }, item),
+                        link ? (React.createElement(ButtonWithLink, { text: buttonText, url: url, variant: "smallGhost", dataQa: buttonText, extraStyles: "min-width: 0;" })) : buttonAction ? (React.createElement(ButtonWithAction, { text: buttonText, action: buttonAction, variant: "smallGhost", dataQa: buttonText, extraStyles: "min-width: 0;" })) : (React.createElement(Fragment, null))))))));
+};
+export default DisplayCard;

package/dist/src/components/atoms/display-card/DisplayCard.stories.d.ts

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

package/dist/src/components/atoms/display-card/DisplayCard.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+import DisplayCard from "./DisplayCard";
+import page from "../../../../.storybook/page";
+var story = page({
+    title: "Components|Atoms/DisplayCard",
+    Component: DisplayCard
+});
+export default story;
+export var displayCard = function () { return (React.createElement(DisplayCard, { title: text("title", "Title", "props"), buttonText: text("buttonText", "Lorem", "props"), url: text("url", "http://google.com", "props"), link: boolean("link", false, "props"), buttonAction: text("buttonAction", function () { }, "props"), item: text("item", "Foo", "props") }, text("children", "Lorem Ipsum", "props"))); };

package/dist/src/components/atoms/display-card/index.d.ts

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

package/dist/src/components/atoms/display-card/index.js

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

package/dist/src/components/atoms/dropdown/Dropdown.d.ts

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