@snyk-mktg/brand-ui 2.4.1 → 2.4.2-canary.1

package/dist/js/cjs/helpers/caseFormats.d.ts

@@ -0,0 +1 @@
+export declare function formatCase(text: string, convertCase: 'kebab' | 'snake' | 'space' | 'camel' | 'sentence' | 'capitalize' | 'capitalizeSentence' | string): string;

package/dist/js/cjs/helpers/caseFormats.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatCase = formatCase;
+function formatCase(text, convertCase) {
+    if (!text || !convertCase)
+        return text;
+    const regex = /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g;
+    const capitalize = (str) => str?.charAt(0)?.toUpperCase() + str?.slice(1);
+    const camelCase = (str) => {
+        const words = str?.match(regex);
+        if (!words)
+            return '';
+        const firstWord = words[0]?.toLowerCase();
+        const restWords = words?.slice(1)?.map(capitalize);
+        return [firstWord, ...restWords]?.join('');
+    };
+    const sentenceCase = (str) => {
+        const words = str?.match(regex);
+        if (!words)
+            return '';
+        return words?.map((word, index) => (index === 0 ? capitalize(word?.toLowerCase()) : word?.toLowerCase()))?.join(' ');
+    };
+    const capitalizeSentence = (str) => {
+        const words = str?.match(regex);
+        if (!words)
+            return '';
+        return words?.map((word) => capitalize(word?.toLowerCase()))?.join(' ');
+    };
+    switch (convertCase) {
+        case 'kebab':
+            return text?.match(regex)?.join('-')?.toLowerCase() || text;
+        case 'snake':
+            return text?.match(regex)?.join('_')?.toLowerCase() || text;
+        case 'space':
+            return text?.match(regex)?.join(' ')?.toLowerCase() || text;
+        case 'camel':
+            return camelCase(text);
+        case 'sentence':
+            return sentenceCase(text);
+        case 'capitalize':
+            return capitalize(text);
+        case 'capitalizeSentence':
+            return capitalizeSentence(capitalize(text));
+        default:
+            return text;
+    }
+}

package/dist/js/cjs/helpers/classnames.d.ts

@@ -0,0 +1 @@
+export default function classNames(...classes: string[]): string;

package/dist/js/cjs/helpers/classnames.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = classNames;
+/*
+ * Filters out only classes that return truthy
+ */
+function classNames(...classes) {
+    return classes.filter(Boolean).join(' ');
+}

package/dist/js/cjs/helpers/getInitials.d.ts

@@ -0,0 +1 @@
+export declare const getInitials: (fullName: string) => string;

package/dist/js/cjs/helpers/getInitials.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInitials = void 0;
+const getInitials = (fullName) => {
+    const allNames = fullName.trim().split(' ');
+    const initials = allNames.reduce((acc, curr, index) => {
+        if (index === 0 || index === allNames.length - 1) {
+            acc = `${acc}${curr.charAt(0).toUpperCase()}`;
+        }
+        return acc;
+    }, '');
+    return initials;
+};
+exports.getInitials = getInitials;

package/dist/js/cjs/helpers/grid.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Function to specify grid columns based on the number of grid items available
+ * @param {number} count The number of grid items to be split
+ * @param {number} maxCols The max number of columns wanted for the grid
+ * @returns {number}
+ */
+export declare const gridSplit: (count: number, maxCols?: number) => number;
+/**
+ * This function takes a number of columns in the grid and returns the grid gap and items padding.
+ * The values are defined in the Cards file in Figma.
+ * @param {number} cols The number of columns passed to the function.
+ * @returns {object}
+ */
+export declare const gridSpacing: (cols: number) => {
+    hasMaxWidth: boolean;
+    gap: string;
+};

package/dist/js/cjs/helpers/grid.js

