@redocly/theme 0.9.15 → 0.11.0

package/lib/types/portal/src/shared/types/feedback.d.ts

@@ -0,0 +1,11 @@
+import type { FEEDBACK_TYPES } from '../constants';
+import type { RatingProps, SentimentProps, CommentProps } from '../../../../../components/Feedback';
+export type SubmitFeedbackParams = {
+    type: string;
+    values: Record<string, unknown>;
+    path?: string;
+};
+export type FeedbackProps = {
+    type: FEEDBACK_TYPES;
+    settings: (RatingProps | SentimentProps | CommentProps)['settings'];
+};

package/lib/types/portal/src/shared/types/feedback.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=feedback.js.map

package/lib/types/portal/src/shared/types/markdown.d.ts

@@ -0,0 +1,5 @@
+export type MdHeading = {
+    id: string;
+    value: string;
+    depth: number;
+};

package/lib/types/portal/src/shared/types/markdown.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=markdown.js.map

package/lib/types/portal/src/shared/types/nav.d.ts

@@ -0,0 +1,149 @@
+import type { REDOCLY_TEAMS_RBAC } from '../constants';
+type Rbac = Record<string, string> | undefined;
+export type ResolvedNavLinkItem = {
+    type: 'link';
+    metadata?: Record<string, unknown>;
+    link: string;
+    label: string;
+    items?: ResolvedNavItem[];
+    sidebar?: ResolvedNavItem[];
+    external?: boolean;
+    target?: '_self' | '_blank';
+    version?: string;
+    isDefault?: boolean;
+    versionFolderId?: string;
+    httpVerb?: string;
+    separatorLine?: boolean;
+    routeSlug?: string;
+    active?: boolean;
+    [REDOCLY_TEAMS_RBAC]?: Rbac;
+};
+export type ResolvedNavGroupItem = {
+    type: 'group';
+    metadata?: Record<string, unknown>;
+    link?: string;
+    label?: string;
+    items?: ResolvedNavItem[];
+    sidebar?: ResolvedNavItem[];
+    external?: boolean;
+    target?: '_self' | '_blank';
+    expanded?: string;
+    selectFirstItemOnExpand?: boolean;
+    version?: string;
+    isDefault?: boolean;
+    versionFolderId?: string;
+    menuStyle?: MenuStyle;
+    separatorLine?: boolean;
+    routeSlug?: string;
+    active?: boolean;
+    [REDOCLY_TEAMS_RBAC]?: Rbac;
+};
+export type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem | {
+    type: 'separator';
+    metadata?: Record<string, unknown>;
+    label?: string;
+    routeSlug?: never;
+    version?: string;
+    isDefault?: boolean;
+    versionFolderId?: string;
+    separatorLine?: boolean;
+    link?: undefined;
+    items?: ResolvedNavItem[];
+    sidebar?: ResolvedNavItem[];
+    [REDOCLY_TEAMS_RBAC]?: Rbac;
+} | {
+    type: 'error';
+    version?: string;
+    isDefault?: boolean;
+    versionFolderId?: string;
+    metadata?: Record<string, unknown>;
+    routeSlug?: never;
+    label: string;
+    link?: undefined;
+    items?: ResolvedNavItem[];
+    sidebar?: ResolvedNavItem[];
+    [REDOCLY_TEAMS_RBAC]?: Rbac;
+};
+export type ResolvedNavItemWithLink = (ResolvedNavLinkItem | ResolvedNavGroupItem) & {
+    link: string;
+};
+export interface PageProps {
+    seo?: {
+        title?: string;
+    };
+    frontmatter?: Omit<PageProps, 'frontmatter'> & {
+        settings?: any;
+    };
+    disableAutoScroll?: boolean;
+    lastModified?: string | null;
+    [k: string]: any;
+}
+export interface PageStaticData {
+    props?: PageProps;
+    [k: string]: unknown;
+}
+export type UserData = {
+    isAuthenticated: boolean;
+    name: string;
+    picture: string;
+};
+export interface PageData {
+    templateId: string;
+    sharedDataIds: Record<string, string>;
+    props: PageProps;
+    versions?: Version[];
+    userData: UserData;
+}
+export declare enum MenuStyle {
+    Drilldown = "drilldown"
+}
+export type NavItem = {
+    page?: string;
+    directory?: string;
+    group?: string;
+    label?: string;
+    href?: never;
+    items?: NavItem[];
+    separator?: string;
+    separatorLine?: boolean;
+    version?: string;
+    menuStyle?: MenuStyle;
+    external?: boolean;
+    target?: '_self' | '_blank';
+    expanded?: boolean | 'always';
+    selectFirstItemOnExpand?: boolean;
+    flatten?: boolean;
+};
+export interface LogoConfig {
+    image?: string;
+    altText?: string;
+    link?: string;
+    favicon?: string;
+}
+export type Version = {
+    version: string;
+    label: string;
+    link: string;
+    default: boolean;
+    active: boolean;
+    notExists?: boolean;
+    folderId: string;
+};
+export type VersionConfigItem = {
+    version: string;
+    name?: string;
+};
+export type VersionsConfigType = {
+    versions: VersionConfigItem[];
+    default?: string;
+};
+export type VersionedFolderConfig = {
+    versionedFiles: Map<string, Set<string>>;
+    defaultVersion?: string;
+    versions: VersionConfigItem[];
+    hasVersionsConfig?: boolean;
+};
+export type NavGroup = ResolvedNavItem[] | undefined | string | boolean | number;
+export type NavGroupRecord = Record<string, NavGroup>;
+export type ResolvedConfigLinks = NavGroup | NavGroupRecord;
+export {};

