@artsy/palette 41.0.0-canary.1423.31655.0 → 41.0.0

package/dist/elements/FullBleed/FullBleed.story.js

@@ -15,7 +15,7 @@ var _default = {
 exports.default = _default;
 var Default = function Default() {
   return /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "black5",
+    bg: "mono5",
     maxWidth: 900,
     mx: "auto",
     px: 2,

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

@@ -1 +1 @@
-{"version":3,"file":"FullBleed.story.js","names":["_react","_interopRequireDefault","require","_Box","_Text","_FullBleed","obj","__esModule","default","_default","title","exports","Default","createElement","Box","bg","maxWidth","mx","px","py","Text","my","variant","FullBleed","displayName"],"sources":["../../../src/elements/FullBleed/FullBleed.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { FullBleed } from \"./FullBleed\"\n\nexport default {\n  title: \"Components/FullBleed\",\n}\n\nexport const Default = () => {\n  return (\n    <Box bg=\"black5\" maxWidth={900} mx=\"auto\" px={2} py={1}>\n      <Text my={2} variant=\"sm-display\">\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia\n        temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit\n        accusamus, libero quod, ipsum nisi non nihil praesentium, optio\n        cupiditate adipisci omnis.\n      </Text>\n\n      <FullBleed bg=\"blue10\" px={2} py={1}>\n        <Text my={2} variant=\"sm-display\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia\n          temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit\n          accusamus, libero quod, ipsum nisi non nihil praesentium, optio\n          cupiditate adipisci omnis.\n        </Text>\n      </FullBleed>\n\n      <Text my={2} variant=\"sm-display\">\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia\n        temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit\n        accusamus, libero quod, ipsum nisi non nihil praesentium, optio\n        cupiditate adipisci omnis.\n      </Text>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAAuC,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAExB;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA;AAEM,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEZ,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACV,IAAA,CAAAW,GAAG;IAACC,EAAE,EAAC,QAAQ;IAACC,QAAQ,EAAE,GAAI;IAACC,EAAE,EAAC,MAAM;IAACC,EAAE,EAAE,CAAE;IAACC,EAAE,EAAE;EAAE,gBACrDnB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,KAAA,CAAAgB,IAAI;IAACC,EAAE,EAAE,CAAE;IAACC,OAAO,EAAC;EAAY,GAAC,uOAKlC,CAAO,eAEPtB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACR,UAAA,CAAAkB,SAAS;IAACR,EAAE,EAAC,QAAQ;IAACG,EAAE,EAAE,CAAE;IAACC,EAAE,EAAE;EAAE,gBAClCnB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,KAAA,CAAAgB,IAAI;IAACC,EAAE,EAAE,CAAE;IAACC,OAAO,EAAC;EAAY,GAAC,uOAKlC,CAAO,CACG,eAEZtB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,KAAA,CAAAgB,IAAI;IAACC,EAAE,EAAE,CAAE;IAACC,OAAO,EAAC;EAAY,GAAC,uOAKlC,CAAO,CACH;AAEV,CAAC;AAAAX,OAAA,CAAAC,OAAA,GAAAA,OAAA;AA3BYA,OAAO,CAAAY,WAAA"}
+{"version":3,"file":"FullBleed.story.js","names":["_react","_interopRequireDefault","require","_Box","_Text","_FullBleed","obj","__esModule","default","_default","title","exports","Default","createElement","Box","bg","maxWidth","mx","px","py","Text","my","variant","FullBleed","displayName"],"sources":["../../../src/elements/FullBleed/FullBleed.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { FullBleed } from \"./FullBleed\"\n\nexport default {\n  title: \"Components/FullBleed\",\n}\n\nexport const Default = () => {\n  return (\n    <Box bg=\"mono5\" maxWidth={900} mx=\"auto\" px={2} py={1}>\n      <Text my={2} variant=\"sm-display\">\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia\n        temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit\n        accusamus, libero quod, ipsum nisi non nihil praesentium, optio\n        cupiditate adipisci omnis.\n      </Text>\n\n      <FullBleed bg=\"blue10\" px={2} py={1}>\n        <Text my={2} variant=\"sm-display\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia\n          temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit\n          accusamus, libero quod, ipsum nisi non nihil praesentium, optio\n          cupiditate adipisci omnis.\n        </Text>\n      </FullBleed>\n\n      <Text my={2} variant=\"sm-display\">\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia\n        temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit\n        accusamus, libero quod, ipsum nisi non nihil praesentium, optio\n        cupiditate adipisci omnis.\n      </Text>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAAuC,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAExB;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA;AAEM,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEZ,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACV,IAAA,CAAAW,GAAG;IAACC,EAAE,EAAC,OAAO;IAACC,QAAQ,EAAE,GAAI;IAACC,EAAE,EAAC,MAAM;IAACC,EAAE,EAAE,CAAE;IAACC,EAAE,EAAE;EAAE,gBACpDnB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,KAAA,CAAAgB,IAAI;IAACC,EAAE,EAAE,CAAE;IAACC,OAAO,EAAC;EAAY,GAAC,uOAKlC,CAAO,eAEPtB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACR,UAAA,CAAAkB,SAAS;IAACR,EAAE,EAAC,QAAQ;IAACG,EAAE,EAAE,CAAE;IAACC,EAAE,EAAE;EAAE,gBAClCnB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,KAAA,CAAAgB,IAAI;IAACC,EAAE,EAAE,CAAE;IAACC,OAAO,EAAC;EAAY,GAAC,uOAKlC,CAAO,CACG,eAEZtB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,KAAA,CAAAgB,IAAI;IAACC,EAAE,EAAE,CAAE;IAACC,OAAO,EAAC;EAAY,GAAC,uOAKlC,CAAO,CACH;AAEV,CAAC;AAAAX,OAAA,CAAAC,OAAA,GAAAA,OAAA;AA3BYA,OAAO,CAAAY,WAAA"}

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

@@ -57,7 +57,7 @@ var RealWorldExample = function RealWorldExample() {
     variant: "sm-display",
     mb: 1
   }, "Featured content"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "black10",
+    bg: "mono10",
     borderRadius: 4,
     height: 400
   })));
