@payloadcms/ui 3.0.0-beta.73 → 3.0.0-beta.75

package/dist/elements/ArrayAction/index.scss

@@ -30,17 +30,4 @@
       }
     }
   }
-
-  &__move-up {
-    margin-bottom: 2px;
-  }
-
-  &__move-down {
-    margin-top: 6px;
-    margin-bottom: 2px;
-  }
-
-  &__action-chevron {
-    padding: 0 calc(var(--base) / 4);
-  }
 }

package/dist/elements/Banner/index.scss

@@ -7,7 +7,7 @@
   vertical-align: middle;
   background: var(--theme-elevation-100);
   color: var(--theme-elevation-800);
-  border-radius: $style-radius-s;
+  border-radius: $style-radius-m;
   padding: base(0.5);
   margin-bottom: $baseline;
 

package/dist/elements/Button/index.js

@@ -59,7 +59,7 @@ export const Button = /*#__PURE__*/ forwardRef((props, ref)=>{
         disabled && `${baseClass}--disabled`,
         round && `${baseClass}--round`,
         size && `${baseClass}--size-${size}`,
-        iconPosition && `${baseClass}--icon-position-${iconPosition}`,
+        icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,
         tooltip && `${baseClass}--has-tooltip`
     ].filter(Boolean).join(' ');
     function handleClick(event) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Button/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment, forwardRef, isValidElement } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { EditIcon } from '../../icons/Edit/index.js'\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { SwapIcon } from '../../icons/Swap/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst icons = {\n  chevron: ChevronIcon,\n  edit: EditIcon,\n  link: LinkIcon,\n  plus: PlusIcon,\n  swap: SwapIcon,\n  x: XIcon,\n}\n\nconst baseClass = 'btn'\n\nexport const ButtonContents = ({ children, icon, showTooltip, tooltip }) => {\n  const BuiltInIcon = icons[icon]\n\n  return (\n    <Fragment>\n      {tooltip && (\n        <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      <span className={`${baseClass}__content`}>\n        {children && <span className={`${baseClass}__label`}>{children}</span>}\n        {icon && (\n          <span className={`${baseClass}__icon`}>\n            {isValidElement(icon) && icon}\n            {BuiltInIcon && <BuiltInIcon />}\n          </span>\n        )}\n      </span>\n    </Fragment>\n  )\n}\n\nexport const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((props, ref) => {\n  const {\n    id,\n    type = 'button',\n    Link,\n    'aria-label': ariaLabel,\n    buttonStyle = 'primary',\n    children,\n    className,\n    disabled,\n    el = 'button',\n    icon,\n    iconPosition = 'right',\n    iconStyle = 'without-border',\n    newTab,\n    onClick,\n    round,\n    size = 'medium',\n    to,\n    tooltip,\n    url,\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n\n  const classes = [\n    baseClass,\n    className && className,\n    buttonStyle && `${baseClass}--style-${buttonStyle}`,\n    icon && `${baseClass}--icon`,\n    iconStyle && `${baseClass}--icon-style-${iconStyle}`,\n    icon && !children && `${baseClass}--icon-only`,\n    disabled && `${baseClass}--disabled`,\n    round && `${baseClass}--round`,\n    size && `${baseClass}--size-${size}`,\n    iconPosition && `${baseClass}--icon-position-${iconPosition}`,\n    tooltip && `${baseClass}--has-tooltip`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  function handleClick(event) {\n    setShowTooltip(false)\n    if (type !== 'submit' && onClick) event.preventDefault()\n    if (onClick) onClick(event)\n  }\n\n  const buttonProps = {\n    id,\n    type,\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n    className: classes,\n    disabled,\n    onClick: !disabled ? handleClick : undefined,\n    onMouseEnter: tooltip ? () => setShowTooltip(true) : undefined,\n    onMouseLeave: tooltip ? () => setShowTooltip(false) : undefined,\n    rel: newTab ? 'noopener noreferrer' : undefined,\n    target: newTab ? '_blank' : undefined,\n  }\n\n  switch (el) {\n    case 'link':\n      if (!Link) {\n        console.error('Link is required when using el=\"link\"', children)\n        return null\n      }\n\n      return (\n        <Link {...buttonProps} href={to || url} to={to || url}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Link>\n      )\n\n    case 'anchor':\n      return (\n        <a {...buttonProps} href={url} ref={ref as React.Ref<HTMLAnchorElement>}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </a>\n      )\n\n    default:\n      const Tag = el // eslint-disable-line no-case-declarations\n\n      return (\n        <Tag ref={ref} type=\"submit\" {...buttonProps}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Tag>\n      )\n  }\n})\n"],"names":["React","Fragment","forwardRef","isValidElement","ChevronIcon","EditIcon","LinkIcon","PlusIcon","SwapIcon","XIcon","Tooltip","icons","chevron","edit","link","plus","swap","x","baseClass","ButtonContents","children","icon","showTooltip","tooltip","BuiltInIcon","className","show","span","Button","props","ref","id","type","Link","ariaLabel","buttonStyle","disabled","el","iconPosition","iconStyle","newTab","onClick","round","size","to","url","setShowTooltip","useState","classes","filter","Boolean","join","handleClick","event","preventDefault","buttonProps","undefined","onMouseEnter","onMouseLeave","rel","target","console","error","href","a","Tag"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/Button/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment, forwardRef, isValidElement } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { EditIcon } from '../../icons/Edit/index.js'\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { SwapIcon } from '../../icons/Swap/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst icons = {\n  chevron: ChevronIcon,\n  edit: EditIcon,\n  link: LinkIcon,\n  plus: PlusIcon,\n  swap: SwapIcon,\n  x: XIcon,\n}\n\nconst baseClass = 'btn'\n\nexport const ButtonContents = ({ children, icon, showTooltip, tooltip }) => {\n  const BuiltInIcon = icons[icon]\n\n  return (\n    <Fragment>\n      {tooltip && (\n        <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      <span className={`${baseClass}__content`}>\n        {children && <span className={`${baseClass}__label`}>{children}</span>}\n        {icon && (\n          <span className={`${baseClass}__icon`}>\n            {isValidElement(icon) && icon}\n            {BuiltInIcon && <BuiltInIcon />}\n          </span>\n        )}\n      </span>\n    </Fragment>\n  )\n}\n\nexport const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((props, ref) => {\n  const {\n    id,\n    type = 'button',\n    Link,\n    'aria-label': ariaLabel,\n    buttonStyle = 'primary',\n    children,\n    className,\n    disabled,\n    el = 'button',\n    icon,\n    iconPosition = 'right',\n    iconStyle = 'without-border',\n    newTab,\n    onClick,\n    round,\n    size = 'medium',\n    to,\n    tooltip,\n    url,\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n\n  const classes = [\n    baseClass,\n    className && className,\n    buttonStyle && `${baseClass}--style-${buttonStyle}`,\n    icon && `${baseClass}--icon`,\n    iconStyle && `${baseClass}--icon-style-${iconStyle}`,\n    icon && !children && `${baseClass}--icon-only`,\n    disabled && `${baseClass}--disabled`,\n    round && `${baseClass}--round`,\n    size && `${baseClass}--size-${size}`,\n    icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,\n    tooltip && `${baseClass}--has-tooltip`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  function handleClick(event) {\n    setShowTooltip(false)\n    if (type !== 'submit' && onClick) event.preventDefault()\n    if (onClick) onClick(event)\n  }\n\n  const buttonProps = {\n    id,\n    type,\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n    className: classes,\n    disabled,\n    onClick: !disabled ? handleClick : undefined,\n    onMouseEnter: tooltip ? () => setShowTooltip(true) : undefined,\n    onMouseLeave: tooltip ? () => setShowTooltip(false) : undefined,\n    rel: newTab ? 'noopener noreferrer' : undefined,\n    target: newTab ? '_blank' : undefined,\n  }\n\n  switch (el) {\n    case 'link':\n      if (!Link) {\n        console.error('Link is required when using el=\"link\"', children)\n        return null\n      }\n\n      return (\n        <Link {...buttonProps} href={to || url} to={to || url}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Link>\n      )\n\n    case 'anchor':\n      return (\n        <a {...buttonProps} href={url} ref={ref as React.Ref<HTMLAnchorElement>}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </a>\n      )\n\n    default:\n      const Tag = el // eslint-disable-line no-case-declarations\n\n      return (\n        <Tag ref={ref} type=\"submit\" {...buttonProps}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Tag>\n      )\n  }\n})\n"],"names":["React","Fragment","forwardRef","isValidElement","ChevronIcon","EditIcon","LinkIcon","PlusIcon","SwapIcon","XIcon","Tooltip","icons","chevron","edit","link","plus","swap","x","baseClass","ButtonContents","children","icon","showTooltip","tooltip","BuiltInIcon","className","show","span","Button","props","ref","id","type","Link","ariaLabel","buttonStyle","disabled","el","iconPosition","iconStyle","newTab","onClick","round","size","to","url","setShowTooltip","useState","classes","filter","Boolean","join","handleClick","event","preventDefault","buttonProps","undefined","onMouseEnter","onMouseLeave","rel","target","console","error","href","a","Tag"],"mappings":"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"}