@@ -0,0 +1,62 @@
+"use strict";
+/**
+ * Function to specify grid columns based on the number of grid items available
+ * @param {number} count The number of grid items to be split
+ * @param {number} maxCols The max number of columns wanted for the grid
+ * @returns {number}
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gridSpacing = exports.gridSplit = void 0;
+const gridSplit = (count, maxCols = 5) => {
+    let columns = 1;
+    switch (true) {
+        // The count is less than maxCols, so the columns is set to the count
+        case count > 0 && count < maxCols:
+            columns = count;
+            break;
+        // The count is greater than or equal to maxCols, so columns is set to maxCols
+        case count >= maxCols:
+            columns = maxCols;
+            break;
+        // The max number of columns of the grid is 12, so if maxCols is set to a greater number, columns is set to 12
+        case maxCols >= 12:
+            columns = 12;
+            break;
+        // The default number of columns is 1
+        default:
+            break;
+    }
+    return columns;
+};
+exports.gridSplit = gridSplit;
+/**
+ * This function takes a number of columns in the grid and returns the grid gap and items padding.
+ * The values are defined in the Cards file in Figma.
+ * @param {number} cols The number of columns passed to the function.
+ * @returns {object}
+ */
+const gridSpacing = (cols) => {
+    // Sets the default values for the grid gap and max-width, as well as the items' padding
+    let spacing = {
+        hasMaxWidth: false,
+        gap: 'medium',
+    };
+    switch (true) {
+        // If the columns are less than or equal to 2, the grid has a max width
+        case cols <= 2:
+            spacing.hasMaxWidth = true;
+            break;
+        // If the columns are equal to 4
+        case cols === 4:
+            break;
+        // If the columns are greater than 4
+        case cols > 4:
+            spacing.gap = 'small';
+            break;
+        // Else, just return the default object.
+        default:
+            break;
+    }
+    return spacing;
+};
+exports.gridSpacing = gridSpacing;

package/dist/js/cjs/helpers/incrementDisplayValue.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Function to increment display value for loader animations
+ * @param {number} displayedValue The current displayed value of the loader
+ * @param {number} value The final value of the loader
+ * @param {function} setDisplayedValue the function to set the display value
+ * @returns {number}
+ */
+export declare function incrementDisplayValue(displayedValue: number, value: number, setDisplayedValue: (value: number) => any | void): void;

package/dist/js/cjs/helpers/incrementDisplayValue.js

@@ -0,0 +1,15 @@
+"use strict";
+/**
+ * Function to increment display value for loader animations
+ * @param {number} displayedValue The current displayed value of the loader
+ * @param {number} value The final value of the loader
+ * @param {function} setDisplayedValue the function to set the display value
+ * @returns {number}
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.incrementDisplayValue = incrementDisplayValue;
+function incrementDisplayValue(displayedValue, value, setDisplayedValue) {
+    if (displayedValue < value) {
+        setDisplayedValue(displayedValue + 1);
+    }
+}

package/dist/js/cjs/helpers/index.d.ts

@@ -0,0 +1,9 @@
+import classNames from './classnames';
+import { getInitials } from './getInitials';
+export * from './caseFormats';
+export * from './grid';
+export * from './incrementDisplayValue';
+export * from './range';
+export * from './scroll';
+export * from './uid';
+export { classNames, getInitials };

package/dist/js/cjs/helpers/index.js

@@ -0,0 +1,30 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInitials = exports.classNames = void 0;
+const classnames_1 = __importDefault(require("./classnames"));
+exports.classNames = classnames_1.default;
+const getInitials_1 = require("./getInitials");
+Object.defineProperty(exports, "getInitials", { enumerable: true, get: function () { return getInitials_1.getInitials; } });
+__exportStar(require("./caseFormats"), exports);
+__exportStar(require("./grid"), exports);
+__exportStar(require("./incrementDisplayValue"), exports);
+__exportStar(require("./range"), exports);
+__exportStar(require("./scroll"), exports);
+__exportStar(require("./uid"), exports);

package/dist/js/cjs/helpers/range.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Function to generate a numeric range array
+ */
+export declare const range: (start: number, stop: number, step: number) => number[];

package/dist/js/cjs/helpers/range.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * Function to generate a numeric range array
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.range = void 0;
+const range = (start, stop, step) => step === 0 ? [] : Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
+exports.range = range;

package/dist/js/cjs/helpers/scroll.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Function to scroll an elements contents vertically or horizontally
+ */
+export declare const scrollHorizontal: (scrollTargetClass: string, scrollValue: number) => void;
+export declare const scrollVertical: (scrollTargetClass: string, scrollValue: number) => void;

package/dist/js/cjs/helpers/scroll.js

@@ -0,0 +1,14 @@
+"use strict";
+/**
+ * Function to scroll an elements contents vertically or horizontally
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollVertical = exports.scrollHorizontal = void 0;
+const scrollHorizontal = (scrollTargetClass, scrollValue) => {
+    document.querySelector(scrollTargetClass).scrollLeft += scrollValue;
+};
+exports.scrollHorizontal = scrollHorizontal;
+const scrollVertical = (scrollTargetClass, scrollValue) => {
+    document.querySelector(scrollTargetClass).scrollLeft += scrollValue;
+};
+exports.scrollVertical = scrollVertical;

package/dist/js/cjs/helpers/uid.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Function to generate a random ID
+ */
+export declare const uid: () => string;

