@primer/components 0.0.0-2021118154017 → 0.0.0-2021118195952

package/lib/_InputField/InputField.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _InputValidation = _interopRequireDefault(require("../_InputValidation"));
+
+var _InputFieldCaption = _interopRequireDefault(require("./InputFieldCaption"));
+
+var _InputFieldLabel = _interopRequireDefault(require("./InputFieldLabel"));
+
+var _InputFieldValidation = _interopRequireDefault(require("./InputFieldValidation"));
+
+var _slots = require("./slots");
+
+var _ValidationAnimationContainer = _interopRequireDefault(require("./ValidationAnimationContainer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const InputField = ({
+  children,
+  disabled,
+  id: idProp,
+  required,
+  validationMap,
+  validationResult
+}) => {
+  var _React$Children$map, _React$Children$map2;
+
+  const id = (0, _.useSSRSafeId)(idProp);
+  const validationChildren = (_React$Children$map = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.isValidElement(child) && child.type === _InputFieldValidation.default ? child : null)) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(Boolean);
+  const captionChildren = (_React$Children$map2 = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.isValidElement(child) && child.type === _InputFieldCaption.default ? child : null)) === null || _React$Children$map2 === void 0 ? void 0 : _React$Children$map2.filter(Boolean);
+  const validationChildToRender = validationChildren === null || validationChildren === void 0 ? void 0 : validationChildren.find(child => child.props.validationKey === validationResult);
+  const validationMessageId = validationChildToRender ? `${id}-validationMsg` : undefined;
+  const captionId = captionChildren !== null && captionChildren !== void 0 && captionChildren.length ? `${id}-caption` : undefined;
+  return /*#__PURE__*/_react.default.createElement(_slots.Slots, {
+    context: {
+      captionId,
+      disabled,
+      id,
+      required,
+      validationMessageId
+    }
+  }, slots => {
+    const isLabelHidden = /*#__PURE__*/_react.default.isValidElement(slots.Label) && slots.Label.props.visuallyHidden;
+
+    if (slots.Input && !slots.Label) {
+      // eslint-disable-next-line no-console
+      console.error(`The input field with the id ${id} MUST have a Label child (e.g.: <TextInputField.Label>).\n\nIf you want to hide the label, pass the 'visuallyHidden' prop to the Label component.`);
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_.Box, {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      sx: isLabelHidden ? {
+        '> *:not(label) + *': {
+          marginTop: 2
+        }
+      } : {
+        '> * + *': {
+          marginTop: 2
+        }
+      }
+    }, _react.default.Children.toArray(children).filter(child => /*#__PURE__*/_react.default.isValidElement(child) && child.type !== _InputFieldValidation.default), slots.Label, slots.Input, validationChildToRender && validationMap && validationResult && validationMessageId && /*#__PURE__*/_react.default.createElement(_ValidationAnimationContainer.default, {
+      show: true
+    }, /*#__PURE__*/_react.default.createElement(_InputValidation.default, {
+      validationStatus: validationMap[validationResult],
+      id: validationMessageId
+    }, validationChildToRender)), slots.Caption);
+  });
+};
+
+InputField.displayName = "InputField";
+
+var _default = Object.assign(InputField, {
+  Caption: _InputFieldCaption.default,
+  Label: _InputFieldLabel.default,
+  Validation: _InputFieldValidation.default
+});
+
+exports.default = _default;

package/lib/_InputField/InputFieldCaption.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const InputFieldCaption: React.FC;
+export default InputFieldCaption;

package/lib/_InputField/InputFieldCaption.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputCaption = _interopRequireDefault(require("../_InputCaption"));
+
+var _slots = require("./slots");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const InputFieldCaption = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement(_slots.Slot, {
+  name: "Caption"
+}, ({
+  captionId,
+  disabled
+}) => /*#__PURE__*/_react.default.createElement(_InputCaption.default, {
+  id: captionId,
+  disabled: disabled
+}, children));
+
+InputFieldCaption.displayName = "InputFieldCaption";
+var _default = InputFieldCaption;
+exports.default = _default;

package/lib/_InputField/InputFieldLabel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface Props {
+    /**
+     * Whether the label should be visually hidden
+     */
+    visuallyHidden?: boolean;
+}
+declare const InputFieldLabel: React.FC<Props>;
+export default InputFieldLabel;

