@dynatrace/strato-components 3.4.1 → 3.5.2

package/core/hooks/useFocusRing.js

@@ -1,103 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useFocusRing_exports = {};
-__export(useFocusRing_exports, {
-  useFocusRing: () => useFocusRing
-});
-module.exports = __toCommonJS(useFocusRing_exports);
-var import_react = require("react");
-var import_borders = __toESM(require("@dynatrace/strato-design-tokens/borders"));
-var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
-var import_useFocusContext = require("./useFocusContext.js");
-function useFocusRing(props = {}) {
-  const {
-    color = "neutral",
-    ignoreModality = false,
-    isMinimal = false,
-    focusWithin = false,
-    disabled = false
-  } = props;
-  const [isFocused, setIsFocused] = (0, import_react.useState)(false);
-  const { modality } = (0, import_useFocusContext.useFocusContext)();
-  (0, import_react.useEffect)(() => {
-    if (disabled) {
-      setIsFocused(false);
-    }
-  }, [disabled]);
-  const onBlur = (0, import_react.useCallback)((e) => {
-    if (e.currentTarget === e.target) {
-      setIsFocused(false);
-    }
-  }, []);
-  const onFocus = (0, import_react.useCallback)((e) => {
-    if (e.currentTarget === e.target) {
-      setIsFocused(true);
-    }
-  }, []);
-  const focusProps = {
-    onFocus,
-    onBlur
-  };
-  if ((ignoreModality || modality === "keyboard") && isFocused || focusWithin && !disabled) {
-    const CapitalizedVariant = `${color.charAt(0).toUpperCase()}${color.slice(
-      1
-    )}`;
-    const outerboxShadow = import_colors.default.Border[CapitalizedVariant].Accent;
-    const innerShadow = import_colors.default.Border[CapitalizedVariant].Default;
-    if (isMinimal) {
-      const minimalFocusStyle = {
-        outline: "none",
-        boxShadow: `inset 0 0 0 ${import_borders.default.Width.Default} ${outerboxShadow}`,
-        borderRadius: `calc(${import_borders.default.Radius.Field.Subdued} / 2)`,
-        backgroundColor: import_colors.default.Background.Field[CapitalizedVariant].Emphasized,
-        "&:focus-visible": { outline: "none" }
-      };
-      return {
-        focusStyles: focusWithin ? { "&:focus-within": minimalFocusStyle } : minimalFocusStyle,
-        isFocusVisible: !focusWithin,
-        focusProps
-      };
-    }
-    const formalFocusStyle = {
-      outline: "none",
-      boxShadow: `inset 0 0 0 ${import_borders.default.Width.Emphasized} ${outerboxShadow}, inset 0 0 0 calc(${import_borders.default.Width.Emphasized} + 1px) ${innerShadow}`,
-      "&:focus-visible": { outline: "none" }
-    };
-    return {
-      focusStyles: focusWithin ? { "&:focus-within": formalFocusStyle } : formalFocusStyle,
-      isFocusVisible: !focusWithin,
-      focusProps
-    };
-  }
-  return {
-    focusStyles: { outline: "none", "&:focus-visible": { outline: "none" } },
-    // fixes the flicker effect from removing the native outline, which otherwise happens too late
-    isFocusVisible: false,
-    focusProps
-  };
-}