package/dist/js/cjs/helpers/uid.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uid = void 0;
+/**
+ * Function to generate a random ID
+ */
+const uid = () => Math.random().toString(36).substring(2, 10) + Math.random().toString(36).substring(2, 10);
+exports.uid = uid;

package/dist/js/cjs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './utilities';
+export * from './helpers';

package/dist/js/cjs/index.js

@@ -0,0 +1,19 @@
+"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("./types"), exports);
+__exportStar(require("./utilities"), exports);
+__exportStar(require("./helpers"), exports);

package/dist/js/cjs/types/buttonVariants.d.ts

@@ -0,0 +1 @@
+export type BranduiButtonVariants = 'default' | 'primary' | 'secondary' | 'tertiary' | 'glyph' | 'underline' | 'external' | 'destroy';

package/dist/js/cjs/types/buttonVariants.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/js/cjs/types/colors.d.ts

@@ -0,0 +1,3 @@
+export type BranduiTypographyColors = 'theme-solid' | 'theme-gradient' | 'ui-hero' | 'ui-headline' | 'ui-body';
+export type BranduiChartBarColors = 'autumn' | 'bubblegum' | 'dark-teal' | 'deep-sea' | 'hot-pink' | 'lavender' | 'lilac' | 'purple' | 'rose' | 'salmon' | 'sky' | 'summer' | 'tiger' | 'turquoise' | 'vibe';
+export type BranduiChartBarGradients = 'bubblegum-to-dark-purple' | 'daffodil-to-salmon' | 'daffodil-to-teal' | 'daffodil-to-tiger' | 'dark-purple-to-bubblegum' | 'dark-teal-to-vibe' | 'electric-blue-to-vibe' | 'hot-pink-to-dark-purple' | 'hot-pink-to-lavender' | 'hot-pink-to-purple' | 'hot-pink-to-tiger' | 'purple-to-dark-purple' | 'purple-to-deep-sea' | 'purple-to-hot-pink' | 'sky-to-deep-sea' | 'tiger-to-hot-pink';

package/dist/js/cjs/types/colors.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/js/cjs/types/downloadableFiles.d.ts

@@ -0,0 +1 @@
+export type BranduiDownloadableFiles = 'doc' | 'docx' | 'odt' | 'pdf' | 'xls' | 'xlsx' | 'ods' | 'ppt' | 'pptx' | 'txt' | 'png' | 'jpg' | 'jpeg' | 'svg' | 'gif';

package/dist/js/cjs/types/downloadableFiles.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/js/cjs/types/icons.d.ts

