@atlaskit/textfield 6.8.2 → 7.0.0

package/dist/esm/styles.js

@@ -1,174 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { fg } from '@atlaskit/platform-feature-flags';
-import { media } from '@atlaskit/primitives';
-import { B200, N0, N10, N100, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
-var backgroundColor = {
-  standard: "var(--ds-background-input, ".concat(N10, ")"),
-  subtle: 'transparent',
-  none: 'transparent'
-};
-var backgroundColorFocus = {
-  standard: "var(--ds-background-input-pressed, ".concat(N0, ")"),
-  subtle: "var(--ds-background-input-pressed, ".concat(N0, ")"),
-  none: 'transparent'
-};
-var backgroundColorHover = {
-  standard: "var(--ds-background-input-hovered, ".concat(N30, ")"),
-  subtle: "var(--ds-background-input-hovered, ".concat(N30, ")"),
-  none: 'transparent'
-};
-var borderColor = {
-  standard: "var(--ds-border-input, ".concat(N100, ")"),
-  subtle: 'transparent',
-  none: 'transparent'
-};
-var borderColorFocus = {
-  standard: "var(--ds-border-focused, ".concat(B200, ")"),
-  subtle: "var(--ds-border-focused, ".concat(B200, ")"),
-  none: 'transparent'
-};
-var borderColorHover = {
-  standard: "var(--ds-border-input, ".concat(N100, ")"),
-  subtle: "var(--ds-border-input, transparent)",
-  none: 'transparent'
-};
-var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor(appearance) {
-  return {
-    backgroundColor: backgroundColor[appearance],
-    borderColor: borderColor[appearance],
-    color: "var(--ds-text, ".concat(N900, ")"),
-    cursor: 'text',
-    '&:hover:not([data-disabled])': {
-      backgroundColor: backgroundColorHover[appearance],
-      borderColor: borderColorHover[appearance]
-    },
-    '&:focus-within:not([data-disabled])': {
-      backgroundColor: backgroundColorFocus[appearance],
-      borderColor: borderColorFocus[appearance],
-      boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance])
-    },
-    '&[data-disabled]': _objectSpread({
-      color: "var(--ds-text-disabled, ".concat(N70, ")"),
-      cursor: 'not-allowed'
-    }, appearance === 'standard' && {
-      backgroundColor: "var(--ds-background-disabled, ".concat(N10, ")"),
-      borderColor: "var(--ds-background-disabled, ".concat(N10, ")")
-    }),
-    '&[data-invalid], &[data-invalid]:hover': {
-      borderColor: "var(--ds-border-danger, ".concat(R400, ")"),
-      boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")"))
-    },
-    '&[data-invalid]:focus-within': {
-      backgroundColor: "var(--ds-background-input-pressed, ".concat(N0, ")"),
-      borderColor: "var(--ds-border-focused, ".concat(B200, ")"),
-      boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B200, ")"))
-    },
-    '@media screen and (-ms-high-contrast: active)': {
-      '&[data-invalid]:focus-within': {
-        borderColor: 'Highlight'
-      },
-      '&:focus-within': {
-        borderColor: 'Highlight'
-      },
-      '&[data-disabled]': {
-        borderColor: 'GrayText'
-      }
-    }
-  };
-};
-var widthMap = {
-  xsmall: 80,
-  small: 160,
-  medium: 240,
-  large: 320,
-  xlarge: 480
-};
-var getMaxWidth = function getMaxWidth(width) {
-  return !width ? "100%" : width in widthMap ? widthMap[width] : +width;
-};
-export var containerStyles = function containerStyles(appearance, width) {
-  return _objectSpread(_objectSpread(_objectSpread({
-    alignItems: 'center'
-  }, getContainerTextBgAndBorderColor(appearance)), {}, {
-    borderRadius: 3,
-    borderWidth: "var(--ds-border-width, 1px)"
-  }, appearance !== 'none' ? {
-    padding: "var(--ds-border-width, 1px)".concat(" 0")
-  } : {}), {}, {
-    borderStyle: appearance === 'none' ? 'none' : 'solid',
-    boxSizing: 'border-box',
-    display: 'flex',
-    flex: '1 1 100%',
-    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-    justifyContent: 'space-between',
-    maxWidth: getMaxWidth(width),
-    overflow: 'hidden',
-    transition: "background-color 0.2s ease-in-out, border-color 0.2s ease-in-out",
-    wordWrap: 'break-word',
-    verticalAlign: 'top',
-    pointerEvents: 'auto'
-  });
-};
-export var inputStyles = function inputStyles() {
-  return _defineProperty({
-    backgroundColor: 'transparent',
-    border: 0,
-    boxSizing: 'border-box',
-    color: 'inherit',
-    cursor: 'inherit',
-    font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-    minWidth: '0',
-    outline: 'none',
-    width: '100%',
-    '&[data-monospaced]': _defineProperty({
-      fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
-    }, media.above.xs, {
-      // Reapply the monospaced font family as the font declaration in a breakpoint on the root will override it otherwise
-      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-      fontFamily: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)" : undefined
-    }),
-    '&[data-compact]': {
-      padding: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)") : "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
-    },
-    '&:not([data-compact])': {
-      padding: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-075, 6px)") : "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
-    },
-    '&[disabled]': {
-      // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
-      // which takes priority over color and makes the text unreadable. Need to
-      // override it with the color we want.
-      WebkitTextFillColor: "var(--ds-text-disabled, ".concat(N70, ")")
-    },
-    // Hide the clear indicator on Edge (Windows only)
-    '&::-ms-clear': {
-      display: 'none'
-    },
-    '&:invalid': {
-      boxShadow: 'none'
-    },
-    '&:placeholder-shown': {
-      textOverflow: 'ellipsis'
-    },
-    '&::placeholder': {
-      color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-      '&:disabled': {
-        color: "var(--ds-text-disabled, ".concat(N70, ")")
-      }
-    },
-    '@media screen and (-ms-high-contrast: active)': {
-      '&[disabled]': {
-        color: 'GrayText'
-      }
-    }
-  }, media.above.xs, {
-    font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : undefined,
-    '&[data-compact]': {
-      padding: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)") : undefined
-    },
-    '&:not([data-compact])': {
-      padding: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)") : undefined
-    }
-  });
-};

