@pega/cosmos-react-core 3.0.0-dev.2.0 → 3.0.0-dev.4.1

package/lib/styles/gradients.d.ts

@@ -0,0 +1,102 @@
+interface ColorStop {
+    /** CSS color string. */
+    color: string;
+    /** Position along the gradient expressed as a number from 0 to 1. */
+    position: number;
+}
+declare type LinearGradient = ColorStop[];
+export declare const gradientMap: {
+    grayscale: {
+        color: string;
+        position: number;
+    }[];
+    'persian-blue': {
+        color: string;
+        position: number;
+    }[];
+    'persian-green': {
+        color: string;
+        position: number;
+    }[];
+    'pastel-orange': {
+        color: string;
+        position: number;
+    }[];
+    'japanese-laurel': {
+        color: string;
+        position: number;
+    }[];
+    'mango-tango': {
+        color: string;
+        position: number;
+    }[];
+    valencia: {
+        color: string;
+        position: number;
+    }[];
+    'fuchsia-blue': {
+        color: string;
+        position: number;
+    }[];
+    'faded-red': {
+        color: string;
+        position: number;
+    }[];
+    rope: {
+        color: string;
+        position: number;
+    }[];
+    silver: {
+        color: string;
+        position: number;
+    }[];
+    'blue-yellow': {
+        color: string;
+        position: number;
+    }[];
+    'green-yellow': {
+        color: string;
+        position: number;
+    }[];
+    'ruby-yellow': {
+        color: string;
+        position: number;
+    }[];
+    'purple-blue': {
+        color: string;
+        position: number;
+    }[];
+    'violet-rose': {
+        color: string;
+        position: number;
+    }[];
+    'negative-attention-positive': {
+        color: string;
+        position: number;
+    }[];
+    'negative-attention-positive-protan': {
+        color: string;
+        position: number;
+    }[];
+    'negative-attention-positive-deutan': {
+        color: string;
+        position: number;
+    }[];
+    'hot-cold': {
+        color: string;
+        position: number;
+    }[];
+    'two-extremes': {
+        color: string;
+        position: number;
+    }[];
+};
+export declare const colorInGradient: ([...gradient]: LinearGradient, targetPosition: number) => string;
+export declare const colorInGradientByName: (name: keyof typeof gradientMap, targetPosition: number) => string;
+export declare const colorsForCategories: (count: number, { gradients, steps }?: {
+    gradients?: LinearGradient[] | undefined;
+    steps?: number[] | undefined;
+}) => string[];
+export declare const toLinearGradient: (gradient: LinearGradient) => string;
+export {};
+//# sourceMappingURL=gradients.d.ts.map

package/lib/styles/gradients.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradients.d.ts","sourceRoot":"","sources":["../../src/styles/gradients.ts"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACjB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,aAAK,cAAc,GAAG,SAAS,EAAE,CAAC;AAElC,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4JvB,CAAC;AAEF,eAAO,MAAM,eAAe,kDAAmD,MAAM,KAAG,MA0CvF,CAAC;AAEF,eAAO,MAAM,qBAAqB,SAC1B,MAAM,kBAAkB,kBACd,MAAM,KACrB,MAEF,CAAC;AAEF,eAAO,MAAM,mBAAmB,UACvB,MAAM;;;MAkBZ,MAAM,EAgBR,CAAC;AAEF,eAAO,MAAM,gBAAgB,gCAA+B,MAO3D,CAAC"}

package/lib/styles/gradients.js