package/lib/types/portal/src/shared/types/nav.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuStyle = void 0;
+var MenuStyle;
+(function (MenuStyle) {
+    MenuStyle["Drilldown"] = "drilldown";
+})(MenuStyle = exports.MenuStyle || (exports.MenuStyle = {}));
+//# sourceMappingURL=nav.js.map

package/lib/types/portal/src/shared/types/searchDocument.d.ts

@@ -0,0 +1,19 @@
+export interface OperationParameter {
+    name: string | string[];
+    description: string | string[];
+    place: string;
+    path?: string[];
+}
+export declare const PERMISSION_PROP_NAME = "redocly::permission";
+export interface SearchDocument {
+    id: string;
+    url: string;
+    title: string | string[];
+    text: string | string[];
+    path?: string[];
+    httpVerb?: string;
+    pathName?: string | string[];
+    parameters?: OperationParameter[];
+    metadata?: Record<string, any>;
+    [PERMISSION_PROP_NAME]?: string;
+}

package/lib/types/portal/src/shared/types/searchDocument.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PERMISSION_PROP_NAME = void 0;
+exports.PERMISSION_PROP_NAME = 'redocly::permission';
+//# sourceMappingURL=searchDocument.js.map

package/lib/ui/ArrowBack.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ArrowBack: import("styled-components").StyledComponent<({ className, dataComponentName, }: {
+    className?: string | undefined;
+    dataComponentName?: string | undefined;
+}) => JSX.Element, any, {}, never>;

package/lib/ui/ArrowBack.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowBack = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Arrow = ({ className, dataComponentName, }) => (react_1.default.createElement("span", { "data-component-name": dataComponentName },
+    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "10px", height: "10px", className: className },
+        react_1.default.createElement("path", { d: "M2.414 5l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L2.414 5z" }),
+        react_1.default.createElement("path", { d: "M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" }))));
+exports.ArrowBack = (0, styled_components_1.default)(Arrow) `
+  fill: var(--sidebar-back-button-icon-color);
+  margin-right: calc(var(--sidebar-spacing-unit));
+
+  background-image: var(--sidebar-back-button-icon);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+`;
+//# sourceMappingURL=ArrowBack.js.map

