@govtechsg/sgds-web-component 3.0.0-rc.1 → 3.0.0-rc.2

package/react/components/FileUpload/sgds-file-upload.js

@@ -2,64 +2,79 @@
 import { __decorate } from 'tslib';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import SgdsElement from '../../base/sgds-element.js';
+import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.js';
 import { SgdsButton } from '../Button/sgds-button.js';
-import css_248z$2 from './file-upload.js';
-import genId from '../../utils/generateId.js';
-import css_248z from '../../styles/svg.js';
-import css_248z$1 from '../../styles/form-hint.js';
+import css_248z from './file-upload.js';
+import FormControlElement from '../../base/form-control-element.js';
+import { SgdsFormValidatorMixin } from '../../utils/validatorMixin.js';
+import { watch } from '../../utils/watch.js';
 
 /**
  * @summary Allows users to upload files of various sizes and formats
  * @slot default - Label for file upload button
  *
- * @event sgds-files-selected - Emitted when files are selected for uploading
- *
- * @cssproperty --file-upload-file-icon-color - Left icon color
- * @cssproperty --file-upload-remove-icon-color - Remove icon color
- * @cssproperty --file-upload-remove-icon-hover-color - Remove icon hover color
+ * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail
  */
-class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {
+class SgdsFileUpload extends SgdsFormValidatorMixin(ScopedElementsMixin(FormControlElement)) {
     constructor() {
         super(...arguments);
-        /** The button's variant. */
-        this.variant = "primary";
-        //** Disable the fileuploader button */
-        this.disabled = false;
         /** Allows multiple files to be listed for uploading */
         this.multiple = false;
         /** Specify the acceptable file type  */
         this.accept = "";
-        /** Customize the check icon with SVG */
-        this.checkedIcon = "";
-        /** Customize the cancel icon with SVG */
-        this.cancelIcon = "";
-        /** The input's hint text below the label */
-        this.hintText = "";
-        /** @internal */
+        // /** Customize the check icon with SVG */
+        // @property({ type: String }) checkedIcon = "";
+        /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+        this.hasFeedback = false;
+        /** Makes the input as a required field. */
+        this.required = false;
         this.selectedFiles = [];
-        // Create a ref to the input element
-        /** @internal */
         this.inputRef = createRef();
-        /**@internal */
-        this.inputId = genId("input", "file");
     }
     /**@internal */
     static get scopedElements() {
         return {
-            "sgds-button": SgdsButton
+            "sgds-button": SgdsButton,
+            "sgds-close-button": SgdsCloseButton
         };
     }
+    /**
+     * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+     * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
+     */
+    reportValidity() {
+        return this._mixinReportValidity();
+    }
+    /**
+     * Checks for validity without any native error popup message
+     */
+    checkValidity() {
+        return this._mixinCheckValidity();
+    }
+    /**
+     * Returns the ValidityState object
+     */
+    get validity() {
+        return this._mixinGetValidity();
+    }
+    /**
+     * Returns the validation message based on the ValidityState
+     */
+    get validationMessage() {
+        return this._mixinGetValidationMessage();
+    }
+    /**
+     * Returns files selected for upload
+     */
+    get files() {
+        return this.selectedFiles;
+    }
     _setFileList(files) {
-        this.files = files;
-        this.emit("sgds-files-selected");
-        //Possible to pass in the files
+        this.emit("sgds-files-selected", { detail: files });
     }
-    /** @internal */
-    handleClick(event) {
+    _handleClick(event) {
         event.preventDefault();
         if (!this.disabled) {
             // Get a reference to the input element using the inputRef
@@ -68,8 +83,7 @@ class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {
             inputElement.click();
         }
     }
-    /** @internal */
-    handleInputChange(event) {
+    _handleChange(event) {
         const inputElement = event.target;
         const files = inputElement.files;
         if (files.length > 0) {
@@ -78,6 +92,7 @@ class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {
         // Trigger a re-render of the component to update the list of selected files
         this._setFileList(files);
         this.requestUpdate();
+        super._mixinHandleChange(event);
     }
     _removeFileHandler(index) {
         const inputElement = this.inputRef.value;
@@ -94,19 +109,56 @@ class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {
         this.selectedFiles = Array.from(fileBuffer.files);
         // Trigger a re-render of the component to update the list of selected files
         this.requestUpdate();
+        this._mixinValidate(this.input);
+    }
+    _clearAllFiles() {
+        const inputElement = this.inputRef.value;
+        const fileBuffer = new DataTransfer();
+        inputElement.files = fileBuffer.files;
+        this._setFileList(fileBuffer.files);
+        this.selectedFiles = Array.from(fileBuffer.files);
+    }
+    /**
+     * fileupload requries a custom _mixinResetFormControl for clearing files
+     */
+    _mixinResetFormControl() {
+        this._clearAllFiles();
+        this._mixinResetValidity(this.input);
+    }
+    _handleDisabledChange() {
+        // Disabled form controls are always valid, so we need to recheck validity when the state changes
+        this.setInvalid(false);
+    }
+    _renderLabel() {
+        const labelTemplate = html `
+      <label for=${this._controlId} id=${this._labelId} class="form-label"> ${this.label} </label>
+    `;
+        return this.label && labelTemplate;
     }
     _renderHintText() {
-        const hintTextTemplate = html ` <small id="${this.inputId}Help" class="form-text">${this.hintText}</small> `;
+        const hintTextTemplate = html ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
         return this.hintText && hintTextTemplate;
     }
-    _sanitizeVariant(variant) {
-        return variant.replace("outline-", "");
+    _renderFeedback() {
+        return html `
+      <div class="invalid-feedback-container">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <path
+            d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z"
+            fill="#B90000"
+          />
+        </svg>
+        <div id="${this._controlId}-invalid" class="invalid-feedback">
+          ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
+        </div>
+      </div>
+    `;
     }
     render() {
-        const getCheckedIcon = (checkedIcon) => {
-            if (checkedIcon) {
-                return html `${unsafeSVG(checkedIcon)}`;
-            }
+        const getCheckedIcon = () => {
+            // if (checkedIcon) {
+            //   return html`${unsafeSVG(checkedIcon)}`;
+            // }
             return html ` <svg
         xmlns="http://www.w3.org/2000/svg"
         width="16"
@@ -118,67 +170,62 @@ class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {
         <path
           d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"
         />
-      </svg>`;
-        };
-        const getCancelIcon = (cancelIcon) => {
-            if (cancelIcon) {
-                return html `${unsafeSVG(cancelIcon)}`;
-            }
-            return html `<svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        class="bi bi-x-circle"
-        viewBox="0 0 16 16"
-      >
-        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
-        <path
-          d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
-        />
       </svg>`;
         };
         const listItems = this.selectedFiles.map((file, index) => html `
-        <li key=${index} class="fileupload-list-item">
-          <span>${getCheckedIcon(this.checkedIcon)}</span>
+        <li key=${index} class="file-upload-list-item">
+          <span>${getCheckedIcon()}</span>
           <span class="filename">${file.name}</span>
-          <span @click=${() => this._removeFileHandler(index)}>${getCancelIcon(this.cancelIcon)}</span>
+          <sgds-close-button
+            aria-label="remove the file"
+            @click=${() => this._removeFileHandler(index)}
+          ></sgds-close-button>
         </li>
       `);
         return html `
-      <input
-        ${ref(this.inputRef)}
-        type="file"
-        @change=${this.handleInputChange}
-        ?multiple=${this.multiple}
-        accept=${this.accept}
-        id=${this.inputId}
-      />
-      <div class="fileupload-container">
-        <sgds-button
-          size=${this.size}
-          variant=${this._sanitizeVariant(this.variant)}
-          ?outlined=${this.variant.includes("outline")}
+      <div class="file-upload">
+        <input
+          ${ref(this.inputRef)}
+          type="file"
+          @change=${this._handleChange}
+          ?multiple=${this.multiple}
+          accept=${this.accept}
+          id=${this._controlId}
+          ?required=${this.required}
           ?disabled=${this.disabled}
-          @click=${this.handleClick}
-        >
-          <label for=${this.inputId} class="file-upload-label"><slot></slot></label>
-        </sgds-button>
-        ${this._renderHintText()}
-        <ul class="sgds fileupload-list">
+        />
+        <div class="file-upload-container">
+          ${this._renderLabel()}
+          <sgds-button variant="outline" ?disabled=${this.disabled} @click=${this._handleClick}>
+            <label for=${this._controlId}><slot></slot></label>
+            <svg
+              slot="rightIcon"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <path
+                d="M3.5625 14.1943C3.71168 14.1943 3.85476 14.2535 3.96025 14.359C4.06574 14.4645 4.125 14.6076 4.125 14.7568V17.5693C4.125 17.8677 4.24353 18.1538 4.4545 18.3648C4.66548 18.5758 4.95163 18.6943 5.25 18.6943H18.75C19.0484 18.6943 19.3345 18.5758 19.5455 18.3648C19.7565 18.1538 19.875 17.8677 19.875 17.5693V14.7568C19.875 14.6076 19.9343 14.4645 20.0398 14.359C20.1452 14.2535 20.2883 14.1943 20.4375 14.1943C20.5867 14.1943 20.7298 14.2535 20.8352 14.359C20.9407 14.4645 21 14.6076 21 14.7568V17.5693C21 18.166 20.7629 18.7383 20.341 19.1603C19.919 19.5822 19.3467 19.8193 18.75 19.8193H5.25C4.65326 19.8193 4.08097 19.5822 3.65901 19.1603C3.23705 18.7383 3 18.166 3 17.5693V14.7568C3 14.6076 3.05926 14.4645 3.16475 14.359C3.27024 14.2535 3.41332 14.1943 3.5625 14.1943Z"
+                fill="currentColor"
+              />
+              <path
+                d="M11.6018 4.34604C11.654 4.29366 11.7161 4.2521 11.7844 4.22374C11.8528 4.19538 11.926 4.18079 12 4.18079C12.074 4.18079 12.1473 4.19538 12.2156 4.22374C12.2839 4.2521 12.346 4.29366 12.3983 4.34604L15.7733 7.72104C15.8789 7.82666 15.9382 7.96992 15.9382 8.11929C15.9382 8.26866 15.8789 8.41192 15.7733 8.51754C15.6676 8.62316 15.5244 8.6825 15.375 8.6825C15.2256 8.6825 15.0824 8.62316 14.9768 8.51754L12.5625 6.10217V15.9943C12.5625 16.1435 12.5032 16.2866 12.3978 16.392C12.2923 16.4975 12.1492 16.5568 12 16.5568C11.8508 16.5568 11.7077 16.4975 11.6023 16.392C11.4968 16.2866 11.4375 16.1435 11.4375 15.9943V6.10217L9.02326 8.51754C8.97096 8.56984 8.90887 8.61133 8.84054 8.63963C8.77221 8.66793 8.69897 8.6825 8.62501 8.6825C8.55105 8.6825 8.47781 8.66793 8.40948 8.63963C8.34114 8.61133 8.27906 8.56984 8.22676 8.51754C8.17446 8.46524 8.13297 8.40316 8.10467 8.33482C8.07636 8.26649 8.0618 8.19325 8.0618 8.11929C8.0618 8.04533 8.07636 7.97209 8.10467 7.90376C8.13297 7.83543 8.17446 7.77334 8.22676 7.72104L11.6018 4.34604Z"
+                fill="currentColor"
+              />
+            </svg>
+          </sgds-button>
+          ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}
+        </div>
+        <ul class="file-upload-list">
           ${listItems}
         </ul>
       </div>
     `;
     }
 }
-SgdsFileUpload.styles = [...SgdsElement.styles, css_248z, css_248z$1, css_248z$2];
-__decorate([
-    property({ reflect: true })
-], SgdsFileUpload.prototype, "variant", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SgdsFileUpload.prototype, "disabled", void 0);
+SgdsFileUpload.styles = [...FormControlElement.styles, css_248z];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsFileUpload.prototype, "multiple", void 0);
@@ -186,23 +233,20 @@ __decorate([
     property({ type: String, reflect: true })
 ], SgdsFileUpload.prototype, "accept", void 0);
 __decorate([
-    property({ reflect: true })
-], SgdsFileUpload.prototype, "size", void 0);
-__decorate([
-    property({ type: String })
-], SgdsFileUpload.prototype, "checkedIcon", void 0);
-__decorate([
-    property({ type: String })
-], SgdsFileUpload.prototype, "cancelIcon", void 0);
+    property({ type: Boolean, reflect: true })
+], SgdsFileUpload.prototype, "hasFeedback", void 0);
 __decorate([
-    property({ reflect: true })
-], SgdsFileUpload.prototype, "hintText", void 0);
+    property({ type: String, reflect: true })
+], SgdsFileUpload.prototype, "invalidFeedback", void 0);
 __decorate([
-    property({ type: Object, state: true })
-], SgdsFileUpload.prototype, "files", void 0);
+    property({ type: Boolean, reflect: true })
+], SgdsFileUpload.prototype, "required", void 0);
 __decorate([
-    property({ type: Array })
+    state()
 ], SgdsFileUpload.prototype, "selectedFiles", void 0);
+__decorate([
+    watch("disabled", { waitUntilFirstUpdate: true })
+], SgdsFileUpload.prototype, "_handleDisabledChange", null);
 
 export { SgdsFileUpload, SgdsFileUpload as default };
 //# sourceMappingURL=sgds-file-upload.js.map

package/react/components/FileUpload/sgds-file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-file-upload.js","sources":["../../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { SgdsButton, type ButtonVariant } from \"../Button/sgds-button\";\nimport fileUploadStyle from \"./file-upload.css\";\nimport genId from \"../../utils/generateId\";\nimport svgStyles from \"../../styles/svg.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nexport type FileUploadButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\"\n  | \"link\"\n  | \"outline-primary\"\n  | \"outline-secondary\"\n  | \"outline-success\"\n  | \"outline-danger\"\n  | \"outline-warning\"\n  | \"outline-info\"\n  | \"outline-light\"\n  | \"outline-dark\";\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading\n *\n * @cssproperty --file-upload-file-icon-color - Left icon color\n * @cssproperty --file-upload-remove-icon-color - Remove icon color\n * @cssproperty --file-upload-remove-icon-hover-color - Remove icon hover color\n */\n\nexport class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, svgStyles, formHintStyles, fileUploadStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton\n    };\n  }\n  /** The button's variant. */\n  @property({ reflect: true }) variant: FileUploadButtonVariant = \"primary\";\n\n  //** Disable the fileuploader button */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Allows multiple files to be listed for uploading */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /** Specify the acceptable file type  */\n  @property({ type: String, reflect: true })\n  accept = \"\";\n\n  /** Specifies a large or small button */\n  @property({ reflect: true }) size: \"sm\" | \"lg\";\n\n  /** Customize the check icon with SVG */\n  @property({ type: String })\n  checkedIcon = \"\";\n\n  /** Customize the cancel icon with SVG */\n  @property({ type: String })\n  cancelIcon = \"\";\n\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** @internal */\n  @property({ type: Object, state: true })\n  private files: FileList | undefined;\n\n  /** @internal */\n  @property({ type: Array })\n  private selectedFiles: File[] = [];\n\n  private _setFileList(files: FileList) {\n    this.files = files;\n    this.emit(\"sgds-files-selected\");\n    //Possible to pass in the files\n  }\n\n  // Create a ref to the input element\n  /** @internal */\n  private inputRef = createRef<HTMLInputElement>();\n\n  /** @internal */\n  private handleClick(event: Event) {\n    event.preventDefault();\n    if (!this.disabled) {\n      // Get a reference to the input element using the inputRef\n      const inputElement = this.inputRef.value;\n      // Do something with the input element\n      inputElement.click();\n    }\n  }\n\n  /** @internal */\n  private handleInputChange(event: Event) {\n    const inputElement = event.target as HTMLInputElement;\n    const files = inputElement.files as FileList;\n\n    if (files.length > 0) {\n      this.selectedFiles = Array.from(files);\n    }\n    // Trigger a re-render of the component to update the list of selected files\n    this._setFileList(files);\n    this.requestUpdate();\n  }\n\n  private _removeFileHandler(index: number) {\n    const inputElement = this.inputRef.value;\n    const attachments = inputElement.files;\n\n    const fileBuffer = new DataTransfer();\n    for (let i = 0; i < attachments.length; i++) {\n      if (index !== i) fileBuffer.items.add(attachments[i]);\n    }\n\n    // Assign buffer to file input\n    inputElement.files = fileBuffer.files;\n    // Re-populate selected files to the lists\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n\n    // Trigger a re-render of the component to update the list of selected files\n    this.requestUpdate();\n  }\n\n  /**@internal */\n  protected inputId: string = genId(\"input\", \"file\");\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <small id=\"${this.inputId}Help\" class=\"form-text\">${this.hintText}</small> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  private _sanitizeVariant(variant: FileUploadButtonVariant) {\n    return variant.replace(\"outline-\", \"\") as ButtonVariant;\n  }\n  render() {\n    const getCheckedIcon = (checkedIcon: string) => {\n      if (checkedIcon) {\n        return html`${unsafeSVG(checkedIcon)}`;\n      }\n      return html` <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-check-lg\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"\n        />\n      </svg>`;\n    };\n\n    const getCancelIcon = (cancelIcon: string) => {\n      if (cancelIcon) {\n        return html`${unsafeSVG(cancelIcon)}`;\n      }\n      return html`<svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-x-circle\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" />\n        <path\n          d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\n        />\n      </svg>`;\n    };\n\n    const listItems = this.selectedFiles.map(\n      (file, index) => html`\n        <li key=${index} class=\"fileupload-list-item\">\n          <span>${getCheckedIcon(this.checkedIcon)}</span>\n          <span class=\"filename\">${file.name}</span>\n          <span @click=${() => this._removeFileHandler(index)}>${getCancelIcon(this.cancelIcon)}</span>\n        </li>\n      `\n    );\n\n    return html`\n      <input\n        ${ref(this.inputRef)}\n        type=\"file\"\n        @change=${this.handleInputChange}\n        ?multiple=${this.multiple}\n        accept=${this.accept}\n        id=${this.inputId}\n      />\n      <div class=\"fileupload-container\">\n        <sgds-button\n          size=${this.size}\n          variant=${this._sanitizeVariant(this.variant)}\n          ?outlined=${this.variant.includes(\"outline\")}\n          ?disabled=${this.disabled}\n          @click=${this.handleClick}\n        >\n          <label for=${this.inputId} class=\"file-upload-label\"><slot></slot></label>\n        </sgds-button>\n        ${this._renderHintText()}\n        <ul class=\"sgds fileupload-list\">\n          ${listItems}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["svgStyles","formHintStyles","fileUploadStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-file-upload.js","sources":["../../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport fileUploadStyles from \"./file-upload.css\";\n\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail\n */\n\nexport class SgdsFileUpload extends SgdsFormValidatorMixin(ScopedElementsMixin(FormControlElement)) {\n  static styles = [...FormControlElement.styles, fileUploadStyles];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton,\n      \"sgds-close-button\": SgdsCloseButton\n    };\n  }\n\n  /** Allows multiple files to be listed for uploading */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /** Specify the acceptable file type  */\n  @property({ type: String, reflect: true }) accept = \"\";\n\n  // /** Customize the check icon with SVG */\n  // @property({ type: String }) checkedIcon = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  @state()\n  private selectedFiles: File[] = [];\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage(): string {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * Returns files selected for upload\n   */\n  public get files(): File[] {\n    return this.selectedFiles;\n  }\n\n  private _setFileList(files: FileList) {\n    this.emit(\"sgds-files-selected\", { detail: files });\n  }\n\n  private inputRef = createRef<HTMLInputElement>();\n\n  private _handleClick(event: Event) {\n    event.preventDefault();\n    if (!this.disabled) {\n      // Get a reference to the input element using the inputRef\n      const inputElement = this.inputRef.value;\n      // Do something with the input element\n      inputElement.click();\n    }\n  }\n\n  private _handleChange(event: Event) {\n    const inputElement = event.target as HTMLInputElement;\n    const files = inputElement.files as FileList;\n\n    if (files.length > 0) {\n      this.selectedFiles = Array.from(files);\n    }\n    // Trigger a re-render of the component to update the list of selected files\n    this._setFileList(files);\n    this.requestUpdate();\n    super._mixinHandleChange(event);\n  }\n\n  private _removeFileHandler(index: number) {\n    const inputElement = this.inputRef.value;\n    const attachments = inputElement.files;\n\n    const fileBuffer = new DataTransfer();\n    for (let i = 0; i < attachments.length; i++) {\n      if (index !== i) fileBuffer.items.add(attachments[i]);\n    }\n\n    // Assign buffer to file input\n    inputElement.files = fileBuffer.files;\n    // Re-populate selected files to the lists\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n\n    // Trigger a re-render of the component to update the list of selected files\n    this.requestUpdate();\n    this._mixinValidate(this.input);\n  }\n\n  private _clearAllFiles() {\n    const inputElement = this.inputRef.value;\n    const fileBuffer = new DataTransfer();\n    inputElement.files = fileBuffer.files;\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n  }\n\n  /**\n   * fileupload requries a custom _mixinResetFormControl for clearing files\n   */\n  private _mixinResetFormControl() {\n    this._clearAllFiles();\n    this._mixinResetValidity(this.input);\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label for=${this._controlId} id=${this._labelId} class=\"form-label\"> ${this.label} </label>\n    `;\n    return this.label && labelTemplate;\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  protected _renderFeedback() {\n    return html`\n      <div class=\"invalid-feedback-container\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n          <path\n            d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n            fill=\"#B90000\"\n          />\n        </svg>\n        <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n          ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n        </div>\n      </div>\n    `;\n  }\n  render() {\n    const getCheckedIcon = () => {\n      // if (checkedIcon) {\n      //   return html`${unsafeSVG(checkedIcon)}`;\n      // }\n      return html` <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-check-lg\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"\n        />\n      </svg>`;\n    };\n\n    const listItems = this.selectedFiles.map(\n      (file, index) => html`\n        <li key=${index} class=\"file-upload-list-item\">\n          <span>${getCheckedIcon()}</span>\n          <span class=\"filename\">${file.name}</span>\n          <sgds-close-button\n            aria-label=\"remove the file\"\n            @click=${() => this._removeFileHandler(index)}\n          ></sgds-close-button>\n        </li>\n      `\n    );\n\n    return html`\n      <div class=\"file-upload\">\n        <input\n          ${ref(this.inputRef)}\n          type=\"file\"\n          @change=${this._handleChange}\n          ?multiple=${this.multiple}\n          accept=${this.accept}\n          id=${this._controlId}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n        />\n        <div class=\"file-upload-container\">\n          ${this._renderLabel()}\n          <sgds-button variant=\"outline\" ?disabled=${this.disabled} @click=${this._handleClick}>\n            <label for=${this._controlId}><slot></slot></label>\n            <svg\n              slot=\"rightIcon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M3.5625 14.1943C3.71168 14.1943 3.85476 14.2535 3.96025 14.359C4.06574 14.4645 4.125 14.6076 4.125 14.7568V17.5693C4.125 17.8677 4.24353 18.1538 4.4545 18.3648C4.66548 18.5758 4.95163 18.6943 5.25 18.6943H18.75C19.0484 18.6943 19.3345 18.5758 19.5455 18.3648C19.7565 18.1538 19.875 17.8677 19.875 17.5693V14.7568C19.875 14.6076 19.9343 14.4645 20.0398 14.359C20.1452 14.2535 20.2883 14.1943 20.4375 14.1943C20.5867 14.1943 20.7298 14.2535 20.8352 14.359C20.9407 14.4645 21 14.6076 21 14.7568V17.5693C21 18.166 20.7629 18.7383 20.341 19.1603C19.919 19.5822 19.3467 19.8193 18.75 19.8193H5.25C4.65326 19.8193 4.08097 19.5822 3.65901 19.1603C3.23705 18.7383 3 18.166 3 17.5693V14.7568C3 14.6076 3.05926 14.4645 3.16475 14.359C3.27024 14.2535 3.41332 14.1943 3.5625 14.1943Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M11.6018 4.34604C11.654 4.29366 11.7161 4.2521 11.7844 4.22374C11.8528 4.19538 11.926 4.18079 12 4.18079C12.074 4.18079 12.1473 4.19538 12.2156 4.22374C12.2839 4.2521 12.346 4.29366 12.3983 4.34604L15.7733 7.72104C15.8789 7.82666 15.9382 7.96992 15.9382 8.11929C15.9382 8.26866 15.8789 8.41192 15.7733 8.51754C15.6676 8.62316 15.5244 8.6825 15.375 8.6825C15.2256 8.6825 15.0824 8.62316 14.9768 8.51754L12.5625 6.10217V15.9943C12.5625 16.1435 12.5032 16.2866 12.3978 16.392C12.2923 16.4975 12.1492 16.5568 12 16.5568C11.8508 16.5568 11.7077 16.4975 11.6023 16.392C11.4968 16.2866 11.4375 16.1435 11.4375 15.9943V6.10217L9.02326 8.51754C8.97096 8.56984 8.90887 8.61133 8.84054 8.63963C8.77221 8.66793 8.69897 8.6825 8.62501 8.6825C8.55105 8.6825 8.47781 8.66793 8.40948 8.63963C8.34114 8.61133 8.27906 8.56984 8.22676 8.51754C8.17446 8.46524 8.13297 8.40316 8.10467 8.33482C8.07636 8.26649 8.0618 8.19325 8.0618 8.11929C8.0618 8.04533 8.07636 7.97209 8.10467 7.90376C8.13297 7.83543 8.17446 7.77334 8.22676 7.72104L11.6018 4.34604Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </sgds-button>\n          ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}\n        </div>\n        <ul class=\"file-upload-list\">\n          ${listItems}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["fileUploadStyles"],"mappings":"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"}

package/react/components/Footer/footer-item.cjs.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lit = require('lit');
+
+var css_248z = lit.css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-default-color-inverse);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color:var(--sgds-default-color-muted);color:var(--sgds-link-color,--sgds-default-color-muted);text-decoration:none!important;width:fit-content}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-default-color-inverse);color:var(--sgds-link-color-emphasis,--sgds-default-color-inverse)}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
+
+exports["default"] = css_248z;
+//# sourceMappingURL=footer-item.cjs.js.map

