@payloadcms/ui 3.0.0-canary.ff8c8fd → 3.0.0

package/dist/elements/Button/index.scss

@@ -1,277 +1,283 @@
 @import '../../scss/styles.scss';
 
-a.btn {
-  display: inline-block;
-}
-
-.btn--withPopup {
-  margin-block: 24px;
-  .btn {
-    margin: 0;
+@layer payload-default {
+  a.btn {
+    display: inline-block;
   }
-}
-
-.btn {
-  // colors
-  &--style-primary {
-    --color: var(--theme-elevation-0);
-    --bg-color: var(--theme-elevation-800);
-    --box-shadow: none;
-    --hover-bg: var(--theme-elevation-600);
-    --hover-color: var(--color);
 
-    &.btn--disabled {
-      --bg-color: var(--theme-elevation-200);
-      --color: var(--theme-elevation-800);
-      --hover-bg: var(--bg-color);
-      --hover-color: var(--color);
+  .btn--withPopup {
+    margin-block: 24px;
+    .btn {
+      margin: 0;
     }
   }
 
-  &--style-secondary {
-    --color: var(--theme-text);
-    --bg-color: transparent;
-    --box-shadow: inset 0 0 0 1px var(--theme-elevation-800);
-    --hover-color: var(--theme-elevation-600);
-    --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-400);
+  .btn {
+    * {
+      pointer-events: none;
+    }
 
-    &.btn--disabled {
-      --color: var(--theme-elevation-200);
-      --box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
-      --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
+    // colors
+    &--style-primary {
+      --color: var(--theme-elevation-0);
+      --bg-color: var(--theme-elevation-800);
+      --box-shadow: none;
+      --hover-bg: var(--theme-elevation-600);
       --hover-color: var(--color);
+
+      &.btn--disabled {
+        --bg-color: var(--theme-elevation-200);
+        --color: var(--theme-elevation-800);
+        --hover-bg: var(--bg-color);
+        --hover-color: var(--color);
+      }
     }
-  }
 
-  &--style-pill {
-    --bg-color: var(--theme-elevation-150);
-    --color: var(--theme-elevation-800);
-    --hover-color: var(--color);
-    --hover-bg: var(--theme-elevation-100);
+    &--style-secondary {
+      --color: var(--theme-text);
+      --bg-color: transparent;
+      --box-shadow: inset 0 0 0 1px var(--theme-elevation-800);
+      --hover-color: var(--theme-elevation-600);
+      --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-400);
+
+      &.btn--disabled {
+        --color: var(--theme-elevation-200);
+        --box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
+        --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
+        --hover-color: var(--color);
+      }
+    }
 
-    &.btn--disabled {
-      --color: var(--theme-elevation-600);
-      --hover-bg: var(--bg-color);
+    &--style-pill {
+      --bg-color: var(--theme-elevation-150);
+      --color: var(--theme-elevation-800);
       --hover-color: var(--color);
+      --hover-bg: var(--theme-elevation-100);
+
+      &.btn--disabled {
+        --color: var(--theme-elevation-600);
+        --hover-bg: var(--bg-color);
+        --hover-color: var(--color);
+      }
     }
   }
-}
 
-.btn--withPopup {
-  .popup-button {
-    color: var(--color, inherit);
-    background-color: var(--bg-color);
-    box-shadow: var(--box-shadow);
-    border-radius: $style-radius-m;
-    border-left: 1px solid var(--theme-bg);
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    align-items: center;
+  .btn--withPopup {
+    .popup-button {
+      color: var(--color, inherit);
+      background-color: var(--bg-color);
+      box-shadow: var(--box-shadow);
+      border-radius: $style-radius-m;
+      border-left: 1px solid var(--theme-bg);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      align-items: center;
+
+      &:hover,
+      &:focus-visible,
+      &:focus,
+      &:active {
+        background-color: var(--hover-bg);
+        color: var(--hover-color);
+        box-shadow: var(--hover-box-shadow);
+      }
+    }
+  }
 
+  .btn,
+  .btn--withPopup .btn {
     &:hover,
     &:focus-visible,
     &:focus,
     &:active {
-      background-color: var(--hover-bg);
       color: var(--hover-color);
       box-shadow: var(--hover-box-shadow);
+      background-color: var(--hover-bg);
     }
   }
-}
 
-.btn,
-.btn--withPopup .btn {
-  &:hover,
-  &:focus-visible,
-  &:focus,
-  &:active {
-    color: var(--hover-color);
-    box-shadow: var(--hover-box-shadow);
-    background-color: var(--hover-bg);
-  }
-}
-
-.btn--disabled,
-.btn--disabled .btn {
-  cursor: not-allowed;
-}
-
-.btn {
-  border-radius: $style-radius-s;
-  font-size: var(--base-body-size);
-  margin-block: base(1.2);
-  line-height: base(1.2);
-  border: 0;
-  cursor: pointer;
-  font-weight: normal;
-  text-decoration: none;
-  transition-property: border, color, box-shadow, background;
-  transition-duration: 100ms;
-  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
-
-  color: var(--color, inherit);
-  background-color: var(--bg-color, transparent);
-  box-shadow: var(--box-shadow, none);
-
-  .icon {
-    @include color-svg(var(--color, currentColor));
-    width: 100%;
-    height: 100%;
+  .btn--disabled,
+  .btn--disabled .btn {
+    cursor: not-allowed;
   }
 
-  &__content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+  .btn {
+    border-radius: $style-radius-s;
+    font-size: var(--base-body-size);
+    margin-block: base(1.2);
+    line-height: base(1.2);
+    border: 0;
+    cursor: pointer;
+    font-weight: normal;
+    text-decoration: none;
+    transition-property: border, color, box-shadow, background;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
 
-  &__icon {
-    width: base(1.2);
-    height: base(1.2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid;
-    border-radius: 100%;
-    padding: base(0.1);
-    color: inherit;
+    color: var(--color, inherit);
+    background-color: var(--bg-color, transparent);
+    box-shadow: var(--box-shadow, none);
 
     .icon {
+      @include color-svg(var(--color, currentColor));
       width: 100%;
       height: 100%;
     }
 
-    &.btn--size-small {
-      padding: base(0.2);
+    &__content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
-  }
-
-  &--withPopup {
-    display: flex;
-  }
 
-  &--has-tooltip {
-    position: relative;
-  }
+    &__icon {
+      width: base(1.2);
+      height: base(1.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid;
+      border-radius: 100%;
+      padding: base(0.1);
+      color: inherit;
+
+      .icon {
+        width: 100%;
+        height: 100%;
+      }
 
-  &--icon-style-without-border {
-    .btn__icon {
-      border: none;
+      &.btn--size-small {
+        padding: base(0.2);
+      }
     }
-  }
 
-  &--icon-style-none {
-    .btn__icon {
-      border: none;
+    &--withPopup {
+      display: flex;
     }
-  }
 
-  &--size-small {
-    padding: 0 base(0.4);
-
-    &.btn--icon-position-left {
-      padding-inline-start: base(0.1);
-      padding-inline-end: base(0.4);
+    &--has-tooltip {
+      position: relative;
+    }
 
-      .btn__content {
-        flex-direction: row-reverse;
+    &--icon-style-without-border {
+      .btn__icon {
+        border: none;
       }
     }
 
-    &.btn--icon-position-right {
-      padding-inline-start: base(0.4);
-      padding-inline-end: base(0.1);
+    &--icon-style-none {
+      .btn__icon {
+        border: none;
+      }
     }
-  }
 
-  &--size-medium {
-    padding: base(0.2) base(0.6);
+    &--size-small {
+      padding: 0 base(0.4);
 
-    &.btn--icon-position-left {
-      padding-inline-start: base(0.4);
-      padding-inline-end: base(0.6);
+      &.btn--icon-position-left {
+        padding-inline-start: base(0.1);
+        padding-inline-end: base(0.4);
 
-      .btn__content {
-        gap: base(0.2);
-        flex-direction: row-reverse;
+        .btn__content {
+          flex-direction: row-reverse;
+        }
+      }
+
+      &.btn--icon-position-right {
+        padding-inline-start: base(0.4);
+        padding-inline-end: base(0.1);
       }
     }
 
-    &.btn--icon-position-right {
-      padding-inline-start: base(0.6);
-      padding-inline-end: base(0.4);
+    &--size-medium {
+      padding: base(0.2) base(0.6);
 
-      .btn__content {
-        gap: base(0.2);
+      &.btn--icon-position-left {
+        padding-inline-start: base(0.4);
+        padding-inline-end: base(0.6);
+
+        .btn__content {
+          gap: base(0.2);
+          flex-direction: row-reverse;
+        }
+      }
+
+      &.btn--icon-position-right {
+        padding-inline-start: base(0.6);
+        padding-inline-end: base(0.4);
+
+        .btn__content {
+          gap: base(0.2);
+        }
       }
     }
-  }
 
-  &--size-large {
-    padding: base(0.4) base(0.8);
+    &--size-large {
+      padding: base(0.4) base(0.8);
 
-    &.btn--icon-position-left {
-      padding-inline-start: base(0.6);
-      padding-inline-end: base(0.8);
+      &.btn--icon-position-left {
+        padding-inline-start: base(0.6);
+        padding-inline-end: base(0.8);
 
-      .btn__content {
-        gap: base(0.4);
-        flex-direction: row-reverse;
+        .btn__content {
+          gap: base(0.4);
+          flex-direction: row-reverse;
+        }
       }
+
+      &.btn--icon-position-right {
+        padding-inline-start: base(0.8);
+        padding-inline-end: base(0.6);
+
+        .btn__content {
+          gap: base(0.4);
+        }
+      }
+    }
+
+    &--withPopup .btn {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
     }
 
-    &.btn--icon-position-right {
-      padding-inline-start: base(0.8);
-      padding-inline-end: base(0.6);
+    &--style-icon-label,
+    &--style-icon-label.btn--icon-position-left,
+    &--style-icon-label.btn--icon-position-right {
+      padding: 0;
+      font-weight: 600;
 
       .btn__content {
         gap: base(0.4);
       }
     }
-  }
-
-  &--withPopup .btn {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  &--style-icon-label,
-  &--style-icon-label.btn--icon-position-left,
-  &--style-icon-label.btn--icon-position-right {
-    padding: 0;
-    font-weight: 600;
 
-    .btn__content {
-      gap: base(0.4);
+    &--style-none {
+      padding: 0;
     }
-  }
 
-  &--style-none {
-    padding: 0;
-  }
+    &:focus:not(:focus-visible) {
+      .btn__icon {
+        @include color-svg(var(--theme-elevation-800));
+        background: var(--theme-elevation-150);
+      }
 
-  &:focus:not(:focus-visible) {
-    .btn__icon {
-      @include color-svg(var(--theme-elevation-800));
-      background: var(--theme-elevation-150);
+      outline: none;
     }
 
-    outline: none;
-  }
-
-  &:active {
-    .btn__icon {
-      @include color-svg(var(--theme-elevation-0));
-      background: var(--theme-elevation-700);
+    &:active {
+      .btn__icon {
+        @include color-svg(var(--theme-elevation-0));
+        background: var(--theme-elevation-700);
+      }
     }
-  }
 
-  &:focus-visible {
-    outline: var(--accessibility-outline);
-    outline-offset: var(--accessibility-outline-offset);
-  }
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
 
-  &.btn--disabled {
-    cursor: not-allowed;
+    &.btn--disabled {
+      cursor: not-allowed;
+    }
   }
 }

package/dist/elements/Button/types.d.ts

@@ -1,8 +1,10 @@
 import type { ElementType, MouseEvent } from 'react';
 import type React from 'react';
+type secondaryAction = {
+    label: string;
+    onClick: (event: MouseEvent) => void;
+};
 export type Props = {
-    Link?: React.ElementType;
-    SubMenuPopupContent?: React.ReactNode;
     'aria-label'?: string;
     buttonId?: string;
     buttonStyle?: 'error' | 'icon-label' | 'none' | 'pill' | 'primary' | 'secondary' | 'transparent';
@@ -14,13 +16,20 @@ export type Props = {
     iconPosition?: 'left' | 'right';
     iconStyle?: 'none' | 'with-border' | 'without-border';
     id?: string;
+    Link?: React.ElementType;
     newTab?: boolean;
     onClick?: (event: MouseEvent) => void;
+    onMouseDown?: (event: MouseEvent) => void;
     round?: boolean;
+    secondaryActions?: secondaryAction | secondaryAction[];
     size?: 'large' | 'medium' | 'small';
+    SubMenuPopupContent?: (props: {
+        close: () => void;
+    }) => React.ReactNode;
     to?: string;
     tooltip?: string;
     type?: 'button' | 'submit';
     url?: string;
 };
+export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/elements/Button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACxB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,CAAA;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;IACpC,IAAI,CAAC,EAAE,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,gBAAgB,CAAA;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC,CAAA;AACD,MAAM,MAAM,KAAK,GAAG;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,CAAA;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;IACpC,IAAI,CAAC,EAAE,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,gBAAgB,CAAA;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACxB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACzC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gBAAgB,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAA;IACtD,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACvE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}

package/dist/elements/Button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Button/types.ts"],"sourcesContent":["import type { ElementType, MouseEvent } from 'react'\nimport type React from 'react'\n\nexport type Props = {\n  Link?: React.ElementType\n  SubMenuPopupContent?: React.ReactNode\n  'aria-label'?: string\n  buttonId?: string\n  buttonStyle?: 'error' | 'icon-label' | 'none' | 'pill' | 'primary' | 'secondary' | 'transparent'\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  el?: 'anchor' | 'link' | ElementType\n  icon?: ['chevron' | 'edit' | 'plus' | 'x'] | React.ReactNode\n  iconPosition?: 'left' | 'right'\n  iconStyle?: 'none' | 'with-border' | 'without-border'\n  id?: string\n  newTab?: boolean\n  onClick?: (event: MouseEvent) => void\n  round?: boolean\n  size?: 'large' | 'medium' | 'small'\n  to?: string\n  tooltip?: string\n  type?: 'button' | 'submit'\n  url?: string\n}\n"],"mappings":"AAGA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Button/types.ts"],"sourcesContent":["import type { ElementType, MouseEvent } from 'react'\nimport type React from 'react'\n\ntype secondaryAction = {\n  label: string\n  onClick: (event: MouseEvent) => void\n}\nexport type Props = {\n  'aria-label'?: string\n  buttonId?: string\n  buttonStyle?: 'error' | 'icon-label' | 'none' | 'pill' | 'primary' | 'secondary' | 'transparent'\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  el?: 'anchor' | 'link' | ElementType\n  icon?: ['chevron' | 'edit' | 'plus' | 'x'] | React.ReactNode\n  iconPosition?: 'left' | 'right'\n  iconStyle?: 'none' | 'with-border' | 'without-border'\n  id?: string\n  Link?: React.ElementType\n  newTab?: boolean\n  onClick?: (event: MouseEvent) => void\n  onMouseDown?: (event: MouseEvent) => void\n  round?: boolean\n  secondaryActions?: secondaryAction | secondaryAction[]\n  size?: 'large' | 'medium' | 'small'\n  SubMenuPopupContent?: (props: { close: () => void }) => React.ReactNode\n  to?: string\n  tooltip?: string\n  type?: 'button' | 'submit'\n  url?: string\n}\n"],"mappings":"AAOA","ignoreList":[]}

package/dist/elements/Card/index.d.ts

@@ -2,11 +2,11 @@ import type { ElementType } from 'react';
 import React from 'react';
 import './index.scss';
 export type Props = {
-    Link?: ElementType;
     actions?: React.ReactNode;
     buttonAriaLabel?: string;
     href?: string;
     id?: string;
+    Link?: ElementType;
     onClick?: () => void;
     title: string;
     titleAs?: ElementType;

package/dist/elements/Card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Card/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB,CAAA;AAID,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0BhC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Card/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB,CAAA;AAID,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0BhC,CAAA"}

package/dist/elements/Card/index.js

@@ -8,10 +8,10 @@ const baseClass = 'card';
 export const Card = props => {
   const {
     id,
-    Link,
     actions,
     buttonAriaLabel,
     href,
+    Link,
     onClick,
     title,
     titleAs
@@ -28,11 +28,11 @@ export const Card = props => {
       className: `${baseClass}__actions`,
       children: actions
     }), (onClick || href) && /*#__PURE__*/_jsx(Button, {
-      Link: Link,
       "aria-label": buttonAriaLabel,
       buttonStyle: "none",
       className: `${baseClass}__click`,
       el: "link",
+      Link: Link,
       onClick: onClick,
       to: href
     })]

package/dist/elements/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Button","baseClass","Card","props","id","Link","actions","buttonAriaLabel","href","onClick","title","titleAs","classes","filter","Boolean","join","Tag","_jsxs","className","_jsx","buttonStyle","el","to"],"sources":["../../../src/elements/Card/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType } from 'react'\n\nimport React from 'react'\n\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nexport type Props = {\n  Link?: ElementType\n  actions?: React.ReactNode\n  buttonAriaLabel?: string\n  href?: string\n  id?: string\n  onClick?: () => void\n  title: string\n  titleAs?: ElementType\n}\n\nconst baseClass = 'card'\n\nexport const Card: React.FC<Props> = (props) => {\n  const { id, Link, actions, buttonAriaLabel, href, onClick, title, titleAs } = props\n\n  const classes = [baseClass, id, (onClick || href) && `${baseClass}--has-onclick`]\n    .filter(Boolean)\n    .join(' ')\n\n  const Tag = titleAs ?? 'div'\n\n  return (\n    <div className={classes} id={id}>\n      <Tag className={`${baseClass}__title`}>{title}</Tag>\n      {actions && <div className={`${baseClass}__actions`}>{actions}</div>}\n      {(onClick || href) && (\n        <Button\n          Link={Link}\n          aria-label={buttonAriaLabel}\n          buttonStyle=\"none\"\n          className={`${baseClass}__click`}\n          el=\"link\"\n          onClick={onClick}\n          to={href}\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,OAAO;AAaP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,IAAA,GAAyBC,KAAA;EACpC,MAAM;IAAEC,EAAE;IAAEC,IAAI;IAAEC,OAAO;IAAEC,eAAe;IAAEC,IAAI;IAAEC,OAAO;IAAEC,KAAK;IAAEC;EAAO,CAAE,GAAGR,KAAA;EAE9E,MAAMS,OAAA,GAAU,CAACX,SAAA,EAAWG,EAAA,EAAK,CAAAK,OAAA,IAAWD,IAAG,KAAM,GAAGP,SAAA,eAAwB,CAAC,CAC9EY,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,GAAA,GAAML,OAAA,IAAW;EAEvB,oBACEM,KAAA,CAAC;IAAIC,SAAA,EAAWN,OAAA;IAASR,EAAA,EAAIA,EAAA;4BAC3Be,IAAA,CAACH,GAAA;MAAIE,SAAA,EAAW,GAAGjB,SAAA,SAAkB;gBAAGS;QACvCJ,OAAA,iBAAWa,IAAA,CAAC;MAAID,SAAA,EAAW,GAAGjB,SAAA,WAAoB;gBAAGK;QACpD,CAAAG,OAAA,IAAWD,IAAG,kBACdW,IAAA,CAACnB,MAAA;MACCK,IAAA,EAAMA,IAAA;MACN,cAAYE,eAAA;MACZa,WAAA,EAAY;MACZF,SAAA,EAAW,GAAGjB,SAAA,SAAkB;MAChCoB,EAAA,EAAG;MACHZ,OAAA,EAASA,OAAA;MACTa,EAAA,EAAId;;;AAKd","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","Button","baseClass","Card","props","id","actions","buttonAriaLabel","href","Link","onClick","title","titleAs","classes","filter","Boolean","join","Tag","_jsxs","className","_jsx","buttonStyle","el","to"],"sources":["../../../src/elements/Card/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType } from 'react'\n\nimport React from 'react'\n\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nexport type Props = {\n  actions?: React.ReactNode\n  buttonAriaLabel?: string\n  href?: string\n  id?: string\n  Link?: ElementType\n  onClick?: () => void\n  title: string\n  titleAs?: ElementType\n}\n\nconst baseClass = 'card'\n\nexport const Card: React.FC<Props> = (props) => {\n  const { id, actions, buttonAriaLabel, href, Link, onClick, title, titleAs } = props\n\n  const classes = [baseClass, id, (onClick || href) && `${baseClass}--has-onclick`]\n    .filter(Boolean)\n    .join(' ')\n\n  const Tag = titleAs ?? 'div'\n\n  return (\n    <div className={classes} id={id}>\n      <Tag className={`${baseClass}__title`}>{title}</Tag>\n      {actions && <div className={`${baseClass}__actions`}>{actions}</div>}\n      {(onClick || href) && (\n        <Button\n          aria-label={buttonAriaLabel}\n          buttonStyle=\"none\"\n          className={`${baseClass}__click`}\n          el=\"link\"\n          Link={Link}\n          onClick={onClick}\n          to={href}\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,OAAO;AAaP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,IAAA,GAAyBC,KAAA;EACpC,MAAM;IAAEC,EAAE;IAAEC,OAAO;IAAEC,eAAe;IAAEC,IAAI;IAAEC,IAAI;IAAEC,OAAO;IAAEC,KAAK;IAAEC;EAAO,CAAE,GAAGR,KAAA;EAE9E,MAAMS,OAAA,GAAU,CAACX,SAAA,EAAWG,EAAA,EAAK,CAAAK,OAAA,IAAWF,IAAG,KAAM,GAAGN,SAAA,eAAwB,CAAC,CAC9EY,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,GAAA,GAAML,OAAA,IAAW;EAEvB,oBACEM,KAAA,CAAC;IAAIC,SAAA,EAAWN,OAAA;IAASR,EAAA,EAAIA,EAAA;4BAC3Be,IAAA,CAACH,GAAA;MAAIE,SAAA,EAAW,GAAGjB,SAAA,SAAkB;gBAAGS;QACvCL,OAAA,iBAAWc,IAAA,CAAC;MAAID,SAAA,EAAW,GAAGjB,SAAA,WAAoB;gBAAGI;QACpD,CAAAI,OAAA,IAAWF,IAAG,kBACdY,IAAA,CAACnB,MAAA;MACC,cAAYM,eAAA;MACZc,WAAA,EAAY;MACZF,SAAA,EAAW,GAAGjB,SAAA,SAAkB;MAChCoB,EAAA,EAAG;MACHb,IAAA,EAAMA,IAAA;MACNC,OAAA,EAASA,OAAA;MACTa,EAAA,EAAIf;;;AAKd","ignoreList":[]}