@artsy/palette 22.1.0 → 23.0.0

package/dist/elements/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Checkbox/Checkbox.tsx"],"names":["Checkbox","selected","children","error","disabled","hover","focus","onSelect","onClick","rest","tokens","v2","verticalMargin","variant","v3","isSelectable","undefined","handleClick","event","handleKeyPress","key","preventDefault","Container","Box","props","states","checkbox","V2_CHECKBOX_STATES","check","V2_CHECK_STATES","V3_CHECKBOX_STATES","V3_CHECK_STATES","css","default","resting"],"mappings":"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","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { isText } from \"../../helpers/isText\"\nimport { getThemeConfig, useThemeConfig } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Check } from \"./Check\"\nimport {\n  CHECK_STATES as V2_CHECK_STATES,\n  CHECKBOX_STATES as V2_CHECKBOX_STATES,\n} from \"./tokens/v2\"\nimport {\n  CHECK_STATES as V3_CHECK_STATES,\n  CHECKBOX_STATES as V3_CHECKBOX_STATES,\n} from \"./tokens/v3\"\n\nexport interface CheckboxProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable checkbox interactions */\n  disabled?: boolean\n  /** Select the checkbox on render */\n  selected?: boolean\n  /** Show an error indicator */\n  error?: boolean\n  /** Used to force the checkbox into the visual hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Callback when selected */\n  onSelect?: (selected: boolean) => void\n}\n\n/** A checkbox */\nexport const Checkbox: React.FC<CheckboxProps> = ({\n  selected = false,\n  children,\n  error,\n  disabled,\n  hover,\n  focus,\n  onSelect,\n  onClick,\n  ...rest\n}) => {\n  const tokens = useThemeConfig({\n    v2: {\n      verticalMargin: 0.5,\n      variant: \"text\" as TextVariant,\n    },\n    v3: {\n      verticalMargin: 0,\n      variant: \"sm-display\" as TextVariant,\n    },\n  })\n\n  const isSelectable = !disabled && onSelect !== undefined\n\n  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (isSelectable && onSelect) {\n      onSelect(!selected)\n    }\n\n    if (onClick !== undefined) {\n      onClick(event)\n    }\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \" && isSelectable && onSelect) {\n      event.preventDefault()\n      onSelect(!selected)\n    }\n  }\n\n  return (\n    <Container\n      my={tokens.verticalMargin}\n      display=\"flex\"\n      alignItems=\"center\"\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      role=\"checkbox\"\n      aria-checked={selected}\n      selected={selected}\n      hover={hover}\n      focus={focus}\n      disabled={disabled}\n      error={error}\n      {...rest}\n    >\n      <Check\n        selected={selected}\n        error={error}\n        disabled={disabled}\n        focus={focus}\n        hover={hover}\n      />\n\n      <Flex alignItems=\"center\" flex={1}>\n        {isText(children) ? (\n          <Text variant={tokens.variant} lineHeight={1}>\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </Flex>\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<{\n  selected: boolean\n  hover?: boolean\n  focus?: boolean\n  disabled?: boolean\n  error?: boolean\n}>`\n  user-select: none;\n\n  ${(props) => {\n    const states = getThemeConfig(props, {\n      v2: { checkbox: V2_CHECKBOX_STATES, check: V2_CHECK_STATES },\n      v3: { checkbox: V3_CHECKBOX_STATES, check: V3_CHECK_STATES },\n    })\n\n    return css`\n      ${props.selected ? states.checkbox.selected : states.checkbox.default}\n      ${props.focus && states.checkbox.focus}\n      ${props.hover && states.checkbox.hover}\n      ${props.disabled && states.checkbox.disabled}\n      ${props.error && states.checkbox.error}\n\n      &:hover {\n        ${!props.error &&\n        css`\n          ${states.checkbox.hover}\n\n          // Check\n          > div:first-of-type {\n            ${props.selected\n              ? states.check.hover.selected\n              : states.check.hover.resting}\n          }\n        `}\n      }\n\n      &:focus {\n        ${states.checkbox.focus}\n\n        // Check\n         > div:first-of-type {\n          ${props.selected\n            ? states.check.focus.selected\n            : states.check.focus.resting}\n        }\n      }\n\n      &:disabled {\n        ${states.checkbox.disabled}\n      }\n    `\n  }}\n`\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../../src/elements/Checkbox/Checkbox.tsx"],"names":["Checkbox","selected","children","error","disabled","hover","focus","onSelect","onClick","rest","isSelectable","undefined","handleClick","event","handleKeyPress","key","preventDefault","Container","Box","props","css","CHECKBOX_STATES","default","CHECK_STATES","resting"],"mappings":"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","sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { isText } from \"../../helpers/isText\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Check } from \"./Check\"\nimport { CHECK_STATES, CHECKBOX_STATES } from \"./tokens\"\n\nexport interface CheckboxProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable checkbox interactions */\n  disabled?: boolean\n  /** Select the checkbox on render */\n  selected?: boolean\n  /** Show an error indicator */\n  error?: boolean\n  /** Used to force the checkbox into the visual hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Callback when selected */\n  onSelect?: (selected: boolean) => void\n}\n\n/** A checkbox */\nexport const Checkbox: React.FC<CheckboxProps> = ({\n  selected = false,\n  children,\n  error,\n  disabled,\n  hover,\n  focus,\n  onSelect,\n  onClick,\n  ...rest\n}) => {\n  const isSelectable = !disabled && onSelect !== undefined\n\n  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (isSelectable && onSelect) {\n      onSelect(!selected)\n    }\n\n    if (onClick !== undefined) {\n      onClick(event)\n    }\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \" && isSelectable && onSelect) {\n      event.preventDefault()\n      onSelect(!selected)\n    }\n  }\n\n  return (\n    <Container\n      display=\"flex\"\n      alignItems=\"center\"\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      role=\"checkbox\"\n      aria-checked={selected}\n      selected={selected}\n      hover={hover}\n      focus={focus}\n      disabled={disabled}\n      error={error}\n      {...rest}\n    >\n      <Check\n        selected={selected}\n        error={error}\n        disabled={disabled}\n        focus={focus}\n        hover={hover}\n      />\n\n      <Flex alignItems=\"center\" flex={1}>\n        {isText(children) ? (\n          <Text variant=\"sm-display\" lineHeight={1}>\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </Flex>\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<{\n  selected: boolean\n  hover?: boolean\n  focus?: boolean\n  disabled?: boolean\n  error?: boolean\n}>`\n  user-select: none;\n\n  ${(props) => {\n    return css`\n      ${props.selected ? CHECKBOX_STATES.selected : CHECKBOX_STATES.default}\n      ${props.focus && CHECKBOX_STATES.focus}\n      ${props.hover && CHECKBOX_STATES.hover}\n      ${props.disabled && CHECKBOX_STATES.disabled}\n      ${props.error && CHECKBOX_STATES.error}\n\n      &:hover {\n        ${!props.error &&\n        css`\n          ${CHECKBOX_STATES.hover}\n\n          // Check\n          > div:first-of-type {\n            ${props.selected\n              ? CHECK_STATES.hover.selected\n              : CHECK_STATES.hover.resting}\n          }\n        `}\n      }\n\n      &:focus {\n        ${CHECKBOX_STATES.focus}\n\n        // Check\n         > div:first-of-type {\n          ${props.selected\n            ? CHECK_STATES.focus.selected\n            : CHECK_STATES.focus.resting}\n        }\n      }\n\n      &:disabled {\n        ${CHECKBOX_STATES.disabled}\n      }\n    `\n  }}\n`\n"],"file":"Checkbox.js"}

package/dist/elements/Checkbox/{tokens/v3.js → tokens.js}

@@ -41,4 +41,4 @@ var CHECKBOX_STATES = {
   error: (0, _styledComponents.css)(["color:", ";"], (0, _themeGet.themeGet)("colors.red100"))
 };
 exports.CHECKBOX_STATES = CHECKBOX_STATES;
-//# sourceMappingURL=v3.js.map
+//# sourceMappingURL=tokens.js.map