package/dist/elements/Button/index.scss

@@ -6,22 +6,45 @@ a.btn {
 
 .btn {
   background: transparent;
-  line-height: base(1);
-  border-radius: $style-radius-m;
-  font-size: 1rem;
-  margin-top: base(1);
-  margin-bottom: base(1);
+  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;
-  text-align: center;
   color: inherit;
-
-  .btn__icon {
+  transition-property: border, color, box-shadow, background;
+  transition-duration: 100ms;
+  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__icon {
+    width: base(1.2);
+    height: base(1.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     border: 1px solid;
     border-radius: 100%;
     @include color-svg(currentColor);
+    padding: base(0.1);
+    color: inherit;
+
+    .icon {
+      width: 100%;
+      height: 100%;
+    }
+
+    &.btn--size-small {
+      padding: base(0.2);
+    }
   }
 
   &--has-tooltip {
@@ -40,158 +63,125 @@ a.btn {
     }
   }
 
-  span {
-    line-height: base(1);
-  }
-
-  span,
-  svg {
-    vertical-align: top;
-  }
-
-  &--size-medium {
-    padding: base(0.5) $baseline;
-  }
-
   &--size-small {
-    padding: base(0.25) base(0.5);
-  }
-
-  &--style-primary {
-    background-color: var(--theme-elevation-800);
-    color: var(--theme-elevation-0);
+    padding: 0 base(0.4);
 
-    &.btn--disabled {
-      background-color: var(--theme-elevation-400);
-    }
-
-    &:not(.btn--disabled) {
-      &:hover,
-      &:focus-visible {
-        background: var(--theme-elevation-750);
-      }
+    &.btn--icon-position-left {
+      padding-inline-start: base(0.1);
+      padding-inline-end: base(0.4);
 
-      &:active {
-        background: var(--theme-elevation-700);
+      .btn__content {
+        flex-direction: row-reverse;
       }
     }
 
-    &:focus:not(:focus-visible) {
-      box-shadow: $focus-box-shadow;
-      outline: none;
+    &.btn--icon-position-right {
+      padding-inline-start: base(0.4);
+      padding-inline-end: base(0.1);
     }
   }
 
-  &--style-secondary {
-    $base-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800);
-    $hover-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-700);
-
-    box-shadow: $base-box-shadow;
-    color: var(--theme-elevation-800);
-    background: none;
-    backdrop-filter: blur(5px);
+  &--size-medium {
+    padding: base(0.2) base(0.6);
 
-    &:hover,
-    &:focus-visible {
-      background: var(--theme-elevation-100);
-      box-shadow: $hover-box-shadow;
-    }
+    &.btn--icon-position-left {
+      padding-inline-start: base(0.4);
+      padding-inline-end: base(0.6);
 
-    &:active {
-      background: var(--theme-elevation-200);
+      .btn__content {
+        gap: base(0.2);
+        flex-direction: row-reverse;
+      }
     }
 
-    &.btn--disabled {
-      color: var(--theme-elevation-400);
-      background: none;
-      box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-400);
-    }
+    &.btn--icon-position-right {
+      padding-inline-start: base(0.6);
+      padding-inline-end: base(0.4);
 
-    &:focus:not(:focus-visible) {
-      outline: none;
-      box-shadow: $hover-box-shadow, $focus-box-shadow;
+      .btn__content {
+        gap: base(0.2);
+      }
     }
   }
 
-  &--style-none {
-    padding: 0;
-    margin: 0;
-    border-radius: 0;
+  &--size-large {
+    padding: base(0.4) base(0.8);
 
-    &:focus {
-      opacity: 0.8;
-    }
+    &.btn--icon-position-left {
+      padding-inline-start: base(0.6);
+      padding-inline-end: base(0.8);
 
-    &:active {
-      opacity: 0.7;
+      .btn__content {
+        gap: base(0.4);
+        flex-direction: row-reverse;
+      }
     }
-  }
 
-  &--round {
-    border-radius: 100%;
-  }
+    &.btn--icon-position-right {
+      padding-inline-start: base(0.8);
+      padding-inline-end: base(0.6);
 
-  [dir='rtl'] &--icon {
-    span {
-      margin-left: 5px;
+      .btn__content {
+        gap: base(0.4);
+      }
     }
   }
 
-  &--icon {
-    span {
-      display: flex;
-      justify-content: space-between;
+  &--style-primary {
+    background: var(--theme-elevation-800);
+    color: var(--theme-elevation-0);
+
+    &.btn--disabled {
+      background: var(--theme-elevation-200);
     }
 
-    &.btn--style-primary {
-      .icon {
-        @include color-svg(var(--theme-elevation-0));
+    &:not(.btn--disabled) {
+      &:hover,
+      &:focus-visible,
+      &:focus,
+      &:active {
+        background: var(--theme-elevation-600);
       }
     }
-  }
 
-  &--style-icon-label {
-    padding: 0;
-    font-weight: 600;
+    .icon {
+      @include color-svg(var(--theme-elevation-0));
+    }
   }
 
-  &--style-light-gray {
-    box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800);
-  }
+  &--style-secondary {
+    box-shadow: inset 0 0 0 1px var(--theme-elevation-800);
+    color: var(--theme-text);
 
-  &--icon-position-left {
-    .btn__content {
-      flex-direction: row-reverse;
+    &.btn--disabled {
+      color: var(--theme-elevation-200);
+      box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
     }
 
-    .btn__icon {
-      margin-right: base(0.5);
+    &:not(.btn--disabled) {
+      &:hover,
+      &:focus-visible,
+      &:focus,
+      &:active {
+        color: var(--theme-elevation-600);
+        box-shadow: inset 0 0 0 1px var(--theme-elevation-400);
+      }
     }
   }
 
-  &--icon-position-right {
-    .btn__icon {
-      margin-left: base(0.5);
-    }
-  }
+  &--style-icon-label,
+  &--style-icon-label.btn--icon-position-left,
+  &--style-icon-label.btn--icon-position-right {
+    padding: 0;
+    font-weight: 600;
 
-  &--icon-only {
-    .btn__icon {
-      padding: 0;
-      margin: 0;
+    .btn__content {
+      gap: base(0.4);
     }
   }
 
-  &--disabled {
-    cursor: default;
-  }
-
-  &:hover,
-  &:focus-visible {
-    .btn__icon {
-      @include color-svg(var(--theme-elevation-0));
-      background: var(--theme-elevation-800);
-    }
+  &--style-none {
+    padding: 0;
   }
 
   &:focus:not(:focus-visible) {
@@ -214,4 +204,8 @@ a.btn {
     outline: var(--accessibility-outline);
     outline-offset: var(--accessibility-outline-offset);
   }
+
+  &.btn--disabled {
+    cursor: not-allowed;
+  }
 }

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

@@ -16,7 +16,7 @@ export type Props = {
     newTab?: boolean;
     onClick?: (event: MouseEvent) => void;
     round?: boolean;
-    size?: 'medium' | 'small';
+    size?: 'large' | 'medium' | 'small';
     to?: string;
     tooltip?: string;
     type?: 'button' | 'submit';

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,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,CAAA;IACvF,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,QAAQ,GAAG,OAAO,CAAA;IACzB,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,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,CAAA;IACvF,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"}

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

@@ -1 +1 @@
-{"version":3,"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  'aria-label'?: string\n  buttonId?: string\n  buttonStyle?: 'error' | 'icon-label' | 'none' | '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?: 'medium' | 'small'\n  to?: string\n  tooltip?: string\n  type?: 'button' | 'submit'\n  url?: string\n}\n"],"names":[],"mappings":"AAGA,WAqBC"}
+{"version":3,"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  'aria-label'?: string\n  buttonId?: string\n  buttonStyle?: 'error' | 'icon-label' | 'none' | '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"],"names":[],"mappings":"AAGA,WAqBC"}

package/dist/elements/Card/index.scss

@@ -2,24 +2,50 @@
 
 .card {
   background: var(--theme-elevation-50);
-  padding: base(1.25) $baseline;
+  padding: base(0.8);
+  width: 100%;
+  min-height: base(4);
   position: relative;
+  border-radius: var(--style-radius-m);
+  border: 1px solid var(--theme-border-color);
+  transition-property: border, box-shadow, background;
+  transition-duration: 100ms;
+  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+  display: flex;
+  justify-content: space-between;
+  align-self: start;
+  gap: base(0.8);
 
   &__title {
-    @extend %h5;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @extend %h4;
+    letter-spacing: 0;
+    font-weight: 600;
+    line-height: base(1.2);
+    width: 100%;
+    margin: 0;
   }
 
   &__actions {
     position: relative;
     z-index: 2;
-    margin-top: base(0.5);
     display: inline-flex;
-
     .btn {
       margin: 0;
+      flex-shrink: 0;
+    }
+
+    .btn__icon {
+      border: 1px solid var(--theme-border-color);
+      transition-property: border, box-shadow, color, background;
+      transition-duration: 100ms;
+      transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+
+      &:hover {
+        border: 1px solid var(--theme-elevation-500);
+        background-color: var(--theme-elevation-0);
+        color: currentColor;
+        @include shadow-sm;
+      }
     }
   }
 
@@ -27,16 +53,19 @@
     cursor: pointer;
 
     &:hover {
-      background: var(--theme-elevation-100);
+      background: var(--theme-elevation-50);
+      border: 1px solid var(--theme-elevation-250);
+      box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.05);
     }
   }
 
   &__click {
-    position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
+    position: absolute;
+    margin: 0;
   }
 }

package/dist/elements/CodeEditor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAIvC,OAAO,cAAc,CAAA;AAMrB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiC/B,CAAA;AAGD,eAAe,UAAU,CAAA"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAIvC,OAAO,cAAc,CAAA;AAMrB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkC/B,CAAA;AAGD,eAAe,UAAU,CAAA"}

package/dist/elements/CodeEditor/CodeEditor.js

@@ -13,7 +13,8 @@ const CodeEditor = (props)=>{
     const classes = [
         baseClass,
         className,
-        rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : ''
+        rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '',
+        readOnly && 'read-only'
     ].filter(Boolean).join(' ');
     return /*#__PURE__*/ _jsx(Editor, {
         className: classes,

package/dist/elements/CodeEditor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client'\nimport EditorImport from '@monaco-editor/react'\nimport React from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTheme } from '../../providers/Theme/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport './index.scss'\n\nconst Editor = (EditorImport.default || EditorImport) as unknown as typeof EditorImport.default\n\nconst baseClass = 'code-editor'\n\nconst CodeEditor: React.FC<Props> = (props) => {\n  const { className, height, options, readOnly, ...rest } = props\n\n  const { theme } = useTheme()\n\n  const classes = [\n    baseClass,\n    className,\n    rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '',\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <Editor\n      className={classes}\n      height={height}\n      loading={<ShimmerEffect height={height} />}\n      options={{\n        detectIndentation: true,\n        minimap: {\n          enabled: false,\n        },\n        readOnly: Boolean(readOnly),\n        scrollBeyondLastLine: false,\n        tabSize: 2,\n        wordWrap: 'on',\n        ...options,\n      }}\n      theme={theme === 'dark' ? 'vs-dark' : 'vs'}\n      {...rest}\n    />\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default CodeEditor\n"],"names":["EditorImport","React","useTheme","ShimmerEffect","Editor","default","baseClass","CodeEditor","props","className","height","options","readOnly","rest","theme","classes","defaultLanguage","filter","Boolean","join","loading","detectIndentation","minimap","enabled","scrollBeyondLastLine","tabSize","wordWrap"],"mappings":"AAAA;;AACA,OAAOA,kBAAkB,uBAAsB;AAC/C,OAAOC,WAAW,QAAO;AAIzB,SAASC,QAAQ,QAAQ,iCAAgC;AACzD,SAASC,aAAa,QAAQ,4BAA2B;AACzD,OAAO,eAAc;AAErB,MAAMC,SAAUJ,aAAaK,OAAO,IAAIL;AAExC,MAAMM,YAAY;AAElB,MAAMC,aAA8B,CAACC;IACnC,MAAM,EAAEC,SAAS,EAAEC,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGL;IAE1D,MAAM,EAAEM,KAAK,EAAE,GAAGZ;IAElB,MAAMa,UAAU;QACdT;QACAG;QACAI,MAAMG,kBAAkB,CAAC,UAAU,EAAEH,KAAKG,eAAe,CAAC,CAAC,GAAG;KAC/D,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBACE,KAACf;QACCK,WAAWM;QACXL,QAAQA;QACRU,uBAAS,KAACjB;YAAcO,QAAQA;;QAChCC,SAAS;YACPU,mBAAmB;YACnBC,SAAS;gBACPC,SAAS;YACX;YACAX,UAAUM,QAAQN;YAClBY,sBAAsB;YACtBC,SAAS;YACTC,UAAU;YACV,GAAGf,OAAO;QACZ;QACAG,OAAOA,UAAU,SAAS,YAAY;QACrC,GAAGD,IAAI;;AAGd;AAEA,iDAAiD;AACjD,eAAeN,WAAU"}
+{"version":3,"sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client'\nimport EditorImport from '@monaco-editor/react'\nimport React from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTheme } from '../../providers/Theme/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport './index.scss'\n\nconst Editor = (EditorImport.default || EditorImport) as unknown as typeof EditorImport.default\n\nconst baseClass = 'code-editor'\n\nconst CodeEditor: React.FC<Props> = (props) => {\n  const { className, height, options, readOnly, ...rest } = props\n\n  const { theme } = useTheme()\n\n  const classes = [\n    baseClass,\n    className,\n    rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '',\n    readOnly && 'read-only',\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <Editor\n      className={classes}\n      height={height}\n      loading={<ShimmerEffect height={height} />}\n      options={{\n        detectIndentation: true,\n        minimap: {\n          enabled: false,\n        },\n        readOnly: Boolean(readOnly),\n        scrollBeyondLastLine: false,\n        tabSize: 2,\n        wordWrap: 'on',\n        ...options,\n      }}\n      theme={theme === 'dark' ? 'vs-dark' : 'vs'}\n      {...rest}\n    />\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default CodeEditor\n"],"names":["EditorImport","React","useTheme","ShimmerEffect","Editor","default","baseClass","CodeEditor","props","className","height","options","readOnly","rest","theme","classes","defaultLanguage","filter","Boolean","join","loading","detectIndentation","minimap","enabled","scrollBeyondLastLine","tabSize","wordWrap"],"mappings":"AAAA;;AACA,OAAOA,kBAAkB,uBAAsB;AAC/C,OAAOC,WAAW,QAAO;AAIzB,SAASC,QAAQ,QAAQ,iCAAgC;AACzD,SAASC,aAAa,QAAQ,4BAA2B;AACzD,OAAO,eAAc;AAErB,MAAMC,SAAUJ,aAAaK,OAAO,IAAIL;AAExC,MAAMM,YAAY;AAElB,MAAMC,aAA8B,CAACC;IACnC,MAAM,EAAEC,SAAS,EAAEC,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGL;IAE1D,MAAM,EAAEM,KAAK,EAAE,GAAGZ;IAElB,MAAMa,UAAU;QACdT;QACAG;QACAI,MAAMG,kBAAkB,CAAC,UAAU,EAAEH,KAAKG,eAAe,CAAC,CAAC,GAAG;QAC9DJ,YAAY;KACb,CACEK,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBACE,KAACf;QACCK,WAAWM;QACXL,QAAQA;QACRU,uBAAS,KAACjB;YAAcO,QAAQA;;QAChCC,SAAS;YACPU,mBAAmB;YACnBC,SAAS;gBACPC,SAAS;YACX;YACAX,UAAUM,QAAQN;YAClBY,sBAAsB;YACtBC,SAAS;YACTC,UAAU;YACV,GAAGf,OAAO;QACZ;QACAG,OAAOA,UAAU,SAAS,YAAY;QACrC,GAAGD,IAAI;;AAGd;AAEA,iDAAiD;AACjD,eAAeN,WAAU"}

package/dist/elements/Collapsible/index.scss

@@ -2,20 +2,44 @@
 
 .collapsible {
   --toggle-pad-h: #{base(0.75)};
-  --toggle-pad-v: #{base(0.5)};
+  --toggle-pad-v: #{base(0.6)};
 
   border-radius: $style-radius-m;
 
   &__toggle-wrap {
     position: relative;
+    padding: base(0.4) base(0.4) base(0.4) base(0.8);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--theme-elevation-50);
+    line-height: base(1.2);
+    gap: base(0.2);
+    border-top-right-radius: $style-radius-m;
+    border-top-left-radius: $style-radius-m;
+
+    & > * {
+      z-index: 2;
+    }
+
+    &:has(.collapsible__drag) {
+      padding-inline-start: base(0.4);
+    }
   }
 
   &__drag {
+    display: flex;
     opacity: 0.5;
-    position: absolute;
-    z-index: 1;
+    z-index: 2;
     top: var(--toggle-pad-v);
-    left: base(0.5);
+    width: base(1.2);
+    height: base(1.2);
+    padding: base(0.1);
+
+    icon {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   &__toggle {
@@ -23,10 +47,15 @@
     @extend %body;
     text-align: left;
     cursor: pointer;
-    border-top-right-radius: $style-radius-s;
-    border-top-left-radius: $style-radius-s;
+    border-top-right-radius: $style-radius-m;
+    border-top-left-radius: $style-radius-m;
     width: 100%;
+    height: 100%;
     color: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
 
     span {
       user-select: none;
@@ -43,9 +72,6 @@
       .row-label {
         color: var(--theme-text);
       }
-      .collapsible__toggle {
-        background: var(--theme-elevation-50);
-      }
     }
     &.collapsible--hovered {
       > .collapsible__toggle-wrap .collapsible__toggle {
@@ -54,57 +80,62 @@
     }
   }
 
-  &__toggle,
   &__header-wrap {
-    padding: var(--toggle-pad-v) var(--toggle-pad-h);
-  }
-
-  &__header-wrap {
-    position: absolute;
     top: 0;
     right: base(3);
     bottom: 0;
     left: 0;
     pointer-events: none;
-
-    > * {
-      pointer-events: all;
-    }
+    width: 100%;
   }
 
   &__header-wrap--has-drag-handle {
-    left: base(0.875);
+    left: base(1);
   }
 
   &--collapsed {
-    .collapsible__toggle {
-      border-bottom-right-radius: $style-radius-s;
-      border-bottom-left-radius: $style-radius-s;
+    .collapsible__toggle-wrap {
+      border-bottom-right-radius: $style-radius-m;
+      border-bottom-left-radius: $style-radius-m;
     }
   }
 
   &__actions-wrap {
-    position: absolute;
-    right: var(--toggle-pad-h);
-    top: var(--toggle-pad-v);
     pointer-events: none;
     display: flex;
+    gap: base(0.2);
+    margin-inline-end: base(0.2);
   }
 
   &__actions {
     pointer-events: all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: base(1.2);
+    height: base(1.2);
+
+    &.icon {
+      padding: base(0.1);
+    }
   }
 
   &__indicator {
-    padding: calc(var(--base) / 4);
     display: flex;
-    align-items: flex-start;
+    align-items: center;
+    justify-content: center;
+    width: base(1.2);
+    height: base(1.2);
+
+    &.icon {
+      padding: base(0.1);
+    }
   }
 
   &__content {
     background-color: var(--theme-elevation-0);
-    border-bottom-left-radius: $style-radius-s;
-    border-bottom-right-radius: $style-radius-s;
+    border-bottom-left-radius: $style-radius-m;
+    border-bottom-right-radius: $style-radius-m;
     padding: var(--base);
   }