@@ -0,0 +1,5 @@
+export type BranduiBrandIcons = 'actionable-results' | 'admin' | 'advisor-1' | 'advisor' | 'ai-generated-code' | 'ai-solutions' | 'ai-vulnerable-code' | 'ai' | 'alert-high' | 'alert-info' | 'alert-low' | 'alert-med' | 'api' | 'application-security' | 'assessments' | 'assignments' | 'attention' | 'automate' | 'care-deeply' | 'certificates' | 'ci-cd' | 'cli' | 'climate' | 'cloud-and-back' | 'cloud-launch' | 'cloud-security' | 'code-to-cloud' | 'code' | 'coding' | 'community' | 'compliance-automation' | 'customer-centricity' | 'design-applications' | 'dev-ai' | 'dev-friendly' | 'developer-security' | 'docs-published' | 'documentation' | 'donate' | 'efficiency' | 'enablement-and-education' | 'expert' | 'false-positive-rate' | 'family' | 'fast-and-accurate' | 'feedback' | 'fix-faster' | 'flexible' | 'forward-thinking' | 'get-started' | 'git-security' | 'ide' | 'integrations' | 'learn-always' | 'learn-snyk-1' | 'learn-snyk' | 'learning-paths' | 'live-environment' | 'live-video' | 'machine-learning' | 'meetup' | 'office-hours' | 'onboarding' | 'one-team' | 'ongoing' | 'platform' | 'pull-request' | 'query-cloud' | 'real-time-scan' | 'remediate-faster' | 'roadmap' | 'scaleable' | 'scanning' | 'secure-dependencies' | 'secure-projects' | 'security-automation' | 'security-awareness' | 'security-outnumbered' | 'security-team' | 'self-serve' | 'ship-it' | 'snyk-code-knowledgebase' | 'supply-chain-security' | 'support' | 'swag' | 'tech' | 'think-bigger' | 'tsd' | 'unified-policy-engine' | 'user-admin' | 'visibility-and-intelligence' | 'vuln-database' | 'write-policies' | 'zero-day';
+export type BranduiGeneralIcons = 'account' | 'add' | 'ai-sparkles' | 'ambassadors' | 'apple-podcasts' | 'arrow-back' | 'arrow-down' | 'arrow-forward' | 'arrow-left' | 'arrow-right' | 'arrow-top-right' | 'arrow-up' | 'article' | 'api-web' | 'attachment' | 'ballot' | 'bio' | 'bitbucket' | 'blocks' | 'blog' | 'booklet' | 'brain' | 'briefcase' | 'bug' | 'build-code' | 'byline' | 'calendar-today' | 'case-study' | 'check' | 'check-circle' | 'check-shield' | 'checkbox-hover' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'close' | 'collapse' | 'compliance' | 'contact' | 'copy-link' | 'copy-to-clipboard' | 'customers' | 'developer' | 'discord' | 'discord-bubble' | 'east' | 'ebook' | 'eclipse' | 'events' | 'expand' | 'facebook' | 'facebook-circle' | 'filter' | 'fix' | 'git-fork' | 'git-issue' | 'github' | 'glassdoor' | 'glossary' | 'google' | 'government' | 'grading' | 'hand-wave' | 'handbook' | 'headphones' | 'info-scan' | 'info-warning' | 'infographic' | 'insert-chart' | 'insert-drive-file' | 'instagram' | 'keyboard-arrow-down' | 'labs' | 'language' | 'library' | 'light-bulb' | 'linkedin' | 'livestream' | 'location' | 'lock-heart' | 'mail-inbox' | 'mail-outline' | 'menu' | 'mic' | 'monetization' | 'moon' | 'more-horizontal' | 'newsroom' | 'npm' | 'open-in-new' | 'partners' | 'pie-chart' | 'play-circle' | 'play' | 'podcast' | 'press-release' | 'quote' | 'reddit' | 'remove' | 'risk' | 'search' | 'send-mail' | 'services' | 'shield-ai' | 'shield-chevron-up' | 'shield-star' | 'shield' | 'snyk-apprisk' | 'snyk-code' | 'snyk-container' | 'snyk-docs' | 'snyk-iac' | 'snyk-learn' | 'snyk-oss' | 'snyk-support' | 'spotify' | 'star-outline' | 'sun' | 'supply-chain' | 'time' | 'twitch' | 'twitter' | 'updates' | 'videocam' | 'vuln-db' | 'vulnvortex' | 'workflows' | 'x' | 'youtube';
+export type AllIcons = BranduiBrandIcons | BranduiGeneralIcons;
+export type BranduiIconSizes = 'sm' | 'rg' | 'md' | 'lg';
+export type BranduiGeneralIconSizes = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';

package/dist/js/cjs/types/icons.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/js/cjs/types/index.d.ts

@@ -0,0 +1,8 @@
+export * from './buttonVariants';
+export * from './colors';
+export * from './downloadableFiles';
+export * from './icons';
+export * from './logos';
+export * from './mediaCategories';
+export * from './patchPoses';
+export * from './sizes';

package/dist/js/cjs/types/index.js

@@ -0,0 +1,24 @@
+"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("./buttonVariants"), exports);
+__exportStar(require("./colors"), exports);
+__exportStar(require("./downloadableFiles"), exports);
+__exportStar(require("./icons"), exports);
+__exportStar(require("./logos"), exports);
+__exportStar(require("./mediaCategories"), exports);
+__exportStar(require("./patchPoses"), exports);
+__exportStar(require("./sizes"), exports);

package/dist/js/cjs/types/logos.d.ts

@@ -0,0 +1,3 @@
+export type BranduiSnykLogos = 'default' | 'default-solid' | 'icon' | 'icon-solid' | 'vertical' | 'vertical-solid' | 'wordmark' | 'security-labs-solid' | 'icon-security-labs-solid' | 'labs-solid' | 'labs-mono' | 'labs-mono-reverse';
+export type BranduiProductLogos = 'snyk-apprisk' | 'snyk-cloud' | 'snyk-code' | 'snyk-container' | 'snyk-deepcodeai' | 'snyk-iac' | 'snyk-learn' | 'snyk-oss';
+export type AllLogos = BranduiSnykLogos | BranduiProductLogos;

package/dist/js/cjs/types/logos.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/js/cjs/types/mediaCategories.d.ts

@@ -0,0 +1 @@
+export type BranduiMediaCategories = 'analyst-report' | 'article' | 'blog' | 'byline' | 'buyers-guide' | 'case-study' | 'cheat-sheet' | 'ebook' | 'event' | 'infographic' | 'lesson' | 'live-stream' | 'podcast' | 'press-release' | 'report' | 'video' | 'webinar' | 'white-paper';

