@payloadcms/ui 3.0.0-alpha.0

package/dist/elements/Nav/NavHamburger/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavHamburger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAeA,CAAA"}

package/dist/elements/Nav/NavToggler/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.scss';
+export declare const NavToggler: React.FC<{
+    children?: React.ReactNode;
+    className?: string;
+    id?: string;
+    tabIndex?: number;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Nav/NavToggler/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavToggler/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAqCA,CAAA"}

package/dist/elements/Nav/NavToggler/index.scss

@@ -0,0 +1,10 @@
+@import '../../../scss/styles.scss';
+
+.nav-toggler {
+  position: relative;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  cursor: pointer;
+}

package/dist/elements/Nav/NavWrapper/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './index.scss';
+export declare const NavWrapper: React.FC<{
+    baseClass?: string;
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Nav/NavWrapper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavWrapper/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAYA,CAAA"}

package/dist/elements/Nav/NavWrapper/index.scss

@@ -0,0 +1,17 @@
+@import '../../../scss/styles.scss';
+
+.nav {
+  position: sticky;
+  top: 0;
+  left: 0;
+  flex-shrink: 0;
+  height: 100vh;
+  width: var(--nav-width);
+  border-right: 1px solid var(--theme-elevation-100);
+  opacity: 0;
+  transition: opacity var(--nav-trans-time) ease-in-out;
+
+  &--nav-open {
+    opacity: 1;
+  }
+}

package/dist/elements/Nav/context.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type NavContextType = {
+    navOpen: boolean;
+    navRef: React.RefObject<HTMLDivElement>;
+    setNavOpen: (value: boolean) => void;
+};
+export declare const NavContext: React.Context<NavContextType>;
+export declare const useNav: () => NavContextType;
+export declare const NavProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};
+//# sourceMappingURL=context.d.ts.map

package/dist/elements/Nav/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,KAAK,cAAc,GAAG;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IACvC,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,UAAU,+BAIrB,CAAA;AAEF,eAAO,MAAM,MAAM,sBAAqC,CAAA;AAYxD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CA4DA,CAAA"}

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

@@ -0,0 +1,12 @@
+import type { I18n } from '@payloadcms/translations';
+import type { Permissions, User } from 'payload/auth';
+import type { SanitizedConfig } from 'payload/types';
+import React from 'react';
+import './index.scss';
+export declare const DefaultNav: React.FC<{
+    config: SanitizedConfig;
+    i18n: I18n;
+    permissions: Permissions;
+    user: User;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAKpD,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,MAAM,EAAE,eAAe,CAAA;IACvB,IAAI,EAAE,IAAI,CAAA;IACV,WAAW,EAAE,WAAW,CAAA;IACxB,IAAI,EAAE,IAAI,CAAA;CACX,CAoGA,CAAA"}

package/dist/elements/Nav/index.scss

@@ -0,0 +1,150 @@
+@import '../../scss/styles.scss';
+
+.nav {
+  position: sticky;
+  top: 0;
+  left: 0;
+  flex-shrink: 0;
+  height: 100vh;
+  width: var(--nav-width);
+  border-right: 1px solid var(--theme-elevation-100);
+  opacity: 0;
+  transition: opacity var(--nav-trans-time) ease-in-out;
+
+  &--nav-open {
+    opacity: 1;
+  }
+
+  &__header {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: var(--app-header-height);
+  }
+
+  &__header-content {
+    z-index: 1;
+    position: relative;
+    height: 100%;
+  }
+
+  &__mobile-close {
+    display: none;
+    background: none;
+    border: 0;
+    outline: 0;
+    padding: calc(var(--base) * 0.75) var(--gutter-h);
+  }
+
+  &__scroll {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: var(--app-header-height) base(1) base(2) base(1);
+    overflow-y: auto;
+
+    // remove the scrollbar here to prevent layout shift as nav groups are toggled
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__wrap {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-grow: 1;
+  }
+
+  &__label {
+    color: var(--theme-elevation-400);
+  }
+
+  &__controls {
+    margin-top: auto;
+    margin-bottom: 0;
+
+    > * {
+      margin-top: base(1);
+    }
+
+    a:focus-visible {
+      outline: var(--accessibility-outline);
+    }
+  }
+
+  &__log-out {
+    &:hover {
+      g {
+        transform: translateX(-#{base(0.125)});
+      }
+    }
+  }
+
+  nav {
+    a {
+      position: relative;
+      padding: base(0.125) base(1.5) base(0.125) 0;
+      display: flex;
+      text-decoration: none;
+
+      &:focus:not(:focus-visible) {
+        box-shadow: none;
+        font-weight: 600;
+      }
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+
+      &.active {
+        font-weight: normal;
+        padding-left: 0;
+        font-weight: 600;
+      }
+    }
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+
+    &.active {
+      .nav__link-icon {
+        display: block;
+      }
+    }
+  }
+
+  &__link-icon {
+    display: none;
+    margin-right: calc(var(--base) * 0.25);
+    top: -1px;
+    position: relative;
+  }
+
+  @include mid-break {
+    &__scroll {
+      padding: var(--app-header-height) base(0.5) base(2);
+    }
+  }
+
+  @include small-break {
+    &__scroll {
+      padding: var(--app-header-height) var(--gutter-h) base(2);
+    }
+
+    nav a {
+      font-size: base(0.875);
+      line-height: base(1.5);
+    }
+
+    &__mobile-close {
+      display: flex;
+      height: 100%;
+      align-items: center;
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.scss';
+type Props = {
+    children: React.ReactNode;
+    label: string;
+};
+declare const NavGroup: React.FC<Props>;
+export default NavGroup;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/NavGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAMlD,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiE7B,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/elements/NavGroup/index.scss

@@ -0,0 +1,56 @@
+@import '../../scss/styles.scss';
+
+.nav-group {
+  width: 100%;
+  margin-bottom: base(0.5);
+
+  &__toggle {
+    cursor: pointer;
+    color: var(--theme-elevation-400);
+    background: transparent;
+    padding-left: 0;
+    border: 0;
+    margin-bottom: base(0.25);
+    width: 100%;
+    text-align: left;
+    display: flex;
+    align-items: flex-start;
+    padding: 0;
+    gap: base(0.5);
+    justify-content: space-between;
+
+    svg {
+      flex-shrink: 0;
+      margin-top: base(-0.2);
+    }
+
+    &:hover,
+    &:focus-visible {
+      color: var(--theme-elevation-1000);
+
+      .stroke {
+        stroke: var(--theme-elevation-1000);
+      }
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  &__indicator {
+    position: relative;
+    flex-shrink: 0;
+
+    svg .stroke {
+      stroke: var(--theme-elevation-200);
+    }
+  }
+
+  &--collapsed {
+    .collapsible__toggle {
+      border-bottom-right-radius: $style-radius-s;
+      border-bottom-left-radius: $style-radius-s;
+    }
+  }
+}

package/dist/elements/Pagination/ClickableArrow/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Props } from './types';
+import './index.scss';
+declare const ClickableArrow: React.FC<Props>;
+export default ClickableArrow;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Pagination/ClickableArrow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Pagination/ClickableArrow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAGpC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqBnC,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/elements/Pagination/ClickableArrow/index.scss

@@ -0,0 +1,45 @@
+@import '../../../scss/styles.scss';
+
+.clickable-arrow {
+  cursor: pointer;
+  @extend %btn-reset;
+  width: base(2);
+  height: base(2);
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  outline: 0;
+  padding: base(0.5);
+  color: var(--theme-elevation-800);
+  line-height: base(1);
+
+  &:not(.clickable-arrow--is-disabled) {
+    &:hover,
+    &:focus-visible {
+      background: var(--theme-elevation-100);
+    }
+  }
+
+  &:focus-visible {
+    outline: var(--accessibility-outline);
+  }
+
+  &--right {
+    .icon {
+      transform: rotate(-90deg);
+    }
+  }
+
+  &--left .icon {
+    transform: rotate(90deg);
+  }
+
+  &--is-disabled {
+    cursor: default;
+
+    .icon .stroke {
+      stroke: var(--theme-elevation-400);
+    }
+  }
+}

package/dist/elements/Pagination/ClickableArrow/types.d.ts

@@ -0,0 +1,6 @@
+export type Props = {
+    direction?: 'left' | 'right';
+    isDisabled?: boolean;
+    updatePage?: () => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/Pagination/ClickableArrow/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/Pagination/ClickableArrow/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB,CAAA"}

package/dist/elements/Pagination/Page/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { Props } from './types';
+declare const Page: React.FC<Props>;
+export default Page;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Pagination/Page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Pagination/Page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIpC,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqBzB,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/elements/Pagination/Page/types.d.ts

@@ -0,0 +1,8 @@
+export type Props = {
+    isCurrent?: boolean;
+    isFirstPage?: boolean;
+    isLastPage?: boolean;
+    page?: number;
+    updatePage?: (page: any) => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/Pagination/Page/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/Pagination/Page/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAA;CAC5B,CAAA"}

package/dist/elements/Pagination/Separator/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const Separator: React.FC;
+export default Separator;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Pagination/Separator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Pagination/Separator/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAgE,CAAA;AAEvF,eAAe,SAAS,CAAA"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { Props } from './types';
+import './index.scss';
+export declare const Pagination: React.FC<Props>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pagination/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAQ,KAAK,EAAE,MAAM,SAAS,CAAA;AAM1C,OAAO,cAAc,CAAA;AAUrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4GtC,CAAA"}

package/dist/elements/Pagination/index.scss

@@ -0,0 +1,51 @@
+@import '../../scss/styles.scss';
+
+.paginator {
+  display: flex;
+  margin-bottom: $baseline;
+
+  &__page {
+    cursor: pointer;
+
+    &--is-current {
+      background: var(--theme-elevation-100);
+      color: var(--theme-elevation-400);
+      cursor: default;
+    }
+
+    &--is-last-page {
+      margin-right: 0;
+    }
+  }
+
+  .clickable-arrow--right {
+    margin-right: base(0.25);
+  }
+
+  &__page {
+    @extend %btn-reset;
+    width: base(2);
+    height: base(2);
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    outline: 0;
+    padding: base(0.5);
+    color: var(--theme-elevation-800);
+    line-height: base(1);
+
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
+  }
+
+  &__page,
+  &__separator {
+    margin-right: base(0.25);
+  }
+
+  &__separator {
+    align-self: center;
+    color: var(--theme-elevation-400);
+  }
+}

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

@@ -0,0 +1,24 @@
+export type Props = {
+    disableHistoryChange?: boolean;
+    hasNextPage?: boolean;
+    hasPrevPage?: boolean;
+    limit?: number;
+    nextPage?: number;
+    numberOfNeighbors?: number;
+    onChange?: (page: number) => void;
+    page?: number;
+    prevPage?: number;
+    totalPages?: number;
+};
+export type Node = {
+    props?: {
+        direction?: 'left' | 'right';
+        isDisabled?: boolean;
+        isFirstPage?: boolean;
+        isLastPage?: boolean;
+        page?: number;
+        updatePage: (page?: number) => void;
+    };
+    type: 'ClickableArrow' | 'Page' | 'Separator';
+} | number;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Pagination/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,IAAI,GACZ;IACE,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;QAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,WAAW,CAAC,EAAE,OAAO,CAAA;QACrB,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;KACpC,CAAA;IACD,IAAI,EAAE,gBAAgB,GAAG,MAAM,GAAG,WAAW,CAAA;CAC9C,GACD,MAAM,CAAA"}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import './index.scss';
+export type Props = {
+    handleChange?: (limit: number) => void;
+    limit: number;
+    limits: number[];
+    modifySearchParams?: boolean;
+    resetPage?: boolean;
+};
+export declare const PerPage: React.FC<Props>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PerPage/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,KAAK,GAAG;IAClB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiEnC,CAAA"}

package/dist/elements/PerPage/index.scss

@@ -0,0 +1,46 @@
+@import '../../scss/styles.scss';
+
+.per-page {
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 4);
+  }
+
+  &__base-button {
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+  }
+
+  &__button {
+    @extend %btn-reset;
+    cursor: pointer;
+    text-align: left;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    color: var(--theme-elevation-500);
+
+    &:hover,
+    &:focus-visible {
+      text-decoration: underline;
+    }
+
+    svg .stroke {
+      stroke: currentColor;
+    }
+  }
+
+  &__chevron {
+    padding-left: calc(var(--base) / 4);
+  }
+
+  &__button-active {
+    font-weight: bold;
+    color: var(--theme-text);
+  }
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Props } from './types';
+import './index.scss';
+export declare const Pill: React.FC<Props>;
+export default Pill;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pill/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAqB,MAAM,SAAS,CAAA;AAGvD,OAAO,cAAc,CAAA;AAmFrB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA"}