package/esm/charts/core/components/overlay-tooltip/components/header/types/type-guards.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../../../../src/charts/core/components/overlay-tooltip/components/header/types/type-guards.ts"],
-  "sourcesContent": ["import { isNil, isUndefined } from 'lodash-es';\n\nimport type { HeaderData, TooltipValue } from '../../../types.js';\n\ntype DefinedTooltipData = string | number | Date;\n\nexport const isDateRange = (data: HeaderData): data is [Date, Date] => {\n  return (\n    data instanceof Array &&\n    data.length === 2 &&\n    data.every((item) => item instanceof Date)\n  );\n};\n\nexport const isNumericRange = (data: HeaderData): data is [number, number] => {\n  return (\n    data instanceof Array &&\n    data.length === 2 &&\n    data.every((item) => typeof item === 'number')\n  );\n};\n\nexport const isStringRange = (data: HeaderData): data is [string, string] => {\n  return (\n    data instanceof Array &&\n    data.length === 2 &&\n    data.every((item) => typeof item === 'string')\n  );\n};\n\nexport const isNonEmptyRange = (\n  data: HeaderData,\n): data is [DefinedTooltipData, DefinedTooltipData] => {\n  return (\n    data instanceof Array &&\n    data.length === 2 &&\n    data.every((item) => !isUndefined(item))\n  );\n};\n\nexport const isFromTo = (\n  data: HeaderData,\n): data is [TooltipValue, TooltipValue] => {\n  return (\n    data instanceof Array &&\n    data.length === 2 &&\n    data.every((item) => !isNil(item))\n  );\n};\nexport const isSingleValue = (\n  data: HeaderData,\n): data is TooltipValue | [TooltipValue] =>\n  (data instanceof Array && data.length === 1 && !isNil(data[0])) ||\n  (!(data instanceof Array) && !isNil(data));\n"],
-  "mappings": "AAAA,SAAS,OAAO,mBAAmB;AAM5B,MAAM,cAAc,CAAC,SAA2C;AACrE,SACE,gBAAgB,SAChB,KAAK,WAAW,KAChB,KAAK,MAAM,CAAC,SAAS,gBAAgB,IAAI;AAE7C;AAEO,MAAM,iBAAiB,CAAC,SAA+C;AAC5E,SACE,gBAAgB,SAChB,KAAK,WAAW,KAChB,KAAK,MAAM,CAAC,SAAS,OAAO,SAAS,QAAQ;AAEjD;AAEO,MAAM,gBAAgB,CAAC,SAA+C;AAC3E,SACE,gBAAgB,SAChB,KAAK,WAAW,KAChB,KAAK,MAAM,CAAC,SAAS,OAAO,SAAS,QAAQ;AAEjD;AAEO,MAAM,kBAAkB,CAC7B,SACqD;AACrD,SACE,gBAAgB,SAChB,KAAK,WAAW,KAChB,KAAK,MAAM,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;AAE3C;AAEO,MAAM,WAAW,CACtB,SACyC;AACzC,SACE,gBAAgB,SAChB,KAAK,WAAW,KAChB,KAAK,MAAM,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC;AAErC;AACO,MAAM,gBAAgB,CAC3B,SAEC,gBAAgB,SAAS,KAAK,WAAW,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,KAC5D,EAAE,gBAAgB,UAAU,CAAC,MAAM,IAAI;",
-  "names": []
-}

package/esm/charts/xy-chart/components/selection/Duration.js

@@ -1,79 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useIntl } from "react-intl";
-import { formattedTimeframe } from "./TooltipHeader.sty.js";
-import {
-  tooltipHeader,
-  tooltipHeaderCategorical
-} from "../../../core/components/selection-area/SelectionArea.sty.js";
-import { ChartTooltip } from "../../../core/components/tooltip/ChartTooltip/ChartTooltip.js";
-import { TooltipItem } from "../../../core/components/tooltip/section-components/TooltipItem/TooltipItem.js";
-import { scaleBandInvert } from "../../../core/utils/scale.js";
-import { DISPLAY_UNITS_LIMIT } from "../../constants/defaults.js";
-import { XYCHART_MESSAGES } from "../../messages/messages.js";
-import {
-  isAnyNumericalScale,
-  isCategoricalScale,
-  isTimeScale
-} from "../../types/guards.js";
-import { getTimeframe } from "../overlay/utils/get-timeframe.js";
-const Duration = ({
-  axisConfig,
-  scale,
-  formatter,
-  startPixels,
-  endPixels
-}) => {
-  const config = {
-    axisType: axisConfig.type,
-    axisScale: scale
-  };
-  const intl = useIntl();
-  const timeframe = getTimeframe(
-    startPixels,
-    endPixels,
-    !axisConfig?.reversed,
-    scale
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isAnyNumericalScale(config) && !isTimeScale(config) ? /* @__PURE__ */ jsx(
-      ChartTooltip.RangeHeader,
-      {
-        from: config.axisScale.invert(startPixels),
-        to: config.axisScale.invert(endPixels),
-        formatter,
-        absoluteRange: true,
-        className: tooltipHeader
-      }
-    ) : null,
-    isTimeScale(config) ? /* @__PURE__ */ jsx(ChartTooltip.Item, { children: /* @__PURE__ */ jsx(
-      ChartTooltip.TimeFrameHeader,
-      {
-        from: timeframe.start,
-        to: timeframe.end,
-        limit: DISPLAY_UNITS_LIMIT,
-        showDuration: true,
-        className: tooltipHeader
-      }
-    ) }) : null,
-    isCategoricalScale(config) ? /* @__PURE__ */ jsx(ChartTooltip.Item, { children: /* @__PURE__ */ jsx(TooltipItem, { children: /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: clsx(
-          "formatted-timeframe",
-          formattedTimeframe,
-          tooltipHeaderCategorical
-        ),
-        children: `${String(
-          scaleBandInvert(config.axisScale)(startPixels)
-        )} ${intl.formatMessage(XYCHART_MESSAGES.to)} ${String(
-          scaleBandInvert(config.axisScale)(endPixels)
-        )}`
-      }
-    ) }) }) : null
-  ] });
-};
-export {
-  Duration
-};
-//# sourceMappingURL=Duration.js.map