package/dist/elements/Checkbox/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/Checkbox/tokens.ts"],"names":["CHECK_STATES","default","resting","css","selected","disabled","hover","focus","error","CHECKBOX_STATES"],"mappings":";;;;;;;AAAA;;AACA;;AAEO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,OAAO,MAAEC,qBAAF,2DACe,wBAAS,iBAAT,CADf,EAEW,wBAAS,gBAAT,CAFX,EAGI,wBAAS,iBAAT,CAHJ,CADA;AAMPC,IAAAA,QAAQ,MAAED,qBAAF,2DACc,wBAAS,iBAAT,CADd,EAEU,wBAAS,iBAAT,CAFV,EAGG,wBAAS,iBAAT,CAHH;AAND,GADiB;AAa1BE,EAAAA,QAAQ,EAAE;AACRH,IAAAA,OAAO,MAAEC,qBAAF,2DACe,wBAAS,iBAAT,CADf,EAEW,wBAAS,gBAAT,CAFX,EAGI,wBAAS,iBAAT,CAHJ,CADC;AAMRC,IAAAA,QAAQ,MAAED,qBAAF,2DACc,wBAAS,gBAAT,CADd,EAEU,wBAAS,gBAAT,CAFV,EAGG,wBAAS,iBAAT,CAHH;AANA,GAbgB;AAyB1BG,EAAAA,KAAK,EAAE;AACLJ,IAAAA,OAAO,MAAEC,qBAAF,2DACe,wBAAS,iBAAT,CADf,EAEW,wBAAS,gBAAT,CAFX,EAGI,wBAAS,iBAAT,CAHJ,CADF;AAMLC,IAAAA,QAAQ,MAAED,qBAAF,2DACc,wBAAS,gBAAT,CADd,EAEU,wBAAS,gBAAT,CAFV,EAGG,wBAAS,iBAAT,CAHH;AANH,GAzBmB;AAqC1BI,EAAAA,KAAK,EAAE;AACLL,IAAAA,OAAO,MAAEC,qBAAF,2DACe,wBAAS,iBAAT,CADf,EAEW,wBAAS,iBAAT,CAFX,EAGI,wBAAS,iBAAT,CAHJ,CADF;AAMLC,IAAAA,QAAQ,MAAED,qBAAF,2DACc,wBAAS,iBAAT,CADd,EAEU,wBAAS,iBAAT,CAFV,EAGG,wBAAS,iBAAT,CAHH;AANH,GArCmB;AAiD1BK,EAAAA,KAAK,EAAE;AACLN,IAAAA,OAAO,MAAEC,qBAAF,2DACe,wBAAS,iBAAT,CADf,EAEW,wBAAS,eAAT,CAFX,EAGI,wBAAS,iBAAT,CAHJ,CADF;AAMLC,IAAAA,QAAQ,MAAED,qBAAF,2DACc,wBAAS,eAAT,CADd,EAEU,wBAAS,eAAT,CAFV,EAGG,wBAAS,iBAAT,CAHH;AANH;AAjDmB,CAArB;;AA+DA,IAAMM,eAAe,GAAG;AAC7BR,EAAAA,OAAO,MAAEE,qBAAF,mBACI,wBAAS,gBAAT,CADJ,CADsB;AAI7BC,EAAAA,QAAQ,MAAED,qBAAF,mBACG,wBAAS,iBAAT,CADH,CAJqB;AAO7BI,EAAAA,KAAK,MAAEJ,qBAAF,6CAEM,wBAAS,iBAAT,CAFN,CAPwB;AAW7BG,EAAAA,KAAK,MAAEH,qBAAF,6CAEM,wBAAS,gBAAT,CAFN,CAXwB;AAe7BE,EAAAA,QAAQ,MAAEF,qBAAF,uCAEG,wBAAS,gBAAT,CAFH,CAfqB;AAmB7BK,EAAAA,KAAK,MAAEL,qBAAF,mBACM,wBAAS,eAAT,CADN;AAnBwB,CAAxB","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\n\nexport const CHECK_STATES = {\n  default: {\n    resting: css`\n      background-color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.black30\")};\n      color: ${themeGet(\"colors.white100\")};\n    `,\n    selected: css`\n      background-color: ${themeGet(\"colors.black100\")};\n      border-color: ${themeGet(\"colors.black100\")};\n      color: ${themeGet(\"colors.white100\")};\n    `,\n  },\n  disabled: {\n    resting: css`\n      background-color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.black30\")};\n      color: ${themeGet(\"colors.white100\")};\n    `,\n    selected: css`\n      background-color: ${themeGet(\"colors.black30\")};\n      border-color: ${themeGet(\"colors.black30\")};\n      color: ${themeGet(\"colors.white100\")};\n    `,\n  },\n  hover: {\n    resting: css`\n      background-color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.white100\")};\n    `,\n    selected: css`\n      background-color: ${themeGet(\"colors.blue100\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.white100\")};\n    `,\n  },\n  focus: {\n    resting: css`\n      background-color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.black100\")};\n      color: ${themeGet(\"colors.white100\")};\n    `,\n    selected: css`\n      background-color: ${themeGet(\"colors.black100\")};\n      border-color: ${themeGet(\"colors.black100\")};\n      color: ${themeGet(\"colors.white100\")};\n    `,\n  },\n  error: {\n    resting: css`\n      background-color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.red100\")};\n      color: ${themeGet(\"colors.white100\")};\n    `,\n    selected: css`\n      background-color: ${themeGet(\"colors.red100\")};\n      border-color: ${themeGet(\"colors.red100\")};\n      color: ${themeGet(\"colors.white100\")};\n    `,\n  },\n} as const\n\nexport const CHECKBOX_STATES = {\n  default: css`\n    color: ${themeGet(\"colors.black60\")};\n  `,\n  selected: css`\n    color: ${themeGet(\"colors.black100\")};\n  `,\n  focus: css`\n    text-decoration: underline;\n    color: ${themeGet(\"colors.black100\")};\n  `,\n  hover: css`\n    text-decoration: underline;\n    color: ${themeGet(\"colors.blue100\")};\n  `,\n  disabled: css`\n    pointer-events: none;\n    color: ${themeGet(\"colors.black30\")};\n  `,\n  error: css`\n    color: ${themeGet(\"colors.red100\")};\n  `,\n} as const\n"],"file":"tokens.js"}

package/dist/elements/EntityHeader/EntityHeader.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { LabelProps } from "../Label/Label";
+import { LabelProps } from "../Label";
 import { FlexProps } from "../Flex";
 import { ImageProps } from "../Image";
 export interface EntityHeaderProps extends FlexProps {
@@ -18,5 +18,6 @@ export interface EntityHeaderProps extends FlexProps {
 }
 /**
  * Component that is used as entity header that is paired with rich information about the entity.
+ * @deprecated: Use EntityHeader fragment container patterns within Force instead
  */
 export declare const EntityHeader: React.FC<EntityHeaderProps>;

package/dist/elements/EntityHeader/EntityHeader.js

@@ -7,24 +7,75 @@ exports.EntityHeader = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Theme = require("../../Theme");
+var _Label = require("../Label");
 
-var _EntityHeader = require("./v2/EntityHeader");
+var _Flex = require("../Flex");
 
-var _EntityHeader2 = require("./v3/EntityHeader");
+var _Avatar = require("../Avatar");
+
+var _Text = require("../Text");
+
+var _excluded = ["name", "href", "meta", "initials", "imageUrl", "image", "smallVariant", "FollowButton", "labels"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || 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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 /**
  * Component that is used as entity header that is paired with rich information about the entity.
+ * @deprecated: Use EntityHeader fragment container patterns within Force instead
  */
-var EntityHeader = function EntityHeader(props) {
-  return (0, _Theme.useThemeConfig)({
-    v2: /*#__PURE__*/_react.default.createElement(_EntityHeader.EntityHeader, props),
-    v3: /*#__PURE__*/_react.default.createElement(_EntityHeader2.EntityHeader, props)
-  });
+var EntityHeader = function EntityHeader(_ref) {
+  var name = _ref.name,
+      href = _ref.href,
+      meta = _ref.meta,
+      initials = _ref.initials,
+      imageUrl = _ref.imageUrl,
+      image = _ref.image,
+      smallVariant = _ref.smallVariant,
+      FollowButton = _ref.FollowButton,
+      labels = _ref.labels,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(_Flex.Flex, _extends({
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, rest), /*#__PURE__*/_react.default.createElement(_Flex.Flex, _extends({
+    alignItems: "center"
+  }, href ? {
+    as: "a",
+    href: href,
+    style: {
+      textDecoration: "none"
+    }
+  } : {}), (imageUrl || image || initials) && /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    mr: 1
+  }, /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, _extends({
+    size: smallVariant ? "xxs" : "xs",
+    src: imageUrl,
+    initials: initials
+  }, image))), /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    flexDirection: "column",
+    mr: 1
+  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "sm-display"
+  }, name), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "sm-display"
+  }, labels === null || labels === void 0 ? void 0 : labels.map(function (label, i) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: i
+    }, /*#__PURE__*/_react.default.createElement(_Label.Label, label), " ");
+  })), meta && /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "xs",
+    color: "black60"
+  }, meta))), FollowButton);
 };
 
 exports.EntityHeader = EntityHeader;
 EntityHeader.displayName = "EntityHeader";
+EntityHeader.displayName = "EntityHeader";
 //# sourceMappingURL=EntityHeader.js.map