package/dist/types/styles.d.ts

@@ -1,113 +0,0 @@
-import { type Appearance } from './types';
-export declare const containerStyles: (appearance: Appearance, width?: string | number) => {
-    readonly borderStyle: "none" | "solid";
-    readonly boxSizing: "border-box";
-    readonly display: "flex";
-    readonly flex: "1 1 100%";
-    readonly font: "var(--ds-font-body)";
-    readonly justifyContent: "space-between";
-    readonly maxWidth: string | number;
-    readonly overflow: "hidden";
-    readonly transition: "background-color 0.2s ease-in-out, border-color 0.2s ease-in-out";
-    readonly wordWrap: "break-word";
-    readonly verticalAlign: "top";
-    readonly pointerEvents: "auto";
-    readonly padding?: string | undefined;
-    readonly borderRadius: 3;
-    readonly borderWidth: "var(--ds-border-width)";
-    readonly backgroundColor: string;
-    readonly borderColor: string;
-    readonly color: "var(--ds-text)";
-    readonly cursor: string;
-    readonly '&:hover:not([data-disabled])': {
-        backgroundColor: string;
-        borderColor: string;
-    };
-    readonly '&:focus-within:not([data-disabled])': {
-        backgroundColor: string;
-        borderColor: string;
-        boxShadow: string;
-    };
-    readonly '&[data-disabled]': {
-        backgroundColor?: "var(--ds-background-disabled)" | undefined;
-        borderColor?: "var(--ds-background-disabled)" | undefined;
-        color: "var(--ds-text-disabled)";
-        cursor: string;
-    };
-    readonly '&[data-invalid], &[data-invalid]:hover': {
-        borderColor: "var(--ds-border-danger)";
-        boxShadow: string;
-    };
-    readonly '&[data-invalid]:focus-within': {
-        backgroundColor: "var(--ds-background-input-pressed)";
-        borderColor: "var(--ds-border-focused)";
-        boxShadow: string;
-    };
-    readonly '@media screen and (-ms-high-contrast: active)': {
-        '&[data-invalid]:focus-within': {
-            borderColor: string;
-        };
-        '&:focus-within': {
-            borderColor: string;
-        };
-        '&[data-disabled]': {
-            borderColor: string;
-        };
-    };
-    readonly alignItems: "center";
-};
-export declare const inputStyles: () => {
-    readonly backgroundColor: "transparent";
-    readonly border: 0;
-    readonly boxSizing: "border-box";
-    readonly color: "inherit";
-    readonly cursor: "inherit";
-    readonly font: "var(--ds-font-body)" | "var(--ds-font-body-large)";
-    readonly minWidth: "0";
-    readonly outline: "none";
-    readonly width: "100%";
-    readonly '&[data-monospaced]': {
-        readonly fontFamily: "var(--ds-font-family-code)";
-        readonly "@media (min-width: 30rem)": {
-            readonly fontFamily: "var(--ds-font-family-code)" | undefined;
-        };
-    };
-    readonly '&[data-compact]': {
-        readonly padding: string;
-    };
-    readonly '&:not([data-compact])': {
-        readonly padding: string;
-    };
-    readonly '&[disabled]': {
-        readonly WebkitTextFillColor: "var(--ds-text-disabled)";
-    };
-    readonly '&::-ms-clear': {
-        readonly display: "none";
-    };
-    readonly '&:invalid': {
-        readonly boxShadow: "none";
-    };
-    readonly '&:placeholder-shown': {
-        readonly textOverflow: "ellipsis";
-    };
-    readonly '&::placeholder': {
-        readonly color: "var(--ds-text-subtlest)";
-        readonly '&:disabled': {
-            readonly color: "var(--ds-text-disabled)";
-        };
-    };
-    readonly '@media screen and (-ms-high-contrast: active)': {
-        readonly '&[disabled]': {
-            readonly color: "GrayText";
-        };
-    };
-    readonly "@media (min-width: 30rem)": {
-        readonly font: "var(--ds-font-body)" | undefined;
-        readonly '&[data-compact]': {
-            readonly padding: string | undefined;
-        };
-        readonly '&:not([data-compact])': {
-            readonly padding: string | undefined;
-        };
-    };
-};