package/esm/charts/xy-chart/components/selection/Duration.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../src/charts/xy-chart/components/selection/Duration.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { formattedTimeframe } from './TooltipHeader.sty.js';\nimport {\n  tooltipHeader,\n  tooltipHeaderCategorical,\n} from '../../../core/components/selection-area/SelectionArea.sty.js';\nimport { ChartTooltip } from '../../../core/components/tooltip/ChartTooltip/ChartTooltip.js';\nimport { TooltipItem } from '../../../core/components/tooltip/section-components/TooltipItem/TooltipItem.js';\nimport type {\n  DateTimeFormatter,\n  FormatterWithPrecision,\n} from '../../../core/types/formatter.js';\nimport { scaleBandInvert } from '../../../core/utils/scale.js';\nimport { DISPLAY_UNITS_LIMIT } from '../../constants/defaults.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport {\n  isAnyNumericalScale,\n  isCategoricalScale,\n  isTimeScale,\n} from '../../types/guards.js';\nimport {\n  type AnyXYChartScale,\n  type XYChartAxisInternal,\n} from '../../types/xy-chart-internals.js';\nimport { getTimeframe } from '../overlay/utils/get-timeframe.js';\n\nexport const Duration = ({\n  axisConfig,\n  scale,\n  formatter,\n  startPixels,\n  endPixels,\n}: {\n  axisConfig: XYChartAxisInternal;\n  scale: AnyXYChartScale;\n  formatter: FormatterWithPrecision | DateTimeFormatter;\n  startPixels: number;\n  endPixels: number;\n}) => {\n  const config = {\n    axisType: axisConfig.type,\n    axisScale: scale,\n  };\n\n  const intl = useIntl();\n\n  const timeframe = getTimeframe(\n    startPixels,\n    endPixels,\n    !axisConfig?.reversed,\n    scale,\n  );\n\n  return (\n    <>\n      {isAnyNumericalScale(config) && !isTimeScale(config) ? (\n        <ChartTooltip.RangeHeader\n          from={config.axisScale.invert(startPixels) as number}\n          to={config.axisScale.invert(endPixels) as number}\n          formatter={formatter}\n          absoluteRange\n          className={tooltipHeader}\n        />\n      ) : null}\n      {isTimeScale(config) ? (\n        <ChartTooltip.Item>\n          <ChartTooltip.TimeFrameHeader\n            from={timeframe.start as Date}\n            to={timeframe.end as Date}\n            limit={DISPLAY_UNITS_LIMIT}\n            showDuration\n            className={tooltipHeader}\n          />\n        </ChartTooltip.Item>\n      ) : null}\n      {isCategoricalScale(config) ? (\n        <ChartTooltip.Item>\n          <TooltipItem>\n            <span\n              className={clsx(\n                'formatted-timeframe',\n                formattedTimeframe,\n                tooltipHeaderCategorical,\n              )}\n            >\n              {`${String(\n                scaleBandInvert(config.axisScale)(startPixels),\n              )} ${intl.formatMessage(XYCHART_MESSAGES.to)} ${String(\n                scaleBandInvert(config.axisScale)(endPixels),\n              )}`}\n            </span>\n          </TooltipItem>\n        </ChartTooltip.Item>\n      ) : null}\n    </>\n  );\n};\n"],
-  "mappings": "AAwDI,mBAEI,KAFJ;AAxDJ,OAAO,UAAU;AACjB,SAAS,eAAe;AAExB,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAK5B,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAKP,SAAS,oBAAoB;AAEtB,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,QAAM,SAAS;AAAA,IACb,UAAU,WAAW;AAAA,IACrB,WAAW;AAAA,EACb;AAEA,QAAM,OAAO,QAAQ;AAErB,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA,CAAC,YAAY;AAAA,IACb;AAAA,EACF;AAEA,SACE,iCACG;AAAA,wBAAoB,MAAM,KAAK,CAAC,YAAY,MAAM,IACjD;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,MAAM,OAAO,UAAU,OAAO,WAAW;AAAA,QACzC,IAAI,OAAO,UAAU,OAAO,SAAS;AAAA,QACrC;AAAA,QACA,eAAa;AAAA,QACb,WAAW;AAAA;AAAA,IACb,IACE;AAAA,IACH,YAAY,MAAM,IACjB,oBAAC,aAAa,MAAb,EACC;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,MAAM,UAAU;AAAA,QAChB,IAAI,UAAU;AAAA,QACd,OAAO;AAAA,QACP,cAAY;AAAA,QACZ,WAAW;AAAA;AAAA,IACb,GACF,IACE;AAAA,IACH,mBAAmB,MAAM,IACxB,oBAAC,aAAa,MAAb,EACC,8BAAC,eACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC,aAAG;AAAA,UACF,gBAAgB,OAAO,SAAS,EAAE,WAAW;AAAA,QAC/C,CAAC,IAAI,KAAK,cAAc,iBAAiB,EAAE,CAAC,IAAI;AAAA,UAC9C,gBAAgB,OAAO,SAAS,EAAE,SAAS;AAAA,QAC7C,CAAC;AAAA;AAAA,IACH,GACF,GACF,IACE;AAAA,KACN;AAEJ;",
-  "names": []
-}