package/dist/js/cjs/types/mediaCategories.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/js/cjs/types/patchPoses.d.ts

@@ -0,0 +1 @@
+export type BranduiPatchPoses = 'pose-alert' | 'pose-standing';

package/dist/js/cjs/types/patchPoses.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/js/cjs/types/sizes.d.ts

@@ -0,0 +1,4 @@
+export type BranduiSizing = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
+export type BranduiPadding = BranduiSizing | 'none' | 'hairline' | 'thin' | 'slim' | 'full';
+export type BranduiSpacing = BranduiSizing | 'none' | 'full';
+export type BranduiAvatarSizes = BranduiSizing;

package/dist/js/cjs/types/sizes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/js/cjs/utilities/buttonVariants.d.ts

@@ -0,0 +1,3 @@
+import { BranduiButtonVariants } from '../types';
+declare const _default: readonly BranduiButtonVariants[];
+export default _default;

package/dist/js/cjs/utilities/buttonVariants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const buttonVariants = ['default', 'primary', 'secondary', 'tertiary', 'neutral', 'arrow', 'glyph', 'underline', 'external', 'destroy'];
+exports.default = buttonVariants;

package/dist/js/cjs/utilities/colors.d.ts

@@ -0,0 +1,42 @@
+import { BranduiTypographyColors, BranduiChartBarColors, BranduiChartBarGradients } from '../types';
+export declare const branduiTypographyColors: BranduiTypographyColors[];
+export declare const branduiChartBarColors: BranduiChartBarColors[];
+export declare const branduiChartBarGradients: BranduiChartBarGradients[];
+export declare const brandColors: {
+    'dark-purple': string;
+    purple: string;
+    lavender: string;
+    black: string;
+    space: string;
+    midnight: string;
+    ocean: string;
+    dawn: string;
+    steel: string;
+    smoke: string;
+    snow: string;
+    white: string;
+    rose: string;
+    salmon: string;
+    'hot-pink': string;
+    bubblegum: string;
+    autumn: string;
+    tiger: string;
+    summer: string;
+    daffodil: string;
+    turquoise: string;
+    'dark-teal': string;
+    teal: string;
+    vibe: string;
+    'deep-sea': string;
+    'electric-blue': string;
+    'electric-blue-dark': string;
+    periwinkle: string;
+    lilac: string;
+    sky: string;
+    'cotton-candy': string;
+};
+export declare const brandHexes: {
+    [x: string]: string;
+};
+declare const _default: string[];
+export default _default;

package/dist/js/cjs/utilities/colors.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.brandHexes = exports.brandColors = exports.branduiChartBarGradients = exports.branduiChartBarColors = exports.branduiTypographyColors = void 0;
+// Used for the colors that certain typography elements use
+exports.branduiTypographyColors = ['theme-solid', 'theme-gradient', 'ui-hero', 'ui-headline', 'ui-body'];
+// Used for charts' bars
+exports.branduiChartBarColors = [
+    'autumn',
+    'bubblegum',
+    'dark-teal',
+    'deep-sea',
+    'hot-pink',
+    'lavender',
+    'lilac',
+    'purple',
+    'rose',
+    'salmon',
+    'sky',
+    'summer',
+    'tiger',
+    'turquoise',
+    'vibe',
+];
+// Used for charts' bars
+exports.branduiChartBarGradients = [
+    'bubblegum-to-dark-purple',
+    'daffodil-to-salmon',
+    'daffodil-to-teal',
+    'daffodil-to-tiger',
+    'dark-purple-to-bubblegum',
+    'dark-teal-to-vibe',
+    'electric-blue-to-vibe',
+    'hot-pink-to-dark-purple',
+    'hot-pink-to-lavender',
+    'hot-pink-to-purple',
+    'hot-pink-to-tiger',
+    'purple-to-dark-purple',
+    'purple-to-deep-sea',
+    'purple-to-hot-pink',
+    'sky-to-deep-sea',
+    'tiger-to-hot-pink',
+];
+// Used for pie charts. Consider different implementation in the future
+exports.brandColors = {
+    'dark-purple': '#441c99',
+    purple: '#9043c6',
+    lavender: '#c481f3',
+    black: '#000',
+    space: '#01011e',
+    midnight: '#030328',
+    ocean: '#181846',
+    dawn: '#383f76',
+    steel: '#555463',
+    smoke: '#6d6d9c',
+    snow: '#f6f7fb',
+    white: '#fff',
+    rose: '#c82d53',
+    salmon: '#f97a99',
+    'hot-pink': '#e555ac',
+    bubblegum: '#ff78e1',
+    autumn: '#c04c0a',
+    tiger: '#f99048',
+    summer: '#f9c748',
+    daffodil: '#ffe792',
+    turquoise: '#097d98',
+    'dark-teal': '#168982',
+    teal: '#43b59a',
+    vibe: '#4bd6b5',
+    'deep-sea': '#0a26b8',
+    'electric-blue': '#145deb',
+    'electric-blue-dark': '#3ea2ff',
+    periwinkle: '#9bcfff',
+    lilac: '#8598fb',
+    sky: '#14c4eb',
+    'cotton-candy': '#c0f5f2',
+};
+exports.brandHexes = Object.entries(exports.brandColors)
+    .map(([key, value]) => ({ [key]: value }))
+    .reduce((result, obj) => {
+    const key = Object.keys(obj)[0];
+    const value = obj[key];
+    return { ...result, [key]: value };
+}, {});
+// All brand colors and gradients, but not inlcuding the base colors
+// eslint-disable-next-line import/no-anonymous-default-export
+exports.default = [...Object.keys(exports.brandColors)];

