@ostack.tech/ui-kform 0.1.0

package/dist/types/utils/useFormSaver.d.ts

@@ -0,0 +1,96 @@
+import { AbsolutePath } from "@ostack.tech/kform";
+import { type FileSystemHandle, type WellKnownDirectory } from "browser-fs-access";
+import * as React from "react";
+/**
+ * Options that can be passed to the {@link useFormSaver} hook, or to its
+ * resulting `save`/`saveAs` functions.
+ */
+export interface FormSaverOptions<T = unknown> {
+    /**
+     * When set, if modern file system APIs are available and the form has been
+     * previously loaded or saved, then the file will be written over the
+     * previously saved/loaded file.
+     *
+     * @default false
+     */
+    overwrite?: boolean;
+    /**
+     * Function used to encode the form, given its value.
+     *
+     * Note that when returning a string, the string is converted into a `Blob`
+     * using the first provided mime type in `mimeTypes` as its type, _i.e._ it is
+     * converted as `new Blob([encodedValue], { type: mimeTypes?.[0] })`.
+     *
+     * @param formValue Value of the form.
+     * @returns Encoded form value as a string, blob, response, or a promise to
+     *   either type.
+     */
+    encode?: (formValue: T) => string | Blob | Response | PromiseLike<string | Blob | Response>;
+    /**
+     * Path of the value being saved.
+     *
+     * @default AbsolutePath.ROOT
+     */
+    path?: string | AbsolutePath;
+    /**
+     * Suggested file name.
+     *
+     * A function may be provided which will be called with the form value right
+     * before invoking the save.
+     */
+    fileName?: string | ((formValue: T) => string | PromiseLike<string>);
+    /** Acceptable file extensions. */
+    extensions?: string[];
+    /** Acceptable MIME types. */
+    mimeTypes?: string[];
+    /** Suggested file description. */
+    description?: string;
+    /** Directory to present when starting to save. */
+    startIn?: WellKnownDirectory | FileSystemHandle;
+    /** Excludes the "accept all" option. */
+    excludeAcceptAllOption?: boolean;
+    /**
+     * By specifying an ID, the user agent can remember different directories for
+     * different IDs.
+     */
+    id?: string;
+    /**
+     * Whether to set the form as pristine when saving.
+     *
+     * @default true
+     */
+    setPristineOnSave?: boolean;
+    /**
+     * Message to show in a toast when successfully saving the form to a file.
+     *
+     * @param fileHandle Handle to the saved file.
+     * @returns Message to show in a toast.
+     */
+    successMessage?: (fileHandle: FileSystemFileHandle) => React.ReactNode;
+    /**
+     * Message to show in a toast when an error occurs while saving the form to a
+     * file.
+     *
+     * @param fileHandle Handle of the file over which the save was attempted, or
+     *   `null` if no such file exists.
+     * @param error Error that occurred.
+     * @returns Message to show in a toast.
+     */
+    errorMessage?: (fileHandle: FileSystemFileHandle | null, error: unknown) => React.ReactNode;
+}
+/** Result of the {@link useFormSaver} hook. */
+export interface FormSaverResult<T> {
+    /**
+     * Function used to save the form.
+     *
+     * @param options Options used for saving the form.
+     * @returns Promise which resolves once the form has been saved.
+     */
+    save: (options?: FormSaverOptions<T>) => Promise<void>;
+    /** Whether the browser supports modern file system APIs used for saving. */
+    supportsFileSystemAPIs: boolean;
+}
+/** Hook exposing functions used to save the form to a file. */
+export declare function useFormSaver<T = unknown>({ overwrite, path, encode, fileName, extensions, description, mimeTypes, startIn, excludeAcceptAllOption, id, setPristineOnSave, successMessage, errorMessage, }?: FormSaverOptions<T>): FormSaverResult<T>;
+/** Hook exposing whether the form is currently being saved. */
+export declare function useFormIsSaving(): any;

package/dist/types/utils/useFormValidator.d.ts

