@artsy/palette 46.3.0 → 46.4.0

package/dist/cjs/elements/BaseTabs/BaseTab.d.ts

@@ -17,9 +17,24 @@ export type BaseTabProps<C extends React.ComponentType<React.PropsWithChildren<u
  * E.g.: `<BaseTab as={RouterLink} to="/foo">Foo</BaseTab>`
  * or `<BaseTab as={Clickable} onClick={handleClick}>Foo</BaseTab>`
  */
-export declare const BaseTab: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, "ref"> & {
+export declare const BaseTab: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, "ref"> & {
     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;
-}, "p" | "top" | "bottom" | "left" | "right" | "position" | "padding" | "width" | "height" | "gap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "textAlign" | "textTransform" | "verticalAlign" | "zIndex" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "lineClamp" | "margin" | "overflow" | "bg" | "borderX" | "borderY" | "size" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "textColor" | "variant" | "hyphenate" | "overflowEllipsis"> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+}, Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, "ref"> & {
+    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;
+}>, TextProps>, "p" | "top" | "bottom" | "left" | "right" | "position" | "padding" | "width" | "height" | "gap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "textAlign" | "textTransform" | "verticalAlign" | "zIndex" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "lineClamp" | "margin" | "overflow" | "bg" | "borderX" | "borderY" | "size" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "textColor" | "variant" | "hyphenate" | "overflowEllipsis"> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    variant?: import("styled-system").ResponsiveValue<import("@artsy/palette-tokens/dist/typography/v3").TextVariant>;
+    textColor?: import("styled-system").ResponsiveValue<import("@artsy/palette-tokens").Color>;
+    lineClamp?: number;
+} & import("..").BoxProps & {
+    hyphenate?: boolean;
+    overflowEllipsis?: boolean;
+    textTransform?: import("styled-system").ResponsiveValue<import("../Text").TextTransform>;
+    lineClamp?: import("styled-system").ResponsiveValue<number>;
+}, import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, "ref"> & {
+    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;
+}, Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, "ref"> & {
+    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;
+}>, TextProps>, "p" | "top" | "bottom" | "left" | "right" | "position" | "padding" | "width" | "height" | "gap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "textAlign" | "textTransform" | "verticalAlign" | "zIndex" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "lineClamp" | "margin" | "overflow" | "bg" | "borderX" | "borderY" | "size" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "textColor" | "variant" | "hyphenate" | "overflowEllipsis"> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
     variant?: import("styled-system").ResponsiveValue<import("@artsy/palette-tokens/dist/typography/v3").TextVariant>;
     textColor?: import("styled-system").ResponsiveValue<import("@artsy/palette-tokens").Color>;
     lineClamp?: number;
@@ -28,4 +43,4 @@ export declare const BaseTab: import("styled-components/dist/types").IStyledComp
     overflowEllipsis?: boolean;
     textTransform?: import("styled-system").ResponsiveValue<import("../Text").TextTransform>;
     lineClamp?: import("styled-system").ResponsiveValue<number>;
-}, BaseTabProps<any>>> & string;
+}>, BaseTabProps<any>>, BaseTabProps<any>>> & string;

package/dist/cjs/elements/BaseTabs/BaseTab.js

@@ -22,19 +22,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * E.g.: `<BaseTab as={RouterLink} to="/foo">Foo</BaseTab>`
  * or `<BaseTab as={Clickable} onClick={handleClick}>Foo</BaseTab>`
  */