package/dist/js/cjs/utilities/downloadableFiles.d.ts

@@ -0,0 +1,2 @@
+import { BranduiDownloadableFiles } from '../types';
+export declare const DOWNLOADABLE_FILES: BranduiDownloadableFiles[];

package/dist/js/cjs/utilities/downloadableFiles.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DOWNLOADABLE_FILES = void 0;
+// Array of downloadable files on the site
+exports.DOWNLOADABLE_FILES = [
+    'doc',
+    'docx',
+    'odt',
+    'pdf',
+    'xls',
+    'xlsx',
+    'ods',
+    'ppt',
+    'pptx',
+    'txt',
+    'png',
+    'jpg',
+    'jpeg',
+    'svg',
+    'gif',
+];

package/dist/js/cjs/utilities/icons.d.ts

@@ -0,0 +1,7 @@
+import { BranduiBrandIcons, BranduiGeneralIcons, AllIcons, BranduiIconSizes, BranduiGeneralIconSizes } from '../types';
+export declare const brandIcons: BranduiBrandIcons[];
+export declare const generalIcons: BranduiGeneralIcons[];
+export declare const branduiIconSizes: BranduiIconSizes[];
+export declare const branduiGeneralIconSizes: BranduiGeneralIconSizes[];
+declare const allIcons: Readonly<AllIcons[]>;
+export default allIcons;

package/dist/js/cjs/utilities/icons.js

