@artsy/palette 38.7.2 → 38.9.0

package/dist/elements/Pagination/Pagination.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { FC } from "react";
 import { FlexProps } from "../Flex";
 import { BoxProps } from "../Box";
 interface PageCursor {
@@ -26,7 +26,8 @@ export declare const Pagination: React.FC<PaginationProps>;
 export interface NextPrevButtonProps extends BoxProps {
     disabled: boolean;
     getHref?: (page: number) => string;
-    onClick: (event: React.MouseEvent) => void;
+    onClick?: (event: React.MouseEvent) => void;
     page?: number;
 }
+export declare const PaginationSkeleton: FC;
 export {};

package/dist/elements/Pagination/Pagination.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Pagination = exports.PageLink = void 0;
+exports.PaginationSkeleton = exports.Pagination = exports.PageLink = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ChevronLeftIcon = _interopRequireDefault(require("@artsy/icons/ChevronLeftIcon"));
 var _ChevronRightIcon = _interopRequireDefault(require("@artsy/icons/ChevronRightIcon"));
@@ -11,6 +11,7 @@ var _Flex = require("../Flex");
 var _Text = require("../Text");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Box = require("../Box");
+var _Skeleton = require("../Skeleton");
 var _excluded = ["getHref", "hasNextPage", "onClick", "onNext", "pageCursors"],
   _excluded2 = ["getHref", "onClick", "pageCursor"],
   _excluded3 = ["disabled", "getHref", "onClick", "page", "children"];
@@ -44,15 +45,7 @@ var Pagination = function Pagination(_ref) {
     onNext && onNext(event, nextPage);
   };
   var nextPage = ((previous === null || previous === void 0 ? void 0 : previous.page) || 0) + 2;
-  return /*#__PURE__*/_react.default.createElement(_Text.Text, _extends({
-    as: "nav",
-    "aria-label": "Pagination",
-    display: "flex",
-    variant: "sm",
-    lineHeight: 1,
-    alignItems: "center",
-    justifyContent: "space-between"
-  }, rest), /*#__PURE__*/_react.default.createElement(NextPrevButton, {
+  return /*#__PURE__*/_react.default.createElement(PaginationContainer, rest, /*#__PURE__*/_react.default.createElement(NextPrevButton, {
     "data-testid": "prev",
     "aria-label": "Previous",
     getHref: getHref,
@@ -161,4 +154,37 @@ var NextPrevButton = function NextPrevButton(_ref3) {
   }, rest), children);
 };
 NextPrevButton.displayName = "NextPrevButton";
+var PaginationContainer = (0, _styledComponents.default)(_Text.Text).attrs({
+  as: "nav",
+  "aria-label": "Pagination",
+  variant: "sm"
+}).withConfig({
+  displayName: "Pagination__PaginationContainer",
+  componentId: "sc-1r2jw01-1"
+})(["display:flex;align-items:center;justify-content:space-between;line-height:1;"]);
+var PaginationSkeleton = function PaginationSkeleton() {
+  return /*#__PURE__*/_react.default.createElement(PaginationContainer, {
+    "aria-hidden": true
+  }, /*#__PURE__*/_react.default.createElement(NextPrevButton, {
+    disabled: true,
+    pr: 0.5
+  }, /*#__PURE__*/_react.default.createElement(_ChevronLeftIcon.default, {
+    mr: 0.5,
+    height: 12,
+    width: 12
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Prev")), /*#__PURE__*/_react.default.createElement(_Skeleton.SkeletonBox, {
+    width: 100
+  }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    opacity: 0
+  }, "0")), /*#__PURE__*/_react.default.createElement(NextPrevButton, {
+    disabled: true,
+    pl: 0.5
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Next"), /*#__PURE__*/_react.default.createElement(_ChevronRightIcon.default, {
+    ml: 0.5,
+    height: 12,
+    width: 12
+  })));
+};
+exports.PaginationSkeleton = PaginationSkeleton;
+PaginationSkeleton.displayName = "PaginationSkeleton";
 //# sourceMappingURL=Pagination.js.map

package/dist/elements/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["_react","_interopRequireDefault","require","_ChevronLeftIcon","_ChevronRightIcon","_Flex","_Text","_styledComponents","_Box","_excluded","_excluded2","_excluded3","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","PageLink","styled","a","withConfig","displayName","componentId","boxMixin","exports","Pagination","_ref","getHref","hasNextPage","onClick","onNext","_ref$pageCursors","pageCursors","around","first","last","previous","rest","handlePrevClick","event","cursor","page","handleNextClick","nextPage","createElement","Text","as","display","variant","lineHeight","alignItems","justifyContent","NextPrevButton","disabled","pr","mr","height","width","Flex","Fragment","Page","pageCursor","p","color","map","pl","ml","_ref2","_ref2$pageCursor","isCurrent","handleClick","href","borderRadius","_ref3","children","py","style","opacity","pointerEvents"],"sources":["../../../src/elements/Pagination/Pagination.tsx"],"sourcesContent":["import React from \"react\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport styled from \"styled-components\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\ninterface PageCursor {\n  cursor: string\n  isCurrent: boolean\n  page: number\n}\n\nexport interface PageCursors {\n  around: PageCursor[]\n  first: PageCursor\n  last: PageCursor\n  previous: PageCursor\n}\n\nexport const PageLink = styled.a<BoxProps>`\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n  ${boxMixin}\n`\n\nexport interface PaginationProps extends FlexProps {\n  getHref?: (page: number) => string\n  hasNextPage: boolean\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  onNext?: (event: React.MouseEvent, page: number) => void\n  pageCursors: PageCursors\n  scrollTo?: string\n}\n\n/** Pagination */\nexport const Pagination: React.FC<PaginationProps> = ({\n  getHref,\n  hasNextPage,\n  onClick,\n  onNext,\n  pageCursors: { around, first, last, previous },\n  ...rest\n}) => {\n  const handlePrevClick = (event: React.MouseEvent) => {\n    if (previous) {\n      onClick && onClick(previous.cursor, previous.page, event)\n    }\n  }\n\n  const handleNextClick = (event: React.MouseEvent) => {\n    onNext && onNext(event, nextPage)\n  }\n\n  const nextPage = (previous?.page || 0) + 2\n\n  return (\n    <Text\n      as=\"nav\"\n      aria-label=\"Pagination\"\n      display=\"flex\"\n      variant=\"sm\"\n      lineHeight={1}\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      {...rest}\n    >\n      <NextPrevButton\n        data-testid=\"prev\"\n        aria-label=\"Previous\"\n        getHref={getHref}\n        onClick={handlePrevClick}\n        page={previous?.page}\n        disabled={!previous}\n        pr={0.5}\n      >\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <Flex>\n        {first && (\n          <>\n            <Page onClick={onClick} pageCursor={first} getHref={getHref} />\n            <Flex alignItems=\"center\" p={0.5} color=\"black60\">\n              …\n            </Flex>\n          </>\n        )}\n\n        {around.map((pageCursor) => {\n          return (\n            <Page\n              getHref={getHref}\n              key={pageCursor.page}\n              onClick={onClick}\n              pageCursor={pageCursor}\n            />\n          )\n        })}\n\n        {last && (\n          <>\n            <Flex alignItems=\"center\" p={0.5} color=\"black60\">\n              …\n            </Flex>\n\n            <Page onClick={onClick} pageCursor={last} getHref={getHref} />\n          </>\n        )}\n      </Flex>\n\n      <NextPrevButton\n        data-testid=\"next\"\n        getHref={getHref}\n        onClick={handleNextClick}\n        page={nextPage}\n        disabled={!hasNextPage}\n        pl={0.5}\n      >\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </Text>\n  )\n}\n\ninterface PageProps extends BoxProps {\n  getHref?: (page: number) => string\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  pageCursor: PageCursor\n}\n\nconst Page: React.FC<PageProps> = ({\n  getHref,\n  onClick,\n  pageCursor: { cursor, isCurrent, page },\n  ...rest\n}) => {\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n  ) => {\n    onClick && onClick(cursor, page, event)\n  }\n\n  const href = page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  return (\n    <PageLink\n      href={href}\n      onClick={handleClick}\n      borderRadius={2}\n      display=\"flex\"\n      alignItems=\"center\"\n      p={0.5}\n      {...(isCurrent\n        ? { color: \"black100\", \"aria-current\": \"page\" }\n        : { color: \"black60\" })}\n      {...rest}\n    >\n      {page}\n    </PageLink>\n  )\n}\n\nexport interface NextPrevButtonProps extends BoxProps {\n  disabled: boolean\n  getHref?: (page: number) => string\n  onClick: (event: React.MouseEvent) => void\n  page?: number\n}\n\nconst NextPrevButton: React.FC<NextPrevButtonProps> = ({\n  disabled,\n  getHref,\n  onClick,\n  page,\n  children,\n  ...rest\n}) => {\n  const href =\n    !disabled && page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  if (disabled) {\n    return (\n      <Flex\n        display=\"flex\"\n        alignItems=\"center\"\n        color=\"black30\"\n        py={0.5}\n        {...rest}\n      >\n        {children}\n      </Flex>\n    )\n  }\n\n  return (\n    <PageLink\n      href={href}\n      onClick={onClick}\n      display=\"flex\"\n      alignItems=\"center\"\n      py={0.5}\n      style={\n        !disabled\n          ? {\n              opacity: 1,\n              pointerEvents: \"inherit\",\n            }\n          : {\n              opacity: 0.1,\n              pointerEvents: \"none\",\n            }\n      }\n      {...rest}\n    >\n      {children}\n    </PageLink>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":["_react","_interopRequireDefault","require","_ChevronLeftIcon","_ChevronRightIcon","_Flex","_Text","_styledComponents","_Box","_Skeleton","_excluded","_excluded2","_excluded3","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","PageLink","styled","a","withConfig","displayName","componentId","boxMixin","exports","Pagination","_ref","getHref","hasNextPage","onClick","onNext","_ref$pageCursors","pageCursors","around","first","last","previous","rest","handlePrevClick","event","cursor","page","handleNextClick","nextPage","createElement","PaginationContainer","NextPrevButton","disabled","pr","mr","height","width","Flex","Fragment","Page","pageCursor","alignItems","p","color","map","pl","ml","_ref2","_ref2$pageCursor","isCurrent","handleClick","href","borderRadius","display","_ref3","children","py","style","opacity","pointerEvents","Text","attrs","as","variant","PaginationSkeleton","SkeletonBox","Box"],"sources":["../../../src/elements/Pagination/Pagination.tsx"],"sourcesContent":["import React, { FC } from \"react\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport styled from \"styled-components\"\nimport { Box, boxMixin, BoxProps } from \"../Box\"\nimport { SkeletonBox } from \"../Skeleton\"\n\ninterface PageCursor {\n  cursor: string\n  isCurrent: boolean\n  page: number\n}\n\nexport interface PageCursors {\n  around: PageCursor[]\n  first: PageCursor\n  last: PageCursor\n  previous: PageCursor\n}\n\nexport const PageLink = styled.a<BoxProps>`\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n  ${boxMixin}\n`\n\nexport interface PaginationProps extends FlexProps {\n  getHref?: (page: number) => string\n  hasNextPage: boolean\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  onNext?: (event: React.MouseEvent, page: number) => void\n  pageCursors: PageCursors\n  scrollTo?: string\n}\n\n/** Pagination */\nexport const Pagination: React.FC<PaginationProps> = ({\n  getHref,\n  hasNextPage,\n  onClick,\n  onNext,\n  pageCursors: { around, first, last, previous },\n  ...rest\n}) => {\n  const handlePrevClick = (event: React.MouseEvent) => {\n    if (previous) {\n      onClick && onClick(previous.cursor, previous.page, event)\n    }\n  }\n\n  const handleNextClick = (event: React.MouseEvent) => {\n    onNext && onNext(event, nextPage)\n  }\n\n  const nextPage = (previous?.page || 0) + 2\n\n  return (\n    <PaginationContainer {...rest}>\n      <NextPrevButton\n        data-testid=\"prev\"\n        aria-label=\"Previous\"\n        getHref={getHref}\n        onClick={handlePrevClick}\n        page={previous?.page}\n        disabled={!previous}\n        pr={0.5}\n      >\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <Flex>\n        {first && (\n          <>\n            <Page onClick={onClick} pageCursor={first} getHref={getHref} />\n            <Flex alignItems=\"center\" p={0.5} color=\"black60\">\n              …\n            </Flex>\n          </>\n        )}\n\n        {around.map((pageCursor) => {\n          return (\n            <Page\n              getHref={getHref}\n              key={pageCursor.page}\n              onClick={onClick}\n              pageCursor={pageCursor}\n            />\n          )\n        })}\n\n        {last && (\n          <>\n            <Flex alignItems=\"center\" p={0.5} color=\"black60\">\n              …\n            </Flex>\n\n            <Page onClick={onClick} pageCursor={last} getHref={getHref} />\n          </>\n        )}\n      </Flex>\n\n      <NextPrevButton\n        data-testid=\"next\"\n        getHref={getHref}\n        onClick={handleNextClick}\n        page={nextPage}\n        disabled={!hasNextPage}\n        pl={0.5}\n      >\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </PaginationContainer>\n  )\n}\n\ninterface PageProps extends BoxProps {\n  getHref?: (page: number) => string\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  pageCursor: PageCursor\n}\n\nconst Page: React.FC<PageProps> = ({\n  getHref,\n  onClick,\n  pageCursor: { cursor, isCurrent, page },\n  ...rest\n}) => {\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n  ) => {\n    onClick && onClick(cursor, page, event)\n  }\n\n  const href = page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  return (\n    <PageLink\n      href={href}\n      onClick={handleClick}\n      borderRadius={2}\n      display=\"flex\"\n      alignItems=\"center\"\n      p={0.5}\n      {...(isCurrent\n        ? { color: \"black100\", \"aria-current\": \"page\" }\n        : { color: \"black60\" })}\n      {...rest}\n    >\n      {page}\n    </PageLink>\n  )\n}\n\nexport interface NextPrevButtonProps extends BoxProps {\n  disabled: boolean\n  getHref?: (page: number) => string\n  onClick?: (event: React.MouseEvent) => void\n  page?: number\n}\n\nconst NextPrevButton: React.FC<NextPrevButtonProps> = ({\n  disabled,\n  getHref,\n  onClick,\n  page,\n  children,\n  ...rest\n}) => {\n  const href =\n    !disabled && page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  if (disabled) {\n    return (\n      <Flex\n        display=\"flex\"\n        alignItems=\"center\"\n        color=\"black30\"\n        py={0.5}\n        {...rest}\n      >\n        {children}\n      </Flex>\n    )\n  }\n\n  return (\n    <PageLink\n      href={href}\n      onClick={onClick}\n      display=\"flex\"\n      alignItems=\"center\"\n      py={0.5}\n      style={\n        !disabled\n          ? {\n              opacity: 1,\n              pointerEvents: \"inherit\",\n            }\n          : {\n              opacity: 0.1,\n              pointerEvents: \"none\",\n            }\n      }\n      {...rest}\n    >\n      {children}\n    </PageLink>\n  )\n}\n\nconst PaginationContainer = styled(Text).attrs({\n  as: \"nav\",\n  \"aria-label\": \"Pagination\",\n  variant: \"sm\",\n})`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  line-height: 1;\n`\n\nexport const PaginationSkeleton: FC = () => {\n  return (\n    <PaginationContainer aria-hidden>\n      <NextPrevButton disabled pr={0.5}>\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <SkeletonBox width={100}>\n        <Box opacity={0}>0</Box>\n      </SkeletonBox>\n\n      <NextPrevButton disabled pl={0.5}>\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </PaginationContainer>\n  )\n}\n"],"mappings":"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"}

package/dist/elements/Pagination/Pagination.story.d.ts

@@ -8,3 +8,4 @@ export declare const Default: {
         name: string;
     };
 };
+export declare const Skeleton: () => JSX.Element;

package/dist/elements/Pagination/Pagination.story.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
+exports.default = exports.Skeleton = exports.Default = void 0;
 var _addonActions = require("@storybook/addon-actions");
 var _react = _interopRequireDefault(require("react"));
 var _storybookStates = require("storybook-states");
@@ -84,4 +84,9 @@ Default.displayName = "Default";
 Default.story = {
   name: "Pagination"
 };
+var Skeleton = function Skeleton() {
+  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, null, /*#__PURE__*/_react.default.createElement(_Pagination.PaginationSkeleton, null));
+};
+exports.Skeleton = Skeleton;
+Skeleton.displayName = "Skeleton";
 //# sourceMappingURL=Pagination.story.js.map

