@popsure/dirty-swan 0.41.8 → 0.41.10

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export { D as DateSelector } from './index-02a5537e.js';
+export { D as DateSelector } from './index-f0e3bc9a.js';
 export { SignaturePad } from './components/signaturePad/index.js';
 export { AutocompleteAddress } from './components/autocompleteAddress/index.js';
 export { Input } from './components/input/index.js';
@@ -27,7 +27,7 @@ export { Link } from './components/link/index.js';
 export { i as illustrations, a as images } from './index-1693701e.js';
 export { Spinner } from './components/spinner/index.js';
 export { Toggle } from './components/input/toggle/index.js';
-export { a as Toaster, t as toast } from './index-45edc7d0.js';
+export { a as Toaster, t as toast } from './index-2c193605.js';
 export { default as Svg1Icon } from './components/icon/icons/1.js';
 export { default as Svg2Icon } from './components/icon/icons/2.js';
 export { default as Svg3Icon } from './components/icon/icons/3.js';

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

@@ -160,6 +160,11 @@ var colors = [
     {
         name: 'Grey 300',
         code: 'grey-300',
+        hex: '#ededf2',
+    },
+    {
+        name: 'Grey 400',
+        code: 'grey-400',
         hex: '#d2d2d8',
     },
     {

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: '#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: '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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"}

package/dist/lib/scss/public/demo.tsx

@@ -159,6 +159,11 @@ const colors = [
   {
     name: 'Grey 300',
     code: 'grey-300',
+    hex: '#ededf2',
+  },
+  {
+    name: 'Grey 400',
+    code: 'grey-400',
     hex: '#d2d2d8',
   },
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.41.8",
+  "version": "0.41.10",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/card/index.tsx

@@ -41,87 +41,91 @@ const CardContent = ({
   actionIcon,
   title,
   titleVariant = 'large',
-}: CardProps) => (
-  <section
-    className={classNamesUtil(
-      'd-flex fd-column jc-center br8 bg-white w100 ta-left',
-      { 'bs-sm': dropShadow },
-      {
-        compact: 'p16',
-        balanced: 'p24',
-        spacious: 'p32',
-      }[density],
-      classNames?.wrapper
-    )}
-  >
-    <div className="d-flex w100">
-      {icon && (
-        <div
-          className={classNamesUtil(
-            `d-flex ai-center tc-primary-500`,
-            styles.icon,
-            styles[`icon${density}`],
-            classNames?.icon
-          )}
-        >
-          {icon}
-        </div>
+}: CardProps) => {
+  const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;
+
+  return (
+    <section
+      className={classNamesUtil(
+        'd-flex fd-column jc-center br8 bg-white w100 ta-left',
+        { 'bs-sm': dropShadow },
+        {
+          compact: 'p16',
+          balanced: 'p24',
+          spacious: 'p32',
+        }[density],
+        classNames?.wrapper
       )}
+    >
+      <div className="d-flex w100">
+        {icon && (
+          <div
+            className={classNamesUtil(
+              `d-flex ai-center tc-primary-500`,
+              styles.icon,
+              styles[`icon${density}`],
+              classNames?.icon
+            )}
+          >
+            {icon}
+          </div>
+        )}
 
-      <div className="d-flex jc-between w100">
-        <div className="d-flex jc-center gap8 fd-column tc-grey-900 w100">
-          {label && (
-            <h3 className={classNamesUtil('p-p--small', classNames?.label)}>
-              {label}
-            </h3>
-          )}
+        <div className="d-flex jc-between w100">
+          <div className="d-flex jc-center gap8 fd-column tc-grey-900 w100">
+            {label && (
+              <h3 className={classNamesUtil('p-p--small', classNames?.label)}>
+                {label}
+              </h3>
+            )}
 
-          {title && (
-            <h2
-              className={classNamesUtil(
-                classNames?.title,
-                {
-                  large: 'p-h3',
-                  medium: 'p-h4',
-                  small: 'p-p',
-                }[titleVariant]
-              )}
-            >
-              {title}
-            </h2>
-          )}
+            {title && (
+              <h2
+                className={classNamesUtil(
+                  classNames?.title,
+                  {
+                    large: 'p-h3',
+                    medium: 'p-h4',
+                    small: 'p-p',
+                  }[titleVariant]
+                )}
+              >
+                {title}
+              </h2>
+            )}
 
-          {description && (
+            {description && (
+              <div
+                className={classNamesUtil(
+                  'tc-grey-600',
+                  classNames?.description,
+                  descriptionVariant === 'small' ? 'p-p--small' : 'p-p'
+                )}
+              >
+                {description}
+              </div>
+            )}
+          </div>
+
+          {onClick && !hideActionIcon && (
             <div
               className={classNamesUtil(
-                'tc-grey-600',
-                classNames?.description,
-                descriptionVariant === 'small' ? 'p-p--small' : 'p-p'
+                styles.actionIcon,
+                classNames?.actionIcon,
+                styles[`actionIcon${density}`],
+                'd-flex ai-center'
               )}
             >
-              {description}
+              {actionIcon || <ChevronRightIcon size={24} />}
             </div>
           )}
         </div>
-
-        {onClick && (
-          <div
-            className={classNamesUtil(
-              styles.actionIcon,
-              classNames?.actionIcon,
-              styles[`actionIcon${density}`],
-              'd-flex ai-center'
-            )}
-          >
-            {actionIcon || <ChevronRightIcon size={24} />}
-          </div>
-        )}
       </div>
-    </div>
 
-    {children && <div className={classNames?.children}>{children}</div>}
-  </section>
-);
+      {children && <div className={classNames?.children}>{children}</div>}
+    </section>
+  );
+};
 
 const Card = (props: CardProps) => {
   const { onClick } = props;
@@ -130,7 +134,7 @@ const Card = (props: CardProps) => {
     return (
       <button
         className={classNamesUtil(
-          'c-pointer d-flex w100 br8',
+          'c-pointer d-flex w100 br8 ai-stretch',
           styles.button,
           props.classNames?.buttonWrapper
         )}

package/src/lib/components/card/style.module.scss

@@ -2,13 +2,17 @@
 
 .button {
   background-color: transparent;
-  border: 1px solid transparent;
   color: $ds-grey-900;
-  outline-color: $ds-primary-500;
+  outline: 1px solid transparent;
   transition: all 0.2s ease-in-out;
 
   &:hover {
-    border-color: $ds-primary-500;
+    outline: 1px solid $ds-primary-500;
+    color: $ds-primary-500;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $ds-primary-500;
     color: $ds-primary-500;
   }
 }

package/src/lib/components/icon/IconWrapper/IconWrapper.tsx

@@ -25,6 +25,7 @@ const IconWrapper = ({
       [styles.wrapper]: !noMargin
     })}
     style={{
+      minWidth: `${size}px`,
       width: `${size}px`,
       height: `${size}px`
     }}

package/src/lib/scss/public/demo.tsx

@@ -159,6 +159,11 @@ const colors = [
   {
     name: 'Grey 300',
     code: 'grey-300',
+    hex: '#ededf2',
+  },
+  {
+    name: 'Grey 400',
+    code: 'grey-400',
     hex: '#d2d2d8',
   },
   {