-const BaseTab = exports.BaseTab = (0, _styledComponents.default)(_Text.Text).withConfig({
+const BaseTab = exports.BaseTab = (0, _styledComponents.default)(_Text.Text).attrs(props => ({
+  variant: props.variant ?? "sm",
+  mb: props.mb ?? "-1px",
+  alignItems: props.alignItems ?? "flex-start",
+  justifyContent: props.justifyContent ?? "center",
+  textAlign: props.textAlign ?? "center"
+})).withConfig({
   displayName: "BaseTab",
   componentId: "sc-1qn17bx-0"
 })(["display:flex;width:100%;position:relative;text-decoration:none;white-space:nowrap;z-index:1;", ""], props => {
   return (0, _styledComponents.css)(["", " ", " ", " ", " &:hover:not(:disabled){", "}&:focus{outline:0;", "}"], _tokens.STATES.default, props.hover && _tokens.STATES.hover, props.focus && _tokens.STATES.focus, props.active && _tokens.STATES.active, _tokens.STATES.hover, _tokens.STATES.focus);
 });
-BaseTab.defaultProps = {
-  variant: "sm",
-  mb: "-1px",
-  alignItems: "flex-start",
-  justifyContent: "center",
-  textAlign: "center"
-};
 BaseTab.displayName = "BaseTab";
 
 /**

package/dist/cjs/elements/BaseTabs/BaseTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTab.js","names":["_styledComponents","_interopRequireWildcard","require","_Clickable","_Text","_tokens","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","BaseTab","exports","styled","Text","withConfig","displayName","componentId","props","css","STATES","hover","focus","active","defaultProps","variant","mb","alignItems","justifyContent","textAlign","__Ignore__","Clickable"],"sources":["../../../../src/elements/BaseTabs/BaseTab.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Clickable } from \"../Clickable\"\nimport { Text, TextProps } from \"../Text\"\nimport { STATES } from \"./tokens\"\n\n/**\n * Utilize as=\"a\" or as={Component} to alter functionality\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type BaseTabProps<C extends React.ComponentType<React.PropsWithChildren<unknown>> = any> = TextProps & {\n  active?: boolean\n  focus?: boolean\n  hover?: boolean\n} & React.ComponentPropsWithoutRef<C> & { as?: C }\n\n/**\n * Extends `Text`. Should always be nested within a `BaseTabs` container.\n *\n * Use the `as` prop to alter behavior.\n * E.g.: `<BaseTab as={RouterLink} to=\"/foo\">Foo</BaseTab>`\n * or `<BaseTab as={Clickable} onClick={handleClick}>Foo</BaseTab>`\n */\nexport const BaseTab = styled(Text)<BaseTabProps>`\n  display: flex;\n  width: 100%;\n  position: relative;\n  text-decoration: none;\n  white-space: nowrap;\n  z-index: 1;\n\n  ${(props) => {\n    return css`\n      ${STATES.default}\n      ${props.hover && STATES.hover}\n      ${props.focus && STATES.focus}\n      ${props.active && STATES.active}\n\n      &:hover:not(:disabled) {\n        ${STATES.hover}\n      }\n\n      &:focus {\n        outline: 0;\n        ${STATES.focus}\n      }\n    `\n  }}\n`\n\nBaseTab.defaultProps = {\n  variant: \"sm\",\n  mb: \"-1px\",\n  alignItems: \"flex-start\",\n  justifyContent: \"center\",\n  textAlign: \"center\",\n}\n\nBaseTab.displayName = \"BaseTab\"\n\n/**\n * So this is interesting: We can trick styled-components into correcting the CSS specificity (Text > Clickable)\n * by simply including a Clickable here.\n */\n// @ts-expect-error  MIGRATE_STRICT_MODE\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst __Ignore__ = Clickable\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAAiC,SAAAI,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAN,wBAAAU,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAEjC;AACA;AACA;AACA;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMW,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,yBAAM,EAACC,UAAI,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yGAQ9BC,KAAK,IAAK;EACX,WAAOC,qBAAG,+EACNC,cAAM,CAACxB,OAAO,EACdsB,KAAK,CAACG,KAAK,IAAID,cAAM,CAACC,KAAK,EAC3BH,KAAK,CAACI,KAAK,IAAIF,cAAM,CAACE,KAAK,EAC3BJ,KAAK,CAACK,MAAM,IAAIH,cAAM,CAACG,MAAM,EAG3BH,cAAM,CAACC,KAAK,EAKZD,cAAM,CAACE,KAAK;AAGpB,CAAC,CACF;AAEDX,OAAO,CAACa,YAAY,GAAG;EACrBC,OAAO,EAAE,IAAI;EACbC,EAAE,EAAE,MAAM;EACVC,UAAU,EAAE,YAAY;EACxBC,cAAc,EAAE,QAAQ;EACxBC,SAAS,EAAE;AACb,CAAC;AAEDlB,OAAO,CAACK,WAAW,GAAG,SAAS;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA,MAAMc,UAAU,GAAGC,oBAAS"}
+{"version":3,"file":"BaseTab.js","names":["_styledComponents","_interopRequireWildcard","require","_Clickable","_Text","_tokens","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","BaseTab","exports","styled","Text","attrs","props","variant","mb","alignItems","justifyContent","textAlign","withConfig","displayName","componentId","css","STATES","hover","focus","active","__Ignore__","Clickable"],"sources":["../../../../src/elements/BaseTabs/BaseTab.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Clickable } from \"../Clickable\"\nimport { Text, TextProps } from \"../Text\"\nimport { STATES } from \"./tokens\"\n\n/**\n * Utilize as=\"a\" or as={Component} to alter functionality\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type BaseTabProps<C extends React.ComponentType<React.PropsWithChildren<unknown>> = any> = TextProps & {\n  active?: boolean\n  focus?: boolean\n  hover?: boolean\n} & React.ComponentPropsWithoutRef<C> & { as?: C }\n\n/**\n * Extends `Text`. Should always be nested within a `BaseTabs` container.\n *\n * Use the `as` prop to alter behavior.\n * E.g.: `<BaseTab as={RouterLink} to=\"/foo\">Foo</BaseTab>`\n * or `<BaseTab as={Clickable} onClick={handleClick}>Foo</BaseTab>`\n */\nexport const BaseTab = styled(Text).attrs<BaseTabProps>((props) => ({\n  variant: props.variant ?? \"sm\",\n  mb: props.mb ?? \"-1px\",\n  alignItems: props.alignItems ?? \"flex-start\",\n  justifyContent: props.justifyContent ?? \"center\",\n  textAlign: props.textAlign ?? \"center\",\n}))<BaseTabProps>`\n  display: flex;\n  width: 100%;\n  position: relative;\n  text-decoration: none;\n  white-space: nowrap;\n  z-index: 1;\n\n  ${(props) => {\n    return css`\n      ${STATES.default}\n      ${props.hover && STATES.hover}\n      ${props.focus && STATES.focus}\n      ${props.active && STATES.active}\n\n      &:hover:not(:disabled) {\n        ${STATES.hover}\n      }\n\n      &:focus {\n        outline: 0;\n        ${STATES.focus}\n      }\n    `\n  }}\n`\n\nBaseTab.displayName = \"BaseTab\"\n\n/**\n * So this is interesting: We can trick styled-components into correcting the CSS specificity (Text > Clickable)\n * by simply including a Clickable here.\n */\n// @ts-expect-error  MIGRATE_STRICT_MODE\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst __Ignore__ = Clickable\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAAiC,SAAAI,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAN,wBAAAU,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAEjC;AACA;AACA;AACA;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMW,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,yBAAM,EAACC,UAAI,CAAC,CAACC,KAAK,CAAgBC,KAAK,KAAM;EAClEC,OAAO,EAAED,KAAK,CAACC,OAAO,IAAI,IAAI;EAC9BC,EAAE,EAAEF,KAAK,CAACE,EAAE,IAAI,MAAM;EACtBC,UAAU,EAAEH,KAAK,CAACG,UAAU,IAAI,YAAY;EAC5CC,cAAc,EAAEJ,KAAK,CAACI,cAAc,IAAI,QAAQ;EAChDC,SAAS,EAAEL,KAAK,CAACK,SAAS,IAAI;AAChC,CAAC,CAAC,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yGAQER,KAAK,IAAK;EACX,WAAOS,qBAAG,+EACNC,cAAM,CAAC9B,OAAO,EACdoB,KAAK,CAACW,KAAK,IAAID,cAAM,CAACC,KAAK,EAC3BX,KAAK,CAACY,KAAK,IAAIF,cAAM,CAACE,KAAK,EAC3BZ,KAAK,CAACa,MAAM,IAAIH,cAAM,CAACG,MAAM,EAG3BH,cAAM,CAACC,KAAK,EAKZD,cAAM,CAACE,KAAK;AAGpB,CAAC,CACF;AAEDjB,OAAO,CAACY,WAAW,GAAG,SAAS;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA,MAAMO,UAAU,GAAGC,oBAAS"}

package/dist/cjs/elements/BorderBox/BorderBox.d.ts

@@ -5,6 +5,8 @@ export type BorderBoxProps = BoxProps;
  * @deprecated: Use `Box` along with props e.g. `border="1px solid" borderColor="mono10" p={2}`,
  * as needed.
  */
-export declare const BorderBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+export declare const BorderBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
+}, Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, BoxProps>, BoxProps>> & string;

package/dist/cjs/elements/BorderBox/BorderBox.js

@@ -12,13 +12,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @deprecated: Use `Box` along with props e.g. `border="1px solid" borderColor="mono10" p={2}`,
  * as needed.
  */
-const BorderBox = exports.BorderBox = (0, _styledComponents.default)(_Box.Box).withConfig({
+const BorderBox = exports.BorderBox = (0, _styledComponents.default)(_Box.Box).attrs(props => ({
+  borderColor: props.borderColor ?? "mono10",
+  p: props.p ?? 2
+})).withConfig({
   displayName: "BorderBox",
   componentId: "sc-18mwadn-0"
 })(["border-width:1px;border-style:solid;"]);
 BorderBox.displayName = "BorderBox";
-BorderBox.defaultProps = {
-  borderColor: "mono10",
-  p: 2
-};
 //# sourceMappingURL=BorderBox.js.map

package/dist/cjs/elements/BorderBox/BorderBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"BorderBox.js","names":["_styledComponents","_interopRequireDefault","require","_Box","obj","__esModule","default","BorderBox","exports","styled","Box","withConfig","displayName","componentId","defaultProps","borderColor","p"],"sources":["../../../../src/elements/BorderBox/BorderBox.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport type BorderBoxProps = BoxProps\n\n/**\n * A `div` that has a common border and padding set by default\n * @deprecated: Use `Box` along with props e.g. `border=\"1px solid\" borderColor=\"mono10\" p={2}`,\n * as needed.\n */\nexport const BorderBox = styled(Box)`\n  border-width: 1px;\n  border-style: solid;\n`\n\nBorderBox.displayName = \"BorderBox\"\n\nBorderBox.defaultProps = {\n  borderColor: \"mono10\",\n  p: 2,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAAsC,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAItC;AACA;AACA;AACA;AACA;AACO,MAAMG,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,yBAAM,EAACC,QAAG,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAGnC;AAEDN,SAAS,CAACK,WAAW,GAAG,WAAW;AAEnCL,SAAS,CAACO,YAAY,GAAG;EACvBC,WAAW,EAAE,QAAQ;EACrBC,CAAC,EAAE;AACL,CAAC"}
+{"version":3,"file":"BorderBox.js","names":["_styledComponents","_interopRequireDefault","require","_Box","obj","__esModule","default","BorderBox","exports","styled","Box","attrs","props","borderColor","p","withConfig","displayName","componentId"],"sources":["../../../../src/elements/BorderBox/BorderBox.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport type BorderBoxProps = BoxProps\n\n/**\n * A `div` that has a common border and padding set by default\n * @deprecated: Use `Box` along with props e.g. `border=\"1px solid\" borderColor=\"mono10\" p={2}`,\n * as needed.\n */\nexport const BorderBox = styled(Box).attrs<BorderBoxProps>((props) => ({\n  borderColor: props.borderColor ?? \"mono10\",\n  p: props.p ?? 2,\n}))<BorderBoxProps>`\n  border-width: 1px;\n  border-style: solid;\n`\n\nBorderBox.displayName = \"BorderBox\"\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAAsC,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAItC;AACA;AACA;AACA;AACA;AACO,MAAMG,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,yBAAM,EAACC,QAAG,CAAC,CAACC,KAAK,CAAkBC,KAAK,KAAM;EACrEC,WAAW,EAAED,KAAK,CAACC,WAAW,IAAI,QAAQ;EAC1CC,CAAC,EAAEF,KAAK,CAACE,CAAC,IAAI;AAChB,CAAC,CAAC,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAGF;AAEDV,SAAS,CAACS,WAAW,GAAG,WAAW"}

package/dist/cjs/elements/BorderBox/BorderBoxBase.d.ts

@@ -6,6 +6,12 @@ export interface BorderBoxProps extends FlexProps {
  * A `div` that has a common border and padding set by default
  * @deprecated: Use `Box`
  */
-export declare const BorderBoxBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, "ref"> & {
+export declare const BorderBoxBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("..").BoxProps> & import("..").BoxProps, BorderBoxProps>> & string;
+}, Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, import("..").BoxProps>, keyof import("..").BoxProps> & import("..").BoxProps, import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, import("..").BoxProps>, keyof import("..").BoxProps> & import("..").BoxProps>, BorderBoxProps>, BorderBoxProps>> & string;

package/dist/cjs/elements/BorderBox/BorderBoxBase.js

@@ -11,12 +11,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * A `div` that has a common border and padding set by default
  * @deprecated: Use `Box`
  */
-const BorderBoxBase = exports.BorderBoxBase = (0, _styledComponents.default)(_Flex.Flex).withConfig({
+const BorderBoxBase = exports.BorderBoxBase = (0, _styledComponents.default)(_Flex.Flex).attrs(props => ({
+  borderColor: props.borderColor ?? "mono10",
+  p: props.p ?? 2
+})).withConfig({
   displayName: "BorderBoxBase",
   componentId: "sc-1072ama-0"
 })(["border-width:1px;border-style:solid;"]);
-BorderBoxBase.defaultProps = {
-  borderColor: "mono10",
-  p: 2
-};
 //# sourceMappingURL=BorderBoxBase.js.map

package/dist/cjs/elements/BorderBox/BorderBoxBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"BorderBoxBase.js","names":["_styledComponents","_interopRequireDefault","require","_Flex","obj","__esModule","default","BorderBoxBase","exports","styled","Flex","withConfig","displayName","componentId","defaultProps","borderColor","p"],"sources":["../../../../src/elements/BorderBox/BorderBoxBase.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Flex, FlexProps } from \"../Flex\"\n\nexport interface BorderBoxProps extends FlexProps {\n  hover?: boolean\n}\n\n/**\n * A `div` that has a common border and padding set by default\n * @deprecated: Use `Box`\n */\nexport const BorderBoxBase = styled(Flex)<BorderBoxProps>`\n  border-width: 1px;\n  border-style: solid;\n`\n\nBorderBoxBase.defaultProps = {\n  borderColor: \"mono10\",\n  p: 2,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAAyC,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAMzC;AACA;AACA;AACA;AACO,MAAMG,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,IAAAE,yBAAM,EAACC,UAAI,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAGxC;AAEDN,aAAa,CAACO,YAAY,GAAG;EAC3BC,WAAW,EAAE,QAAQ;EACrBC,CAAC,EAAE;AACL,CAAC"}
+{"version":3,"file":"BorderBoxBase.js","names":["_styledComponents","_interopRequireDefault","require","_Flex","obj","__esModule","default","BorderBoxBase","exports","styled","Flex","attrs","props","borderColor","p","withConfig","displayName","componentId"],"sources":["../../../../src/elements/BorderBox/BorderBoxBase.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Flex, FlexProps } from \"../Flex\"\n\nexport interface BorderBoxProps extends FlexProps {\n  hover?: boolean\n}\n\n/**\n * A `div` that has a common border and padding set by default\n * @deprecated: Use `Box`\n */\nexport const BorderBoxBase = styled(Flex).attrs<BorderBoxProps>((props) => ({\n  borderColor: props.borderColor ?? \"mono10\",\n  p: props.p ?? 2,\n}))<BorderBoxProps>`\n  border-width: 1px;\n  border-style: solid;\n`\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAAyC,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAMzC;AACA;AACA;AACA;AACO,MAAMG,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,IAAAE,yBAAM,EAACC,UAAI,CAAC,CAACC,KAAK,CAAkBC,KAAK,KAAM;EAC1EC,WAAW,EAAED,KAAK,CAACC,WAAW,IAAI,QAAQ;EAC1CC,CAAC,EAAEF,KAAK,CAACE,CAAC,IAAI;AAChB,CAAC,CAAC,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAGF"}

package/dist/cjs/elements/Carousel/Carousel.d.ts

@@ -8,15 +8,19 @@ export type CarouselRailProps = BoxProps & {
     transition?: ResponsiveValue<string>;
 };
 /** A `CarouselRail` slides back and forth within the viewport */
-export declare const CarouselRail: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+export declare const CarouselRail: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
     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;
-}, CarouselRailProps>> & string;
+}, Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+    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;
+}>, CarouselRailProps>, CarouselRailProps>> & string;
 /** CarouselCellProps */
 export type CarouselCellProps = BoxProps;
 /** A `CarouselCell` wraps a single child in the carousel */
-export declare const CarouselCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+export declare const CarouselCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+    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;
+}, Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
     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;
-}, never>> & string;
+}>, BoxProps>, BoxProps>> & string;
 /**
  * We share this spacing value with the `Swiper` component
  */

package/dist/cjs/elements/Carousel/Carousel.js

@@ -28,26 +28,24 @@ const transition = (0, _styledSystem.system)({
 /** CarouselRailProps */
 
 /** A `CarouselRail` slides back and forth within the viewport */
-const CarouselRail = exports.CarouselRail = (0, _styledComponents.default)(_Box.Box).withConfig({
+const CarouselRail = exports.CarouselRail = (0, _styledComponents.default)(_Box.Box).attrs(props => ({
+  as: props.as ?? "ul",
+  display: props.display ?? "flex",
+  transition: props.transition ?? `transform ${RAIL_TRANSITION_MS}ms`
+})).withConfig({
   displayName: "Carousel__CarouselRail",
   componentId: "sc-k6g4b4-0"
 })(["height:100%;margin:0;padding:0;list-style:none;white-space:nowrap;", ""], transition);
-CarouselRail.defaultProps = {
-  as: "ul",
-  display: "flex",
-  transition: `transform ${RAIL_TRANSITION_MS}ms`
-};
 
 /** CarouselCellProps */
 
 /** A `CarouselCell` wraps a single child in the carousel */
-const CarouselCell = exports.CarouselCell = (0, _styledComponents.default)(_Box.Box).withConfig({
+const CarouselCell = exports.CarouselCell = (0, _styledComponents.default)(_Box.Box).attrs(props => ({
+  as: props.as ?? "li"
+})).withConfig({
   displayName: "Carousel__CarouselCell",
   componentId: "sc-k6g4b4-1"
 })(["white-space:normal;"]);
-CarouselCell.defaultProps = {
-  as: "li"
-};
 
 /**
  * We share this spacing value with the `Swiper` component

package/dist/cjs/elements/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styledSystem","_useCursor","_ChevronLeftIcon","_ChevronRightIcon","_useUpdateEffect","_Box","_Skip","_VisuallyHidden","_CarouselNavigation","_paginate","_jsxRuntime","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","RAIL_TRANSITION_MS","transition","system","CarouselRail","exports","styled","Box","withConfig","displayName","componentId","defaultProps","as","display","CarouselCell","CELL_GAP_PADDING_AMOUNT","Container","Viewport","Carousel","initialIndex","children","Previous","CarouselPrevious","Next","CarouselNext","Rail","Cell","paginateBy","onChange","onPageCountChange","rest","containerRef","useRef","viewportRef","startRef","endRef","cells","useMemo","Children","toArray","filter","isValidElement","map","child","ref","createRef","pages","setPages","useState","index","handleNext","handlePrev","setCursor","useCursor","initialCursor","max","length","init","current","viewport","values","clientWidth","paginateCarousel","useEffect","window","addEventListener","removeEventListener","skipToEnd","focus","skipToStart","handleKeydown","contains","document","activeElement","useUpdateEffect","offset","jsxs","jsx","Skip","onClick","width","mb","disabled","height","style","transform","i","isLast","pr","mt","VisuallyHidden"],"sources":["../../../../src/elements/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { ResponsiveValue, system } from \"styled-system\"\nimport { useCursor } from \"use-cursor\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { SpacingUnit } from \"../../Theme\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Skip } from \"../Skip\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport {\n  CarouselNavigationProps,\n  CarouselNext,\n  CarouselPrevious,\n} from \"./CarouselNavigation\"\nimport { paginateCarousel } from \"./paginate\"\n\nconst RAIL_TRANSITION_MS = 500\n\nconst transition = system({ transition: true })\n\n/** CarouselRailProps */\nexport type CarouselRailProps = BoxProps & {\n  transition?: ResponsiveValue<string>\n}\n\n/** A `CarouselRail` slides back and forth within the viewport */\nexport const CarouselRail = styled(Box)<CarouselRailProps>`\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n  ${transition}\n`\n\nCarouselRail.defaultProps = {\n  as: \"ul\",\n  display: \"flex\",\n  transition: `transform ${RAIL_TRANSITION_MS}ms`,\n}\n\n/** CarouselCellProps */\nexport type CarouselCellProps = BoxProps\n\n/** A `CarouselCell` wraps a single child in the carousel */\nexport const CarouselCell = styled(Box)`\n  white-space: normal;\n`\n\nCarouselCell.defaultProps = {\n  as: \"li\",\n}\n\n/**\n * We share this spacing value with the `Swiper` component\n */\nexport const CELL_GAP_PADDING_AMOUNT: SpacingUnit[] = [1, 2]\n\nconst Container = styled(Box)`\n  position: relative;\n  width: 100%;\n`\n\nconst Viewport = styled(Box)`\n  width: 100%;\n  overflow: hidden;\n`\n\nexport interface CarouselProps extends BoxProps {\n  initialIndex?: number\n  children: React.ReactNode\n  Next?: typeof CarouselNext | React.FC<React.PropsWithChildren<CarouselNavigationProps>>\n  Previous?: typeof CarouselPrevious | React.FC<React.PropsWithChildren<CarouselNavigationProps>>\n  Rail?: typeof CarouselRail | React.FC<React.PropsWithChildren<CarouselRailProps>>\n  /**\n   * If providing a custom `Cell` you must forward a ref so\n   * that cell widths can be calculated.\n   */\n  Cell?: React.ForwardRefExoticComponent<CarouselCellProps>\n  paginateBy?: \"page\" | \"cell\"\n  onChange?(index: number): void\n  onPageCountChange?(count: number): void\n}\n\n/**\n * A `Carousel` accepts children or a series of children that are JSX elements.\n * It presents them in a horizontal rail and when the width exceeds the width\n * of the viewport, it presents navigation arrows and allows a user to page\n * through them.\n */\nexport const Carousel: React.FC<React.PropsWithChildren<CarouselProps>> = ({\n  initialIndex = 0,\n  children,\n  Previous = CarouselPrevious,\n  Next = CarouselNext,\n  Rail = CarouselRail,\n  Cell = CarouselCell,\n  paginateBy = \"page\",\n  onChange,\n  onPageCountChange,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const viewportRef = useRef<HTMLDivElement | null>(null)\n  const startRef = useRef<HTMLButtonElement | null>(null)\n  const endRef = useRef<HTMLButtonElement | null>(null)\n\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLDivElement>() })),\n    [children]\n  )\n\n  const [pages, setPages] = useState([0])\n\n  const { index, handleNext, handlePrev, setCursor } = useCursor({\n    initialCursor: initialIndex,\n    max: pages.length,\n  })\n\n  const init = () => {\n    const { current: viewport } = viewportRef\n    const values = cells.map(({ ref }) => ref.current!.clientWidth)\n\n    setPages(\n      paginateCarousel({\n        viewport: viewport!.clientWidth,\n        values,\n        paginateBy,\n      })\n    )\n  }\n\n  useEffect(() => {\n    init()\n    window.addEventListener(\"resize\", init)\n    return () => {\n      window.removeEventListener(\"resize\", init)\n    }\n  }, [cells])\n\n  const skipToEnd = () => {\n    if (!endRef.current) return\n    endRef.current.focus()\n    setCursor(pages.length - 1)\n  }\n\n  const skipToStart = () => {\n    if (!startRef.current) return\n    startRef.current.focus()\n    setCursor(0)\n  }\n\n  const handleKeydown = ({ key }: KeyboardEvent) => {\n    if (!containerRef.current) return\n\n    // Only triggers keyboard navigation if component is in focus\n    if (!containerRef.current.contains(document.activeElement)) {\n      return\n    }\n\n    switch (key) {\n      case \"ArrowRight\":\n        handleNext()\n        break\n      case \"ArrowLeft\":\n        handlePrev()\n        break\n      default:\n        break\n    }\n  }\n\n  useEffect(() => {\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => document.removeEventListener(\"keydown\", handleKeydown)\n  }, [handleKeydown])\n\n  useUpdateEffect(() => {\n    onChange && onChange(index)\n  }, [onChange, index])\n\n  useUpdateEffect(() => {\n    onPageCountChange && onPageCountChange(pages.length)\n  }, [onPageCountChange, pages.length])\n\n  const offset = `-${pages[index]}px`\n\n  return (\n    <Container ref={containerRef as any} {...rest}>\n      <Skip ref={startRef} onClick={skipToEnd} width=\"100%\" mb={1}>\n        Skip to end of content\n      </Skip>\n\n      <nav>\n        <Previous\n          onClick={handlePrev}\n          disabled={index === 0}\n          aria-label=\"Previous page\"\n        >\n          <ChevronLeftIcon width={15} height={15} />\n        </Previous>\n\n        <Next\n          onClick={handleNext}\n          disabled={index === pages.length - 1}\n          aria-label=\"Next page\"\n        >\n          <ChevronRightIcon width={15} height={15} />\n        </Next>\n      </nav>\n\n      <Viewport ref={viewportRef as any}>\n        <Rail style={{ transform: `translateX(${offset})` }}>\n          {cells.map(({ child, ref }, i) => {\n            const isLast = i === cells.length - 1\n\n            return (\n              <Cell\n                key={i}\n                ref={ref}\n                pr={!isLast && (CELL_GAP_PADDING_AMOUNT as any)}\n              >\n                {child}\n              </Cell>\n            )\n          })}\n        </Rail>\n      </Viewport>\n\n      <Skip ref={endRef} onClick={skipToStart} width=\"100%\" mt={1}>\n        Skip to beginning of content\n      </Skip>\n\n      <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n        Page {index + 1} of {pages.length}\n      </VisuallyHidden>\n    </Container>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Carousel.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styledSystem","_useCursor","_ChevronLeftIcon","_ChevronRightIcon","_useUpdateEffect","_Box","_Skip","_VisuallyHidden","_CarouselNavigation","_paginate","_jsxRuntime","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","RAIL_TRANSITION_MS","transition","system","CarouselRail","exports","styled","Box","attrs","props","as","display","withConfig","displayName","componentId","CarouselCell","CELL_GAP_PADDING_AMOUNT","Container","Viewport","Carousel","initialIndex","children","Previous","CarouselPrevious","Next","CarouselNext","Rail","Cell","paginateBy","onChange","onPageCountChange","rest","containerRef","useRef","viewportRef","startRef","endRef","cells","useMemo","Children","toArray","filter","isValidElement","map","child","ref","createRef","pages","setPages","useState","index","handleNext","handlePrev","setCursor","useCursor","initialCursor","max","length","init","current","viewport","values","clientWidth","paginateCarousel","useEffect","window","addEventListener","removeEventListener","skipToEnd","focus","skipToStart","handleKeydown","contains","document","activeElement","useUpdateEffect","offset","jsxs","jsx","Skip","onClick","width","mb","disabled","height","style","transform","i","isLast","pr","mt","VisuallyHidden"],"sources":["../../../../src/elements/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { ResponsiveValue, system } from \"styled-system\"\nimport { useCursor } from \"use-cursor\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { SpacingUnit } from \"../../Theme\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Skip } from \"../Skip\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport {\n  CarouselNavigationProps,\n  CarouselNext,\n  CarouselPrevious,\n} from \"./CarouselNavigation\"\nimport { paginateCarousel } from \"./paginate\"\n\nconst RAIL_TRANSITION_MS = 500\n\nconst transition = system({ transition: true })\n\n/** CarouselRailProps */\nexport type CarouselRailProps = BoxProps & {\n  transition?: ResponsiveValue<string>\n}\n\n/** A `CarouselRail` slides back and forth within the viewport */\nexport const CarouselRail = styled(Box).attrs<CarouselRailProps>((props) => ({\n  as: props.as ?? \"ul\",\n  display: props.display ?? \"flex\",\n  transition: props.transition ?? `transform ${RAIL_TRANSITION_MS}ms`,\n}))<CarouselRailProps>`\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n  ${transition}\n`\n\n/** CarouselCellProps */\nexport type CarouselCellProps = BoxProps\n\n/** A `CarouselCell` wraps a single child in the carousel */\nexport const CarouselCell = styled(Box).attrs<CarouselCellProps>((props) => ({\n  as: props.as ?? \"li\",\n}))<CarouselCellProps>`\n  white-space: normal;\n`\n\n/**\n * We share this spacing value with the `Swiper` component\n */\nexport const CELL_GAP_PADDING_AMOUNT: SpacingUnit[] = [1, 2]\n\nconst Container = styled(Box)`\n  position: relative;\n  width: 100%;\n`\n\nconst Viewport = styled(Box)`\n  width: 100%;\n  overflow: hidden;\n`\n\nexport interface CarouselProps extends BoxProps {\n  initialIndex?: number\n  children: React.ReactNode\n  Next?: typeof CarouselNext | React.FC<React.PropsWithChildren<CarouselNavigationProps>>\n  Previous?: typeof CarouselPrevious | React.FC<React.PropsWithChildren<CarouselNavigationProps>>\n  Rail?: typeof CarouselRail | React.FC<React.PropsWithChildren<CarouselRailProps>>\n  /**\n   * If providing a custom `Cell` you must forward a ref so\n   * that cell widths can be calculated.\n   */\n  Cell?: React.ForwardRefExoticComponent<CarouselCellProps>\n  paginateBy?: \"page\" | \"cell\"\n  onChange?(index: number): void\n  onPageCountChange?(count: number): void\n}\n\n/**\n * A `Carousel` accepts children or a series of children that are JSX elements.\n * It presents them in a horizontal rail and when the width exceeds the width\n * of the viewport, it presents navigation arrows and allows a user to page\n * through them.\n */\nexport const Carousel: React.FC<React.PropsWithChildren<CarouselProps>> = ({\n  initialIndex = 0,\n  children,\n  Previous = CarouselPrevious,\n  Next = CarouselNext,\n  Rail = CarouselRail,\n  Cell = CarouselCell,\n  paginateBy = \"page\",\n  onChange,\n  onPageCountChange,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const viewportRef = useRef<HTMLDivElement | null>(null)\n  const startRef = useRef<HTMLButtonElement | null>(null)\n  const endRef = useRef<HTMLButtonElement | null>(null)\n\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLDivElement>() })),\n    [children]\n  )\n\n  const [pages, setPages] = useState([0])\n\n  const { index, handleNext, handlePrev, setCursor } = useCursor({\n    initialCursor: initialIndex,\n    max: pages.length,\n  })\n\n  const init = () => {\n    const { current: viewport } = viewportRef\n    const values = cells.map(({ ref }) => ref.current!.clientWidth)\n\n    setPages(\n      paginateCarousel({\n        viewport: viewport!.clientWidth,\n        values,\n        paginateBy,\n      })\n    )\n  }\n\n  useEffect(() => {\n    init()\n    window.addEventListener(\"resize\", init)\n    return () => {\n      window.removeEventListener(\"resize\", init)\n    }\n  }, [cells])\n\n  const skipToEnd = () => {\n    if (!endRef.current) return\n    endRef.current.focus()\n    setCursor(pages.length - 1)\n  }\n\n  const skipToStart = () => {\n    if (!startRef.current) return\n    startRef.current.focus()\n    setCursor(0)\n  }\n\n  const handleKeydown = ({ key }: KeyboardEvent) => {\n    if (!containerRef.current) return\n\n    // Only triggers keyboard navigation if component is in focus\n    if (!containerRef.current.contains(document.activeElement)) {\n      return\n    }\n\n    switch (key) {\n      case \"ArrowRight\":\n        handleNext()\n        break\n      case \"ArrowLeft\":\n        handlePrev()\n        break\n      default:\n        break\n    }\n  }\n\n  useEffect(() => {\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => document.removeEventListener(\"keydown\", handleKeydown)\n  }, [handleKeydown])\n\n  useUpdateEffect(() => {\n    onChange && onChange(index)\n  }, [onChange, index])\n\n  useUpdateEffect(() => {\n    onPageCountChange && onPageCountChange(pages.length)\n  }, [onPageCountChange, pages.length])\n\n  const offset = `-${pages[index]}px`\n\n  return (\n    <Container ref={containerRef as any} {...rest}>\n      <Skip ref={startRef} onClick={skipToEnd} width=\"100%\" mb={1}>\n        Skip to end of content\n      </Skip>\n\n      <nav>\n        <Previous\n          onClick={handlePrev}\n          disabled={index === 0}\n          aria-label=\"Previous page\"\n        >\n          <ChevronLeftIcon width={15} height={15} />\n        </Previous>\n\n        <Next\n          onClick={handleNext}\n          disabled={index === pages.length - 1}\n          aria-label=\"Next page\"\n        >\n          <ChevronRightIcon width={15} height={15} />\n        </Next>\n      </nav>\n\n      <Viewport ref={viewportRef as any}>\n        <Rail style={{ transform: `translateX(${offset})` }}>\n          {cells.map(({ child, ref }, i) => {\n            const isLast = i === cells.length - 1\n\n            return (\n              <Cell\n                key={i}\n                ref={ref}\n                pr={!isLast && (CELL_GAP_PADDING_AMOUNT as any)}\n              >\n                {child}\n              </Cell>\n            )\n          })}\n        </Rail>\n      </Viewport>\n\n      <Skip ref={endRef} onClick={skipToStart} width=\"100%\" mt={1}>\n        Skip to beginning of content\n      </Skip>\n\n      <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n        Page {index + 1} of {pages.length}\n      </VisuallyHidden>\n    </Container>\n  )\n}\n"],"mappings":"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"}

package/dist/cjs/elements/Carousel/CarouselNavigation.d.ts

@@ -4,18 +4,34 @@ export type CarouselNavigationProps = ClickableProps;
 /**
  * Default next button
  */
-export declare const CarouselNext: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "cursor" | "textDecoration" | keyof import("..").BoxProps | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
+export declare const CarouselNext: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}>, ClickableProps>, "cursor" | "textDecoration" | keyof import("..").BoxProps | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
     cursor?: import("styled-system").ResponsiveValue<string>;
     textDecoration?: import("styled-system").ResponsiveValue<string>;
-}, "ref"> & {
+}, import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, never>, never>> & string;
+}>, ClickableProps>, "cursor" | "textDecoration" | keyof import("..").BoxProps | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
+    cursor?: import("styled-system").ResponsiveValue<string>;
+    textDecoration?: import("styled-system").ResponsiveValue<string>;
+}>, ClickableProps>, "cursor" | "textDecoration" | keyof import("..").BoxProps | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
+    cursor?: import("styled-system").ResponsiveValue<string>;
+    textDecoration?: import("styled-system").ResponsiveValue<string>;
+}, never>> & string;
 /**
  * Default previous button
  */
-export declare const CarouselPrevious: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "cursor" | "textDecoration" | keyof import("..").BoxProps | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
+export declare const CarouselPrevious: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}>, ClickableProps>, "cursor" | "textDecoration" | keyof import("..").BoxProps | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
     cursor?: import("styled-system").ResponsiveValue<string>;
     textDecoration?: import("styled-system").ResponsiveValue<string>;
-}, "ref"> & {
+}, import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, never>, never>> & string;
+}>, ClickableProps>, "cursor" | "textDecoration" | keyof import("..").BoxProps | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
+    cursor?: import("styled-system").ResponsiveValue<string>;
+    textDecoration?: import("styled-system").ResponsiveValue<string>;
+}>, ClickableProps>, "cursor" | "textDecoration" | keyof import("..").BoxProps | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("..").BoxProps & {
+    cursor?: import("styled-system").ResponsiveValue<string>;
+    textDecoration?: import("styled-system").ResponsiveValue<string>;
+}, never>> & string;