@@ -0,0 +1,28 @@
+/** Result of the {@link useFormValidator} hook. */
+export interface FormValidatorResult {
+    /**
+     * Function used to validate the form.
+     *
+     * @returns Promise which resolves once the form has been validated.
+     */
+    validate: () => Promise<void>;
+}
+/** Hook exposing a function used to validate the form. */
+export declare function useFormValidator(): FormValidatorResult;
+/** Result of the {@link useFormIsValidating} hook. */
+export interface FormIsValidatingResult {
+    /**
+     * Whether form is being validated automatically (due to validating mode being
+     * set to `"auto"`).
+     */
+    validatingAutomatically: boolean;
+    /**
+     * Whether form is being validated manually (due to an explicit `validate`
+     * call).
+     */
+    validatingManually: boolean;
+    /** Whether form is being validated (either automatically or manually). */
+    validating: boolean;
+}
+/** Hook exposing whether the form is currently being validated. */
+export declare function useFormIsValidating(): FormIsValidatingResult;

package/dist/types/utils/useRegisterControl.d.ts

@@ -0,0 +1,24 @@
+import { type DisplayStatus, type SealedValidationIssue } from "@ostack.tech/kform";
+import { type Controller } from "@ostack.tech/kform-react";
+import * as React from "react";
+/** Options when registering the control. */
+export interface UseRegisterControlOptions<T> {
+    controller: Controller<T>;
+    issuesPanelLabel?: React.ReactNode;
+    ariaLabel?: string;
+    issuesPanelLabelSuffix?: React.ReactNode;
+    preventAutoFocus?: boolean;
+    apiRef?: React.Ref<Controller<T> | undefined>;
+}
+/** Result of registering the control. */
+export interface UseRegisterControlResult<TElem> {
+    displayLoading: boolean;
+    displayDisabled: boolean;
+    displayReadOnly: boolean;
+    displayStatusToDisplay: DisplayStatus | undefined;
+    issuesToDisplay: SealedValidationIssue[];
+    autofocusRef: React.MutableRefObject<TElem | null>;
+    handleFocus: (event: React.FocusEvent) => void;
+}
+/** Hook used to register a control within the form app. */
+export declare function useRegisterControl<T, TElem extends HTMLElement = HTMLElement>({ controller, issuesPanelLabel, ariaLabel, issuesPanelLabelSuffix, preventAutoFocus, apiRef, }: UseRegisterControlOptions<T>): UseRegisterControlResult<TElem>;

package/dist/types/utils/useReportValidationFailures.d.ts

@@ -0,0 +1,5 @@
+import { type LocatedValidationInfo } from "@ostack.tech/kform-react";
+type ReportValidationFailuresInfo = Pick<LocatedValidationInfo, "path" | "issues">;
+/** Hook used to report validation failures that occur. */
+export declare function useReportValidationFailures(info?: ReportValidationFailuresInfo[]): void;
+export {};

package/dist/types/utils/useTemporalStringTransformer.d.ts

