@scality/core-ui 0.181.0 → 0.183.0

package/src/lib/components/barchartv2/utils.test.ts

@@ -507,41 +507,41 @@ describe('applySortingToData', () => {
 describe('getRoundReferenceValue', () => {
   it('should return appropriate rounded values with 10% buffer', () => {
     // Small values (< 10)
-    expect(getRoundReferenceValue(0.1)).toBe(0.2); // 0.1 → 0.11 → 0.2
-    expect(getRoundReferenceValue(1)).toBe(2); // 1.1 → 1.5 → 2
-    expect(getRoundReferenceValue(2)).toBe(5); // 2.2 → 3 → 5
-    expect(getRoundReferenceValue(3)).toBe(5); // 3.3 → 4 → 5
+    expect(getRoundReferenceValue(0.1)).toBe(0.1); // 0.1 → 0.11 → 0.1 (magnitude 0.1, remainder 0.01)
+    expect(getRoundReferenceValue(1)).toBe(1); // 1 → 1.1 → 1 (magnitude 1, remainder 0.1)
+    expect(getRoundReferenceValue(2)).toBe(2); // 2 → 2.2 → 2 (magnitude 1, remainder 0.2)
+    expect(getRoundReferenceValue(3)).toBe(3); // 3 → 3.3 → 3 (magnitude 1, remainder 0.3)
 
     // Values 5-10 range
-    expect(getRoundReferenceValue(6)).toBe(10); // 6.6 → 10 (skip 7.5 for values < 10)
-    expect(getRoundReferenceValue(9)).toBe(10); // 9.9 → 10
+    expect(getRoundReferenceValue(6)).toBe(6); // 6 → 6.6 → 6 (magnitude 1, remainder 0.6)
+    expect(getRoundReferenceValue(9)).toBe(9); // 9 → 9.9 → 9 (magnitude 1, remainder 0.9)
 
     // Larger values get 10% buffer applied
-    expect(getRoundReferenceValue(15)).toBe(20); // 16.5 → 20
-    expect(getRoundReferenceValue(35)).toBe(40); // 38.5 → 40
-    expect(getRoundReferenceValue(75)).toBe(100); // 82.5 → 100
-    expect(getRoundReferenceValue(150)).toBe(200); // 165 → 200
-    expect(getRoundReferenceValue(350)).toBe(400); // 385 → 400
-    expect(getRoundReferenceValue(750)).toBe(1000); // 825 → 1000
-    expect(getRoundReferenceValue(1500)).toBe(2000); // 1650 → 2000
-    expect(getRoundReferenceValue(3500)).toBe(4000); // 3850 → 4000
-    expect(getRoundReferenceValue(7500)).toBe(10000); // 8250 → 10000
-    expect(getRoundReferenceValue(15000)).toBe(20000); // 16500 → 20000
+    expect(getRoundReferenceValue(15)).toBe(10); // 15 → 16.5, remainder 5, incremented 20 > 16.5, so round down to 10
+    expect(getRoundReferenceValue(35)).toBe(30); // 35 → 38.5, remainder 5, incremented 40 > 38.5, so round down to 30
+    expect(getRoundReferenceValue(75)).toBe(80); // 75 → 82.5, remainder 5, incremented 80 <= 82.5, so round up to 80
+    expect(getRoundReferenceValue(150)).toBe(150); // 150 → 165, remainder 0, so return 150
+    expect(getRoundReferenceValue(350)).toBe(350); // 350 → 385, remainder 0, so return 350
+    expect(getRoundReferenceValue(750)).toBe(750); // 750 → 825, remainder 0, so return 750
+    expect(getRoundReferenceValue(1500)).toBe(1500); // 1500 → 1650, remainder 0, so return 1500
+    expect(getRoundReferenceValue(3500)).toBe(3500); // 3500 → 3850, remainder 0, so return 3500
+    expect(getRoundReferenceValue(7500)).toBe(7500); // 7500 → 8250, remainder 0, so return 7500
+    expect(getRoundReferenceValue(15000)).toBe(15000); // 15000 → 16500, remainder 0, so return 15000
   });
 });
 
 describe('getTicks', () => {
   describe('small values (< 10)', () => {
     it('should return 2 ticks for non-symmetrical small values', () => {
-      expect(getTicks(1, false)).toEqual([0, 1]);
-      expect(getTicks(2, false)).toEqual([0, 2]);
-      expect(getTicks(5, false)).toEqual([0, 5]);
+      expect(getTicks(1, false)).toEqual([0, 0.5, 1]); // 1 % 2 != 0, defaults to 3 ticks
+      expect(getTicks(2, false)).toEqual([0, 1, 2]); // 2 % (3-1) == 0, uses 3 ticks
+      expect(getTicks(5, false)).toEqual([0, 2.5, 5]); // 5 % 2 != 0 and 5 % 3 != 0, defaults to 3 ticks
     });
 
     it('should return 3 ticks for symmetrical small values', () => {
-      expect(getTicks(1, true)).toEqual([-1, 0, 1]);
-      expect(getTicks(2, true)).toEqual([-2, 0, 2]);
-      expect(getTicks(5, true)).toEqual([-5, 0, 5]);
+      expect(getTicks(1, true)).toEqual([-1, -0.5, 0, 0.5, 1]); // 1 % 2 != 0, defaults to 3 ticks, symmetrical adds negatives
+      expect(getTicks(2, true)).toEqual([-2, -1, 0, 1, 2]); // 2 % (3-1) == 0, uses 3 ticks, symmetrical adds negatives
+      expect(getTicks(5, true)).toEqual([-5, -2.5, 0, 2.5, 5]); // 5 % 2 != 0 and 5 % 3 != 0, defaults to 3 ticks, symmetrical adds negatives
     });
   });
 
@@ -738,8 +738,8 @@ describe('computeUnitLabelAndRoundReferenceValue', () => {
     );
 
     expect(result.unitLabel).toBe('kB');
-    // 1680 / 1000 = 1.68, with buffer: 1.848 → rounds to 2
-    expect(result.roundReferenceValue).toBe(2);
+    // 1680 / 1000 = 1.68, with buffer: 1.848 → rounds to 1 (magnitude 1, remainder 0.848)
+    expect(result.roundReferenceValue).toBe(1);
     expect(result.rechartsData).toEqual([
       {
         category: 'category1',
@@ -772,8 +772,8 @@ describe('computeUnitLabelAndRoundReferenceValue', () => {
     );
 
     expect(result.unitLabel).toBe('B');
-    // 680 with buffer: 748 → rounds to 800 (8 * 100, value > 10)
-    expect(result.roundReferenceValue).toBe(800);
+    // 680 with buffer: 748 → rounds to 680 (value >= 10, remainder 0, rounds down)
+    expect(result.roundReferenceValue).toBe(680);
     expect(result.rechartsData).toEqual([
       { category: 'category1', success: 680 },
     ]);

package/src/lib/components/barchartv2/utils.ts

@@ -5,47 +5,39 @@ import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 
 export const getRoundReferenceValue = (value: number): number => {
   if (value <= 0) return 1; // Default for zero or negative values
+  
+  // Buffer the value by 10% to avoid being too close to the edge of the chart
+  const bufferedValue = value * 1.1;
+
+  if (value >= 10) {
+    const remainder = value % 10;
+    const incremented = value + (10 - remainder);
+
+    // If the remainder is less than 5, round down to the nearest 10
+    if (remainder < 5) {
+      return value - remainder;
+    }
+
+    // If incrementing would exceed the buffered max, also round down
+    if (incremented > bufferedValue) {
+      return value - remainder;
+    }
+
+    // Otherwise, round up to the next 10
+    return incremented;
+  }
 
-  // Get the magnitude (10^n where n is the number of digits - 1)
   const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
 
-  // Buffer the value by 10% to avoid being too close to the edge of the chart
-  const bufferedValue = value * 1.1;
+  const remainder = bufferedValue % magnitude;
 
-  // Normalized value between 1 and 10
-  const normalized = bufferedValue / magnitude;
-
-  // Round to nice numbers based on normalized value
-  // skip 1.5, 3, 4, 7.5 as top value for better chart
-  // appearance for small values
-  let result: number;
-
-  if (normalized <= 1) result = magnitude;
-  else if (value > 10 && normalized <= 1.5) result = 1.5 * magnitude;
-  else if (normalized <= 2) result = 2 * magnitude;
-  else if (value > 10 && normalized <= 2.5) result = 2.5 * magnitude;
-  else if (value > 10 && normalized <= 3) result = 3 * magnitude;
-  else if (value > 10 && normalized <= 4) result = 4 * magnitude;
-  else if (normalized <= 5) result = 5 * magnitude;
-  else if (value > 10 && normalized <= 6) result = 6 * magnitude;
-  else if (value > 10 && normalized <= 8) result = 8 * magnitude;
-  else if (normalized <= 10) result = 10 * magnitude;
-  else result = 10 * magnitude;
-
-  return result;
+  return remainder === 0 ? bufferedValue : bufferedValue - remainder;
 };
 
 export const getTicks = (topValue: number, isSymmetrical: boolean) => {
-  if (topValue < 10) {
-    if (isSymmetrical) {
-      return [-topValue, 0, topValue];
-    } else {
-      return [0, topValue];
-    }
-  }
   const possibleTickNumbers = [4, 3];
   const numberOfTicks =
-    possibleTickNumbers.find((number) => topValue % (number - 1) === 0) || 2; // Default to 2 ticks if no match
+    possibleTickNumbers.find((number) => topValue % (number - 1) === 0) || 3; // Default to 2 ticks if no match
   const tickInterval = topValue / (numberOfTicks - 1);
   const ticks = Array.from(
     { length: numberOfTicks },
@@ -339,7 +331,7 @@ export const computeUnitLabelAndRoundReferenceValue = (
 ) => {
   if (!unitRange) {
     const roundReferenceValue = getRoundReferenceValue(maxValue);
-    return { unitLabel: undefined, roundReferenceValue, rechartsData: data };
+    return { unitLabel: undefined, roundReferenceValue, rechartsData: data, topDomain: maxValue * 1.1 };
   }
 
   const { valueBase, unitLabel } = getUnitLabel(unitRange, maxValue);
@@ -354,7 +346,7 @@ export const computeUnitLabelAndRoundReferenceValue = (
     });
     return normalizedDataPoint;
   });
-  return { unitLabel, roundReferenceValue, rechartsData };
+  return { unitLabel, roundReferenceValue, rechartsData, topDomain: topValue * 1.1 };
 };
 
 /**
@@ -534,12 +526,13 @@ export const useChartData = <T extends BarchartBars>(
 
   const maxValue = getMaxBarValue(filteredData, stacked);
 
-  const { unitLabel, roundReferenceValue, rechartsData } =
+  const { unitLabel, roundReferenceValue, rechartsData, topDomain } =
     computeUnitLabelAndRoundReferenceValue(filteredData, maxValue, unitRange);
 
   return {
     rechartsBars: filteredRechartsBars,
     unitLabel,
+    topDomain,
     roundReferenceValue,
     rechartsData,
   };

package/src/lib/components/buttonv2/CopyButton.component.tsx

@@ -14,14 +14,36 @@ export const useClipboard = () => {
     return () => clearTimeout(timer);
   }, [copyStatus]);
 
-  const copyToClipboard = (text) => {
+  const copyToClipboard = (text: string, asHtml?: boolean) => {
     if (!navigator || !navigator.clipboard) {
       setCopyStatus(COPY_STATE_UNSUPPORTED);
       return;
     }
 
-    navigator.clipboard.writeText(text);
-    setCopyStatus(COPY_STATE_SUCCESS);
+    if (asHtml) {
+      // Copy as HTML with plain text fallback
+      const el = document.createElement('div');
+      el.innerHTML = text;
+      const plainText = el.innerText;
+
+      const clipboardItem = new ClipboardItem({
+        'text/html': new Blob([text], { type: 'text/html' }),
+        'text/plain': new Blob([plainText], { type: 'text/plain' }),
+      });
+
+      navigator.clipboard
+        .write([clipboardItem])
+        .then(() => {
+          setCopyStatus(COPY_STATE_SUCCESS);
+        })
+        .catch(() => {
+          setCopyStatus(COPY_STATE_UNSUPPORTED);
+        });
+    } else {
+      // Copy as plain text only
+      navigator.clipboard.writeText(text);
+      setCopyStatus(COPY_STATE_SUCCESS);
+    }
   };
 
   return {
@@ -33,11 +55,13 @@ export const useClipboard = () => {
 export const CopyButton = ({
   label,
   textToCopy,
+  copyAsHtml,
   variant,
   ...props
 }: {
   label?: string;
   textToCopy: string;
+  copyAsHtml?: boolean;
   variant?: 'outline' | 'ghost';
 } & Props) => {
   const { copy, copyStatus } = useClipboard();
@@ -68,7 +92,7 @@ export const CopyButton = ({
         />
       }
       disabled={copyStatus === COPY_STATE_SUCCESS || props.disabled}
-      onClick={() => copy(textToCopy)}
+      onClick={() => copy(textToCopy, copyAsHtml)}
       type="button"
       tooltip={
         variant !== 'outline'

package/src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx

@@ -360,13 +360,7 @@ export function LineTimeSerieChart({
   }, [chartData]);
 
   // 3. Transform the data base on the valuebase
-  const { topValue, unitLabel, rechartsData } = useMemo(() => {
-    if (yAxisType === 'percentage')
-      return {
-        topValue: 100,
-        unitLabel: '%',
-        rechartsData: chartData,
-      };
+  const { topValue, unitLabel, rechartsData, topDomain } = useMemo(() => {
 
     const values = chartData.flatMap((dataPoint) =>
       Object.entries(dataPoint)
@@ -383,19 +377,20 @@ export function LineTimeSerieChart({
     if (values.length === 0) {
       return {
         topValue: 100, // Default value for empty charts
-        unitLabel: '',
+        unitLabel: yAxisType === 'percentage' ? '%' : '',
         rechartsData: [],
+        topDomain: 100,
       };
     }
 
     const top = Math.abs(Math.max(...values));
     const bottom = Math.abs(Math.min(...values));
     const maxValue = Math.max(top, bottom);
-
-    const { valueBase, unitLabel } = getUnitLabel(unitRange ?? [], maxValue);
+    const { valueBase, unitLabel } = yAxisType === 'percentage' ? { valueBase: 1, unitLabel: '%' } : getUnitLabel(unitRange ?? [], maxValue);
     // Use round reference value to add extra padding to the top value
-    const topValue = getRoundReferenceValue(maxValue / valueBase);
-
+    const basedValue = maxValue / valueBase
+    const topDomain = basedValue * 1.1;
+    const topValue = getRoundReferenceValue(basedValue);
     const rechartsData = chartData.map((dataPoint) => {
       const normalizedDataPoint = { ...dataPoint };
       Object.entries(dataPoint).forEach(([key, value]) => {
@@ -406,7 +401,7 @@ export function LineTimeSerieChart({
       return normalizedDataPoint;
     });
 
-    return { topValue, unitLabel, rechartsData };
+    return { topValue, unitLabel, rechartsData, topDomain };
   }, [chartData, yAxisType, unitRange]);
 
   // Group series by resource and create color mapping
@@ -522,10 +517,10 @@ export function LineTimeSerieChart({
               }}
               domain={
                 yAxisType === 'percentage'
-                  ? [0, 100]
+                  ? [0, topDomain]
                   : yAxisType === 'symmetrical'
-                    ? [-topValue, topValue]
-                    : [0, topValue]
+                    ? [-topDomain, topDomain]
+                    : [0, topDomain]
               }
               axisLine={{ stroke: theme.border }}
               tick={{

package/src/lib/components/textarea/TextArea.component.tsx

@@ -3,6 +3,10 @@ import {
   forwardRef,
   TextareaHTMLAttributes,
   ForwardedRef,
+  useEffect,
+  useRef,
+  useImperativeHandle,
+  useCallback,
 } from 'react';
 import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
@@ -12,6 +16,11 @@ type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   variant?: TextAreaVariant;
   width?: CSSProperties['width'];
   height?: CSSProperties['height'];
+  /**
+   * Automatically adjust height to fit content
+   * When enabled, the textarea will grow/shrink to show all content
+   */
+  autoGrow?: boolean;
 };
 type RefType = HTMLTextAreaElement | null;
 
@@ -19,6 +28,7 @@ const TextAreaContainer = styled.textarea<{
   variant: TextAreaVariant;
   width?: CSSProperties['width'];
   height?: CSSProperties['height'];
+  autoGrow?: boolean;
 }>`
   padding: ${spacing.r12} ${spacing.r8};
   border-radius: 4px;
@@ -46,6 +56,12 @@ const TextAreaContainer = styled.textarea<{
       height: ${props.height};
     `}
 
+  ${(props) =>
+    props.autoGrow &&
+    css`
+      overflow: hidden;
+    `}
+
   &:placeholder-shown {
     font-style: italic;
   }
@@ -77,9 +93,55 @@ const TextAreaContainer = styled.textarea<{
 `;
 
 function TextAreaElement(
-  { rows = 3, cols = 20, width, height, variant = 'code', ...rest }: Props,
+  {
+    rows = 3,
+    cols = 20,
+    width,
+    height,
+    variant = 'code',
+    autoGrow = false,
+    value,
+    defaultValue,
+    onChange,
+    ...rest
+  }: Props,
   ref: ForwardedRef<RefType>,
 ) {
+  const internalRef = useRef<HTMLTextAreaElement>(null);
+
+  // Expose the textarea element to parent components via forwarded ref
+  useImperativeHandle(ref, () => internalRef.current as HTMLTextAreaElement);
+
+  // Adjust height on mount and when value changes (for controlled components)
+  const adjustHeight = useCallback(() => {
+    const textarea = internalRef.current;
+    if (!textarea || !autoGrow) return;
+
+    // Reset height to auto to get the correct scrollHeight
+    textarea.style.height = 'auto';
+
+    // Set the height to match the content
+    const newHeight = textarea.scrollHeight;
+    textarea.style.height = `${newHeight}px`;
+  }, [autoGrow]);
+
+  useEffect(() => {
+    adjustHeight();
+  }, [adjustHeight, value]);
+
+  // Handle onChange to support both controlled and uncontrolled components
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      if (autoGrow) {
+        adjustHeight();
+      }
+      if (onChange) {
+        onChange(event);
+      }
+    },
+    [autoGrow, adjustHeight, onChange],
+  );
+
   if (width || height) {
     return (
       <TextAreaContainer
@@ -87,8 +149,12 @@ function TextAreaElement(
         width={width}
         height={height}
         variant={variant}
+        autoGrow={autoGrow}
+        value={value}
+        defaultValue={defaultValue}
+        onChange={handleChange}
         {...rest}
-        ref={ref}
+        ref={internalRef}
       />
     );
   }
@@ -99,8 +165,12 @@ function TextAreaElement(
       rows={rows}
       cols={cols}
       variant={variant}
+      autoGrow={autoGrow}
+      value={value}
+      defaultValue={defaultValue}
+      onChange={handleChange}
       {...rest}
-      ref={ref}
+      ref={internalRef}
     />
   );
 }

package/src/lib/icons/branding-logo.tsx

@@ -1,47 +1,21 @@
 import React from 'react';
 
 const Logo = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="49"
-    height="49"
-    viewBox="0 0 49 49"
-  >
-    <path
-      fill="#3d9bd6"
-      d="M21.25 4.42v7.25h3.99V4.33l5.16 2.92 2-3.36L27.14.97A7.7 7.7 0 0 0 23.15 0c-1.36 0-2.72.35-3.89 1.06L14 3.98l1.99 3.36z"
-    />
-    <path
-      fill="#007664"
-      d="M21.25 4.42v7.25h3.99V4.33l5.16 2.92 2-3.36L27.14.97A7.7 7.7 0 0 0 23.15 0c-1.36 0-2.72.35-3.89 1.06L14 3.98l1.99 3.36z"
-    />
-    <path
-      fill="#ee4642"
-      d="M21.16 44.25V37h3.99v7.25l5.16-2.92 2 3.36-5.17 2.92a7.9 7.9 0 0 1-7.88 0L14 44.69l1.99-3.36z"
-    />
-    <path
-      fill="#2aad8e"
-      d="M40.43 13.28L34 16.9l1.99 3.36 6.44-3.62v5.83h3.99v-5.92c0-1.33-.37-2.65-1.09-3.8a8.82 8.82 0 0 0-2.9-2.83L37.17 7l-1.99 3.36z"
-    />
-    <path
-      fill="#d71d4f"
-      d="M4.99 32.84l6.43-3.63 2 3.36-6.44 3.63 5.17 2.91-2 3.36-5.25-2.92a7.6 7.6 0 0 1-2.81-2.82A7.1 7.1 0 0 1 1 32.92V27h3.99z"
-    />
-    <path
-      fill="#9e2569"
-      d="M4.08 16.64l6.43 3.62 2-3.36-6.44-3.62 5.17-2.92-2-3.36-5.25 2.92a8.72 8.72 0 0 0-2.9 2.83A7.16 7.16 0 0 0 0 16.64v5.92h3.99z"
-    />
-    <path
-      fill="#f79836"
-      d="M40.34 36.2L34 32.57l1.99-3.36 6.44 3.63V27h3.99v5.92c0 1.33-.37 2.57-1.09 3.81a8.69 8.69 0 0 1-2.9 2.82l-5.26 2.92-1.99-3.36z"
-    />
-    <path fill="#007664" d="M24 15v8.22l7.34-4.06z" />
-    <path fill="#9e2569" d="M23.25 15L16 19.16l7.25 4.06z" />
-    <path fill="#d71d4f" d="M22.25 25.07L15 21v8.13z" />
-    <path fill="#2aad8e" d="M24 24.98l7.25 4.07V21z" />
-    <path fill="#ee4642" d="M23.16 26L16 30.07l7.16 4.15z" />
-    <path fill="#f79836" d="M24 26v8.22l7.25-4.15z" />
-  </svg>
+  <svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<path d="M21.0748 4.41441V11.6541H25.0566V4.32613L30.2149 7.23964L32.2058 3.88469L26.9571 0.971171C25.7806 0.264865 24.4232 0 22.9753 0C21.6178 0 20.2604 0.353153 19.0839 1.05946L13.8352 3.97297L15.8261 7.32793L21.0748 4.41441Z" fill="#005357"/>
+<path d="M21.0749 44.5856V37.3459H25.0567V44.5856L30.215 41.6721L32.2059 45.027L27.0476 47.9405C25.8712 48.6469 24.4233 49 23.0658 49C21.7084 49 20.351 48.6469 19.1745 47.9405L13.9258 45.027L15.9167 41.6721L21.0749 44.5856Z" fill="#FD8144"/>
+<path d="M39.8981 12.7133L33.4729 16.3331L35.4638 19.6881L41.889 16.0682V21.8953H45.8708V15.98C45.8708 14.6556 45.5088 13.3313 44.7848 12.1836C44.0609 11.0358 43.0654 10.0646 41.889 9.35834L36.6402 6.44482L34.6493 9.79978L39.8981 12.7133Z" fill="#0AADA6"/>
+<path d="M4.24279 32.8434L10.668 29.2236L12.6589 32.5785L6.23369 36.1983L11.3919 39.1119L9.40103 42.4668L4.15229 39.5533C2.97585 38.847 1.9804 37.8758 1.34693 36.7281C0.622968 35.5803 0.260986 34.256 0.260986 32.9317V27.0164H4.24279V32.8434Z" fill="#E84855"/>
+<path d="M4.24271 16.1569L10.6679 19.7767L12.6588 16.4217L6.23361 12.8019L11.3919 9.8884L9.40095 6.53345L4.15221 9.44696C2.97577 10.1533 1.98032 11.1244 1.25636 12.2722C0.532392 13.4199 0.17041 14.7443 0.17041 16.1569V22.0722H4.15221L4.24271 16.1569Z" fill="#A14FBF"/>
+<path d="M39.8982 36.1983L33.5635 32.5785L35.5544 29.2236L41.9796 32.8434V27.0164H45.9614V32.9317C45.9614 34.256 45.5994 35.492 44.8754 36.7281C44.1514 37.8758 43.156 38.847 41.9796 39.5533L36.7308 42.4668L34.7399 39.1119L39.8982 36.1983Z" fill="#F8F32B"/>
+<path d="M23.6086 15.3623V23.5731L30.9388 19.5119L23.6086 15.3623Z" fill="#005357"/>
+<path d="M22.5226 15.3623L15.283 19.5119L22.5226 23.5731V15.3623Z" fill="#A14FBF"/>
+<path d="M22.0705 24.4558L14.8308 20.3945V28.5171L22.0705 24.4558Z" fill="#E84855"/>
+<path d="M24.1519 24.4559L31.3915 28.5171V20.4829L24.1519 24.4559Z" fill="#0AADA6"/>
+<path d="M22.5227 25.4272L15.3735 29.4885L22.5227 33.6381V25.4272Z" fill="#FD8144"/>
+<path d="M23.6086 25.4272V33.6381L30.8483 29.4885L23.6086 25.4272Z" fill="#F8F32B"/>
+</svg>
 );
 
 export { Logo };

package/src/lib/icons/branding.tsx

@@ -1,53 +1,29 @@
 const Logo = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="186"
-    height="49"
-    viewBox="0 0 186 49"
-  >
-    <path
-      fill="#fff"
-      d="M72.23 18.19c0-2.03-1.18-3.18-4.53-3.18-3.35 0-4.53 1.15-4.53 3.18v.71c0 1.68 1.09 2.21 1.9 2.47l6.98 2.57c2.27.88 4.17 2.29 4.17 5.04v3.09c0 3.09-2.27 5.75-8.61 5.75-6.43 0-8.61-2.66-8.61-5.75v-2.03c0-.53.27-.71.82-.71h2.26c.45 0 .64.18.64.71v1.68c0 2.03 1.45 3.18 4.89 3.18 3.44 0 4.89-1.15 4.89-3.18v-1.77c0-1.86-1.72-2.48-3.17-3.1l-6.43-2.38a4.98 4.98 0 0 1-3.36-4.6v-2.12c0-3.1 2-5.75 8.16-5.75 6.25 0 8.25 2.65 8.25 5.75v1.68c0 .44-.18.7-.64.7h-2.26c-.55 0-.82-.17-.82-.7zM97.04 32.16c0 3.09-1.91 5.75-8.52 5.75-6.62 0-8.52-2.66-8.52-5.75V17.75c0-3.1 1.9-5.75 8.52-5.75 6.61 0 8.52 2.65 8.52 5.75v1.85c0 .53-.18.71-.73.71h-2.17c-.55 0-.82-.18-.82-.71v-1.23c0-2.04-1.36-3.28-4.8-3.28-3.44 0-4.8 1.24-4.8 3.28v13.26c0 2.03 1.36 3.27 4.8 3.27 3.44 0 4.8-1.24 4.8-3.27v-1.77c0-.44.27-.71.82-.71h2.17c.46 0 .73.27.73.71zM125.81 34.28h9.78c.46 0 .82.18.82.71v1.68c0 .53-.36.71-.82.71h-12.96c-.45 0-.63-.27-.63-.71V12.8c0-.53.18-.8.73-.8h2.35c.45 0 .73.27.73.8zM164.58 12c.46 0 .64.18.64.71v1.68c0 .53-.09.7-.64.7h-5.98v21.58c0 .53-.27.71-.81.71h-2.36c-.45 0-.81-.27-.81-.71V15.09h-5.99c-.54 0-.63-.17-.63-.7v-1.68c0-.53.09-.71.63-.71z"
-    />
-    <path
-      fill="#fff"
-      d="M72.23 18.19c0-2.03-1.18-3.18-4.53-3.18-3.35 0-4.53 1.15-4.53 3.18v.71c0 1.68 1.09 2.21 1.9 2.47l6.98 2.57c2.27.88 4.17 2.29 4.17 5.04v3.09c0 3.09-2.27 5.75-8.61 5.75-6.43 0-8.61-2.66-8.61-5.75v-2.03c0-.53.27-.71.82-.71h2.26c.45 0 .64.18.64.71v1.68c0 2.03 1.45 3.18 4.89 3.18 3.44 0 4.89-1.15 4.89-3.18v-1.77c0-1.86-1.72-2.48-3.17-3.1l-6.43-2.38a4.98 4.98 0 0 1-3.36-4.6v-2.12c0-3.1 2-5.75 8.16-5.75 6.25 0 8.25 2.65 8.25 5.75v1.68c0 .44-.18.7-.64.7h-2.26c-.55 0-.82-.17-.82-.7zM97.04 32.16c0 3.09-1.91 5.75-8.52 5.75-6.62 0-8.52-2.66-8.52-5.75V17.75c0-3.1 1.9-5.75 8.52-5.75 6.61 0 8.52 2.65 8.52 5.75v1.85c0 .53-.18.71-.73.71h-2.17c-.55 0-.82-.18-.82-.71v-1.23c0-2.04-1.36-3.28-4.8-3.28-3.44 0-4.8 1.24-4.8 3.28v13.26c0 2.03 1.36 3.27 4.8 3.27 3.44 0 4.8-1.24 4.8-3.27v-1.77c0-.44.27-.71.82-.71h2.17c.46 0 .73.27.73.71zM125.81 34.28h9.78c.46 0 .82.18.82.71v1.68c0 .53-.36.71-.82.71h-12.96c-.45 0-.63-.27-.63-.71V12.8c0-.53.18-.8.73-.8h2.35c.45 0 .73.27.73.8zM143.72 36.67c0 .53-.19.71-.73.71h-2.36c-.45 0-.63-.27-.63-.71V12.8c0-.53.09-.8.63-.8h2.36c.54 0 .73.27.73.8zM164.58 12c.46 0 .64.18.64.71v1.68c0 .53-.09.7-.64.7h-5.98v21.58c0 .53-.27.71-.81.71h-2.36c-.45 0-.81-.27-.81-.71V15.09h-5.99c-.54 0-.63-.17-.63-.7v-1.68c0-.53.09-.71.63-.71zM175.53 23.76l5.71-11.05c.18-.36.36-.71.82-.71h2.35c.55 0 .82.27.55.71l-7.53 14.59v9.37c0 .44-.18.71-.72.71h-2.36c-.54 0-.63-.27-.63-.71V27.3l-7.61-14.59c-.28-.44 0-.71.54-.71h2.27c.54 0 .63.27.9.71zM110.76 12c.45 0 .73.27.91.71l7.43 23.96c.18.44 0 .71-.54.71h-2.45c-.45 0-.73-.27-.82-.71l-1.72-5.75h-7.97l-1.73 5.75c-.09.44-.36.71-.81.71h-2.45c-.54 0-.72-.27-.54-.71l7.43-23.96c.18-.44.45-.71.91-.71zm-1.18 5.48l-3.17 10.61h6.25z"
-    />
-    <path
-      fill="#3d9bd6"
-      d="M21.25 4.42v7.25h3.99V4.33l5.16 2.92 2-3.36L27.14.97A7.7 7.7 0 0 0 23.15 0c-1.36 0-2.72.35-3.89 1.06L14 3.98l1.99 3.36z"
-    />
-    <path
-      fill="#007664"
-      d="M21.25 4.42v7.25h3.99V4.33l5.16 2.92 2-3.36L27.14.97A7.7 7.7 0 0 0 23.15 0c-1.36 0-2.72.35-3.89 1.06L14 3.98l1.99 3.36z"
-    />
-    <path
-      fill="#ee4642"
-      d="M21.16 44.25V37h3.99v7.25l5.16-2.92 2 3.36-5.17 2.92a7.9 7.9 0 0 1-7.88 0L14 44.69l1.99-3.36z"
-    />
-    <path
-      fill="#2aad8e"
-      d="M40.43 13.28L34 16.9l1.99 3.36 6.44-3.62v5.83h3.99v-5.92c0-1.33-.37-2.65-1.09-3.8a8.82 8.82 0 0 0-2.9-2.83L37.17 7l-1.99 3.36z"
-    />
-    <path
-      fill="#d71d4f"
-      d="M4.99 32.84l6.43-3.63 2 3.36-6.44 3.63 5.17 2.91-2 3.36-5.25-2.92a7.6 7.6 0 0 1-2.81-2.82A7.1 7.1 0 0 1 1 32.92V27h3.99z"
-    />
-    <path
-      fill="#9e2569"
-      d="M4.08 16.64l6.43 3.62 2-3.36-6.44-3.62 5.17-2.92-2-3.36-5.25 2.92a8.72 8.72 0 0 0-2.9 2.83A7.16 7.16 0 0 0 0 16.64v5.92h3.99z"
-    />
-    <path
-      fill="#f79836"
-      d="M40.34 36.2L34 32.57l1.99-3.36 6.44 3.63V27h3.99v5.92c0 1.33-.37 2.57-1.09 3.81a8.69 8.69 0 0 1-2.9 2.82l-5.26 2.92-1.99-3.36z"
-    />
-    <path fill="#007664" d="M24 15v8.22l7.34-4.06z" />
-    <path fill="#9e2569" d="M23.25 15L16 19.16l7.25 4.06z" />
-    <path fill="#d71d4f" d="M22.25 25.07L15 21v8.13z" />
-    <path fill="#2aad8e" d="M24 24.98l7.25 4.07V21z" />
-    <path fill="#ee4642" d="M23.16 26L16 30.07l7.16 4.15z" />
-    <path fill="#f79836" d="M24 26v8.22l7.25-4.15z" />
-  </svg>
+ <svg width="186" height="49" viewBox="0 0 186 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M72.2048 18.0991C72.2048 16.0685 71.0283 14.9207 67.68 14.9207C64.3317 14.9207 63.1552 16.0685 63.1552 18.0991V18.8054C63.1552 20.4829 64.2412 21.0126 65.0556 21.2775L72.0238 23.8379C74.2862 24.7207 76.1866 26.1334 76.1866 28.8703V31.9604C76.1866 35.0505 73.9242 37.6991 67.5895 37.6991C61.1643 37.6991 58.9924 35.0505 58.9924 31.9604V29.9298C58.9924 29.4 59.2639 29.2235 59.8069 29.2235H62.0693C62.5218 29.2235 62.7027 29.4 62.7027 29.9298V31.6072C62.7027 33.6379 64.1507 34.7856 67.5895 34.7856C71.0283 34.7856 72.4763 33.6379 72.4763 31.6072V29.8415C72.4763 27.9874 70.7568 27.3694 69.3089 26.7514L62.8837 24.3676C61.1643 23.7496 59.5354 22.0721 59.5354 19.7766V17.6577C59.5354 14.5676 61.5263 11.9189 67.68 11.9189C73.9242 11.9189 75.9151 14.5676 75.9151 17.6577V19.3352C75.9151 19.7766 75.7341 20.0415 75.2816 20.0415H73.0192C72.4763 20.0415 72.2048 19.8649 72.2048 19.3352V18.0991Z" fill="white"/>
+<path d="M97.0913 32.0487C97.0913 35.1388 95.1909 37.7874 88.5847 37.7874C81.9785 37.7874 80.0781 35.1388 80.0781 32.0487V17.6577C80.0781 14.5676 81.9785 11.9189 88.5847 11.9189C95.1909 11.9189 97.0913 14.5676 97.0913 17.6577V19.5117C97.0913 20.0415 96.9103 20.218 96.3673 20.218H94.1954C93.6524 20.218 93.381 20.0415 93.381 19.5117V18.2757C93.381 16.2451 92.0235 15.009 88.5847 15.009C85.1459 15.009 83.7884 16.2451 83.7884 18.2757V31.5189C83.7884 33.5496 85.1459 34.7856 88.5847 34.7856C92.0235 34.7856 93.381 33.5496 93.381 31.5189V29.7532C93.381 29.3117 93.6524 29.0469 94.1954 29.0469H96.3673C96.8198 29.0469 97.0913 29.3117 97.0913 29.7532V32.0487Z" fill="white"/>
+<path d="M125.235 34.4322H135.009C135.461 34.4322 135.823 34.6088 135.823 35.1385V36.816C135.823 37.3458 135.461 37.5223 135.009 37.5223H122.068C121.616 37.5223 121.435 37.2575 121.435 36.816V12.9782C121.435 12.4485 121.616 12.1836 122.159 12.1836H124.511C124.964 12.1836 125.235 12.4485 125.235 12.9782V34.4322Z" fill="white"/>
+<path d="M164.148 12.1836C164.601 12.1836 164.782 12.3602 164.782 12.8899V14.5674C164.782 15.0971 164.691 15.2737 164.148 15.2737H158.175V36.816C158.175 37.3458 157.904 37.5223 157.361 37.5223H155.008C154.556 37.5223 154.194 37.2575 154.194 36.816V15.2737H148.221C147.678 15.2737 147.587 15.0971 147.587 14.5674V12.8899C147.587 12.3602 147.678 12.1836 148.221 12.1836H164.148Z" fill="white"/>
+<path d="M72.2048 18.0991C72.2048 16.0685 71.0283 14.9207 67.68 14.9207C64.3317 14.9207 63.1552 16.0685 63.1552 18.0991V18.8054C63.1552 20.4829 64.2412 21.0126 65.0556 21.2775L72.0238 23.8379C74.2862 24.7207 76.1866 26.1334 76.1866 28.8703V31.9604C76.1866 35.0505 73.9242 37.6991 67.5895 37.6991C61.1643 37.6991 58.9924 35.0505 58.9924 31.9604V29.9298C58.9924 29.4 59.2639 29.2235 59.8069 29.2235H62.0693C62.5218 29.2235 62.7027 29.4 62.7027 29.9298V31.6072C62.7027 33.6379 64.1507 34.7856 67.5895 34.7856C71.0283 34.7856 72.4763 33.6379 72.4763 31.6072V29.8415C72.4763 27.9874 70.7568 27.3694 69.3089 26.7514L62.8837 24.3676C61.1643 23.7496 59.5354 22.0721 59.5354 19.7766V17.6577C59.5354 14.5676 61.5263 11.9189 67.68 11.9189C73.9242 11.9189 75.9151 14.5676 75.9151 17.6577V19.3352C75.9151 19.7766 75.7341 20.0415 75.2816 20.0415H73.0192C72.4763 20.0415 72.2048 19.8649 72.2048 19.3352V18.0991Z" fill="white"/>
+<path d="M97.0913 32.0487C97.0913 35.1388 95.1909 37.7874 88.5847 37.7874C81.9785 37.7874 80.0781 35.1388 80.0781 32.0487V17.6577C80.0781 14.5676 81.9785 11.9189 88.5847 11.9189C95.1909 11.9189 97.0913 14.5676 97.0913 17.6577V19.5117C97.0913 20.0415 96.9103 20.218 96.3673 20.218H94.1954C93.6524 20.218 93.381 20.0415 93.381 19.5117V18.2757C93.381 16.2451 92.0235 15.009 88.5847 15.009C85.1459 15.009 83.7884 16.2451 83.7884 18.2757V31.5189C83.7884 33.5496 85.1459 34.7856 88.5847 34.7856C92.0235 34.7856 93.381 33.5496 93.381 31.5189V29.7532C93.381 29.3117 93.6524 29.0469 94.1954 29.0469H96.3673C96.8198 29.0469 97.0913 29.3117 97.0913 29.7532V32.0487Z" fill="white"/>
+<path d="M125.235 34.4322H135.009C135.461 34.4322 135.823 34.6088 135.823 35.1385V36.816C135.823 37.3458 135.461 37.5223 135.009 37.5223H122.068C121.616 37.5223 121.435 37.2575 121.435 36.816V12.9782C121.435 12.4485 121.616 12.1836 122.159 12.1836H124.511C124.964 12.1836 125.235 12.4485 125.235 12.9782V34.4322Z" fill="white"/>
+<path d="M143.515 36.816C143.515 37.3458 143.334 37.5223 142.791 37.5223H140.438C139.986 37.5223 139.805 37.2575 139.805 36.816V12.9782C139.805 12.4485 139.895 12.1836 140.438 12.1836H142.791C143.334 12.1836 143.515 12.4485 143.515 12.9782V36.816Z" fill="white"/>
+<path d="M164.148 12.1836C164.601 12.1836 164.782 12.3602 164.782 12.8899V14.5674C164.782 15.0971 164.691 15.2737 164.148 15.2737H158.175V36.816C158.175 37.3458 157.904 37.5223 157.361 37.5223H155.008C154.556 37.5223 154.194 37.2575 154.194 36.816V15.2737H148.221C147.678 15.2737 147.587 15.0971 147.587 14.5674V12.8899C147.587 12.3602 147.678 12.1836 148.221 12.1836H164.148Z" fill="white"/>
+<path d="M175.279 23.9259L180.98 12.8899C181.161 12.5367 181.342 12.1836 181.795 12.1836H184.148C184.691 12.1836 184.962 12.4485 184.691 12.8899L177.179 27.4575V36.816C177.179 37.2575 176.998 37.5223 176.455 37.5223H174.103C173.56 37.5223 173.469 37.2575 173.469 36.816V27.4575L165.867 12.8899C165.596 12.4485 165.867 12.1836 166.41 12.1836H168.673C169.216 12.1836 169.306 12.4485 169.578 12.8899L175.279 23.9259Z" fill="white"/>
+<path d="M109.851 12.1836C110.303 12.1836 110.575 12.4485 110.756 12.8899L118.176 36.816C118.357 37.2575 118.176 37.5223 117.633 37.5223H115.19C114.738 37.5223 114.466 37.2575 114.376 36.816L112.656 31.0773H104.693L102.973 36.816C102.883 37.2575 102.611 37.5223 102.159 37.5223H99.7153C99.1724 37.5223 98.9914 37.2575 99.1724 36.816L106.593 12.8899C106.774 12.4485 107.045 12.1836 107.498 12.1836H109.851ZM108.674 17.6575L105.507 28.2521H111.751L108.674 17.6575Z" fill="white"/>
+<path d="M21.0748 4.41441V11.6541H25.0566V4.32613L30.2149 7.23964L32.2058 3.88469L26.9571 0.971171C25.7806 0.264865 24.4232 0 22.9753 0C21.6178 0 20.2604 0.353153 19.0839 1.05946L13.8352 3.97297L15.8261 7.32793L21.0748 4.41441Z" fill="#005357"/>
+<path d="M21.0749 44.5856V37.3459H25.0567V44.5856L30.215 41.6721L32.2059 45.027L27.0476 47.9405C25.8712 48.6469 24.4233 49 23.0658 49C21.7084 49 20.351 48.6469 19.1745 47.9405L13.9258 45.027L15.9167 41.6721L21.0749 44.5856Z" fill="#FD8144"/>
+<path d="M39.8981 12.7133L33.4729 16.3331L35.4638 19.6881L41.889 16.0682V21.8953H45.8708V15.98C45.8708 14.6556 45.5088 13.3313 44.7848 12.1836C44.0609 11.0358 43.0654 10.0646 41.889 9.35834L36.6402 6.44482L34.6493 9.79978L39.8981 12.7133Z" fill="#0AADA6"/>
+<path d="M4.24279 32.8434L10.668 29.2236L12.6589 32.5785L6.23369 36.1983L11.3919 39.1119L9.40103 42.4668L4.15229 39.5533C2.97585 38.847 1.9804 37.8758 1.34693 36.7281C0.622968 35.5803 0.260986 34.256 0.260986 32.9317V27.0164H4.24279V32.8434Z" fill="#E84855"/>
+<path d="M4.24271 16.1569L10.6679 19.7767L12.6588 16.4217L6.23361 12.8019L11.3919 9.8884L9.40095 6.53345L4.15221 9.44696C2.97577 10.1533 1.98032 11.1244 1.25636 12.2722C0.532392 13.4199 0.17041 14.7443 0.17041 16.1569V22.0722H4.15221L4.24271 16.1569Z" fill="#A14FBF"/>
+<path d="M39.8982 36.1983L33.5635 32.5785L35.5544 29.2236L41.9796 32.8434V27.0164H45.9614V32.9317C45.9614 34.256 45.5994 35.492 44.8754 36.7281C44.1514 37.8758 43.156 38.847 41.9796 39.5533L36.7308 42.4668L34.7399 39.1119L39.8982 36.1983Z" fill="#F8F32B"/>
+<path d="M23.6086 15.3623V23.5731L30.9388 19.5119L23.6086 15.3623Z" fill="#005357"/>
+<path d="M22.5226 15.3623L15.283 19.5119L22.5226 23.5731V15.3623Z" fill="#A14FBF"/>
+<path d="M22.0705 24.4558L14.8308 20.3945V28.5171L22.0705 24.4558Z" fill="#E84855"/>
+<path d="M24.1519 24.4559L31.3915 28.5171V20.4829L24.1519 24.4559Z" fill="#0AADA6"/>
+<path d="M22.5227 25.4272L15.3735 29.4885L22.5227 33.6381V25.4272Z" fill="#FD8144"/>
+<path d="M23.6086 25.4272V33.6381L30.8483 29.4885L23.6086 25.4272Z" fill="#F8F32B"/>
+</svg>
 );
 
 export { Logo };

package/src/lib/index.css

@@ -9,7 +9,8 @@ body {
   font-family: 'Lato';
   font-style: normal;
   font-weight: normal;
-  src: local(''), url('./style/fonts/Lato-Regular.woff2') format('woff2'),
+  src:
+    url('./style/fonts/Lato-Regular.woff2') format('woff2'),
     /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./style/fonts/Lato-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
@@ -19,7 +20,8 @@ body {
   font-family: 'Lato';
   font-style: normal;
   font-weight: bold;
-  src: local(''), url('./style/fonts/Lato-Bold.woff2') format('woff2'),
+  src:
+    url('./style/fonts/Lato-Bold.woff2') format('woff2'),
     /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./style/fonts/Lato-Bold.woff')
       format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }