@intility/bifrost-react-select 4.0.0 → 4.0.1

package/CHANGELOG.md

@@ -1,17 +1,25 @@
 # @intility/bifrost-react-select
 
+## 4.0.1
+
+### Patch Changes
+
+- 611f82ca: Removed unnecessary files from npm package output.
+- 63f4c54d: fix: Select menu background color is no longer transparent for grouped options.
+- Updated dependencies [611f82ca]
+  - @intility/bifrost-react@4.0.1
+
 ## 4.0.0 (first release)
 
 ### Minor Changes
 
 - 62b02461: Include JSDoc comments in typescript definition output
-- 6b355639: New styling for inputs, now always outlined. Removed `variant` prop from `<Input>`.
+- 6b355639: New styling for inputs, now always outlined.
 
 ### Patch Changes
 
 - 217c8741: Named export for Select and DatePicker
-- a903f282: fix: export typescript types used in react components
+- a903f282: Fix: export typescript types used in react components
 - e410a910: New base color values for light mode #711
-- ea861dbc: Update lint config, add displayName for components
-- 165904af: use deep imports from @intility/bifrost-react
-- fdc6caee: fix: select dropdown background should no longer bleed outside border radius when opened
+- 165904af: Use deep imports from @intility/bifrost-react
+- fdc6caee: Fix: select dropdown background should no longer bleed outside border radius when opened

package/dist/Select.js

@@ -82,6 +82,7 @@ export const selectStyles = {
         }),
     menuList: (provided)=>({
             ...provided,
+            backgroundColor: "var(--bfc-base-3)",
             padding: 0,
             border: "1px solid var(--bfc-theme-3)",
             borderTop: "none",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intility/bifrost-react-select",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "React select component for Intility's design system, Bifrost.",
   "type": "module",
   "main": "dist/Select.js",
@@ -41,8 +41,13 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@intility/bifrost-react": "4.0.0",
+    "@intility/bifrost-react": "4.0.1",
     "classnames": "^2.2.6",
     "react-select": "^5.7.7"
-  }
+  },
+  "files": [
+    "CHANGELOG.md",
+    "dist/**/*",
+    "!dist/**/*.test.*"
+  ]
 }

package/.swcrc

@@ -1,16 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/swcrc",
-  "jsc": {
-    "parser": {
-      "syntax": "typescript",
-      "tsx": true
-    },
-    "transform": {
-      "react": {
-        "runtime": "automatic"
-      }
-    },
-    "target": "es2022"
-  },
-  "exclude": ["\\.test\\.", "\\.d\\.ts$"]
-}

package/dist/Select.test.d.ts

@@ -1 +0,0 @@
-export {};

package/src/Select.test.tsx

@@ -1,119 +0,0 @@
-import { render } from "@testing-library/react";
-
-import Select from "./Select.js";
-
-let getByTestId, getByText, queryByText, element, customInput, rerender;
-
-beforeEach(() => {
-  const options = [
-    { value: "Norway", label: "Norway" },
-    { value: "Sweden", label: "Sweden" },
-    { value: "Denmark", label: "Denmark" },
-    { value: "Germany", label: "Germany" },
-  ];
-
-  const select = render(
-    <Select
-      label="Select country"
-      placeholder="Select country here"
-      options={options}
-    />,
-  );
-
-  getByTestId = select.getByTestId;
-  getByText = select.getByText;
-  queryByText = select.queryByText;
-  element = getByTestId("bf-select-container");
-  customInput = getByTestId("bf-select-input");
-  rerender = select.rerender;
-  // debug = select.debug
-});
-
-describe("select component", () => {
-  it("renders select component", () => {
-    expect(element);
-  });
-});
-
-describe("select with required label prop", () => {
-  it("renders label text", () => {
-    expect(getByText("Select country"));
-  });
-});
-
-describe("select with className and style", () => {
-  it("renders with custom classname and custom styles", () => {
-    rerender(
-      <Select
-        label="Custom classname"
-        className="custom-classname"
-        style={{ width: "100%" }}
-      />,
-    );
-
-    expect(element).toHaveClass("custom-classname");
-    expect(element).toHaveStyle("width: 100%");
-  });
-});
-
-describe("select with description prop", () => {
-  it("renders with text as description", () => {
-    rerender(
-      <Select label="Select country" description="Please select one country" />,
-    );
-
-    expect(getByText("Please select one country"));
-  });
-});
-
-describe("select with state and feedback props", () => {
-  it("renders with alert state ", () => {
-    rerender(
-      <Select label="Select country" state="alert" feedback="Missing value " />,
-    );
-
-    expect(element).toHaveClass("bf-select-alert");
-  });
-
-  it("renders with feedback text", () => {
-    rerender(
-      <Select label="Select country" state="alert" feedback="Missing value " />,
-    );
-    const feedback = getByText("Missing value");
-
-    expect(feedback);
-    expect(feedback).toHaveClass("bf-label-feedback");
-    expect(feedback.tagName.toLowerCase()).toBe("div");
-  });
-});
-
-describe("select disabled", () => {
-  it("renders as disabled", () => {
-    rerender(<Select label="Disabled" isDisabled />);
-    // can only test classname, hence isDisabled is a prop for react-select
-    expect(element).toHaveClass("bf-select-disabled");
-  });
-});
-
-describe("select with required/optional props", () => {
-  it("renders as required", () => {
-    rerender(<Select label="This is required" required />);
-
-    expect(customInput).toBeRequired();
-    expect(getByText("(required)"));
-  });
-
-  it("renders as required, but hiding the (required) text", () => {
-    rerender(<Select label="This is required" requiredNoLabel />);
-
-    expect(customInput).toBeRequired();
-    expect(queryByText("(required)")).toBeNull();
-  });
-
-  it("renders as optional with (optional) text", () => {
-    rerender(<Select label="This is optional" optional />);
-
-    expect(customInput).not.toBeRequired();
-    expect(getByText("(optional)"));
-  });
-});