@@ -85,30 +85,30 @@ var KitchenSink = function KitchenSink() {
     span: 4,
     wrap: true
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, IPSUM, " ", IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "black100",
+    bg: "mono100",
     span: [6]
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    color: "white100"
+    color: "mono0"
   }, "This remains 2-columns at all breakpoints")), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "black100",
+    bg: "mono100",
     span: [6]
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    color: "white100"
+    color: "mono0"
   }, "This remains 2-columns at all breakpoints")), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "black100",
+    bg: "mono100",
     span: 6
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    color: "white100"
+    color: "mono0"
   }, "These are 2-columns at large breakpoints, and 1 at mobile")), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "black100",
+    bg: "mono100",
     span: 6
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    color: "white100"
+    color: "mono0"
   }, "These are 2-columns at large breakpoints, and 1 at mobile")), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     start: [2, 3, 4],
     span: [9, 6, 3],
     height: 300,
-    bg: "black10",
+    bg: "mono10",
     borderRadius: 4
   }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     height: 200,
@@ -117,10 +117,10 @@ var KitchenSink = function KitchenSink() {
     start: [1, 4],
     wrap: true
   }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
-    bg: "black100",
+    bg: "mono100",
     start: 4
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    color: "white100"
+    color: "mono0"
   }, IPSUM)), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     border: "1px solid red",
     span: 4,
@@ -179,7 +179,7 @@ var KitchenSink = function KitchenSink() {
     gridColumn: "3 / 9",
     bg: "purple100"
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    color: "white100"
+    color: "mono0"
   }, "A custom grid-column value")));
 };
 exports.KitchenSink = KitchenSink;
@@ -193,51 +193,51 @@ var CustomGutters = function CustomGutters() {
     gridRowGap: 1
   }, /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     span: 2,
-    bg: "black10",
+    bg: "mono10",
     height: 100
   }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     span: 2,
-    bg: "black10",
+    bg: "mono10",
     height: 100
   }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     span: 2,
-    bg: "black10",
+    bg: "mono10",
     height: 100
   }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     span: 2,
-    bg: "black10",
+    bg: "mono10",
     height: 100
   }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     span: 2,
-    bg: "black10",
+    bg: "mono10",
     height: 100
   }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     span: 2,
-    bg: "black10",
+    bg: "mono10",
     height: 100
   }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     span: 2,
-    bg: "black10",
+    bg: "mono10",
     height: 100
   }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     span: 2,
-    bg: "black10",
+    bg: "mono10",
     height: 100
   }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     span: 2,
-    bg: "black10",
+    bg: "mono10",
     height: 100
   }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     span: 2,
-    bg: "black10",
+    bg: "mono10",
     height: 100
   }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     span: 2,