package/dist/elements/Pagination/Pagination.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.story.js","names":["_addonActions","require","_react","_interopRequireDefault","_storybookStates","_Pagination","obj","__esModule","default","_typeof","Symbol","iterator","constructor","prototype","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","toPrimitive","undefined","res","call","TypeError","Number","_default","title","exports","EXAMPLE_PAGE_CURSORS","first","page","cursor","isCurrent","last","around","previous","Default","createElement","States","states","pageCursors","hasNextPage","Pagination","onClick","event","preventDefault","action","onNext","_len","rest","Array","_key","concat","displayName","story","name"],"sources":["../../../src/elements/Pagination/Pagination.story.tsx"],"sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Pagination, PaginationProps } from \"./Pagination\"\n\nexport default {\n  title: \"Components/Pagination\",\n}\n\nconst EXAMPLE_PAGE_CURSORS = {\n  first: { page: 1, cursor: \"Y3Vyc29yMg==\", isCurrent: false },\n  last: { page: 20, cursor: \"Y3Vyc29yMw==\", isCurrent: false },\n  around: [\n    { page: 6, cursor: \"Y3Vyc29yMw==\", isCurrent: true },\n    { page: 7, cursor: \"Y3Vyc29yMg==\", isCurrent: false },\n    { page: 8, cursor: \"Y3Vyc29yMw==\", isCurrent: false },\n    { page: 9, cursor: \"Y3Vyc29yMw==\", isCurrent: false },\n  ],\n  previous: { page: 5, cursor: \"Y3Vyc29yMw==\", isCurrent: false },\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<PaginationProps>>\n      states={[\n        {},\n        { pageCursors: { ...EXAMPLE_PAGE_CURSORS, previous: null as any } },\n        { pageCursors: { ...EXAMPLE_PAGE_CURSORS }, hasNextPage: false },\n      ]}\n    >\n      <Pagination\n        hasNextPage\n        pageCursors={EXAMPLE_PAGE_CURSORS}\n        onClick={(cursor, page, event) => {\n          event.preventDefault()\n          action(\"onClick\")(cursor, page, event)\n        }}\n        onNext={(event, ...rest) => {\n          event.preventDefault()\n          action(\"onNext\")(event, ...rest)\n        }}\n      />\n    </States>\n  )\n}\n\nDefault.story = {\n  name: \"Pagination\",\n}\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AAA0D,SAAAE,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,QAAAH,GAAA,sCAAAG,OAAA,wBAAAC,MAAA,uBAAAA,MAAA,CAAAC,QAAA,aAAAL,GAAA,kBAAAA,GAAA,gBAAAA,GAAA,WAAAA,GAAA,yBAAAI,MAAA,IAAAJ,GAAA,CAAAM,WAAA,KAAAF,MAAA,IAAAJ,GAAA,KAAAI,MAAA,CAAAG,SAAA,qBAAAP,GAAA,KAAAG,OAAA,CAAAH,GAAA;AAAA,SAAAQ,QAAAC,MAAA,EAAAC,cAAA,QAAAC,IAAA,GAAAC,MAAA,CAAAD,IAAA,CAAAF,MAAA,OAAAG,MAAA,CAAAC,qBAAA,QAAAC,OAAA,GAAAF,MAAA,CAAAC,qBAAA,CAAAJ,MAAA,GAAAC,cAAA,KAAAI,OAAA,GAAAA,OAAA,CAAAC,MAAA,WAAAC,GAAA,WAAAJ,MAAA,CAAAK,wBAAA,CAAAR,MAAA,EAAAO,GAAA,EAAAE,UAAA,OAAAP,IAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,IAAA,EAAAG,OAAA,YAAAH,IAAA;AAAA,SAAAU,cAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,WAAAF,SAAA,CAAAD,CAAA,IAAAC,SAAA,CAAAD,CAAA,QAAAA,CAAA,OAAAf,OAAA,CAAAI,MAAA,CAAAc,MAAA,OAAAC,OAAA,WAAAC,GAAA,IAAAC,eAAA,CAAAP,MAAA,EAAAM,GAAA,EAAAF,MAAA,CAAAE,GAAA,SAAAhB,MAAA,CAAAkB,yBAAA,GAAAlB,MAAA,CAAAmB,gBAAA,CAAAT,MAAA,EAAAV,MAAA,CAAAkB,yBAAA,CAAAJ,MAAA,KAAAlB,OAAA,CAAAI,MAAA,CAAAc,MAAA,GAAAC,OAAA,WAAAC,GAAA,IAAAhB,MAAA,CAAAoB,cAAA,CAAAV,MAAA,EAAAM,GAAA,EAAAhB,MAAA,CAAAK,wBAAA,CAAAS,MAAA,EAAAE,GAAA,iBAAAN,MAAA;AAAA,SAAAO,gBAAA7B,GAAA,EAAA4B,GAAA,EAAAK,KAAA,IAAAL,GAAA,GAAAM,cAAA,CAAAN,GAAA,OAAAA,GAAA,IAAA5B,GAAA,IAAAY,MAAA,CAAAoB,cAAA,CAAAhC,GAAA,EAAA4B,GAAA,IAAAK,KAAA,EAAAA,KAAA,EAAAf,UAAA,QAAAiB,YAAA,QAAAC,QAAA,oBAAApC,GAAA,CAAA4B,GAAA,IAAAK,KAAA,WAAAjC,GAAA;AAAA,SAAAkC,eAAAG,GAAA,QAAAT,GAAA,GAAAU,YAAA,CAAAD,GAAA,oBAAAlC,OAAA,CAAAyB,GAAA,iBAAAA,GAAA,GAAAW,MAAA,CAAAX,GAAA;AAAA,SAAAU,aAAAE,KAAA,EAAAC,IAAA,QAAAtC,OAAA,CAAAqC,KAAA,kBAAAA,KAAA,kBAAAA,KAAA,MAAAE,IAAA,GAAAF,KAAA,CAAApC,MAAA,CAAAuC,WAAA,OAAAD,IAAA,KAAAE,SAAA,QAAAC,GAAA,GAAAH,IAAA,CAAAI,IAAA,CAAAN,KAAA,EAAAC,IAAA,oBAAAtC,OAAA,CAAA0C,GAAA,uBAAAA,GAAA,YAAAE,SAAA,4DAAAN,IAAA,gBAAAF,MAAA,GAAAS,MAAA,EAAAR,KAAA;AAAA,IAAAS,QAAA,GAE3C;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAjD,OAAA,GAAA+C,QAAA;AAED,IAAMG,oBAAoB,GAAG;EAC3BC,KAAK,EAAE;IAAEC,IAAI,EAAE,CAAC;IAAEC,MAAM,EAAE,cAAc;IAAEC,SAAS,EAAE;EAAM,CAAC;EAC5DC,IAAI,EAAE;IAAEH,IAAI,EAAE,EAAE;IAAEC,MAAM,EAAE,cAAc;IAAEC,SAAS,EAAE;EAAM,CAAC;EAC5DE,MAAM,EAAE,CACN;IAAEJ,IAAI,EAAE,CAAC;IAAEC,MAAM,EAAE,cAAc;IAAEC,SAAS,EAAE;EAAK,CAAC,EACpD;IAAEF,IAAI,EAAE,CAAC;IAAEC,MAAM,EAAE,cAAc;IAAEC,SAAS,EAAE;EAAM,CAAC,EACrD;IAAEF,IAAI,EAAE,CAAC;IAAEC,MAAM,EAAE,cAAc;IAAEC,SAAS,EAAE;EAAM,CAAC,EACrD;IAAEF,IAAI,EAAE,CAAC;IAAEC,MAAM,EAAE,cAAc;IAAEC,SAAS,EAAE;EAAM,CAAC,CACtD;EACDG,QAAQ,EAAE;IAAEL,IAAI,EAAE,CAAC;IAAEC,MAAM,EAAE,cAAc;IAAEC,SAAS,EAAE;EAAM;AAChE,CAAC;AAEM,IAAMI,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEhE,MAAA,CAAAM,OAAA,CAAA2D,aAAA,CAAC/D,gBAAA,CAAAgE,MAAM;IACLC,MAAM,EAAE,CACN,CAAC,CAAC,EACF;MAAEC,WAAW,EAAA3C,aAAA,CAAAA,aAAA,KAAO+B,oBAAoB;QAAEO,QAAQ,EAAE;MAAW;IAAG,CAAC,EACnE;MAAEK,WAAW,EAAA3C,aAAA,KAAO+B,oBAAoB,CAAE;MAAEa,WAAW,EAAE;IAAM,CAAC;EAChE,gBAEFrE,MAAA,CAAAM,OAAA,CAAA2D,aAAA,CAAC9D,WAAA,CAAAmE,UAAU;IACTD,WAAW;IACXD,WAAW,EAAEZ,oBAAqB;IAClCe,OAAO,EAAE,SAAAA,QAACZ,MAAM,EAAED,IAAI,EAAEc,KAAK,EAAK;MAChCA,KAAK,CAACC,cAAc,EAAE;MACtB,IAAAC,oBAAM,EAAC,SAAS,CAAC,CAACf,MAAM,EAAED,IAAI,EAAEc,KAAK,CAAC;IACxC,CAAE;IACFG,MAAM,EAAE,SAAAA,OAACH,KAAK,EAAc;MAC1BA,KAAK,CAACC,cAAc,EAAE;MAAA,SAAAG,IAAA,GAAAhD,SAAA,CAAAC,MAAA,EADLgD,IAAI,OAAAC,KAAA,CAAAF,IAAA,OAAAA,IAAA,WAAAG,IAAA,MAAAA,IAAA,GAAAH,IAAA,EAAAG,IAAA;QAAJF,IAAI,CAAAE,IAAA,QAAAnD,SAAA,CAAAmD,IAAA;MAAA;MAErB,IAAAL,oBAAM,EAAC,QAAQ,CAAC,CAAAlD,KAAA,UAACgD,KAAK,EAAAQ,MAAA,CAAKH,IAAI,EAAC;IAClC;EAAE,EACF,CACK;AAEb,CAAC;AAAAtB,OAAA,CAAAS,OAAA,GAAAA,OAAA;AAvBYA,OAAO,CAAAiB,WAAA;AAyBpBjB,OAAO,CAACkB,KAAK,GAAG;EACdC,IAAI,EAAE;AACR,CAAC"}
+{"version":3,"file":"Pagination.story.js","names":["_addonActions","require","_react","_interopRequireDefault","_storybookStates","_Pagination","obj","__esModule","default","_typeof","Symbol","iterator","constructor","prototype","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","toPrimitive","undefined","res","call","TypeError","Number","_default","title","exports","EXAMPLE_PAGE_CURSORS","first","page","cursor","isCurrent","last","around","previous","Default","createElement","States","states","pageCursors","hasNextPage","Pagination","onClick","event","preventDefault","action","onNext","_len","rest","Array","_key","concat","displayName","story","name","Skeleton","PaginationSkeleton"],"sources":["../../../src/elements/Pagination/Pagination.story.tsx"],"sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Pagination, PaginationProps, PaginationSkeleton } from \"./Pagination\"\n\nexport default {\n  title: \"Components/Pagination\",\n}\n\nconst EXAMPLE_PAGE_CURSORS = {\n  first: { page: 1, cursor: \"Y3Vyc29yMg==\", isCurrent: false },\n  last: { page: 20, cursor: \"Y3Vyc29yMw==\", isCurrent: false },\n  around: [\n    { page: 6, cursor: \"Y3Vyc29yMw==\", isCurrent: true },\n    { page: 7, cursor: \"Y3Vyc29yMg==\", isCurrent: false },\n    { page: 8, cursor: \"Y3Vyc29yMw==\", isCurrent: false },\n    { page: 9, cursor: \"Y3Vyc29yMw==\", isCurrent: false },\n  ],\n  previous: { page: 5, cursor: \"Y3Vyc29yMw==\", isCurrent: false },\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<PaginationProps>>\n      states={[\n        {},\n        { pageCursors: { ...EXAMPLE_PAGE_CURSORS, previous: null as any } },\n        { pageCursors: { ...EXAMPLE_PAGE_CURSORS }, hasNextPage: false },\n      ]}\n    >\n      <Pagination\n        hasNextPage\n        pageCursors={EXAMPLE_PAGE_CURSORS}\n        onClick={(cursor, page, event) => {\n          event.preventDefault()\n          action(\"onClick\")(cursor, page, event)\n        }}\n        onNext={(event, ...rest) => {\n          event.preventDefault()\n          action(\"onNext\")(event, ...rest)\n        }}\n      />\n    </States>\n  )\n}\n\nDefault.story = {\n  name: \"Pagination\",\n}\n\nexport const Skeleton = () => {\n  return (\n    <States>\n      <PaginationSkeleton />\n    </States>\n  )\n}\n"],"mappings":"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"}