package/src/Select.tsx

@@ -1,434 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-"use client";
-
-import { CSSProperties, forwardRef, ReactNode, RefAttributes } from "react";
-import ReactSelectDefaultExport, {
-  GroupBase,
-  Props as ReactSelectProps,
-  SelectInstance,
-  components,
-} from "react-select";
-import AsyncReactSelect, {
-  AsyncProps as AsyncSelectProps,
-} from "react-select/async";
-import CreatableReactSelect, {
-  CreatableProps as CreatableSelectProps,
-} from "react-select/creatable";
-import AsyncCreatableReactSelect, {
-  AsyncCreatableProps as AsyncCreatableSelectProps,
-} from "react-select/async-creatable";
-import classNames from "classnames";
-import Description from "@intility/bifrost-react/Description";
-import Feedback from "@intility/bifrost-react/Feedback";
-import Label from "@intility/bifrost-react/Label";
-import useUniqueId from "@intility/bifrost-react/hooks/useUniqueId";
-
-import {
-  DropdownIndicator,
-  ClearIndicator,
-  CustomInput,
-  CustomMenuList,
-  CustomOption,
-  LoadingIndicator,
-} from "./overrides/index.js";
-
-const ReactSelect =
-  (
-    ReactSelectDefaultExport as unknown as {
-      default: typeof ReactSelectDefaultExport;
-    }
-  ).default ?? ReactSelectDefaultExport;
-
-export const selectStyles = {
-  container: (provided) => ({
-    ...provided,
-    ".bf-label-description + &, .bf-label + &": {
-      marginTop: "var(--bfs4)", // add margin-top only when label or description is direct sibling with select
-    },
-  }),
-  control: (provided, state) => ({
-    ...provided,
-    "&:hover": {
-      borderColor: state.isFocused
-        ? "var(--bfc-theme-3)"
-        : "var(--bfc-base-c-inverted-2)",
-      // Change color of dropdown icon when hover on Select
-      ".bf-select__dropdown-indicator": {
-        color: "var(--bfc-theme-3)",
-      },
-    },
-    backgroundColor: state.isDisabled
-      ? "var(--bfc-base-dimmed)"
-      : "var(--bfc-base-3)",
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderColor: state.isFocused
-      ? "var(--bfc-theme-3)"
-      : state.isDisabled
-        ? "transparent"
-        : "var(--bfc-base-c-wcag)",
-    boxShadow: "none",
-    borderRadius: state.selectProps.menuIsOpen
-      ? " var(--bf-radius-xs) var(--bf-radius-xs) 0 0"
-      : "var(--bf-radius-xs)",
-    minHeight: "var(--bfs40)",
-    cursor: "text",
-  }),
-  indicatorSeparator: () => ({
-    display: "none",
-  }),
-  indicatorsContainer: (provided) => ({
-    ...provided,
-    alignItems: "flex-start",
-    padding: "7.5px 0",
-  }),
-  clearIndicator: (provided) => ({
-    ...provided,
-    "&:hover": {
-      color: "var(--bfc-base-c-1)",
-    },
-    color: "var(--bfc-base-c-2)",
-    cursor: "pointer",
-    padding: "var(--bfs4)",
-    margin: "1px var(--bfs4) 0px 0px",
-  }),
-  dropdownIndicator: (provided, state) => ({
-    ...provided,
-    color: state.isDisabled ? "var(--bfc-base-c-2)" : "var(--bfc-theme-1)",
-    cursor: "pointer",
-    padding: "var(--bfs4)",
-    marginRight: "var(--bfs8)",
-  }),
-  input: (provided) => ({
-    ...provided,
-    color: "var(--bfc-base-c-1)",
-    fontFamily: "inherit",
-    fontSize: "var(--bf-font-size-l)",
-  }),
-  menuPortal: (provided) => ({
-    ...provided,
-    zIndex: 9999,
-  }),
-  menu: (provided) => ({
-    ...provided,
-    backgroundColor: "transparent",
-    boxShadow: "none",
-    borderRadius: "none",
-    marginTop: 0,
-    zIndex: 3,
-  }),
-  menuList: (provided) => ({
-    ...provided,
-    padding: 0,
-    border: "1px solid var(--bfc-theme-3)",
-    borderTop: "none",
-    borderRadius: "0 0 var(--bf-radius-xs) var(--bf-radius-xs)",
-  }),
-  placeholder: (provided) => ({
-    ...provided,
-    color: "var(--bfc-base-c-2)",
-    fontSize: "var(--bf-font-size-l)",
-  }),
-  singleValue: (provided, state) => ({
-    ...provided,
-    color: state.selectProps.menuIsOpen
-      ? "var(--bfc-base-c-2)"
-      : "var(--bfc-base-c)",
-    fontSize: "var(--bf-font-size-l)",
-  }),
-  option: (provided, state) => ({
-    ...provided,
-    display: "flex",
-    justifyContent: !state.isMulti ? "space-between" : "normal",
-    alignItems: "baseline",
-    padding: "7px 12px",
-    backgroundColor: state.isDisabled
-      ? "var(--bfc-base-dimmed)"
-      : state.isFocused
-        ? "var(--bfc-base-1)"
-        : "var(--bfc-base-3)",
-    color: "var(--bfc-base-c)",
-    "& .bf-select-checkbox": {
-      marginRight: "var(--bfs8)",
-      color: "var(--bfc-theme)",
-    },
-    "& .bf-select-selected-icon": {
-      color: "var(--bfc-base-c-theme)",
-      marginLeft: "var(--bfs4)",
-    },
-    "&:hover": {
-      backgroundColor: state.isDisabled
-        ? "var(--bfc-base-dimmed)"
-        : "var(--bfc-base-1)",
-      cursor: state.isDisabled ? "default" : "pointer",
-    },
-    fontSize: "var(--bf-font-size-l)",
-    fontWeight: state.isSelected ? 600 : 400,
-    wordBreak: "break-word",
-    whiteSpace: "normal",
-  }),
-  multiValue: (provided, state) => ({
-    ...provided,
-    backgroundColor: state.isDisabled
-      ? "var(--bfc-base-c-inverted-2)"
-      : "var(--bfc-theme-c)",
-    borderRadius: "var(--bf-radius-xs)",
-  }),
-  multiValueLabel: (provided, state) => ({
-    ...provided,
-    color: state.isDisabled ? "var(--bfc-base-1)" : "var(--bfc-base-c-theme)",
-    fontSize: "var(--bf-font-size-m)",
-  }),
-  multiValueRemove: (provided, state) => ({
-    ...provided,
-    color: state.isDisabled
-      ? "var(--bfc-base-1)"
-      : state.isFocused
-        ? "var(--bfc-theme-c-base-3)"
-        : "var(--bfc-theme-1)",
-    borderRadius: "unset",
-    borderTopRightRadius: "var(--bf-radius-xs)",
-    borderBottomRightRadius: "var(--bf-radius-xs)",
-    paddingLeft: "var(--bfs2)",
-    paddingRight: "var(--bfs2)",
-    marginLeft: "var(--bfs2)",
-    background: state.isFocused && "var(--bfc-theme-2)",
-    "&:hover": {
-      color: "var(--bfc-theme-c-base-3)",
-      cursor: "pointer",
-      background: "var(--bfc-theme)",
-    },
-    "&:active": {
-      background: "var(--bfc-theme-2)",
-    },
-    svg: {
-      marginTop: "1px",
-    },
-  }),
-  group: (provided) => ({
-    ...provided,
-    padding: "var(--bfs6) 0",
-    "&:first-of-type": {
-      marginTop: "var(--bfs4)",
-    },
-  }),
-  groupHeading: (provided) => ({
-    ...provided,
-    textTransform: "capitalize",
-    color: "var(--bfc-base-c-2)",
-    fontSize: "var(--bf-font-size-s)",
-    marginBottom: "var(--bfs2)",
-  }),
-};
-
-export const selectComponents: Partial<typeof components> = {
-  DropdownIndicator,
-  Input: CustomInput,
-  MenuList: CustomMenuList,
-  ClearIndicator,
-  Option: CustomOption,
-  LoadingIndicator,
-};
-
-const selectStates = ["default", "alert"] as const;
-export type SelectState = (typeof selectStates)[number];
-
-/**
- *  Select HOC
- */
-const SelectHOC = <Type, Selector>(Selector: Selector) => {
-  // @ts-ignore
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/display-name
-  const GeneratedSelect: Type = forwardRef<any, any>(
-    (
-      {
-        label,
-        hideLabel = false,
-        isDisabled = false,
-        state,
-        feedback,
-        required = false,
-        description,
-        requiredNoLabel = false,
-        optional = false,
-        inputId,
-        className,
-        style,
-        loading = false,
-        components,
-        ...props
-      },
-      ref,
-    ) => {
-      const selectId = useUniqueId(inputId);
-
-      return (
-        <div
-          className={classNames(
-            className,
-            { "bf-select-container": true },
-            { "bf-select-disabled": isDisabled },
-            { "bf-select-alert": !isDisabled && state === "alert" },
-          )}
-          style={style}
-          data-testid="bf-select-container"
-        >
-          {!hideLabel && (
-            <Label
-              htmlFor={selectId}
-              required={!isDisabled && required && !requiredNoLabel}
-              optional={optional}
-              disabled={isDisabled}
-            >
-              {label}
-            </Label>
-          )}
-          <Description>{description}</Description>
-          {/* @ts-ignore */}
-          <Selector
-            ref={ref}
-            inputId={selectId}
-            placeholder=""
-            components={{ ...selectComponents, ...components }}
-            styles={selectStyles}
-            isDisabled={isDisabled}
-            classNamePrefix="bf-select"
-            required={!isDisabled && (required || requiredNoLabel)}
-            aria-label={label}
-            hideSelectedOptions={false}
-            closeMenuOnSelect={props.isMulti ? false : true}
-            isLoading={loading ?? props.isLoading}
-            {...props}
-          />
-          <Feedback>{feedback}</Feedback>
-        </div>
-      );
-    },
-  );
-
-  return GeneratedSelect;
-};
-
-// this is somewhat useless on it's own
-// has to be combined with one of the Select's props
-export type SelectProps = {
-  /** Required label text */
-  label: ReactNode;
-  /** Hide label text, will add label prop as aria-label for screen readers */
-  hideLabel?: boolean;
-  /** Description text to show more information */
-  description?: ReactNode;
-  /** Available states: `default` and `alert` */
-  state?: SelectState;
-  /** Feedback text below the Select component */
-  feedback?: ReactNode;
-  /** Required prop indicating mandatory field */
-  required?: boolean;
-  /** Bool to mark Select component required, but hides the required label */
-  requiredNoLabel?: boolean;
-  /** Marks Select component as optional */
-  optional?: boolean;
-  /** Inline CSS styles */
-  style?: CSSProperties;
-  /** Displays a loading spinner */
-  loading?: boolean;
-};
-
-// Each select get its own type which uses the correctly imported props
-// And calls the HOC
-// The resulting component should be correctly typed
-
-// Plain Select
-export type SelectType = {
-  <
-    OptionType = { label: string; value: string },
-    IsMulti extends boolean = false,
-    Group extends GroupBase<OptionType> = GroupBase<OptionType>,
-  >(
-    props: ReactSelectProps<OptionType, IsMulti, Group> &
-      RefAttributes<SelectInstance<OptionType, IsMulti, Group>> &
-      SelectProps,
-  ): React.ReactElement | null;
-  displayName?: string;
-};
-
-/**
- *  Select component - dropdown list
- */
-export const Select: SelectType = SelectHOC<SelectType, typeof ReactSelect>(
-  ReactSelect,
-);
-Select.displayName = "Select";
-
-// Async Select
-export type AsyncType = {
-  <
-    OptionType = { label: string; value: string },
-    IsMulti extends boolean = false,
-    Group extends GroupBase<OptionType> = {
-      options: OptionType[];
-      label?: string;
-    },
-  >(
-    props: AsyncSelectProps<OptionType, IsMulti, Group> &
-      RefAttributes<SelectInstance<OptionType, IsMulti, Group>> &
-      SelectProps,
-  ): React.ReactElement | null;
-  displayName?: string;
-};
-
-const AsyncSelect = SelectHOC<AsyncType, typeof AsyncReactSelect>(
-  AsyncReactSelect,
-);
-
-AsyncSelect.displayName = "AsyncSelect";
-
-// Creatable Select
-export type CreatableType = {
-  <
-    OptionType = { label: string; value: string },
-    IsMulti extends boolean = false,
-    Group extends GroupBase<OptionType> = {
-      options: OptionType[];
-      label?: string;
-    },
-  >(
-    props: CreatableSelectProps<OptionType, IsMulti, Group> &
-      RefAttributes<SelectInstance<OptionType, IsMulti, Group>> &
-      SelectProps,
-  ): React.ReactElement | null;
-  displayName?: string;
-};
-
-const CreatableSelect = SelectHOC<CreatableType, typeof CreatableReactSelect>(
-  CreatableReactSelect,
-);
-
-CreatableSelect.displayName = "CreatableSelect";
-
-// Async Creatable Select
-export type AsyncCreatableType = {
-  <
-    OptionType = { label: string; value: string },
-    IsMulti extends boolean = false,
-    Group extends GroupBase<OptionType> = {
-      options: OptionType[];
-      label?: string;
-    },
-  >(
-    props: AsyncCreatableSelectProps<OptionType, IsMulti, Group> &
-      RefAttributes<SelectInstance<OptionType, IsMulti, Group>> &
-      SelectProps,
-  ): React.ReactElement | null;
-  displayName?: string;
-};
-
-const AsyncCreatableSelect = SelectHOC<
-  AsyncCreatableType,
-  typeof AsyncCreatableReactSelect
->(AsyncCreatableReactSelect);
-
-AsyncCreatableSelect.displayName = "AsyncCreatableSelect";
-
-export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
-export default Select;