-    bg: "black10",
+    bg: "mono10",
     height: 100
   }), /*#__PURE__*/_react.default.createElement(_GridColumns.Column, {
     span: 2,
-    bg: "black10",
+    bg: "mono10",
     height: 100
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"GridColumns.story.js","names":["_react","_interopRequireDefault","require","_Box","_Text","_GridColumns","obj","__esModule","default","IPSUM","GridColumnsDebug","createElement","GridColumns","position","top","left","width","height","style","pointerEvents","Array","from","map","_","i","Column","key","span","bg","displayName","_default","title","exports","RealWorldExample","m","wrap","Text","as","variant","mb","start","Box","borderRadius","story","name","KitchenSink","border","color","gridColumn","CustomGutters","gridColumnGap","gridRowGap"],"sources":["../../../src/elements/GridColumns/GridColumns.story.tsx"],"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"],"mappings":"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"}
+{"version":3,"file":"GridColumns.story.js","names":["_react","_interopRequireDefault","require","_Box","_Text","_GridColumns","obj","__esModule","default","IPSUM","GridColumnsDebug","createElement","GridColumns","position","top","left","width","height","style","pointerEvents","Array","from","map","_","i","Column","key","span","bg","displayName","_default","title","exports","RealWorldExample","m","wrap","Text","as","variant","mb","start","Box","borderRadius","story","name","KitchenSink","border","color","gridColumn","CustomGutters","gridColumnGap","gridRowGap"],"sources":["../../../src/elements/GridColumns/GridColumns.story.tsx"],"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=\"mono10\" 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=\"mono100\" span={[6]}>\n        <Text color=\"mono0\">This remains 2-columns at all breakpoints</Text>\n      </Column>\n\n      <Column bg=\"mono100\" span={[6]}>\n        <Text color=\"mono0\">This remains 2-columns at all breakpoints</Text>\n      </Column>\n\n      <Column bg=\"mono100\" span={6}>\n        <Text color=\"mono0\">\n          These are 2-columns at large breakpoints, and 1 at mobile\n        </Text>\n      </Column>\n\n      <Column bg=\"mono100\" span={6}>\n        <Text color=\"mono0\">\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=\"mono10\"\n        borderRadius={4}\n      />\n\n      <Column height={200} bg=\"purple100\" span={[12, 6]} start={[1, 4]} wrap />\n\n      <Column bg=\"mono100\" start={4}>\n        <Text color=\"mono0\">{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=\"mono0\">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=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n      <Column span={2} bg=\"mono10\" height={100} />\n    </GridColumns>\n  )\n}\n\nCustomGutters.story = {\n  name: \"Custom gutters\",\n}\n"],"mappings":"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"}

package/dist/elements/HTML/HTML.js

@@ -24,7 +24,7 @@ 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, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("colors.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.mono10"));
 exports.htmlMixin = htmlMixin;
 var Container = (0, _styledComponents.default)(_Text.Text).withConfig({
   displayName: "HTML__Container",

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

@@ -1 +1 @@
-{"version":3,"file":"HTML.js","names":["_themeGet","require","_react","_interopRequireDefault","_styledComponents","_interopRequireWildcard","_Text","_excluded","_excluded2","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","htmlMixin","css","themeGet","exports","Container","styled","Text","withConfig","displayName","componentId","defaultProps","variant","HTML","props","html","htmlRest","createElement","dangerouslySetInnerHTML","__html","children","childrenRest"],"sources":["../../../src/elements/HTML/HTML.tsx"],"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<React.PropsWithChildren<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"],"mappings":"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"}
+{"version":3,"file":"HTML.js","names":["_themeGet","require","_react","_interopRequireDefault","_styledComponents","_interopRequireWildcard","_Text","_excluded","_excluded2","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","htmlMixin","css","themeGet","exports","Container","styled","Text","withConfig","displayName","componentId","defaultProps","variant","HTML","props","html","htmlRest","createElement","dangerouslySetInnerHTML","__html","children","childrenRest"],"sources":["../../../src/elements/HTML/HTML.tsx"],"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.mono10\")};\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<React.PropsWithChildren<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"],"mappings":"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"}

package/dist/elements/HorizontalOverflow/HorizontalOverflow.story.js

@@ -24,7 +24,7 @@ var Default = function Default() {
       }, "Not overflowing")
     }]
   }, /*#__PURE__*/_react.default.createElement(_HorizontalOverflow.HorizontalOverflow, {
-    bg: "black10",
+    bg: "mono10",
     p: 2
   }, /*#__PURE__*/_react.default.createElement(_Join.Join, {
     separator: /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
@@ -34,7 +34,7 @@ var Default = function Default() {
     return /*#__PURE__*/_react.default.createElement(_Text.Text, {
       key: i,
       variant: "sm-display",
-      color: "black100",
+      color: "mono100",
       mr: 2
     }, "Example #", i);
   }))));
