@artsy/palette 45.13.1 → 45.14.0-canary.1497.33065.0

package/dist/esm/elements/Join/Join.story.js

@@ -0,0 +1,215 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = _getPrototypeOf(derived);
+  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
+}
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+import React, { Component } from "react";
+import { Box } from "../Box";
+import { Separator } from "../Separator";
+import { Text } from "../Text";
+import { Join } from "./Join";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+var BlankFunction = function BlankFunction() {
+  return null;
+};
+var NonBlankFunction = function NonBlankFunction() {
+  return /*#__PURE__*/React.createElement(Text, {
+    variant: "sm-display"
+  }, "Non-blank Function");
+};
+NonBlankFunction.displayName = "NonBlankFunction";
+var BlankFC = function BlankFC() {
+  return null;
+};
+var NonBlankFC = function NonBlankFC() {
+  return /*#__PURE__*/React.createElement(Text, {
+    variant: "sm-display"
+  }, "Non-blank Functional component");
+};
+NonBlankFC.displayName = "NonBlankFC";
+var BlankComponent = /*#__PURE__*/function (_Component) {
+  function BlankComponent() {
+    _classCallCheck(this, BlankComponent);
+    return _callSuper(this, BlankComponent, arguments);
+  }
+  _inherits(BlankComponent, _Component);
+  return _createClass(BlankComponent, [{
+    key: "render",
+    value: function render() {
+      return null;
+    }
+  }]);
+}(Component);
+BlankComponent.displayName = "BlankComponent";
+var NonBlankComponent = /*#__PURE__*/function (_Component2) {
+  function NonBlankComponent() {
+    _classCallCheck(this, NonBlankComponent);
+    return _callSuper(this, NonBlankComponent, arguments);
+  }
+  _inherits(NonBlankComponent, _Component2);
+  return _createClass(NonBlankComponent, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(Text, {
+        variant: "sm-display"
+      }, "Non-Blank Class Component");
+    }
+  }]);
+}(Component);
+NonBlankComponent.displayName = "NonBlankComponent";
+export default {
+  component: Join,
+  title: "Components/Join",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A utility component that joins child elements with a separator, filtering out null/undefined children."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var WithMultipleComponents = {
+  args: {
+    separator: /*#__PURE__*/React.createElement(Separator, {
+      my: 1
+    }),
+    children: [/*#__PURE__*/React.createElement(Text, {
+      key: "1",
+      variant: "sm-display"
+    }, "First in the list"), /*#__PURE__*/React.createElement(Text, {
+      key: "2",
+      variant: "sm-display"
+    }, "Second in the list")]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Join component with multiple children separated by a separator."
+      }
+    }
+  }
+};
+export var WithOneComponent = {
+  args: {
+    separator: /*#__PURE__*/React.createElement(Separator, {
+      my: 1
+    }),
+    children: /*#__PURE__*/React.createElement(Text, {
+      variant: "sm-display"
+    }, "Only one component here")
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Join component with a single child (no separator shown)."
+      }
+    }
+  }
+};
+export var WithSomeOfTheChildrenEmpty = {
+  args: {
+    separator: /*#__PURE__*/React.createElement(Separator, {
+      my: 1
+    }),
+    children: [/*#__PURE__*/React.createElement(Text, {
+      key: "1",
+      variant: "sm-display"
+    }, "First in the list"), /*#__PURE__*/React.createElement(BlankFunction, {
+      key: "2"
+    }), /*#__PURE__*/React.createElement(NonBlankFunction, {
+      key: "3"
+    }), /*#__PURE__*/React.createElement(BlankFC, {
+      key: "4"
+    }), /*#__PURE__*/React.createElement(NonBlankFC, {
+      key: "5"
+    }), /*#__PURE__*/React.createElement(BlankComponent, {
+      key: "6"
+    }), /*#__PURE__*/React.createElement(NonBlankComponent, {
+      key: "7"
+    }), /*#__PURE__*/React.createElement(Box, {
+      key: "8",
+      m: "2"
+    }), /*#__PURE__*/React.createElement("div", {
+      key: "9"
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "sm-display"
+    }, "Some div with the content")), /*#__PURE__*/React.createElement("div", {
+      key: "10"
+    }), /*#__PURE__*/React.createElement(Text, {
+      key: "11",
+      variant: "sm-display"
+    }, "Another box with content"), /*#__PURE__*/React.createElement("div", {
+      key: "12"
+    })]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Join component that filters out null/empty children and only shows separators between visible content."
+      }
+    }
+  }
+};
+export var WithNestedChildren = {
+  args: {
+    separator: /*#__PURE__*/React.createElement(Separator, {
+      my: 1
+    }),
+    children: [/*#__PURE__*/React.createElement(Text, {
+      key: "1",
+      variant: "sm-display"
+    }, "First in the list"), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+      key: "2",
+      variant: "sm-display"
+    }, "Second in the list"), ",", /*#__PURE__*/React.createElement(Text, {
+      key: "3",
+      variant: "sm-display"
+    }, "Third in the list"), ",", /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+      key: "4",
+      variant: "sm-display"
+    }, "Fourth in the list"), ",", /*#__PURE__*/React.createElement(Text, {
+      key: "5",
+      variant: "sm-display"
+    }, "Fifth in the list"), ","), ",", /*#__PURE__*/React.createElement(Box, {
+      key: "6"
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "sm-display"
+    }, "These two lines"), /*#__PURE__*/React.createElement(Text, {
+      variant: "sm-display"
+    }, "Are grouped")), ",", /*#__PURE__*/React.createElement(Text, {
+      key: "7"
+    }, "End of list"), ",")]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Join component with nested children and groups, showing separators only between visible content."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Join.story.js.map