@@ -0,0 +1,232 @@
+import { mix } from 'polished';
+export const gradientMap = {
+    grayscale: [
+        { color: 'hsl(0, 100%, 100%)', position: 0 },
+        { color: 'hsl(0, 100%, 0%)', position: 1 }
+    ],
+    'persian-blue': [
+        { color: 'hsl(210, 50%, 94%)', position: 0 },
+        { color: 'hsl(210, 46%, 63%)', position: 1 / 3 },
+        { color: 'hsl(206, 100%, 33%)', position: 2 / 3 },
+        { color: 'hsl(210, 100%, 27%)', position: 1 }
+    ],
+    'persian-green': [
+        { color: 'hsl(175, 35%, 94%)', position: 0 },
+        { color: 'hsl(175, 42%, 65%)', position: 1 / 3 },
+        { color: 'hsl(175, 100%, 33%)', position: 2 / 3 },
+        { color: 'hsl(175, 100%, 27%)', position: 1 }
+    ],
+    'pastel-orange': [
+        { color: 'hsl(36, 100%, 97%)', position: 0 },
+        { color: 'hsl(36, 100%, 79%)', position: 1 / 3 },
+        { color: 'hsl(36, 100%, 64%)', position: 2 / 3 },
+        { color: 'hsl(36, 99%, 61%)', position: 1 }
+    ],
+    'japanese-laurel': [
+        { color: 'hsl(135, 21%, 94%)', position: 0 },
+        { color: 'hsl(135, 24%, 61%)', position: 1 / 3 },
+        { color: 'hsl(135, 54%, 33%)', position: 2 / 3 },
+        { color: 'hsl(135, 60%, 26%)', position: 1 }
+    ],
+    'mango-tango': [
+        { color: 'hsl(23, 100%, 96%)', position: 0 },
+        { color: 'hsl(23, 100%, 78%)', position: 1 / 3 },
+        { color: 'hsl(23, 100%, 62%)', position: 2 / 3 },
+        { color: 'hsl(23, 100%, 53%)', position: 1 }
+    ],
+    valencia: [
+        { color: 'hsl(1, 87%, 96%)', position: 0 },
+        { color: 'hsl(1, 72%, 75%)', position: 1 / 3 },
+        { color: 'hsl(1, 67%, 56%)', position: 2 / 3 },
+        { color: 'hsl(1, 82%, 41%)', position: 1 }
+    ],
+    'fuchsia-blue': [
+        { color: 'hsl(259, 45%, 96%)', position: 0 },
+        { color: 'hsl(259, 45%, 78%)', position: 1 / 3 },
+        { color: 'hsl(259, 43%, 56%)', position: 2 / 3 },
+        { color: 'hsl(259, 40%, 49%)', position: 1 }
+    ],
+    'faded-red': [
+        { color: 'hsl(360, 100%, 95%)', position: 0 },
+        { color: 'hsl(360, 100%, 85%)', position: 1 / 3 },
+        { color: 'hsl(360, 100%, 75%)', position: 2 / 3 },
+        { color: 'hsl(360, 100%, 70%)', position: 1 }
+    ],
+    rope: [
+        { color: 'hsl(25, 31%, 93%)', position: 0 },
+        { color: 'hsl(25, 32%, 62%)', position: 1 / 3 },
+        { color: 'hsl(25, 59%, 35%)', position: 2 / 3 },
+        { color: 'hsl(25, 64%, 30%)', position: 1 }
+    ],
+    silver: [
+        { color: 'hsl(15, 18%, 97%)', position: 0 },
+        { color: 'hsl(15, 9%, 79%)', position: 1 / 3 },
+        { color: 'hsl(15, 11%, 65%)', position: 2 / 3 },
+        { color: 'hsl(15, 9%, 58%)', position: 1 }
+    ],
+    'blue-yellow': [
+        { color: 'hsl(56, 100%, 93%)', position: 0 },
+        { color: 'hsl(144, 46%, 79%)', position: 2 / 10 },
+        { color: 'hsl(185, 53%, 58%)', position: 4 / 10 },
+        { color: 'hsl(191, 56%, 52%)', position: 5 / 10 },
+        { color: 'hsl(195, 62%, 48%)', position: 6 / 10 },
+        { color: 'hsl(206, 67%, 37%)', position: 8 / 10 },
+        { color: 'hsl(215, 62%, 30%)', position: 1 }
+    ],
+    'green-yellow': [
+        { color: 'hsl(56, 100%, 93%)', position: 0 },
+        { color: 'hsl(88, 61%, 85%)', position: 2 / 10 },
+        { color: 'hsl(125, 47%, 78%)', position: 4 / 10 },
+        { color: 'hsl(148, 45%, 65%)', position: 5 / 10 },
+        { color: 'hsl(159, 47%, 50%)', position: 6 / 10 },
+        { color: 'hsl(173, 80%, 30%)', position: 8 / 10 },
+        { color: 'hsl(178, 73%, 22%)', position: 1 }
+    ],
+    'ruby-yellow': [
+        { color: 'hsl(56, 100%, 93%)', position: 0 },
+        { color: 'hsl(40, 100%, 83%)', position: 2 / 10 },
+        { color: 'hsl(19, 100%, 75%)', position: 4 / 10 },
+        { color: 'hsl(3, 100%, 73%)', position: 5 / 10 },
+        { color: 'hsl(350, 81%, 62%)', position: 6 / 10 },
+        { color: 'hsl(343, 54%, 55%)', position: 8 / 10 },
+        { color: 'hsl(330, 40%, 36%)', position: 1 }
+    ],
+    'purple-blue': [
+        { color: 'hsl(190, 42%, 97%)', position: 0 },
+        { color: 'hsl(205, 51%, 84%)', position: 2 / 10 },
+        { color: 'hsl(212, 47%, 73%)', position: 4 / 10 },
+        { color: 'hsl(219, 41%, 70%)', position: 5 / 10 },
+        { color: 'hsl(253, 32%, 66%)', position: 6 / 10 },
+        { color: 'hsl(272, 27%, 49%)', position: 8 / 10 },
+        { color: 'hsl(272, 37%, 32%)', position: 1 }
+    ],
+    'violet-rose': [
+        { color: 'hsl(18, 100%, 98%)', position: 0 },
+        { color: 'hsl(359, 100%, 91%)', position: 2 / 10 },
+        { color: 'hsl(336, 96%, 77%)', position: 4 / 10 },
+        { color: 'hsl(325, 73%, 65%)', position: 5 / 10 },
+        { color: 'hsl(319, 58%, 58%)', position: 6 / 10 },
+        { color: 'hsl(287, 38%, 45%)', position: 8 / 10 },
+        { color: 'hsl(259, 43%, 35%)', position: 1 }
+    ],
+    'negative-attention-positive': [
+        { color: 'hsl(2, 67%, 56%)', position: 0 },
+        { color: 'hsl(21, 87%, 60%)', position: 2 / 10 },
+        { color: 'hsl(36, 100%, 64%)', position: 4 / 10 },
+        { color: 'hsl(50, 95%, 75%)', position: 5 / 10 },
+        { color: 'hsl(85, 72%, 67%)', position: 6 / 10 },
+        { color: 'hsl(120, 49%, 60%)', position: 8 / 10 },
+        { color: 'hsl(135, 53%, 33%)', position: 1 }
+    ],
+    'negative-attention-positive-protan': [
+        { color: 'hsl(344, 67%, 44%)', position: 0 },
+        { color: 'hsl(351, 66%, 59%)', position: 2 / 10 },
+        { color: 'hsl(360, 100%, 84%)', position: 4 / 10 },
+        { color: 'hsl(0, 0%, 89%)', position: 5 / 10 },
+        { color: 'hsl(110, 46%, 80%)', position: 6 / 10 },
+        { color: 'hsl(120, 49%, 60%)', position: 8 / 10 },
+        { color: 'hsl(135, 53%, 33%)', position: 1 }
+    ],
+    // cspell:disable-next-line
+    'negative-attention-positive-deutan': [
+        { color: 'hsl(315, 64%, 45%)', position: 0 },
+        { color: 'hsl(313, 83%, 62%)', position: 2 / 10 },
+        { color: 'hsl(313, 100%, 80%)', position: 4 / 10 },
+        { color: 'hsl(0, 0%, 89%)', position: 5 / 10 },
+        { color: 'hsl(110, 46%, 80%)', position: 6 / 10 },
+        { color: 'hsl(120, 49%, 60%)', position: 8 / 10 },
+        { color: 'hsl(135, 53%, 33%)', position: 1 }
+    ],
+    'hot-cold': [
+        { color: 'hsl(212, 100%, 27%)', position: 0 },
+        { color: 'hsl(213, 40%, 49%)', position: 2 / 10 },
+        { color: 'hsl(210, 45%, 69%)', position: 4 / 10 },
+        { color: 'hsl(0, 0%, 89%)', position: 5 / 10 },
+        { color: 'hsl(360, 100%, 84%)', position: 6 / 10 },
+        { color: 'hsl(351, 66%, 59%)', position: 8 / 10 },
+        { color: 'hsl(344, 67%, 44%)', position: 1 }
+    ],
+    'two-extremes': [
+        { color: 'hsl(240, 30%, 39%)', position: 0 },
+        { color: 'hsl(271, 27%, 63%)', position: 2 / 10 },
+        { color: 'hsl(293, 25%, 87%)', position: 4 / 10 },
+        { color: 'hsl(0, 0%, 89%)', position: 5 / 10 },
+        { color: 'hsl(171, 37%, 86%)', position: 6 / 10 },
+        { color: 'hsl(167, 41%, 51%)', position: 8 / 10 },
+        { color: 'hsl(163, 44%, 16%)', position: 1 }
+    ]
+};
+export const colorInGradient = ([...gradient], targetPosition) => {
+    // Return transparent for an empty gradient.
+    if (gradient.length === 0)
+        return 'transparent';
+    // Return the color for single element gradient.
+    if (gradient.length === 1)
+        return gradient[0].color;
+    // Clamp position to interval from 0 to 1.
+    targetPosition = Math.min(Math.max(targetPosition, 0), 1);
+    // Extend the the start of the gradient to 0 if necessary.
+    if (gradient[0].position !== 0)
+        gradient.unshift({ color: gradient[0].color, position: 0 });
+    // Extend the the end of the gradient to 1 if necessary.
+    if (gradient[gradient.length - 1].position !== 1)
+        gradient.push({ color: gradient[gradient.length - 1].color, position: 1 });
+    for (let i = 0; i < gradient.length; i += 1) {
+        const current = gradient[i];
+        // If target position is the same as the current position, return the color at the current position.
+        if (targetPosition === current.position)
+            return current.color;
+        // If target position is less than the current position, it must be between the previous position and current position.
+        if (targetPosition < current.position) {
+            const previous = gradient[i - 1];
+            // Calculate how far the targetPosition is between the previousPosition and the currentPosition.
+            const percentage = (targetPosition - previous.position) / (current.position - previous.position);
+            try {
+                return mix(percentage, current.color, previous.color);
+            }
+            catch {
+                // Polished mix throws on invalid color.
+                return 'transparent';
+            }
+        }
+    }
+    // Failsafe return.
+    return 'transparent';
+};
+export const colorInGradientByName = (name, targetPosition) => {
+    return colorInGradient(gradientMap[name] ?? [], targetPosition);
+};
+export const colorsForCategories = (count, { gradients = [
+    'persian-blue',
+    'persian-green',
+    'pastel-orange',
+    'japanese-laurel',
+    'mango-tango',
+    'valencia',
+    'fuchsia-blue',
+    'faded-red',
+    'rope',
+    'silver'
+].map(name => gradientMap[name]), steps = [2 / 3, 1 / 3, 1, 0, 1 / 2] } = {}) => {
+    // Colors per gradient
+    const perGradient = Math.floor(count / gradients.length);
+    // Number of gradients with 1 extra color
+    const extra = count % gradients.length;
+    const colors = [];
+    for (let i = 0; i < gradients.length; i += 1) {
+        for (let j = 0; j < (i < extra ? perGradient + 1 : perGradient); j += 1) {
+            colors.push(colorInGradient(gradients[i], steps[j % steps.length]));
+        }
+    }
+    return colors;
+};
+export const toLinearGradient = (gradient) => {
+    if (gradient.length === 0)
+        return 'transparent';
+    if (gradient.length === 1)
+        return gradient[0].color;
+    return `linear-gradient(${gradient
+        .map(({ color, position }) => `${color} ${position * 100}%`)
+        .join(', ')})`;
+};
+//# sourceMappingURL=gradients.js.map