@@ -57,7 +57,7 @@ var FillHeightCenteredContent = function FillHeightCenteredContent() {
     return /*#__PURE__*/_react.default.createElement(_Text.Text, {
       key: i,
       variant: "sm-display",
-      color: "black100",
+      color: "mono100",
       display: "flex",
       alignItems: "center"
     }, "Example #", i);

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalOverflow.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_HorizontalOverflow","_Text","_Spacer","_Join","_Box","obj","__esModule","default","_default","title","exports","Default","createElement","States","states","children","Text","variant","HorizontalOverflow","bg","p","Join","separator","Spacer","x","Array","from","map","_","i","key","color","mr","displayName","FillHeightCenteredContent","Box","height","border","display","alignItems"],"sources":["../../../src/elements/HorizontalOverflow/HorizontalOverflow.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport {\n  HorizontalOverflow,\n  HorizontalOverflowProps,\n} from \"./HorizontalOverflow\"\nimport { Text } from \"../Text\"\nimport { Spacer } from \"../Spacer\"\nimport { Join } from \"../Join\"\nimport { Box } from \"../Box\"\n\nexport default {\n  title: \"Components/HorizontalOverflow\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<HorizontalOverflowProps>>\n      states={[\n        {},\n        { children: <Text variant=\"sm-display\">Not overflowing</Text> },\n      ]}\n    >\n      <HorizontalOverflow bg=\"black10\" p={2}>\n        <Join separator={<Spacer x={2} />}>\n          {Array.from(Array(50)).map((_, i) => (\n            <Text key={i} variant=\"sm-display\" color=\"black100\" mr={2}>\n              Example #{i}\n            </Text>\n          ))}\n        </Join>\n      </HorizontalOverflow>\n    </States>\n  )\n}\n\nexport const FillHeightCenteredContent = () => {\n  return (\n    <Box height={100} bg=\"red10\">\n      <HorizontalOverflow border=\"1px solid\" p={2} height=\"100%\">\n        <Join separator={<Spacer x={2} />}>\n          {Array.from(Array(50)).map((_, i) => (\n            <Text\n              key={i}\n              variant=\"sm-display\"\n              color=\"black100\"\n              display=\"flex\"\n              alignItems=\"center\"\n            >\n              Example #{i}\n            </Text>\n          ))}\n        </Join>\n      </HorizontalOverflow>\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalOverflow.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_HorizontalOverflow","_Text","_Spacer","_Join","_Box","obj","__esModule","default","_default","title","exports","Default","createElement","States","states","children","Text","variant","HorizontalOverflow","bg","p","Join","separator","Spacer","x","Array","from","map","_","i","key","color","mr","displayName","FillHeightCenteredContent","Box","height","border","display","alignItems"],"sources":["../../../src/elements/HorizontalOverflow/HorizontalOverflow.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport {\n  HorizontalOverflow,\n  HorizontalOverflowProps,\n} from \"./HorizontalOverflow\"\nimport { Text } from \"../Text\"\nimport { Spacer } from \"../Spacer\"\nimport { Join } from \"../Join\"\nimport { Box } from \"../Box\"\n\nexport default {\n  title: \"Components/HorizontalOverflow\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<HorizontalOverflowProps>>\n      states={[\n        {},\n        { children: <Text variant=\"sm-display\">Not overflowing</Text> },\n      ]}\n    >\n      <HorizontalOverflow bg=\"mono10\" p={2}>\n        <Join separator={<Spacer x={2} />}>\n          {Array.from(Array(50)).map((_, i) => (\n            <Text key={i} variant=\"sm-display\" color=\"mono100\" mr={2}>\n              Example #{i}\n            </Text>\n          ))}\n        </Join>\n      </HorizontalOverflow>\n    </States>\n  )\n}\n\nexport const FillHeightCenteredContent = () => {\n  return (\n    <Box height={100} bg=\"red10\">\n      <HorizontalOverflow border=\"1px solid\" p={2} height=\"100%\">\n        <Join separator={<Spacer x={2} />}>\n          {Array.from(Array(50)).map((_, i) => (\n            <Text\n              key={i}\n              variant=\"sm-display\"\n              color=\"mono100\"\n              display=\"flex\"\n              alignItems=\"center\"\n            >\n              Example #{i}\n            </Text>\n          ))}\n        </Join>\n      </HorizontalOverflow>\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/elements/Image/Image.js

@@ -78,7 +78,7 @@ var Image = function Image(_ref) {
       position: "relative",
       width: width,
       height: height,
-      bg: lazyLoad && !placeHolderURL ? "black10" : undefined
+      bg: lazyLoad && !placeHolderURL ? "mono10" : undefined
     }, boxProps, {
       style: _objectSpread({}, placeHolderURL && {
         backgroundImage: "url(".concat(placeHolderURL, ")"),

package/dist/elements/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["_react","_interopRequireWildcard","require","_Box","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Image","_ref","className","height","_ref$lazyLoad","lazyLoad","onLoad","placeHolderURL","_ref$preventRightClic","preventRightClick","style","width","rest","_useState","useState","_useState2","mode","setMode","imageRef","useRef","useEffect","_imageRef$current","current","complete","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","imageProps","commonImgProps","ref","loading","event","onContextMenu","e","preventDefault","lazyLoadStyle","transition","opacity","createElement","Box","position","bg","backgroundImage","concat","backgroundSize","backgroundPosition","as","top","left","display","exports","displayName"],"sources":["../../../src/elements/Image/Image.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\n\nexport interface ImageProps\n  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"width\" | \"height\">,\n    BoxProps {\n  /** Flag for if image should be lazy loaded */\n  lazyLoad?: boolean\n  /** Flag indicating that right clicks should be prevented */\n  preventRightClick?: boolean\n  /** Currently, this is used by clients for BlurHash data,\n      decoded and represented as a data URL */\n  placeHolderURL?: string\n}\n\nexport const Image: React.FC<ImageProps> = ({\n  className,\n  height,\n  lazyLoad = false,\n  onLoad,\n  placeHolderURL,\n  preventRightClick = false,\n  style,\n  width,\n  ...rest\n}) => {\n  const [mode, setMode] = useState<\"Pending\" | \"Ready\">(\"Pending\")\n  const imageRef = useRef<HTMLImageElement>(null)\n\n  useEffect(() => {\n    if (imageRef.current?.complete) {\n      setMode(\"Ready\")\n    }\n  }, [])\n\n  const [boxProps, imageProps] = splitBoxProps(rest)\n\n  // Common image props\n  const commonImgProps = {\n    ref: imageRef as any,\n    loading: lazyLoad ? (\"lazy\" as const) : undefined,\n    onLoad: (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      setMode(\"Ready\")\n      onLoad?.(event)\n    },\n    onContextMenu: preventRightClick ? (e) => e.preventDefault() : undefined,\n    ...imageProps,\n  }\n\n  // Common lazy loading style\n  const lazyLoadStyle = lazyLoad\n    ? {\n        transition: \"opacity 0.2s ease-in-out\",\n        opacity: mode === \"Ready\" ? 1 : 0,\n      }\n    : {}\n\n  // If there's a placeholder URL or lazy loading is enabled, use a wrapper container\n  if (placeHolderURL || lazyLoad) {\n    return (\n      <Box\n        className={className}\n        position=\"relative\"\n        width={width}\n        height={height}\n        bg={lazyLoad && !placeHolderURL ? \"black10\" : undefined}\n        {...boxProps}\n        style={{\n          ...(placeHolderURL && {\n            backgroundImage: `url(${placeHolderURL})`,\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n          }),\n        }}\n      >\n        <Box\n          as=\"img\"\n          position=\"absolute\"\n          top={0}\n          left={0}\n          width=\"100%\"\n          height=\"100%\"\n          display=\"block\"\n          style={{ ...lazyLoadStyle, ...style }}\n          {...commonImgProps}\n        />\n      </Box>\n    )\n  }\n\n  // If no placeholder and no lazy loading, render a direct img element\n  return (\n    <Box\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      as=\"img\"\n      className={className}\n      width={width}\n      height={height}\n      display=\"block\"\n      style={style}\n      {...boxProps}\n      {...commonImgProps}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Image.js","names":["_react","_interopRequireWildcard","require","_Box","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Image","_ref","className","height","_ref$lazyLoad","lazyLoad","onLoad","placeHolderURL","_ref$preventRightClic","preventRightClick","style","width","rest","_useState","useState","_useState2","mode","setMode","imageRef","useRef","useEffect","_imageRef$current","current","complete","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","imageProps","commonImgProps","ref","loading","event","onContextMenu","e","preventDefault","lazyLoadStyle","transition","opacity","createElement","Box","position","bg","backgroundImage","concat","backgroundSize","backgroundPosition","as","top","left","display","exports","displayName"],"sources":["../../../src/elements/Image/Image.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\n\nexport interface ImageProps\n  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"width\" | \"height\">,\n    BoxProps {\n  /** Flag for if image should be lazy loaded */\n  lazyLoad?: boolean\n  /** Flag indicating that right clicks should be prevented */\n  preventRightClick?: boolean\n  /** Currently, this is used by clients for BlurHash data,\n      decoded and represented as a data URL */\n  placeHolderURL?: string\n}\n\nexport const Image: React.FC<ImageProps> = ({\n  className,\n  height,\n  lazyLoad = false,\n  onLoad,\n  placeHolderURL,\n  preventRightClick = false,\n  style,\n  width,\n  ...rest\n}) => {\n  const [mode, setMode] = useState<\"Pending\" | \"Ready\">(\"Pending\")\n  const imageRef = useRef<HTMLImageElement>(null)\n\n  useEffect(() => {\n    if (imageRef.current?.complete) {\n      setMode(\"Ready\")\n    }\n  }, [])\n\n  const [boxProps, imageProps] = splitBoxProps(rest)\n\n  // Common image props\n  const commonImgProps = {\n    ref: imageRef as any,\n    loading: lazyLoad ? (\"lazy\" as const) : undefined,\n    onLoad: (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      setMode(\"Ready\")\n      onLoad?.(event)\n    },\n    onContextMenu: preventRightClick ? (e) => e.preventDefault() : undefined,\n    ...imageProps,\n  }\n\n  // Common lazy loading style\n  const lazyLoadStyle = lazyLoad\n    ? {\n        transition: \"opacity 0.2s ease-in-out\",\n        opacity: mode === \"Ready\" ? 1 : 0,\n      }\n    : {}\n\n  // If there's a placeholder URL or lazy loading is enabled, use a wrapper container\n  if (placeHolderURL || lazyLoad) {\n    return (\n      <Box\n        className={className}\n        position=\"relative\"\n        width={width}\n        height={height}\n        bg={lazyLoad && !placeHolderURL ? \"mono10\" : undefined}\n        {...boxProps}\n        style={{\n          ...(placeHolderURL && {\n            backgroundImage: `url(${placeHolderURL})`,\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n          }),\n        }}\n      >\n        <Box\n          as=\"img\"\n          position=\"absolute\"\n          top={0}\n          left={0}\n          width=\"100%\"\n          height=\"100%\"\n          display=\"block\"\n          style={{ ...lazyLoadStyle, ...style }}\n          {...commonImgProps}\n        />\n      </Box>\n    )\n  }\n\n  // If no placeholder and no lazy loading, render a direct img element\n  return (\n    <Box\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      as=\"img\"\n      className={className}\n      width={width}\n      height={height}\n      display=\"block\"\n      style={style}\n      {...boxProps}\n      {...commonImgProps}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/elements/Input/Input.js

@@ -67,7 +67,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     placement: "top-end"
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs",
-    color: "black60",
+    color: "mono60",
     textAlign: "right"
   }, /*#__PURE__*/_react.default.createElement("u", null, "What is this?"))), /*#__PURE__*/_react.default.createElement(_Box.Box, {
     position: "relative",
@@ -99,7 +99,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }), !!(inputProps !== null && inputProps !== void 0 && inputProps.maxLength) && showCounter && /*#__PURE__*/_react.default.createElement(_Text.Text, {
     flex: 1,
     variant: "xs",
-    color: "black60",
+    color: "mono60",
     textAlign: "right"
   }, String(value).length, "/", inputProps.maxLength)), error && typeof error === "string" && /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs",
@@ -119,7 +119,7 @@ var StyledInput = _styledComponents.default.input.withConfig({
 var StyledLabel = _styledComponents.default.label.withConfig({
   displayName: "Input__StyledLabel",
   componentId: "sc-bysdh7-1"
-})(["position:absolute;top:50%;left:5px;padding:0 5px;background-color:transparent;transform:translateY(-50%);transition:", ";transition-property:color,transform,padding,font-size;font-family:", ";pointer-events:none;& > span{background-color:", ";height:100%;width:100%;display:block;position:absolute;top:0;left:0;z-index:-1;transition:", ";transition-property:height,top;transition-delay:0.1s;}", ""], _helpers.FORM_ELEMENT_TRANSITION, (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("colors.white100"), _helpers.FORM_ELEMENT_TRANSITION, function (_ref2) {
+})(["position:absolute;top:50%;left:5px;padding:0 5px;background-color:transparent;transform:translateY(-50%);transition:", ";transition-property:color,transform,padding,font-size;font-family:", ";pointer-events:none;& > span{background-color:", ";height:100%;width:100%;display:block;position:absolute;top:0;left:0;z-index:-1;transition:", ";transition-property:height,top;transition-delay:0.1s;}", ""], _helpers.FORM_ELEMENT_TRANSITION, (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("colors.mono0"), _helpers.FORM_ELEMENT_TRANSITION, function (_ref2) {
   var labelOffset = _ref2.labelOffset;
   return !!labelOffset && (0, _styledComponents.css)(["padding-left:", "px;"], labelOffset - 5);
 });

package/dist/elements/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_styledSystem","_RequiredField","_Box","_Text","_Tooltip","_tokens","_helpers","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Input","React","forwardRef","_ref","ref","children","className","description","disabled","error","required","focus","hover","title","height","labelOffset","showCounter","_ref$defaultValue","defaultValue","onChange","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","inputProps","_React$useState","useState","_React$useState2","setValue","handleChange","useCallback","event","nextValue","currentTarget","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","position","mt","StyledInput","undefined","placeholder","StyledLabel","htmlFor","maxLength","display","mx","RequiredField","flex","String","ml","exports","displayName","styled","input","withConfig","componentId","themeGet","systemHeight","props","css","INPUT_STATES","active","completed","FORM_ELEMENT_TRANSITION","label","_ref2"],"sources":["../../../src/elements/Input/Input.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { INPUT_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface InputProps\n  extends BoxProps,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      \"size\" | \"width\" | \"height\" | \"capture\"\n    > {\n  active?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  required?: boolean\n  title?: string\n  labelOffset?: number\n  showCounter?: boolean\n}\n\n/** Input component */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      children,\n      className,\n      description,\n      disabled,\n      error,\n      required,\n      focus,\n      hover,\n      title,\n      height,\n      labelOffset,\n      showCounter,\n      defaultValue = \"\",\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n    const [value, setValue] = React.useState(inputProps.value || defaultValue)\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.(event)\n      },\n      [onChange]\n    )\n\n    return (\n      <Box width=\"100%\" className={className} {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"black60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledInput\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={!!error}\n            required={required}\n            height={(height ?? 50) as any}\n            name={inputProps.name}\n            title={title}\n            labelOffset={labelOffset}\n            defaultValue={defaultValue || undefined}\n            onChange={handleChange}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel labelOffset={labelOffset} htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n\n          {children}\n        </Box>\n\n        {(required || (inputProps?.maxLength && showCounter)) &&\n          !(error && typeof error === \"string\") && (\n            <Box display=\"flex\" mt={0.5} mx={1}>\n              {required && <RequiredField disabled={disabled} flex={1} />}\n\n              {!!inputProps?.maxLength && showCounter && (\n                <Text flex={1} variant=\"xs\" color=\"black60\" textAlign=\"right\">\n                  {String(value).length}/{inputProps.maxLength}\n                </Text>\n              )}\n            </Box>\n          )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n\ntype StyledInputProps = Pick<\n  InputProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\" | \"labelOffset\"\n>\n\nconst StyledInput = styled.input<StyledInputProps>`\n  width: 100%;\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  line-height: 1;\n  border: 1px solid;\n  border-radius: 3px;\n  transition: border-color 0.25s, color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  ${systemHeight};\n\n  ::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${INPUT_STATES.default}\n      ${props.hover && INPUT_STATES.hover}\n      ${props.focus && INPUT_STATES.focus}\n      ${props.active && INPUT_STATES.active}\n      ${props.disabled && INPUT_STATES.disabled}\n      ${props.error && INPUT_STATES.error}\n\n      &:hover {\n        ${INPUT_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${INPUT_STATES.completed}\n        ${props.error && INPUT_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${INPUT_STATES.focus}\n\n        &::placeholder {\n          transition: ${FORM_ELEMENT_TRANSITION};\n          opacity: 1;\n        }\n\n        :not(:placeholder-shown) {\n          ${INPUT_STATES.active}\n          ${props.error && INPUT_STATES.error}\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${INPUT_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        &::placeholder {\n          transition: ${FORM_ELEMENT_TRANSITION};\n          opacity: 0;\n        }\n      `}\n    `\n  }};\n`\n\nconst StyledLabel = styled.label<StyledInputProps>`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.white100\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n\n  ${({ labelOffset }) =>\n    !!labelOffset &&\n    css`\n      padding-left: ${labelOffset - 5}px;\n    `}\n`\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_styledSystem","_RequiredField","_Box","_Text","_Tooltip","_tokens","_helpers","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Input","React","forwardRef","_ref","ref","children","className","description","disabled","error","required","focus","hover","title","height","labelOffset","showCounter","_ref$defaultValue","defaultValue","onChange","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","inputProps","_React$useState","useState","_React$useState2","setValue","handleChange","useCallback","event","nextValue","currentTarget","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","position","mt","StyledInput","undefined","placeholder","StyledLabel","htmlFor","maxLength","display","mx","RequiredField","flex","String","ml","exports","displayName","styled","input","withConfig","componentId","themeGet","systemHeight","props","css","INPUT_STATES","active","completed","FORM_ELEMENT_TRANSITION","label","_ref2"],"sources":["../../../src/elements/Input/Input.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { INPUT_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface InputProps\n  extends BoxProps,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      \"size\" | \"width\" | \"height\" | \"capture\"\n    > {\n  active?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  required?: boolean\n  title?: string\n  labelOffset?: number\n  showCounter?: boolean\n}\n\n/** Input component */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      children,\n      className,\n      description,\n      disabled,\n      error,\n      required,\n      focus,\n      hover,\n      title,\n      height,\n      labelOffset,\n      showCounter,\n      defaultValue = \"\",\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n    const [value, setValue] = React.useState(inputProps.value || defaultValue)\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.(event)\n      },\n      [onChange]\n    )\n\n    return (\n      <Box width=\"100%\" className={className} {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledInput\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={!!error}\n            required={required}\n            height={(height ?? 50) as any}\n            name={inputProps.name}\n            title={title}\n            labelOffset={labelOffset}\n            defaultValue={defaultValue || undefined}\n            onChange={handleChange}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel labelOffset={labelOffset} htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n\n          {children}\n        </Box>\n\n        {(required || (inputProps?.maxLength && showCounter)) &&\n          !(error && typeof error === \"string\") && (\n            <Box display=\"flex\" mt={0.5} mx={1}>\n              {required && <RequiredField disabled={disabled} flex={1} />}\n\n              {!!inputProps?.maxLength && showCounter && (\n                <Text flex={1} variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n                  {String(value).length}/{inputProps.maxLength}\n                </Text>\n              )}\n            </Box>\n          )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n\ntype StyledInputProps = Pick<\n  InputProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\" | \"labelOffset\"\n>\n\nconst StyledInput = styled.input<StyledInputProps>`\n  width: 100%;\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  line-height: 1;\n  border: 1px solid;\n  border-radius: 3px;\n  transition: border-color 0.25s, color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  ${systemHeight};\n\n  ::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${INPUT_STATES.default}\n      ${props.hover && INPUT_STATES.hover}\n      ${props.focus && INPUT_STATES.focus}\n      ${props.active && INPUT_STATES.active}\n      ${props.disabled && INPUT_STATES.disabled}\n      ${props.error && INPUT_STATES.error}\n\n      &:hover {\n        ${INPUT_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${INPUT_STATES.completed}\n        ${props.error && INPUT_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${INPUT_STATES.focus}\n\n        &::placeholder {\n          transition: ${FORM_ELEMENT_TRANSITION};\n          opacity: 1;\n        }\n\n        :not(:placeholder-shown) {\n          ${INPUT_STATES.active}\n          ${props.error && INPUT_STATES.error}\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${INPUT_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        &::placeholder {\n          transition: ${FORM_ELEMENT_TRANSITION};\n          opacity: 0;\n        }\n      `}\n    `\n  }};\n`\n\nconst StyledLabel = styled.label<StyledInputProps>`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.mono0\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n\n  ${({ labelOffset }) =>\n    !!labelOffset &&\n    css`\n      padding-left: ${labelOffset - 5}px;\n    `}\n`\n"],"mappings":"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"}

package/dist/elements/Input/tokens.js

@@ -7,12 +7,12 @@ exports.INPUT_STATES = void 0;
 var _themeGet = require("@styled-system/theme-get");
 var _styledComponents = require("styled-components");
 var INPUT_STATES = {
-  default: (0, _styledComponents.css)(["background-color:", ";font-size:", ";color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";font-size:", ";}"], (0, _themeGet.themeGet)("colors.white100"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize")),
-  focus: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";opacity:1;}& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
-  hover: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black100")),
-  active: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
-  completed: (0, _styledComponents.css)(["color:", ";border-color:", ";& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.blue60"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
-  disabled: (0, _styledComponents.css)(["color:", ";border-color:", ";background-color:transparent;-webkit-text-fill-color:", ";opacity:1;::placeholder{color:", ";}&:not(:placeholder-shown) + label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}&:placeholder-shown + label{color:", ";}"], (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"), (0, _themeGet.themeGet)("colors.black30")),
+  default: (0, _styledComponents.css)(["background-color:", ";font-size:", ";color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";font-size:", ";}"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize")),
+  focus: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";opacity:1;}& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
+  hover: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";}"], (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono100")),
+  active: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
+  completed: (0, _styledComponents.css)(["color:", ";border-color:", ";& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.blue60"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
+  disabled: (0, _styledComponents.css)(["color:", ";border-color:", ";background-color:transparent;-webkit-text-fill-color:", ";opacity:1;::placeholder{color:", ";}&:not(:placeholder-shown) + label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}&:placeholder-shown + label{color:", ";}"], (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"), (0, _themeGet.themeGet)("colors.mono30")),
   error: (0, _styledComponents.css)(["border-color:", ";& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"))
 };
 exports.INPUT_STATES = INPUT_STATES;