package/dist/esm/elements/Join/Join.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Join.story.js","names":["React","Component","Box","Separator","Text","Join","STORYBOOK_PROPS_BLOCKLIST","BlankFunction","NonBlankFunction","createElement","variant","displayName","BlankFC","NonBlankFC","BlankComponent","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","NonBlankComponent","_Component2","component","title","tags","parameters","docs","description","controls","exclude","WithMultipleComponents","args","separator","my","children","story","WithOneComponent","WithSomeOfTheChildrenEmpty","m","WithNestedChildren","Fragment"],"sources":["../../../../src/elements/Join/Join.story.tsx"],"sourcesContent":["import React, { Component } from \"react\"\nimport { Box } from \"../Box\"\nimport { Separator } from \"../Separator\"\nimport { Text } from \"../Text\"\nimport { Join } from \"./Join\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst BlankFunction = () => {\n  return null\n}\n\nconst NonBlankFunction = () => {\n  return <Text variant=\"sm-display\">Non-blank Function</Text>\n}\n\nconst BlankFC: React.FC<React.PropsWithChildren<unknown>> = () => null\n\nconst NonBlankFC: React.FC<React.PropsWithChildren<unknown>> = () => (\n  <Text variant=\"sm-display\">Non-blank Functional component</Text>\n)\n\nclass BlankComponent extends Component {\n  render() {\n    return null\n  }\n}\n\nclass NonBlankComponent extends Component {\n  render() {\n    return <Text variant=\"sm-display\">Non-Blank Class Component</Text>\n  }\n}\n\nexport default {\n  component: Join,\n  title: \"Components/Join\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A utility component that joins child elements with a separator, filtering out null/undefined children.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const WithMultipleComponents = {\n  args: {\n    separator: <Separator my={1} />,\n    children: [\n      <Text key=\"1\" variant=\"sm-display\">\n        First in the list\n      </Text>,\n      <Text key=\"2\" variant=\"sm-display\">\n        Second in the list\n      </Text>,\n    ],\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Join component with multiple children separated by a separator.\",\n      },\n    },\n  },\n}\n\nexport const WithOneComponent = {\n  args: {\n    separator: <Separator my={1} />,\n    children: <Text variant=\"sm-display\">Only one component here</Text>,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Join component with a single child (no separator shown).\",\n      },\n    },\n  },\n}\n\nexport const WithSomeOfTheChildrenEmpty = {\n  args: {\n    separator: <Separator my={1} />,\n    children: [\n      <Text key=\"1\" variant=\"sm-display\">\n        First in the list\n      </Text>,\n      <BlankFunction key=\"2\" />,\n      <NonBlankFunction key=\"3\" />,\n      <BlankFC key=\"4\" />,\n      <NonBlankFC key=\"5\" />,\n      <BlankComponent key=\"6\" />,\n      <NonBlankComponent key=\"7\" />,\n      <Box key=\"8\" m=\"2\" />,\n      <div key=\"9\">\n        <Text variant=\"sm-display\">Some div with the content</Text>\n      </div>,\n      <div key=\"10\" />,\n      <Text key=\"11\" variant=\"sm-display\">\n        Another box with content\n      </Text>,\n      <div key=\"12\" />,\n    ],\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Join component that filters out null/empty children and only shows separators between visible content.\",\n      },\n    },\n  },\n}\n\nexport const WithNestedChildren = {\n  args: {\n    separator: <Separator my={1} />,\n    children: [\n      <Text key=\"1\" variant=\"sm-display\">\n        First in the list\n      </Text>,\n      <>\n        <Text key=\"2\" variant=\"sm-display\">\n          Second in the list\n        </Text>\n        ,\n        <Text key=\"3\" variant=\"sm-display\">\n          Third in the list\n        </Text>\n        ,\n        <>\n          <Text key=\"4\" variant=\"sm-display\">\n            Fourth in the list\n          </Text>\n          ,\n          <Text key=\"5\" variant=\"sm-display\">\n            Fifth in the list\n          </Text>\n          ,\n        </>\n        ,\n        <Box key=\"6\">\n          <Text variant=\"sm-display\">These two lines</Text>\n          <Text variant=\"sm-display\">Are grouped</Text>\n        </Box>\n        ,<Text key=\"7\">End of list</Text>,\n      </>,\n    ],\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Join component with nested children and groups, showing separators only between visible content.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/Join/index.js