package/dist/elements/EntityHeader/EntityHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/EntityHeader/EntityHeader.tsx"],"names":["EntityHeader","props","v2","v3","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AAIA;;AACA;;;;AAgBA;AACA;AACA;AACO,IAAMA,YAAyC,GAAG,SAA5CA,YAA4C,CAACC,KAAD,EAAW;AAClE,SAAO,2BAAe;AACpBC,IAAAA,EAAE,eAAE,6BAAC,0BAAD,EAAoBD,KAApB,CADgB;AAEpBE,IAAAA,EAAE,eAAE,6BAAC,2BAAD,EAAoBF,KAApB;AAFgB,GAAf,CAAP;AAID,CALM;;;AAOPD,YAAY,CAACI,WAAb,GAA2B,cAA3B","sourcesContent":["import React from \"react\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { LabelProps } from \"../Label/Label\"\nimport { FlexProps } from \"../Flex\"\nimport { ImageProps } from \"../Image\"\nimport { EntityHeader as EntityHeaderV2 } from \"./v2/EntityHeader\"\nimport { EntityHeader as EntityHeaderV3 } from \"./v3/EntityHeader\"\n\nexport interface EntityHeaderProps extends FlexProps {\n  href?: string\n  /** @deprecated: use `image` instead */\n  imageUrl?: string\n  /** Pass props to the underlying `Image` in `Avatar` */\n  image?: Partial<ImageProps>\n  initials?: string\n  meta?: string\n  name: string\n  labels?: LabelProps[]\n  smallVariant?: boolean\n  FollowButton?: JSX.Element\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void\n}\n/**\n * Component that is used as entity header that is paired with rich information about the entity.\n */\nexport const EntityHeader: React.FC<EntityHeaderProps> = (props) => {\n  return useThemeConfig({\n    v2: <EntityHeaderV2 {...props} />,\n    v3: <EntityHeaderV3 {...props} />,\n  })\n}\n\nEntityHeader.displayName = \"EntityHeader\"\n"],"file":"EntityHeader.js"}
+{"version":3,"sources":["../../../src/elements/EntityHeader/EntityHeader.tsx"],"names":["EntityHeader","name","href","meta","initials","imageUrl","image","smallVariant","FollowButton","labels","rest","as","style","textDecoration","map","label","i","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;;;AAgBA;AACA;AACA;AACA;AAEO,IAAMA,YAAyC,GAAG,SAA5CA,YAA4C,OAWnD;AAAA,MAVJC,IAUI,QAVJA,IAUI;AAAA,MATJC,IASI,QATJA,IASI;AAAA,MARJC,IAQI,QARJA,IAQI;AAAA,MAPJC,QAOI,QAPJA,QAOI;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,KAKI,QALJA,KAKI;AAAA,MAJJC,YAII,QAJJA,YAII;AAAA,MAHJC,YAGI,QAHJA,YAGI;AAAA,MAFJC,MAEI,QAFJA,MAEI;AAAA,MADDC,IACC;;AACJ,sBACE,6BAAC,UAAD;AAAM,IAAA,UAAU,EAAC,QAAjB;AAA0B,IAAA,cAAc,EAAC;AAAzC,KAA6DA,IAA7D,gBACE,6BAAC,UAAD;AACE,IAAA,UAAU,EAAC;AADb,KAEOR,IAAI,GAAG;AAAES,IAAAA,EAAE,EAAE,GAAN;AAAWT,IAAAA,IAAI,EAAJA,IAAX;AAAiBU,IAAAA,KAAK,EAAE;AAAEC,MAAAA,cAAc,EAAE;AAAlB;AAAxB,GAAH,GAA0D,EAFrE,GAIG,CAACR,QAAQ,IAAIC,KAAZ,IAAqBF,QAAtB,kBACC,6BAAC,UAAD;AAAM,IAAA,EAAE,EAAE;AAAV,kBACE,6BAAC,cAAD;AACE,IAAA,IAAI,EAAEG,YAAY,GAAG,KAAH,GAAW,IAD/B;AAEE,IAAA,GAAG,EAAEF,QAFP;AAGE,IAAA,QAAQ,EAAED;AAHZ,KAIME,KAJN,EADF,CALJ,eAeE,6BAAC,UAAD;AAAM,IAAA,aAAa,EAAC,QAApB;AAA6B,IAAA,EAAE,EAAE;AAAjC,kBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAA4BL,IAA5B,CADF,eAGE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KACGQ,MADH,aACGA,MADH,uBACGA,MAAM,CAAEK,GAAR,CAAY,UAACC,KAAD,EAAQC,CAAR;AAAA,wBACX,6BAAC,cAAD,CAAO,QAAP;AAAgB,MAAA,GAAG,EAAEA;AAArB,oBACE,6BAAC,YAAD,EAAWD,KAAX,CADF,EACuB,GADvB,CADW;AAAA,GAAZ,CADH,CAHF,EAWGZ,IAAI,iBACH,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,IAAd;AAAmB,IAAA,KAAK,EAAC;AAAzB,KACGA,IADH,CAZJ,CAfF,CADF,EAmCGK,YAnCH,CADF;AAuCD,CAnDM;;;AAAMR,Y;AAqDbA,YAAY,CAACiB,WAAb,GAA2B,cAA3B","sourcesContent":["import React from \"react\"\nimport { Label, LabelProps } from \"../Label\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { ImageProps } from \"../Image\"\nimport { Avatar } from \"../Avatar\"\nimport { Text } from \"../Text\"\n\nexport interface EntityHeaderProps extends FlexProps {\n  href?: string\n  /** @deprecated: use `image` instead */\n  imageUrl?: string\n  /** Pass props to the underlying `Image` in `Avatar` */\n  image?: Partial<ImageProps>\n  initials?: string\n  meta?: string\n  name: string\n  labels?: LabelProps[]\n  smallVariant?: boolean\n  FollowButton?: JSX.Element\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void\n}\n/**\n * Component that is used as entity header that is paired with rich information about the entity.\n * @deprecated: Use EntityHeader fragment container patterns within Force instead\n */\n\nexport const EntityHeader: React.FC<EntityHeaderProps> = ({\n  name,\n  href,\n  meta,\n  initials,\n  imageUrl,\n  image,\n  smallVariant,\n  FollowButton,\n  labels,\n  ...rest\n}) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"space-between\" {...rest}>\n      <Flex\n        alignItems=\"center\"\n        {...(href ? { as: \"a\", href, style: { textDecoration: \"none\" } } : {})}\n      >\n        {(imageUrl || image || initials) && (\n          <Flex mr={1}>\n            <Avatar\n              size={smallVariant ? \"xxs\" : \"xs\"}\n              src={imageUrl}\n              initials={initials}\n              {...image}\n            />\n          </Flex>\n        )}\n\n        <Flex flexDirection=\"column\" mr={1}>\n          <Text variant=\"sm-display\">{name}</Text>\n\n          <Text variant=\"sm-display\">\n            {labels?.map((label, i) => (\n              <React.Fragment key={i}>\n                <Label {...label} />{\" \"}\n              </React.Fragment>\n            ))}\n          </Text>\n\n          {meta && (\n            <Text variant=\"xs\" color=\"black60\">\n              {meta}\n            </Text>\n          )}\n        </Flex>\n      </Flex>\n\n      {FollowButton}\n    </Flex>\n  )\n}\n\nEntityHeader.displayName = \"EntityHeader\"\n"],"file":"EntityHeader.js"}

package/dist/elements/EntityHeader/EntityHeader.story.js

@@ -9,14 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _storybookStates = require("storybook-states");
 
-var _Theme = require("../../Theme");
-
 var _Button = require("../Button");
 
-var _Clickable = require("../Clickable");
-
-var _Text = require("../Text");
-
 var _EntityHeader = require("./EntityHeader");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,25 +23,16 @@ var _default = {
 exports.default = _default;
 
 var FollowButton = function FollowButton() {
-  return (0, _Theme.useThemeConfig)({
-    v2: /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
-      textDecoration: "underline",
-      onClick: function onClick() {
-        return alert("Follow");
-      }
-    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-      variant: "text"
-    }, "Follow")),
-    v3: /*#__PURE__*/_react.default.createElement(_Button.Button, {
-      size: "small",
-      variant: "secondaryBlack",
-      onClick: function onClick() {
-        return alert("Follow");
-      }
-    }, "Follow")
-  });
+  return /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    size: "small",
+    variant: "secondaryBlack",
+    onClick: function onClick() {
+      return alert("Follow");
+    }
+  }, "Follow");
 };
 
+FollowButton.displayName = "FollowButton";
 var imageProps = {
   src: "https://picsum.photos/seed/example/110/110",
   srcSet: "https://picsum.photos/seed/example/110/110 1x, https://picsum.photos/seed/example/220/220 2x",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/EntityHeader/EntityHeader.story.tsx"],"names":["title","FollowButton","v2","alert","v3","imageProps","src","srcSet","lazyLoad","Default","name","smallVariant","initials","image","meta","href","labels","children","variant","props"],"mappings":"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","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Button } from \"../Button\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { EntityHeader, EntityHeaderProps } from \"./EntityHeader\"\n\nexport default {\n  title: \"Components/EntityHeader\",\n}\n\nconst FollowButton = () => {\n  return useThemeConfig({\n    v2: (\n      <Clickable textDecoration=\"underline\" onClick={() => alert(\"Follow\")}>\n        <Text variant=\"text\">Follow</Text>\n      </Clickable>\n    ),\n\n    v3: (\n      <Button\n        size=\"small\"\n        variant=\"secondaryBlack\"\n        onClick={() => alert(\"Follow\")}\n      >\n        Follow\n      </Button>\n    ),\n  })\n}\n\nconst imageProps = {\n  src: \"https://picsum.photos/seed/example/110/110\",\n  srcSet:\n    \"https://picsum.photos/seed/example/110/110 1x, https://picsum.photos/seed/example/220/220 2x\",\n  lazyLoad: true,\n}\n\nexport const Default = () => {\n  return (\n    <States<EntityHeaderProps>\n      states={[\n        { name: \"Francesca DiMattio\" },\n        { smallVariant: true, name: \"Francesca DiMattio\", initials: \"FD\" },\n        { name: \"Francesca DiMattio\", initials: \"FD\" },\n        {\n          smallVariant: true,\n          name: \"Francesca DiMattio\",\n          image: imageProps,\n        },\n        {\n          name: \"Francesca DiMattio\",\n          image: imageProps,\n        },\n        {\n          initials: \"FD\",\n          name: \"Francesca DiMattio\",\n          image: imageProps,\n          meta: \"American, b. 1979\",\n          href: \"http://www.artsy.net/artist/francesca-dimattio\",\n        },\n        {\n          smallVariant: true,\n          name: \"Francesca DiMattio\",\n          image: imageProps,\n          FollowButton: <FollowButton />,\n        },\n        {\n          initials: \"FD\",\n          name: \"Francesca DiMattio\",\n          image: imageProps,\n          meta: \"American, b. 1979\",\n          href: \"http://www.artsy.net/artist/francesca-dimattio\",\n          FollowButton: <FollowButton />,\n        },\n        {\n          initials: \"FLD\",\n          name: \"Francesca Longer DiMattio\",\n          image: imageProps,\n          meta: \"American, b. Founded 1979\",\n          href: \"http://www.artsy.net/artist/francesca-dimattio\",\n          FollowButton: <FollowButton />,\n        },\n        {\n          initials: \"FLD\",\n          name: \"Francesca Much Longer DiMattio\",\n          image: imageProps,\n          meta: \"American, b. Founded 1979\",\n          href: \"http://www.artsy.net/artist/francesca-dimattio\",\n          FollowButton: <FollowButton />,\n          labels: [{ children: \"Black Owned\" }],\n        },\n        {\n          initials: \"FLD\",\n          name: \"Francesca Much Longer DiMattio\",\n          image: imageProps,\n          meta: \"American, b. Founded 1979\",\n          href: \"http://www.artsy.net/artist/francesca-dimattio\",\n          FollowButton: <FollowButton />,\n          labels: [\n            { children: \"Black Owned\" },\n            { children: \"Women Owned\", variant: \"brand\" },\n          ],\n        },\n      ]}\n    >\n      {(props) => <EntityHeader {...props} maxWidth={350} />}\n    </States>\n  )\n}\n"],"file":"EntityHeader.story.js"}