package/lib/_InputField/InputFieldLabel.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputLabel = _interopRequireDefault(require("../_InputLabel"));
+
+var _slots = require("./slots");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const InputFieldLabel = ({
+  children,
+  visuallyHidden
+}) => /*#__PURE__*/_react.default.createElement(_slots.Slot, {
+  name: "Label"
+}, ({
+  disabled,
+  id,
+  required
+}) => /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
+  htmlFor: id,
+  visuallyHidden: visuallyHidden,
+  required: required,
+  disabled: disabled
+}, children));
+
+InputFieldLabel.displayName = "InputFieldLabel";
+var _default = InputFieldLabel;
+exports.default = _default;

package/lib/_InputField/InputFieldValidation.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface InputFieldValidationProps {
+    validationKey: string;
+}
+declare const InputFieldValidation: React.FC<InputFieldValidationProps>;
+export default InputFieldValidation;

package/lib/_InputField/InputFieldValidation.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const InputFieldValidation = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+
+var _default = InputFieldValidation;
+exports.default = _default;

package/lib/_InputField/ToggleInputField.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Props as InputFieldProps } from './InputField';
+import { FormValidationStatus } from '../utils/types/FormValidationStatus';
+export interface ToggleInputFieldProps extends Pick<InputFieldProps, 'disabled' | 'id'> {
+    /**
+     * Styles the field to visually communicate the result of form validation
+     */
+    validationStatus?: FormValidationStatus;
+}
+declare const _default: React.FC<ToggleInputFieldProps> & {
+    LeadingVisual: React.FC<{}>;
+};
+export default _default;

package/lib/_InputField/ToggleInputField.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _constants = require("../constants");
+
+var _slots = require("./slots");
+
+var _ToggleInputLeadingVisual = _interopRequireDefault(require("./ToggleInputLeadingVisual"));
+
+var _InputFieldCaption = _interopRequireDefault(require("./InputFieldCaption"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ToggleInputField = ({
+  children,
+  disabled,
+  id: idProp,
+  validationStatus
+}) => {
+  var _React$Children$map;
+
+  const id = (0, _.useSSRSafeId)(idProp);
+  const captionChildren = (_React$Children$map = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.isValidElement(child) && child.type === _InputFieldCaption.default ? child : null)) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(Boolean);
+  const captionId = captionChildren !== null && captionChildren !== void 0 && captionChildren.length ? `${id}-caption` : undefined;
+  return /*#__PURE__*/_react.default.createElement(_slots.Slots, {
+    context: {
+      captionId,
+      disabled,
+      id,
+      validationStatus
+    }
+  }, slots => {
+    return /*#__PURE__*/_react.default.createElement(_.Box, {
+      display: "flex",
+      alignItems: slots.LeadingVisual ? 'center' : undefined
+    }, children, /*#__PURE__*/_react.default.createElement(_.Box, {
+      sx: {
+        '> input': {
+          marginLeft: 0,
+          marginRight: 0
+        }
+      }
+    }, slots.Input), slots.LeadingVisual && /*#__PURE__*/_react.default.createElement(_.Box, {
+      color: disabled ? 'fg.muted' : 'fg.default',
+      sx: {
+        '> *': {
+          minWidth: slots.Caption ? (0, _constants.get)('fontSizes.4') : (0, _constants.get)('fontSizes.2'),
+          minHeight: slots.Caption ? (0, _constants.get)('fontSizes.4') : (0, _constants.get)('fontSizes.2'),
+          fill: 'currentColor'
+        }
+      },
+      ml: 2
+    }, slots.LeadingVisual), /*#__PURE__*/_react.default.isValidElement(slots.Label) && !slots.Label.props.visuallyHidden || slots.Caption ? /*#__PURE__*/_react.default.createElement(_.Box, {
+      display: "flex",
+      flexDirection: "column",
+      ml: 2
+    }, slots.Label, slots.Caption) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, slots.Label, slots.Caption));
+  });
+};
+
+ToggleInputField.displayName = "ToggleInputField";
+
+var _default = Object.assign(ToggleInputField, {
+  LeadingVisual: _ToggleInputLeadingVisual.default
+});
+
+exports.default = _default;