@@ -0,0 +1,2 @@
+export * from "./Join";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/Join/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Join/index.tsx"],"sourcesContent":["export * from \"./Join\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/Label/Label.js

@@ -0,0 +1,46 @@
+var _excluded = ["children", "variant"];
+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); }
+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; }
+import { Text } from "../Text";
+import * as React from "react";
+import styled from "styled-components";
+import { variant } from "styled-system";
+import { Box } from "../Box";
+export var LABEL_VARIANTS = {
+  light: {
+    backgroundColor: "mono10",
+    color: "mono100"
+  },
+  dark: {
+    backgroundColor: "mono100",
+    color: "mono0"
+  },
+  brand: {
+    backgroundColor: "blue100",
+    color: "mono0"
+  }
+};
+export var Label = function Label(_ref) {
+  var children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "light" : _ref$variant,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    display: "inline-flex",
+    maxWidth: "100%",
+    variant: variant
+  }, rest), /*#__PURE__*/React.createElement(Text, {
+    variant: "xs",
+    px: 0.5,
+    overflowEllipsis: true
+  }, children));
+};
+Label.displayName = "Label";
+var Container = styled(Box).withConfig({
+  displayName: "Label__Container",
+  componentId: "sc-avgiaj-0"
+})(["", ""], variant({
+  variants: LABEL_VARIANTS
+}));
+//# sourceMappingURL=Label.js.map

package/dist/esm/elements/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","names":["Text","React","styled","variant","Box","LABEL_VARIANTS","light","backgroundColor","color","dark","brand","Label","_ref","children","_ref$variant","rest","_objectWithoutProperties","_excluded","createElement","Container","_extends","display","maxWidth","px","overflowEllipsis","displayName","withConfig","componentId","variants"],"sources":["../../../../src/elements/Label/Label.tsx"],"sourcesContent":["import { Text } from \"../Text\"\nimport * as React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport const LABEL_VARIANTS = {\n  light: {\n    backgroundColor: \"mono10\",\n    color: \"mono100\",\n  },\n  dark: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n  brand: {\n    backgroundColor: \"blue100\",\n    color: \"mono0\",\n  },\n}\n\nexport type LabelVariant = keyof typeof LABEL_VARIANTS\n\nexport interface LabelProps extends BoxProps {\n  variant?: LabelVariant\n  children: React.ReactNode\n}\n\nexport const Label: React.FC<React.PropsWithChildren<LabelProps>> = ({\n  children,\n  variant = \"light\",\n  ...rest\n}) => {\n  return (\n    <Container\n      display=\"inline-flex\"\n      maxWidth=\"100%\"\n      variant={variant}\n      {...rest}\n    >\n      <Text variant=\"xs\" px={0.5} overflowEllipsis>\n        {children}\n      </Text>\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<{ variant: LabelVariant }>`\n  ${variant({ variants: LABEL_VARIANTS })}\n`\n"],"mappings":";;;;AAAA,SAASA,IAAI;AACb,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,GAAG;AAEZ,OAAO,IAAMC,cAAc,GAAG;EAC5BC,KAAK,EAAE;IACLC,eAAe,EAAE,QAAQ;IACzBC,KAAK,EAAE;EACT,CAAC;EACDC,IAAI,EAAE;IACJF,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT,CAAC;EACDE,KAAK,EAAE;IACLH,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT;AACF,CAAC;AASD,OAAO,IAAMG,KAAoD,GAAG,SAAvDA,KAAoDA,CAAAC,IAAA,EAI3D;EAAA,IAHJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,YAAA,GAAAF,IAAA,CACRT,OAAO;IAAPA,OAAO,GAAAW,YAAA,cAAG,OAAO,GAAAA,YAAA;IACdC,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEP,oBACEhB,KAAA,CAAAiB,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,OAAO,EAAC,aAAa;IACrBC,QAAQ,EAAC,MAAM;IACfnB,OAAO,EAAEA;EAAQ,GACbY,IAAI,gBAERd,KAAA,CAAAiB,aAAA,CAAClB,IAAI;IAACG,OAAO,EAAC,IAAI;IAACoB,EAAE,EAAE,GAAI;IAACC,gBAAgB;EAAA,GACzCX,QAAQ,CACJ,CACG;AAEhB,CAAC;AAjBYF,KAAoD,CAAAc,WAAA;AAmBjE,IAAMN,SAAS,GAAGjB,MAAM,CAACE,GAAG,CAAC,CAAAsB,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,aACzBxB,OAAO,CAAC;EAAEyB,QAAQ,EAAEvB;AAAe,CAAC,CAAC,CACxC"}

