td-stylekit 24.6.0 → 24.8.1

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn pretty-quick --staged && yarn build:icons:types && git add src/Icon/staticTypes.ts

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [24.8.1](https://github.com/treasure-data/td-stylekit/compare/v24.8.0...v24.8.1) (2022-01-21)
+
+
+### Bug Fixes
+
+* **CON-9130:**  Added dark version of the TD Logo ([#1214](https://github.com/treasure-data/td-stylekit/issues/1214)) ([4d58762](https://github.com/treasure-data/td-stylekit/commit/4d58762))
+
+# [24.8.0](https://github.com/treasure-data/td-stylekit/compare/v24.7.0...v24.8.0) (2022-01-14)
+
+
+### Features
+
+* **CON-9007:** Add navigation tree for Marketplace Listing ([#1216](https://github.com/treasure-data/td-stylekit/issues/1216)) ([4b4ae28](https://github.com/treasure-data/td-stylekit/commit/4b4ae28))
+
+# [24.7.0](https://github.com/treasure-data/td-stylekit/compare/v24.6.1...v24.7.0) (2022-01-12)
+
+
+### Features
+
+* **CON-8883:** Set StyledSelectorPopover width by variant prop ([#1206](https://github.com/treasure-data/td-stylekit/issues/1206)) ([04ff7f8](https://github.com/treasure-data/td-stylekit/commit/04ff7f8))
+
+## [24.6.1](https://github.com/treasure-data/td-stylekit/compare/v24.6.0...v24.6.1) (2022-01-06)
+
+
+### Bug Fixes
+
+* **CON-9087:** Prevent adding Toggle props as HTML attributes ([#1210](https://github.com/treasure-data/td-stylekit/issues/1210)) ([67266de](https://github.com/treasure-data/td-stylekit/commit/67266de))
+
 # [24.6.0](https://github.com/treasure-data/td-stylekit/compare/v24.5.0...v24.6.0) (2021-12-21)
 
 

package/dist/es/Box/Box.d.ts

@@ -110,14 +110,14 @@ declare const Box: import("@emotion/styled-base").StyledComponent<import("react"
         LightPrimary: string;
         LightSecondary: string;
         BorderGrey: string;
-        Blue: string;
+        Blue: string; /** How to align the contents along the cross axis. */
         BlueFade: string;
         Green: string;
         GreenFade: string;
         GreenBackground: string;
         Red: string;
         RedFade: string;
-        Yellow: string; /** How to align the contents when there is extra space in the cross axis.  */
+        Yellow: string;
         YellowFade: string;
         YellowHighlight: string;
         Orange: string;
@@ -129,18 +129,18 @@ declare const Box: import("@emotion/styled-base").StyledComponent<import("react"
         DraggableDraggingBackground: string;
         Aquamarine: string;
         Azure: string;
-        AzureNew: string; /** How to align the contents along the main axis. */
+        AzureNew: string;
         AzureFade: string;
         AzureHighlight: string;
         Silver: string;
         BlueNavy: string;
         Black: string;
         TurquoiseBlue: string;
-        SummerSky: string;
+        SummerSky: string; /** Whether to reverse the order of the child components. */
         Mondo: string;
         HeavyMetal: string;
         BokaraGrey: string;
-        Cyan: string; /** Whether to reverse the order of the child components. */
+        Cyan: string;
         Eucalyptus: string;
         Flamingo: string;
         Zorba: string;

package/dist/es/Grid/Grid.d.ts

@@ -51,7 +51,7 @@ declare const Grid: import("@emotion/styled-base").StyledComponent<import("react
     readonly borderWidth: string[];
     readonly grid: number[];
     readonly shadows: {
-        small: string; /** Aligns grid along the row axis https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content */
+        small: string;
         big: string;
         pill: string;
         bigCentered: string;
@@ -69,7 +69,7 @@ declare const Grid: import("@emotion/styled-base").StyledComponent<import("react
         SecondaryNavActiveItem: number;
         PrimaryNav: number;
         PopOver: number;
-        PageHeaderSearch: number; /** Passing in a number gives the specified number of rows at 1fr, and passing in a string gives a more customized value https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows */
+        PageHeaderSearch: number;
         Modal: number;
         Tether: number;
         GlobalNav: number;

package/dist/es/Icon/staticTypes.d.ts

@@ -63,6 +63,7 @@ export declare type IconTypes = {
     Edit: React.ComponentType<JSX.IntrinsicElements['svg']>;
     EditIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     EmptyColumns: React.ComponentType<JSX.IntrinsicElements['svg']>;
+    EmptyColumnsIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     Exclamation: React.ComponentType<JSX.IntrinsicElements['svg']>;
     ExclamationIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     Exit: React.ComponentType<JSX.IntrinsicElements['svg']>;
@@ -328,6 +329,7 @@ export declare type IconTypes = {
     SystemToggle: React.ComponentType<JSX.IntrinsicElements['svg']>;
     SystemToggleIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     Tag: React.ComponentType<JSX.IntrinsicElements['svg']>;
+    TagIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     Toggle: React.ComponentType<JSX.IntrinsicElements['svg']>;
     ToggleIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     ToolAddFile: React.ComponentType<JSX.IntrinsicElements['svg']>;
@@ -560,6 +562,8 @@ export declare type IconTypes = {
     TypeIntIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     TypeString: React.ComponentType<JSX.IntrinsicElements['svg']>;
     TypeStringIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
+    Upload: React.ComponentType<JSX.IntrinsicElements['svg']>;
+    UploadIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     User: React.ComponentType<JSX.IntrinsicElements['svg']>;
     UserIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     Utilization: React.ComponentType<JSX.IntrinsicElements['svg']>;

package/dist/es/Icon/types.js

@@ -1219,6 +1219,10 @@ React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
 React.createElement("path", {
   d: "M8 6a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2V8a2 2 0 00-2-2H8zm1 3a1 1 0 000 2h1.699a.3.3 0 01.3.298L11 11.5V15a1 1 0 102 0v-3.697a.3.3 0 01.3-.3c.687-.003.588-.003-.296-.003H15a1 1 0 100-2H9z",
   fillRule: "evenodd"
+}),Upload: /*#__PURE__*/
+React.createElement("path", {
+  d: "M5.667 4.496A1 1 0 016.531 4H17.47a1 1 0 01.863.496l1.532 2.625a1 1 0 01.136.504v10.5C20 19.16 19.16 20 18.125 20H5.875A1.875 1.875 0 014 18.125v-10.5a1 1 0 01.136-.504l1.531-2.625zM7.106 6L6 7.895v.058h12v-.058L16.894 6H7.106zm1.929 6.134l2.4-2.4a.8.8 0 011.13 0l2.4 2.4a.8.8 0 01-.564 1.366H13v3a1 1 0 01-2 0v-3H9.6a.8.8 0 01-.566-1.366z",
+  fillRule: "evenodd"
 }),User: /*#__PURE__*/
 React.createElement("path", {
   d: "M15.818 8.5a3.817 3.817 0 10-7.635 0v.637a3.817 3.817 0 107.635 0V8.5zm2.943 8.965c-.941-1.223-4.212-2.721-6.76-2.721-2.55 0-5.82 1.498-6.762 2.721-.581.757-.027 1.852.927 1.852h11.668c.954 0 1.508-1.095.927-1.852z"

package/dist/es/Logo/Logo.d.ts

@@ -1,14 +1,21 @@
 /// <reference types="react" />
-declare type LogoTDProps = {
+export declare type LogoVariants = 'themed' | 'light' | 'dark' | 'v4';
+export declare type LogoTDProps = {
+    /** CSS class to apply to the overall SVG */
     className?: string;
+    /** Width of the logo */
     width?: number | string;
+    /** Height of the logo */
     height?: number | string;
+    /** Variant of the logo to display */
+    variant?: LogoVariants;
 };
-declare function LogoTD({ className, width, height }: LogoTDProps): JSX.Element;
+declare function LogoTD({ className, width, height, variant }: LogoTDProps): JSX.Element;
 declare namespace LogoTD {
     var defaultProps: {
         width: number;
         height: number;
+        variant: string;
     };
 }
 export default LogoTD;

package/dist/es/Logo/Logo.js

@@ -1,254 +1,75 @@
 import { jsx as ___EmotionJSX } from "@emotion/core";
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
+
+/*
+  Logo component
+*/
 import React from 'react';
 import { useTheme } from 'emotion-theming';
-export default function LogoTD(_ref) {
+import LogoV4 from './LogoV4';
+import LogoLight from './LogoLight';
+import LogoDark from './LogoDark';
+
+function LogoTD(_ref) {
   var className = _ref.className,
       width = _ref.width,
-      height = _ref.height;
-  var theme = useTheme();
-  return theme.name === 'v4' ? ___EmotionJSX("svg", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg"),
-    className: className,
-    width: width,
-    height: height,
-    viewBox: "0 0 353.6 237.4"
-  }, ___EmotionJSX("defs", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs")
-  }, ___EmotionJSX("linearGradient", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient"),
-    id: "SVGID_1_",
-    gradientUnits: "userSpaceOnUse",
-    x1: "2.362120e-03",
-    y1: "118.8676",
-    x2: "353.584",
-    y2: "118.8676"
-  }, ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "0",
-    stopColor: "#1DAEDA"
-  }), ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "1",
-    stopColor: "#0FA0CB"
-  })), ___EmotionJSX("linearGradient", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient"),
-    id: "SVGID_2_",
-    gradientUnits: "userSpaceOnUse",
-    x1: "58.216",
-    y1: "51.51",
-    x2: "295.9319",
-    y2: "51.51"
-  }, ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "0",
-    stopColor: "#26B7E3"
-  }), ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "1",
-    stopColor: "#18A9D4"
-  })), ___EmotionJSX("linearGradient", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient"),
-    id: "SVGID_3_",
-    gradientUnits: "userSpaceOnUse",
-    x1: "226.5078",
-    y1: "51.9693",
-    x2: "353.5605",
-    y2: "51.9693"
-  }, ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "0",
-    stopColor: "#3ECFFB"
-  }), ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "0.4669",
-    stopColor: "#2ABBE6"
-  }), ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "0.9249",
-    stopColor: "#12A3CE"
-  })), ___EmotionJSX("linearGradient", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient"),
-    id: "SVGID_4_",
-    gradientUnits: "userSpaceOnUse",
-    x1: "3.213214e-02",
-    y1: "51.8688",
-    x2: "226.5078",
-    y2: "51.8688"
-  }, ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "0",
-    stopColor: "#1DAEDA"
-  }), ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "1",
-    stopColor: "#0FA0CB"
-  })), ___EmotionJSX("linearGradient", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient"),
-    id: "SVGID_5_",
-    gradientUnits: "userSpaceOnUse",
-    x1: "177.8656",
-    y1: "149.2371",
-    x2: "353.4923",
-    y2: "149.2371"
-  }, ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "0",
-    stopColor: "#10A1CD"
-  }), ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "1",
-    stopColor: "#0798C4"
-  })), ___EmotionJSX("linearGradient", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient"),
-    id: "SVGID_6_",
-    gradientUnits: "userSpaceOnUse",
-    x1: "59.8041",
-    y1: "165.8567",
-    x2: "212.2605",
-    y2: "77.8359"
-  }, ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "0",
-    stopColor: "#0FA0CC"
-  }), ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "0.5867",
-    stopColor: "#0686AE"
-  }), ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "0.9435",
-    stopColor: "#027BA1"
-  }))), ___EmotionJSX("g", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "g")
-  }, ___EmotionJSX("path", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "g", "path"),
-    fill: "url(#SVGID_1_)",
-    d: "M53.2,4.4L2,55.5c-2.7,2.7-2.7,7.1,0,9.8l169.9,169.9c2.7,2.7,7.1,2.7,9.8,0L351.6,65.3c2.7-2.7,2.7-7.1,0-9.8L300.4,4.4c-2.5-2.5-5.8-3.8-9.3-3.8H62.4C59,0.5,55.6,1.9,53.2,4.4z"
-  }), ___EmotionJSX("path", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "g", "path"),
-    fill: "url(#SVGID_2_)",
-    d: "M226.5,102.5l69.4-101c-1.5-0.6-3.1-0.9-4.8-0.9H62.4c-1.5,0-2.9,0.3-4.2,0.7L226.5,102.5z"
-  }), ___EmotionJSX("path", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "g", "path"),
-    fill: "url(#SVGID_3_)",
-    d: "M226.5,102.5l127-41.1c0.3-2.1-0.3-4.3-1.9-5.8L300.4,4.4c-1.3-1.3-2.8-2.3-4.5-2.9L226.5,102.5z"
-  }), ___EmotionJSX("path", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "g", "path"),
-    fill: "url(#SVGID_4_)",
-    d: "M58.2,1.2c-1.9,0.6-3.6,1.7-5,3.1L2,55.5c-1.5,1.5-2.1,3.5-2,5.4l226.5,41.5L58.2,1.2z"
-  }), ___EmotionJSX("path", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "g", "path"),
-    fill: "url(#SVGID_5_)",
-    d: "M353.5,61.4l-127,41.1l-48.6,134.6c1.4-0.2,2.7-0.8,3.8-1.9L351.6,65.3C352.7,64.2,353.3,62.8,353.5,61.4z"
-  }), ___EmotionJSX("path", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "g", "path"),
-    fill: "url(#SVGID_6_)",
-    d: "M0,61L0,61c0.1,1.6,0.8,3.1,2,4.4l169.9,169.9c1.6,1.6,3.9,2.3,6,1.9l0,0l48.6-134.6L0,61z"
-  }))) : ___EmotionJSX("svg", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg"),
-    width: "31",
-    height: "21",
-    viewBox: "0 0 31 21",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, ___EmotionJSX("g", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "g"),
-    clipPath: "url(#clip0)"
-  }, ___EmotionJSX("path", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "g", "path"),
-    d: "M16.3172 20.5608L30.1146 6.52144C30.3912 6.23992 30.5465 5.85816 30.5465 5.4601C30.5465 5.06204 30.3912 4.68027 30.1146 4.39876L26.4913 0.710614C26.2698 0.485271 26.0068 0.306532 25.7174 0.184603C25.428 0.0626741 25.1179 -5.76524e-05 24.8046 -7.59947e-06H5.74369C5.43046 -5.76524e-05 5.12029 0.0626741 4.8309 0.184603C4.5415 0.306532 4.27853 0.485271 4.05703 0.710614L0.433732 4.39876C0.157159 4.68027 0.00179291 5.06204 0.00179291 5.4601C0.00179291 5.85816 0.157159 6.23992 0.433732 6.52144L14.2311 20.5608C14.5078 20.8422 14.883 21.0003 15.2742 21.0003C15.6654 21.0003 16.0405 20.8422 16.3172 20.5608Z",
-    fill: "url(#paint0_linear)"
-  }), ___EmotionJSX("path", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "g", "path"),
-    opacity: "0.4",
-    d: "M3.95572 0.81288C4.20159 0.563066 4.5044 0.379051 4.83715 0.277248C5.16989 0.175446 5.52222 0.15902 5.86272 0.229436L29.8213 5.18411C29.928 5.2064 30.0286 5.25261 30.1155 5.31939C30.2025 5.38617 30.2738 5.47184 30.3241 5.57017C30.3745 5.6685 30.4027 5.77701 30.4066 5.88781C30.4106 5.99861 30.3902 6.10892 30.347 6.21071C30.5097 5.92473 30.5751 5.59207 30.5329 5.26442C30.4907 4.93677 30.3434 4.63246 30.1138 4.39876L26.4905 0.710614C26.269 0.485271 26.006 0.306532 25.7166 0.184603C25.4272 0.0626741 25.1171 -5.76525e-05 24.8038 -7.59947e-06H5.74289C5.42966 -5.76525e-05 5.11949 0.0626741 4.83009 0.184603C4.54069 0.306532 4.27773 0.485271 4.05622 0.710614L3.95572 0.81288Z",
-    fill: "url(#paint1_linear)"
-  }), ___EmotionJSX("path", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "g", "path"),
-    opacity: "0.4",
-    d: "M25.2782 1.06978L23.8763 3.95421L29.828 5.18534C29.9347 5.20763 30.0352 5.25384 30.1222 5.32062C30.2092 5.3874 30.2804 5.47307 30.3308 5.5714C30.3811 5.66973 30.4093 5.77824 30.4133 5.88904C30.4172 5.99985 30.3969 6.11015 30.3537 6.21194C30.5164 5.92596 30.5817 5.5933 30.5396 5.26565C30.4974 4.938 30.3501 4.63369 30.1204 4.39999L26.4907 0.710534C26.2692 0.485191 26.0062 0.306452 25.7168 0.184523C25.4274 0.0625943 25.1173 -0.000137481 24.804 -8.74283e-05H24.6198C24.7442 -0.00116846 24.8668 0.0302137 24.9759 0.0910635C25.085 0.151913 25.177 0.240201 25.243 0.347499C25.3091 0.454797 25.347 0.577525 25.3531 0.70397C25.3593 0.830415 25.3335 0.956357 25.2782 1.06978Z",
-    fill: "url(#paint2_linear)"
-  }), ___EmotionJSX("path", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "g", "path"),
-    d: "M30.3469 6.21076C30.3902 6.10897 30.4105 5.99866 30.4066 5.88786C30.4026 5.77706 30.3744 5.66855 30.3241 5.57022C30.2737 5.4719 30.2025 5.38622 30.1155 5.31944C30.0285 5.25266 29.928 5.20645 29.8212 5.18416L23.8696 3.95303L15.8808 20.3746C15.7778 20.5876 15.6036 20.7563 15.3894 20.8505C15.1753 20.9447 14.9352 20.9582 14.7121 20.8886C14.9815 21.0022 15.278 21.0319 15.564 20.9741C15.85 20.9162 16.1127 20.7733 16.3189 20.5634L30.1137 6.52149C30.2046 6.42886 30.2831 6.32437 30.3469 6.21076Z",
-    fill: "url(#paint3_linear)"
-  })), ___EmotionJSX("defs", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs")
-  }, ___EmotionJSX("linearGradient", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient"),
-    id: "paint0_linear",
-    x1: "9.54538",
-    y1: "14.7954",
-    x2: "18.3355",
-    y2: "1.56416",
-    gradientUnits: "userSpaceOnUse"
-  }, ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#EFECFF"
-  }), ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "1",
-    stopColor: "#A4C9EB"
-  })), ___EmotionJSX("linearGradient", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient"),
-    id: "paint1_linear",
-    x1: "18.1359",
-    y1: "1.90908",
-    x2: "19.2014",
-    y2: "-4.73774",
-    gradientUnits: "userSpaceOnUse"
-  }, ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "0.07",
-    stopColor: "white"
-  }), ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "0.89",
-    stopColor: "#009FFF"
-  })), ___EmotionJSX("linearGradient", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient"),
-    id: "paint2_linear",
-    x1: "3743.52",
-    y1: "1482.75",
-    x2: "4101.12",
-    y2: "1154.22",
-    gradientUnits: "userSpaceOnUse"
-  }, ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "0.07",
-    stopColor: "white"
-  }), ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "0.89",
-    stopColor: "#009FFF"
-  })), ___EmotionJSX("linearGradient", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient"),
-    id: "paint3_linear",
-    x1: "19.5678",
-    y1: "10.4999",
-    x2: "27.7267",
-    y2: "14.7077",
-    gradientUnits: "userSpaceOnUse"
-  }, ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#EAF0FF"
-  }), ___EmotionJSX("stop", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "linear-gradient", "stop"),
-    offset: "0.98",
-    stopColor: "#7BA2CB"
-  })), ___EmotionJSX("clipPath", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "clip-path"),
-    id: "clip0"
-  }, ___EmotionJSX("rect", {
-    "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "svg", "defs", "clip-path", "rect"),
-    width: "30.5455",
-    height: "21",
-    fill: "white"
-  }))));
+      height = _ref.height,
+      variant = _ref.variant;
+  var theme = useTheme(); // return the relevant logo based on the variant - if the type is 'themed'
+  // then return the logo matching the selected theme.
+
+  switch (variant) {
+    case 'dark':
+      return ___EmotionJSX(LogoDark, {
+        "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "logo-dark"),
+        className: className,
+        width: width,
+        height: height
+      });
+
+    case 'light':
+      return ___EmotionJSX(LogoLight, {
+        "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "logo-light"),
+        className: className,
+        width: width,
+        height: height
+      });
+
+    case 'v4':
+      return ___EmotionJSX(LogoV4, {
+        "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "logo-v4"),
+        className: className,
+        width: width,
+        height: height
+      });
+
+    case 'themed':
+    default:
+      // return a theme specific logo
+      if (theme.name === 'v4') {
+        return ___EmotionJSX(LogoV4, {
+          "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "logo-v4"),
+          className: className,
+          width: width,
+          height: height
+        });
+      }
+
+      return ___EmotionJSX(LogoLight, {
+        "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "logo-light"),
+        className: className,
+        width: width,
+        height: height
+      });
+  }
 }
