@redocly/theme 0.16.0 → 0.17.1

package/lib/config.js

@@ -92,6 +92,129 @@ const markdownConfigSchema = {
     additionalProperties: false,
     default: {},
 };
+const amplitudeAnalyticsConfigSchema = {
+    type: 'object',
+    properties: {
+        includeInDevelopment: { type: 'boolean' },
+        apiKey: { type: 'string' },
+        head: { type: 'boolean' },
+        respectDNT: { type: 'boolean' },
+        exclude: { type: 'array', items: { type: 'string' } },
+        outboundClickEventName: { type: 'string' },
+        pageViewEventName: { type: 'string' },
+        amplitudeConfig: { type: 'object', additionalProperties: true },
+    },
+    additionalProperties: false,
+    required: ['apiKey'],
+};
+const fullstoryAnalyticsConfigSchema = {
+    type: 'object',
+    properties: {
+        includeInDevelopment: { type: 'boolean' },
+        orgId: { type: 'string' },
+    },
+    additionalProperties: false,
+    required: ['orgId'],
+};
+const heapAnalyticsConfigSchema = {
+    type: 'object',
+    properties: {
+        includeInDevelopment: { type: 'boolean' },
+        appId: { type: 'string' },
+    },
+    additionalProperties: false,
+    required: ['appId'],
+};
+const rudderstackAnalyticsConfigSchema = {
+    type: 'object',
+    properties: {
+        includeInDevelopment: { type: 'boolean' },
+        writeKey: { type: 'string', minLength: 10 },
+        trackPage: { type: 'boolean' },
+        dataPlaneUrl: { type: 'string' },
+        controlPlaneUrl: { type: 'string' },
+        sdkUrl: { type: 'string' },
+        loadOptions: { type: 'object', additionalProperties: true },
+    },
+    additionalProperties: false,
+    required: ['writeKey'],
+};
+const segmentAnalyticsConfigSchema = {
+    type: 'object',
+    properties: {
+        includeInDevelopment: { type: 'boolean' },
+        writeKey: { type: 'string', minLength: 10 },
+        trackPage: { type: 'boolean' },
+        includeTitleInPageCall: { type: 'boolean' },
+        host: { type: 'string' },
+    },
+    additionalProperties: false,
+    required: ['writeKey'],
+};
+const gtmAnalyticsConfigSchema = {
+    type: 'object',
+    properties: {
+        includeInDevelopment: { type: 'boolean' },
+        trackingId: { type: 'string' },
+        gtmAuth: { type: 'string' },
+        gtmPreview: { type: 'string' },
+        defaultDataLayer: {},
+        dataLayerName: { type: 'string' },
+        enableWebVitalsTracking: { type: 'boolean' },
+        selfHostedOrigin: { type: 'string' },
+        pageViewEventName: { type: 'string' },
+    },
+    additionalProperties: false,
+    required: ['trackingId'],
+};
+const googleAnalyticsConfigSchema = {
+    type: 'object',
+    properties: {
+        includeInDevelopment: { type: 'boolean' },
+        trackingId: { type: 'string' },
+        head: { type: 'boolean' },
+        respectDNT: { type: 'boolean' },
+        anonymize: { type: 'boolean' },
+        exclude: { type: 'array', items: { type: 'string' } },
+        optimizeId: { type: 'string' },
+        experimentId: { type: 'string' },
+        variationId: { type: 'string' },
+        enableWebVitalsTracking: { type: 'boolean' },
+        defer: { type: 'boolean' },
+        sampleRate: { type: 'number' },
+        name: { type: 'string' },
+        clientId: { type: 'string' },
+        siteSpeedSampleRate: { type: 'number' },
+        alwaysSendReferrer: { type: 'boolean' },
+        allowAnchor: { type: 'boolean' },
+        cookieName: { type: 'string' },
+        cookieFlags: { type: 'string' },
+        cookieDomain: { type: 'string' },
+        cookieExpires: { type: 'number' },
+        storeGac: { type: 'boolean' },
+        legacyCookieDomain: { type: 'string' },
+        legacyHistoryImport: { type: 'boolean' },
+        allowLinker: { type: 'boolean' },
+        storage: { type: 'string' },
+        allowAdFeatures: { type: 'boolean' },
+        dataSource: { type: 'string' },
+        queueTime: { type: 'number' },
+        forceSSL: { type: 'boolean' },
+        transport: { type: 'string' },
+    },
+    additionalProperties: false,
+    required: ['trackingId'],
+};
+const adobeAnalyticsConfigSchema = {
+    type: 'object',
+    properties: {
+        includeInDevelopment: { type: 'boolean' },
+        scriptUrl: { type: 'string' },
+        pageViewEventName: { type: 'string' },
+    },
+    additionalProperties: false,
+    required: ['scriptUrl'],
+};
 const navItemSchema = {
     type: 'object',
     properties: {
@@ -246,18 +369,31 @@ exports.themeConfigSchema = {
         codeSnippet: {
             type: 'object',
             properties: {
+                controlsStyle: { type: 'string', default: 'icon' },
                 copy: {
                     type: 'object',
-                    properties: Object.assign({ buttonText: { type: 'string', default: 'Copy' }, tooltipText: { type: 'string', default: 'Copy to clipboard' }, toasterText: { type: 'string', default: 'Copied!' }, toasterDuration: { type: 'number', default: 1500 } }, hideConfigSchema.properties),
+                    properties: Object.assign({}, hideConfigSchema.properties),
                     additionalProperties: false,
-                    default: {},
+                    default: { hide: false },
                 },
                 report: {
                     type: 'object',
-                    properties: Object.assign({ tooltipText: { type: 'string', default: 'Report a problem' }, label: { type: 'string' } }, hideConfigSchema.properties),
+                    properties: Object.assign({}, hideConfigSchema.properties),
                     additionalProperties: false,
                     default: { hide: true },
                 },
+                expand: {
+                    type: 'object',
+                    properties: Object.assign({}, hideConfigSchema.properties),
+                    additionalProperties: false,
+                    default: { hide: false },
+                },
+                collapse: {
+                    type: 'object',
+                    properties: Object.assign({}, hideConfigSchema.properties),
+                    additionalProperties: false,
+                    default: { hide: false },
+                },
             },
             additionalProperties: false,
             default: {},
@@ -266,7 +402,17 @@ exports.themeConfigSchema = {
         openapi: { type: 'object', additionalProperties: true },
         graphql: { type: 'object', additionalProperties: true },
         analytics: {
-            type: ['array', 'boolean', 'number', 'object', 'string'],
+            type: 'object',
+            properties: {
+                adobe: adobeAnalyticsConfigSchema,
+                amplitude: amplitudeAnalyticsConfigSchema,
+                fullstory: fullstoryAnalyticsConfigSchema,
+                heap: heapAnalyticsConfigSchema,
+                rudderstack: rudderstackAnalyticsConfigSchema,
+                segment: segmentAnalyticsConfigSchema,
+                gtm: gtmAnalyticsConfigSchema,
+                ga: googleAnalyticsConfigSchema,
+            },
         },
         userProfile: {
             type: 'object',

package/lib/globalStyle.js

@@ -869,6 +869,41 @@ const apiReferencePanels = (0, styled_components_1.css) `
   --panel-samples-heading-background-color: #323f4b; // @presenter Color
   --panel-samples-heading-border: unset; // @presenter Border
 
+  /**
+  * @tokens Panel samples default
+  */
+  .panel-samples-default {
+    --text-color: var(--panel-samples-text-color);
+    --panel-text-color: var(--panel-samples-text-color); // @presenter Color
+    --panel-font-family-local: var(--panel-samples-font-family);
+    --panel-font-size-local: var(--panel-samples-font-size);
+    --panel-font-weight-local: var(--panel-samples-font-weight);
+    --panel-background-color: var(--panel-samples-background-color); // @presenter Color
+    --panel-border-local: var(--panel-samples-border);
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
+    --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color
+
+    --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color
+    --panel-body-background-color: var(--panel-samples-body-background-color); // @presenter Color
+
+    --panel-body-font-family-local: var(--panel-samples-body-font-family);
+    --panel-body-font-size-local: var(--panel-samples-body-font-size);
+    --panel-body-font-weight-local: var(--panel-samples-body-font-weight);
+    --panel-body-padding-local: 0;
+    --panel-body-border-local: var(--panel-samples-body-border);
+
+    --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color
+    --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+
+    --panel-heading-font-family-local: var(--panel-samples-heading-font-family);
+    --panel-heading-font-size-local: var(--panel-samples-heading-font-size);
+    --panel-heading-font-weight-local: var(--panel-samples-heading-font-weight);
+    --panel-heading-line-height-local: var(--panel-samples-heading-line-height);
+    --panel-heading-padding-local: var(--panel-samples-heading-padding);
+
+    --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border
+  }
+
   /**
   * @tokens Panel try-it, request-samples, response-samples, callback samples
   */
@@ -898,7 +933,7 @@ const apiReferencePanels = (0, styled_components_1.css) `
     --panel-body-border-local: var(--panel-samples-body-border);
 
     --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color
-    --panel-heading-background-color: var(  --panel-samples-heading-background-color); // @presenter Color
+    --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color
 
     --panel-heading-font-family-local: var(--panel-samples-heading-font-family);
     --panel-heading-font-size-local: var(--panel-samples-heading-font-size);
@@ -1113,9 +1148,14 @@ const apiReferencePanels = (0, styled_components_1.css) `
   * @tokens Panel samples other styles
   */
 
-  --panel-samples-controls-background-color: var(--panel-samples-heading-background-color); // @presenter Color
-  --panel-samples-controls-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color
+  --panel-samples-controls-background-color: var(--panel-samples-heading-background-color);
+
+  --panel-samples-icon-controls-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --panel-samples-text-controls-background-color: var(--color-secondary-900); // @presenter Color
+
+  --panel-samples-controls-hover-background-color: #606e7b; // @presenter Color
   --panel-samples-controls-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-samples-controls-border: 1px solid var(--color-secondary-900); // @presenter Color
 
   --panel-samples-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color
   --panel-samples-dropdown-color: var(--text-color-inverse); // @presenter Color
@@ -1175,6 +1215,7 @@ const code = (0, styled_components_1.css) `
   --code-font-size: 13px; // @presenter FontSize
   --code-font-family: var(--font-family-monospaced); // @presenter FontFamily
   --code-font-weight: 400; // @presenter FontWeight
+  --code-line-height: 18px; // @presenter LineHeight
   --code-wrap: pre;
   --code-word-break: break-word;
 
@@ -1196,7 +1237,9 @@ const code = (0, styled_components_1.css) `
   --code-block-text-color: #fff; // @presenter Color
   --code-block-background-color: #323f4b; // @presenter Color
   --code-block-border-color: var(--border-color); // @presenter Color
-  --code-block-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --code-block-border-radius: var(--border-radius); // @presenter BorderRadius
+  --code-block-padding: calc(var(--spacing-unit) * 2);
+  --code-block-margin: 0;
   --code-block-max-height: 50vh;
   --code-block-word-break: initial;
 
@@ -1633,7 +1676,7 @@ const mobileMenu = (0, styled_components_1.css) `
     --mobile-menu-item-text-color: #525252;// @presenter Color
     --mobile-menu-item-active-color: #FAFAFA; // @presenter Color
     --mobile-menu-item-active-text-color: #161616; // @presenter Color
-    
+
     /**
       * @tokens Mobile Menu control button
       * */
@@ -1842,7 +1885,7 @@ const markdown = (0, styled_components_1.css) `
   /**
   * @tokens Markdown Checkbox List
   */
-  
+
   --md-checkbox-list-item-style: none;
 
   /**
@@ -2150,7 +2193,7 @@ exports.styles = (0, styled_components_1.css) `
   :root.notransition * {
     transition: none !important;
   }
-  
+
   @media screen and (max-width: ${media_css_1.breakpoints.medium}) {
     body.overflow-hidden {
       overflow: hidden;

package/lib/icons/ArrowIcon/ArrowIcon.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 export interface ArrowIconProps {
+    className?: string;
+    weight?: 'regular' | 'thin';
     direction?: 'up' | 'right' | 'left' | 'down';
     visibility?: 'visible' | 'hidden';
 }
-export declare const ArrowIcon: import("styled-components").StyledComponent<({ className }: {
-    className?: string | undefined;
-}) => JSX.Element, any, ArrowIconProps, never>;
+export declare const ArrowIcon: import("styled-components").StyledComponent<({ className, weight }: ArrowIconProps) => JSX.Element, any, Pick<ArrowIconProps, "weight">, never>;

package/lib/icons/ArrowIcon/ArrowIcon.js

@@ -1,11 +1,34 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArrowIcon = void 0;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 function directionToTransform({ direction }) {
     switch (direction) {
         case 'up':
@@ -18,12 +41,16 @@ function directionToTransform({ direction }) {
             return 0;
     }
 }
-const Icon = ({ className }) => (react_1.default.createElement("span", { "data-component-name": "icons/ArrowIcon/ArrowIcon" },
-    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 7 5", className: className },
-        react_1.default.createElement("path", { d: "M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" }))));
+const Icon = ({ className, weight }) => (react_1.default.createElement("span", { "data-component-name": "icons/ArrowIcon/ArrowIcon" }, weight === 'thin' ? (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+    react_1.default.createElement("path", { d: "M8 11L3 5.99999L3.7 5.29999L8 9.59999L12.3 5.29999L13 5.99999L8 11Z", fill: "inherit" }))) : (react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 7 5", className: className },
+    react_1.default.createElement("path", { d: "M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" })))));
 exports.ArrowIcon = (0, styled_components_1.default)(Icon) `
-  width: var(--sidebar-group-item-chevron-size);
-  height: var(--sidebar-group-item-chevron-size);
+  ${({ weight }) => weight !== 'thin' &&
+    (0, styled_components_1.css) `
+      width: var(--sidebar-group-item-chevron-size);
+      height: var(--sidebar-group-item-chevron-size);
+    `}
+
   fill: var(--sidebar-group-item-chevron-color);
   transform: rotate(${directionToTransform}deg);
   visibility: ${({ visibility = 'visible' }) => visibility};

package/lib/icons/CollapseIcon/CollapseIcon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface IconProps {
+    className?: string;
+    color?: string;
+}
+export declare const CollapseIcon: import("styled-components").StyledComponent<({ className, color }: IconProps) => JSX.Element, any, {}, never>;
+export {};

package/lib/icons/CollapseIcon/CollapseIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapseIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = ({ className, color = 'white' }) => (react_1.default.createElement("svg", { "data-component-name": "icons/CollapseIcon", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+    react_1.default.createElement("g", { clipPath: "url(#clip0_906_12165)" },
+        react_1.default.createElement("rect", { width: "14", height: "14", fill: "none", style: { mixBlendMode: 'multiply' } }),
+        react_1.default.createElement("path", { d: "M1.75 7.875V8.75H4.63138L0.875 12.5046L1.49363 13.125L5.25 9.36862V12.25H6.125V7.875H1.75Z", fill: color }),
+        react_1.default.createElement("path", { d: "M13.125 1.4945L12.509 0.875L8.75 4.63138V1.75H7.875V6.125H12.25V5.25H9.36862L13.125 1.4945Z", fill: color })),
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("clipPath", { id: "clip0_906_12165" },
+            react_1.default.createElement("rect", { width: "14", height: "14", fill: "white" })))));
+exports.CollapseIcon = (0, styled_components_1.default)(Icon) `
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: middle;
+`;
+//# sourceMappingURL=CollapseIcon.js.map

package/lib/icons/CollapseIcon/index.d.ts

@@ -0,0 +1 @@
+export * from '../../icons/CollapseIcon/CollapseIcon';

package/lib/{components/SourceCode → icons/CollapseIcon}/index.js

@@ -14,5 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("../../components/SourceCode/SourceCode"), exports);
+__exportStar(require("../../icons/CollapseIcon/CollapseIcon"), exports);
 //# sourceMappingURL=index.js.map

package/lib/icons/CopyIcon/CopyIcon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface IconProps {
+    className?: string;
+    color?: string;
+}
+export declare const CopyIcon: import("styled-components").StyledComponent<({ className, color }: IconProps) => JSX.Element, any, {}, never>;
+export {};

package/lib/icons/CopyIcon/CopyIcon.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = ({ className, color = 'white' }) => (react_1.default.createElement("span", { "data-component-name": "icons/CopyIcon" },
+    react_1.default.createElement("svg", { viewBox: "0 0 11 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.52083 1.33333C3.52083 1.25279 3.58613 1.1875 3.66667 1.1875H9.5C9.58054 1.1875 9.64583 1.25279 9.64583 1.33333V8.33333C9.64583 8.41387 9.58054 8.47917 9.5 8.47917H7.75H3.66667C3.58613 8.47917 3.52083 8.41387 3.52083 8.33333V3.08333V1.33333ZM2.64583 2.64583V1.33333C2.64583 0.769543 3.10288 0.3125 3.66667 0.3125H9.5C10.0638 0.3125 10.5208 0.769543 10.5208 1.33333V8.33333C10.5208 8.89712 10.0638 9.35417 9.5 9.35417H8.1875V10.6667C8.1875 10.9374 8.07995 11.1971 7.8885 11.3885C7.69706 11.5799 7.43741 11.6875 7.16667 11.6875H1.33333C1.06259 11.6875 0.802939 11.5799 0.611495 11.3885C0.420051 11.1971 0.3125 10.9374 0.3125 10.6667V3.66667C0.3125 3.39592 0.420052 3.13627 0.611495 2.94483C0.802938 2.75339 1.06259 2.64583 1.33333 2.64583H2.64583ZM7.3125 9.35417V10.6667C7.3125 10.7053 7.29713 10.7424 7.26979 10.7698C7.24244 10.7971 7.20534 10.8125 7.16667 10.8125H1.33333C1.29466 10.8125 1.25756 10.7971 1.23021 10.7698C1.20286 10.7424 1.1875 10.7053 1.1875 10.6667V3.66667C1.1875 3.62799 1.20286 3.5909 1.23021 3.56355C1.25756 3.5362 1.29466 3.52083 1.33333 3.52083H2.64583V8.33333C2.64583 8.89712 3.10288 9.35417 3.66667 9.35417H7.3125Z", fill: color }))));
+exports.CopyIcon = (0, styled_components_1.default)(Icon) `
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: middle;
+`;
+//# sourceMappingURL=CopyIcon.js.map

package/lib/icons/CopyIcon/index.d.ts

@@ -0,0 +1 @@
+export * from '../../icons/CopyIcon/CopyIcon';

package/lib/{components/CodeSample → icons/CopyIcon}/index.js

@@ -14,5 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("../../components/CodeSample/CodeSample"), exports);
+__exportStar(require("../../icons/CopyIcon/CopyIcon"), exports);
 //# sourceMappingURL=index.js.map

package/lib/icons/DeselectIcon/DeselectIcon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface IconProps {
+    className?: string;
+    color?: string;
+}
+export declare const DeselectIcon: import("styled-components").StyledComponent<({ className, color }: IconProps) => JSX.Element, any, {}, never>;
+export {};

package/lib/icons/DeselectIcon/DeselectIcon.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeselectIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = ({ className, color = 'white' }) => (react_1.default.createElement("svg", { "data-component-name": "icons/DeselectIcon", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+    react_1.default.createElement("path", { d: "M14.4966 10.5H9.49658V11.5H14.4966V10.5Z", fill: color }),
+    react_1.default.createElement("path", { d: "M10.5 3.64746H1.5V4.64746H10.5V3.64746Z", fill: color }),
+    react_1.default.createElement("path", { d: "M10.5 6.64746H1.5V7.64746H10.5V6.64746Z", fill: color }),
+    react_1.default.createElement("path", { d: "M7.5 9.64746H1.5V10.6475H7.5V9.64746Z", fill: color })));
+exports.DeselectIcon = (0, styled_components_1.default)(Icon) `
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: middle;
+`;
+//# sourceMappingURL=DeselectIcon.js.map

package/lib/icons/DeselectIcon/index.d.ts

@@ -0,0 +1 @@
+export * from '../../icons/DeselectIcon/DeselectIcon';

package/lib/{components/SamplesPanelControls → icons/DeselectIcon}/index.js

@@ -14,5 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("../../components/SamplesPanelControls/SamplesPanelControls"), exports);
+__exportStar(require("../../icons/DeselectIcon/DeselectIcon"), exports);
 //# sourceMappingURL=index.js.map

package/lib/icons/ExpandIcon/ExpandIcon.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-export interface ArrowIconProps {
-    direction?: 'up' | 'right' | 'left' | 'down';
-    visibility?: 'visible' | 'hidden';
+interface IconProps {
+    className?: string;
+    color?: string;
 }
-export declare const ExpandIcon: import("styled-components").StyledComponent<({ className }: {
-    className?: string | undefined;
-}) => JSX.Element, any, ArrowIconProps, never>;
+export declare const ExpandIcon: import("styled-components").StyledComponent<({ className, color }: IconProps) => JSX.Element, any, {}, never>;
+export {};

package/lib/icons/ExpandIcon/ExpandIcon.js

@@ -6,26 +6,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function directionToTransform({ direction }) {
-    switch (direction) {
-        case 'up':
-            return 180;
-        case 'right':
-            return -90;
-        case 'left':
-            return 90;
-        default:
-            return 0;
-    }
-}
-const Icon = ({ className }) => (react_1.default.createElement("span", { "data-component-name": "icons/ExpandIcon/ExpandIcon" },
-    react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
-        react_1.default.createElement("path", { d: "M8 11L3 5.99999L3.7 5.29999L8 9.59999L12.3 5.29999L13 5.99999L8 11Z", fill: "inherit" }))));
+const Icon = ({ className, color = 'white' }) => (react_1.default.createElement("svg", { "data-component-name": "icons/ExpandIcon", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+    react_1.default.createElement("g", { clipPath: "url(#clip0_906_12129)" },
+        react_1.default.createElement("rect", { width: "14", height: "14", fill: "none", style: { mixBlendMode: 'multiply' } }),
+        react_1.default.createElement("path", { d: "M8.75 0.875V1.75H11.6314L7.875 5.50462L8.49362 6.125L12.25 2.36863V5.25H13.125V0.875H8.75Z", fill: color }),
+        react_1.default.createElement("path", { d: "M6.125 8.4945L5.509 7.875L1.75 11.6314V8.75H0.875V13.125H5.25V12.25H2.36863L6.125 8.4945Z", fill: color })),
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("clipPath", { id: "clip0_906_12129" },
+            react_1.default.createElement("rect", { width: "14", height: "14", fill: "white" })))));
 exports.ExpandIcon = (0, styled_components_1.default)(Icon) `
-  fill: var(--sidebar-group-item-chevron-color);
-  transform: rotate(${directionToTransform}deg);
-  visibility: ${({ visibility = 'visible' }) => visibility};
-
+  width: 1.3em;
+  height: 1.3em;
   vertical-align: middle;
 `;
 //# sourceMappingURL=ExpandIcon.js.map

package/lib/icons/FileIcon/FileIcon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface IconProps {
+    className?: string;
+    color?: string;
+}
+export declare const FileIcon: import("styled-components").StyledComponent<({ className, color }: IconProps) => JSX.Element, any, {}, never>;
+export {};

package/lib/icons/FileIcon/FileIcon.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = ({ className, color = 'white' }) => (react_1.default.createElement("svg", { "data-component-name": "icons/FileIcon", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+    react_1.default.createElement("rect", { width: "14", height: "14", fill: "none", style: { mixBlendMode: 'multiply' } }),
+    react_1.default.createElement("path", { d: "M12.85 4.65018L9.35 1.15018C9.30601 1.10132 9.25192 1.0626 9.19149 1.0367C9.13106 1.0108 9.06572 0.998339 9 1.00018H4C3.73502 1.00096 3.48112 1.10656 3.29375 1.29393C3.10638 1.4813 3.00078 1.7352 3 2.00018V14.0002C3.00078 14.2652 3.10638 14.5191 3.29375 14.7064C3.48112 14.8938 3.73502 14.9994 4 15.0002H12C12.265 14.9994 12.5189 14.8938 12.7062 14.7064C12.8936 14.5191 12.9992 14.2652 13 14.0002V5.00018C13.0018 4.93446 12.9894 4.86912 12.9635 4.80869C12.9376 4.74826 12.8989 4.69417 12.85 4.65018ZM9 2.20018L11.8 5.00018H9V2.20018ZM12 14.0002H4V2.00018H8V5.00018C8.00078 5.26515 8.10638 5.51906 8.29375 5.70642C8.48112 5.89379 8.73502 5.9994 9 6.00018H12V14.0002Z", fill: color })));
+exports.FileIcon = (0, styled_components_1.default)(Icon) `
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: middle;
+`;
+//# sourceMappingURL=FileIcon.js.map

package/lib/icons/FileIcon/index.d.ts

@@ -0,0 +1 @@
+export * from '../../icons/FileIcon/FileIcon';

package/lib/icons/FileIcon/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../icons/FileIcon/FileIcon"), exports);
+//# sourceMappingURL=index.js.map

package/lib/icons/ReportIcon/ReportIcon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface IconProps {
+    className?: string;
+    color?: string;
+}
+export declare const ReportIcon: import("styled-components").StyledComponent<({ className, color }: IconProps) => JSX.Element, any, {}, never>;
+export {};

package/lib/icons/ReportIcon/ReportIcon.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReportIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = ({ className, color = 'white' }) => (react_1.default.createElement("svg", { "data-component-name": "icons/ReportIcon", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+    react_1.default.createElement("rect", { width: "14", height: "14", fill: "none", style: { mixBlendMode: 'multiply' } }),
+    react_1.default.createElement("path", { d: "M7 8.75C6.87021 8.75 6.74333 8.78849 6.63541 8.8606C6.52749 8.93271 6.44337 9.0352 6.3937 9.15511C6.34403 9.27503 6.33104 9.40698 6.35636 9.53428C6.38168 9.66158 6.44418 9.77851 6.53596 9.87029C6.62774 9.96207 6.74467 10.0246 6.87197 10.0499C6.99927 10.0752 7.13122 10.0622 7.25114 10.0125C7.37105 9.96288 7.47354 9.87876 7.54565 9.77084C7.61776 9.66292 7.65625 9.53604 7.65625 9.40625C7.65625 9.2322 7.58711 9.06528 7.46404 8.94221C7.34097 8.81914 7.17405 8.75 7 8.75Z", fill: color, fillOpacity: "1" }),
+    react_1.default.createElement("path", { d: "M7.4375 3.9375H6.5625V7.875H7.4375V3.9375Z", fill: "white", fillOpacity: "1" }),
+    react_1.default.createElement("path", { d: "M11.375 12.25H2.625C2.39302 12.2497 2.17061 12.1575 2.00658 11.9934C1.84254 11.8294 1.75027 11.607 1.75 11.375V2.625C1.75027 2.39302 1.84254 2.17061 2.00658 2.00658C2.17061 1.84254 2.39302 1.75027 2.625 1.75H11.375C11.607 1.75027 11.8294 1.84254 11.9934 2.00658C12.1575 2.17061 12.2497 2.39302 12.25 2.625V11.375C12.2497 11.607 12.1575 11.8294 11.9934 11.9934C11.8294 12.1575 11.607 12.2497 11.375 12.25ZM2.625 2.625V11.375H11.3755L11.375 2.625H2.625Z", fill: color, fillOpacity: "1" })));
+exports.ReportIcon = (0, styled_components_1.default)(Icon) `
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: middle;
+`;
+//# sourceMappingURL=ReportIcon.js.map

package/lib/icons/ReportIcon/index.d.ts

@@ -0,0 +1 @@
+export * from '../../icons/ReportIcon/ReportIcon';