package/dist/elements/TextArea/TextArea.d.ts

@@ -3,6 +3,7 @@ import { BoxProps } from "../Box";
 export interface TextAreaProps extends BoxProps, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "title"> {
     active?: boolean;
     characterLimit?: number;
+    characterLimitHelper?: boolean;
     defaultValue?: string;
     description?: React.ReactNode;
     required?: boolean;

package/dist/elements/TextArea/TextArea.js

@@ -14,7 +14,7 @@ var _Text = require("../Text");
 var _Tooltip = require("../Tooltip");
 var _tokens = require("./tokens");
 var _helpers = require("../../helpers");
-var _excluded = ["error", "disabled", "focus", "hover", "characterLimit", "title", "description", "defaultValue", "required", "onChange"];
+var _excluded = ["error", "disabled", "focus", "hover", "characterLimit", "characterLimitHelper", "title", "description", "defaultValue", "required", "onChange"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -33,6 +33,7 @@ var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     focus = _ref.focus,
     hover = _ref.hover,
     characterLimit = _ref.characterLimit,
+    characterLimitHelper = _ref.characterLimitHelper,
     title = _ref.title,
     description = _ref.description,
     _ref$defaultValue = _ref.defaultValue,
@@ -51,6 +52,9 @@ var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var characterLimitExceeded = (0, _react.useCallback)(function (text) {
     return Boolean(characterLimit && text.length > characterLimit);
   }, [characterLimit]);
+  var characterLimitReached = (0, _react.useCallback)(function (text) {
+    return Boolean(characterLimit && text.length >= characterLimit);
+  }, [characterLimit]);
   var handleChange = (0, _react.useCallback)(function (event) {
     var nextValue = event.currentTarget.value;
     setValue(nextValue);
@@ -62,6 +66,7 @@ var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var hasError = (0, _react.useMemo)(function () {
     return Boolean(error || characterLimitExceeded(value));
   }, [characterLimitExceeded, error, value]);
+  var showCharacterLimitReached = characterLimitHelper && typeof characterLimit !== "undefined" && characterLimitReached(value);
   return /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
     width: "100%"
   }, boxProps), !!description && /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
@@ -92,10 +97,15 @@ var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     display: "flex",
     mt: 0.5,
     mx: 1
-  }, required && /*#__PURE__*/_react.default.createElement(_RequiredField.RequiredField, {
+  }, required && !showCharacterLimitReached && /*#__PURE__*/_react.default.createElement(_RequiredField.RequiredField, {
     flex: 1,
     disabled: disabled
-  }), typeof characterLimit !== "undefined" && /*#__PURE__*/_react.default.createElement(_Text.Text, {
+  }), showCharacterLimitReached && /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    flex: 1,
+    variant: "xs",
+    color: "black60",
+    textAlign: "left"
+  }, "Character limit reached"), typeof characterLimit !== "undefined" && /*#__PURE__*/_react.default.createElement(_Text.Text, {
     flex: 1,
     variant: "xs",
     color: characterLimitExceeded(value) ? "red100" : "black60",

package/dist/elements/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_RequiredField","_Box","_Text","_Tooltip","_tokens","_helpers","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","TextArea","React","forwardRef","_ref","ref","error","disabled","focus","hover","characterLimit","title","description","_ref$defaultValue","defaultValue","required","onChange","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","inputProps","_useState","useState","_useState2","setValue","characterLimitExceeded","useCallback","text","Boolean","handleChange","event","nextValue","currentTarget","exceedsCharacterLimit","hasError","useMemo","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","position","mt","StyledTextArea","placeholder","StyledLabel","htmlFor","display","mx","RequiredField","flex","ml","exports","displayName","styled","textarea","withConfig","componentId","themeGet","props","css","TEXTAREA_STATES","active","completed","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/TextArea/TextArea.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { TEXTAREA_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface TextAreaProps\n  extends BoxProps,\n    Omit<\n      React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n      \"onChange\" | \"title\"\n    > {\n  active?: boolean\n  characterLimit?: number\n  defaultValue?: string\n  description?: React.ReactNode\n  required?: boolean\n  title?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  onChange?(result: TextAreaChange): void\n}\n\nexport interface TextAreaChange {\n  value: string\n  exceedsCharacterLimit: boolean\n}\n\n/** TextArea */\nexport const TextArea: React.ForwardRefExoticComponent<\n  TextAreaProps & { ref?: React.Ref<HTMLTextAreaElement> }\n> = React.forwardRef(\n  (\n    {\n      error,\n      disabled,\n      focus,\n      hover,\n      characterLimit,\n      title,\n      description,\n      defaultValue = \"\",\n      required,\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [value, setValue] = useState(defaultValue)\n\n    const characterLimitExceeded = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length > characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.({\n          value: nextValue,\n          exceedsCharacterLimit: characterLimitExceeded(nextValue),\n        })\n      },\n      [characterLimitExceeded, onChange]\n    )\n\n    const hasError = useMemo(\n      () => Boolean(error || characterLimitExceeded(value)),\n      [characterLimitExceeded, error, value]\n    )\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"black60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledTextArea\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={hasError}\n            onChange={handleChange}\n            defaultValue={defaultValue}\n            required={required}\n            title={title}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n        </Box>\n\n        {(required || characterLimit) && !(error && typeof error === \"string\") && (\n          <Box display=\"flex\" mt={0.5} mx={1}>\n            {required && <RequiredField flex={1} disabled={disabled} />}\n\n            {typeof characterLimit !== \"undefined\" && (\n              <Text\n                flex={1}\n                variant=\"xs\"\n                color={characterLimitExceeded(value) ? \"red100\" : \"black60\"}\n                textAlign=\"right\"\n              >\n                {value.length}/{characterLimit}\n              </Text>\n            )}\n          </Box>\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" color=\"red100\" mt={0.5} ml={1}>\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nTextArea.displayName = \"TextArea\"\n\ntype StyledTextAreaProps = Pick<\n  TextAreaProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\"\n>\n\nconst StyledTextArea = styled.textarea<StyledTextAreaProps>`\n  appearance: none;\n  display: block;\n  width: 100%;\n  background-color: ${themeGet(\"colors.white100\")};\n  padding: ${themeGet(\"space.1\")};\n  resize: vertical;\n  transition: border-color 0.25s, color 0.25s;\n  outline: none;\n  border: 1px solid;\n  border-radius: 3px;\n  font-family: ${themeGet(\"fonts.sans\")};\n\n  ::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${TEXTAREA_STATES.default}\n      ${props.hover && TEXTAREA_STATES.hover}\n      ${props.focus && TEXTAREA_STATES.focus}\n      ${props.active && TEXTAREA_STATES.active}\n      ${props.disabled && TEXTAREA_STATES.disabled}\n      ${props.error && TEXTAREA_STATES.error}\n\n      &:hover {\n        ${TEXTAREA_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${TEXTAREA_STATES.completed}\n        ${props.error && TEXTAREA_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${TEXTAREA_STATES.focus}\n\n        :not(:placeholder-shown) {\n          ${!!props.placeholder && TEXTAREA_STATES.active}\n          ${props.error && TEXTAREA_STATES.error}\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${TEXTAREA_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        ::placeholder {\n          opacity: 0;\n        }\n      `}\n    `\n  }}\n`\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 25px;\n  left: 6px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.white100\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"TextArea.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_RequiredField","_Box","_Text","_Tooltip","_tokens","_helpers","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","TextArea","React","forwardRef","_ref","ref","error","disabled","focus","hover","characterLimit","characterLimitHelper","title","description","_ref$defaultValue","defaultValue","required","onChange","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","inputProps","_useState","useState","_useState2","setValue","characterLimitExceeded","useCallback","text","Boolean","characterLimitReached","handleChange","event","nextValue","currentTarget","exceedsCharacterLimit","hasError","useMemo","showCharacterLimitReached","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","position","mt","StyledTextArea","placeholder","StyledLabel","htmlFor","display","mx","RequiredField","flex","ml","exports","displayName","styled","textarea","withConfig","componentId","themeGet","props","css","TEXTAREA_STATES","active","completed","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/TextArea/TextArea.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { TEXTAREA_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface TextAreaProps\n  extends BoxProps,\n    Omit<\n      React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n      \"onChange\" | \"title\"\n    > {\n  active?: boolean\n  characterLimit?: number\n  characterLimitHelper?: boolean\n  defaultValue?: string\n  description?: React.ReactNode\n  required?: boolean\n  title?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  onChange?(result: TextAreaChange): void\n}\n\nexport interface TextAreaChange {\n  value: string\n  exceedsCharacterLimit: boolean\n}\n\n/** TextArea */\nexport const TextArea: React.ForwardRefExoticComponent<\n  TextAreaProps & { ref?: React.Ref<HTMLTextAreaElement> }\n> = React.forwardRef(\n  (\n    {\n      error,\n      disabled,\n      focus,\n      hover,\n      characterLimit,\n      characterLimitHelper,\n      title,\n      description,\n      defaultValue = \"\",\n      required,\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [value, setValue] = useState(defaultValue)\n\n    const characterLimitExceeded = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length > characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const characterLimitReached = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length >= characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.({\n          value: nextValue,\n          exceedsCharacterLimit: characterLimitExceeded(nextValue),\n        })\n      },\n      [characterLimitExceeded, onChange]\n    )\n\n    const hasError = useMemo(\n      () => Boolean(error || characterLimitExceeded(value)),\n      [characterLimitExceeded, error, value]\n    )\n\n    const showCharacterLimitReached =\n      characterLimitHelper &&\n      typeof characterLimit !== \"undefined\" &&\n      characterLimitReached(value)\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"black60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledTextArea\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={hasError}\n            onChange={handleChange}\n            defaultValue={defaultValue}\n            required={required}\n            title={title}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n        </Box>\n\n        {(required || characterLimit) && !(error && typeof error === \"string\") && (\n          <Box display=\"flex\" mt={0.5} mx={1}>\n            {required && !showCharacterLimitReached && (\n              <RequiredField flex={1} disabled={disabled} />\n            )}\n\n            {showCharacterLimitReached && (\n              <Text flex={1} variant=\"xs\" color=\"black60\" textAlign=\"left\">\n                Character limit reached\n              </Text>\n            )}\n\n            {typeof characterLimit !== \"undefined\" && (\n              <Text\n                flex={1}\n                variant=\"xs\"\n                color={characterLimitExceeded(value) ? \"red100\" : \"black60\"}\n                textAlign=\"right\"\n              >\n                {value.length}/{characterLimit}\n              </Text>\n            )}\n          </Box>\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" color=\"red100\" mt={0.5} ml={1}>\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nTextArea.displayName = \"TextArea\"\n\ntype StyledTextAreaProps = Pick<\n  TextAreaProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\"\n>\n\nconst StyledTextArea = styled.textarea<StyledTextAreaProps>`\n  appearance: none;\n  display: block;\n  width: 100%;\n  background-color: ${themeGet(\"colors.white100\")};\n  padding: ${themeGet(\"space.1\")};\n  resize: vertical;\n  transition: border-color 0.25s, color 0.25s;\n  outline: none;\n  border: 1px solid;\n  border-radius: 3px;\n  font-family: ${themeGet(\"fonts.sans\")};\n\n  ::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${TEXTAREA_STATES.default}\n      ${props.hover && TEXTAREA_STATES.hover}\n      ${props.focus && TEXTAREA_STATES.focus}\n      ${props.active && TEXTAREA_STATES.active}\n      ${props.disabled && TEXTAREA_STATES.disabled}\n      ${props.error && TEXTAREA_STATES.error}\n\n      &:hover {\n        ${TEXTAREA_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${TEXTAREA_STATES.completed}\n        ${props.error && TEXTAREA_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${TEXTAREA_STATES.focus}\n\n        :not(:placeholder-shown) {\n          ${!!props.placeholder && TEXTAREA_STATES.active}\n          ${props.error && TEXTAREA_STATES.error}\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${TEXTAREA_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        ::placeholder {\n          opacity: 0;\n        }\n      `}\n    `\n  }}\n`\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 25px;\n  left: 6px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.white100\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n`\n"],"mappings":";;;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAD,uBAAA,CAAAF,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,IAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AACA,IAAAO,QAAA,GAAAP,OAAA;AACA,IAAAQ,OAAA,GAAAR,OAAA;AACA,IAAAS,QAAA,GAAAT,OAAA;AAAuD,IAAAU,SAAA;AAAA,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAV,wBAAAc,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAE,OAAA,CAAAF,GAAA,yBAAAA,GAAA,4BAAAG,OAAA,EAAAH,GAAA,UAAAI,KAAA,GAAAT,wBAAA,CAAAC,WAAA,OAAAQ,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAL,GAAA,YAAAI,KAAA,CAAAE,GAAA,CAAAN,GAAA,SAAAO,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAZ,GAAA,QAAAY,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,GAAA,EAAAY,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,GAAA,EAAAY,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAZ,GAAA,CAAAY,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAH,GAAA,MAAAI,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAjB,GAAA,EAAAO,MAAA,YAAAA,MAAA;AAAA,SAAAW,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAV,GAAA,IAAAa,MAAA,QAAAhB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAb,GAAA,KAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,gBAAAS,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAH,SAAA;AAAA,SAAAI,eAAAC,GAAA,EAAAN,CAAA,WAAAO,eAAA,CAAAD,GAAA,KAAAE,qBAAA,CAAAF,GAAA,EAAAN,CAAA,KAAAS,2BAAA,CAAAH,GAAA,EAAAN,CAAA,KAAAU,gBAAA;AAAA,SAAAA,iBAAA,cAAAC,SAAA;AAAA,SAAAF,4BAAAG,CAAA,EAAAC,MAAA,SAAAD,CAAA,qBAAAA,CAAA,sBAAAE,iBAAA,CAAAF,CAAA,EAAAC,MAAA,OAAAE,CAAA,GAAA5B,MAAA,CAAAI,SAAA,CAAAyB,QAAA,CAAAvB,IAAA,CAAAmB,CAAA,EAAAK,KAAA,aAAAF,CAAA,iBAAAH,CAAA,CAAAM,WAAA,EAAAH,CAAA,GAAAH,CAAA,CAAAM,WAAA,CAAAC,IAAA,MAAAJ,CAAA,cAAAA,CAAA,mBAAAK,KAAA,CAAAC,IAAA,CAAAT,CAAA,OAAAG,CAAA,+DAAAO,IAAA,CAAAP,CAAA,UAAAD,iBAAA,CAAAF,CAAA,EAAAC,MAAA;AAAA,SAAAC,kBAAAR,GAAA,EAAAiB,GAAA,QAAAA,GAAA,YAAAA,GAAA,GAAAjB,GAAA,CAAAJ,MAAA,EAAAqB,GAAA,GAAAjB,GAAA,CAAAJ,MAAA,WAAAF,CAAA,MAAAwB,IAAA,OAAAJ,KAAA,CAAAG,GAAA,GAAAvB,CAAA,GAAAuB,GAAA,EAAAvB,CAAA,MAAAwB,IAAA,CAAAxB,CAAA,IAAAM,GAAA,CAAAN,CAAA,YAAAwB,IAAA;AAAA,SAAAhB,sBAAAF,GAAA,EAAAN,CAAA,QAAAyB,EAAA,WAAAnB,GAAA,gCAAAoB,MAAA,IAAApB,GAAA,CAAAoB,MAAA,CAAAC,QAAA,KAAArB,GAAA,4BAAAmB,EAAA,QAAAG,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,IAAA,OAAAC,EAAA,OAAAC,EAAA,iBAAAJ,EAAA,IAAAL,EAAA,GAAAA,EAAA,CAAAhC,IAAA,CAAAa,GAAA,GAAA6B,IAAA,QAAAnC,CAAA,QAAAb,MAAA,CAAAsC,EAAA,MAAAA,EAAA,UAAAQ,EAAA,uBAAAA,EAAA,IAAAL,EAAA,GAAAE,EAAA,CAAArC,IAAA,CAAAgC,EAAA,GAAAW,IAAA,MAAAJ,IAAA,CAAAK,IAAA,CAAAT,EAAA,CAAAU,KAAA,GAAAN,IAAA,CAAA9B,MAAA,KAAAF,CAAA,GAAAiC,EAAA,sBAAAM,GAAA,IAAAL,EAAA,OAAAL,EAAA,GAAAU,GAAA,yBAAAN,EAAA,YAAAR,EAAA,CAAAe,MAAA,KAAAT,EAAA,GAAAN,EAAA,CAAAe,MAAA,IAAArD,MAAA,CAAA4C,EAAA,MAAAA,EAAA,2BAAAG,EAAA,QAAAL,EAAA,aAAAG,IAAA;AAAA,SAAAzB,gBAAAD,GAAA,QAAAc,KAAA,CAAAqB,OAAA,CAAAnC,GAAA,UAAAA,GAAA;AAAA,SAAAoC,yBAAAvC,MAAA,EAAAwC,QAAA,QAAAxC,MAAA,yBAAAJ,MAAA,GAAA6C,6BAAA,CAAAzC,MAAA,EAAAwC,QAAA,OAAArD,GAAA,EAAAU,CAAA,MAAAb,MAAA,CAAA0D,qBAAA,QAAAC,gBAAA,GAAA3D,MAAA,CAAA0D,qBAAA,CAAA1C,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAA8C,gBAAA,CAAA5C,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAAwD,gBAAA,CAAA9C,CAAA,OAAA2C,QAAA,CAAAI,OAAA,CAAAzD,GAAA,uBAAAH,MAAA,CAAAI,SAAA,CAAAyD,oBAAA,CAAAvD,IAAA,CAAAU,MAAA,EAAAb,GAAA,aAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,cAAAS,MAAA;AAAA,SAAA6C,8BAAAzC,MAAA,EAAAwC,QAAA,QAAAxC,MAAA,yBAAAJ,MAAA,WAAAkD,UAAA,GAAA9D,MAAA,CAAA+D,IAAA,CAAA/C,MAAA,OAAAb,GAAA,EAAAU,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAiD,UAAA,CAAA/C,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAA2D,UAAA,CAAAjD,CAAA,OAAA2C,QAAA,CAAAI,OAAA,CAAAzD,GAAA,kBAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,YAAAS,MAAA;AA2BvD;AACO,IAAMoD,QAEZ,gBAAGC,cAAK,CAACC,UAAU,CAClB,UAAAC,IAAA,EAeEC,GAAG,EACA;EAAA,IAdDC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,KAAK,GAAAL,IAAA,CAALK,KAAK;IACLC,cAAc,GAAAN,IAAA,CAAdM,cAAc;IACdC,oBAAoB,GAAAP,IAAA,CAApBO,oBAAoB;IACpBC,KAAK,GAAAR,IAAA,CAALQ,KAAK;IACLC,WAAW,GAAAT,IAAA,CAAXS,WAAW;IAAAC,iBAAA,GAAAV,IAAA,CACXW,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,EAAE,GAAAA,iBAAA;IACjBE,QAAQ,GAAAZ,IAAA,CAARY,QAAQ;IACRC,QAAQ,GAAAb,IAAA,CAARa,QAAQ;IACLC,IAAI,GAAA1B,wBAAA,CAAAY,IAAA,EAAAlF,SAAA;EAIT,IAAAiG,cAAA,GAA+B,IAAAC,kBAAa,EAACF,IAAI,CAAC;IAAAG,eAAA,GAAAlE,cAAA,CAAAgE,cAAA;IAA3CG,QAAQ,GAAAD,eAAA;IAAEE,UAAU,GAAAF,eAAA;EAE3B,IAAAG,SAAA,GAA0B,IAAAC,eAAQ,EAACV,YAAY,CAAC;IAAAW,UAAA,GAAAvE,cAAA,CAAAqE,SAAA;IAAzCpC,KAAK,GAAAsC,UAAA;IAAEC,QAAQ,GAAAD,UAAA;EAEtB,IAAME,sBAAsB,GAAG,IAAAC,kBAAW,EACxC,UAACC,IAAY,EAAK;IAChB,OAAOC,OAAO,CAACrB,cAAc,IAAIoB,IAAI,CAAC9E,MAAM,GAAG0D,cAAc,CAAC;EAChE,CAAC,EACD,CAACA,cAAc,CAAC,CACjB;EAED,IAAMsB,qBAAqB,GAAG,IAAAH,kBAAW,EACvC,UAACC,IAAY,EAAK;IAChB,OAAOC,OAAO,CAACrB,cAAc,IAAIoB,IAAI,CAAC9E,MAAM,IAAI0D,cAAc,CAAC;EACjE,CAAC,EACD,CAACA,cAAc,CAAC,CACjB;EAED,IAAMuB,YAAY,GAAG,IAAAJ,kBAAW,EAC9B,UAACK,KAA6C,EAAK;IACjD,IAAMC,SAAS,GAAGD,KAAK,CAACE,aAAa,CAAChD,KAAK;IAC3CuC,QAAQ,CAACQ,SAAS,CAAC;IACnBlB,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG;MACT7B,KAAK,EAAE+C,SAAS;MAChBE,qBAAqB,EAAET,sBAAsB,CAACO,SAAS;IACzD,CAAC,CAAC;EACJ,CAAC,EACD,CAACP,sBAAsB,EAAEX,QAAQ,CAAC,CACnC;EAED,IAAMqB,QAAQ,GAAG,IAAAC,cAAO,EACtB;IAAA,OAAMR,OAAO,CAACzB,KAAK,IAAIsB,sBAAsB,CAACxC,KAAK,CAAC,CAAC;EAAA,GACrD,CAACwC,sBAAsB,EAAEtB,KAAK,EAAElB,KAAK,CAAC,CACvC;EAED,IAAMoD,yBAAyB,GAC7B7B,oBAAoB,IACpB,OAAOD,cAAc,KAAK,WAAW,IACrCsB,qBAAqB,CAAC5C,KAAK,CAAC;EAE9B,oBACE3E,MAAA,CAAAkB,OAAA,CAAA8G,aAAA,CAAC5H,IAAA,CAAA6H,GAAG,EAAAhG,QAAA;IAACiG,KAAK,EAAC;EAAM,GAAKrB,QAAQ,GAC3B,CAAC,CAACT,WAAW,iBACZpG,MAAA,CAAAkB,OAAA,CAAA8G,aAAA,CAAC1H,QAAA,CAAA6H,OAAO;IAACC,OAAO;IAACC,OAAO,EAAEjC,WAAY;IAACkC,SAAS,EAAC;EAAS,gBACxDtI,MAAA,CAAAkB,OAAA,CAAA8G,aAAA,CAAC3H,KAAA,CAAAkI,IAAI;IAACC,OAAO,EAAC,IAAI;IAACC,KAAK,EAAC,SAAS;IAACC,SAAS,EAAC;EAAO,gBAClD1I,MAAA,CAAAkB,OAAA,CAAA8G,aAAA,YAAG,eAAa,CAAI,CACf,CAEV,eAEDhI,MAAA,CAAAkB,OAAA,CAAA8G,aAAA,CAAC5H,IAAA,CAAA6H,GAAG;IAACU,QAAQ,EAAC,UAAU;IAACC,EAAE,EAAE,CAAC,CAACzC,KAAK,IAAI,CAACC,WAAW,GAAG,CAAC,GAAG;EAAE,gBAC3DpG,MAAA,CAAAkB,OAAA,CAAA8G,aAAA,CAACa,cAAc,EAAA5G,QAAA;IACb2D,GAAG,EAAEA,GAAW;IAChBE,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA,KAAM;IACbC,KAAK,EAAEA,KAAM;IACbH,KAAK,EAAEgC,QAAS;IAChBrB,QAAQ,EAAEgB,YAAa;IACvBlB,YAAY,EAAEA,YAAa;IAC3BC,QAAQ,EAAEA,QAAS;IACnBJ,KAAK,EAAEA,KAAM;IACb2C,WAAW,EAAEhC,UAAU,CAACgC,WAAW,IAAI;EAAI,GACvChC,UAAU,EACd,EAED,CAAC,CAACX,KAAK,iBACNnG,MAAA,CAAAkB,OAAA,CAAA8G,aAAA,CAACe,WAAW;IAACC,OAAO,EAAElC,UAAU,CAACtD;EAAK,GACnC2C,KAAK,eACNnG,MAAA,CAAAkB,OAAA,CAAA8G,aAAA,cAAQ,CAEX,CACG,EAEL,CAACzB,QAAQ,IAAIN,cAAc,KAAK,EAAEJ,KAAK,IAAI,OAAOA,KAAK,KAAK,QAAQ,CAAC,iBACpE7F,MAAA,CAAAkB,OAAA,CAAA8G,aAAA,CAAC5H,IAAA,CAAA6H,GAAG;IAACgB,OAAO,EAAC,MAAM;IAACL,EAAE,EAAE,GAAI;IAACM,EAAE,EAAE;EAAE,GAChC3C,QAAQ,IAAI,CAACwB,yBAAyB,iBACrC/H,MAAA,CAAAkB,OAAA,CAAA8G,aAAA,CAAC7H,cAAA,CAAAgJ,aAAa;IAACC,IAAI,EAAE,CAAE;IAACtD,QAAQ,EAAEA;EAAS,EAC5C,EAEAiC,yBAAyB,iBACxB/H,MAAA,CAAAkB,OAAA,CAAA8G,aAAA,CAAC3H,KAAA,CAAAkI,IAAI;IAACa,IAAI,EAAE,CAAE;IAACZ,OAAO,EAAC,IAAI;IAACC,KAAK,EAAC,SAAS;IAACC,SAAS,EAAC;EAAM,GAAC,yBAE7D,CACD,EAEA,OAAOzC,cAAc,KAAK,WAAW,iBACpCjG,MAAA,CAAAkB,OAAA,CAAA8G,aAAA,CAAC3H,KAAA,CAAAkI,IAAI;IACHa,IAAI,EAAE,CAAE;IACRZ,OAAO,EAAC,IAAI;IACZC,KAAK,EAAEtB,sBAAsB,CAACxC,KAAK,CAAC,GAAG,QAAQ,GAAG,SAAU;IAC5D+D,SAAS,EAAC;EAAO,GAEhB/D,KAAK,CAACpC,MAAM,EAAC,GAAC,EAAC0D,cAAc,CAEjC,CAEJ,EAEAJ,KAAK,IAAI,OAAOA,KAAK,KAAK,QAAQ,iBACjC7F,MAAA,CAAAkB,OAAA,CAAA8G,aAAA,CAAC3H,KAAA,CAAAkI,IAAI;IAACC,OAAO,EAAC,IAAI;IAACC,KAAK,EAAC,QAAQ;IAACG,EAAE,EAAE,GAAI;IAACS,EAAE,EAAE;EAAE,GAC9CxD,KAAK,CAET,CACG;AAEV,CAAC,CACF;AAAAyD,OAAA,CAAA9D,QAAA,GAAAA,QAAA;AAEDA,QAAQ,CAAC+D,WAAW,GAAG,UAAU;AAOjC,IAAMV,cAAc,GAAGW,yBAAM,CAACC,QAAQ,CAAAC,UAAA;EAAAH,WAAA;EAAAI,WAAA;AAAA,wQAIhB,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpC,IAAAA,kBAAQ,EAAC,SAAS,CAAC,EAMf,IAAAA,kBAAQ,EAAC,YAAY,CAAC,EAMnC,UAACC,KAAK,EAAK;EACX,WAAOC,qBAAG,uLACNC,uBAAe,CAAC7I,OAAO,EACvB2I,KAAK,CAAC7D,KAAK,IAAI+D,uBAAe,CAAC/D,KAAK,EACpC6D,KAAK,CAAC9D,KAAK,IAAIgE,uBAAe,CAAChE,KAAK,EACpC8D,KAAK,CAACG,MAAM,IAAID,uBAAe,CAACC,MAAM,EACtCH,KAAK,CAAC/D,QAAQ,IAAIiE,uBAAe,CAACjE,QAAQ,EAC1C+D,KAAK,CAAChE,KAAK,IAAIkE,uBAAe,CAAClE,KAAK,EAGlCkE,uBAAe,CAAC/D,KAAK,EAIrB+D,uBAAe,CAACE,SAAS,EACzBJ,KAAK,CAAChE,KAAK,IAAIkE,uBAAe,CAAClE,KAAK,EAKpCkE,uBAAe,CAAChE,KAAK,EAGnB,CAAC,CAAC8D,KAAK,CAACf,WAAW,IAAIiB,uBAAe,CAACC,MAAM,EAC7CH,KAAK,CAAChE,KAAK,IAAIkE,uBAAe,CAAClE,KAAK,EAMtCkE,uBAAe,CAACjE,QAAQ,EAG1B+D,KAAK,CAAC1D,KAAK,QACb2D,qBAAG,gCAIF;AAEL,CAAC,CACF;AACD,IAAMf,WAAW,GAAGS,yBAAM,CAACU,KAAK,CAAAR,UAAA;EAAAH,WAAA;EAAAI,WAAA;AAAA,kZAOhBQ,gCAAuB,EAEtB,IAAAP,kBAAQ,EAAC,YAAY,CAAC,EAIf,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EAQjCO,gCAAuB,CAIxC"}

package/dist/elements/TextArea/TextArea.story.js

@@ -33,6 +33,10 @@ var Default = function Default() {
       required: true
     }, {
       characterLimit: 10
+    }, {
+      characterLimit: 10,
+      characterLimitHelper: true,
+      required: true
     }, {
       characterLimit: 10,
       defaultValue: "hello"

package/dist/elements/TextArea/TextArea.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.story.js","names":["_addonActions","require","_react","_interopRequireDefault","_storybookStates","_Button","_TextArea","obj","__esModule","default","_default","title","exports","Default","createElement","States","states","focus","hover","active","error","disabled","required","characterLimit","defaultValue","name","description","TextArea","placeholder","onChange","action","displayName","Required","mt","Button"],"sources":["../../../src/elements/TextArea/TextArea.story.tsx"],"sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Button } from \"../Button\"\nimport { TextArea, TextAreaProps } from \"./TextArea\"\n\nexport default {\n  title: \"Components/TextArea\",\n}\n\nexport const Default = () => {\n  return (\n    <States<TextAreaProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { error: \"Something went wrong.\" },\n        { disabled: true },\n        { title: \"Note\" },\n        { title: \"Note\", required: true },\n        { characterLimit: 10 },\n        { characterLimit: 10, defaultValue: \"hello\" },\n        { characterLimit: 10, defaultValue: \"hello world\" },\n        { name: \"my-text-area\" },\n        {\n          name: \"my-text-area\",\n          title: \"Note\",\n          description: \"This is my description\",\n        },\n        {\n          defaultValue:\n            \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nam iste beatae reiciendis ea harum, aspernatur, eius, omnis eveniet corporis consequatur minima assumenda ipsum dolor dolorum perferendis animi distinctio eligendi?\",\n        },\n      ]}\n    >\n      <TextArea placeholder=\"Start typing...\" onChange={action(\"onChange\")} />\n    </States>\n  )\n}\n\nexport const Required = () => {\n  return (\n    <form>\n      <TextArea\n        mt={1}\n        title=\"Example\"\n        required\n        placeholder=\"Submission should be blocked unless this has a value\"\n      />\n\n      <Button mt={1}>Submit</Button>\n    </form>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AAAoD,SAAAE,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAErC;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA;AAEM,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEX,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACV,gBAAA,CAAAW,MAAM;IACLC,MAAM,EAAE,CACN,CAAC,CAAC,EACF;MAAEC,KAAK,EAAE;IAAK,CAAC,EACf;MAAEC,KAAK,EAAE;IAAK,CAAC,EACf;MAAEC,MAAM,EAAE;IAAK,CAAC,EAChB;MAAEC,KAAK,EAAE;IAAwB,CAAC,EAClC;MAAEC,QAAQ,EAAE;IAAK,CAAC,EAClB;MAAEV,KAAK,EAAE;IAAO,CAAC,EACjB;MAAEA,KAAK,EAAE,MAAM;MAAEW,QAAQ,EAAE;IAAK,CAAC,EACjC;MAAEC,cAAc,EAAE;IAAG,CAAC,EACtB;MAAEA,cAAc,EAAE,EAAE;MAAEC,YAAY,EAAE;IAAQ,CAAC,EAC7C;MAAED,cAAc,EAAE,EAAE;MAAEC,YAAY,EAAE;IAAc,CAAC,EACnD;MAAEC,IAAI,EAAE;IAAe,CAAC,EACxB;MACEA,IAAI,EAAE,cAAc;MACpBd,KAAK,EAAE,MAAM;MACbe,WAAW,EAAE;IACf,CAAC,EACD;MACEF,YAAY,EACV;IACJ,CAAC;EACD,gBAEFtB,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,SAAA,CAAAqB,QAAQ;IAACC,WAAW,EAAC,iBAAiB;IAACC,QAAQ,EAAE,IAAAC,oBAAM,EAAC,UAAU;EAAE,EAAG,CACjE;AAEb,CAAC;AAAAlB,OAAA,CAAAC,OAAA,GAAAA,OAAA;AA9BYA,OAAO,CAAAkB,WAAA;AAgCb,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAA,EAAS;EAC5B,oBACE9B,MAAA,CAAAO,OAAA,CAAAK,aAAA,4BACEZ,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,SAAA,CAAAqB,QAAQ;IACPM,EAAE,EAAE,CAAE;IACNtB,KAAK,EAAC,SAAS;IACfW,QAAQ;IACRM,WAAW,EAAC;EAAsD,EAClE,eAEF1B,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,OAAA,CAAA6B,MAAM;IAACD,EAAE,EAAE;EAAE,GAAC,QAAM,CAAS,CACzB;AAEX,CAAC;AAAArB,OAAA,CAAAoB,QAAA,GAAAA,QAAA;AAbYA,QAAQ,CAAAD,WAAA"}
+{"version":3,"file":"TextArea.story.js","names":["_addonActions","require","_react","_interopRequireDefault","_storybookStates","_Button","_TextArea","obj","__esModule","default","_default","title","exports","Default","createElement","States","states","focus","hover","active","error","disabled","required","characterLimit","characterLimitHelper","defaultValue","name","description","TextArea","placeholder","onChange","action","displayName","Required","mt","Button"],"sources":["../../../src/elements/TextArea/TextArea.story.tsx"],"sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Button } from \"../Button\"\nimport { TextArea, TextAreaProps } from \"./TextArea\"\n\nexport default {\n  title: \"Components/TextArea\",\n}\n\nexport const Default = () => {\n  return (\n    <States<TextAreaProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { error: \"Something went wrong.\" },\n        { disabled: true },\n        { title: \"Note\" },\n        { title: \"Note\", required: true },\n        { characterLimit: 10 },\n        {\n          characterLimit: 10,\n          characterLimitHelper: true,\n          required: true,\n        },\n        { characterLimit: 10, defaultValue: \"hello\" },\n        { characterLimit: 10, defaultValue: \"hello world\" },\n        { name: \"my-text-area\" },\n        {\n          name: \"my-text-area\",\n          title: \"Note\",\n          description: \"This is my description\",\n        },\n        {\n          defaultValue:\n            \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nam iste beatae reiciendis ea harum, aspernatur, eius, omnis eveniet corporis consequatur minima assumenda ipsum dolor dolorum perferendis animi distinctio eligendi?\",\n        },\n      ]}\n    >\n      <TextArea placeholder=\"Start typing...\" onChange={action(\"onChange\")} />\n    </States>\n  )\n}\n\nexport const Required = () => {\n  return (\n    <form>\n      <TextArea\n        mt={1}\n        title=\"Example\"\n        required\n        placeholder=\"Submission should be blocked unless this has a value\"\n      />\n\n      <Button mt={1}>Submit</Button>\n    </form>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AAAoD,SAAAE,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAErC;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA;AAEM,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEX,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACV,gBAAA,CAAAW,MAAM;IACLC,MAAM,EAAE,CACN,CAAC,CAAC,EACF;MAAEC,KAAK,EAAE;IAAK,CAAC,EACf;MAAEC,KAAK,EAAE;IAAK,CAAC,EACf;MAAEC,MAAM,EAAE;IAAK,CAAC,EAChB;MAAEC,KAAK,EAAE;IAAwB,CAAC,EAClC;MAAEC,QAAQ,EAAE;IAAK,CAAC,EAClB;MAAEV,KAAK,EAAE;IAAO,CAAC,EACjB;MAAEA,KAAK,EAAE,MAAM;MAAEW,QAAQ,EAAE;IAAK,CAAC,EACjC;MAAEC,cAAc,EAAE;IAAG,CAAC,EACtB;MACEA,cAAc,EAAE,EAAE;MAClBC,oBAAoB,EAAE,IAAI;MAC1BF,QAAQ,EAAE;IACZ,CAAC,EACD;MAAEC,cAAc,EAAE,EAAE;MAAEE,YAAY,EAAE;IAAQ,CAAC,EAC7C;MAAEF,cAAc,EAAE,EAAE;MAAEE,YAAY,EAAE;IAAc,CAAC,EACnD;MAAEC,IAAI,EAAE;IAAe,CAAC,EACxB;MACEA,IAAI,EAAE,cAAc;MACpBf,KAAK,EAAE,MAAM;MACbgB,WAAW,EAAE;IACf,CAAC,EACD;MACEF,YAAY,EACV;IACJ,CAAC;EACD,gBAEFvB,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,SAAA,CAAAsB,QAAQ;IAACC,WAAW,EAAC,iBAAiB;IAACC,QAAQ,EAAE,IAAAC,oBAAM,EAAC,UAAU;EAAE,EAAG,CACjE;AAEb,CAAC;AAAAnB,OAAA,CAAAC,OAAA,GAAAA,OAAA;AAnCYA,OAAO,CAAAmB,WAAA;AAqCb,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAA,EAAS;EAC5B,oBACE/B,MAAA,CAAAO,OAAA,CAAAK,aAAA,4BACEZ,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,SAAA,CAAAsB,QAAQ;IACPM,EAAE,EAAE,CAAE;IACNvB,KAAK,EAAC,SAAS;IACfW,QAAQ;IACRO,WAAW,EAAC;EAAsD,EAClE,eAEF3B,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,OAAA,CAAA8B,MAAM;IAACD,EAAE,EAAE;EAAE,GAAC,QAAM,CAAS,CACzB;AAEX,CAAC;AAAAtB,OAAA,CAAAqB,QAAA,GAAAA,QAAA;AAbYA,QAAQ,CAAAD,WAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "38.7.2",
+  "version": "38.9.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -182,5 +182,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "bb47b3cda44fe4dc8b33e10136a2ff6d744199df"
+  "gitHead": "17dabc4aa4dd40987b7f242df83ce444cbfe0144"
 }