+{"version":3,"sources":["../../../src/elements/EntityHeader/EntityHeader.story.tsx"],"names":["title","FollowButton","alert","imageProps","src","srcSet","lazyLoad","Default","name","smallVariant","initials","image","meta","href","labels","children","variant","props"],"mappings":"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","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Button } from \"../Button\"\nimport { EntityHeader, EntityHeaderProps } from \"./EntityHeader\"\n\nexport default {\n  title: \"Components/EntityHeader\",\n}\n\nconst FollowButton = () => {\n  return (\n    <Button\n      size=\"small\"\n      variant=\"secondaryBlack\"\n      onClick={() => alert(\"Follow\")}\n    >\n      Follow\n    </Button>\n  )\n}\n\nconst imageProps = {\n  src: \"https://picsum.photos/seed/example/110/110\",\n  srcSet:\n    \"https://picsum.photos/seed/example/110/110 1x, https://picsum.photos/seed/example/220/220 2x\",\n  lazyLoad: true,\n}\n\nexport const Default = () => {\n  return (\n    <States<EntityHeaderProps>\n      states={[\n        { name: \"Francesca DiMattio\" },\n        { smallVariant: true, name: \"Francesca DiMattio\", initials: \"FD\" },\n        { name: \"Francesca DiMattio\", initials: \"FD\" },\n        {\n          smallVariant: true,\n          name: \"Francesca DiMattio\",\n          image: imageProps,\n        },\n        {\n          name: \"Francesca DiMattio\",\n          image: imageProps,\n        },\n        {\n          initials: \"FD\",\n          name: \"Francesca DiMattio\",\n          image: imageProps,\n          meta: \"American, b. 1979\",\n          href: \"http://www.artsy.net/artist/francesca-dimattio\",\n        },\n        {\n          smallVariant: true,\n          name: \"Francesca DiMattio\",\n          image: imageProps,\n          FollowButton: <FollowButton />,\n        },\n        {\n          initials: \"FD\",\n          name: \"Francesca DiMattio\",\n          image: imageProps,\n          meta: \"American, b. 1979\",\n          href: \"http://www.artsy.net/artist/francesca-dimattio\",\n          FollowButton: <FollowButton />,\n        },\n        {\n          initials: \"FLD\",\n          name: \"Francesca Longer DiMattio\",\n          image: imageProps,\n          meta: \"American, b. Founded 1979\",\n          href: \"http://www.artsy.net/artist/francesca-dimattio\",\n          FollowButton: <FollowButton />,\n        },\n        {\n          initials: \"FLD\",\n          name: \"Francesca Much Longer DiMattio\",\n          image: imageProps,\n          meta: \"American, b. Founded 1979\",\n          href: \"http://www.artsy.net/artist/francesca-dimattio\",\n          FollowButton: <FollowButton />,\n          labels: [{ children: \"Black Owned\" }],\n        },\n        {\n          initials: \"FLD\",\n          name: \"Francesca Much Longer DiMattio\",\n          image: imageProps,\n          meta: \"American, b. Founded 1979\",\n          href: \"http://www.artsy.net/artist/francesca-dimattio\",\n          FollowButton: <FollowButton />,\n          labels: [\n            { children: \"Black Owned\" },\n            { children: \"Women Owned\", variant: \"brand\" },\n          ],\n        },\n      ]}\n    >\n      {(props) => <EntityHeader {...props} maxWidth={350} />}\n    </States>\n  )\n}\n"],"file":"EntityHeader.story.js"}

package/dist/elements/Expandable/Expandable.js

@@ -13,8 +13,6 @@ var _isText = require("../../helpers/isText");
 
 var _svgs = require("../../svgs");
 
-var _Theme = require("../../Theme");
-
 var _Box = require("../Box");
 
 var _Clickable = require("../Clickable");