package/esm/core/hooks/useFocusRing.js

@@ -1,79 +0,0 @@
-import {
-  useCallback,
-  useEffect,
-  useState
-} from "react";
-import Borders from "@dynatrace/strato-design-tokens/borders";
-import Colors from "@dynatrace/strato-design-tokens/colors";
-import { useFocusContext as _useFocusContext } from "./useFocusContext.js";
-function useFocusRing(props = {}) {
-  const {
-    color = "neutral",
-    ignoreModality = false,
-    isMinimal = false,
-    focusWithin = false,
-    disabled = false
-  } = props;
-  const [isFocused, setIsFocused] = useState(false);
-  const { modality } = _useFocusContext();
-  useEffect(() => {
-    if (disabled) {
-      setIsFocused(false);
-    }
-  }, [disabled]);
-  const onBlur = useCallback((e) => {
-    if (e.currentTarget === e.target) {
-      setIsFocused(false);
-    }
-  }, []);
-  const onFocus = useCallback((e) => {
-    if (e.currentTarget === e.target) {
-      setIsFocused(true);
-    }
-  }, []);
-  const focusProps = {
-    onFocus,
-    onBlur
-  };
-  if ((ignoreModality || modality === "keyboard") && isFocused || focusWithin && !disabled) {
-    const CapitalizedVariant = `${color.charAt(0).toUpperCase()}${color.slice(
-      1
-    )}`;
-    const outerboxShadow = Colors.Border[CapitalizedVariant].Accent;
-    const innerShadow = Colors.Border[CapitalizedVariant].Default;
-    if (isMinimal) {
-      const minimalFocusStyle = {
-        outline: "none",
-        boxShadow: `inset 0 0 0 ${Borders.Width.Default} ${outerboxShadow}`,
-        borderRadius: `calc(${Borders.Radius.Field.Subdued} / 2)`,
-        backgroundColor: Colors.Background.Field[CapitalizedVariant].Emphasized,
-        "&:focus-visible": { outline: "none" }
-      };
-      return {
-        focusStyles: focusWithin ? { "&:focus-within": minimalFocusStyle } : minimalFocusStyle,
-        isFocusVisible: !focusWithin,
-        focusProps
-      };
-    }
-    const formalFocusStyle = {
-      outline: "none",
-      boxShadow: `inset 0 0 0 ${Borders.Width.Emphasized} ${outerboxShadow}, inset 0 0 0 calc(${Borders.Width.Emphasized} + 1px) ${innerShadow}`,
-      "&:focus-visible": { outline: "none" }
-    };
-    return {
-      focusStyles: focusWithin ? { "&:focus-within": formalFocusStyle } : formalFocusStyle,
-      isFocusVisible: !focusWithin,
-      focusProps
-    };
-  }
-  return {
-    focusStyles: { outline: "none", "&:focus-visible": { outline: "none" } },
-    // fixes the flicker effect from removing the native outline, which otherwise happens too late
-    isFocusVisible: false,
-    focusProps
-  };
-}
-export {
-  useFocusRing
-};
-//# sourceMappingURL=useFocusRing.js.map