package/dist/esm/elements/Label/Label.story.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { Label, LABEL_VARIANTS } from "./Label";
+import { Box } from "../Box";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: Label,
+  title: "Components/Label",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A label component with different visual variants for various use cases."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    children: "Example"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic label component with default styling."
+      }
+    }
+  }
+};
+export var AllVariants = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      flexDirection: "column",
+      gap: 1
+    }, Object.keys(LABEL_VARIANTS).map(function (variant) {
+      return /*#__PURE__*/React.createElement(Label, {
+        key: variant,
+        variant: variant
+      }, variant, " Label");
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "All available label variants."
+      }
+    }
+  }
+};
+export var OverflowEllipsis = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      flexDirection: "column",
+      gap: 1
+    }, Object.keys(LABEL_VARIANTS).map(function (variant) {
+      return /*#__PURE__*/React.createElement(Box, {
+        key: variant,
+        width: 75,
+        overflow: "hidden"
+      }, /*#__PURE__*/React.createElement(Label, {
+        variant: variant
+      }, "Longer Example"));
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Labels with text overflow demonstrating ellipsis behavior."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Label.story.js.map

package/dist/esm/elements/Label/Label.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.story.js","names":["React","Label","LABEL_VARIANTS","Box","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","children","story","AllVariants","render","createElement","display","flexDirection","gap","Object","keys","map","variant","key","OverflowEllipsis","width","overflow"],"sources":["../../../../src/elements/Label/Label.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Label, LabelVariant, LABEL_VARIANTS } from \"./Label\"\nimport { Box } from \"../Box\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Label,\n  title: \"Components/Label\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A label component with different visual variants for various use cases.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    children: \"Example\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic label component with default styling.\",\n      },\n    },\n  },\n}\n\nexport const AllVariants = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={1}>\n      {Object.keys(LABEL_VARIANTS).map((variant) => (\n        <Label key={variant} variant={variant as LabelVariant}>\n          {variant} Label\n        </Label>\n      ))}\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"All available label variants.\",\n      },\n    },\n  },\n}\n\nexport const OverflowEllipsis = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={1}>\n      {Object.keys(LABEL_VARIANTS).map((variant) => (\n        <Box key={variant} width={75} overflow=\"hidden\">\n          <Label variant={variant as LabelVariant}>Longer Example</Label>\n        </Box>\n      ))}\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Labels with text overflow demonstrating ellipsis behavior.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAgBC,cAAc;AAC5C,SAASC,GAAG;AACZ,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEJ,KAAK;EAChBK,KAAK,EAAE,kBAAkB;EACzBC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACNC,OAAO,EAAER;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,QAAQ,EAAE;EACZ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,WAAW,GAAG;EACzBC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJlB,KAAA,CAAAmB,aAAA,CAAChB,GAAG;MAACiB,OAAO,EAAC,MAAM;MAACC,aAAa,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAE,GAC/CC,MAAM,CAACC,IAAI,CAACtB,cAAc,CAAC,CAACuB,GAAG,CAAC,UAACC,OAAO;MAAA,oBACvC1B,KAAA,CAAAmB,aAAA,CAAClB,KAAK;QAAC0B,GAAG,EAAED,OAAQ;QAACA,OAAO,EAAEA;MAAwB,GACnDA,OAAO,EAAC,QACX,CAAQ;IAAA,CACT,CAAC,CACE;EAAA,CACP;EACDlB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMY,gBAAgB,GAAG;EAC9BV,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJlB,KAAA,CAAAmB,aAAA,CAAChB,GAAG;MAACiB,OAAO,EAAC,MAAM;MAACC,aAAa,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAE,GAC/CC,MAAM,CAACC,IAAI,CAACtB,cAAc,CAAC,CAACuB,GAAG,CAAC,UAACC,OAAO;MAAA,oBACvC1B,KAAA,CAAAmB,aAAA,CAAChB,GAAG;QAACwB,GAAG,EAAED,OAAQ;QAACG,KAAK,EAAE,EAAG;QAACC,QAAQ,EAAC;MAAQ,gBAC7C9B,KAAA,CAAAmB,aAAA,CAAClB,KAAK;QAACyB,OAAO,EAAEA;MAAwB,GAAC,gBAAc,CAAQ,CAC3D;IAAA,CACP,CAAC,CACE;EAAA,CACP;EACDlB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

package/dist/esm/elements/Label/index.js

@@ -0,0 +1,2 @@
+export * from "./Label";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/Label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Label/index.ts"],"sourcesContent":["export * from \"./Label\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/LabeledInput/LabeledInput.js

@@ -0,0 +1,66 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["label", "height", "variant"];
+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); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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; }
+import React, { useEffect, useRef, useState } from "react";
+import { isText as _isText } from "../../helpers/isText";
+import { Box, splitBoxProps } from "../Box";
+import { Input } from "../Input";
+import { Text } from "../Text";
+/** Input with a right-aligned or left-aligned label */
+export var LabeledInput = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var label = _ref.label,
+    height = _ref.height,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "suffix" : _ref$variant,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var labelRef = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    offset = _useState2[0],
+    setOffset = _useState2[1];
+  useEffect(function () {
+    if (labelRef.current === null) return;
+    setOffset(labelRef.current.offsetWidth);
+  }, []);
+  var _splitBoxProps = splitBoxProps(rest),
+    _splitBoxProps2 = _slicedToArray(_splitBoxProps, 2),
+    boxProps = _splitBoxProps2[0],
+    inputProps = _splitBoxProps2[1];
+  var isText = _isText(label);
+  var isPrefix = variant === "prefix";
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    position: "relative"
+  }, boxProps), /*#__PURE__*/React.createElement(Input, _extends({
+    ref: forwardedRef,
+    height: height,
+    labelOffset: isPrefix ? offset + 15 : undefined,
+    style: _defineProperty({}, isPrefix ? "paddingLeft" : "paddingRight", offset + 15)
+  }, inputProps), /*#__PURE__*/React.createElement(Box, _extends({
+    ref: labelRef,
+    position: "absolute",
+    display: "flex",
+    alignItems: "center",
+    top: 0,
+    bottom: 0,
+    style: {
+      pointerEvents: isText ? "none" : undefined
+    }
+  }, _defineProperty({}, isPrefix ? "left" : "right", 1)), isText ? /*#__PURE__*/React.createElement(Text, {
+    variant: "sm-display",
+    color: "mono60",
+    lineHeight: 1
+  }, label) : label)));
+});
+LabeledInput.displayName = "LabeledInput";
+//# sourceMappingURL=LabeledInput.js.map