package/src/assets/bfSpinner.ts

@@ -1,37 +0,0 @@
-import {
-  IconDefinition,
-  IconName,
-  IconPathData,
-  IconPrefix,
-} from "@fortawesome/fontawesome-svg-core";
-
-const prefix = "fac" as IconPrefix;
-const iconName = "bf-spinner" as IconName;
-const width = 18;
-const height = 18;
-const aliases = [];
-const unicode = "";
-const svgPathData: IconPathData = [
-  "M9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2ZM0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z",
-  "M8 1C8 0.447715 8.44772 0 9 0C13.9706 0 18 4.02944 18 9C18 9.55229 17.5523 10 17 10C16.4477 10 16 9.55229 16 9C16 5.13401 12.866 2 9 2C8.44772 2 8 1.55228 8 1Z",
-];
-
-const definition: IconDefinition = {
-  prefix,
-  iconName,
-  icon: [width, height, aliases, unicode, svgPathData],
-};
-
-export {
-  definition as default,
-  definition as faIndeterminate,
-  definition,
-  prefix,
-  iconName,
-  width,
-  height,
-  aliases as ligatures,
-  unicode,
-  svgPathData,
-  aliases,
-};

package/src/overrides/ClearIndicator.internal.tsx

@@ -1,13 +0,0 @@
-import { Icon } from "@intility/bifrost-react";
-import { components } from "react-select";
-import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
-
-const ClearIndicator = (props) => {
-  return (
-    <components.ClearIndicator {...props}>
-      <Icon icon={faXmark} />
-    </components.ClearIndicator>
-  );
-};
-
-export default ClearIndicator;