package/lib/_InputField/ToggleInputLeadingVisual.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ToggleInputLeadingVisual: React.FC;
+export default ToggleInputLeadingVisual;

package/lib/_InputField/ToggleInputLeadingVisual.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _slots = require("./slots");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ToggleInputLeadingVisual = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement(_slots.Slot, {
+  name: "LeadingVisual"
+}, children);
+
+ToggleInputLeadingVisual.displayName = "ToggleInputLeadingVisual";
+var _default = ToggleInputLeadingVisual;
+exports.default = _default;

package/lib/_InputField/ValidationAnimationContainer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    show?: boolean;
+}
+declare const ValidationAnimationContainer: React.FC<Props>;
+export default ValidationAnimationContainer;

package/lib/_InputField/ValidationAnimationContainer.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _ = require("..");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const fadeIn = (0, _styledComponents.keyframes)(["0%{opacity:0;transform:translateY(-100%);}100%{opacity:1;transform:translateY(0);}"]); // using easeOutQuint easing fn https://easings.net/#easeOutQuint
+
+const AnimatedElement = _styledComponents.default.div.withConfig({
+  displayName: "ValidationAnimationContainer__AnimatedElement",
+  componentId: "sc-1grmoaz-0"
+})(["animation:", ";"], props => props.show && (0, _styledComponents.css)(["170ms ", " cubic-bezier(0.44,0.74,0.36,1);"], fadeIn));
+
+const ValidationAnimationContainer = ({
+  show,
+  children
+}) => {
+  const [shouldRender, setRender] = (0, _react.useState)(show);
+  (0, _react.useEffect)(() => {
+    if (show) setRender(true);
+  }, [show]);
+
+  const onAnimationEnd = () => {
+    if (!show) setRender(false);
+  };
+
+  return shouldRender ? /*#__PURE__*/_react.default.createElement(_.Box, {
+    height: show ? 'auto' : 0,
+    overflow: "hidden"
+  }, /*#__PURE__*/_react.default.createElement(AnimatedElement, {
+    show: show,
+    onAnimationEnd: onAnimationEnd
+  }, children)) : null;
+};
+
+var _default = ValidationAnimationContainer;
+exports.default = _default;

package/lib/_InputField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './InputField';

