@artsy/palette 24.3.0 → 24.3.1

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v24.3.1 (Mon Oct 03 2022)
+
+#### 🐛  Bug Fix
+
+- fix(types): adds children to types [#1209](https://github.com/artsy/palette/pull/1209) ([@dzucconi](https://github.com/dzucconi))
+- fix(types): adds children to types ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v24.3.0 (Wed Sep 21 2022)
 
 #### 🚀  Enhancement

package/dist/Theme.d.ts

@@ -261,6 +261,7 @@ declare const THEMES: {
             black60: string;
             black30: string;
             black15: string;
+            /** Utilize only the v3 theme */
             black10: string;
             black5: string;
             white100: string;
@@ -273,7 +274,7 @@ declare const THEMES: {
             green10: string;
             yellow150: string;
             yellow100: string;
-            yellow10: string;
+            yellow10: string; /** Typeguard for v3 */
             orange150: string;
             orange100: string;
             orange10: string;
@@ -305,12 +306,14 @@ declare const THEMES: {
         textVariants: Record<"xxxl" | "xxl" | "xl" | "lg" | "lg-display" | "md" | "sm" | "sm-display" | "xs" | "bq", import("@artsy/palette-tokens/dist/typography/v3").TextTreatment>;
     };
 };
+interface ThemeProps {
+    theme?: TTheme | keyof typeof THEMES;
+    children?: React.ReactNode;
+}
 /**
  * A wrapper component for passing down the Artsy theme context
  */
-export declare const Theme: React.FC<{
-    theme?: TTheme | keyof typeof THEMES;
-}>;
+export declare const Theme: React.FC<ThemeProps>;
 /** Utilize only the v2 theme */
 export declare const ThemeProviderV2: React.FC;
 /** Utilize only the v3 theme */
@@ -588,6 +591,7 @@ export declare const isThemeV3: (theme: TTheme) => theme is {
         black60: string;
         black30: string;
         black15: string;
+        /** Utilize only the v3 theme */
         black10: string;
         black5: string;
         white100: string;
@@ -600,7 +604,7 @@ export declare const isThemeV3: (theme: TTheme) => theme is {
         green10: string;
         yellow150: string;
         yellow100: string;
-        yellow10: string;
+        yellow10: string; /** Typeguard for v3 */
         orange150: string;
         orange100: string;
         orange10: string;

package/dist/Theme.js

@@ -71,10 +71,10 @@ var THEMES = {
   v2: _themes.THEME_V2,
   v3: _themes.THEME_V3
 };
+
 /**
  * A wrapper component for passing down the Artsy theme context
  */
-
 var Theme = function Theme(_ref) {
   var children = _ref.children,
       _ref$theme = _ref.theme,

package/dist/Theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Theme.tsx"],"names":["THEMES","v2","THEME_V2","v3","THEME_V3","Theme","children","theme","themeOrThemeKey","ThemeProviderV2","ThemeProviderV3","useTheme","ThemeContext","useThemeConfig","id","getThemeConfig","props","isThemeV2","isThemeV3"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAIA;;AACA;;AAGA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;;;;;AATA;AACA;AACA;AASA,IAAMA,MAAM,GAAG;AACbC,EAAAA,EAAE,EAAEC,gBADS;AAEbC,EAAAA,EAAE,EAAEC;AAFS,CAAf;AAKA;AACA;AACA;;AACO,IAAMC,KAAyD,GAAG,SAA5DA,KAA4D,OAGnE;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,wBADJC,KACI;AAAA,MADGC,eACH,2BADqBN,gBACrB;AACJ,MAAMK,KAAK,GACTC,eAAe,KAAK,IAApB,IAA4BA,eAAe,KAAK,IAAhD,GACIR,MAAM,CAACQ,eAAD,CADV,GAEIA,eAHN;AAKA,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAED;AAAtB,KAA8BD,QAA9B,CAAP;AACD,CAVM;;;AAAMD,K;;AAYb;AACO,IAAMI,eAAyB,GAAG,SAA5BA,eAA4B,QAAkB;AAAA,MAAfH,QAAe,SAAfA,QAAe;AACzD,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAEJ;AAAtB,KAAiCI,QAAjC,CAAP;AACD,CAFM;;;AAAMG,e;;AAIb;AACO,IAAMC,eAAyB,GAAG,SAA5BA,eAA4B,QAAkB;AAAA,MAAfJ,QAAe,SAAfA,QAAe;AACzD,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAEF;AAAtB,KAAiCE,QAAjC,CAAP;AACD,CAFM;;;AAAMI,e;;AAIb;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,GAAwB;AAC9C,MAAMJ,KAAQ,GAAG,uBAAWK,8BAAX,CAAjB;AACA,SAAO;AAAEL,IAAAA,KAAK,EAALA;AAAF,GAAP;AACD,CAHM;AAKP;;;;;AACO,IAAMM,cAAc,GAAG,SAAjBA,cAAiB,QAA+C;AAAA,MAAtCZ,EAAsC,SAAtCA,EAAsC;AAAA,MAAlCE,EAAkC,SAAlCA,EAAkC;;AAC3E,kBAAiCQ,QAAQ,EAAzC;AAAA,kCAAQJ,KAAR;AAAA,MAAQA,KAAR,gCAAgB;AAAEO,IAAAA,EAAE,EAAE;AAAN,GAAhB;;AACA,SAAOP,KAAK,CAACO,EAAN,KAAa,IAAb,GAAoBb,EAApB,GAAyBE,EAAhC;AACD,CAHM;AAKP;;;;;AACO,IAAMY,cAAc,GAAG,SAAjBA,cAAiB,CAC5BC,KAD4B,SAGlB;AAAA,MADRf,EACQ,SADRA,EACQ;AAAA,MADJE,EACI,SADJA,EACI;AACV,qBAAiCa,KAAjC,CAAQT,KAAR;AAAA,MAAQA,KAAR,6BAAgB;AAAEO,IAAAA,EAAE,EAAE;AAAN,GAAhB;AACA,SAAOP,KAAK,CAACO,EAAN,KAAa,IAAb,GAAoBb,EAApB,GAAyBE,EAAhC;AACD,CANM;AAQP;;;;;AACO,IAAMc,SAAS,GAAG,SAAZA,SAAY,CAACV,KAAD,EAAqC;AAC5D,SAAOA,KAAK,CAACO,EAAN,KAAa,IAApB;AACD,CAFM;AAIP;;;;;AACO,IAAMI,SAAS,GAAG,SAAZA,SAAY,CAACX,KAAD,EAAqC;AAC5D,SAAOA,KAAK,CAACO,EAAN,KAAa,IAApB;AACD,CAFM","sourcesContent":["import React, { useContext } from \"react\"\n// FIXME: Upgrading styled-components types to get `ThemeContext` breaks many other typings.\n// Notably: `Icon` and `Sans|Serif`\n// @ts-expect-error  MIGRATE_STRICT_MODE\nimport { ThemeContext, ThemeProvider } from \"styled-components\"\nimport { Theme as TTheme, THEME_V2, THEME_V3, ThemeV2, ThemeV3 } from \"./themes\"\n\nexport { THEME_V2, THEME_V3 } from \"./themes\"\nexport * from \"@artsy/palette-tokens/dist/themes/v2\"\n\nexport { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\n\nconst THEMES = {\n  v2: THEME_V2,\n  v3: THEME_V3,\n}\n\n/**\n * A wrapper component for passing down the Artsy theme context\n */\nexport const Theme: React.FC<{ theme?: TTheme | keyof typeof THEMES }> = ({\n  children,\n  theme: themeOrThemeKey = THEME_V2,\n}) => {\n  const theme =\n    themeOrThemeKey === \"v2\" || themeOrThemeKey === \"v3\"\n      ? THEMES[themeOrThemeKey]\n      : themeOrThemeKey\n\n  return <ThemeProvider theme={theme}>{children}</ThemeProvider>\n}\n\n/** Utilize only the v2 theme */\nexport const ThemeProviderV2: React.FC = ({ children }) => {\n  return <ThemeProvider theme={THEME_V2}>{children}</ThemeProvider>\n}\n\n/** Utilize only the v3 theme */\nexport const ThemeProviderV3: React.FC = ({ children }) => {\n  return <ThemeProvider theme={THEME_V3}>{children}</ThemeProvider>\n}\n\n/** Returns the current theme */\nexport const useTheme = <T extends TTheme>() => {\n  const theme: T = useContext(ThemeContext)\n  return { theme }\n}\n\n/** Returns a config specific to the current theme. For use in React components */\nexport const useThemeConfig = <T, U>({ v2, v3 }: { v2: T; v3: U }): U | T => {\n  const { theme = { id: \"v2\" } } = useTheme()\n  return theme.id === \"v2\" ? v2 : v3\n}\n\n/** Returns a config specific to the current theme. For use in styled-components */\nexport const getThemeConfig = <T, U>(\n  props: Record<string, any>,\n  { v2, v3 }: { v2: T; v3: U }\n): U | T => {\n  const { theme = { id: \"v2\" } } = props\n  return theme.id === \"v2\" ? v2 : v3\n}\n\n/** Typeguard for v2 */\nexport const isThemeV2 = (theme: TTheme): theme is ThemeV2 => {\n  return theme.id === \"v2\"\n}\n\n/** Typeguard for v3 */\nexport const isThemeV3 = (theme: TTheme): theme is ThemeV3 => {\n  return theme.id === \"v3\"\n}\n"],"file":"Theme.js"}
+{"version":3,"sources":["../src/Theme.tsx"],"names":["THEMES","v2","THEME_V2","v3","THEME_V3","Theme","children","theme","themeOrThemeKey","ThemeProviderV2","ThemeProviderV3","useTheme","ThemeContext","useThemeConfig","id","getThemeConfig","props","isThemeV2","isThemeV3"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAIA;;AACA;;AAGA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;;;;;AATA;AACA;AACA;AASA,IAAMA,MAAM,GAAG;AACbC,EAAAA,EAAE,EAAEC,gBADS;AAEbC,EAAAA,EAAE,EAAEC;AAFS,CAAf;;AAUA;AACA;AACA;AACO,IAAMC,KAA2B,GAAG,SAA9BA,KAA8B,OAGrC;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,wBADJC,KACI;AAAA,MADGC,eACH,2BADqBN,gBACrB;AACJ,MAAMK,KAAK,GACTC,eAAe,KAAK,IAApB,IAA4BA,eAAe,KAAK,IAAhD,GACIR,MAAM,CAACQ,eAAD,CADV,GAEIA,eAHN;AAKA,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAED;AAAtB,KAA8BD,QAA9B,CAAP;AACD,CAVM;;;AAAMD,K;;AAYb;AACO,IAAMI,eAAyB,GAAG,SAA5BA,eAA4B,QAAkB;AAAA,MAAfH,QAAe,SAAfA,QAAe;AACzD,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAEJ;AAAtB,KAAiCI,QAAjC,CAAP;AACD,CAFM;;;AAAMG,e;;AAIb;AACO,IAAMC,eAAyB,GAAG,SAA5BA,eAA4B,QAAkB;AAAA,MAAfJ,QAAe,SAAfA,QAAe;AACzD,sBAAO,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAEF;AAAtB,KAAiCE,QAAjC,CAAP;AACD,CAFM;;;AAAMI,e;;AAIb;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,GAAwB;AAC9C,MAAMJ,KAAQ,GAAG,uBAAWK,8BAAX,CAAjB;AACA,SAAO;AAAEL,IAAAA,KAAK,EAALA;AAAF,GAAP;AACD,CAHM;AAKP;;;;;AACO,IAAMM,cAAc,GAAG,SAAjBA,cAAiB,QAA+C;AAAA,MAAtCZ,EAAsC,SAAtCA,EAAsC;AAAA,MAAlCE,EAAkC,SAAlCA,EAAkC;;AAC3E,kBAAiCQ,QAAQ,EAAzC;AAAA,kCAAQJ,KAAR;AAAA,MAAQA,KAAR,gCAAgB;AAAEO,IAAAA,EAAE,EAAE;AAAN,GAAhB;;AACA,SAAOP,KAAK,CAACO,EAAN,KAAa,IAAb,GAAoBb,EAApB,GAAyBE,EAAhC;AACD,CAHM;AAKP;;;;;AACO,IAAMY,cAAc,GAAG,SAAjBA,cAAiB,CAC5BC,KAD4B,SAGlB;AAAA,MADRf,EACQ,SADRA,EACQ;AAAA,MADJE,EACI,SADJA,EACI;AACV,qBAAiCa,KAAjC,CAAQT,KAAR;AAAA,MAAQA,KAAR,6BAAgB;AAAEO,IAAAA,EAAE,EAAE;AAAN,GAAhB;AACA,SAAOP,KAAK,CAACO,EAAN,KAAa,IAAb,GAAoBb,EAApB,GAAyBE,EAAhC;AACD,CANM;AAQP;;;;;AACO,IAAMc,SAAS,GAAG,SAAZA,SAAY,CAACV,KAAD,EAAqC;AAC5D,SAAOA,KAAK,CAACO,EAAN,KAAa,IAApB;AACD,CAFM;AAIP;;;;;AACO,IAAMI,SAAS,GAAG,SAAZA,SAAY,CAACX,KAAD,EAAqC;AAC5D,SAAOA,KAAK,CAACO,EAAN,KAAa,IAApB;AACD,CAFM","sourcesContent":["import React, { useContext } from \"react\"\n// FIXME: Upgrading styled-components types to get `ThemeContext` breaks many other typings.\n// Notably: `Icon` and `Sans|Serif`\n// @ts-expect-error  MIGRATE_STRICT_MODE\nimport { ThemeContext, ThemeProvider } from \"styled-components\"\nimport { Theme as TTheme, THEME_V2, THEME_V3, ThemeV2, ThemeV3 } from \"./themes\"\n\nexport { THEME_V2, THEME_V3 } from \"./themes\"\nexport * from \"@artsy/palette-tokens/dist/themes/v2\"\n\nexport { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\n\nconst THEMES = {\n  v2: THEME_V2,\n  v3: THEME_V3,\n}\n\ninterface ThemeProps {\n  theme?: TTheme | keyof typeof THEMES\n  children?: React.ReactNode\n}\n\n/**\n * A wrapper component for passing down the Artsy theme context\n */\nexport const Theme: React.FC<ThemeProps> = ({\n  children,\n  theme: themeOrThemeKey = THEME_V2,\n}) => {\n  const theme =\n    themeOrThemeKey === \"v2\" || themeOrThemeKey === \"v3\"\n      ? THEMES[themeOrThemeKey]\n      : themeOrThemeKey\n\n  return <ThemeProvider theme={theme}>{children}</ThemeProvider>\n}\n\n/** Utilize only the v2 theme */\nexport const ThemeProviderV2: React.FC = ({ children }) => {\n  return <ThemeProvider theme={THEME_V2}>{children}</ThemeProvider>\n}\n\n/** Utilize only the v3 theme */\nexport const ThemeProviderV3: React.FC = ({ children }) => {\n  return <ThemeProvider theme={THEME_V3}>{children}</ThemeProvider>\n}\n\n/** Returns the current theme */\nexport const useTheme = <T extends TTheme>() => {\n  const theme: T = useContext(ThemeContext)\n  return { theme }\n}\n\n/** Returns a config specific to the current theme. For use in React components */\nexport const useThemeConfig = <T, U>({ v2, v3 }: { v2: T; v3: U }): U | T => {\n  const { theme = { id: \"v2\" } } = useTheme()\n  return theme.id === \"v2\" ? v2 : v3\n}\n\n/** Returns a config specific to the current theme. For use in styled-components */\nexport const getThemeConfig = <T, U>(\n  props: Record<string, any>,\n  { v2, v3 }: { v2: T; v3: U }\n): U | T => {\n  const { theme = { id: \"v2\" } } = props\n  return theme.id === \"v2\" ? v2 : v3\n}\n\n/** Typeguard for v2 */\nexport const isThemeV2 = (theme: TTheme): theme is ThemeV2 => {\n  return theme.id === \"v2\"\n}\n\n/** Typeguard for v3 */\nexport const isThemeV3 = (theme: TTheme): theme is ThemeV3 => {\n  return theme.id === \"v3\"\n}\n"],"file":"Theme.js"}

package/dist/elements/GridColumns/GridColumns.d.ts

@@ -14,6 +14,7 @@ declare type CellProps = ColumnCell & GridColumnProps & BoxProps;
 export declare type ColumnProps = CellProps & {
     /** denotes whether or not to break to a new row after column */
     wrap?: boolean;
+    children?: React.ReactNode;
 };
 /**
  * A column sits within the GridColumns and spans the columns,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/GridColumns/GridColumns.tsx"],"names":["GridColumns","CSSGrid","defaultProps","gridColumnGap","gridRowGap","Cell","Box","gridColumn","Column","span","start","wrap","rest","gridColumnValue","ColumnWrap","map","value","GRID_COLUMN_FULL_WIDTHS","includes"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AASA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,+BAAOC,gBAAP,CAAH;AAAA;AAAA;AAAA,6CAAjB;;AAIPD,WAAW,CAACE,YAAZ,GAA2B;AACzBC,EAAAA,aAAa,EAAE,CAAC,CAAD,EAAI,CAAJ,CADU;AAEzBC,EAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ;AAFa,CAA3B;AAOA,IAAMC,IAAI,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,aACNC,wBADM,CAAV;AAIA;;AAMA;AACA;AACA;AACA;AACO,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,OAKvC;AAAA,MAJJC,IAII,QAJJA,IAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,eAAe,GAAG,oBAAQ,YAAM;AACpC,WAAO,8CAAoB;AAAEJ,MAAAA,IAAI,EAAJA,IAAF;AAAQC,MAAAA,KAAK,EAALA;AAAR,KAApB,CAAP;AACD,GAFuB,EAErB,CAACD,IAAD,EAAOC,KAAP,CAFqB,CAAxB;AAIA,sBACE,yEACE,6BAAC,IAAD;AAAM,IAAA,UAAU,EAAEG;AAAlB,KAAuCD,IAAvC,EADF,EAEGD,IAAI,iBAAI,6BAAC,UAAD;AAAY,IAAA,eAAe,EAAEE;AAA7B,IAFX,CADF;AAMD,CAhBM;;;;AAkBP,IAAMC,UAAmD,GAAG,SAAtDA,UAAsD,QAEtD;AAAA,MADJD,eACI,SADJA,eACI;AACJ,sBACE,6BAAC,IAAD,CACE;AADF;AAEE,IAAA,UAAU,EAAE,CAAC,WAAD,CAFd,CAGE;AACA;AAJF;AAKE,IAAA,OAAO,EAAEA,eAAe,CAACE,GAAhB,CAAoB,UAACC,KAAD,EAAW;AACtC,aAAOC,6CAAwBC,QAAxB,CAAiCF,KAAjC,IAA0C,MAA1C,GAAmD,OAA1D;AACD,KAFQ;AALX,IADF;AAWD,CAdD;;AAAMF,U","sourcesContent":["import React, { useMemo } from \"react\"\nimport styled from \"styled-components\"\nimport { gridColumn, GridColumnProps } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CSSGrid, CSSGridProps } from \"../CSSGrid\"\nimport {\n  calculateGridColumn,\n  ColumnCell,\n  GRID_COLUMN_FULL_WIDTHS,\n} from \"./calculateGridColumn\"\n\n/** GridColumns implements `Box` and the common grid properties */\nexport type GridColumnsProps = Omit<CSSGridProps, \"gridTemplateColumns\">\n\n/**\n * A 12-column fluid grid\n */\nexport const GridColumns = styled(CSSGrid)`\n  grid-template-columns: repeat(12, 1fr);\n`\n\nGridColumns.defaultProps = {\n  gridColumnGap: [1, 2],\n  gridRowGap: [1, 2],\n}\n\ntype CellProps = ColumnCell & GridColumnProps & BoxProps\n\nconst Cell = styled(Box)<CellProps>`\n  ${gridColumn}\n`\n\n/** Column implements `Box` and `gridColumn` */\nexport type ColumnProps = CellProps & {\n  /** denotes whether or not to break to a new row after column */\n  wrap?: boolean\n}\n\n/**\n * A column sits within the GridColumns and spans the columns,\n * sitting between gutters.\n */\nexport const Column: React.FC<ColumnProps> = ({\n  span,\n  start,\n  wrap,\n  ...rest\n}) => {\n  const gridColumnValue = useMemo(() => {\n    return calculateGridColumn({ span, start })\n  }, [span, start])\n\n  return (\n    <>\n      <Cell gridColumn={gridColumnValue} {...rest} />\n      {wrap && <ColumnWrap gridColumnValue={gridColumnValue} />}\n    </>\n  )\n}\n\nconst ColumnWrap: React.FC<{ gridColumnValue: string[] }> = ({\n  gridColumnValue,\n}) => {\n  return (\n    <Cell\n      // Spans the remainder of the columns until the end\n      gridColumn={[\"auto / -1\"]}\n      // Hides the break if the value presented is going to span the full\n      // width of the column anyway. Prevents duplicated row gaps.\n      display={gridColumnValue.map((value) => {\n        return GRID_COLUMN_FULL_WIDTHS.includes(value) ? \"none\" : \"block\"\n      })}\n    />\n  )\n}\n"],"file":"GridColumns.js"}
+{"version":3,"sources":["../../../src/elements/GridColumns/GridColumns.tsx"],"names":["GridColumns","CSSGrid","defaultProps","gridColumnGap","gridRowGap","Cell","Box","gridColumn","Column","span","start","wrap","rest","gridColumnValue","ColumnWrap","map","value","GRID_COLUMN_FULL_WIDTHS","includes"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AASA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,+BAAOC,gBAAP,CAAH;AAAA;AAAA;AAAA,6CAAjB;;AAIPD,WAAW,CAACE,YAAZ,GAA2B;AACzBC,EAAAA,aAAa,EAAE,CAAC,CAAD,EAAI,CAAJ,CADU;AAEzBC,EAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ;AAFa,CAA3B;AAOA,IAAMC,IAAI,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,aACNC,wBADM,CAAV;AAIA;;AAOA;AACA;AACA;AACA;AACO,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,OAKvC;AAAA,MAJJC,IAII,QAJJA,IAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,eAAe,GAAG,oBAAQ,YAAM;AACpC,WAAO,8CAAoB;AAAEJ,MAAAA,IAAI,EAAJA,IAAF;AAAQC,MAAAA,KAAK,EAALA;AAAR,KAApB,CAAP;AACD,GAFuB,EAErB,CAACD,IAAD,EAAOC,KAAP,CAFqB,CAAxB;AAIA,sBACE,yEACE,6BAAC,IAAD;AAAM,IAAA,UAAU,EAAEG;AAAlB,KAAuCD,IAAvC,EADF,EAEGD,IAAI,iBAAI,6BAAC,UAAD;AAAY,IAAA,eAAe,EAAEE;AAA7B,IAFX,CADF;AAMD,CAhBM;;;;AAkBP,IAAMC,UAAmD,GAAG,SAAtDA,UAAsD,QAEtD;AAAA,MADJD,eACI,SADJA,eACI;AACJ,sBACE,6BAAC,IAAD,CACE;AADF;AAEE,IAAA,UAAU,EAAE,CAAC,WAAD,CAFd,CAGE;AACA;AAJF;AAKE,IAAA,OAAO,EAAEA,eAAe,CAACE,GAAhB,CAAoB,UAACC,KAAD,EAAW;AACtC,aAAOC,6CAAwBC,QAAxB,CAAiCF,KAAjC,IAA0C,MAA1C,GAAmD,OAA1D;AACD,KAFQ;AALX,IADF;AAWD,CAdD;;AAAMF,U","sourcesContent":["import React, { useMemo } from \"react\"\nimport styled from \"styled-components\"\nimport { gridColumn, GridColumnProps } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CSSGrid, CSSGridProps } from \"../CSSGrid\"\nimport {\n  calculateGridColumn,\n  ColumnCell,\n  GRID_COLUMN_FULL_WIDTHS,\n} from \"./calculateGridColumn\"\n\n/** GridColumns implements `Box` and the common grid properties */\nexport type GridColumnsProps = Omit<CSSGridProps, \"gridTemplateColumns\">\n\n/**\n * A 12-column fluid grid\n */\nexport const GridColumns = styled(CSSGrid)`\n  grid-template-columns: repeat(12, 1fr);\n`\n\nGridColumns.defaultProps = {\n  gridColumnGap: [1, 2],\n  gridRowGap: [1, 2],\n}\n\ntype CellProps = ColumnCell & GridColumnProps & BoxProps\n\nconst Cell = styled(Box)<CellProps>`\n  ${gridColumn}\n`\n\n/** Column implements `Box` and `gridColumn` */\nexport type ColumnProps = CellProps & {\n  /** denotes whether or not to break to a new row after column */\n  wrap?: boolean\n  children?: React.ReactNode\n}\n\n/**\n * A column sits within the GridColumns and spans the columns,\n * sitting between gutters.\n */\nexport const Column: React.FC<ColumnProps> = ({\n  span,\n  start,\n  wrap,\n  ...rest\n}) => {\n  const gridColumnValue = useMemo(() => {\n    return calculateGridColumn({ span, start })\n  }, [span, start])\n\n  return (\n    <>\n      <Cell gridColumn={gridColumnValue} {...rest} />\n      {wrap && <ColumnWrap gridColumnValue={gridColumnValue} />}\n    </>\n  )\n}\n\nconst ColumnWrap: React.FC<{ gridColumnValue: string[] }> = ({\n  gridColumnValue,\n}) => {\n  return (\n    <Cell\n      // Spans the remainder of the columns until the end\n      gridColumn={[\"auto / -1\"]}\n      // Hides the break if the value presented is going to span the full\n      // width of the column anyway. Prevents duplicated row gaps.\n      display={gridColumnValue.map((value) => {\n        return GRID_COLUMN_FULL_WIDTHS.includes(value) ? \"none\" : \"block\"\n      })}\n    />\n  )\n}\n"],"file":"GridColumns.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "24.3.0",
+  "version": "24.3.1",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -176,5 +176,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "74a46cea62eb97d96641fe0ce03836a787067dd8"
+  "gitHead": "1c08bb34d557403aa01717833722c8c6a36e389b"
 }