@artsy/palette 46.8.0 → 46.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { GridColumnProps } from "styled-system";
2
+ import { GridColumnProps, GridColumnGapProps, GridRowGapProps, ResponsiveValue } from "styled-system";
3
3
  import { BoxProps } from "../Box";
4
4
  import { CSSGridProps } from "../CSSGrid";
5
5
  import { ColumnCell } from "./calculateGridColumn";
@@ -14,8 +14,12 @@ export declare const GridColumns: import("styled-components/dist/types").IStyled
14
14
  ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
15
15
  }, keyof CSSGridProps> & CSSGridProps>, GridColumnsProps>, GridColumnsProps>> & string;
16
16
  type CellProps = ColumnCell & GridColumnProps & BoxProps;
17
+ interface GapProps {
18
+ columnGap?: ResponsiveValue<string | number>;
19
+ rowGap?: ResponsiveValue<string | number>;
20
+ }
17
21
  /** Column implements `Box` and `gridColumn` */
18
- export type ColumnProps = CellProps & {
22
+ export type ColumnProps = CellProps & GridColumnGapProps & GridRowGapProps & GapProps & {
19
23
  /** denotes whether or not to break to a new row after column */
20
24
  wrap?: boolean;
21
25
  /** renders the column as a subgrid, inheriting parent grid tracks */
@@ -30,10 +30,20 @@ const Cell = (0, _styledComponents.default)(_Box.Box).withConfig({
30
30
  displayName: "GridColumns__Cell",
31
31
  componentId: "sc-1g9p6xx-1"
32
32
  })(["", ""], _styledSystem.gridColumn);
33
+ const gapProps = (0, _styledSystem.system)({
34
+ columnGap: {
35
+ property: "columnGap",
36
+ scale: "space"
37
+ },
38
+ rowGap: {
39
+ property: "rowGap",
40
+ scale: "space"
41
+ }
42
+ });
33
43
  const SubgridCell = (0, _styledComponents.default)(Cell).withConfig({
34
44
  displayName: "GridColumns__SubgridCell",
35
45
  componentId: "sc-1g9p6xx-2"
36
- })(["display:grid;grid-template-columns:subgrid;"]);
46
+ })(["display:grid;grid-template-columns:subgrid;", " ", " ", ""], _styledSystem.gridColumnGap, _styledSystem.gridRowGap, gapProps);
37
47
 
38
48
  /** Column implements `Box` and `gridColumn` */
39
49
 