package/lib/_InputField/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _InputField.default;
+  }
+});
+
+var _InputField = _interopRequireDefault(require("./InputField"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/_InputField/slots.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const Slots: import("react").FC<{
+    context?: Record<string, unknown> | undefined;
+    children: (slots: {
+        LeadingVisual?: import("react").ReactNode;
+        Caption?: import("react").ReactNode;
+        Input?: import("react").ReactNode;
+        Label?: import("react").ReactNode;
+    }) => import("react").ReactNode;
+}>, Slot: import("react").FC<{
+    name: "LeadingVisual" | "Caption" | "Input" | "Label";
+    children: import("react").ReactNode;
+}>;

package/lib/_InputField/slots.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Slot = exports.Slots = void 0;
+
+var _createSlots = _interopRequireDefault(require("../utils/create-slots"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const {
+  Slots,
+  Slot
+} = (0, _createSlots.default)(['Caption', 'Input', 'Label', 'LeadingVisual']);
+exports.Slot = Slot;
+exports.Slots = Slots;

package/lib/_InputLabel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props extends React.HTMLProps<HTMLLabelElement> {
+    disabled?: boolean;
+    required?: boolean;
+    visuallyHidden?: boolean;
+}
+declare const InputLabel: React.FC<Props>;
+export default InputLabel;

package/lib/_InputLabel.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require(".");
+
+var _VisuallyHidden = _interopRequireDefault(require("./_VisuallyHidden"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const InputLabel = ({
+  children,
+  disabled,
+  required,
+  visuallyHidden,
+  htmlFor
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_VisuallyHidden.default, {
+    isVisible: !visuallyHidden,
+    as: "label",
+    htmlFor: htmlFor,
+    title: required ? 'required field' : undefined,
+    sx: {
+      fontWeight: 'bold',
+      fontSize: 1,
+      display: 'block',
+      color: disabled ? 'fg.muted' : 'fg.default',
+      cursor: 'pointer'
+    }
+  }, required ? /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    as: "span"
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    mr: 1
+  }, children), /*#__PURE__*/_react.default.createElement("span", null, "*")) : children);
+};
+
+InputLabel.displayName = "InputLabel";
+var _default = InputLabel;
+exports.default = _default;

package/lib/_InputValidation.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FormValidationStatus } from './utils/types/FormValidationStatus';
+interface Props {
+    id: string;
+    validationStatus?: FormValidationStatus;
+}
+declare const InputValidation: React.FC<Props>;
+export default InputValidation;

package/lib/_InputValidation.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require(".");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const validationIconMap = {
+  success: _octiconsReact.CheckCircleFillIcon,
+  error: _octiconsReact.AlertFillIcon
+};
+const validationColorMap = {
+  success: 'success.fg',
+  error: 'danger.fg'
+};
+
+const InputValidation = ({
+  children,
+  id,
+  validationStatus
+}) => {
+  const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined;
+  const fgColor = validationStatus ? validationColorMap[validationStatus] : undefined;
+  return /*#__PURE__*/_react.default.createElement(_.Text, {
+    fontSize: 0,
+    sx: {
+      alignItems: 'center',
+      color: fgColor,
+      display: 'flex',
+      a: {
+        color: 'currentColor',
+        textDecoration: 'underline'
+      }
+    }
+  }, IconComponent && /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "span",
+    mr: 1,
+    sx: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/_react.default.createElement(IconComponent, {
+    size: 12,
+    fill: "currentColor"
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    id: id
+  }, children));
+};
+
+InputValidation.displayName = "InputValidation";
+var _default = InputValidation;
+exports.default = _default;

package/lib/_TextInputWrapper.d.ts

@@ -0,0 +1,10 @@
+import { MaxWidthProps, MinWidthProps, WidthProps } from 'styled-system';
+import { SxProp } from './sx';
+declare const TextInputWrapper: import("styled-components").StyledComponent<"span", any, {
+    disabled?: boolean | undefined;
+    hasIcon?: boolean | undefined;
+    block?: boolean | undefined;
+    contrast?: boolean | undefined;
+    variant?: "small" | "large" | undefined;
+} & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & MinWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>> & MaxWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>> & SxProp, never>;
+export default TextInputWrapper;

package/lib/_TextInputWrapper.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styledSystem = require("styled-system");
+
+var _constants = require("./constants");
+
+var _sx = _interopRequireDefault(require("./sx"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const sizeVariants = (0, _styledSystem.variant)({
+  variants: {
+    small: {
+      minHeight: '28px',
+      px: 2,
+      py: '3px',
+      fontSize: 0,
+      lineHeight: '20px'
+    },
+    large: {
+      px: 2,
+      py: '10px',
+      fontSize: 3
+    }
+  }
+});
+
+const TextInputWrapper = _styledComponents.default.span.withConfig({
+  displayName: "_TextInputWrapper__TextInputWrapper",
+  componentId: "sc-5vfcis-0"
+})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
+  if (props.hasIcon) {
+    return (0, _styledComponents.css)(["padding:0;"]);
+  } else {
+    return (0, _styledComponents.css)(["padding:6px 12px;"]);
+  }
+}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), props => props.block && props.hasIcon && (0, _styledComponents.css)(["display:flex;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
+
+var _default = TextInputWrapper;
+exports.default = _default;

package/lib/_UnstyledTextInput.d.ts

@@ -0,0 +1,2 @@
+declare const UnstyledTextInput: import("styled-components").StyledComponent<"input", any, import("./sx").SxProp, never>;
+export default UnstyledTextInput;

package/lib/_UnstyledTextInput.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _sx = _interopRequireDefault(require("./sx"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const UnstyledTextInput = _styledComponents.default.input.withConfig({
+  displayName: "_UnstyledTextInput__UnstyledTextInput",
+  componentId: "sc-1jgl33s-0"
+})(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}", ";"], _sx.default);
+
+var _default = UnstyledTextInput;
+exports.default = _default;

package/lib/_VisuallyHidden.d.ts

@@ -0,0 +1,6 @@
+import { SxProp } from './sx';
+interface Props {
+    isVisible?: boolean;
+}
+declare const VisuallyHidden: import("styled-components").StyledComponent<"span", any, Props & SxProp, never>;
+export default VisuallyHidden;