@popsure/dirty-swan 0.58.7 → 0.59.0-alpha

package/dist/esm/scss/public/demo.js

@@ -12,254 +12,264 @@ var colors = [
         hex: '#fff',
     },
     {
-        name: 'Primary 25',
-        code: 'primary-25',
-        hex: '#fcfcff',
+        name: 'Purple 50',
+        code: 'purple-50',
+        hex: '#F9F9FF',
     },
     {
-        name: 'Primary 50',
-        code: 'primary-50',
-        hex: '#f7f7ff',
+        name: 'Purple 100',
+        code: 'purple-100',
+        hex: '#F6F6FE',
     },
     {
-        name: 'Primary 100',
-        code: 'primary-100',
-        hex: '#ebebff',
+        name: 'Purple 200',
+        code: 'purple-200',
+        hex: '#EEEEFE',
     },
     {
-        name: 'Primary 300',
-        code: 'primary-300',
-        hex: '#b1b0f5',
+        name: 'Purple 300',
+        code: 'purple-300',
+        hex: '#E8E7FE',
     },
     {
-        name: 'Primary 500',
-        code: 'primary-500',
-        hex: '#8e8cee',
+        name: 'Purple 400',
+        code: 'purple-400',
+        hex: '#D2CFFD',
     },
     {
-        name: 'Primary 700',
-        code: 'primary-700',
-        hex: '#6160a2',
+        name: 'Purple 500',
+        code: 'purple-500',
+        hex: '#B8B4F3',
     },
     {
-        name: 'Primary 900',
-        code: 'primary-900',
-        hex: '#2e2e4c',
+        name: 'Purple 600',
+        code: 'purple-600',
+        hex: '#8883D8',
+    },
+    {
+        name: 'Purple 700',
+        code: 'purple-700',
+        hex: '#6A65AE',
+    },
+    {
+        name: 'Purple 800',
+        code: 'purple-800',
+        hex: '#484676',
+    },
+    {
+        name: 'Purple 900',
+        code: 'purple-900',
+        hex: '#32334B',
     },
     {
         name: 'Blue 100',
         code: 'blue-100',
-        hex: '#e5f0ff',
+        hex: '#E5F0FF',
+    },
+    {
+        name: 'Blue 200',
+        code: 'blue-200',
+        hex: '#DAE8FC',
     },
     {
         name: 'Blue 300',
         code: 'blue-300',
-        hex: '#b0cdf3',
+        hex: '#B0CDF3',
     },
     {
         name: 'Blue 500',
         code: 'blue-500',
-        hex: '#8bb4ea',
+        hex: '#8BB4EA',
     },
     {
         name: 'Blue 700',
         code: 'blue-700',
-        hex: '#5f7ba0',
+        hex: '#5F7BA0',
     },
     {
         name: 'Blue 900',
         code: 'blue-900',
-        hex: '#2d394a',
-    },
-    {
-        name: 'Glacier 100',
-        code: 'glacier-100',
-        hex: '#e0f7fe',
-    },
-    {
-        name: 'Glacier 300',
-        code: 'glacier-300',
-        hex: '#aeddec',
-    },
-    {
-        name: 'Glacier 500',
-        code: 'glacier-500',
-        hex: '#8bcbdf',
-    },
-    {
-        name: 'Glacier 700',
-        code: 'glacier-700',
-        hex: '#5d8896',
-    },
-    {
-        name: 'Glacier 900',
-        code: 'glacier-900',
-        hex: '#2d4148',
+        hex: '#2D394A',
     },
     {
         name: 'Red 100',
         code: 'red-100',
-        hex: '#fedede',
+        hex: '#FEE6E6',
+    },
+    {
+        name: 'Red 200',
+        code: 'red-200',
+        hex: '#FED7D7',
     },
     {
         name: 'Red 300',
         code: 'red-300',
-        hex: '#faa0a0',
+        hex: '#FAA0A0',
     },
     {
         name: 'Red 500',
         code: 'red-500',
-        hex: '#e55454',
+        hex: '#E55454',
     },
     {
         name: 'Red 700',
         code: 'red-700',
-        hex: '#c64848',
+        hex: '#C64848',
     },
     {
         name: 'Red 900',
         code: 'red-900',
-        hex: '#4b2525',
-    },
-    {
-        name: 'Pink 100',
-        code: 'pink-100',
-        hex: '#ffebf1',
-    },
-    {
-        name: 'Pink 300',
-        code: 'pink-300',
-        hex: '#ffb1cb',
-    },
-    {
-        name: 'Pink 500',
-        code: 'pink-500',
-        hex: '#f96092',
-    },
-    {
-        name: 'Pink 700',
-        code: 'pink-700',
-        hex: '#c0305f',
-    },
-    {
-        name: 'Pink 900',
-        code: 'pink-900',
-        hex: '#700024',
+        hex: '#4B2525',
     },
     {
-        name: 'Grey 100',
-        code: 'grey-100',
+        name: 'Neutral 100',
+        code: 'neutral-50',
         hex: '#fafaff',
     },
     {
-        name: 'Grey 200',
-        code: 'grey-200',
+        name: 'Neutral 200',
+        code: 'neutral-100',
         hex: '#f5f6fb',
     },
     {
-        name: 'Grey 300',
-        code: 'grey-300',
+        name: 'Neutral 300',
+        code: 'neutral-300',
         hex: '#ededf2',
     },
     {
-        name: 'Grey 400',
-        code: 'grey-400',
+        name: 'Neutral 400',
+        code: 'neutral-400',
         hex: '#d2d2d8',
     },
     {
-        name: 'Grey 500',
-        code: 'grey-500',
+        name: 'Neutral 500',
+        code: 'neutral-600',
         hex: '#91919c',
     },
     {
-        name: 'Grey 600',
-        code: 'grey-600',
+        name: 'Neutral 600',
+        code: 'neutral-700',
         hex: '#696970',
     },
     {
-        name: 'Grey 700',
-        code: 'grey-700',
+        name: 'Neutral 700',
+        code: 'neutral-800',
         hex: '#4c4c53',
     },
     {
-        name: 'Grey 900',
-        code: 'grey-900',
+        name: 'Neutral 900',
+        code: 'neutral-900',
         hex: '#26262e',
     },
     {
         name: 'Green 100',
         code: 'green-100',
-        hex: '#e4ffe6',
+        hex: '#E6FAF1',
+    },
+    {
+        name: 'Green 200',
+        code: 'green-200',
+        hex: '#D5F6E7',
     },
     {
         name: 'Green 300',
         code: 'green-300',
-        hex: '#c4f5c8',
+        hex: '#AAEACC',
     },
     {
         name: 'Green 500',
         code: 'green-500',
-        hex: '#84de8a',
+        hex: '#85DCB4',
     },
     {
         name: 'Green 700',
         code: 'green-700',
-        hex: '#5b985f',
+        hex: '#599278',
     },
     {
         name: 'Green 900',
         code: 'green-900',
-        hex: '#354a2d',
-    },
-    {
-        name: 'Spearmint 100',
-        code: 'spearmint-100',
-        hex: '#e3fff2',
-    },
-    {
-        name: 'Spearmint 300',
-        code: 'spearmint-300',
-        hex: '#aaeacc',
-    },
-    {
-        name: 'Spearmint 500',
-        code: 'spearmint-500',
-        hex: '#85dcb4',
-    },
-    {
-        name: 'Spearmint 700',
-        code: 'spearmint-700',
-        hex: '#599278',
-    },
-    {
-        name: 'Spearmint 900',
-        code: 'spearmint-900',
-        hex: '#2b4639',
+        hex: '#2B4639',
     },
     {
         name: 'Yellow 100',
         code: 'yellow-100',
-        hex: '#fff8e3',
+        hex: '#FEFAEC',
+    },
+    {
+        name: 'Yellow 200',
+        code: 'yellow-200',
+        hex: '#FCF3D1',
     },
     {
         name: 'Yellow 300',
         code: 'yellow-300',
-        hex: '#fae3a5',
+        hex: '#F6E7AC',
     },
     {
         name: 'Yellow 500',
         code: 'yellow-500',
-        hex: '#f7ce5c',
+        hex: '#F0D26F',
     },
     {
         name: 'Yellow 700',
         code: 'yellow-700',
-        hex: '#cc9e21',
+        hex: '#C5A33E',
     },
     {
         name: 'Yellow 900',
         code: 'yellow-900',
-        hex: '#4a3d10',
+        hex: '#483D18',
+    },
+    {
+        name: 'Orange 50',
+        code: 'orange-50',
+        hex: '#FAF8F5',
+    },
+    {
+        name: 'Orange 100',
+        code: 'orange-100',
+        hex: '#FCF7EF',
+    },
+    {
+        name: 'Orange 200',
+        code: 'orange-200',
+        hex: '#FDF2E2',
+    },
+    {
+        name: 'Orange 300',
+        code: 'orange-300',
+        hex: '#FEECD3',
+    },
+    {
+        name: 'Orange 400',
+        code: 'orange-400',
+        hex: '#FCDAAB',
+    },
+    {
+        name: 'Orange 500',
+        code: 'orange-500',
+        hex: '#FFD08F',
+    },
+    {
+        name: 'Orange 600',
+        code: 'orange-600',
+        hex: '#F2B873',
+    },
+    {
+        name: 'Orange 700',
+        code: 'orange-700',
+        hex: '#C6824E',
+    },
+    {
+        name: 'Orange 800',
+        code: 'orange-800',
+        hex: '#7E4B2F',
+    },
+    {
+        name: 'Orange 900',
+        code: 'orange-900',
+        hex: '#4C2D21',
     },
 ];
 var Colors = function () { return (jsxs("table", { style: { width: '100%' }, children: [jsxs("tr", { style: {
@@ -273,7 +283,7 @@ var Colors = function () { return (jsxs("table", { style: { width: '100%' }, chi
                             backgroundColor: color.hex,
                         } }) }), jsx("td", { children: color.name }), jsx("td", { children: "$ds-".concat(color.code) }), jsx("td", { children: "tc-".concat(color.code) }), jsx("td", { children: "bg-".concat(color.code) }), jsx("td", { children: color.hex })] })); })] })); };
 var BoxShadows = function () {
-    return (jsxs("div", { className: "d-flex fd-row f-wrap gap16", children: [jsx("div", { className: "d-flex ai-center jc-center ws2 border br8 bs-xs p-p", style: { height: '136px' }, children: ".bx-xs" }), jsx("div", { className: "d-flex ai-center jc-center ws2 border br8 bs-sm p-p", style: { height: '136px' }, children: ".bx-sm" }), jsx("div", { className: "d-flex ai-center jc-center ws2 border br8 bs-md p-p", style: { height: '136px' }, children: ".bx-md" }), jsx("div", { className: "d-flex ai-center jc-center ws2 border br8 bs-lg p-p", style: { height: '136px' }, children: ".bx-lg" })] }));
+    return (jsxs("div", { className: "d-flex fd-row f-wrap gap16", children: [jsx("div", { className: "d-flex ai-center jc-center ws2 border br8 bs-xs p-p", style: { height: '136px' }, children: ".bs-xs" }), jsx("div", { className: "d-flex ai-center jc-center ws2 border br8 bs-sm p-p", style: { height: '136px' }, children: ".bs-sm" }), jsx("div", { className: "d-flex ai-center jc-center ws2 border br8 bs-md p-p", style: { height: '136px' }, children: ".bs-md" }), jsx("div", { className: "d-flex ai-center jc-center ws2 border br8 bs-lg p-p", style: { height: '136px' }, children: ".bs-lg" }), jsx("div", { className: "d-flex ai-center jc-center ws2 border br8 bs-lg p-p", style: { height: '136px' }, children: ".bs-xl" })] }));
 };
 
 export { BoxShadows, Colors };