package/lib/styles/gradients.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradients.js","sourceRoot":"","sources":["../../src/styles/gradients.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix } from 'polished';\n\ninterface ColorStop {\n  /** CSS color string. */\n  color: string;\n  /** Position along the gradient expressed as a number from 0 to 1. */\n  position: number;\n}\n\ntype LinearGradient = ColorStop[];\n\nexport const gradientMap = {\n  grayscale: [\n    { color: 'hsl(0, 100%, 100%)', position: 0 },\n    { color: 'hsl(0, 100%, 0%)', position: 1 }\n  ],\n  'persian-blue': [\n    { color: 'hsl(210, 50%, 94%)', position: 0 },\n    { color: 'hsl(210, 46%, 63%)', position: 1 / 3 },\n    { color: 'hsl(206, 100%, 33%)', position: 2 / 3 },\n    { color: 'hsl(210, 100%, 27%)', position: 1 }\n  ],\n  'persian-green': [\n    { color: 'hsl(175, 35%, 94%)', position: 0 },\n    { color: 'hsl(175, 42%, 65%)', position: 1 / 3 },\n    { color: 'hsl(175, 100%, 33%)', position: 2 / 3 },\n    { color: 'hsl(175, 100%, 27%)', position: 1 }\n  ],\n  'pastel-orange': [\n    { color: 'hsl(36, 100%, 97%)', position: 0 },\n    { color: 'hsl(36, 100%, 79%)', position: 1 / 3 },\n    { color: 'hsl(36, 100%, 64%)', position: 2 / 3 },\n    { color: 'hsl(36, 99%, 61%)', position: 1 }\n  ],\n  'japanese-laurel': [\n    { color: 'hsl(135, 21%, 94%)', position: 0 },\n    { color: 'hsl(135, 24%, 61%)', position: 1 / 3 },\n    { color: 'hsl(135, 54%, 33%)', position: 2 / 3 },\n    { color: 'hsl(135, 60%, 26%)', position: 1 }\n  ],\n  'mango-tango': [\n    { color: 'hsl(23, 100%, 96%)', position: 0 },\n    { color: 'hsl(23, 100%, 78%)', position: 1 / 3 },\n    { color: 'hsl(23, 100%, 62%)', position: 2 / 3 },\n    { color: 'hsl(23, 100%, 53%)', position: 1 }\n  ],\n  valencia: [\n    { color: 'hsl(1, 87%, 96%)', position: 0 },\n    { color: 'hsl(1, 72%, 75%)', position: 1 / 3 },\n    { color: 'hsl(1, 67%, 56%)', position: 2 / 3 },\n    { color: 'hsl(1, 82%, 41%)', position: 1 }\n  ],\n  'fuchsia-blue': [\n    { color: 'hsl(259, 45%, 96%)', position: 0 },\n    { color: 'hsl(259, 45%, 78%)', position: 1 / 3 },\n    { color: 'hsl(259, 43%, 56%)', position: 2 / 3 },\n    { color: 'hsl(259, 40%, 49%)', position: 1 }\n  ],\n  'faded-red': [\n    { color: 'hsl(360, 100%, 95%)', position: 0 },\n    { color: 'hsl(360, 100%, 85%)', position: 1 / 3 },\n    { color: 'hsl(360, 100%, 75%)', position: 2 / 3 },\n    { color: 'hsl(360, 100%, 70%)', position: 1 }\n  ],\n  rope: [\n    { color: 'hsl(25, 31%, 93%)', position: 0 },\n    { color: 'hsl(25, 32%, 62%)', position: 1 / 3 },\n    { color: 'hsl(25, 59%, 35%)', position: 2 / 3 },\n    { color: 'hsl(25, 64%, 30%)', position: 1 }\n  ],\n  silver: [\n    { color: 'hsl(15, 18%, 97%)', position: 0 },\n    { color: 'hsl(15, 9%, 79%)', position: 1 / 3 },\n    { color: 'hsl(15, 11%, 65%)', position: 2 / 3 },\n    { color: 'hsl(15, 9%, 58%)', position: 1 }\n  ],\n  'blue-yellow': [\n    { color: 'hsl(56, 100%, 93%)', position: 0 },\n    { color: 'hsl(144, 46%, 79%)', position: 2 / 10 },\n    { color: 'hsl(185, 53%, 58%)', position: 4 / 10 },\n    { color: 'hsl(191, 56%, 52%)', position: 5 / 10 },\n    { color: 'hsl(195, 62%, 48%)', position: 6 / 10 },\n    { color: 'hsl(206, 67%, 37%)', position: 8 / 10 },\n    { color: 'hsl(215, 62%, 30%)', position: 1 }\n  ],\n  'green-yellow': [\n    { color: 'hsl(56, 100%, 93%)', position: 0 },\n    { color: 'hsl(88, 61%, 85%)', position: 2 / 10 },\n    { color: 'hsl(125, 47%, 78%)', position: 4 / 10 },\n    { color: 'hsl(148, 45%, 65%)', position: 5 / 10 },\n    { color: 'hsl(159, 47%, 50%)', position: 6 / 10 },\n    { color: 'hsl(173, 80%, 30%)', position: 8 / 10 },\n    { color: 'hsl(178, 73%, 22%)', position: 1 }\n  ],\n  'ruby-yellow': [\n    { color: 'hsl(56, 100%, 93%)', position: 0 },\n    { color: 'hsl(40, 100%, 83%)', position: 2 / 10 },\n    { color: 'hsl(19, 100%, 75%)', position: 4 / 10 },\n    { color: 'hsl(3, 100%, 73%)', position: 5 / 10 },\n    { color: 'hsl(350, 81%, 62%)', position: 6 / 10 },\n    { color: 'hsl(343, 54%, 55%)', position: 8 / 10 },\n    { color: 'hsl(330, 40%, 36%)', position: 1 }\n  ],\n  'purple-blue': [\n    { color: 'hsl(190, 42%, 97%)', position: 0 },\n    { color: 'hsl(205, 51%, 84%)', position: 2 / 10 },\n    { color: 'hsl(212, 47%, 73%)', position: 4 / 10 },\n    { color: 'hsl(219, 41%, 70%)', position: 5 / 10 },\n    { color: 'hsl(253, 32%, 66%)', position: 6 / 10 },\n    { color: 'hsl(272, 27%, 49%)', position: 8 / 10 },\n    { color: 'hsl(272, 37%, 32%)', position: 1 }\n  ],\n  'violet-rose': [\n    { color: 'hsl(18, 100%, 98%)', position: 0 },\n    { color: 'hsl(359, 100%, 91%)', position: 2 / 10 },\n    { color: 'hsl(336, 96%, 77%)', position: 4 / 10 },\n    { color: 'hsl(325, 73%, 65%)', position: 5 / 10 },\n    { color: 'hsl(319, 58%, 58%)', position: 6 / 10 },\n    { color: 'hsl(287, 38%, 45%)', position: 8 / 10 },\n    { color: 'hsl(259, 43%, 35%)', position: 1 }\n  ],\n  'negative-attention-positive': [\n    { color: 'hsl(2, 67%, 56%)', position: 0 },\n    { color: 'hsl(21, 87%, 60%)', position: 2 / 10 },\n    { color: 'hsl(36, 100%, 64%)', position: 4 / 10 },\n    { color: 'hsl(50, 95%, 75%)', position: 5 / 10 },\n    { color: 'hsl(85, 72%, 67%)', position: 6 / 10 },\n    { color: 'hsl(120, 49%, 60%)', position: 8 / 10 },\n    { color: 'hsl(135, 53%, 33%)', position: 1 }\n  ],\n  'negative-attention-positive-protan': [\n    { color: 'hsl(344, 67%, 44%)', position: 0 },\n    { color: 'hsl(351, 66%, 59%)', position: 2 / 10 },\n    { color: 'hsl(360, 100%, 84%)', position: 4 / 10 },\n    { color: 'hsl(0, 0%, 89%)', position: 5 / 10 },\n    { color: 'hsl(110, 46%, 80%)', position: 6 / 10 },\n    { color: 'hsl(120, 49%, 60%)', position: 8 / 10 },\n    { color: 'hsl(135, 53%, 33%)', position: 1 }\n  ],\n  // cspell:disable-next-line\n  'negative-attention-positive-deutan': [\n    { color: 'hsl(315, 64%, 45%)', position: 0 },\n    { color: 'hsl(313, 83%, 62%)', position: 2 / 10 },\n    { color: 'hsl(313, 100%, 80%)', position: 4 / 10 },\n    { color: 'hsl(0, 0%, 89%)', position: 5 / 10 },\n    { color: 'hsl(110, 46%, 80%)', position: 6 / 10 },\n    { color: 'hsl(120, 49%, 60%)', position: 8 / 10 },\n    { color: 'hsl(135, 53%, 33%)', position: 1 }\n  ],\n  'hot-cold': [\n    { color: 'hsl(212, 100%, 27%)', position: 0 },\n    { color: 'hsl(213, 40%, 49%)', position: 2 / 10 },\n    { color: 'hsl(210, 45%, 69%)', position: 4 / 10 },\n    { color: 'hsl(0, 0%, 89%)', position: 5 / 10 },\n    { color: 'hsl(360, 100%, 84%)', position: 6 / 10 },\n    { color: 'hsl(351, 66%, 59%)', position: 8 / 10 },\n    { color: 'hsl(344, 67%, 44%)', position: 1 }\n  ],\n  'two-extremes': [\n    { color: 'hsl(240, 30%, 39%)', position: 0 },\n    { color: 'hsl(271, 27%, 63%)', position: 2 / 10 },\n    { color: 'hsl(293, 25%, 87%)', position: 4 / 10 },\n    { color: 'hsl(0, 0%, 89%)', position: 5 / 10 },\n    { color: 'hsl(171, 37%, 86%)', position: 6 / 10 },\n    { color: 'hsl(167, 41%, 51%)', position: 8 / 10 },\n    { color: 'hsl(163, 44%, 16%)', position: 1 }\n  ]\n};\n\nexport const colorInGradient = ([...gradient]: LinearGradient, targetPosition: number): string => {\n  // Return transparent for an empty gradient.\n  if (gradient.length === 0) return 'transparent';\n\n  // Return the color for single element gradient.\n  if (gradient.length === 1) return gradient[0].color;\n\n  // Clamp position to interval from 0 to 1.\n  targetPosition = Math.min(Math.max(targetPosition, 0), 1);\n\n  // Extend the the start of the gradient to 0 if necessary.\n  if (gradient[0].position !== 0) gradient.unshift({ color: gradient[0].color, position: 0 });\n\n  // Extend the the end of the gradient to 1 if necessary.\n  if (gradient[gradient.length - 1].position !== 1)\n    gradient.push({ color: gradient[gradient.length - 1].color, position: 1 });\n\n  for (let i = 0; i < gradient.length; i += 1) {\n    const current = gradient[i];\n\n    // If target position is the same as the current position, return the color at the current position.\n    if (targetPosition === current.position) return current.color;\n\n    // If target position is less than the current position, it must be between the previous position and current position.\n    if (targetPosition < current.position) {\n      const previous = gradient[i - 1];\n\n      // Calculate how far the targetPosition is between the previousPosition and the currentPosition.\n      const percentage =\n        (targetPosition - previous.position) / (current.position - previous.position);\n\n      try {\n        return mix(percentage, current.color, previous.color);\n      } catch {\n        // Polished mix throws on invalid color.\n        return 'transparent';\n      }\n    }\n  }\n\n  // Failsafe return.\n  return 'transparent';\n};\n\nexport const colorInGradientByName = (\n  name: keyof typeof gradientMap,\n  targetPosition: number\n): string => {\n  return colorInGradient(gradientMap[name] ?? [], targetPosition);\n};\n\nexport const colorsForCategories = (\n  count: number,\n  {\n    gradients = (\n      [\n        'persian-blue',\n        'persian-green',\n        'pastel-orange',\n        'japanese-laurel',\n        'mango-tango',\n        'valencia',\n        'fuchsia-blue',\n        'faded-red',\n        'rope',\n        'silver'\n      ] as const\n    ).map(name => gradientMap[name]),\n    steps = [2 / 3, 1 / 3, 1, 0, 1 / 2]\n  }: { gradients?: LinearGradient[]; steps?: number[] } = {}\n): string[] => {\n  // Colors per gradient\n  const perGradient = Math.floor(count / gradients.length);\n\n  // Number of gradients with 1 extra color\n  const extra = count % gradients.length;\n\n  const colors: string[] = [];\n\n  for (let i = 0; i < gradients.length; i += 1) {\n    for (let j = 0; j < (i < extra ? perGradient + 1 : perGradient); j += 1) {\n      colors.push(colorInGradient(gradients[i], steps[j % steps.length]));\n    }\n  }\n\n  return colors;\n};\n\nexport const toLinearGradient = (gradient: LinearGradient): string => {\n  if (gradient.length === 0) return 'transparent';\n  if (gradient.length === 1) return gradient[0].color;\n\n  return `linear-gradient(${gradient\n    .map(({ color, position }) => `${color} ${position * 100}%`)\n    .join(', ')})`;\n};\n"]}

package/lib/styles/index.d.ts

@@ -1,3 +1,4 @@
 export * from './utils';
+export * from './gradients';
 export { default as GlobalStyle } from './GlobalStyle';
 //# sourceMappingURL=index.d.ts.map

package/lib/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/lib/styles/index.js

@@ -1,3 +1,4 @@
 export * from './utils';
+export * from './gradients';
 export { default as GlobalStyle } from './GlobalStyle';
 //# sourceMappingURL=index.js.map

package/lib/styles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export * from './utils';\nexport { default as GlobalStyle } from './GlobalStyle';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export * from './utils';\nexport * from './gradients';\nexport { default as GlobalStyle } from './GlobalStyle';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "3.0.0-dev.2.0",
+  "version": "3.0.0-dev.4.1",
   "description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
@@ -22,6 +22,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.0",
     "bignumber.js": "^9.0.1",
+    "dompurify": "^2.3.1",
     "emoji-mart": "^3.0.1",
     "emoji-regex": "^9.2.0",
     "libphonenumber-js": "^1.9.9",
@@ -33,15 +34,16 @@
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.4.12",
-    "@storybook/addon-actions": "^6.4.12",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-storysource": "^6.4.12",
-    "@storybook/addon-toolbars": "^6.4.12",
-    "@storybook/addons": "^6.4.12",
-    "@storybook/react": "^6.4.12",
+    "@storybook/addon-storysource": "^6.4.19",
+    "@storybook/addon-toolbars": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/react": "^6.4.19",
     "@storybook/testing-react": "0.0.18",
-    "@storybook/theming": "^6.4.12",
+    "@storybook/theming": "^6.4.19",
+    "@types/dompurify": "^2.2.3",
     "enzyme": "^3.11.0",
     "typescript": "~4.5.2"
   }