@@ -58,26 +56,6 @@ var Expandable = function Expandable(_ref) {
       onClick = _ref.onClick,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var tokens = (0, _Theme.useThemeConfig)({
-    v2: {
-      borderColor: "black10",
-      textProps: {
-        variant: "small",
-        fontWeight: "bold"
-      },
-      chevronSize: 12,
-      mr: undefined
-    },
-    v3: {
-      borderColor: "black60",
-      textProps: {
-        variant: "sm-display"
-      },
-      chevronSize: 14,
-      mr: 1
-    }
-  });
-
   var _useState = (0, _react.useState)(defaultExpanded),
       _useState2 = _slicedToArray(_useState, 2),
       expanded = _useState2[0],
@@ -101,7 +79,7 @@ var Expandable = function Expandable(_ref) {
     alignItems: "center",
     justifyContent: "space-between",
     borderTop: "1px solid",
-    borderColor: tokens.borderColor,
+    borderColor: "black60",
     pt: 1,
     disabled: disabled,
     "aria-expanded": expanded,
@@ -111,12 +89,14 @@ var Expandable = function Expandable(_ref) {
     minHeight: 40,
     display: "flex",
     alignItems: "center"
-  }, (0, _isText.isText)(label) ? /*#__PURE__*/_react.default.createElement(_Text.Text, tokens.textProps, label) : label), !disabled && /*#__PURE__*/_react.default.createElement(_svgs.ChevronIcon, {
+  }, (0, _isText.isText)(label) ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "sm-display"
+  }, label) : label), !disabled && /*#__PURE__*/_react.default.createElement(_svgs.ChevronIcon, {
     direction: expanded ? "up" : "down",
-    width: tokens.chevronSize,
-    height: tokens.chevronSize,
+    width: 14,
+    height: 14,
     ml: 1,
-    mr: tokens.mr,
+    mr: 1,
     "aria-hidden": "true"
   })), expanded && (typeof children === "function" ? children({
     setExpanded: setExpanded,

package/dist/elements/Expandable/Expandable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Expandable/Expandable.tsx"],"names":["Expandable","label","defaultExpanded","expanded","children","disabled","onClick","rest","tokens","v2","borderColor","textProps","variant","fontWeight","chevronSize","mr","undefined","v3","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,OAO/C;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALMC,eAKN,QALJC,QAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,MAAM,GAAG,2BAAe;AAC5BC,IAAAA,EAAE,EAAE;AACFC,MAAAA,WAAW,EAAE,SADX;AAEFC,MAAAA,SAAS,EAAE;AAAEC,QAAAA,OAAO,EAAE,OAAX;AAAoBC,QAAAA,UAAU,EAAE;AAAhC,OAFT;AAGFC,MAAAA,WAAW,EAAE,EAHX;AAIFC,MAAAA,EAAE,EAAEC;AAJF,KADwB;AAO5BC,IAAAA,EAAE,EAAE;AACFP,MAAAA,WAAW,EAAE,SADX;AAEFC,MAAAA,SAAS,EAAE;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAFT;AAGFE,MAAAA,WAAW,EAAE,EAHX;AAIFC,MAAAA,EAAE,EAAE;AAJF;AAPwB,GAAf,CAAf;;AAeA,kBAAgC,qBAASb,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBe,WAAjB;;AAEA,uBAAmC,wBAAcX,IAAd,CAAnC;AAAA;AAAA,MAAOY,QAAP;AAAA,MAAiBC,cAAjB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAClBC,KADkB,EAEf;AACHJ,IAAAA,WAAW,CAAC,UAACK,YAAD;AAAA,aAAkB,CAACA,YAAnB;AAAA,KAAD,CAAX;AACAjB,IAAAA,OAAO,IAAIA,OAAO,CAACgB,KAAD,CAAlB;AACD,GALD;;AAOA,sBACE,6BAAC,QAAD,EAASH,QAAT,eACE,6BAAC,oBAAD;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,eAJjB;AAKE,IAAA,SAAS,EAAC,WALZ;AAME,IAAA,WAAW,EAAEX,MAAM,CAACE,WANtB;AAOE,IAAA,EAAE,EAAE,CAPN;AAQE,IAAA,QAAQ,EAAEL,QARZ;AASE,qBAAeF,QATjB;AAUE,IAAA,OAAO,EAAEkB;AAVX,KAWMD,cAXN,gBAaE,6BAAC,UAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,SAAS,EAAE,EAA1B;AAA8B,IAAA,OAAO,EAAC,MAAtC;AAA6C,IAAA,UAAU,EAAC;AAAxD,KACG,oBAAOnB,KAAP,iBAAgB,6BAAC,UAAD,EAAUO,MAAM,CAACG,SAAjB,EAA6BV,KAA7B,CAAhB,GAA6DA,KADhE,CAbF,EAiBG,CAACI,QAAD,iBACC,6BAAC,iBAAD;AACE,IAAA,SAAS,EAAEF,QAAQ,GAAG,IAAH,GAAU,MAD/B;AAEE,IAAA,KAAK,EAAEK,MAAM,CAACM,WAFhB;AAGE,IAAA,MAAM,EAAEN,MAAM,CAACM,WAHjB;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAEN,MAAM,CAACO,EALb;AAME,mBAAY;AANd,IAlBJ,CADF,EA8BGZ,QAAQ,KACN,OAAOC,QAAP,KAAoB,UAApB,GACGA,QAAQ,CAAC;AAAEc,IAAAA,WAAW,EAAXA,WAAF;AAAef,IAAAA,QAAQ,EAARA;AAAf,GAAD,CADX,GAEGC,QAHG,CA9BX,CADF;AAqCD,CAvEM;;;AAAMJ,U","sourcesContent":["import React, { useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text, TextProps } from \"../Text\"\n\nexport interface ExpandableProps extends ClickableProps {\n  label?: string | JSX.Element\n  expanded?: boolean\n  children: React.ReactNode\n}\n\n/**\n * A toggleable component used to show / hide content\n */\nexport const Expandable: React.FC<ExpandableProps> = ({\n  label,\n  expanded: defaultExpanded,\n  children,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const tokens = useThemeConfig({\n    v2: {\n      borderColor: \"black10\",\n      textProps: { variant: \"small\", fontWeight: \"bold\" } as TextProps,\n      chevronSize: 12,\n      mr: undefined,\n    },\n    v3: {\n      borderColor: \"black60\",\n      textProps: { variant: \"sm-display\" } as TextProps,\n      chevronSize: 14,\n      mr: 1,\n    },\n  })\n\n  const [expanded, setExpanded] = useState(defaultExpanded)\n\n  const [boxProps, clickableProps] = splitBoxProps(rest)\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => {\n    setExpanded((prevExpanded) => !prevExpanded)\n    onClick && onClick(event)\n  }\n\n  return (\n    <Box {...boxProps}>\n      <Clickable\n        width=\"100%\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        borderTop=\"1px solid\"\n        borderColor={tokens.borderColor}\n        pt={1}\n        disabled={disabled}\n        aria-expanded={expanded}\n        onClick={handleClick}\n        {...clickableProps}\n      >\n        <Flex flex={1} minHeight={40} display=\"flex\" alignItems=\"center\">\n          {isText(label) ? <Text {...tokens.textProps}>{label}</Text> : label}\n        </Flex>\n\n        {!disabled && (\n          <ChevronIcon\n            direction={expanded ? \"up\" : \"down\"}\n            width={tokens.chevronSize}\n            height={tokens.chevronSize}\n            ml={1}\n            mr={tokens.mr}\n            aria-hidden=\"true\"\n          />\n        )}\n      </Clickable>\n\n      {expanded &&\n        (typeof children === \"function\"\n          ? children({ setExpanded, expanded })\n          : children)}\n    </Box>\n  )\n}\n"],"file":"Expandable.js"}
+{"version":3,"sources":["../../../src/elements/Expandable/Expandable.tsx"],"names":["Expandable","label","defaultExpanded","expanded","children","disabled","onClick","rest","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,OAO/C;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALMC,eAKN,QALJC,QAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,kBAAgC,qBAASL,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBK,WAAjB;;AAEA,uBAAmC,wBAAcD,IAAd,CAAnC;AAAA;AAAA,MAAOE,QAAP;AAAA,MAAiBC,cAAjB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAClBC,KADkB,EAEf;AACHJ,IAAAA,WAAW,CAAC,UAACK,YAAD;AAAA,aAAkB,CAACA,YAAnB;AAAA,KAAD,CAAX;AACAP,IAAAA,OAAO,IAAIA,OAAO,CAACM,KAAD,CAAlB;AACD,GALD;;AAOA,sBACE,6BAAC,QAAD,EAASH,QAAT,eACE,6BAAC,oBAAD;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,eAJjB;AAKE,IAAA,SAAS,EAAC,WALZ;AAME,IAAA,WAAW,EAAC,SANd;AAOE,IAAA,EAAE,EAAE,CAPN;AAQE,IAAA,QAAQ,EAAEJ,QARZ;AASE,qBAAeF,QATjB;AAUE,IAAA,OAAO,EAAEQ;AAVX,KAWMD,cAXN,gBAaE,6BAAC,UAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,SAAS,EAAE,EAA1B;AAA8B,IAAA,OAAO,EAAC,MAAtC;AAA6C,IAAA,UAAU,EAAC;AAAxD,KACG,oBAAOT,KAAP,iBAAgB,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAA4BA,KAA5B,CAAhB,GAA4DA,KAD/D,CAbF,EAiBG,CAACI,QAAD,iBACC,6BAAC,iBAAD;AACE,IAAA,SAAS,EAAEF,QAAQ,GAAG,IAAH,GAAU,MAD/B;AAEE,IAAA,KAAK,EAAE,EAFT;AAGE,IAAA,MAAM,EAAE,EAHV;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAE,CALN;AAME,mBAAY;AANd,IAlBJ,CADF,EA8BGA,QAAQ,KACN,OAAOC,QAAP,KAAoB,UAApB,GACGA,QAAQ,CAAC;AAAEI,IAAAA,WAAW,EAAXA,WAAF;AAAeL,IAAAA,QAAQ,EAARA;AAAf,GAAD,CADX,GAEGC,QAHG,CA9BX,CADF;AAqCD,CAxDM;;;AAAMJ,U","sourcesContent":["import React, { useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport interface ExpandableProps extends ClickableProps {\n  label?: string | JSX.Element\n  expanded?: boolean\n  children: React.ReactNode\n}\n\n/**\n * A toggleable component used to show / hide content\n */\nexport const Expandable: React.FC<ExpandableProps> = ({\n  label,\n  expanded: defaultExpanded,\n  children,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const [expanded, setExpanded] = useState(defaultExpanded)\n\n  const [boxProps, clickableProps] = splitBoxProps(rest)\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => {\n    setExpanded((prevExpanded) => !prevExpanded)\n    onClick && onClick(event)\n  }\n\n  return (\n    <Box {...boxProps}>\n      <Clickable\n        width=\"100%\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        borderTop=\"1px solid\"\n        borderColor=\"black60\"\n        pt={1}\n        disabled={disabled}\n        aria-expanded={expanded}\n        onClick={handleClick}\n        {...clickableProps}\n      >\n        <Flex flex={1} minHeight={40} display=\"flex\" alignItems=\"center\">\n          {isText(label) ? <Text variant=\"sm-display\">{label}</Text> : label}\n        </Flex>\n\n        {!disabled && (\n          <ChevronIcon\n            direction={expanded ? \"up\" : \"down\"}\n            width={14}\n            height={14}\n            ml={1}\n            mr={1}\n            aria-hidden=\"true\"\n          />\n        )}\n      </Clickable>\n\n      {expanded &&\n        (typeof children === \"function\"\n          ? children({ setExpanded, expanded })\n          : children)}\n    </Box>\n  )\n}\n"],"file":"Expandable.js"}

package/dist/elements/GridColumns/GridColumns.story.js

@@ -52,18 +52,18 @@ var RealWorldExample = function RealWorldExample() {
     wrap: true
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
     as: "h1",
-    variant: "largeTitle"
+    variant: "xl"
   }, "Page Title Long Enough So As To Line Break")), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     span: 6
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
     as: "h2",