@@ -1 +1 @@
1
- {"version":3,"file":"GridColumns.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styledSystem","_Box","_CSSGrid","_calculateGridColumn","_jsxRuntime","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","GridColumns","exports","styled","CSSGrid","attrs","props","gridColumnGap","gridRowGap","withConfig","displayName","componentId","Cell","Box","gridColumn","SubgridCell","Column","span","start","wrap","subgrid","rest","gridColumnValue","useMemo","calculateGridColumn","Component","jsxs","Fragment","children","jsx","ColumnWrap","display","map","value","GRID_COLUMN_FULL_WIDTHS","includes"],"sources":["../../../../src/elements/GridColumns/GridColumns.tsx"],"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).attrs<GridColumnsProps>((props) => ({\n gridColumnGap: props.gridColumnGap ?? [1, 2],\n gridRowGap: props.gridRowGap ?? [1, 2],\n}))<GridColumnsProps>`\n grid-template-columns: repeat(12, 1fr);\n`\n\ntype CellProps = ColumnCell & GridColumnProps & BoxProps\n\nconst Cell = styled(Box)<CellProps>`\n ${gridColumn}\n`\n\nconst SubgridCell = styled(Cell)`\n display: grid;\n grid-template-columns: subgrid;\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 /** renders the column as a subgrid, inheriting parent grid tracks */\n subgrid?: 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<React.PropsWithChildren<ColumnProps>> = ({\n span,\n start,\n wrap,\n subgrid,\n ...rest\n}) => {\n const gridColumnValue = useMemo(() => {\n return calculateGridColumn({ span, start })\n }, [span, start])\n\n const Component = subgrid ? SubgridCell : Cell\n\n return (\n <>\n <Component gridColumn={gridColumnValue} {...rest} />\n {wrap && <ColumnWrap gridColumnValue={gridColumnValue} />}\n </>\n )\n}\n\nconst ColumnWrap: React.FC<React.PropsWithChildren<{ 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"],"mappings":"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"}
1
+ {"version":3,"file":"GridColumns.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styledSystem","_Box","_CSSGrid","_calculateGridColumn","_jsxRuntime","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","GridColumns","exports","styled","CSSGrid","attrs","props","gridColumnGap","gridRowGap","withConfig","displayName","componentId","Cell","Box","gridColumn","gapProps","system","columnGap","property","scale","rowGap","SubgridCell","Column","span","start","wrap","subgrid","rest","gridColumnValue","useMemo","calculateGridColumn","Component","jsxs","Fragment","children","jsx","ColumnWrap","display","map","value","GRID_COLUMN_FULL_WIDTHS","includes"],"sources":["../../../../src/elements/GridColumns/GridColumns.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport styled from \"styled-components\"\nimport {\n gridColumn,\n GridColumnProps,\n gridColumnGap,\n GridColumnGapProps,\n gridRowGap,\n GridRowGapProps,\n ResponsiveValue,\n system,\n} 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).attrs<GridColumnsProps>((props) => ({\n gridColumnGap: props.gridColumnGap ?? [1, 2],\n gridRowGap: props.gridRowGap ?? [1, 2],\n}))<GridColumnsProps>`\n grid-template-columns: repeat(12, 1fr);\n`\n\ntype CellProps = ColumnCell & GridColumnProps & BoxProps\n\nconst Cell = styled(Box)<CellProps>`\n ${gridColumn}\n`\n\nconst gapProps = system({\n columnGap: { property: \"columnGap\", scale: \"space\" },\n rowGap: { property: \"rowGap\", scale: \"space\" },\n})\n\ninterface GapProps {\n columnGap?: ResponsiveValue<string | number>\n rowGap?: ResponsiveValue<string | number>\n}\n\ntype SubgridCellProps = CellProps & GridColumnGapProps & GridRowGapProps & GapProps\n\nconst SubgridCell = styled(Cell)<SubgridCellProps>`\n display: grid;\n grid-template-columns: subgrid;\n ${gridColumnGap}\n ${gridRowGap}\n ${gapProps}\n`\n\n/** Column implements `Box` and `gridColumn` */\nexport type ColumnProps = CellProps &\n GridColumnGapProps &\n GridRowGapProps &\n GapProps & {\n /** denotes whether or not to break to a new row after column */\n wrap?: boolean\n /** renders the column as a subgrid, inheriting parent grid tracks */\n subgrid?: 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<React.PropsWithChildren<ColumnProps>> = ({\n span,\n start,\n wrap,\n subgrid,\n ...rest\n}) => {\n const gridColumnValue = useMemo(() => {\n return calculateGridColumn({ span, start })\n }, [span, start])\n\n const Component = subgrid ? SubgridCell : Cell\n\n return (\n <>\n <Component gridColumn={gridColumnValue} {...rest} />\n {wrap && <ColumnWrap gridColumnValue={gridColumnValue} />}\n </>\n )\n}\n\nconst ColumnWrap: React.FC<React.PropsWithChildren<{ 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"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import React, { useMemo } from "react";
2
2
  import styled from "styled-components";
3
- import { gridColumn } from "styled-system";
3
+ import { gridColumn, gridColumnGap, gridRowGap, system } from "styled-system";
4
4
  import { Box } from "../Box";
5
5
  import { CSSGrid } from "../CSSGrid";
6
6
  import { calculateGridColumn, GRID_COLUMN_FULL_WIDTHS } from "./calculateGridColumn";
@@ -21,10 +21,20 @@ const Cell = styled(Box).withConfig({
21
21
  displayName: "GridColumns__Cell",
22
22
  componentId: "sc-1g9p6xx-1"
23
23
  })(["", ""], gridColumn);
24
+ const gapProps = system({
25
+ columnGap: {
26
+ property: "columnGap",
27
+ scale: "space"
28
+ },
29
+ rowGap: {
30
+ property: "rowGap",
31
+ scale: "space"
32
+ }
33
+ });
24
34
  const SubgridCell = styled(Cell).withConfig({
25
35
  displayName: "GridColumns__SubgridCell",
26
36
  componentId: "sc-1g9p6xx-2"
27
- })(["display:grid;grid-template-columns:subgrid;"]);
37
+ })(["display:grid;grid-template-columns:subgrid;", " ", " ", ""], gridColumnGap, gridRowGap, gapProps);
28
38
 