+
 LogoTD.defaultProps = {
-  width: 205,
-  height: 146
-};
+  width: 30,
+  height: 21,
+  variant: 'themed'
+}; // export default is now at the bottom of the file so StoryBook could correctly
+// pick out the properties so that they can be changed
+
+export default LogoTD;

package/dist/es/Logo/LogoDark.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { LogoTDProps } from './Logo';
+declare function LogoDark({ className, width, height }: LogoTDProps): JSX.Element;
+declare namespace LogoDark {
+    var defaultProps: {
+        width: number;
+        height: number;
+    };
+}
+export default LogoDark;
+//# sourceMappingURL=LogoDark.d.ts.map

package/dist/es/Logo/LogoDark.js

@@ -0,0 +1,119 @@
+import { jsx as ___EmotionJSX } from "@emotion/core";
+if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
+if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
+
+/*
+    Logo used in td-crystal - Dark version
+
+    Used in: TD Marketplace 
+*/
+import React from 'react';
+export default function LogoDark(_ref) {
+  var className = _ref.className,
+      width = _ref.width,
+      height = _ref.height;
+  return ___EmotionJSX("svg", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg"),
+    width: width,
+    height: height,
+    className: className,
+    version: "1.1",
+    viewBox: "0 0 30 21",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, ___EmotionJSX("defs", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "defs")
+  }, ___EmotionJSX("linearGradient", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "defs", "linear-gradient"),
+    id: "a-6",
+    x1: "489.81",
+    x2: "545.14",
+    y1: "508.1",
+    y2: "603.95",
+    gradientTransform: "matrix(1 0 0 -1 -542.85 580.46)",
+    gradientUnits: "userSpaceOnUse"
+  }, ___EmotionJSX("stop", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "defs", "linear-gradient", "stop"),
+    stopColor: "#85f",
+    offset: "0"
+  }), ___EmotionJSX("stop", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "defs", "linear-gradient", "stop"),
+    stopColor: "#00b6ff",
+    offset: "1"
+  })), ___EmotionJSX("linearGradient", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "defs", "linear-gradient"),
+    id: "linearGradient3192",
+    x1: "530.33",
+    x2: "540.4",
+    y1: "569.98",
+    y2: "611.57",
+    gradientTransform: "matrix(1 0 0 -1 -542.85 580.46)",
+    gradientUnits: "userSpaceOnUse"
+  }), ___EmotionJSX("linearGradient", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "defs", "linear-gradient"),
+    id: "b-8",
+    x1: "530.33",
+    x2: "540.4",
+    y1: "569.98",
+    y2: "611.57",
+    gradientTransform: "matrix(1,0,0,-1,0,1080)",
+    gradientUnits: "userSpaceOnUse"
+  }, ___EmotionJSX("stop", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "defs", "linear-gradient", "stop"),
+    stopColor: "#fff",
+    offset: ".07"
+  }), ___EmotionJSX("stop", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "defs", "linear-gradient", "stop"),
+    stopColor: "#009fff",
+    offset: ".89"
+  })), ___EmotionJSX("linearGradient", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "defs", "linear-gradient"),
+    id: "c-5",
+    x1: "569.17",
+    x2: "604.29",
+    y1: "565.3",
+    y2: "595.33",
+    gradientTransform: "translate(-542.85 -499.54)"
+  }), ___EmotionJSX("linearGradient", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "defs", "linear-gradient"),
+    id: "d",
+    x1: "523.4",
+    x2: "578.42",
+    y1: "539.16",
+    y2: "520.11",
+    gradientTransform: "matrix(1 0 0 -1 -542.85 580.46)",
+    gradientUnits: "userSpaceOnUse"
+  }, ___EmotionJSX("stop", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "defs", "linear-gradient", "stop"),
+    stopColor: "#4036c1",
+    offset: "0"
+  }), ___EmotionJSX("stop", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "defs", "linear-gradient", "stop"),
+    stopColor: "#539eff",
+    offset: ".98"
+  }))), ___EmotionJSX("g", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "g"),
+    transform: "matrix(.20552 0 0 .20552 19.308 1.8254)"
+  }, ___EmotionJSX("path", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "g", "path"),
+    d: "m-15.956 87.688 65.9-65.91a7.06 7.06 0 0 0 0-10l-17.31-17.32a11.36 11.36 0 0 0-8.05-3.34h-91a11.4 11.4 0 0 0-8.06 3.34l-17.37 17.35a7 7 0 0 0-0.1 9.9l0.1 0.1 65.9 65.91a7.06 7.06 0 0 0 10 0z",
+    fill: "url(#a-6)"
+  }), ___EmotionJSX("path", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "g", "path"),
+    d: "m-75.006-5.0117a10 10 0 0 1 9.11-2.74l114.44 23.21a3.51 3.51 0 0 1 2.73 4.13 3.26 3.26 0 0 1-0.22 0.69 7 7 0 0 0-1.11-8.5l-17.31-17.32a11.36 11.36 0 0 0-8.05-3.34h-91a11.4 11.4 0 0 0-8.06 3.34z",
+    fill: "url(#linearGradient3192)",
+    opacity: ".4"
+  }), ___EmotionJSX("path", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "g", "path"),
+    d: "m26.814-3.8117-6.66 13.53 28.39 5.74a3.51 3.51 0 0 1 2.73 4.13 3.26 3.26 0 0 1-0.22 0.69 7 7 0 0 0-1.11-8.5l-17.31-17.32a11.36 11.36 0 0 0-8.05-3.34h-0.88a3.48 3.48 0 0 1 3.11 5.06z",
+    fill: "url(#c-5)",
+    opacity: ".4"
+  }), ___EmotionJSX("path", {
+    "data-gs": gs("src", "logo", "logodark.tsx", "logo-dark", "svg", "g", "path"),
+    d: "m51.054 20.318a3.5 3.5 0 0 0-1.82-4.6 3.26 3.26 0 0 0-0.69-0.22l-28.39-5.78-38.2 77.09a4.69 4.69 0 0 1-5.59 2.4 7.06 7.06 0 0 0 7.68-1.52l65.9-65.91a6.33 6.33 0 0 0 1.11-1.46z",
+    fill: "url(#d)"
+  })));
+}
+LogoDark.defaultProps = {
+  width: 30,
+  height: 21
+};

package/dist/es/Logo/LogoLight.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { LogoTDProps } from './Logo';
+declare function LogoLight({ className, width, height }: LogoTDProps): JSX.Element;
+declare namespace LogoLight {
+    var defaultProps: {
+        width: number;
+        height: number;
+    };
+}
+export default LogoLight;
+//# sourceMappingURL=LogoLight.d.ts.map