package/dist/esm/elements/LabeledInput/LabeledInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabeledInput.js","names":["React","useEffect","useRef","useState","isText","_isText","Box","splitBoxProps","Input","Text","LabeledInput","forwardRef","_ref","forwardedRef","label","height","_ref$variant","variant","rest","_objectWithoutProperties","_excluded","labelRef","_useState","_useState2","_slicedToArray","offset","setOffset","current","offsetWidth","_splitBoxProps","_splitBoxProps2","boxProps","inputProps","isPrefix","createElement","_extends","position","ref","labelOffset","undefined","style","_defineProperty","display","alignItems","top","bottom","pointerEvents","color","lineHeight","displayName"],"sources":["../../../../src/elements/LabeledInput/LabeledInput.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport { isText as _isText } from \"../../helpers/isText\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Input, InputProps } from \"../Input\"\nimport { Text } from \"../Text\"\n\nexport interface LabeledInputProps extends InputProps {\n  label: React.ReactNode\n  variant?: \"suffix\" | \"prefix\"\n}\n\n/** Input with a right-aligned or left-aligned label */\nexport const LabeledInput = React.forwardRef<\n  HTMLInputElement,\n  LabeledInputProps\n>(({ label, height, variant = \"suffix\", ...rest }, forwardedRef) => {\n  const labelRef = useRef<HTMLDivElement | null>(null)\n  const [offset, setOffset] = useState(0)\n\n  useEffect(() => {\n    if (labelRef.current === null) return\n    setOffset(labelRef.current.offsetWidth)\n  }, [])\n\n  const [boxProps, inputProps] = splitBoxProps(rest)\n\n  const isText = _isText(label)\n\n  const isPrefix = variant === \"prefix\"\n\n  return (\n    <Box position=\"relative\" {...boxProps}>\n      <Input\n        ref={forwardedRef}\n        height={height}\n        labelOffset={isPrefix ? offset + 15 : undefined}\n        style={{ [isPrefix ? \"paddingLeft\" : \"paddingRight\"]: offset + 15 }}\n        {...inputProps}\n      >\n        <Box\n          ref={labelRef as any}\n          position=\"absolute\"\n          display=\"flex\"\n          alignItems=\"center\"\n          top={0}\n          bottom={0}\n          style={{ pointerEvents: isText ? \"none\" : undefined }}\n          {...{ [isPrefix ? \"left\" : \"right\"]: 1 }}\n        >\n          {isText ? (\n            <Text variant=\"sm-display\" color=\"mono60\" lineHeight={1}>\n              {label}\n            </Text>\n          ) : (\n            label\n          )}\n        </Box>\n      </Input>\n    </Box>\n  )\n})\n\nLabeledInput.displayName = \"LabeledInput\"\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC1D,SAASC,MAAM,IAAIC,OAAO;AAC1B,SAASC,GAAG,EAAEC,aAAa;AAC3B,SAASC,KAAK;AACd,SAASC,IAAI;AAOb;AACA,OAAO,IAAMC,YAAY,gBAAGV,KAAK,CAACW,UAAU,CAG1C,UAAAC,IAAA,EAAiDC,YAAY,EAAK;EAAA,IAA/DC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,MAAM,GAAAH,IAAA,CAANG,MAAM;IAAAC,YAAA,GAAAJ,IAAA,CAAEK,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,QAAQ,GAAAA,YAAA;IAAKE,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAC7C,IAAMC,QAAQ,GAAGnB,MAAM,CAAwB,IAAI,CAAC;EACpD,IAAAoB,SAAA,GAA4BnB,QAAQ,CAAC,CAAC,CAAC;IAAAoB,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAhCG,MAAM,GAAAF,UAAA;IAAEG,SAAS,GAAAH,UAAA;EAExBtB,SAAS,CAAC,YAAM;IACd,IAAIoB,QAAQ,CAACM,OAAO,KAAK,IAAI,EAAE;IAC/BD,SAAS,CAACL,QAAQ,CAACM,OAAO,CAACC,WAAW,CAAC;EACzC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAC,cAAA,GAA+BtB,aAAa,CAACW,IAAI,CAAC;IAAAY,eAAA,GAAAN,cAAA,CAAAK,cAAA;IAA3CE,QAAQ,GAAAD,eAAA;IAAEE,UAAU,GAAAF,eAAA;EAE3B,IAAM1B,MAAM,GAAGC,OAAO,CAACS,KAAK,CAAC;EAE7B,IAAMmB,QAAQ,GAAGhB,OAAO,KAAK,QAAQ;EAErC,oBACEjB,KAAA,CAAAkC,aAAA,CAAC5B,GAAG,EAAA6B,QAAA;IAACC,QAAQ,EAAC;EAAU,GAAKL,QAAQ,gBACnC/B,KAAA,CAAAkC,aAAA,CAAC1B,KAAK,EAAA2B,QAAA;IACJE,GAAG,EAAExB,YAAa;IAClBE,MAAM,EAAEA,MAAO;IACfuB,WAAW,EAAEL,QAAQ,GAAGR,MAAM,GAAG,EAAE,GAAGc,SAAU;IAChDC,KAAK,EAAAC,eAAA,KAAKR,QAAQ,GAAG,aAAa,GAAG,cAAc,EAAGR,MAAM,GAAG,EAAE;EAAG,GAChEO,UAAU,gBAEdhC,KAAA,CAAAkC,aAAA,CAAC5B,GAAG,EAAA6B,QAAA;IACFE,GAAG,EAAEhB,QAAgB;IACrBe,QAAQ,EAAC,UAAU;IACnBM,OAAO,EAAC,MAAM;IACdC,UAAU,EAAC,QAAQ;IACnBC,GAAG,EAAE,CAAE;IACPC,MAAM,EAAE,CAAE;IACVL,KAAK,EAAE;MAAEM,aAAa,EAAE1C,MAAM,GAAG,MAAM,GAAGmC;IAAU;EAAE,GAAAE,eAAA,KAC/CR,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAG,CAAC,IAErC7B,MAAM,gBACLJ,KAAA,CAAAkC,aAAA,CAACzB,IAAI;IAACQ,OAAO,EAAC,YAAY;IAAC8B,KAAK,EAAC,QAAQ;IAACC,UAAU,EAAE;EAAE,GACrDlC,KAAK,CACD,GAEPA,KACD,CACG,CACA,CACJ;AAEV,CAAC,CAAC;AAEFJ,YAAY,CAACuC,WAAW,GAAG,cAAc"}