package/dist/esm/scss/public/demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"demo.js","sources":["../../../../../src/lib/scss/public/demo.tsx"],"sourcesContent":["import React from 'react';\n\nconst colors = [\n  {\n    name: 'Transparent',\n    code: 'transparent',\n    hex: 'transparent',\n  },\n  {\n    name: 'White',\n    code: 'white',\n    hex: '#fff',\n  },\n  {\n    name: 'Primary 25',\n    code: 'primary-25',\n    hex: '#fcfcff',\n  },\n  {\n    name: 'Primary 50',\n    code: 'primary-50',\n    hex: '#f7f7ff',\n  },\n  {\n    name: 'Primary 100',\n    code: 'primary-100',\n    hex: '#ebebff',\n  },\n  {\n    name: 'Primary 300',\n    code: 'primary-300',\n    hex: '#b1b0f5',\n  },\n  {\n    name: 'Primary 500',\n    code: 'primary-500',\n    hex: '#8e8cee',\n  },\n  {\n    name: 'Primary 700',\n    code: 'primary-700',\n    hex: '#6160a2',\n  },\n  {\n    name: 'Primary 900',\n    code: 'primary-900',\n    hex: '#2e2e4c',\n  },\n  {\n    name: 'Blue 100',\n    code: 'blue-100',\n    hex: '#e5f0ff',\n  },\n  {\n    name: 'Blue 300',\n    code: 'blue-300',\n    hex: '#b0cdf3',\n  },\n  {\n    name: 'Blue 500',\n    code: 'blue-500',\n    hex: '#8bb4ea',\n  },\n  {\n    name: 'Blue 700',\n    code: 'blue-700',\n    hex: '#5f7ba0',\n  },\n  {\n    name: 'Blue 900',\n    code: 'blue-900',\n    hex: '#2d394a',\n  },\n  {\n    name: 'Glacier 100',\n    code: 'glacier-100',\n    hex: '#e0f7fe',\n  },\n  {\n    name: 'Glacier 300',\n    code: 'glacier-300',\n    hex: '#aeddec',\n  },\n  {\n    name: 'Glacier 500',\n    code: 'glacier-500',\n    hex: '#8bcbdf',\n  },\n  {\n    name: 'Glacier 700',\n    code: 'glacier-700',\n    hex: '#5d8896',\n  },\n  {\n    name: 'Glacier 900',\n    code: 'glacier-900',\n    hex: '#2d4148',\n  },\n  {\n    name: 'Red 100',\n    code: 'red-100',\n    hex: '#fedede',\n  },\n  {\n    name: 'Red 300',\n    code: 'red-300',\n    hex: '#faa0a0',\n  },\n  {\n    name: 'Red 500',\n    code: 'red-500',\n    hex: '#e55454',\n  },\n  {\n    name: 'Red 700',\n    code: 'red-700',\n    hex: '#c64848',\n  },\n  {\n    name: 'Red 900',\n    code: 'red-900',\n    hex: '#4b2525',\n  },\n  {\n    name: 'Pink 100',\n    code: 'pink-100',\n    hex: '#ffebf1',\n  },\n  {\n    name: 'Pink 300',\n    code: 'pink-300',\n    hex: '#ffb1cb',\n  },\n  {\n    name: 'Pink 500',\n    code: 'pink-500',\n    hex: '#f96092',\n  },\n  {\n    name: 'Pink 700',\n    code: 'pink-700',\n    hex: '#c0305f',\n  },\n  {\n    name: 'Pink 900',\n    code: 'pink-900',\n    hex: '#700024',\n  },\n  {\n    name: 'Grey 100',\n    code: 'grey-100',\n    hex: '#fafaff',\n  },\n  {\n    name: 'Grey 200',\n    code: 'grey-200',\n    hex: '#f5f6fb',\n  },\n  {\n    name: 'Grey 300',\n    code: 'grey-300',\n    hex: '#ededf2',\n  },\n  {\n    name: 'Grey 400',\n    code: 'grey-400',\n    hex: '#d2d2d8',\n  },\n  {\n    name: 'Grey 500',\n    code: 'grey-500',\n    hex: '#91919c',\n  },\n  {\n    name: 'Grey 600',\n    code: 'grey-600',\n    hex: '#696970',\n  },\n  {\n    name: 'Grey 700',\n    code: 'grey-700',\n    hex: '#4c4c53',\n  },\n  {\n    name: 'Grey 900',\n    code: 'grey-900',\n    hex: '#26262e',\n  },\n  {\n    name: 'Green 100',\n    code: 'green-100',\n    hex: '#e4ffe6',\n  },\n  {\n    name: 'Green 300',\n    code: 'green-300',\n    hex: '#c4f5c8',\n  },\n  {\n    name: 'Green 500',\n    code: 'green-500',\n    hex: '#84de8a',\n  },\n  {\n    name: 'Green 700',\n    code: 'green-700',\n    hex: '#5b985f',\n  },\n  {\n    name: 'Green 900',\n    code: 'green-900',\n    hex: '#354a2d',\n  },\n  {\n    name: 'Spearmint 100',\n    code: 'spearmint-100',\n    hex: '#e3fff2',\n  },\n  {\n    name: 'Spearmint 300',\n    code: 'spearmint-300',\n    hex: '#aaeacc',\n  },\n  {\n    name: 'Spearmint 500',\n    code: 'spearmint-500',\n    hex: '#85dcb4',\n  },\n  {\n    name: 'Spearmint 700',\n    code: 'spearmint-700',\n    hex: '#599278',\n  },\n  {\n    name: 'Spearmint 900',\n    code: 'spearmint-900',\n    hex: '#2b4639',\n  },\n  {\n    name: 'Yellow 100',\n    code: 'yellow-100',\n    hex: '#fff8e3',\n  },\n  {\n    name: 'Yellow 300',\n    code: 'yellow-300',\n    hex: '#fae3a5',\n  },\n  {\n    name: 'Yellow 500',\n    code: 'yellow-500',\n    hex: '#f7ce5c',\n  },\n  {\n    name: 'Yellow 700',\n    code: 'yellow-700',\n    hex: '#cc9e21',\n  },\n  {\n    name: 'Yellow 900',\n    code: 'yellow-900',\n    hex: '#4a3d10',\n  },\n];\n\nexport const Colors = () => (\n  <table style={{ width: '100%' }}>\n    <tr\n      style={{\n        height: '40px',\n        lineHeight: '40px',\n        textAlign: 'left',\n      }}\n    >\n      <th style={{ fontWeight: 'bold' }}>Color</th>\n      <th style={{ fontWeight: 'bold' }}>Name</th>\n      <th style={{ fontWeight: 'bold' }}>Sass</th>\n      <th style={{ fontWeight: 'bold' }}>Text color class</th>\n      <th style={{ fontWeight: 'bold' }}>BG color class</th>\n      <th style={{ fontWeight: 'bold' }}>Hex</th>\n    </tr>\n    {colors.map((color) => (\n      <tr style={{ height: '40px', lineHeight: '40px' }}>\n        <td>\n          <div\n            style={{\n              width: '24px',\n              height: '24px',\n              borderRadius: '4px',\n              backgroundColor: color.hex,\n            }}\n          />\n        </td>\n        <td>{color.name}</td>\n        <td>{`$ds-${color.code}`}</td>\n        <td>{`tc-${color.code}`}</td>\n        <td>{`bg-${color.code}`}</td>\n        <td>{color.hex}</td>\n      </tr>\n    ))}\n  </table>\n);\n\nexport const BoxShadows = () => {\n  return (\n    <div className=\"d-flex fd-row f-wrap gap16\">\n      <div\n        className=\"d-flex ai-center jc-center ws2 border br8 bs-xs p-p\"\n        style={{ height: '136px' }}\n      >\n        .bx-xs\n      </div>\n      <div\n        className=\"d-flex ai-center jc-center ws2 border br8 bs-sm p-p\"\n        style={{ height: '136px' }}\n      >\n        .bx-sm\n      </div>\n      <div\n        className=\"d-flex ai-center jc-center ws2 border br8 bs-md p-p\"\n        style={{ height: '136px' }}\n      >\n        .bx-md\n      </div>\n      <div\n        className=\"d-flex ai-center jc-center ws2 border br8 bs-lg p-p\"\n        style={{ height: '136px' }}\n      >\n        .bx-lg\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"demo.js","sources":["../../../../../src/lib/scss/public/demo.tsx"],"sourcesContent":["import React from 'react';\n\nconst colors = [\n  {\n    name: 'Transparent',\n    code: 'transparent',\n    hex: 'transparent',\n  },\n  {\n    name: 'White',\n    code: 'white',\n    hex: '#fff',\n  },\n  {\n    name: 'Purple 50',\n    code: 'purple-50',\n    hex: '#F9F9FF',\n  },\n  {\n    name: 'Purple 100',\n    code: 'purple-100',\n    hex: '#F6F6FE',\n  },\n  {\n    name: 'Purple 200',\n    code: 'purple-200',\n    hex: '#EEEEFE',\n  },\n  {\n    name: 'Purple 300',\n    code: 'purple-300',\n    hex: '#E8E7FE',\n  },\n  {\n    name: 'Purple 400',\n    code: 'purple-400',\n    hex: '#D2CFFD',\n  },\n  {\n    name: 'Purple 500',\n    code: 'purple-500',\n    hex: '#B8B4F3',\n  },\n  {\n    name: 'Purple 600',\n    code: 'purple-600',\n    hex: '#8883D8',\n  },\n  {\n    name: 'Purple 700',\n    code: 'purple-700',\n    hex: '#6A65AE',\n  },\n  {\n    name: 'Purple 800',\n    code: 'purple-800',\n    hex: '#484676',\n  },\n  {\n    name: 'Purple 900',\n    code: 'purple-900',\n    hex: '#32334B',\n  },\n  {\n    name: 'Blue 100',\n    code: 'blue-100',\n    hex: '#E5F0FF',\n  },\n  {\n    name: 'Blue 200',\n    code: 'blue-200',\n    hex: '#DAE8FC',\n  },\n  {\n    name: 'Blue 300',\n    code: 'blue-300',\n    hex: '#B0CDF3',\n  },\n  {\n    name: 'Blue 500',\n    code: 'blue-500',\n    hex: '#8BB4EA',\n  },\n  {\n    name: 'Blue 700',\n    code: 'blue-700',\n    hex: '#5F7BA0',\n  },\n  {\n    name: 'Blue 900',\n    code: 'blue-900',\n    hex: '#2D394A',\n  },\n  {\n    name: 'Red 100',\n    code: 'red-100',\n    hex: '#FEE6E6',\n  },\n  {\n    name: 'Red 200',\n    code: 'red-200',\n    hex: '#FED7D7',\n  },\n  {\n    name: 'Red 300',\n    code: 'red-300',\n    hex: '#FAA0A0',\n  },\n  {\n    name: 'Red 500',\n    code: 'red-500',\n    hex: '#E55454',\n  },\n  {\n    name: 'Red 700',\n    code: 'red-700',\n    hex: '#C64848',\n  },\n  {\n    name: 'Red 900',\n    code: 'red-900',\n    hex: '#4B2525',\n  },\n  {\n    name: 'Neutral 100',\n    code: 'neutral-50',\n    hex: '#fafaff',\n  },\n  {\n    name: 'Neutral 200',\n    code: 'neutral-100',\n    hex: '#f5f6fb',\n  },\n  {\n    name: 'Neutral 300',\n    code: 'neutral-300',\n    hex: '#ededf2',\n  },\n  {\n    name: 'Neutral 400',\n    code: 'neutral-400',\n    hex: '#d2d2d8',\n  },\n  {\n    name: 'Neutral 500',\n    code: 'neutral-600',\n    hex: '#91919c',\n  },\n  {\n    name: 'Neutral 600',\n    code: 'neutral-700',\n    hex: '#696970',\n  },\n  {\n    name: 'Neutral 700',\n    code: 'neutral-800',\n    hex: '#4c4c53',\n  },\n  {\n    name: 'Neutral 900',\n    code: 'neutral-900',\n    hex: '#26262e',\n  },\n  {\n    name: 'Green 100',\n    code: 'green-100',\n    hex: '#E6FAF1',\n  },\n  {\n    name: 'Green 200',\n    code: 'green-200',\n    hex: '#D5F6E7',\n  },\n  {\n    name: 'Green 300',\n    code: 'green-300',\n    hex: '#AAEACC',\n  },\n  {\n    name: 'Green 500',\n    code: 'green-500',\n    hex: '#85DCB4',\n  },\n  {\n    name: 'Green 700',\n    code: 'green-700',\n    hex: '#599278',\n  },\n  {\n    name: 'Green 900',\n    code: 'green-900',\n    hex: '#2B4639',\n  },\n  {\n    name: 'Yellow 100',\n    code: 'yellow-100',\n    hex: '#FEFAEC',\n  },\n  {\n    name: 'Yellow 200',\n    code: 'yellow-200',\n    hex: '#FCF3D1',\n  },\n  {\n    name: 'Yellow 300',\n    code: 'yellow-300',\n    hex: '#F6E7AC',\n  },\n  {\n    name: 'Yellow 500',\n    code: 'yellow-500',\n    hex: '#F0D26F',\n  },\n  {\n    name: 'Yellow 700',\n    code: 'yellow-700',\n    hex: '#C5A33E',\n  },\n  {\n    name: 'Yellow 900',\n    code: 'yellow-900',\n    hex: '#483D18',\n  },\n  {\n    name: 'Orange 50',\n    code: 'orange-50',\n    hex: '#FAF8F5',\n  },\n  {\n    name: 'Orange 100',\n    code: 'orange-100',\n    hex: '#FCF7EF',\n  },\n  {\n    name: 'Orange 200',\n    code: 'orange-200',\n    hex: '#FDF2E2',\n  },\n  {\n    name: 'Orange 300',\n    code: 'orange-300',\n    hex: '#FEECD3',\n  },\n  {\n    name: 'Orange 400',\n    code: 'orange-400',\n    hex: '#FCDAAB',\n  },\n  {\n    name: 'Orange 500',\n    code: 'orange-500',\n    hex: '#FFD08F',\n  },\n  {\n    name: 'Orange 600',\n    code: 'orange-600',\n    hex: '#F2B873',\n  },\n  {\n    name: 'Orange 700',\n    code: 'orange-700',\n    hex: '#C6824E',\n  },\n  {\n    name: 'Orange 800',\n    code: 'orange-800',\n    hex: '#7E4B2F',\n  },\n  {\n    name: 'Orange 900',\n    code: 'orange-900',\n    hex: '#4C2D21',\n  },\n];\n\nexport const Colors = () => (\n  <table style={{ width: '100%' }}>\n    <tr\n      style={{\n        height: '40px',\n        lineHeight: '40px',\n        textAlign: 'left',\n      }}\n    >\n      <th style={{ fontWeight: 'bold' }}>Color</th>\n      <th style={{ fontWeight: 'bold' }}>Name</th>\n      <th style={{ fontWeight: 'bold' }}>Sass</th>\n      <th style={{ fontWeight: 'bold' }}>Text color class</th>\n      <th style={{ fontWeight: 'bold' }}>BG color class</th>\n      <th style={{ fontWeight: 'bold' }}>Hex</th>\n    </tr>\n    {colors.map((color) => (\n      <tr style={{ height: '40px', lineHeight: '40px' }}>\n        <td>\n          <div\n            style={{\n              width: '24px',\n              height: '24px',\n              borderRadius: '4px',\n              backgroundColor: color.hex,\n            }}\n          />\n        </td>\n        <td>{color.name}</td>\n        <td>{`$ds-${color.code}`}</td>\n        <td>{`tc-${color.code}`}</td>\n        <td>{`bg-${color.code}`}</td>\n        <td>{color.hex}</td>\n      </tr>\n    ))}\n  </table>\n);\n\nexport const BoxShadows = () => {\n  return (\n    <div className=\"d-flex fd-row f-wrap gap16\">\n      <div\n        className=\"d-flex ai-center jc-center ws2 border br8 bs-xs p-p\"\n        style={{ height: '136px' }}\n      >\n        .bs-xs\n      </div>\n      <div\n        className=\"d-flex ai-center jc-center ws2 border br8 bs-sm p-p\"\n        style={{ height: '136px' }}\n      >\n        .bs-sm\n      </div>\n      <div\n        className=\"d-flex ai-center jc-center ws2 border br8 bs-md p-p\"\n        style={{ height: '136px' }}\n      >\n        .bs-md\n      </div>\n      <div\n        className=\"d-flex ai-center jc-center ws2 border br8 bs-lg p-p\"\n        style={{ height: '136px' }}\n      >\n        .bs-lg\n      </div>\n      <div\n        className=\"d-flex ai-center jc-center ws2 border br8 bs-lg p-p\"\n        style={{ height: '136px' }}\n      >\n        .bs-xl\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/util/images/index.stories.js

@@ -8,7 +8,7 @@ import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
 import '../../tslib.es6-a39f91fc.js';
 import '../../index-69a46657.js';
 
-var css_248z = ".style-module_searchBar__1ADz1 {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-bottom: 1px solid #ededf2;\n  padding: 4px 20px;\n  z-index: 9;\n}\n\n.style-module_imageWrapper__1t-SZ {\n  width: 32px;\n  height: 32px;\n}\n.style-module_imageWrapper__1t-SZ img {\n  width: 100%;\n}";
+var css_248z = ".style-module_searchBar__1ADz1 {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-bottom: 1px solid #e7e7ed;\n  padding: 4px 20px;\n  z-index: 9;\n}\n\n.style-module_imageWrapper__1t-SZ {\n  width: 32px;\n  height: 32px;\n}\n.style-module_imageWrapper__1t-SZ img {\n  width: 100%;\n}";
 var styles = {"searchBar":"style-module_searchBar__1ADz1","imageWrapper":"style-module_imageWrapper__1t-SZ"};
 styleInject(css_248z);
 
@@ -45,7 +45,7 @@ var Illustrations = function () {
     };
     return (jsxs("div", { children: [jsx("div", { className: classNames(styles.searchBar, 'bg-white'), children: jsxs("div", { className: 'd-flex gap8 wmx12 m-auto', children: [jsx(Input, { className: 'w70', onChange: handleOnSearch, placeholder: 'Search icon', value: value }), jsx(Button, { className: 'w30', disabled: !value, onClick: clearSearch, children: "Clear search" })] }) }), jsx("div", { className: 'd-flex f-wrap mt80', children: options.map(function (_a) {
                     var iconKey = _a[0], src = _a[1];
-                    return (jsx("div", { className: "w20 p8", children: jsxs("div", { className: 'br4 p24 pt16 pb16 bg-grey-100 w100 d-flex fd-column ai-center', children: [jsx("div", { className: styles.imageWrapper, children: jsx("img", { src: src, alt: iconKey }) }), jsx("span", { className: 'p-p--small mt16', children: iconKey })] }) }, iconKey));
+                    return (jsx("div", { className: "w20 p8", children: jsxs("div", { className: 'br4 p24 pt16 pb16 bg-neutral-50 w100 d-flex fd-column ai-center', children: [jsx("div", { className: styles.imageWrapper, children: jsx("img", { src: src, alt: iconKey }) }), jsx("span", { className: 'p-p--small mt16', children: iconKey })] }) }, iconKey));
                 }) })] }));
 };
 

package/dist/esm/util/images/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/util/images/index.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { illustrations } from '../../util/images';\nimport classNames from 'classnames';\nimport { Button, Input } from '../..';\nimport styles from './style.module.scss';\n\nconst story = {\n  title: 'Utils/Illustrations',\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Use the `illustrations` object export to access our list of available images.',\n      },\n    },\n  },\n};\n\nconst initialImages = Object.entries(illustrations)\n\nexport const Illustrations = () => {\n  const [value, setValue] = useState('');\n  const [options, setOptions] = useState(initialImages);\n\n  const clearSearch = () => {\n    setValue('');\n    setOptions(initialImages);\n  };\n\n  const handleOnSearch = (event: ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setValue(event.target.value);\n\n    if (searchValue === '') {\n      setOptions(initialImages);\n      return;\n    }\n\n    setOptions(initialImages.filter(([key]) => \n      key.toLowerCase()\n        .includes(searchValue.toLowerCase())\n    ));\n  };\n\n  return (\n    <div>\n      <div className={classNames(styles.searchBar, 'bg-white')}>\n        <div className='d-flex gap8 wmx12 m-auto'>\n        <Input\n          className='w70'\n          onChange={handleOnSearch}\n          placeholder='Search icon'\n          value={value} \n        />\n        <Button className='w30' disabled={!value} onClick={clearSearch}>\n          Clear search\n        </Button>\n        </div>\n      </div>\n\n      <div className='d-flex f-wrap mt80'>\n        {options.map(([iconKey, src]) => (\n          <div key={iconKey} className=\"w20 p8\">\n            <div className='br4 p24 pt16 pb16 bg-grey-100 w100 d-flex fd-column ai-center'>\n              <div className={styles.imageWrapper}>\n                <img src={src} alt={iconKey} />\n              </div>\n              <span className='p-p--small mt16'>{iconKey}</span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;IAMM,KAAK,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EACP,+EAA+E;aAClF;SACF;KACF;EACD;AAEF,IAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;IAEtC,aAAa,GAAG;IACrB,IAAA,KAAoB,QAAQ,CAAC,EAAE,CAAC,EAA/B,KAAK,QAAA,EAAE,QAAQ,QAAgB,CAAC;IACjC,IAAA,KAAwB,QAAQ,CAAC,aAAa,CAAC,EAA9C,OAAO,QAAA,EAAE,UAAU,QAA2B,CAAC;IAEtD,IAAM,WAAW,GAAG;QAClB,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,UAAU,CAAC,aAAa,CAAC,CAAC;KAC3B,CAAC;IAEF,IAAM,cAAc,GAAG,UAAC,KAAoC;QAC1D,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,WAAW,KAAK,EAAE,EAAE;YACtB,UAAU,CAAC,aAAa,CAAC,CAAC;YAC1B,OAAO;SACR;QAED,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,UAAC,EAAK;gBAAJ,GAAG,QAAA;YACnC,OAAA,GAAG,CAAC,WAAW,EAAE;iBACd,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;SAAA,CACvC,CAAC,CAAC;KACJ,CAAC;IAEF,QACEA,yBACEC,aAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,YACtDD,cAAK,SAAS,EAAC,0BAA0B,aACzCC,IAAC,KAAK,IACJ,SAAS,EAAC,KAAK,EACf,QAAQ,EAAE,cAAc,EACxB,WAAW,EAAC,aAAa,EACzB,KAAK,EAAE,KAAK,GACZ,EACFA,IAAC,MAAM,IAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,6BAErD,IACH,GACF,EAENA,aAAK,SAAS,EAAC,oBAAoB,YAChC,OAAO,CAAC,GAAG,CAAC,UAAC,EAAc;wBAAb,OAAO,QAAA,EAAE,GAAG,QAAA;oBAAM,QAC/BA,aAAmB,SAAS,EAAC,QAAQ,YACnCD,cAAK,SAAS,EAAC,+DAA+D,aAC5EC,aAAK,SAAS,EAAE,MAAM,CAAC,YAAY,YACjCA,aAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,GAAI,GAC3B,EACNA,cAAM,SAAS,EAAC,iBAAiB,YAAE,OAAO,GAAQ,IAC9C,IANE,OAAO,CAOX;iBACP,CAAC,GACE,IACF,EACN;AACJ;;;;;"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/util/images/index.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { illustrations } from '../../util/images';\nimport classNames from 'classnames';\nimport { Button, Input } from '../..';\nimport styles from './style.module.scss';\n\nconst story = {\n  title: 'Utils/Illustrations',\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Use the `illustrations` object export to access our list of available images.',\n      },\n    },\n  },\n};\n\nconst initialImages = Object.entries(illustrations)\n\nexport const Illustrations = () => {\n  const [value, setValue] = useState('');\n  const [options, setOptions] = useState(initialImages);\n\n  const clearSearch = () => {\n    setValue('');\n    setOptions(initialImages);\n  };\n\n  const handleOnSearch = (event: ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setValue(event.target.value);\n\n    if (searchValue === '') {\n      setOptions(initialImages);\n      return;\n    }\n\n    setOptions(initialImages.filter(([key]) => \n      key.toLowerCase()\n        .includes(searchValue.toLowerCase())\n    ));\n  };\n\n  return (\n    <div>\n      <div className={classNames(styles.searchBar, 'bg-white')}>\n        <div className='d-flex gap8 wmx12 m-auto'>\n        <Input\n          className='w70'\n          onChange={handleOnSearch}\n          placeholder='Search icon'\n          value={value} \n        />\n        <Button className='w30' disabled={!value} onClick={clearSearch}>\n          Clear search\n        </Button>\n        </div>\n      </div>\n\n      <div className='d-flex f-wrap mt80'>\n        {options.map(([iconKey, src]) => (\n          <div key={iconKey} className=\"w20 p8\">\n            <div className='br4 p24 pt16 pb16 bg-neutral-50 w100 d-flex fd-column ai-center'>\n              <div className={styles.imageWrapper}>\n                <img src={src} alt={iconKey} />\n              </div>\n              <span className='p-p--small mt16'>{iconKey}</span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;IAMM,KAAK,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EACP,+EAA+E;aAClF;SACF;KACF;EACD;AAEF,IAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;IAEtC,aAAa,GAAG;IACrB,IAAA,KAAoB,QAAQ,CAAC,EAAE,CAAC,EAA/B,KAAK,QAAA,EAAE,QAAQ,QAAgB,CAAC;IACjC,IAAA,KAAwB,QAAQ,CAAC,aAAa,CAAC,EAA9C,OAAO,QAAA,EAAE,UAAU,QAA2B,CAAC;IAEtD,IAAM,WAAW,GAAG;QAClB,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,UAAU,CAAC,aAAa,CAAC,CAAC;KAC3B,CAAC;IAEF,IAAM,cAAc,GAAG,UAAC,KAAoC;QAC1D,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,WAAW,KAAK,EAAE,EAAE;YACtB,UAAU,CAAC,aAAa,CAAC,CAAC;YAC1B,OAAO;SACR;QAED,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,UAAC,EAAK;gBAAJ,GAAG,QAAA;YACnC,OAAA,GAAG,CAAC,WAAW,EAAE;iBACd,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;SAAA,CACvC,CAAC,CAAC;KACJ,CAAC;IAEF,QACEA,yBACEC,aAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,YACtDD,cAAK,SAAS,EAAC,0BAA0B,aACzCC,IAAC,KAAK,IACJ,SAAS,EAAC,KAAK,EACf,QAAQ,EAAE,cAAc,EACxB,WAAW,EAAC,aAAa,EACzB,KAAK,EAAE,KAAK,GACZ,EACFA,IAAC,MAAM,IAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,6BAErD,IACH,GACF,EAENA,aAAK,SAAS,EAAC,oBAAoB,YAChC,OAAO,CAAC,GAAG,CAAC,UAAC,EAAc;wBAAb,OAAO,QAAA,EAAE,GAAG,QAAA;oBAAM,QAC/BA,aAAmB,SAAS,EAAC,QAAQ,YACnCD,cAAK,SAAS,EAAC,iEAAiE,aAC9EC,aAAK,SAAS,EAAE,MAAM,CAAC,YAAY,YACjCA,aAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,GAAI,GAC3B,EACNA,cAAM,SAAS,EAAC,iBAAiB,YAAE,OAAO,GAAQ,IAC9C,IANE,OAAO,CAOX;iBACP,CAAC,GACE,IACF,EACN;AACJ;;;;;"}