package/lib/ui/Dropdown.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { Version } from '@theme/types/portal';
+import type { Version } from '../types/portal';
 type DropdownProps = {
     items: Version[];
     activeItem: Version;

package/lib/ui/Jumbotron.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Jumbotron = void 0;
 const styled_system_1 = require("styled-system");
 const styled_components_1 = __importDefault(require("styled-components"));
-const Typography_1 = require("../Typography");
+const Typography_1 = require("../components/Typography");
 const Background_1 = require("../ui/Background");
 exports.Jumbotron = (0, styled_components_1.default)(Background_1.Background).attrs(() => ({
     'data-component-name': 'ui/Jumbotron',

package/lib/ui/index.d.ts

@@ -1,9 +1,9 @@
 import type React from 'react';
-export * from '../ui/Tiles';
 export * from '../ui/Background';
 export * from '../ui/Box';
 export * from '../ui/Dropdown';
 export * from '../ui/Flex';
 export * from '../ui/Jumbotron';
+export * from '../ui/ArrowBack';
 export declare const LandingLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;
 export declare const EmptyLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;

package/lib/ui/index.js

@@ -15,12 +15,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmptyLayout = exports.LandingLayout = void 0;
-__exportStar(require("../ui/Tiles"), exports);
 __exportStar(require("../ui/Background"), exports);
 __exportStar(require("../ui/Box"), exports);
 __exportStar(require("../ui/Dropdown"), exports);
 __exportStar(require("../ui/Flex"), exports);
 __exportStar(require("../ui/Jumbotron"), exports);
+__exportStar(require("../ui/ArrowBack"), exports);
 const LandingLayout = ({ children }) => children;
 exports.LandingLayout = LandingLayout;
 exports.EmptyLayout = exports.LandingLayout;

package/lib/utils/index.d.ts

@@ -7,3 +7,5 @@ export * from './theme-helpers';
 export * from './class-names';
 export * from './args-typecheck';
 export * from './color';
+export * from './urls';
+export * from './jsUtils';

package/lib/utils/index.js

@@ -23,4 +23,6 @@ __exportStar(require("./theme-helpers"), exports);
 __exportStar(require("./class-names"), exports);
 __exportStar(require("./args-typecheck"), exports);
 __exportStar(require("./color"), exports);
+__exportStar(require("./urls"), exports);
+__exportStar(require("./jsUtils"), exports);
 //# sourceMappingURL=index.js.map

package/lib/utils/jsUtils.d.ts

@@ -0,0 +1,4 @@
+export declare function findDeepFirst<T extends {
+    items?: T[];
+}>(list: T[], cb: (item: T) => boolean): T | undefined;
+export declare function toStringIfDefined(value: unknown): string | undefined;

package/lib/utils/jsUtils.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toStringIfDefined = exports.findDeepFirst = void 0;
+function findDeepFirst(list, cb) {
+    for (const item of list) {
+        if (cb(item) === true) {
+            return item;
+        }
+        if (item.items) {
+            const nestedRes = findDeepFirst(item.items, cb);
+            if (nestedRes !== undefined)
+                return nestedRes;
+        }
+    }
+}
+exports.findDeepFirst = findDeepFirst;
+function toStringIfDefined(value) {
+    return value == undefined ? undefined : String(value);
+}
+exports.toStringIfDefined = toStringIfDefined;
+//# sourceMappingURL=jsUtils.js.map

package/lib/utils/urls.d.ts

@@ -0,0 +1,11 @@
+export declare function combineUrls(baseURL: string, ...relativeURLs: string[]): string;
+export declare function withPathPrefix(url: string): string;
+export declare function withoutPathPrefix(pathname: string): string;
+export declare function withoutHash(url: undefined | null): undefined;
+export declare function withoutHash(url: string): string;
+export declare function withoutHash(url: string | undefined): string | undefined;
+export declare function getPathPrefix(): string;
+export declare function normalizePathPrefix(prefix: string): string;
+export declare function addLeadingSlash(url: string): string;
+export declare function removeTrailingSlash(url: string): string;
+export declare function removeLeadingSlash(url: string): string;

package/lib/utils/urls.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeLeadingSlash = exports.removeTrailingSlash = exports.addLeadingSlash = exports.normalizePathPrefix = exports.getPathPrefix = exports.withoutHash = exports.withoutPathPrefix = exports.withPathPrefix = exports.combineUrls = void 0;
+function combineUrls(baseURL, ...relativeURLs) {
+    let res = baseURL;
+    for (let relativeURL of relativeURLs) {
+        res = relativeURL
+            ? res.replace(/[\/\\]+$/, '') + '/' + relativeURL.replace(/^[\/\\]+/, '')
+            : res;
+    }
+    return res;
+}
+exports.combineUrls = combineUrls;
+function withPathPrefix(url) {
+    return combineUrls(getPathPrefix(), url);
+}
+exports.withPathPrefix = withPathPrefix;
+function withoutPathPrefix(pathname) {
+    const pathPrefix = getPathPrefix();
+    return pathPrefix && pathname.startsWith(pathPrefix)
+        ? pathname.slice(pathPrefix.length)
+        : pathname;
+}
+exports.withoutPathPrefix = withoutPathPrefix;
+function withoutHash(url) {
+    if (url == null)
+        return undefined;
+    return url.split('#')[0];
+}
+exports.withoutHash = withoutHash;
+function getPathPrefix() {
+    if (process.env.REDOCLY_PREFIX_PATHS) {
+        return normalizePathPrefix(process.env.REDOCLY_PREFIX_PATHS);
+    }
+    return '';
+}
+exports.getPathPrefix = getPathPrefix;
+function normalizePathPrefix(prefix) {
+    const withoutTrailing = removeTrailingSlash(prefix);
+    return addLeadingSlash(withoutTrailing === '.' ? '' : withoutTrailing);
+}
+exports.normalizePathPrefix = normalizePathPrefix;
+function addLeadingSlash(url) {
+    return url.startsWith('/') ? url : `/${url}`;
+}
+exports.addLeadingSlash = addLeadingSlash;
+function removeTrailingSlash(url) {
+    return url.endsWith('/') ? url.substring(0, url.length - 1) : url;
+}
+exports.removeTrailingSlash = removeTrailingSlash;
+function removeLeadingSlash(url) {
+    return url.startsWith('/') ? url.substring(1) : url;
+}
+exports.removeLeadingSlash = removeLeadingSlash;
+//# sourceMappingURL=urls.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.9.15",
+  "version": "0.11.0",
   "description": "Shared UI components lib",
   "keywords": [],
   "author": "team@redocly.com",

package/src/components/ApiOnboarding/AppCustomAttributes.tsx

@@ -0,0 +1,9 @@
+interface AppCustomAttributesProps {
+  onChange: (value: Record<string, string>) => void;
+}
+
+// Do not remove this component. It's for ejecting.
+// Some customers need to add custom attributes to a form in dev onboarding plugin, so they can just eject this component and add those attributes there
+export function AppCustomAttributes(_props: AppCustomAttributesProps) {
+  return null;
+}

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export * from '@theme/components/Button/Button';

package/src/components/Cards/Card.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import { H3 } from '@theme/components/Typography/H3';
+import type { ResolvedNavItem } from '@theme/types/portal';
+
+export interface CardProps {
+  title?: string;
+  icon?: string;
+  links: ResolvedNavItem;
+}
+
+export function Card(props: CardProps): JSX.Element {
+  return (
+    <CardWrapper data-component-name="Cards/Card">
+      {props.icon && <img src={props?.icon} alt={props?.title} />}
+      {props.title && <H3>{props.title}</H3>}
+      {props.links.items && (
+        <CardLinksList>
+          {props.links.items.map((item) => (
+            <li key={item.label}>
+              <Link to={item.link as string}>{item.label}</Link>
+            </li>
+          ))}
+        </CardLinksList>
+      )}
+    </CardWrapper>
+  );
+}
+
+const CardWrapper = styled.div`
+  border-radius: 10px;
+  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  padding: 20px;
+  margin: 0 20px 20px 0;
+  min-width: 25%;
+  font-family: var(--font-family-base);
+`;
+
+const CardLinksList = styled.ul`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    margin-bottom: 10px;
+  }
+`;

package/src/components/Cards/index.ts

@@ -0,0 +1,2 @@
+export * from './Card';
+export * from './CardsBlock';

package/src/components/Catalog/Catalog.tsx

@@ -0,0 +1,200 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ResolvedNavItem } from '@theme/types/portal';
+import type { CatalogConfig } from '@theme/types/portal/src/shared/types/catalog';
+import { HighlightContext } from '@theme/ui/Highlight';
+import { Button } from '@theme/components/Button';
+import { Filter } from '@theme/components/Filter';
+import { H2 } from '@theme/components/Typography/H2';
+import { H3 } from '@theme/components/Typography/H3';
+import { CatalogCard } from '@theme/components/Catalog/CatalogCard';
+import { usePageSharedData } from '@portal/hooks/index';
+
+import { useCatalog } from './useCatalog';
+
+export default function Catalog(props: {
+  pageProps: {
+    catalogId: string;
+    catalogConfig: CatalogConfig;
+  };
+}) {
+  const { catalogConfig } = props.pageProps;
+
+  const items = usePageSharedData('catalog') as ResolvedNavItem[];
+
+  const { filterTerm, setFilterTerm, groups, filters } = useCatalog(items, catalogConfig);
+
+  const [isFilterPanelFocused, setIsFilterPanelFocused] = React.useState(false);
+
+  return (
+    <HighlightContext.Provider value={[filterTerm]}>
+      <CatalogPageWrapper>
+        <CatalogPageSidebar isActiveInMobileMode={isFilterPanelFocused}>
+          <StyledInput
+            placeholder="Filter..."
+            value={filterTerm}
+            onFocus={() => setIsFilterPanelFocused(true)}
+            onChange={(e) => setFilterTerm(e.target.value)}
+          />
+          {filters.map((filter, idx) => (
+            <Filter filter={filter} key={filter.property + '-' + idx} />
+          ))}
+          <MobileStickyApplyFilters>
+            <Button color="secondary" onClick={() => setIsFilterPanelFocused(false)}>
+              Apply filters
+            </Button>
+          </MobileStickyApplyFilters>
+        </CatalogPageSidebar>
+        <CatalogPageContent>
+          {catalogConfig.title ? <CatalogTitle> {catalogConfig.title} </CatalogTitle> : null}
+          {catalogConfig.description ? (
+            <CatalogDescription> {catalogConfig.description} </CatalogDescription>
+          ) : null}
+          {groups.map((group) => (
+            <React.Fragment key={group.title}>
+              <H3>
+                {group.title} ({group.items.length})
+              </H3>
+              <CatalogCards>
+                {group.items.map((item) => (
+                  <CatalogCard item={item} key={item.link} />
+                ))}
+              </CatalogCards>
+            </React.Fragment>
+          ))}
+        </CatalogPageContent>
+      </CatalogPageWrapper>
+    </HighlightContext.Provider>
+  );
+}
+
+const MobileStickyApplyFilters = styled.div`
+  position: fixed;
+  display: none;
+  background-color: var(--sidebar-background-color);
+  bottom: 0;
+  padding: 16px 30px;
+  left: 0px;
+  right: 0px;
+
+  ${Button} {
+    width: 100%;
+    margin: 0;
+  }
+`;
+
+const CatalogPageSidebar = styled.aside<{ isActiveInMobileMode?: boolean }>`
+  width: var(--sidebar-width);
+  border-right: 1px solid var(--sidebar-border-color);
+  padding: 20px 30px;
+  position: sticky;
+  top: var(--navbar-height);
+  height: calc(100vh - var(--navbar-height));
+  overflow: auto;
+
+  @media screen and (max-width: 767px) {
+    transition: height 0.2s ease-in-out;
+    width: 100%;
+    ${({ isActiveInMobileMode }) =>
+      isActiveInMobileMode ? 'padding-bottom: 66px;' : 'height: 76px;'};
+    background-color: var(--sidebar-background-color);
+    border-bottom: 1px solid var(--sidebar-border-color);
+    z-index: 100;
+
+    ${MobileStickyApplyFilters} {
+      display: ${({ isActiveInMobileMode }) => (isActiveInMobileMode ? 'block' : 'none')};
+    }
+  }
+`;
+
+const CatalogPageContent = styled.main`
+  flex: 1;
+  padding: 32px;
+`;
+
+const CatalogCards = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
+  gap: 32px;
+`;
+
+const CatalogTitle = styled(H2)`
+  && {
+    margin: 0;
+  }
+`;
+
+const CatalogDescription = styled.p`
+  margin: 16px 0 32px 0;
+  font-size: 16px;
+  color: var(--text-color-secondary);
+`;
+
+const CatalogPageWrapper = styled.div`
+  --sidebar-width: var(--catalog-sidebar-width, 300px);
+
+  display: flex;
+  flex-direction: row;
+
+  font-weight: var(--font-weight-regular);
+  padding: 0;
+
+  color: var(--text-color);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+
+  hr {
+    border: 0;
+    width: calc(100% + 48px);
+    margin: auto -24px 0 -24px;
+    border-top: 1px solid var(--border-color);
+  }
+  a:not([role='button']) {
+    text-decoration: none;
+    color: var(--link-text-color);
+    font-weight: var(--link-font-weight);
+  }
+
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+  }
+`;
+
+// TODO: merge this input with the input from reference docs
+// the on in ref docs is dark, needs separate variables most likely
+const StyledInput = styled.input`
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  min-width: 200px;
+  outline-color: var(--color-primary-500);
+  width: 100%;
+
+  outline: none;
+  padding: var(--input-padding);
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  color: var(--text-color);
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  line-height: var(--input-line-height);
+
+  &::placeholder {
+    opacity: 0.6;
+    color: var(--text-color);
+  }
+
+  &:hover {
+    color: var(--text-color);
+    border: 1px solid rgba(0, 0, 0, 0.23);
+  }
+
+  &:focus {
+    color: var(--text-color);
+    border: 1px solid rgba(0, 0, 0, 0.23);
+  }
+
+  &:-webkit-autofill {
+    background-color: var(--input-background-color);
+  }
+`;