@sebgroup/green-core 1.71.2 → 1.73.0

package/components/datepicker/datepicker.component.d.ts

@@ -29,6 +29,12 @@ declare class Datepicker extends GdsFormControlElement<Date> {
      * Whether to use the small variant of the datepicker field.
      */
     size: 'large' | 'small';
+    /**
+     * Hides the header and the footer, while still keeping the accessible label
+     *
+     * Always set the `label` attribute, and if you need to hide it, add this attribute and keep `label` set.
+     */
+    plain: boolean;
     /**
      * Whether to show a column of week numbers in the calendar.
      */
@@ -96,10 +102,9 @@ declare const GdsDatepicker_base: (new (...args: any[]) => import("../../utils/m
  *
  * @status beta
  *
- * @slot supporting-text - A supporting text that will be displayed below the label and above the input field.
  * @slot extended-supporting-text - A longer supporting text can be placed here. It will be displayed in a panel when the user clicks the info button.
  * @slot message - ***(deprecated - use `errorMessage` property instead)*** Error message to show below the input field whem there is a validation error.
- * @slot sub-label - ***(deprecated - use `supporting-text` slot instead)*** Renders between the label and the trigger button.
+ * @slot sub-label - ***(deprecated - use `supporting-text` property instead)*** Renders between the label and the trigger button.
  *
  * @event change - Fired when the value of the dropdown is changed through user interaction (not when value prop is set programatically).
  * @event gds-ui-state - Fired when the dropdown is opened or closed.

package/components/datepicker/datepicker.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.QTSIPXV3.js";
-var _valueOnOpen, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _dispatchInputEvent, dispatchInputEvent_fn, _handleFieldFocusOut, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
+var _valueOnOpen, _shouldShowFooter, shouldShowFooter_fn, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _dispatchInputEvent, dispatchInputEvent_fn, _handleFieldFocusOut, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
 import { localized, msg } from "@lit/localize";
 import { nothing } from "lit";
 import { property, query, queryAll, queryAsync, state } from "lit/decorators.js";
@@ -19,6 +19,7 @@ import { GdsButton } from "../../components/button/button.component.js";
 import { GdsDropdown } from "../../components/dropdown/dropdown.component.js";
 import { GdsFlex } from "../../components/flex/flex.component.js";
 import { gdsCustomElement, html } from "../../scoping.js";
+import formControlHostStyle from "../../shared-styles/form-control-host.style.js";
 import { tokens } from "../../tokens.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
 import { watch } from "../../utils/decorators/index.js";
@@ -43,6 +44,7 @@ import { styles } from "./datepicker.styles.js";
 let Datepicker = class extends GdsFormControlElement {
   constructor() {
     super();
+    __privateAdd(this, _shouldShowFooter);
     __privateAdd(this, _renderBackToValidRangeButton);
     __privateAdd(this, _focusDate);
     __privateAdd(this, _getSpinnerLabel);
@@ -64,6 +66,7 @@ let Datepicker = class extends GdsFormControlElement {
     this.open = false;
     this.supportingText = "";
     this.size = "large";
+    this.plain = false;
     this.showWeekNumbers = false;
     this.hideLabel = false;
     this.disabledWeekends = false;
@@ -273,26 +276,29 @@ let Datepicker = class extends GdsFormControlElement {
   }
   render() {
     return html`
-      <gds-form-control-header class="size-${this.size}">
-        <label id="label" for="spinner-0" slot="label">${this.label}</label>
-        ${when(
-      this.supportingText.length > 0,
-      () => html`<span slot="supporting-text" id="supporting-text">
-              ${this.supportingText}
-            </span>`
+      ${when(
+      !this.plain,
+      () => html`<gds-form-control-header class="size-${this.size}">
+            <label id="label" for="spinner-0" slot="label">${this.label}</label>
+            ${when(
+        this.supportingText.length > 0,
+        () => html`<span slot="supporting-text" id="supporting-text">
+                  ${this.supportingText}
+                </span>`
+      )}
+            <slot
+              id="supporting-text-slot"
+              name="extended-supporting-text"
+              slot="extended-supporting-text"
+            ></slot>
+            <!-- @deprecated: use 'supporting-text' slot instead. Remove in 2.0 release. -->
+            <slot
+              id="sub-label-slot"
+              name="sub-label"
+              slot="supporting-text"
+            ></slot>
+          </gds-form-control-header>`
     )}
-        <slot
-          id="supporting-text-slot"
-          name="extended-supporting-text"
-          slot="extended-supporting-text"
-        ></slot>
-        <!-- @deprecated: use 'supporting-text' slot instead. Remove in 2.0 release. -->
-        <slot
-          id="sub-label-slot"
-          name="sub-label"
-          slot="supporting-text"
-        ></slot>
-      </gds-form-control-header>
       <gds-field-base
         .size=${this.size}
         .disabled=${this.disabled}
@@ -315,7 +321,7 @@ let Datepicker = class extends GdsFormControlElement {
                   aria-valuemin=${__privateMethod(this, _getMinSpinnerValue, getMinSpinnerValue_fn).call(this, f.name)}
                   aria-valuemax=${__privateMethod(this, _getMaxSpinnerValue, getMaxSpinnerValue_fn).call(this, f.name)}
                   aria-label=${__privateMethod(this, _getSpinnerLabel, getSpinnerLabel_fn).call(this, f.name)}
-                  aria-describedby="label supporting-text supporting-text-slot sub-label-slot message"
+                  aria-describedby="supporting-text supporting-text-slot sub-label-slot message"
                   data-max-width=${__privateMethod(this, _getMaxSpinnerValue, getMaxSpinnerValue_fn).call(this, f.name).toString().length}
                   @keydown=${__privateGet(this, _handleSpinnerKeydown)}
                   @change=${(e) => __privateGet(this, _handleSpinnerChange).call(this, e.detail.value, f.name)}
@@ -355,22 +361,18 @@ let Datepicker = class extends GdsFormControlElement {
         </gds-button>
       </gds-field-base>
 
-      <gds-form-control-footer class="size-${this.size}">
-        ${when(
-      this.invalid,
-      // @deprecated
-      // Wrapped in a slot for backwards compatibility with the deprecated message slot
-      // Remove for 2.0 release
-      () => html`
+      ${when(
+      __privateMethod(this, _shouldShowFooter, shouldShowFooter_fn).call(this),
+      () => html`<gds-form-control-footer class="size-${this.size}">
+            ${``}
             <slot id="message" name="message" slot="message">
               <gds-icon-triangle-exclamation
                 solid
               ></gds-icon-triangle-exclamation>
               ${this.errorMessage || this.validationMessage}
             </slot>
-          `
+          </gds-form-control-footer>`
     )}
-      </gds-form-control-footer>
 
       <gds-popover
         autofocus
@@ -529,6 +531,10 @@ let Datepicker = class extends GdsFormControlElement {
   }
 };
 _valueOnOpen = new WeakMap();
+_shouldShowFooter = new WeakSet();
+shouldShowFooter_fn = function() {
+  return !this.plain && this.invalid;
+};
 _renderBackToValidRangeButton = new WeakSet();
 renderBackToValidRangeButton_fn = async function() {
   const focusedDate = await this.getFocusedDate();
@@ -567,7 +573,7 @@ getSpinnerLabel_fn = function(name) {
     month: msg("Month"),
     day: msg("Day")
   };
-  return labels[name];
+  return `${labels[name]} ${this.label}`;
 };
 _getMinSpinnerValue = new WeakSet();
 getMinSpinnerValue_fn = function(name) {
@@ -655,7 +661,7 @@ isValueOutsideRange_get = function() {
     return false;
   return this.value.getFullYear() < this.min.getFullYear() || this.value.getFullYear() > this.max.getFullYear();
 };
-Datepicker.styles = [tokens, styles];
+Datepicker.styles = [tokens, formControlHostStyle, styles];
 __decorateClass([
   property({ converter: dateConverter })
 ], Datepicker.prototype, "value", 1);
@@ -674,6 +680,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], Datepicker.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], Datepicker.prototype, "plain", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "show-week-numbers" })
 ], Datepicker.prototype, "showWeekNumbers", 2);

package/components/datepicker/datepicker.styles.js

@@ -4,17 +4,6 @@ const styles = css`
   @layer base, reset;
 
   @layer base {
-    :host {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      contain: layout;
-      isolation: isolate;
-      gap: var(--gds-space-xs);
-      font-family: inherit;
-      min-width: 200px;
-    }
-
     ::part(_button) {
       outline-offset: -1px;
     }
@@ -29,6 +18,11 @@ const styles = css`
       font-weight: var(--gds-text-weight-regular);
     }
 
+    :host([size='small']) .spinners {
+      font-size: var(--gds-text-size-detail-s);
+      line-height: var(--gds-text-line-height-detail-s);
+    }
+
     .spinner {
       display: flex;
       align-items: center;

package/components/details/details-icon/details-icon.component.d.ts

@@ -0,0 +1,14 @@
+import { GdsElement } from '../../../gds-element';
+/**
+ * @element gds-icon-details
+ * @status beta
+ */
+export declare class GdsIconDetails extends GdsElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Controls if the details is open
+     */
+    open: boolean;
+    render(): any;
+    updated(changedProperties: Map<string, any>): void;
+}

package/components/details/details-icon/details-icon.component.js

@@ -0,0 +1,71 @@
+import {
+  __decorateClass
+} from "../../../chunks/chunk.QTSIPXV3.js";
+import { property } from "lit/decorators.js";
+import { GdsElement } from "../../../gds-element.js";
+import {
+  gdsCustomElement,
+  html
+} from "../../../utils/helpers/custom-element-scoping.js";
+import { styles } from "./details-icon.style.js";
+let GdsIconDetails = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+  }
+  render() {
+    return html`
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        id="plus"
+      >
+        <line x1="4" y1="10" x2="16" y2="10" />
+        <line x1="10" y1="4" x2="10" y2="16">
+          <animate
+            attributeName="y1"
+            dur="240ms"
+            from="${this.open ? "4" : "10"}"
+            to="${this.open ? "10" : "4"}"
+            begin="plus.toggle"
+            fill="freeze"
+          />
+          <animate
+            attributeName="y2"
+            dur="240ms"
+            from="${this.open ? "16" : "10"}"
+            to="${this.open ? "10" : "16"}"
+            begin="plus.toggle"
+            fill="freeze"
+          />
+        </line>
+      </svg>
+    `;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("open")) {
+      const svg = this.shadowRoot?.querySelector("svg");
+      if (svg) {
+        const event = new CustomEvent("toggle", {
+          bubbles: true,
+          composed: true
+        });
+        svg.dispatchEvent(event);
+      }
+    }
+  }
+};
+GdsIconDetails.styles = [styles];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsIconDetails.prototype, "open", 2);
+GdsIconDetails = __decorateClass([
+  gdsCustomElement("gds-icon-details")
+], GdsIconDetails);
+export {
+  GdsIconDetails
+};

package/components/details/details-icon/details-icon.d.ts

@@ -0,0 +1,2 @@
+import { GdsIconDetails } from './details-icon.component';
+export { GdsIconDetails };

package/components/details/details-icon/details-icon.js

@@ -0,0 +1,6 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+import { GdsIconDetails } from "./details-icon.component.js";
+GdsIconDetails.define();
+export {
+  GdsIconDetails
+};

package/components/details/details-icon/details-icon.style.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/details/details-icon/details-icon.style.js

@@ -0,0 +1,10 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+const styles = css`
+  :host {
+    display: contents;
+  }
+`;
+export {
+  styles
+};

package/components/details/details.component.d.ts

@@ -0,0 +1,45 @@
+import { GdsElement } from '../../gds-element';
+export type DetailsSize = 'large' | 'small';
+declare const GdsDetails_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & typeof GdsElement;
+/**
+ * Details component that provides collapsible content sections.
+ *
+ * @element gds-details
+ * @status beta
+ *
+ * @slot - Default slot for details content
+ * @event gds-ui-state - Fired when details opens or closes
+ *
+ * @example
+ * ```html
+ * <gds-details summary="Section Title">
+ *   <p>Details content here</p>
+ * </gds-details>
+ * ```
+ */
+export declare class GdsDetails extends GdsDetails_base {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * The summary text displayed in the details header
+     */
+    summary: string;
+    /**
+     * Group identifier for details behavior synchronization
+     */
+    name: string;
+    /**
+     * Controls the expanded state of the details
+     */
+    open: boolean;
+    /**
+     * Controls the size variant of the details
+     */
+    size: DetailsSize;
+    private _content?;
+    private _openIconSlot?;
+    private _closedIconSlot?;
+    private __handleOpenChange;
+    render(): any;
+}
+export {};

package/components/details/details.component.js

@@ -0,0 +1,167 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet
+} from "../../chunks/chunk.QTSIPXV3.js";
+var _handleToggle, _handleKeydown, _syncGroupState, _dispatchStateEvent, _renderHeader, _renderIconButton, _renderContent;
+import { property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { GdsElement } from "../../gds-element.js";
+import { tokens } from "../../tokens.style.js";
+import { watch } from "../../utils/decorators/watch.js";
+import {
+  gdsCustomElement,
+  html
+} from "../../utils/helpers/custom-element-scoping.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "../../utils/mixins/declarative-layout-mixins.js";
+import { GdsButton } from "../button/button.component.js";
+import { GdsIconDetails } from "./details-icon/details-icon.component.js";
+import { styles } from "./details.styles.js";
+let GdsDetails = class extends withSizeXProps(
+  withMarginProps(withLayoutChildProps(GdsElement))
+) {
+  constructor() {
+    super(...arguments);
+    this.summary = "";
+    this.name = "";
+    this.open = false;
+    this.size = "large";
+    __privateAdd(this, _handleToggle, () => {
+      this.open = !this.open;
+      __privateGet(this, _dispatchStateEvent).call(this);
+    });
+    __privateAdd(this, _handleKeydown, (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        __privateGet(this, _handleToggle).call(this);
+      }
+    });
+    __privateAdd(this, _syncGroupState, () => {
+      if (!this.open || !this.name)
+        return;
+      document.querySelectorAll('[gds-element="gds-details"]').forEach((details) => {
+        var _a;
+        if (details !== this && details.name === this.name) {
+          const other = details;
+          other.open = false;
+          __privateGet(_a = other, _dispatchStateEvent).call(_a);
+        }
+      });
+    });
+    __privateAdd(this, _dispatchStateEvent, () => {
+      this.dispatchEvent(
+        new CustomEvent("gds-ui-state", {
+          bubbles: true,
+          composed: true,
+          detail: this.open
+        })
+      );
+    });
+    __privateAdd(this, _renderHeader, () => {
+      return html`
+      <div
+        class="summary"
+        part="summary"
+        role="button"
+        tabindex="0"
+        @click=${__privateGet(this, _handleToggle)}
+        @keydown=${__privateGet(this, _handleKeydown)}
+        aria-expanded="${this.open}"
+        aria-controls="content-${this.name || "default"}"
+      >
+        <div id="summary-${this.name || "default"}" class="summary-label">
+          ${this.summary || "Summary"}
+        </div>
+        ${__privateGet(this, _renderIconButton).call(this)}
+      </div>
+    `;
+    });
+    __privateAdd(this, _renderIconButton, () => {
+      return html`
+      <div class="summary-icon" role="presentation" aria-hidden="true">
+        <gds-button
+          rank="tertiary"
+          size=${this.size === "small" ? "xs" : "medium"}
+          role="presentation"
+          tabindex="-1"
+        >
+          <gds-icon-details .open=${this.open}></gds-icon-details>
+        </gds-button>
+      </div>
+    `;
+    });
+    __privateAdd(this, _renderContent, () => {
+      return html`
+      <div
+        id="content-${this.name || "default"}"
+        class=${classMap({
+        content: true,
+        open: this.open,
+        small: this.size === "small"
+      })}
+        aria-hidden="${!this.open}"
+      >
+        <slot></slot>
+      </div>
+    `;
+    });
+  }
+  __handleOpenChange() {
+    __privateGet(this, _syncGroupState).call(this);
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      details: true,
+      open: this.open,
+      small: this.size === "small"
+    })}
+      >
+        ${__privateGet(this, _renderHeader).call(this)} ${__privateGet(this, _renderContent).call(this)}
+      </div>
+    `;
+  }
+};
+_handleToggle = new WeakMap();
+_handleKeydown = new WeakMap();
+_syncGroupState = new WeakMap();
+_dispatchStateEvent = new WeakMap();
+_renderHeader = new WeakMap();
+_renderIconButton = new WeakMap();
+_renderContent = new WeakMap();
+GdsDetails.styles = [tokens, styles];
+__decorateClass([
+  property({ type: String })
+], GdsDetails.prototype, "summary", 2);
+__decorateClass([
+  property({ type: String })
+], GdsDetails.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsDetails.prototype, "open", 2);
+__decorateClass([
+  property({ type: String })
+], GdsDetails.prototype, "size", 2);
+__decorateClass([
+  query(".content")
+], GdsDetails.prototype, "_content", 2);
+__decorateClass([
+  query('slot[name="summary-icon-open"]')
+], GdsDetails.prototype, "_openIconSlot", 2);
+__decorateClass([
+  query('slot[name="summary-icon-closed"]')
+], GdsDetails.prototype, "_closedIconSlot", 2);
+__decorateClass([
+  watch("open")
+], GdsDetails.prototype, "__handleOpenChange", 1);
+GdsDetails = __decorateClass([
+  gdsCustomElement("gds-details", { dependsOn: [GdsButton, GdsIconDetails] })
+], GdsDetails);
+export {
+  GdsDetails
+};

package/components/details/details.d.ts

@@ -0,0 +1,2 @@
+import { GdsDetails } from './details.component';
+export { GdsDetails };

package/components/details/details.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { GdsDetails } from "./details.component.js";
+GdsDetails.define();
+export {
+  GdsDetails
+};

package/components/details/details.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/details/details.styles.js

@@ -0,0 +1,118 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+const styles = css`
+  @layer base, reset;
+  @layer base {
+    .details {
+      border-bottom: solid var(--gds-space-4xs)
+        var(--gds-color-l2-border-primary);
+      font-size: var(--gds-text-size-body-m);
+      line-height: var(--gds-text-line-height-body-m);
+      color: var(--gds-color-l2-content-secondary);
+      transition: border-color 240ms linear;
+    }
+
+    .summary {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      list-style: none;
+      user-select: none;
+      outline-offset: var(--gds-space-2xs);
+      outline-color: currentColor;
+      transition: all 120ms;
+      color: var(--gds-color-l2-content-primary);
+    }
+
+    .summary-icon {
+      border-radius: var(--gds-space-max);
+      background-color: transparent;
+      transition: all 280ms;
+      aspect-ratio: 1;
+      width: max-content;
+      height: max-content;
+      line-height: 1;
+    }
+
+    .summary:focus {
+      outline-color: var(--gds-color-l3-content-tertiary);
+
+      &:not(:focus-visible) {
+        outline-color: transparent;
+      }
+    }
+
+    @media (pointer: fine) {
+      .summary:is(:hover, :focus-within) .summary-icon {
+        background-color: color-mix(
+          in srgb,
+          transparent,
+          var(--gds-color-l3-states-light-hover)
+        );
+      }
+
+      .summary:active .summary-icon {
+        background-color: color-mix(
+          in srgb,
+          transparent,
+          var(--gds-color-l3-states-light-pressed)
+        );
+      }
+
+      .details:hover,
+      .details:focus-within {
+        border-color: var(--gds-color-l2-border-quaternary);
+      }
+    }
+
+    .summary-label {
+      font-size: var(--gds-text-size-heading-xs);
+      line-height: var(--gds-text-line-height-heading-xs);
+      font-weight: var(--gds-text-weight-regular);
+      padding-block: var(--gds-space-m);
+      cursor: pointer;
+      flex: 1;
+      outline: none;
+    }
+
+    .details.small .summary-label {
+      font-size: var(--gds-text-size-heading-2xs);
+      line-height: var(--gds-text-line-height-heading-2xs);
+      padding-block: var(--gds-space-s);
+    }
+
+    .details.small .content {
+      font-size: var(--gds-text-size-heading-2xs);
+      line-height: var(--gds-text-line-height-heading-2xs);
+    }
+
+    .details:focus-visible {
+      border-radius: var(--gds-space-2xs);
+    }
+
+    .details.open .content {
+      padding-block-end: var(--gds-space-l);
+    }
+
+    .details.small.open .content {
+      padding-block-end: var(--gds-space-s);
+    }
+
+    .content {
+      interpolate-size: allow-keywords;
+      height: 0;
+      transition: height 0.35s ease;
+      overflow-y: clip;
+      outline: none;
+    }
+
+    .content.open {
+      height: max-content;
+      max-height: 100vh;
+      overflow-y: auto;
+    }
+  }
+`;
+export {
+  styles
+};

package/components/details/index.d.ts

@@ -0,0 +1 @@
+export * from './details';

package/components/details/index.js

@@ -0,0 +1 @@
+export * from "./details.js";