@@ -0,0 +1,21 @@
+import { type Schema } from "@ostack.tech/kform";
+import { type Temporal } from "@ostack.tech/kform-react";
+import { type DateFormatterOptions, type DateParserOptions, type DateTransformerOptions } from "@ostack.tech/ui";
+/** Temporal string transformer. */
+export interface TemporalStringTransformer {
+    /**
+     * Function used to parse a formatted date as exposed by a date input as a
+     * temporal string.
+     */
+    parse: <T extends Temporal | null = Temporal | null>(formattedDate: string, schema: Schema<T>, options?: DateParserOptions) => string;
+    /**
+     * Function used to format a temporal string as a string accepted by a date
+     * input.
+     */
+    format: <T extends Temporal | null = Temporal | null>(temporalString: string, schema: Schema<T>, options?: DateFormatterOptions) => string;
+}
+/**
+ * Hook exposing functions to transform a temporal string value from/into a
+ * string representation of a date accepted by a date input.
+ */
+export declare function useTemporalStringTransformer(dateTransformerOptions?: DateTransformerOptions): TemporalStringTransformer;

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@ostack.tech/ui-kform",
+  "description": "Integration of ostack/UI with ostack/KForm.",
+  "version": "0.1.0",
+  "homepage": "https://ui.ostack.tech/",
+  "author": {
+    "name": "Opensoft",
+    "url": "https://opensoft.pt/en/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://bitbucket.org/opensoftgitrepo/ostack-ui.git",
+    "directory": "packages/ui-kform/"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=10"
+  },
+  "main": "dist/ostack-ui-kform.cjs",
+  "types": "dist/types/index.d.ts",
+  "sass": "scss/index.scss",
+  "style": "dist/ostack-ui-kform.css",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/ostack-ui-kform.js",
+      "require": "./dist/ostack-ui-kform.cjs"
+    },
+    "./css": "./dist/ostack-ui-kform.css",
+    "./scss": "./scss/index.scss",
+    "./scss/*": "./scss/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "scss"
+  ],
+  "scripts": {
+    "clean": "rimraf dist scss",
+    "build": "npm run build:js && npm run build:css",
+    "build:js": "vite build && tsc -b tsconfig.build.json",
+    "build:css": "npm run copy-scss && sass -I ../../node_modules scss/index.scss dist/ostack-ui-kform.css",
+    "copy-scss": "cpy 'src/**/*.scss' '!src/**/*.stories.scss' scss"
+  },
+  "dependencies": {
+    "browser-fs-access": "^0.38.0"
+  },
+  "peerDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.0 || ^7.0.0",
+    "@fortawesome/free-regular-svg-icons": "^6.2.0 || ^7.0.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0 || ^7.0.0",
+    "@ostack.tech/kform": "~0.31.0",
+    "@ostack.tech/kform-react": "~0.31.0",
+    "@ostack.tech/ui": "~0.1.0",
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^18.0.0 || ^19.0.0",
+    "date-fns": "^4.1.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "zustand": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  }
+}

package/scss/_utils.scss

@@ -0,0 +1,6 @@
+@forward "scss/base-variables";
+
+// Component variables
+@forward "components/Annexes/Annexes-variables";
+@forward "components/FormPages/FormPages-variables";
+@forward "components/IssuesPanel/IssuesPanel-variables";

package/scss/components/Annexes/_Annexes-variables.scss

@@ -0,0 +1,17 @@
+@use "@ostack.tech/ui/scss/utils" as ostack-ui;
+
+// Manager
+$annexes-manager-min-width: 200px !default;
+
+// Tab issues
+$annexes-tab-issues-popover-button-icon-border-width: 1px !default;
+$annexes-tab-issues-popover-button-padding: calc(
+  (
+    (
+        ostack-ui.$icon-button-md-min-size -
+          ostack-ui.$icon-button-md-font-size -
+          $annexes-tab-issues-popover-button-icon-border-width * 2
+      ) /
+      2
+  )
+);

package/scss/components/Annexes/_Annexes.scss