@@ -0,0 +1,238 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.branduiGeneralIconSizes = exports.branduiIconSizes = exports.generalIcons = exports.brandIcons = void 0;
+// List of all Brand and General Icons
+exports.brandIcons = [
+    'actionable-results',
+    'admin',
+    'advisor-1',
+    'advisor',
+    'ai-generated-code',
+    'ai-solutions',
+    'ai-vulnerable-code',
+    'ai',
+    'alert-high',
+    'alert-info',
+    'alert-low',
+    'alert-med',
+    'api',
+    'application-security',
+    'assessments',
+    'assignments',
+    'attention',
+    'automate',
+    'care-deeply',
+    'certificates',
+    'ci-cd',
+    'cli',
+    'climate',
+    'cloud-and-back',
+    'cloud-launch',
+    'cloud-security',
+    'code-to-cloud',
+    'code',
+    'coding',
+    'community',
+    'compliance-automation',
+    'customer-centricity',
+    'design-applications',
+    'dev-ai',
+    'dev-friendly',
+    'developer-security',
+    'docs-published',
+    'documentation',
+    'donate',
+    'efficiency',
+    'enablement-and-education',
+    'expert',
+    'false-positive-rate',
+    'family',
+    'fast-and-accurate',
+    'feedback',
+    'fix-faster',
+    'flexible',
+    'forward-thinking',
+    'get-started',
+    'git-security',
+    'ide',
+    'integrations',
+    'learn-always',
+    'learn-snyk-1',
+    'learn-snyk',
+    'learning-paths',
+    'live-environment',
+    'live-video',
+    'machine-learning',
+    'meetup',
+    'office-hours',
+    'onboarding',
+    'one-team',
+    'ongoing',
+    'platform',
+    'pull-request',
+    'query-cloud',
+    'real-time-scan',
+    'remediate-faster',
+    'roadmap',
+    'scaleable',
+    'scanning',
+    'secure-dependencies',
+    'secure-projects',
+    'security-automation',
+    'security-awareness',
+    'security-outnumbered',
+    'security-team',
+    'self-serve',
+    'ship-it',
+    'snyk-code-knowledgebase',
+    'supply-chain-security',
+    'support',
+    'swag',
+    'tech',
+    'think-bigger',
+    'tsd',
+    'unified-policy-engine',
+    'user-admin',
+    'visibility-and-intelligence',
+    'vuln-database',
+    'write-policies',
+    'zero-day',
+];
+exports.generalIcons = [
+    'account',
+    'add',
+    'ai-sparkles',
+    'ambassadors',
+    'apple-podcasts',
+    'arrow-back',
+    'arrow-down',
+    'arrow-forward',
+    'arrow-left',
+    'arrow-right',
+    'arrow-top-right',
+    'arrow-up',
+    'article',
+    'api-web',
+    'attachment',
+    'ballot',
+    'bio',
+    'bitbucket',
+    'blocks',
+    'blog',
+    'booklet',
+    'brain',
+    'briefcase',
+    'bug',
+    'build-code',
+    'byline',
+    'calendar-today',
+    'case-study',
+    'check',
+    'check-circle',
+    'check-shield',
+    'checkbox-hover',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'chevron-up',
+    'close',
+    'collapse',
+    'compliance',
+    'contact',
+    'copy-link',
+    'copy-to-clipboard',
+    'customers',
+    'developer',
+    'discord',
+    'discord-bubble',
+    'east',
+    'ebook',
+    'eclipse',
+    'events',
+    'expand',
+    'facebook',
+    'facebook-circle',
+    'filter',
+    'fix',
+    'git-fork',
+    'git-issue',
+    'github',
+    'glassdoor',
+    'glossary',
+    'google',
+    'government',
+    'grading',
+    'hand-wave',
+    'handbook',
+    'headphones',
+    'info-scan',
+    'info-warning',
+    'infographic',
+    'insert-chart',
+    'insert-drive-file',
+    'instagram',
+    'keyboard-arrow-down',
+    'labs',
+    'language',
+    'library',
+    'light-bulb',
+    'linkedin',
+    'livestream',
+    'location',
+    'lock-heart',
+    'mail-inbox',
+    'mail-outline',
+    'menu',
+    'mic',
+    'monetization',
+    'moon',
+    'more-horizontal',
+    'newsroom',
+    'npm',
+    'open-in-new',
+    'partners',
+    'pie-chart',
+    'play-circle',
+    'play',
+    'podcast',
+    'press-release',
+    'quote',
+    'reddit',
+    'remove',
+    'risk',
+    'search',
+    'send-mail',
+    'services',
+    'shield-ai',
+    'shield-chevron-up',
+    'shield-star',
+    'shield',
+    'snyk-apprisk',
+    'snyk-code',
+    'snyk-container',
+    'snyk-docs',
+    'snyk-iac',
+    'snyk-learn',
+    'snyk-oss',
+    'snyk-support',
+    'spotify',
+    'star-outline',
+    'sun',
+    'supply-chain',
+    'time',
+    'twitch',
+    'twitter',
+    'updates',
+    'videocam',
+    'vuln-db',
+    'vulnvortex',
+    'workflows',
+    'x',
+    'youtube',
+];
+// Used for BrandIcons, whih are images
+exports.branduiIconSizes = ['sm', 'rg', 'md', 'lg'];
+// Used for GeneralIcons, which are fonts
+exports.branduiGeneralIconSizes = ['extra-small', 'small', 'medium', 'large', 'extra-large', 'huge'];
+const allIcons = [...exports.brandIcons, ...exports.generalIcons];
+exports.default = allIcons;

package/dist/js/cjs/utilities/index.d.ts

@@ -0,0 +1,8 @@
+export * from './buttonVariants';
+export * from './colors';
+export * from './downloadableFiles';
+export * from './icons';
+export * from './logos';
+export * from './mediaCategories';
+export * from './patchPoses';
+export * from './sizes';

package/dist/js/cjs/utilities/index.js

@@ -0,0 +1,24 @@
+"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("./buttonVariants"), exports);
+__exportStar(require("./colors"), exports);
+__exportStar(require("./downloadableFiles"), exports);
+__exportStar(require("./icons"), exports);
+__exportStar(require("./logos"), exports);
+__exportStar(require("./mediaCategories"), exports);
+__exportStar(require("./patchPoses"), exports);
+__exportStar(require("./sizes"), exports);

package/dist/js/cjs/utilities/logos.d.ts