-    variant: "subtitle",
+    variant: "lg-display",
     mb: 1
   }, "Page subtitle"), /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     span: 5,
     start: 8
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "mediumText",
+    variant: "sm-display",
     mb: 1
   }, "Featured content"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
     bg: "black10",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/GridColumns/GridColumns.story.tsx"],"names":["IPSUM","GridColumnsDebug","pointerEvents","Array","from","map","_","i","title","RealWorldExample","story","name","KitchenSink","CustomGutters"],"mappings":"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","sourcesContent":["import React from \"react\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Column, GridColumns } from \"./GridColumns\"\n\nconst IPSUM =\n  \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto deleniti recusandae ullam laudantium ut reiciendis, doloribus qui sequi id ea, ad suscipit eos placeat magnam consequatur sunt, quaerat eius saepe.\"\n\nconst GridColumnsDebug = () => (\n  <GridColumns\n    position=\"absolute\"\n    top={0}\n    left={0}\n    width=\"100%\"\n    height=\"100%\"\n    style={{ pointerEvents: \"none\" }}\n  >\n    {Array.from(Array(12)).map((_, i) => (\n      <Column key={i} span={[1]} bg=\"rgba(255, 0, 0, 0.05)\" height=\"100%\" />\n    ))}\n  </GridColumns>\n)\n\nexport default {\n  title: \"Components/GridColumns\",\n}\n\nexport const RealWorldExample = () => {\n  return (\n    <GridColumns position=\"relative\" m={2}>\n      <GridColumnsDebug />\n\n      <Column span={6} wrap>\n        <Text as=\"h1\" variant=\"largeTitle\">\n          Page Title Long Enough So As To Line Break\n        </Text>\n      </Column>\n\n      <Column span={6}>\n        <Text as=\"h2\" variant=\"subtitle\" mb={1}>\n          Page subtitle\n        </Text>\n\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column span={5} start={8}>\n        <Text variant=\"mediumText\" mb={1}>\n          Featured content\n        </Text>\n\n        <Box bg=\"black10\" borderRadius={4} height={400} />\n      </Column>\n    </GridColumns>\n  )\n}\n\nRealWorldExample.story = {\n  name: \"Real-world Example\",\n}\n\nexport const KitchenSink = () => {\n  return (\n    <GridColumns border=\"1px solid blue\" position=\"relative\">\n      <GridColumnsDebug />\n\n      <Column border=\"1px solid red\" span={4}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid red\" span={4}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid green\" span={4}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid red\" span={4} wrap>\n        <Text>\n          {IPSUM} {IPSUM}\n        </Text>\n      </Column>\n\n      <Column bg=\"black100\" span={[6]}>\n        <Text color=\"white100\">This remains 2-columns at all breakpoints</Text>\n      </Column>\n\n      <Column bg=\"black100\" span={[6]}>\n        <Text color=\"white100\">This remains 2-columns at all breakpoints</Text>\n      </Column>\n\n      <Column bg=\"black100\" span={6}>\n        <Text color=\"white100\">\n          These are 2-columns at large breakpoints, and 1 at mobile\n        </Text>\n      </Column>\n\n      <Column bg=\"black100\" span={6}>\n        <Text color=\"white100\">\n          These are 2-columns at large breakpoints, and 1 at mobile\n        </Text>\n      </Column>\n\n      <Column\n        start={[2, 3, 4]}\n        span={[9, 6, 3]}\n        height={300}\n        bg=\"black10\"\n        borderRadius={4}\n      />\n\n      <Column height={200} bg=\"purple100\" span={[12, 6]} start={[1, 4]} wrap />\n\n      <Column bg=\"black100\" start={4}>\n        <Text color=\"white100\">{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid red\" span={4} start={1}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid red\" span={4} start={6}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid red\" span={2} start={11}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column bg=\"red\" span={1} start={1} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={2} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={3} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={4} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={5} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={6} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={7} height={100} wrap />\n\n      <Column gridColumn=\"3 / 9\" bg=\"purple100\">\n        <Text color=\"white100\">A custom grid-column value</Text>\n      </Column>\n    </GridColumns>\n  )\n}\n\nKitchenSink.story = {\n  name: \"Kitchen sink\",\n}\n\nexport const CustomGutters = () => {\n  return (\n    <GridColumns gridColumnGap={4} gridRowGap={1}>\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n    </GridColumns>\n  )\n}\n\nCustomGutters.story = {\n  name: \"Custom gutters\",\n}\n"],"file":"GridColumns.story.js"}
+{"version":3,"sources":["../../../src/elements/GridColumns/GridColumns.story.tsx"],"names":["IPSUM","GridColumnsDebug","pointerEvents","Array","from","map","_","i","title","RealWorldExample","story","name","KitchenSink","CustomGutters"],"mappings":"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","sourcesContent":["import React from \"react\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Column, GridColumns } from \"./GridColumns\"\n\nconst IPSUM =\n  \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto deleniti recusandae ullam laudantium ut reiciendis, doloribus qui sequi id ea, ad suscipit eos placeat magnam consequatur sunt, quaerat eius saepe.\"\n\nconst GridColumnsDebug = () => (\n  <GridColumns\n    position=\"absolute\"\n    top={0}\n    left={0}\n    width=\"100%\"\n    height=\"100%\"\n    style={{ pointerEvents: \"none\" }}\n  >\n    {Array.from(Array(12)).map((_, i) => (\n      <Column key={i} span={[1]} bg=\"rgba(255, 0, 0, 0.05)\" height=\"100%\" />\n    ))}\n  </GridColumns>\n)\n\nexport default {\n  title: \"Components/GridColumns\",\n}\n\nexport const RealWorldExample = () => {\n  return (\n    <GridColumns position=\"relative\" m={2}>\n      <GridColumnsDebug />\n\n      <Column span={6} wrap>\n        <Text as=\"h1\" variant=\"xl\">\n          Page Title Long Enough So As To Line Break\n        </Text>\n      </Column>\n\n      <Column span={6}>\n        <Text as=\"h2\" variant=\"lg-display\" mb={1}>\n          Page subtitle\n        </Text>\n\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column span={5} start={8}>\n        <Text variant=\"sm-display\" mb={1}>\n          Featured content\n        </Text>\n\n        <Box bg=\"black10\" borderRadius={4} height={400} />\n      </Column>\n    </GridColumns>\n  )\n}\n\nRealWorldExample.story = {\n  name: \"Real-world Example\",\n}\n\nexport const KitchenSink = () => {\n  return (\n    <GridColumns border=\"1px solid blue\" position=\"relative\">\n      <GridColumnsDebug />\n\n      <Column border=\"1px solid red\" span={4}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid red\" span={4}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid green\" span={4}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid red\" span={4} wrap>\n        <Text>\n          {IPSUM} {IPSUM}\n        </Text>\n      </Column>\n\n      <Column bg=\"black100\" span={[6]}>\n        <Text color=\"white100\">This remains 2-columns at all breakpoints</Text>\n      </Column>\n\n      <Column bg=\"black100\" span={[6]}>\n        <Text color=\"white100\">This remains 2-columns at all breakpoints</Text>\n      </Column>\n\n      <Column bg=\"black100\" span={6}>\n        <Text color=\"white100\">\n          These are 2-columns at large breakpoints, and 1 at mobile\n        </Text>\n      </Column>\n\n      <Column bg=\"black100\" span={6}>\n        <Text color=\"white100\">\n          These are 2-columns at large breakpoints, and 1 at mobile\n        </Text>\n      </Column>\n\n      <Column\n        start={[2, 3, 4]}\n        span={[9, 6, 3]}\n        height={300}\n        bg=\"black10\"\n        borderRadius={4}\n      />\n\n      <Column height={200} bg=\"purple100\" span={[12, 6]} start={[1, 4]} wrap />\n\n      <Column bg=\"black100\" start={4}>\n        <Text color=\"white100\">{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid red\" span={4} start={1}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid red\" span={4} start={6}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column border=\"1px solid red\" span={2} start={11}>\n        <Text>{IPSUM}</Text>\n      </Column>\n\n      <Column bg=\"red\" span={1} start={1} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={2} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={3} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={4} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={5} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={6} height={100} wrap />\n\n      <Column bg=\"red\" span={1} start={7} height={100} wrap />\n\n      <Column gridColumn=\"3 / 9\" bg=\"purple100\">\n        <Text color=\"white100\">A custom grid-column value</Text>\n      </Column>\n    </GridColumns>\n  )\n}\n\nKitchenSink.story = {\n  name: \"Kitchen sink\",\n}\n\nexport const CustomGutters = () => {\n  return (\n    <GridColumns gridColumnGap={4} gridRowGap={1}>\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n      <Column span={2} bg=\"black10\" height={100} />\n    </GridColumns>\n  )\n}\n\nCustomGutters.story = {\n  name: \"Custom gutters\",\n}\n"],"file":"GridColumns.story.js"}

package/dist/elements/HTML/HTML.d.ts

@@ -11,7 +11,7 @@ export declare type HTMLProps = TextProps & HTMLAttributes<HTMLDivElement | HTML
 /**
  * Sets reasonable defaults for tags that we might encounter in Markdown output.
  */
-export declare const htmlMixin: import("styled-components").InterpolationValue[];
+export declare const htmlMixin: import("styled-components").FlattenInterpolation<any>[];
 /**
  * Sets reasonable defaults for tags that we might encounter in Markdown output.
  * If `html` prop is passed; it's set as innerHTML, otherwise contents are wrapped

package/dist/elements/HTML/HTML.js

@@ -7,14 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.htmlMixin = exports.HTML = void 0;
 
+var _themeGet = require("@styled-system/theme-get");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _helpers = require("../../helpers");
-
-var _space = require("../../helpers/space");
-
 var _Text = require("../Text");
 
 var _excluded = ["html"],
@@ -35,14 +33,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 /**
  * Sets reasonable defaults for tags that we might encounter in Markdown output.
  */