package/dist/cjs/elements/Carousel/CarouselNavigation.js

@@ -14,20 +14,15 @@ const ARROW_TRANSITION_MS = 250;
 
 /** CarouselNavigationProps */
 
-const Arrow = (0, _styledComponents.default)(_Clickable.Clickable).withConfig({
+const Arrow = (0, _styledComponents.default)(_Clickable.Clickable).attrs(props => ({
+  width: props.width ?? ARROW_WIDTH.map(value => (0, _helpers.space)(value)),
+  height: props.height ?? "100%",
+  color: props.color ?? "mono60"
+})).withConfig({
   displayName: "CarouselNavigation__Arrow",
   componentId: "sc-16jrffs-0"
 })(["position:absolute;top:0;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;transition:opacity ", "ms,color ", "ms;> svg{fill:currentColor;}&:hover,&:focus{outline:0;color:", ";}&:disabled{opacity:0;cursor:default;}"], ARROW_TRANSITION_MS, ARROW_TRANSITION_MS, (0, _themeGet.themeGet)("colors.mono100"));
 
-/**
- * Set some easily overwriteable props using `defaultProps`
- */
-Arrow.defaultProps = {
-  width: ARROW_WIDTH.map(value => (0, _helpers.space)(value)),
-  height: "100%",
-  color: "mono60"
-};
-
 /**
  * Default next button
  */

package/dist/cjs/elements/Carousel/CarouselNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselNavigation.js","names":["_styledComponents","_interopRequireDefault","require","_helpers","_Clickable","_themeGet","obj","__esModule","default","ARROW_WIDTH","ARROW_TRANSITION_MS","Arrow","styled","Clickable","withConfig","displayName","componentId","themeGet","defaultProps","width","map","value","space","height","color","CarouselNext","exports","CarouselPrevious"],"sources":["../../../../src/elements/Carousel/CarouselNavigation.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { space } from \"../../helpers\"\nimport { SpacingUnit } from \"../../Theme\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nconst ARROW_WIDTH: SpacingUnit[] = [2, 4]\nconst ARROW_TRANSITION_MS = 250\n\n/** CarouselNavigationProps */\nexport type CarouselNavigationProps = ClickableProps\n\nconst Arrow = styled(Clickable)`\n  position: absolute;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  transition: opacity ${ARROW_TRANSITION_MS}ms, color ${ARROW_TRANSITION_MS}ms;\n\n  > svg {\n    fill: currentColor;\n  }\n\n  &:hover,\n  &:focus {\n    outline: 0;\n    color: ${themeGet(\"colors.mono100\")};\n  }\n\n  &:disabled {\n    opacity: 0;\n    cursor: default;\n  }\n`\n\n/**\n * Set some easily overwriteable props using `defaultProps`\n */\nArrow.defaultProps = {\n  width: ARROW_WIDTH.map((value) => space(value)),\n  height: \"100%\",\n  color: \"mono60\",\n}\n\n/**\n * Default next button\n */\nexport const CarouselNext = styled(Arrow)`\n  right: 0;\n  transform: translateX(100%);\n`\n\n/**\n * Default previous button\n */\nexport const CarouselPrevious = styled(Arrow)`\n  left: 0;\n  transform: translateX(-100%);\n`\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAEA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAAmD,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEnD,MAAMG,WAA0B,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;AACzC,MAAMC,mBAAmB,GAAG,GAAG;;AAE/B;;AAGA,MAAMC,KAAK,GAAG,IAAAC,yBAAM,EAACC,oBAAS,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mQAQPN,mBAAmB,EAAaA,mBAAmB,EAS9D,IAAAO,kBAAQ,EAAC,gBAAgB,CAAC,CAOtC;;AAED;AACA;AACA;AACAN,KAAK,CAACO,YAAY,GAAG;EACnBC,KAAK,EAAEV,WAAW,CAACW,GAAG,CAAEC,KAAK,IAAK,IAAAC,cAAK,EAACD,KAAK,CAAC,CAAC;EAC/CE,MAAM,EAAE,MAAM;EACdC,KAAK,EAAE;AACT,CAAC;;AAED;AACA;AACA;AACO,MAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAb,yBAAM,EAACD,KAAK,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2CAGxC;;AAED;AACA;AACA;AACO,MAAMW,gBAAgB,GAAAD,OAAA,CAAAC,gBAAA,GAAG,IAAAf,yBAAM,EAACD,KAAK,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2CAG5C"}
+{"version":3,"file":"CarouselNavigation.js","names":["_styledComponents","_interopRequireDefault","require","_helpers","_Clickable","_themeGet","obj","__esModule","default","ARROW_WIDTH","ARROW_TRANSITION_MS","Arrow","styled","Clickable","attrs","props","width","map","value","space","height","color","withConfig","displayName","componentId","themeGet","CarouselNext","exports","CarouselPrevious"],"sources":["../../../../src/elements/Carousel/CarouselNavigation.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { space } from \"../../helpers\"\nimport { SpacingUnit } from \"../../Theme\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nconst ARROW_WIDTH: SpacingUnit[] = [2, 4]\nconst ARROW_TRANSITION_MS = 250\n\n/** CarouselNavigationProps */\nexport type CarouselNavigationProps = ClickableProps\n\nconst Arrow = styled(Clickable).attrs<CarouselNavigationProps>((props) => ({\n  width: props.width ?? ARROW_WIDTH.map((value) => space(value)),\n  height: props.height ?? \"100%\",\n  color: props.color ?? \"mono60\",\n}))<CarouselNavigationProps>`\n  position: absolute;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  transition: opacity ${ARROW_TRANSITION_MS}ms, color ${ARROW_TRANSITION_MS}ms;\n\n  > svg {\n    fill: currentColor;\n  }\n\n  &:hover,\n  &:focus {\n    outline: 0;\n    color: ${themeGet(\"colors.mono100\")};\n  }\n\n  &:disabled {\n    opacity: 0;\n    cursor: default;\n  }\n`\n\n/**\n * Default next button\n */\nexport const CarouselNext = styled(Arrow)`\n  right: 0;\n  transform: translateX(100%);\n`\n\n/**\n * Default previous button\n */\nexport const CarouselPrevious = styled(Arrow)`\n  left: 0;\n  transform: translateX(-100%);\n`\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAEA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAAmD,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEnD,MAAMG,WAA0B,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;AACzC,MAAMC,mBAAmB,GAAG,GAAG;;AAE/B;;AAGA,MAAMC,KAAK,GAAG,IAAAC,yBAAM,EAACC,oBAAS,CAAC,CAACC,KAAK,CAA2BC,KAAK,KAAM;EACzEC,KAAK,EAAED,KAAK,CAACC,KAAK,IAAIP,WAAW,CAACQ,GAAG,CAAEC,KAAK,IAAK,IAAAC,cAAK,EAACD,KAAK,CAAC,CAAC;EAC9DE,MAAM,EAAEL,KAAK,CAACK,MAAM,IAAI,MAAM;EAC9BC,KAAK,EAAEN,KAAK,CAACM,KAAK,IAAI;AACxB,CAAC,CAAC,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mQAQqBd,mBAAmB,EAAaA,mBAAmB,EAS9D,IAAAe,kBAAQ,EAAC,gBAAgB,CAAC,CAOtC;;AAED;AACA;AACA;AACO,MAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAd,yBAAM,EAACD,KAAK,CAAC,CAAAW,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2CAGxC;;AAED;AACA;AACA;AACO,MAAMI,gBAAgB,GAAAD,OAAA,CAAAC,gBAAA,GAAG,IAAAhB,yBAAM,EAACD,KAAK,CAAC,CAAAW,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2CAG5C"}

package/dist/cjs/elements/Clickable/Clickable.d.ts

@@ -10,5 +10,7 @@ export type ClickableProps = React.ButtonHTMLAttributes<HTMLButtonElement> & Box
  * Clickable is a utility component useful for wrapping things like <div>s
  * without having to deal with the requirements to make the <div> accessible.
  */
-export declare const Clickable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ClickableProps>> & string;
+export declare const Clickable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | 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<HTMLButtonElement> | null | undefined;
+}>, ClickableProps>, ClickableProps>> & string;
 export declare const splitClickableProps: <U extends Record<string, unknown>>(props: U) => [ClickableProps, Omit<U, "cursor" | "textDecoration" | keyof BoxProps | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>];

package/dist/cjs/elements/Clickable/Clickable.js

@@ -24,13 +24,12 @@ const clickableMixin = (0, _styledSystem.compose)(_Box.boxMixin, cursor, textDec
  * Clickable is a utility component useful for wrapping things like <div>s
  * without having to deal with the requirements to make the <div> accessible.
  */
-const Clickable = exports.Clickable = _styledComponents.default.button.withConfig({
+const Clickable = exports.Clickable = _styledComponents.default.button.attrs(props => ({
+  cursor: props.cursor ?? "pointer",
+  type: props.type ?? "button"
+})).withConfig({
   displayName: "Clickable",
   componentId: "sc-10cr82y-0"
 })(["appearance:none;padding:0;border:0;margin:0;background-color:transparent;color:inherit;font:inherit;text-align:inherit;", " &:disabled{cursor:default;}"], clickableMixin);
-Clickable.defaultProps = {
-  cursor: "pointer",
-  type: "button"
-};
 const splitClickableProps = exports.splitClickableProps = (0, _splitProps.splitProps)(clickableMixin);
 //# sourceMappingURL=Clickable.js.map

package/dist/cjs/elements/Clickable/Clickable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Clickable.js","names":["_styledComponents","_interopRequireDefault","require","_styledSystem","_splitProps","_Box","obj","__esModule","default","cursor","system","textDecoration","clickableMixin","compose","boxMixin","Clickable","exports","styled","button","withConfig","displayName","componentId","defaultProps","type","splitClickableProps","splitProps"],"sources":["../../../../src/elements/Clickable/Clickable.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { compose, ResponsiveValue, system } from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\nconst cursor = system({ cursor: true })\nconst textDecoration = system({ textDecoration: true })\n\n/** ClickableProps */\nexport type ClickableProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n  BoxProps & {\n    cursor?: ResponsiveValue<string>\n    textDecoration?: ResponsiveValue<string>\n  }\n\nconst clickableMixin = compose(boxMixin, cursor, textDecoration)\n\n/**\n * Clickable is a utility component useful for wrapping things like <div>s\n * without having to deal with the requirements to make the <div> accessible.\n */\nexport const Clickable = styled.button<ClickableProps>`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background-color: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: inherit;\n\n  ${clickableMixin}\n\n  &:disabled {\n    cursor: default;\n  }\n`\n\nClickable.defaultProps = {\n  cursor: \"pointer\",\n  type: \"button\",\n}\n\nexport const splitClickableProps = splitProps<ClickableProps>(clickableMixin)\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,IAAA,GAAAH,OAAA;AAA2C,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAE3C,MAAMG,MAAM,GAAG,IAAAC,oBAAM,EAAC;EAAED,MAAM,EAAE;AAAK,CAAC,CAAC;AACvC,MAAME,cAAc,GAAG,IAAAD,oBAAM,EAAC;EAAEC,cAAc,EAAE;AAAK,CAAC,CAAC;;AAEvD;;AAOA,MAAMC,cAAc,GAAG,IAAAC,qBAAO,EAACC,aAAQ,EAAEL,MAAM,EAAEE,cAAc,CAAC;;AAEhE;AACA;AACA;AACA;AACO,MAAMI,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,yBAAM,CAACC,MAAM,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gKAUlCT,cAAc,CAKjB;AAEDG,SAAS,CAACO,YAAY,GAAG;EACvBb,MAAM,EAAE,SAAS;EACjBc,IAAI,EAAE;AACR,CAAC;AAEM,MAAMC,mBAAmB,GAAAR,OAAA,CAAAQ,mBAAA,GAAG,IAAAC,sBAAU,EAAiBb,cAAc,CAAC"}
+{"version":3,"file":"Clickable.js","names":["_styledComponents","_interopRequireDefault","require","_styledSystem","_splitProps","_Box","obj","__esModule","default","cursor","system","textDecoration","clickableMixin","compose","boxMixin","Clickable","exports","styled","button","attrs","props","type","withConfig","displayName","componentId","splitClickableProps","splitProps"],"sources":["../../../../src/elements/Clickable/Clickable.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { compose, ResponsiveValue, system } from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\nconst cursor = system({ cursor: true })\nconst textDecoration = system({ textDecoration: true })\n\n/** ClickableProps */\nexport type ClickableProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n  BoxProps & {\n    cursor?: ResponsiveValue<string>\n    textDecoration?: ResponsiveValue<string>\n  }\n\nconst clickableMixin = compose(boxMixin, cursor, textDecoration)\n\n/**\n * Clickable is a utility component useful for wrapping things like <div>s\n * without having to deal with the requirements to make the <div> accessible.\n */\nexport const Clickable = styled.button.attrs<ClickableProps>((props) => ({\n  cursor: props.cursor ?? \"pointer\",\n  type: props.type ?? \"button\",\n}))<ClickableProps>`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background-color: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: inherit;\n\n  ${clickableMixin}\n\n  &:disabled {\n    cursor: default;\n  }\n`\n\nexport const splitClickableProps = splitProps<ClickableProps>(clickableMixin)\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,IAAA,GAAAH,OAAA;AAA2C,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAE3C,MAAMG,MAAM,GAAG,IAAAC,oBAAM,EAAC;EAAED,MAAM,EAAE;AAAK,CAAC,CAAC;AACvC,MAAME,cAAc,GAAG,IAAAD,oBAAM,EAAC;EAAEC,cAAc,EAAE;AAAK,CAAC,CAAC;;AAEvD;;AAOA,MAAMC,cAAc,GAAG,IAAAC,qBAAO,EAACC,aAAQ,EAAEL,MAAM,EAAEE,cAAc,CAAC;;AAEhE;AACA;AACA;AACA;AACO,MAAMI,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,yBAAM,CAACC,MAAM,CAACC,KAAK,CAAkBC,KAAK,KAAM;EACvEX,MAAM,EAAEW,KAAK,CAACX,MAAM,IAAI,SAAS;EACjCY,IAAI,EAAED,KAAK,CAACC,IAAI,IAAI;AACtB,CAAC,CAAC,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gKAUCZ,cAAc,CAKjB;AAEM,MAAMa,mBAAmB,GAAAT,OAAA,CAAAS,mBAAA,GAAG,IAAAC,sBAAU,EAAiBd,cAAc,CAAC"}

package/dist/cjs/elements/Flex/Flex.d.ts

@@ -6,6 +6,8 @@ export type FlexProps = BoxProps;
 /**
  * Flex is Box with display: flex
  */
-export declare const Flex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+export declare const Flex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, BoxProps>> & string;
+}, Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, BoxProps>, BoxProps>> & string;

package/dist/cjs/elements/Flex/Flex.js

@@ -14,12 +14,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * Flex is Box with display: flex
  */
-const Flex = exports.Flex = (0, _styledComponents.default)(_Box.Box).withConfig({
+const Flex = exports.Flex = (0, _styledComponents.default)(_Box.Box).attrs(props => ({
+  display: props.display ?? "flex"
+})).withConfig({
   displayName: "Flex",
   componentId: "sc-cw39ct-0"
 })([""]);
-Flex.defaultProps = {
-  display: "flex"
-};
 Flex.displayName = "Flex";
 //# sourceMappingURL=Flex.js.map

package/dist/cjs/elements/Flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","names":["_styledComponents","_interopRequireDefault","require","_Box","obj","__esModule","default","Flex","exports","styled","Box","withConfig","displayName","componentId","defaultProps","display"],"sources":["../../../../src/elements/Flex/Flex.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/**\n * Flex is Box with display: flex\n */\nexport type FlexProps = BoxProps\n\n/**\n * Flex is Box with display: flex\n */\nexport const Flex = styled(Box)<FlexProps>``\n\nFlex.defaultProps = {\n  display: \"flex\",\n}\n\nFlex.displayName = \"Flex\"\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAAsC,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEtC;AACA;AACA;;AAGA;AACA;AACA;AACO,MAAMG,IAAI,GAAAC,OAAA,CAAAD,IAAA,GAAG,IAAAE,yBAAM,EAACC,QAAG,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAa;AAE5CN,IAAI,CAACO,YAAY,GAAG;EAClBC,OAAO,EAAE;AACX,CAAC;AAEDR,IAAI,CAACK,WAAW,GAAG,MAAM"}
+{"version":3,"file":"Flex.js","names":["_styledComponents","_interopRequireDefault","require","_Box","obj","__esModule","default","Flex","exports","styled","Box","attrs","props","display","withConfig","displayName","componentId"],"sources":["../../../../src/elements/Flex/Flex.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/**\n * Flex is Box with display: flex\n */\nexport type FlexProps = BoxProps\n\n/**\n * Flex is Box with display: flex\n */\nexport const Flex = styled(Box).attrs<FlexProps>((props) => ({\n  display: props.display ?? \"flex\",\n}))<FlexProps>``\n\nFlex.displayName = \"Flex\"\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAAsC,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEtC;AACA;AACA;;AAGA;AACA;AACA;AACO,MAAMG,IAAI,GAAAC,OAAA,CAAAD,IAAA,GAAG,IAAAE,yBAAM,EAACC,QAAG,CAAC,CAACC,KAAK,CAAaC,KAAK,KAAM;EAC3DC,OAAO,EAAED,KAAK,CAACC,OAAO,IAAI;AAC5B,CAAC,CAAC,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAa;AAEhBT,IAAI,CAACQ,WAAW,GAAG,MAAM"}

package/dist/cjs/elements/FullBleed/FullBleed.d.ts

@@ -4,6 +4,8 @@ export type FullBleedProps = BoxProps;
 /**
  * Utility to break out of parent containers
  */
-export declare const FullBleed: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+export declare const FullBleed: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
+}, Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, BoxProps>, BoxProps>> & string;

package/dist/cjs/elements/FullBleed/FullBleed.js

@@ -12,17 +12,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * Utility to break out of parent containers
  */
-const FullBleed = exports.FullBleed = (0, _styledComponents.default)(_Box.Box).withConfig({
+const FullBleed = exports.FullBleed = (0, _styledComponents.default)(_Box.Box).attrs(props => ({
+  position: props.position ?? "relative",
+  left: props.left ?? "50%",
+  right: props.right ?? "50%",
+  width: props.width ?? "100vw",
+  maxWidth: props.maxWidth ?? "100vw",
+  marginLeft: props.marginLeft ?? "-50vw",
+  marginRight: props.marginRight ?? "-50vw"
+})).withConfig({
   displayName: "FullBleed",
   componentId: "sc-g9qwfe-0"
 })([""]);
-FullBleed.defaultProps = {
-  position: "relative",
-  left: "50%",
-  right: "50%",
-  width: "100vw",
-  maxWidth: "100vw",
-  marginLeft: "-50vw",
-  marginRight: "-50vw"
-};
 //# sourceMappingURL=FullBleed.js.map