29
39
  /** Column implements `Box` and `gridColumn` */
30
40
 
@@ -1 +1 @@
1
- {"version":3,"file":"GridColumns.js","names":["React","useMemo","styled","gridColumn","Box","CSSGrid","calculateGridColumn","GRID_COLUMN_FULL_WIDTHS","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","GridColumns","attrs","props","gridColumnGap","gridRowGap","withConfig","displayName","componentId","Cell","SubgridCell","Column","span","start","wrap","subgrid","rest","gridColumnValue","Component","children","ColumnWrap","display","map","value","includes"],"sources":["../../../../src/elements/GridColumns/GridColumns.tsx"],"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).attrs<GridColumnsProps>((props) => ({\n gridColumnGap: props.gridColumnGap ?? [1, 2],\n gridRowGap: props.gridRowGap ?? [1, 2],\n}))<GridColumnsProps>`\n grid-template-columns: repeat(12, 1fr);\n`\n\ntype CellProps = ColumnCell & GridColumnProps & BoxProps\n\nconst Cell = styled(Box)<CellProps>`\n ${gridColumn}\n`\n\nconst SubgridCell = styled(Cell)`\n display: grid;\n grid-template-columns: subgrid;\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 /** renders the column as a subgrid, inheriting parent grid tracks */\n subgrid?: 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<React.PropsWithChildren<ColumnProps>> = ({\n span,\n start,\n wrap,\n subgrid,\n ...rest\n}) => {\n const gridColumnValue = useMemo(() => {\n return calculateGridColumn({ span, start })\n }, [span, start])\n\n const Component = subgrid ? SubgridCell : Cell\n\n return (\n <>\n <Component gridColumn={gridColumnValue} {...rest} />\n {wrap && <ColumnWrap gridColumnValue={gridColumnValue} />}\n </>\n )\n}\n\nconst ColumnWrap: React.FC<React.PropsWithChildren<{ 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"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,UAAU,QAAyB,eAAe;AAC3D,SAASC,GAAG;AACZ,SAASC,OAAO;AAChB,SACEC,mBAAmB,EAEnBC,uBAAuB;;AAGzB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAGA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,GAAGZ,MAAM,CAACG,OAAO,CAAC,CAACU,KAAK,CAAoBC,KAAK,KAAM;EAC7EC,aAAa,EAAED,KAAK,CAACC,aAAa,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;EAC5CC,UAAU,EAAEF,KAAK,CAACE,UAAU,IAAI,CAAC,CAAC,EAAE,CAAC;AACvC,CAAC,CAAC,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6CAEF;AAID,MAAMC,IAAI,GAAGpB,MAAM,CAACE,GAAG,CAAC,CAAAe,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACpBlB,UAAU,CACb;AAED,MAAMoB,WAAW,GAAGrB,MAAM,CAACoB,IAAI,CAAC,CAAAH,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mDAG/B;;AAED;;AASA;AACA;AACA;AACA;AACA,OAAO,MAAMG,MAAsD,GAAGA,CAAC;EACrEC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,OAAO;EACP,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,eAAe,GAAG7B,OAAO,CAAC,MAAM;IACpC,OAAOK,mBAAmB,CAAC;MAAEmB,IAAI;MAAEC;IAAM,CAAC,CAAC;EAC7C,CAAC,EAAE,CAACD,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEjB,MAAMK,SAAS,GAAGH,OAAO,GAAGL,WAAW,GAAGD,IAAI;EAE9C,oBACET,KAAA,CAAAF,SAAA;IAAAqB,QAAA,gBACEvB,IAAA,CAACsB,SAAS;MAAC5B,UAAU,EAAE2B,eAAgB;MAAA,GAAKD;IAAI,EAAI,EACnDF,IAAI,iBAAIlB,IAAA,CAACwB,UAAU;MAACH,eAAe,EAAEA;IAAgB,EAAG;EAAA,EACxD;AAEP,CAAC;AAED,MAAMG,UAA4E,GAAGA,CAAC;EACpFH;AACF,CAAC,KAAK;EACJ,oBACErB,IAAA,CAACa;EACC;EAAA;IACAnB,UAAU,EAAE,CAAC,WAAW;IACxB;IACA;IAAA;IACA+B,OAAO,EAAEJ,eAAe,CAACK,GAAG,CAAEC,KAAK,IAAK;MACtC,OAAO7B,uBAAuB,CAAC8B,QAAQ,CAACD,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO;IACnE,CAAC;EAAE,EACH;AAEN,CAAC;AAdKH,UAA4E,CAAAb,WAAA"}
1
+ {"version":3,"file":"GridColumns.js","names":["React","useMemo","styled","gridColumn","gridColumnGap","gridRowGap","system","Box","CSSGrid","calculateGridColumn","GRID_COLUMN_FULL_WIDTHS","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","GridColumns","attrs","props","withConfig","displayName","componentId","Cell","gapProps","columnGap","property","scale","rowGap","SubgridCell","Column","span","start","wrap","subgrid","rest","gridColumnValue","Component","children","ColumnWrap","display","map","value","includes"],"sources":["../../../../src/elements/GridColumns/GridColumns.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport styled from \"styled-components\"\nimport {\n gridColumn,\n GridColumnProps,\n gridColumnGap,\n GridColumnGapProps,\n gridRowGap,\n GridRowGapProps,\n ResponsiveValue,\n system,\n} 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).attrs<GridColumnsProps>((props) => ({\n gridColumnGap: props.gridColumnGap ?? [1, 2],\n gridRowGap: props.gridRowGap ?? [1, 2],\n}))<GridColumnsProps>`\n grid-template-columns: repeat(12, 1fr);\n`\n\ntype CellProps = ColumnCell & GridColumnProps & BoxProps\n\nconst Cell = styled(Box)<CellProps>`\n ${gridColumn}\n`\n\nconst gapProps = system({\n columnGap: { property: \"columnGap\", scale: \"space\" },\n rowGap: { property: \"rowGap\", scale: \"space\" },\n})\n\ninterface GapProps {\n columnGap?: ResponsiveValue<string | number>\n rowGap?: ResponsiveValue<string | number>\n}\n\ntype SubgridCellProps = CellProps & GridColumnGapProps & GridRowGapProps & GapProps\n\nconst SubgridCell = styled(Cell)<SubgridCellProps>`\n display: grid;\n grid-template-columns: subgrid;\n ${gridColumnGap}\n ${gridRowGap}\n ${gapProps}\n`\n\n/** Column implements `Box` and `gridColumn` */\nexport type ColumnProps = CellProps &\n GridColumnGapProps &\n GridRowGapProps &\n GapProps & {\n /** denotes whether or not to break to a new row after column */\n wrap?: boolean\n /** renders the column as a subgrid, inheriting parent grid tracks */\n subgrid?: 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<React.PropsWithChildren<ColumnProps>> = ({\n span,\n start,\n wrap,\n subgrid,\n ...rest\n}) => {\n const gridColumnValue = useMemo(() => {\n return calculateGridColumn({ span, start })\n }, [span, start])\n\n const Component = subgrid ? SubgridCell : Cell\n\n return (\n <>\n <Component gridColumn={gridColumnValue} {...rest} />\n {wrap && <ColumnWrap gridColumnValue={gridColumnValue} />}\n </>\n )\n}\n\nconst ColumnWrap: React.FC<React.PropsWithChildren<{ 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"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SACEC,UAAU,EAEVC,aAAa,EAEbC,UAAU,EAGVC,MAAM,QACD,eAAe;AACtB,SAASC,GAAG;AACZ,SAASC,OAAO;AAChB,SACEC,mBAAmB,EAEnBC,uBAAuB;;AAGzB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAGA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,GAAGf,MAAM,CAACM,OAAO,CAAC,CAACU,KAAK,CAAoBC,KAAK,KAAM;EAC7Ef,aAAa,EAAEe,KAAK,CAACf,aAAa,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;EAC5CC,UAAU,EAAEc,KAAK,CAACd,UAAU,IAAI,CAAC,CAAC,EAAE,CAAC;AACvC,CAAC,CAAC,CAAC,CAAAe,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6CAEF;AAID,MAAMC,IAAI,GAAGrB,MAAM,CAACK,GAAG,CAAC,CAAAa,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACpBnB,UAAU,CACb;AAED,MAAMqB,QAAQ,GAAGlB,MAAM,CAAC;EACtBmB,SAAS,EAAE;IAAEC,QAAQ,EAAE,WAAW;IAAEC,KAAK,EAAE;EAAQ,CAAC;EACpDC,MAAM,EAAE;IAAEF,QAAQ,EAAE,QAAQ;IAAEC,KAAK,EAAE;EAAQ;AAC/C,CAAC,CAAC;AASF,MAAME,WAAW,GAAG3B,MAAM,CAACqB,IAAI,CAAC,CAAAH,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kEAG5BlB,aAAa,EACbC,UAAU,EACVmB,QAAQ,CACX;;AAED;;AAYA;AACA;AACA;AACA;AACA,OAAO,MAAMM,MAAsD,GAAGA,CAAC;EACrEC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,OAAO;EACP,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,eAAe,GAAGnC,OAAO,CAAC,MAAM;IACpC,OAAOQ,mBAAmB,CAAC;MAAEsB,IAAI;MAAEC;IAAM,CAAC,CAAC;EAC7C,CAAC,EAAE,CAACD,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEjB,MAAMK,SAAS,GAAGH,OAAO,GAAGL,WAAW,GAAGN,IAAI;EAE9C,oBACEP,KAAA,CAAAF,SAAA;IAAAwB,QAAA,gBACE1B,IAAA,CAACyB,SAAS;MAAClC,UAAU,EAAEiC,eAAgB;MAAA,GAAKD;IAAI,EAAI,EACnDF,IAAI,iBAAIrB,IAAA,CAAC2B,UAAU;MAACH,eAAe,EAAEA;IAAgB,EAAG;EAAA,EACxD;AAEP,CAAC;AAED,MAAMG,UAA4E,GAAGA,CAAC;EACpFH;AACF,CAAC,KAAK;EACJ,oBACExB,IAAA,CAACW;EACC;EAAA;IACApB,UAAU,EAAE,CAAC,WAAW;IACxB;IACA;IAAA;IACAqC,OAAO,EAAEJ,eAAe,CAACK,GAAG,CAAEC,KAAK,IAAK;MACtC,OAAOhC,uBAAuB,CAACiC,QAAQ,CAACD,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO;IACnE,CAAC;EAAE,EACH;AAEN,CAAC;AAdKH,UAA4E,CAAAlB,WAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@artsy/palette",
3
- "version": "46.8.0",
3
+ "version": "46.9.0",
4
4
  "description": "Design system library for react components",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -205,5 +205,5 @@
205
205
  "url": "http://localhost"
206
206
  }
207
207
  },
208
- "gitHead": "441af422924542a8550a7626a1a80dadaa3859ad"
208
+ "gitHead": "7977ae63841e9265861c6706ef043795735d76fd"
209
209
  }