package/react/components/Footer/footer-item.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer-item.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Footer/footer-item.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-default-color-inverse);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color:var(--sgds-default-color-muted);color:var(--sgds-link-color,--sgds-default-color-muted);text-decoration:none!important;width:fit-content}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-default-color-inverse);color:var(--sgds-link-color-emphasis,--sgds-default-color-inverse)}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
+
+export { css_248z as default };
+//# sourceMappingURL=footer-item.js.map

package/react/components/Footer/footer-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/react/components/Footer/footer.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`*,:after,:before{box-sizing:border-box}.sgds.footer .footer-header .title{color:var(--sgds-heading-color);font-size:calc(1.275rem + .3vw);font-weight:700;line-height:1.2;margin-bottom:.5rem;margin-top:0}@media (min-width:1200px){.sgds.footer .footer-header .title{font-size:1.5rem}}.sgds.footer .footer-header .title{line-height:1.33}.container-fluid{margin-left:auto;margin-right:auto;padding-left:var(--sgds-gutter-x,1.5rem);padding-right:var(--sgds-gutter-x,1.5rem);width:100%}.row{--sgds-gutter-x:1.5rem;--sgds-gutter-y:0;display:flex;flex-wrap:wrap;margin-left:calc(var(--sgds-gutter-x)*-.5);margin-right:calc(var(--sgds-gutter-x)*-.5);margin-top:calc(var(--sgds-gutter-y)*-1)}.row>*{flex-shrink:0;margin-top:var(--sgds-gutter-y);max-width:100%;padding-left:calc(var(--sgds-gutter-x)*.5);padding-right:calc(var(--sgds-gutter-x)*.5);width:100%}.col{flex:1 0 0%}@media (min-width:768px){.col-md-4{flex:0 0 auto;width:33.33333333%}}@media (min-width:1400px){.col-xxl-2{flex:0 0 auto;width:16.66666667%}}.sgds.footer .footer-contact-links ul,.sgds.footer .footer-items ul,.sgds.footer .footer-mandatory-links ul{margin:0;padding:0}.sgds.footer .footer-contact-links ul li,.sgds.footer .footer-items ul li,.sgds.footer .footer-mandatory-links ul li{font-size:1rem;line-height:1.5;list-style-type:none}.sgds.footer .footer-contact-links ul li+li,.sgds.footer .footer-items ul li+li,.sgds.footer .footer-mandatory-links ul li+li{margin-top:1rem}.sgds.footer .footer-contact-links ul li a,.sgds.footer .footer-items ul li a,.sgds.footer .footer-mandatory-links ul li a{color:#d0d5dd;text-decoration:none}.sgds.footer,.sgds.footer .footer-contact-links ul li a:hover,.sgds.footer .footer-items ul li a:hover,.sgds.footer .footer-mandatory-links ul li a:hover{color:#f7f7f7}.sgds.footer{height:auto}.sgds.footer .footer-top{background-color:#111;padding:3rem 0 1.5rem}.sgds.footer .footer-header{margin-bottom:1.5rem}.sgds.footer .footer-header .title{margin-bottom:1rem}.sgds.footer .footer-header .description{color:#d0d5dd}@media (max-width:575.98px){.sgds.footer .footer-items>div[class*=col]+div[class*=col]{margin-top:2rem}}.sgds.footer .footer-items .title{font-weight:700}.sgds.footer .footer-items .links{margin-top:1rem}.sgds.footer .footer-contact-links{margin-top:2rem}@media (min-width:992px){.sgds.footer .footer-contact-links ul li{display:inline-block}.sgds.footer .footer-contact-links ul li+li{margin-left:1rem}}.sgds.footer .footer-bottom{background-color:#111;padding:1.5rem 0}@media (min-width:992px){.sgds.footer .footer-mandatory-links ul li{display:inline-block}.sgds.footer .footer-mandatory-links ul li+li{margin-left:1rem}}@media (max-width:991.98px){.sgds.footer .footer-copyrights{margin-top:1rem}}.d-flex{display:flex!important}.text-end{text-align:right!important}@media (min-width:992px){.justify-content-lg-end{justify-content:flex-end!important}}`;
+var css_248z = lit.css`.footer{container:footer/inline-size;height:auto}.footer-top{background-color:var(--sgds-default-bg-emphasis);border-bottom:var(--sgds-border-width-1) solid var(--sgds-default-border-color);gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.footer-header,.footer-top{display:flex;flex-direction:column}.footer-header{gap:var(--sgds-gap-xs);margin:var(--sgds-margin-3-xs) 0}slot[name=title]::slotted(*){--sgds-header-color:var(--sgds-default-color-inverse);--sgds-font-size-6:var(--sgds-font-size-5);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-line-height-heading:var(--sgds-line-height-body);color:var(--sgds-header-color,--sgds-default-color-inverse);font-size:var(--sgds-font-size-6,--sgds-font-size-5);font-weight:var(--sgds-font-weight-bold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading,--sgds-line-height-body);margin-bottom:var(--sgds-margin-2-xs,--sgds-margin-none);margin-top:var(--sgds-margin-none)}slot[name=description]::slotted(*){--sgds-font-size-2:var(--sgds-font-size-3);--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-default-color-muted);font-size:var(--sgds-font-size-2,--sgds-font-size-3);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none);margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-mandatory-links ul li a{color:var(--sgds-default-color-muted);text-decoration:none}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-default-color-inverse)}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.footer-bottom{background-color:var(--sgds-default-bg-emphasis);display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.social-media{display:flex;gap:var(--sgds-gap-sm)}slot[name=social-media]::slotted(a){--sgds-link-color:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));--sgds-body-color:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));color:var(--sgds-body-color,--sgds-link-color);display:inline-flex}slot[name=social-media]::slotted(a:hover){--sgds-link-color-emphasis:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));color:var(--sgds-link-color-emphasis)}slot[name=social-media]::slotted(a:focus),slot[name=social-media]::slotted(a:focus-visible){--sgds-link-color-emphasis:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));box-shadow:var(--sgds-box-shadow-focus);color:var(--sgds-link-color-emphasis);outline:0}.footer-mandatory-links{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl) var(--sgds-gap-lg);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs) var(--sgds-gap-xl)}.footer-copyrights{color:var(--sgds-default-color-muted)}@container footer (max-width: 711px){.footer-bottom,.footer-top{padding:var(--sgds-padding-lg)}.footer-top{gap:var(--sgds-gap-lg)}.footer-mandatory-links,.footer-mandatory-links ul{flex-direction:column}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=footer.cjs.js.map

package/react/components/Footer/footer.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`*,:after,:before{box-sizing:border-box}.sgds.footer .footer-header .title{color:var(--sgds-heading-color);font-size:calc(1.275rem + .3vw);font-weight:700;line-height:1.2;margin-bottom:.5rem;margin-top:0}@media (min-width:1200px){.sgds.footer .footer-header .title{font-size:1.5rem}}.sgds.footer .footer-header .title{line-height:1.33}.container-fluid{margin-left:auto;margin-right:auto;padding-left:var(--sgds-gutter-x,1.5rem);padding-right:var(--sgds-gutter-x,1.5rem);width:100%}.row{--sgds-gutter-x:1.5rem;--sgds-gutter-y:0;display:flex;flex-wrap:wrap;margin-left:calc(var(--sgds-gutter-x)*-.5);margin-right:calc(var(--sgds-gutter-x)*-.5);margin-top:calc(var(--sgds-gutter-y)*-1)}.row>*{flex-shrink:0;margin-top:var(--sgds-gutter-y);max-width:100%;padding-left:calc(var(--sgds-gutter-x)*.5);padding-right:calc(var(--sgds-gutter-x)*.5);width:100%}.col{flex:1 0 0%}@media (min-width:768px){.col-md-4{flex:0 0 auto;width:33.33333333%}}@media (min-width:1400px){.col-xxl-2{flex:0 0 auto;width:16.66666667%}}.sgds.footer .footer-contact-links ul,.sgds.footer .footer-items ul,.sgds.footer .footer-mandatory-links ul{margin:0;padding:0}.sgds.footer .footer-contact-links ul li,.sgds.footer .footer-items ul li,.sgds.footer .footer-mandatory-links ul li{font-size:1rem;line-height:1.5;list-style-type:none}.sgds.footer .footer-contact-links ul li+li,.sgds.footer .footer-items ul li+li,.sgds.footer .footer-mandatory-links ul li+li{margin-top:1rem}.sgds.footer .footer-contact-links ul li a,.sgds.footer .footer-items ul li a,.sgds.footer .footer-mandatory-links ul li a{color:#d0d5dd;text-decoration:none}.sgds.footer,.sgds.footer .footer-contact-links ul li a:hover,.sgds.footer .footer-items ul li a:hover,.sgds.footer .footer-mandatory-links ul li a:hover{color:#f7f7f7}.sgds.footer{height:auto}.sgds.footer .footer-top{background-color:#111;padding:3rem 0 1.5rem}.sgds.footer .footer-header{margin-bottom:1.5rem}.sgds.footer .footer-header .title{margin-bottom:1rem}.sgds.footer .footer-header .description{color:#d0d5dd}@media (max-width:575.98px){.sgds.footer .footer-items>div[class*=col]+div[class*=col]{margin-top:2rem}}.sgds.footer .footer-items .title{font-weight:700}.sgds.footer .footer-items .links{margin-top:1rem}.sgds.footer .footer-contact-links{margin-top:2rem}@media (min-width:992px){.sgds.footer .footer-contact-links ul li{display:inline-block}.sgds.footer .footer-contact-links ul li+li{margin-left:1rem}}.sgds.footer .footer-bottom{background-color:#111;padding:1.5rem 0}@media (min-width:992px){.sgds.footer .footer-mandatory-links ul li{display:inline-block}.sgds.footer .footer-mandatory-links ul li+li{margin-left:1rem}}@media (max-width:991.98px){.sgds.footer .footer-copyrights{margin-top:1rem}}.d-flex{display:flex!important}.text-end{text-align:right!important}@media (min-width:992px){.justify-content-lg-end{justify-content:flex-end!important}}`;
+var css_248z = css`.footer{container:footer/inline-size;height:auto}.footer-top{background-color:var(--sgds-default-bg-emphasis);border-bottom:var(--sgds-border-width-1) solid var(--sgds-default-border-color);gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.footer-header,.footer-top{display:flex;flex-direction:column}.footer-header{gap:var(--sgds-gap-xs);margin:var(--sgds-margin-3-xs) 0}slot[name=title]::slotted(*){--sgds-header-color:var(--sgds-default-color-inverse);--sgds-font-size-6:var(--sgds-font-size-5);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-line-height-heading:var(--sgds-line-height-body);color:var(--sgds-header-color,--sgds-default-color-inverse);font-size:var(--sgds-font-size-6,--sgds-font-size-5);font-weight:var(--sgds-font-weight-bold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading,--sgds-line-height-body);margin-bottom:var(--sgds-margin-2-xs,--sgds-margin-none);margin-top:var(--sgds-margin-none)}slot[name=description]::slotted(*){--sgds-font-size-2:var(--sgds-font-size-3);--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-default-color-muted);font-size:var(--sgds-font-size-2,--sgds-font-size-3);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none);margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-mandatory-links ul li a{color:var(--sgds-default-color-muted);text-decoration:none}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-default-color-inverse)}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.footer-bottom{background-color:var(--sgds-default-bg-emphasis);display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.social-media{display:flex;gap:var(--sgds-gap-sm)}slot[name=social-media]::slotted(a){--sgds-link-color:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));--sgds-body-color:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));color:var(--sgds-body-color,--sgds-link-color);display:inline-flex}slot[name=social-media]::slotted(a:hover){--sgds-link-color-emphasis:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));color:var(--sgds-link-color-emphasis)}slot[name=social-media]::slotted(a:focus),slot[name=social-media]::slotted(a:focus-visible){--sgds-link-color-emphasis:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));box-shadow:var(--sgds-box-shadow-focus);color:var(--sgds-link-color-emphasis);outline:0}.footer-mandatory-links{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl) var(--sgds-gap-lg);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs) var(--sgds-gap-xl)}.footer-copyrights{color:var(--sgds-default-color-muted)}@container footer (max-width: 711px){.footer-bottom,.footer-top{padding:var(--sgds-padding-lg)}.footer-top{gap:var(--sgds-gap-lg)}.footer-mandatory-links,.footer-mandatory-links ul{flex-direction:column}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=footer.js.map

package/react/components/Footer/sgds-footer-item.cjs.js

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lit = require('lit');
+var sgdsElement = require('../../base/sgds-element.cjs.js');
+var footerItem = require('./footer-item.cjs.js');
+
+/**
+ * @summary The footer item component organizes links under a clear, descriptive title within the footer. It helps users easily navigate to related resources or information, ensuring clarity and accessibility.
+ *
+ * @slot default - The slot for the list of link items
+ * @slot title - The slot for the title of the list of items
+ *
+ */
+class SgdsFooterItem extends sgdsElement["default"] {
+    render() {
+        return lit.html `
+      <div class="footer-item">
+        <slot name="title"></slot>
+        <div class="links">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsFooterItem.styles = [...sgdsElement["default"].styles, footerItem["default"]];
+
+exports.SgdsFooterItem = SgdsFooterItem;
+exports["default"] = SgdsFooterItem;
+//# sourceMappingURL=sgds-footer-item.cjs.js.map

package/react/components/Footer/sgds-footer-item.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-footer-item.cjs.js","sources":["../../../../src/components/Footer/sgds-footer-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerLinkStyle from \"./footer-item.css\";\n\n/**\n * @summary The footer item component organizes links under a clear, descriptive title within the footer. It helps users easily navigate to related resources or information, ensuring clarity and accessibility.\n *\n * @slot default - The slot for the list of link items\n * @slot title - The slot for the title of the list of items\n *\n */\nexport class SgdsFooterItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerLinkStyle];\n\n  render() {\n    return html`\n      <div class=\"footer-item\">\n        <slot name=\"title\"></slot>\n        <div class=\"links\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFooterItem;\n"],"names":["SgdsElement","html","footerLinkStyle"],"mappings":";;;;;;;;;AAIA;;;;;;AAMG;AACG,MAAO,cAAe,SAAQA,sBAAW,CAAA;IAG7C,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;;;;;;KAOV,CAAC;KACH;;AAXM,cAAM,CAAA,MAAA,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,qBAAe,CAAC;;;;;"}