package/src/overrides/CustomInput.internal.tsx

@@ -1,34 +0,0 @@
-import { components, Props } from "react-select";
-
-const CustomInput = (props) => {
-  const { required, value } = props.selectProps as Props & {
-    required: boolean;
-  };
-  const updatedProps = {
-    ...props,
-    autoComplete: "noAutocomplete",
-  };
-
-  return (
-    <>
-      <components.Input {...updatedProps} />
-      <input
-        style={{
-          opacity: 0,
-          height: 0,
-          position: "absolute",
-          pointerEvents: "none",
-        }}
-        onChange={(e) => e.preventDefault()}
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        value={(value as any)?.label ?? ""} // casting to any, because we don't know the type of an option
-        tabIndex={-1}
-        autoComplete="noAutocomplete"
-        required={required}
-        data-testid="bf-select-input"
-      />
-    </>
-  );
-};
-
-export default CustomInput;

package/src/overrides/CustomMenuList.internal.tsx

@@ -1,15 +0,0 @@
-import { components } from "react-select";
-
-const CustomMenuList = (props) => {
-  return (
-    <components.MenuList
-      data-testid="bf-select-menulist"
-      className="bf-scrollbar-small"
-      {...props}
-    >
-      {props.children}
-    </components.MenuList>
-  );
-};
-
-export default CustomMenuList;