-var htmlMixin = (0, _styledComponents.css)(["h1,h2,h3,h4,h5,ul,ol,p,blockquote,pre,hr{margin:", "px auto;&:first-child{margin-top:0;}&:last-child{margin-bottom:0;}}hr{height:1px;border:0;background-color:", ";}"], (0, _space.space)(1), (0, _helpers.color)("black10"));
+var htmlMixin = (0, _styledComponents.css)(["h1,h2,h3,h4,h5,ul,ol,p,blockquote,pre,hr{margin:", "px auto;&:first-child{margin-top:0;}&:last-child{margin-bottom:0;}}hr{height:1px;border:0;background-color:", ";}"], (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("colors.black10"));
 exports.htmlMixin = htmlMixin;
 var Container = (0, _styledComponents.default)(_Text.Text).withConfig({
   displayName: "HTML__Container",
   componentId: "sc-1im40xc-0"
 })(["", ""], htmlMixin);
 Container.defaultProps = {
-  variant: "text"
+  variant: "sm"
 };
 /**
  * Sets reasonable defaults for tags that we might encounter in Markdown output.

package/dist/elements/HTML/HTML.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/HTML/HTML.tsx"],"names":["htmlMixin","css","Container","Text","defaultProps","variant","HTML","props","html","htmlRest","__html","children","childrenRest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;AASA;AACA;AACA;AACO,IAAMA,SAAS,OAAGC,qBAAH,6KAYR,kBAAM,CAAN,CAZQ,EA0BE,oBAAM,SAAN,CA1BF,CAAf;;AA8BP,IAAMC,SAAS,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,aACXH,SADW,CAAf;AAIAE,SAAS,CAACE,YAAV,GAAyB;AACvBC,EAAAA,OAAO,EAAE;AADc,CAAzB;AAIA;AACA;AACA;AACA;AACA;;AACO,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,CAAAC,KAAK,EAAI;AAChD,MAAI,UAAUA,KAAd,EAAqB;AACnB,QAAQC,IAAR,GAA8BD,KAA9B,CAAQC,IAAR;AAAA,QAAiBC,QAAjB,4BAA8BF,KAA9B;;AACA,wBACE,6BAAC,SAAD;AAAW,MAAA,uBAAuB,EAAE;AAAEG,QAAAA,MAAM,EAAEF;AAAV;AAApC,OAA0DC,QAA1D,EADF;AAGD;;AAED,MAAQE,QAAR,GAAsCJ,KAAtC,CAAQI,QAAR;AAAA,MAAqBC,YAArB,4BAAsCL,KAAtC;;AACA,sBAAO,6BAAC,SAAD,EAAeK,YAAf,EAA8BD,QAA9B,CAAP;AACD,CAVM;;;AAAML,I;AAYbA,IAAI,CAACO,WAAL,GAAmB,MAAnB","sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { color } from \"../../helpers\"\nimport { space } from \"../../helpers/space\"\nimport { Text, TextProps } from \"../Text\"\n\n/**\n * HTML\n */\nexport type HTMLProps = TextProps &\n  HTMLAttributes<HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement> &\n  ({ html: string } | { children: React.ReactNode })\n\n/**\n * Sets reasonable defaults for tags that we might encounter in Markdown output.\n */\nexport const htmlMixin = css`\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  ul,\n  ol,\n  p,\n  blockquote,\n  pre,\n  hr {\n    margin: ${space(1)}px auto;\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  hr {\n    height: 1px;\n    border: 0;\n    background-color: ${color(\"black10\")};\n  }\n`\n\nconst Container = styled(Text)`\n  ${htmlMixin}\n`\n\nContainer.defaultProps = {\n  variant: \"text\",\n}\n\n/**\n * Sets reasonable defaults for tags that we might encounter in Markdown output.\n * If `html` prop is passed; it's set as innerHTML, otherwise contents are wrapped\n * with default HTML styling.\n */\nexport const HTML: React.FC<HTMLProps> = props => {\n  if (\"html\" in props) {\n    const { html, ...htmlRest } = props\n    return (\n      <Container dangerouslySetInnerHTML={{ __html: html }} {...htmlRest} />\n    )\n  }\n\n  const { children, ...childrenRest } = props\n  return <Container {...childrenRest}>{children}</Container>\n}\n\nHTML.displayName = \"HTML\"\n"],"file":"HTML.js"}
+{"version":3,"sources":["../../../src/elements/HTML/HTML.tsx"],"names":["htmlMixin","css","Container","Text","defaultProps","variant","HTML","props","html","htmlRest","__html","children","childrenRest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;AASA;AACA;AACA;AACO,IAAMA,SAAS,OAAGC,qBAAH,6KAYR,wBAAS,SAAT,CAZQ,EA0BE,wBAAS,gBAAT,CA1BF,CAAf;;AA8BP,IAAMC,SAAS,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,aACXH,SADW,CAAf;AAIAE,SAAS,CAACE,YAAV,GAAyB;AACvBC,EAAAA,OAAO,EAAE;AADc,CAAzB;AAIA;AACA;AACA;AACA;AACA;;AACO,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,CAACC,KAAD,EAAW;AAClD,MAAI,UAAUA,KAAd,EAAqB;AACnB,QAAQC,IAAR,GAA8BD,KAA9B,CAAQC,IAAR;AAAA,QAAiBC,QAAjB,4BAA8BF,KAA9B;;AACA,wBACE,6BAAC,SAAD;AAAW,MAAA,uBAAuB,EAAE;AAAEG,QAAAA,MAAM,EAAEF;AAAV;AAApC,OAA0DC,QAA1D,EADF;AAGD;;AAED,MAAQE,QAAR,GAAsCJ,KAAtC,CAAQI,QAAR;AAAA,MAAqBC,YAArB,4BAAsCL,KAAtC;;AACA,sBAAO,6BAAC,SAAD,EAAeK,YAAf,EAA8BD,QAA9B,CAAP;AACD,CAVM;;;AAAML,I;AAYbA,IAAI,CAACO,WAAL,GAAmB,MAAnB","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { HTMLAttributes } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Text, TextProps } from \"../Text\"\n\n/**\n * HTML\n */\nexport type HTMLProps = TextProps &\n  HTMLAttributes<HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement> &\n  ({ html: string } | { children: React.ReactNode })\n\n/**\n * Sets reasonable defaults for tags that we might encounter in Markdown output.\n */\nexport const htmlMixin = css`\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  ul,\n  ol,\n  p,\n  blockquote,\n  pre,\n  hr {\n    margin: ${themeGet(\"space.1\")}px auto;\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  hr {\n    height: 1px;\n    border: 0;\n    background-color: ${themeGet(\"colors.black10\")};\n  }\n`\n\nconst Container = styled(Text)`\n  ${htmlMixin}\n`\n\nContainer.defaultProps = {\n  variant: \"sm\",\n}\n\n/**\n * Sets reasonable defaults for tags that we might encounter in Markdown output.\n * If `html` prop is passed; it's set as innerHTML, otherwise contents are wrapped\n * with default HTML styling.\n */\nexport const HTML: React.FC<HTMLProps> = (props) => {\n  if (\"html\" in props) {\n    const { html, ...htmlRest } = props\n    return (\n      <Container dangerouslySetInnerHTML={{ __html: html }} {...htmlRest} />\n    )\n  }\n\n  const { children, ...childrenRest } = props\n  return <Container {...childrenRest}>{children}</Container>\n}\n\nHTML.displayName = \"HTML\"\n"],"file":"HTML.js"}

package/dist/elements/HTML/HTML.story.js