package/react/components/Footer/sgds-footer-item.js

@@ -0,0 +1,28 @@
+'use client';
+import { html } from 'lit';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './footer-item.js';
+
+/**
+ * @summary The footer item component organizes links under a clear, descriptive title within the footer. It helps users easily navigate to related resources or information, ensuring clarity and accessibility.
+ *
+ * @slot default - The slot for the list of link items
+ * @slot title - The slot for the title of the list of items
+ *
+ */
+class SgdsFooterItem extends SgdsElement {
+    render() {
+        return html `
+      <div class="footer-item">
+        <slot name="title"></slot>
+        <div class="links">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsFooterItem.styles = [...SgdsElement.styles, css_248z];
+
+export { SgdsFooterItem, SgdsFooterItem as default };
+//# sourceMappingURL=sgds-footer-item.js.map

package/react/components/Footer/sgds-footer-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-footer-item.js","sources":["../../../../src/components/Footer/sgds-footer-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerLinkStyle from \"./footer-item.css\";\n\n/**\n * @summary The footer item component organizes links under a clear, descriptive title within the footer. It helps users easily navigate to related resources or information, ensuring clarity and accessibility.\n *\n * @slot default - The slot for the list of link items\n * @slot title - The slot for the title of the list of items\n *\n */\nexport class SgdsFooterItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerLinkStyle];\n\n  render() {\n    return html`\n      <div class=\"footer-item\">\n        <slot name=\"title\"></slot>\n        <div class=\"links\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFooterItem;\n"],"names":["footerLinkStyle"],"mappings":";;;;;AAIA;;;;;;AAMG;AACG,MAAO,cAAe,SAAQ,WAAW,CAAA;IAG7C,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;KAOV,CAAC;KACH;;AAXM,cAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAe,CAAC;;;;"}