package/src/overrides/CustomOption.internal.tsx

@@ -1,29 +0,0 @@
-import { components } from "react-select";
-import { faSquare } from "@fortawesome/free-regular-svg-icons/faSquare";
-import { faCheckSquare } from "@fortawesome/free-solid-svg-icons/faCheckSquare";
-import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
-import { Icon } from "@intility/bifrost-react";
-
-const CustomOption = (props) => {
-  return (
-    <components.Option {...props}>
-      {props.isMulti && (
-        <div>
-          <Icon
-            icon={props.isSelected ? faCheckSquare : faSquare}
-            fixedWidth
-            className="bf-select-checkbox"
-          />
-        </div>
-      )}
-      {props.children}
-      {!props.isMulti && props.isSelected && (
-        <div>
-          <Icon icon={faCheck} fixedWidth className="bf-select-selected-icon" />
-        </div>
-      )}
-    </components.Option>
-  );
-};
-
-export default CustomOption;

package/src/overrides/DropdownIndicator.internal.tsx

@@ -1,13 +0,0 @@
-import { components } from "react-select";
-import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
-import { Icon } from "@intility/bifrost-react";
-
-const DropdownIndicator = (props) => {
-  return (
-    <components.DropdownIndicator {...props}>
-      <Icon icon={faCaretDown} />
-    </components.DropdownIndicator>
-  );
-};
-
-export default DropdownIndicator;