package/dist/esm/elements/LabeledInput/LabeledInput.story.js

@@ -0,0 +1,78 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from "react";
+import { LabeledInput } from "./LabeledInput";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: LabeledInput,
+  title: "Components/LabeledInput",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "An input field with an optional label that can be positioned as prefix or suffix."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    label: "$",
+    placeholder: "Enter amount"
+  },
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement(LabeledInput, args);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic LabeledInput with a dollar sign label."
+      }
+    }
+  }
+};
+export var CharacterCountExample = {
+  render: function render() {
+    var defaultValue = "Hello world";
+    var _useState = useState(defaultValue.length),
+      _useState2 = _slicedToArray(_useState, 2),
+      length = _useState2[0],
+      setLength = _useState2[1];
+    return /*#__PURE__*/React.createElement(LabeledInput, {
+      label: length,
+      onChange: function onChange(e) {
+        return setLength(e.currentTarget.value.length);
+      },
+      defaultValue: defaultValue
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "LabeledInput with character count display."
+      }
+    }
+  }
+};
+export var CustomHeight = {
+  args: {
+    label: "🔎",
+    height: 40,
+    placeholder: "Input is 40px in height"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "LabeledInput with custom height."
+      }
+    }
+  }
+};
+//# sourceMappingURL=LabeledInput.story.js.map