@@ -0,0 +1,234 @@
+@use "sass:color";
+@use "@ostack.tech/ui/scss/utils" as ostack-ui;
+@use "Annexes-variables" as *;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}annexes {
+  $tab-height: 44px;
+
+  display: flex;
+  flex-direction: column;
+
+  &__manager {
+    min-width: $annexes-manager-min-width;
+    display: flex;
+    align-items: flex-end;
+    flex: 1 1 auto;
+
+    &:not(:last-child) {
+      margin-right: ostack-ui.spacing(2);
+
+      @include ostack-ui.media-breakpoint-up(sm) {
+        margin-right: ostack-ui.spacing(4);
+      }
+    }
+  }
+
+  &__menu-container {
+    margin-bottom: ostack-ui.$tabs-tab-list-annexes-margin-bottom;
+    padding-right: ostack-ui.spacing(2);
+    box-shadow: ostack-ui.$tabs-tab-list-annexes-box-shadow;
+
+    @include ostack-ui.media-breakpoint-up(sm) {
+      padding-right: ostack-ui.spacing(4);
+    }
+  }
+
+  &__issues-popover-container {
+    margin-left: ostack-ui.spacing(-4);
+    margin-right: ostack-ui.spacing(7);
+    padding-top: ostack-ui.spacing(0.5);
+    height: $tab-height;
+  }
+
+  &__tab-list-container {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &__menu-trigger {
+    height: $tab-height;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    color: var(--#{ostack-ui.$prefix}primary-9) !important;
+
+    &[data-state="open"] {
+      border-color: ostack-ui.$neutral-7;
+      border-bottom-color: transparent;
+      background-color: var(--#{ostack-ui.$prefix}background-color) !important;
+      position: relative;
+      z-index: ostack-ui.$z-index-dropdown + 1;
+    }
+  }
+
+  &__menu {
+    width: 270px;
+
+    &[data-align="start"][data-side="bottom"] {
+      border-top-left-radius: 0;
+    }
+
+    &[data-align="start"][data-side="top"] {
+      border-bottom-left-radius: 0;
+    }
+
+    @include ostack-ui.media-breakpoint-down(sm) {
+      min-width: 100vw;
+      margin-left: -5px; // XXX: Override Radix's hard-coded collision margin
+      border-radius: 0;
+      border-right-width: 0;
+    }
+  }
+
+  &__menu-annex[data-status] {
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: calc(
+        (ostack-ui.$menu-padding-x + ostack-ui.$menu-item-margin-x) * -1
+      );
+      height: 100%;
+      width: 3px;
+      border-radius: 0 var(--#{ostack-ui.$prefix}border-radius-sm)
+        var(--#{ostack-ui.$prefix}border-radius-sm) 0;
+      background-color: var(--#{ostack-ui.$prefix}accent-9);
+    }
+  }
+
+  &__menu-annex-action {
+    position: relative;
+    min-height: 40px;
+  }
+
+  &__menu-annex-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__menu-annex-content-container {
+    overflow: hidden;
+  }
+
+  &__menu-annex-title {
+    font-weight: ostack-ui.$font-weight-bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__menu-annex-subtitle {
+    margin-left: ostack-ui.spacing(2);
+    font-weight: ostack-ui.$font-weight-normal;
+    font-size: ostack-ui.$font-size-xs;
+    line-height: ostack-ui.$font-size-xs;
+    text-transform: none;
+  }
+
+  &__menu-annex-description {
+    font-weight: ostack-ui.$font-weight-normal;
+    text-transform: none;
+  }
+
+  &__menu-annex-remove {
+    margin-left: ostack-ui.spacing(2);
+    $min-size: 28px;
+    min-height: $min-size;
+    min-width: $min-size;
+  }
+
+  &__menu-new-annex-content {
+    display: flex;
+    width: 100%;
+  }
+
+  &__menu-new-annex-title {
+    flex: 1;
+    font-weight: ostack-ui.$font-weight-bold;
+    color: ostack-ui.$primary-9;
+  }
+
+  &__menu-new-annex-description {
+    flex: 2;
+    margin-left: ostack-ui.spacing(2);
+    font-weight: ostack-ui.$font-weight-normal;
+    text-transform: none;
+  }
+
+  &__tab-inner {
+    flex-direction: column;
+    height: 100%;
+    min-height: $tab-height;
+  }
+
+  &__tab-title,
+  &__tab-subtitle {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__tab-subtitle {
+    font-weight: ostack-ui.$font-weight-normal;
+    font-size: ostack-ui.$font-size-xs;
+    line-height: ostack-ui.$line-height-xs;
+  }
+
+  // Tab issues
+  &__tab[data-has-issues] &__tab-inner {
+    padding-right: calc(
+      ostack-ui.$tabs-tab-inner-annexes-padding-x * 2 +
+        ostack-ui.$icon-button-md-font-size +
+        $annexes-tab-issues-popover-button-padding
+    );
+  }
+
+  &__tab-issues-popover-button-container {
+    z-index: calc(ostack-ui.$tabs-tab-focus-z-index + 1);
+    margin-left: calc(
+      ostack-ui.$icon-button-md-min-size *
+        -1 - var(--#{ostack-ui.$prefix}tabs-tab-list-gap-x) -
+        $annexes-tab-issues-popover-button-padding / 2
+    );
+    padding-right: calc(
+      var(--#{ostack-ui.$prefix}tabs-tab-list-gap-x) +
+        $annexes-tab-issues-popover-button-padding / 2
+    );
+  }
+
+  &__tab-issues-popover-button .#{ostack-ui.$prefix}icon {
+    // Border around the icon
+    filter: drop-shadow(
+        /* Top */ 0
+          calc($annexes-tab-issues-popover-button-icon-border-width * -1) 0
+          var(--#{ostack-ui.$prefix}background-color)
+      )
+      drop-shadow(
+        /* Right */ $annexes-tab-issues-popover-button-icon-border-width 0 0
+          var(--#{ostack-ui.$prefix}background-color)
+      )
+      drop-shadow(
+        /* Bottom */ 0 $annexes-tab-issues-popover-button-icon-border-width 0
+          var(--#{ostack-ui.$prefix}background-color)
+      )
+      drop-shadow(
+        /* Left */
+          calc($annexes-tab-issues-popover-button-icon-border-width * -1) 0 0
+          var(--#{ostack-ui.$prefix}background-color)
+      );
+  }
+
+  &__annex {
+    min-height: calc(
+      var(--#{$prefix}form-app-min-height) - var(
+          --#{$prefix}top-bar-height
+        ) - var(--#{$prefix}bottom-panel-height)
+    );
+  }
+}

package/scss/components/FileControl/_FileControl.scss

@@ -0,0 +1,52 @@
+@use "sass:map";
+@use "@ostack.tech/ui/scss/utils" as ostack-ui;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}file-control {
+  &__viewer-dialog {
+    width: fit-content;
+    min-width: 0;
+    max-width: min(
+      calc(100dvw - ostack-ui.spacing(14)),
+      ostack-ui.$dialog-xl-width
+    );
+  }
+
+  &__viewer-download {
+    margin-left: ostack-ui.spacing(4);
+  }
+
+  &__viewer-dialog-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__viewer-dialog-body {
+    padding: 0 !important;
+  }
+
+  &__viewer-object {
+    $max-height: calc(100dvh - 50px - 64px);
+
+    display: flex;
+    justify-content: center;
+    max-width: 100%;
+    width: auto;
+    max-height: $max-height;
+    margin: 0 auto;
+
+    border-bottom-left-radius: var(--#{ostack-ui.$prefix}border-radius-xs);
+    border-bottom-right-radius: var(--#{ostack-ui.$prefix}border-radius-xs);
+    background-color: var(--#{ostack-ui.$prefix}background-color);
+
+    &:not([type^="image/"]):not([type^="video/"]):not([type^="audio/"]) {
+      width: 100vw;
+      height: $max-height;
+    }
+  }
+
+  &__viewer-fallback {
+    margin: ostack-ui.spacing(3) ostack-ui.spacing(4);
+  }
+}

package/scss/components/FormApp/_FormApp.scss

@@ -0,0 +1,67 @@
+@use "@ostack.tech/ui/scss/utils" as ostack-ui;
+@use "@ostack.tech/ui/scss/components/Spinner/Spinner";
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}form-app {
+  $overlay: ".#{ostack-ui.$prefix}overlay";
+
+  $default-min-height: 100dvh;
+
+  position: relative;
+  min-height: var(--#{$prefix}form-app-min-height);
+  margin-bottom: 0; // Remove default `form` margin
+  background-color: var(--#{ostack-ui.$prefix}background-color);
+
+  @include ostack-ui.responsive-values(
+    --#{$prefix}form-app,
+    (
+      min-height: $default-min-height,
+    )
+  );
+
+  // Focus style around form
+  &:focus-visible {
+    outline: none;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    pointer-events: none;
+    z-index: ostack-ui.$z-index-overlay;
+
+    @include ostack-ui.accessible-transition(outline-color);
+  }
+
+  &:focus-visible::after {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    outline: 2px solid ostack-ui.$primary-8;
+    outline-offset: -3px;
+  }
+
+  // When the form app is within an overlay (e.g. being rendered as a dialog),
+  // we default the min-height to auto
+  #{$overlay} & {
+    @include ostack-ui.declare-var(--#{$prefix}form-app-min-height, auto);
+  }
+
+  // Manually set this class on the form app's container to display a spinner
+  // while the app is loading
+  &__container:empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: ostack-ui.spacing(30) ostack-ui.spacing(10);
+
+    &::after {
+      content: "";
+      color: ostack-ui.$primary-9;
+      font-size: ostack-ui.$font-size-6xl;
+
+      @include ostack-ui.spinner;
+    }
+  }
+}

package/scss/components/FormPages/_FormPages-variables.scss

@@ -0,0 +1,62 @@
+@use "@ostack.tech/ui/scss/utils" as ostack-ui;
+
+// Sidebar
+$form-pages-sidebar-width: 220px !default;
+$form-pages-sidebar-width-xl: 300px !default;
+$form-pages-sidebar-border-radius: null !default;
+$form-pages-sidebar-background-color: var(
+  --#{ostack-ui.$prefix}primary-a3
+) !default;
+$form-pages-sidebar-border-width: 1px !default;
+$form-pages-sidebar-border-color: var(--#{ostack-ui.$prefix}primary-4) !default;
+$form-pages-sidebar-z-index: calc(
+  var(--#{ostack-ui.$prefix}z-index-sticky) + 1
+) !default;
+
+// Sidebar item code
+$form-pages-sidebar-item-code-min-size: 20px;
+$form-pages-sidebar-item-code-margin-x: ostack-ui.spacing(2) !default;
+$form-pages-sidebar-item-code-padding: ostack-ui.spacing(0.5) !default;
+$form-pages-sidebar-item-code-padding: ostack-ui.spacing(0.5) !default;
+$form-pages-sidebar-item-code-border-radius: ostack-ui.$control-code-border-radius !default;
+$form-pages-sidebar-item-code-font-size: var(
+  --#{ostack-ui.$prefix}font-size-xs
+) !default;
+$form-pages-sidebar-item-code-line-height: var(
+  --#{ostack-ui.$prefix}line-height-xs
+) !default;
+$form-pages-sidebar-item-code-font-weight: ostack-ui.$font-weight-bold !default;
+$form-pages-sidebar-item-code-background-color: var(
+  --#{ostack-ui.$prefix}primary-2
+) !default;
+$form-pages-sidebar-item-code-color: var(
+  --#{ostack-ui.$prefix}primary-9
+) !default;
+
+// Sidebar item code - Selected
+$form-pages-sidebar-item-code-selected-background-color: rgba(
+  255,
+  255,
+  255,
+  0.25
+) !default;
+$form-pages-sidebar-item-code-selected-color: var(
+  --#{ostack-ui.$prefix}primary-contrast
+) !default;
+
+// Sidebar item code - Status
+$form-pages-sidebar-item-code-status-background-color: var(
+  --#{ostack-ui.$prefix}accent-9
+) !default;
+$form-pages-sidebar-item-code-status-color: var(
+  --#{ostack-ui.$prefix}accent-contrast
+) !default;
+
+// Select
+$form-pages-select-z-index: calc(
+  var(--#{ostack-ui.$prefix}z-index-sticky) + 2
+) !default;
+$form-pages-select-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !default;
+$form-pages-select-menu-background-color: var(
+  --#{ostack-ui.$prefix}primary-2
+) !default;