@@ -22,19 +22,19 @@ var Html = function Html() {
     style: {
       border: "1px dotted"
     },
-    variant: "title",
+    variant: "lg-display",
     html: HTML_EXAMPLE
   }), /*#__PURE__*/_react.default.createElement(_HTML.HTML, {
     style: {
       border: "1px dotted"
     },
-    variant: "text",
+    variant: "sm",
     html: HTML_EXAMPLE
   }), /*#__PURE__*/_react.default.createElement(_HTML.HTML, {
     style: {
       border: "1px dotted"
     },
-    variant: "small",
+    variant: "xs",
     html: HTML_EXAMPLE
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/HTML/HTML.story.tsx"],"names":["HTML_EXAMPLE","title","Html","border","story","name","DefaultHtmlStyling"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,IAAMA,YAAY,ypBAAlB;eAgCe;AACbC,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,IAAI,GAAG,SAAPA,IAAO,GAAM;AACxB,sBACE,yEACE,6BAAC,UAAD;AACE,IAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAE;AAAV,KADT;AAEE,IAAA,OAAO,EAAC,OAFV;AAGE,IAAA,IAAI,EAAEH;AAHR,IADF,eAME,6BAAC,UAAD;AACE,IAAA,KAAK,EAAE;AAAEG,MAAAA,MAAM,EAAE;AAAV,KADT;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,IAAI,EAAEH;AAHR,IANF,eAWE,6BAAC,UAAD;AACE,IAAA,KAAK,EAAE;AAAEG,MAAAA,MAAM,EAAE;AAAV,KADT;AAEE,IAAA,OAAO,EAAC,OAFV;AAGE,IAAA,IAAI,EAAEH;AAHR,IAXF,CADF;AAmBD,CApBM;;;AAsBPE,IAAI,CAACE,KAAL,GAAa;AACXC,EAAAA,IAAI,EAAE;AADK,CAAb;;AAIO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AACtC,sBACE,6BAAC,UAAD,qBACE,uDADF,eAGE,uDAHF,eAKE,uDALF,eAOE,uDAPF,eASE,kEACM,0DADN,oBAC4C,GAD5C,eAEE,iEACK,iDADL,eAFF,EAIY,GAJZ,0EATF,eAiBE,gLAjBF,eAsBE,sDACE,iDADF,eAEE,kDAFF,eAGE,iDAHF,CAtBF,eA4BE,sDACE,iDADF,eAEE,kDAFF,eAGE,iDAHF,CA5BF,eAkCE,wCAlCF,eAoCE,uDACE,kEADF,CApCF,eAwCE,yEAxCF,CADF;AA4CD,CA7CM;;;AAAMA,kB;AA+CbA,kBAAkB,CAACF,KAAnB,GAA2B;AACzBC,EAAAA,IAAI,EAAE;AADmB,CAA3B","sourcesContent":["import React from \"react\"\nimport { HTML } from \"./HTML\"\n\nconst HTML_EXAMPLE = `\n<h1>H1 Headline</h1>\n\n<h2>H2 Headline</h2>\n\n<h3>H3 Headline</h3>\n\n<h4>H4 Headline</h4>\n\n<p>I’m <em>of the opinion</em> that they use <strong>no <em>inert</em> material.</strong> All their equipment and instruments are alive, in some form or other.</p>\n\n<p>They don’t construct or build at all. The idea of making is foreign to them. They utilize existing forms. Even their ships—</p>\n\n<ol>\n  <li>first</li>\n  <li>second</li>\n  <li>third</li>\n</ol>\n\n<ul>\n  <li>first</li>\n  <li>second</li>\n  <li>third</li>\n</ul>\n\n<hr />\n\n<pre><code>this is a code block</code></pre>\n\n<blockquote>This is a block quote</blockquote>\n`\n\nexport default {\n  title: \"Components/HTML\",\n}\n\nexport const Html = () => {\n  return (\n    <>\n      <HTML\n        style={{ border: \"1px dotted\" }}\n        variant=\"title\"\n        html={HTML_EXAMPLE}\n      />\n      <HTML\n        style={{ border: \"1px dotted\" }}\n        variant=\"text\"\n        html={HTML_EXAMPLE}\n      />\n      <HTML\n        style={{ border: \"1px dotted\" }}\n        variant=\"small\"\n        html={HTML_EXAMPLE}\n      />\n    </>\n  )\n}\n\nHtml.story = {\n  name: \"HTML\",\n}\n\nexport const DefaultHtmlStyling = () => {\n  return (\n    <HTML>\n      <h1>H1 Headline</h1>\n\n      <h2>H2 Headline</h2>\n\n      <h3>H3 Headline</h3>\n\n      <h4>H4 Headline</h4>\n\n      <p>\n        I’m <em>of the opinion</em> that they use{\" \"}\n        <strong>\n          no <em>inert</em> material.\n        </strong>{\" \"}\n        All their equipment and instruments are alive, in some form or other.\n      </p>\n\n      <p>\n        They don’t construct or build at all. The idea of making is foreign to\n        them. They utilize existing forms. Even their ships—\n      </p>\n\n      <ol>\n        <li>first</li>\n        <li>second</li>\n        <li>third</li>\n      </ol>\n\n      <ul>\n        <li>first</li>\n        <li>second</li>\n        <li>third</li>\n      </ul>\n\n      <hr />\n\n      <pre>\n        <code>this is a code block</code>\n      </pre>\n\n      <blockquote>This is a block quote</blockquote>\n    </HTML>\n  )\n}\n\nDefaultHtmlStyling.story = {\n  name: \"Default HTML styling\",\n}\n"],"file":"HTML.story.js"}
+{"version":3,"sources":["../../../src/elements/HTML/HTML.story.tsx"],"names":["HTML_EXAMPLE","title","Html","border","story","name","DefaultHtmlStyling"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,IAAMA,YAAY,ypBAAlB;eAgCe;AACbC,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,IAAI,GAAG,SAAPA,IAAO,GAAM;AACxB,sBACE,yEACE,6BAAC,UAAD;AACE,IAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAE;AAAV,KADT;AAEE,IAAA,OAAO,EAAC,YAFV;AAGE,IAAA,IAAI,EAAEH;AAHR,IADF,eAME,6BAAC,UAAD;AAAM,IAAA,KAAK,EAAE;AAAEG,MAAAA,MAAM,EAAE;AAAV,KAAb;AAAuC,IAAA,OAAO,EAAC,IAA/C;AAAoD,IAAA,IAAI,EAAEH;AAA1D,IANF,eAOE,6BAAC,UAAD;AAAM,IAAA,KAAK,EAAE;AAAEG,MAAAA,MAAM,EAAE;AAAV,KAAb;AAAuC,IAAA,OAAO,EAAC,IAA/C;AAAoD,IAAA,IAAI,EAAEH;AAA1D,IAPF,CADF;AAWD,CAZM;;;AAcPE,IAAI,CAACE,KAAL,GAAa;AACXC,EAAAA,IAAI,EAAE;AADK,CAAb;;AAIO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AACtC,sBACE,6BAAC,UAAD,qBACE,uDADF,eAGE,uDAHF,eAKE,uDALF,eAOE,uDAPF,eASE,kEACM,0DADN,oBAC4C,GAD5C,eAEE,iEACK,iDADL,eAFF,EAIY,GAJZ,0EATF,eAiBE,gLAjBF,eAsBE,sDACE,iDADF,eAEE,kDAFF,eAGE,iDAHF,CAtBF,eA4BE,sDACE,iDADF,eAEE,kDAFF,eAGE,iDAHF,CA5BF,eAkCE,wCAlCF,eAoCE,uDACE,kEADF,CApCF,eAwCE,yEAxCF,CADF;AA4CD,CA7CM;;;AAAMA,kB;AA+CbA,kBAAkB,CAACF,KAAnB,GAA2B;AACzBC,EAAAA,IAAI,EAAE;AADmB,CAA3B","sourcesContent":["import React from \"react\"\nimport { HTML } from \"./HTML\"\n\nconst HTML_EXAMPLE = `\n<h1>H1 Headline</h1>\n\n<h2>H2 Headline</h2>\n\n<h3>H3 Headline</h3>\n\n<h4>H4 Headline</h4>\n\n<p>I’m <em>of the opinion</em> that they use <strong>no <em>inert</em> material.</strong> All their equipment and instruments are alive, in some form or other.</p>\n\n<p>They don’t construct or build at all. The idea of making is foreign to them. They utilize existing forms. Even their ships—</p>\n\n<ol>\n  <li>first</li>\n  <li>second</li>\n  <li>third</li>\n</ol>\n\n<ul>\n  <li>first</li>\n  <li>second</li>\n  <li>third</li>\n</ul>\n\n<hr />\n\n<pre><code>this is a code block</code></pre>\n\n<blockquote>This is a block quote</blockquote>\n`\n\nexport default {\n  title: \"Components/HTML\",\n}\n\nexport const Html = () => {\n  return (\n    <>\n      <HTML\n        style={{ border: \"1px dotted\" }}\n        variant=\"lg-display\"\n        html={HTML_EXAMPLE}\n      />\n      <HTML style={{ border: \"1px dotted\" }} variant=\"sm\" html={HTML_EXAMPLE} />\n      <HTML style={{ border: \"1px dotted\" }} variant=\"xs\" html={HTML_EXAMPLE} />\n    </>\n  )\n}\n\nHtml.story = {\n  name: \"HTML\",\n}\n\nexport const DefaultHtmlStyling = () => {\n  return (\n    <HTML>\n      <h1>H1 Headline</h1>\n\n      <h2>H2 Headline</h2>\n\n      <h3>H3 Headline</h3>\n\n      <h4>H4 Headline</h4>\n\n      <p>\n        I’m <em>of the opinion</em> that they use{\" \"}\n        <strong>\n          no <em>inert</em> material.\n        </strong>{\" \"}\n        All their equipment and instruments are alive, in some form or other.\n      </p>\n\n      <p>\n        They don’t construct or build at all. The idea of making is foreign to\n        them. They utilize existing forms. Even their ships—\n      </p>\n\n      <ol>\n        <li>first</li>\n        <li>second</li>\n        <li>third</li>\n      </ol>\n\n      <ul>\n        <li>first</li>\n        <li>second</li>\n        <li>third</li>\n      </ul>\n\n      <hr />\n\n      <pre>\n        <code>this is a code block</code>\n      </pre>\n\n      <blockquote>This is a block quote</blockquote>\n    </HTML>\n  )\n}\n\nDefaultHtmlStyling.story = {\n  name: \"Default HTML styling\",\n}\n"],"file":"HTML.story.js"}

package/dist/elements/LabeledInput/LabeledInput.js

@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _isText2 = require("../../helpers/isText");
 
-var _Theme = require("../../Theme");
-
 var _Box = require("../Box");
 
 var _Input = require("../Input");
@@ -66,10 +64,6 @@ var LabeledInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwar
       boxProps = _splitBoxProps2[0],
       inputProps = _splitBoxProps2[1];
 
-  var variant = (0, _Theme.useThemeConfig)({
-    v2: "small",
-    v3: "xs"
-  });
   var isText = (0, _isText2.isText)(label);
   return /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
     position: "relative"
@@ -91,11 +85,12 @@ var LabeledInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwar
       pointerEvents: isText ? "none" : undefined
     }
   }, isText ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: variant,
+    variant: "xs",
     color: "black60",
     lineHeight: 1
   }, label) : label)));
 });
 
 exports.LabeledInput = LabeledInput;
+LabeledInput.displayName = "LabeledInput";
 //# sourceMappingURL=LabeledInput.js.map