package/dist/esm/elements/LabeledInput/LabeledInput.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabeledInput.story.js","names":["React","useState","LabeledInput","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","label","placeholder","render","createElement","story","CharacterCountExample","defaultValue","_useState","length","_useState2","_slicedToArray","setLength","onChange","e","currentTarget","value","CustomHeight","height"],"sources":["../../../../src/elements/LabeledInput/LabeledInput.story.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { LabeledInput } from \"./LabeledInput\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: LabeledInput,\n  title: \"Components/LabeledInput\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"An input field with an optional label that can be positioned as prefix or suffix.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    label: \"$\",\n    placeholder: \"Enter amount\",\n  },\n  render: (args) => <LabeledInput {...args} />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic LabeledInput with a dollar sign label.\",\n      },\n    },\n  },\n}\n\nexport const CharacterCountExample = {\n  render: () => {\n    const defaultValue = \"Hello world\"\n    const [length, setLength] = useState(defaultValue.length)\n    return (\n      <LabeledInput\n        label={length}\n        onChange={(e) => setLength(e.currentTarget.value.length)}\n        defaultValue={defaultValue}\n      />\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"LabeledInput with character count display.\",\n      },\n    },\n  },\n}\n\nexport const CustomHeight = {\n  args: {\n    label: \"🔎\",\n    height: 40,\n    placeholder: \"Input is 40px in height\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"LabeledInput with custom height.\",\n      },\n    },\n  },\n}\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,YAAY;AACrB,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEF,YAAY;EACvBG,KAAK,EAAE,yBAAyB;EAChCC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACRC,OAAO,EAAER;IACX;EACF;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,KAAK,EAAE,GAAG;IACVC,WAAW,EAAE;EACf,CAAC;EACDC,MAAM,EAAE,SAARA,MAAMA,CAAGH,IAAI;IAAA,oBAAKb,KAAA,CAAAiB,aAAA,CAACf,YAAY,EAAKW,IAAI,CAAI;EAAA;EAC5CN,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXS,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,qBAAqB,GAAG;EACnCH,MAAM,EAAE,SAARA,MAAMA,CAAA,EAAQ;IACZ,IAAMI,YAAY,GAAG,aAAa;IAClC,IAAAC,SAAA,GAA4BpB,QAAQ,CAACmB,YAAY,CAACE,MAAM,CAAC;MAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA;MAAlDC,MAAM,GAAAC,UAAA;MAAEE,SAAS,GAAAF,UAAA;IACxB,oBACEvB,KAAA,CAAAiB,aAAA,CAACf,YAAY;MACXY,KAAK,EAAEQ,MAAO;MACdI,QAAQ,EAAE,SAAVA,QAAQA,CAAGC,CAAC;QAAA,OAAKF,SAAS,CAACE,CAAC,CAACC,aAAa,CAACC,KAAK,CAACP,MAAM,CAAC;MAAA,CAAC;MACzDF,YAAY,EAAEA;IAAa,EAC3B;EAEN,CAAC;EACDb,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXS,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMY,YAAY,GAAG;EAC1BjB,IAAI,EAAE;IACJC,KAAK,EAAE,IAAI;IACXiB,MAAM,EAAE,EAAE;IACVhB,WAAW,EAAE;EACf,CAAC;EACDR,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXS,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