package/src/overrides/LoadingIndicator.internal.tsx

@@ -1,9 +0,0 @@
-import { Icon } from "@intility/bifrost-react";
-
-import bfSpinner from "../assets/bfSpinner.js";
-
-export default function LoadingIndicator() {
-  return (
-    <Icon icon={bfSpinner} spin fixedWidth className="bf-input-loading-icon" />
-  );
-}

package/src/overrides/index.ts

@@ -1,6 +0,0 @@
-export { default as ClearIndicator } from "./ClearIndicator.internal.js";
-export { default as CustomInput } from "./CustomInput.internal.js";
-export { default as LoadingIndicator } from "./LoadingIndicator.internal.js";
-export { default as CustomMenuList } from "./CustomMenuList.internal.js";
-export { default as DropdownIndicator } from "./DropdownIndicator.internal.js";
-export { default as CustomOption } from "./CustomOption.internal.js";

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "declaration": true,
-    "rootDir": "src",
-    "declarationMap": false,
-    "isolatedModules": false,
-    "noEmit": false,
-    "allowJs": false,
-    "sourceMap": false,
-    "emitDeclarationOnly": true,
-    "outDir": "dist"
-  },
-  "include": ["./src/"],
-  "exclude": []
-}

package/vitest.config.ts

@@ -1,12 +0,0 @@
-import react from "@vitejs/plugin-react-swc";
-import { defineConfig } from "vitest/config";
-
-export default defineConfig({
-  plugins: [react()],
-  test: {
-    globals: true,
-    environment: "jsdom",
-    setupFiles: "../test-setup.ts",
-    css: true,
-  },
-});