@@ -0,0 +1,5 @@
+import { BranduiSnykLogos, BranduiProductLogos, AllLogos } from '../types';
+export declare const snykLogos: BranduiSnykLogos[];
+export declare const productLogos: BranduiProductLogos[];
+declare const allLogos: Readonly<AllLogos[]>;
+export default allLogos;

package/dist/js/cjs/utilities/logos.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.productLogos = exports.snykLogos = void 0;
+exports.snykLogos = [
+    'default',
+    'default-solid',
+    'icon',
+    'icon-solid',
+    'vertical',
+    'vertical-solid',
+    'wordmark',
+    'security-labs-solid',
+    'icon-security-labs-solid',
+    'labs-solid',
+    'labs-mono',
+    'labs-mono-reverse',
+];
+exports.productLogos = [
+    'snyk-apprisk',
+    'snyk-cloud',
+    'snyk-code',
+    'snyk-container',
+    'snyk-deepcodeai',
+    'snyk-iac',
+    'snyk-learn',
+    'snyk-oss',
+];
+const allLogos = [...exports.productLogos, ...exports.snykLogos];
+exports.default = allLogos;

package/dist/js/cjs/utilities/mediaCategories.d.ts

@@ -0,0 +1,3 @@
+import { BranduiMediaCategories } from '../types';
+declare const mediaCategories: BranduiMediaCategories[];
+export default mediaCategories;

package/dist/js/cjs/utilities/mediaCategories.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// List of all media categories
+const mediaCategories = [
+    'analyst-report',
+    'article',
+    'blog',
+    'byline',
+    'buyers-guide',
+    'case-study',
+    'cheat-sheet',
+    'ebook',
+    'event',
+    'infographic',
+    'lesson',
+    'live-stream',
+    'podcast',
+    'press-release',
+    'report',
+    'video',
+    'webinar',
+    'white-paper',
+];
+exports.default = mediaCategories;

package/dist/js/cjs/utilities/patchPoses.d.ts

@@ -0,0 +1,3 @@
+import { BranduiPatchPoses } from '../types';
+declare const patchPoses: BranduiPatchPoses[];
+export default patchPoses;

package/dist/js/cjs/utilities/patchPoses.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// List of all Patch Pose variants
+const patchPoses = ['pose-alert', 'pose-standing'];
+exports.default = patchPoses;

package/dist/js/cjs/utilities/sizes.d.ts

@@ -0,0 +1,5 @@
+import { BranduiPadding, BranduiSpacing, BranduiAvatarSizes } from '../types';
+export declare const layoutSizes: string[];
+export declare const branduiPadding: BranduiPadding[];
+export declare const branduiSpacing: BranduiSpacing[];
+export declare const avatarSizes: BranduiAvatarSizes[];

package/dist/js/cjs/utilities/sizes.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.avatarSizes = exports.branduiSpacing = exports.branduiPadding = exports.layoutSizes = void 0;
+// List of all Size variants
+exports.layoutSizes = [...Array(13).keys()].map(String); //Not sure how to tyoe this yet
+exports.branduiPadding = [
+    'none',
+    'hairline',
+    'thin',
+    'slim',
+    'extra-small',
+    'small',
+    'medium',
+    'large',
+    'extra-large',
+    'huge',
+    'full',
+];
+exports.branduiSpacing = ['none', 'extra-small', 'small', 'medium', 'large', 'extra-large', 'huge', 'full'];
+exports.avatarSizes = ['extra-small', 'small', 'medium', 'large', 'extra-large', 'huge'];

package/package.json

@@ -1,13 +1,14 @@
 {
 	"name": "@snyk-mktg/brand-ui",
-	"version": "2.4.1",
+	"version": "2.4.2-canary.1",
 	"description": "The official style library for Snyk’s BrandUI Design System",
 	"scripts": {
 		"dev:css": "gulp devCss",
 		"build": "gulp",
 		"test": "jest",
 		"lint": "sass-lint -v",
-		"lint:fix": "sass-lint-auto-fix"
+		"lint:fix": "sass-lint-auto-fix",
+		"compile": "rm -rf dist/js && tsc -p tsconfig.build.json && tsc -p tsconfig.build.json --module CommonJs --moduleResolution node --outDir dist/js/cjs"
 	},
 	"type": "module",
 	"repository": {
@@ -25,6 +26,10 @@
 	"files": [
 		"dist"
 	],
+	"exports": {
+		"import": "./dist/js/index.js",
+		"require": "./dist/js/cjs/index.js"
+	},
 	"devDependencies": {
 		"@jest/globals": "^29.7.0",
 		"del": "^8.0.0",