package/dist/esm/elements/LabeledInput/index.js

@@ -0,0 +1,2 @@
+export * from "./LabeledInput";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/LabeledInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/LabeledInput/index.ts"],"sourcesContent":["export * from \"./LabeledInput\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/Link/Link.js

@@ -0,0 +1,24 @@
+import { themeGet } from "@styled-system/theme-get";
+import styled from "styled-components";
+import { compose, system } from "styled-system";
+import { boxMixin } from "../Box";
+var textDecoration = system({
+  textDecoration: true
+});
+var linkMixin = compose(boxMixin, textDecoration);
+
+/**
+ * Basic <a> tag styled with additional LinkProps
+ *
+ * Tip: If working on Force, please use <Link as={RouterLink}>.
+
+ */
+export var Link = styled.a.withConfig({
+  displayName: "Link",
+  componentId: "sc-oxrwcw-0"
+})(["color:currentColor;transition:color 0.25s;&:hover{color:", ";}&:visited{color:", ";}", ";"], themeGet("colors.blue100"), themeGet("colors.blue150"), linkMixin);
+Link.displayName = "Link";
+Link.defaultProps = {
+  textDecoration: "underline"
+};
+//# sourceMappingURL=Link.js.map

package/dist/esm/elements/Link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","names":["themeGet","styled","compose","system","boxMixin","textDecoration","linkMixin","Link","a","withConfig","displayName","componentId","defaultProps"],"sources":["../../../../src/elements/Link/Link.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport styled from \"styled-components\"\nimport { compose, ResponsiveValue, system } from \"styled-system\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\nconst textDecoration = system({ textDecoration: true })\n\nexport interface LinkProps extends BoxProps {\n  textDecoration?: ResponsiveValue<string>\n}\n\nconst linkMixin = compose(boxMixin, textDecoration)\n\n/**\n * Basic <a> tag styled with additional LinkProps\n *\n * Tip: If working on Force, please use <Link as={RouterLink}>.\n\n */\nexport const Link = styled.a<LinkProps>`\n  color: currentColor;\n  transition: color 0.25s;\n  &:hover {\n    color: ${themeGet(\"colors.blue100\")};\n  }\n  &:visited {\n    color: ${themeGet(\"colors.blue150\")};\n  }\n  ${linkMixin};\n`\n\nLink.displayName = \"Link\"\n\nLink.defaultProps = {\n  textDecoration: \"underline\",\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,EAAmBC,MAAM,QAAQ,eAAe;AAChE,SAASC,QAAQ;AAEjB,IAAMC,cAAc,GAAGF,MAAM,CAAC;EAAEE,cAAc,EAAE;AAAK,CAAC,CAAC;AAMvD,IAAMC,SAAS,GAAGJ,OAAO,CAACE,QAAQ,EAAEC,cAAc,CAAC;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAME,IAAI,GAAGN,MAAM,CAACO,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kGAIfX,QAAQ,CAAC,gBAAgB,CAAC,EAG1BA,QAAQ,CAAC,gBAAgB,CAAC,EAEnCM,SAAS,CACZ;AAEDC,IAAI,CAACG,WAAW,GAAG,MAAM;AAEzBH,IAAI,CAACK,YAAY,GAAG;EAClBP,cAAc,EAAE;AAClB,CAAC"}

package/dist/esm/elements/Link/index.js

@@ -0,0 +1,2 @@
+export * from "./Link";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/Link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Link/index.tsx"],"sourcesContent":["export * from \"./Link\"\n"],"mappings":"AAAA"}