package/dist/types-ts4.5/styles.d.ts

@@ -1,113 +0,0 @@
-import { type Appearance } from './types';
-export declare const containerStyles: (appearance: Appearance, width?: string | number) => {
-    readonly borderStyle: "none" | "solid";
-    readonly boxSizing: "border-box";
-    readonly display: "flex";
-    readonly flex: "1 1 100%";
-    readonly font: "var(--ds-font-body)";
-    readonly justifyContent: "space-between";
-    readonly maxWidth: string | number;
-    readonly overflow: "hidden";
-    readonly transition: "background-color 0.2s ease-in-out, border-color 0.2s ease-in-out";
-    readonly wordWrap: "break-word";
-    readonly verticalAlign: "top";
-    readonly pointerEvents: "auto";
-    readonly padding?: string | undefined;
-    readonly borderRadius: 3;
-    readonly borderWidth: "var(--ds-border-width)";
-    readonly backgroundColor: string;
-    readonly borderColor: string;
-    readonly color: "var(--ds-text)";
-    readonly cursor: string;
-    readonly '&:hover:not([data-disabled])': {
-        backgroundColor: string;
-        borderColor: string;
-    };
-    readonly '&:focus-within:not([data-disabled])': {
-        backgroundColor: string;
-        borderColor: string;
-        boxShadow: string;
-    };
-    readonly '&[data-disabled]': {
-        backgroundColor?: "var(--ds-background-disabled)" | undefined;
-        borderColor?: "var(--ds-background-disabled)" | undefined;
-        color: "var(--ds-text-disabled)";
-        cursor: string;
-    };
-    readonly '&[data-invalid], &[data-invalid]:hover': {
-        borderColor: "var(--ds-border-danger)";
-        boxShadow: string;
-    };
-    readonly '&[data-invalid]:focus-within': {
-        backgroundColor: "var(--ds-background-input-pressed)";
-        borderColor: "var(--ds-border-focused)";
-        boxShadow: string;
-    };
-    readonly '@media screen and (-ms-high-contrast: active)': {
-        '&[data-invalid]:focus-within': {
-            borderColor: string;
-        };
-        '&:focus-within': {
-            borderColor: string;
-        };
-        '&[data-disabled]': {
-            borderColor: string;
-        };
-    };
-    readonly alignItems: "center";
-};
-export declare const inputStyles: () => {
-    readonly backgroundColor: "transparent";
-    readonly border: 0;
-    readonly boxSizing: "border-box";
-    readonly color: "inherit";
-    readonly cursor: "inherit";
-    readonly font: "var(--ds-font-body)" | "var(--ds-font-body-large)";
-    readonly minWidth: "0";
-    readonly outline: "none";
-    readonly width: "100%";
-    readonly '&[data-monospaced]': {
-        readonly fontFamily: "var(--ds-font-family-code)";
-        readonly "@media (min-width: 30rem)": {
-            readonly fontFamily: "var(--ds-font-family-code)" | undefined;
-        };
-    };
-    readonly '&[data-compact]': {
-        readonly padding: string;
-    };
-    readonly '&:not([data-compact])': {
-        readonly padding: string;
-    };
-    readonly '&[disabled]': {
-        readonly WebkitTextFillColor: "var(--ds-text-disabled)";
-    };
-    readonly '&::-ms-clear': {
-        readonly display: "none";
-    };
-    readonly '&:invalid': {
-        readonly boxShadow: "none";
-    };
-    readonly '&:placeholder-shown': {
-        readonly textOverflow: "ellipsis";
-    };
-    readonly '&::placeholder': {
-        readonly color: "var(--ds-text-subtlest)";
-        readonly '&:disabled': {
-            readonly color: "var(--ds-text-disabled)";
-        };
-    };
-    readonly '@media screen and (-ms-high-contrast: active)': {
-        readonly '&[disabled]': {
-            readonly color: "GrayText";
-        };
-    };
-    readonly "@media (min-width: 30rem)": {
-        readonly font: "var(--ds-font-body)" | undefined;
-        readonly '&[data-compact]': {
-            readonly padding: string | undefined;
-        };
-        readonly '&:not([data-compact])': {
-            readonly padding: string | undefined;
-        };
-    };
-};