package/esm/core/hooks/useFocusRing.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/core/hooks/useFocusRing.ts"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\n//DEPRECATION: [APPDEV-16091] Remove useFocusRing hook based on styled components integration\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  type FocusEvent as ReactFocusEvent,\n} from 'react';\n\nimport Borders from '@dynatrace/strato-design-tokens/borders';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { useFocusContext as _useFocusContext } from './useFocusContext.js';\n\n/**\n * @public\n * @deprecated - Hook is based on styled components integration, use the useFocusRing hook from `@dynatrace/strato-components` instead\n */\nexport interface UseFocusRingProps {\n  /**\n   * A minimal focus outline is available for smaller content elements like links. This variant is applied when set to true.\n   * @defaultValue false\n   */\n  isMinimal?: boolean;\n  /**\n   * Whether or not the modality should be ignored, so that the focus ring is also present if users clicks the element (not just by tabbing to it).\n   * @defaultValue false\n   */\n  ignoreModality?: boolean;\n  /**\n   * The styling color of the element.\n   * @defaultValue `neutral`\n   */\n  color?: 'neutral' | 'primary' | 'success' | 'warning' | 'critical';\n\n  /**\n   * Apply the focus ring styling if an embedded element gains the focus\n   */\n  focusWithin?: boolean;\n\n  /**\n   * Whether the element is disabled. If disabled changes to true, the focus will be removed.\n   */\n  disabled?: boolean;\n}\n\n/**\n * @public\n * @deprecated - Hook is based on styled components integration, use the useFocusRing hook from `@dynatrace/strato-components` instead\n */\nexport interface CSSFocusStylesObject {\n  [key: string]: CSSFocusStylesObject | string | number | undefined;\n  '&:focus-visible'?: CSSFocusStylesObject;\n  '&:focus-within'?: CSSFocusStylesObject;\n}\n\n/**\n * @public\n * @deprecated - Hook is based on styled components integration, use the useFocusRing hook from `@dynatrace/strato-components` instead\n */\nexport type FocusRingProps = {\n  /** The focus styles that depend on modality. */\n  focusStyles: CSSFocusStylesObject;\n  /** Focus handlers used to manage the focus state. Must be applied to the element that receives the focus.*/\n  focusProps: {\n    onFocus: (e: ReactFocusEvent | FocusEvent) => void;\n    onBlur: (e: ReactFocusEvent | FocusEvent) => void;\n  };\n  /** Whether or not the element got focus via keyboard. */\n  isFocusVisible: boolean;\n};\n\n/**\n * Custom hook used to determine focus styling depending on modality.\n * Returns CSS that can be applied to the component in order to show the correct focus outline.\n * @public\n * @deprecated - Hook is based on styled components integration, use the useFocusRing hook from `@dynatrace/strato-components` instead\n */\nexport function useFocusRing(props: UseFocusRingProps = {}): FocusRingProps {\n  const {\n    color = 'neutral',\n    ignoreModality = false,\n    isMinimal = false,\n    focusWithin = false,\n    disabled = false,\n  } = props;\n  const [isFocused, setIsFocused] = useState(false);\n  const { modality } = _useFocusContext();\n\n  useEffect(() => {\n    if (disabled) {\n      setIsFocused(false);\n    }\n  }, [disabled]);\n\n  const onBlur = useCallback((e: ReactFocusEvent | FocusEvent) => {\n    // trigger only when the self element is unfocused (stopPropagation)\n    if (e.currentTarget === e.target) {\n      setIsFocused(false);\n    }\n  }, []);\n\n  const onFocus = useCallback((e: ReactFocusEvent | FocusEvent) => {\n    // trigger only when the self element is focused (stopPropagation)\n    if (e.currentTarget === e.target) {\n      setIsFocused(true);\n    }\n  }, []);\n\n  const focusProps = {\n    onFocus,\n    onBlur,\n  };\n\n  if (\n    ((ignoreModality || modality === 'keyboard') && isFocused) ||\n    (focusWithin && !disabled)\n  ) {\n    const CapitalizedVariant = `${color.charAt(0).toUpperCase()}${color.slice(\n      1,\n    )}` as Capitalize<\n      'neutral' | 'primary' | 'success' | 'warning' | 'critical'\n    >;\n\n    const outerboxShadow = Colors.Border[CapitalizedVariant].Accent;\n    const innerShadow = Colors.Border[CapitalizedVariant].Default;\n\n    if (isMinimal) {\n      const minimalFocusStyle: CSSFocusStylesObject = {\n        outline: 'none',\n        boxShadow: `inset 0 0 0 ${Borders.Width.Default} ${outerboxShadow}`,\n        borderRadius: `calc(${Borders.Radius.Field.Subdued} / 2)`,\n        backgroundColor: Colors.Background.Field[CapitalizedVariant].Emphasized,\n        '&:focus-visible': { outline: 'none' },\n      };\n      return {\n        focusStyles: focusWithin\n          ? { '&:focus-within': minimalFocusStyle }\n          : minimalFocusStyle,\n        isFocusVisible: !focusWithin,\n        focusProps,\n      };\n    }\n\n    const formalFocusStyle: CSSFocusStylesObject = {\n      outline: 'none',\n      boxShadow: `inset 0 0 0 ${Borders.Width.Emphasized} ${outerboxShadow}, inset 0 0 0 calc(${Borders.Width.Emphasized} + 1px) ${innerShadow}`,\n      '&:focus-visible': { outline: 'none' },\n    };\n\n    return {\n      focusStyles: focusWithin\n        ? { '&:focus-within': formalFocusStyle }\n        : formalFocusStyle,\n      isFocusVisible: !focusWithin,\n      focusProps,\n    };\n  }\n\n  return {\n    focusStyles: { outline: 'none', '&:focus-visible': { outline: 'none' } }, // fixes the flicker effect from removing the native outline, which otherwise happens too late\n    isFocusVisible: false,\n    focusProps,\n  };\n}\n"],
-  "mappings": "AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,OAAO,aAAa;AACpB,OAAO,YAAY;AAEnB,SAAS,mBAAmB,wBAAwB;AAkE7C,SAAS,aAAa,QAA2B,CAAC,GAAmB;AAC1E,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,EACb,IAAI;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,SAAS,IAAI,iBAAiB;AAEtC,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,SAAS,YAAY,CAAC,MAAoC;AAE9D,QAAI,EAAE,kBAAkB,EAAE,QAAQ;AAChC,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAAY,CAAC,MAAoC;AAE/D,QAAI,EAAE,kBAAkB,EAAE,QAAQ;AAChC,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,EACF;AAEA,OACI,kBAAkB,aAAa,eAAe,aAC/C,eAAe,CAAC,UACjB;AACA,UAAM,qBAAqB,GAAG,MAAM,OAAO,CAAC,EAAE,YAAY,CAAC,GAAG,MAAM;AAAA,MAClE;AAAA,IACF,CAAC;AAID,UAAM,iBAAiB,OAAO,OAAO,kBAAkB,EAAE;AACzD,UAAM,cAAc,OAAO,OAAO,kBAAkB,EAAE;AAEtD,QAAI,WAAW;AACb,YAAM,oBAA0C;AAAA,QAC9C,SAAS;AAAA,QACT,WAAW,eAAe,QAAQ,MAAM,OAAO,IAAI,cAAc;AAAA,QACjE,cAAc,QAAQ,QAAQ,OAAO,MAAM,OAAO;AAAA,QAClD,iBAAiB,OAAO,WAAW,MAAM,kBAAkB,EAAE;AAAA,QAC7D,mBAAmB,EAAE,SAAS,OAAO;AAAA,MACvC;AACA,aAAO;AAAA,QACL,aAAa,cACT,EAAE,kBAAkB,kBAAkB,IACtC;AAAA,QACJ,gBAAgB,CAAC;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAEA,UAAM,mBAAyC;AAAA,MAC7C,SAAS;AAAA,MACT,WAAW,eAAe,QAAQ,MAAM,UAAU,IAAI,cAAc,sBAAsB,QAAQ,MAAM,UAAU,WAAW,WAAW;AAAA,MACxI,mBAAmB,EAAE,SAAS,OAAO;AAAA,IACvC;AAEA,WAAO;AAAA,MACL,aAAa,cACT,EAAE,kBAAkB,iBAAiB,IACrC;AAAA,MACJ,gBAAgB,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,aAAa,EAAE,SAAS,QAAQ,mBAAmB,EAAE,SAAS,OAAO,EAAE;AAAA;AAAA,IACvE,gBAAgB;AAAA,IAChB;AAAA,EACF;AACF;",
-  "names": []
-}