@ledgerhq/react-ui 0.7.5-monorepo.3 → 0.7.6-nightly.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.
Files changed (18) hide show
  1. package/README.md +3 -4
  2. package/lib/cjs/components/layout/Side/index.js.map +1 -1
  3. package/lib/components/Table/index.d.ts +4 -4
  4. package/lib/components/cta/Button/index.d.ts +1 -1
  5. package/lib/components/cta/Link/index.d.ts +2 -2
  6. package/lib/components/form/BaseInput/index.d.ts +6 -8
  7. package/lib/components/form/LegendInput/index.d.ts +2 -4
  8. package/lib/components/form/NumberInput/index.d.ts +2 -4
  9. package/lib/components/form/QrCodeInput/index.d.ts +2 -4
  10. package/lib/components/form/QuantityInput/index.d.ts +2 -4
  11. package/lib/components/form/SearchInput/index.d.ts +2 -4
  12. package/lib/components/layout/Box/index.d.ts +1 -1
  13. package/lib/components/layout/Flex/index.d.ts +2 -2
  14. package/lib/components/layout/Popin/index.d.ts +4 -4
  15. package/lib/components/loaders/InfiniteLoader/index.d.ts +1 -1
  16. package/lib/components/navigation/Aside/index.d.ts +2 -2
  17. package/lib/components/navigation/progress/Stepper/index.d.ts +1 -1
  18. package/package.json +13 -13
package/README.md CHANGED
@@ -1,8 +1,7 @@
1
1
  # `@ledgerhq/react-ui`
2
2
 
3
- [![build](https://github.com/LedgerHQ/ui/actions/workflows/react.yml/badge.svg)](https://github.com/LedgerHQ/ui/actions/workflows/react.yml)
4
3
  [![npm](https://img.shields.io/npm/v/@ledgerhq/react-ui)](https://www.npmjs.com/package/@ledgerhq/react-ui)
5
- [![storybook](https://img.shields.io/badge/Storybook-📚-61DBFB)](https://ledger-live-ui-react.vercel.app)
4
+ [![storybook](https://img.shields.io/badge/Storybook-📚-61DBFB)](https://react-ui-storybook.vercel.app)
6
5
 
7
6
  ### Design and interface resources for React
8
7
 
@@ -10,7 +9,7 @@
10
9
 
11
10
  ## Reference
12
11
 
13
- **[🔗 Storybook](https://ledger-live-ui-react.vercel.app/)**
12
+ **[🔗 Storybook](https://react-ui-storybook.vercel.app)**
14
13
 
15
14
  ## Installation
16
15
 
@@ -193,4 +192,4 @@ ReactDOM.render(<Root />, document.getElementById("react-root"));
193
192
 
194
193
  ### Contributing
195
194
 
196
- Check the [contributing guide here](https://github.com/LedgerHQ/ui/blob/main/packages/react/CONTRIBUTING.md).
195
+ Check the [contributing guide here](https://github.com/LedgerHQ/ledger-live/blob/monorepo-setup/libs/ui/packages/react/CONTRIBUTING.md).
package/lib/cjs/components/layout/Side/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/components/layout/Side/index.tsx"],
4
- "sourcesContent": ["import React, { useRef, useCallback, useEffect, useState } from \"react\";\nimport { TransitionGroup } from \"react-transition-group\";\nimport Drawer from \"../Drawer\";\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport { useSide } from \"./Provider\";\n\nexport interface SideProps {\n onBack?: () => void;\n}\n\nexport const SideWrapper = (props: SideProps): JSX.Element => {\n // Nb Note that it's not a real queue and we need to handle where we go from each _slide_\n const { state, setSide } = useSide();\n const [queue, setQueue] = useState<\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Array<{ Component: React.ComponentType | null | undefined; props?: any; key: number }>\n >([]);\n const [direction, setDirection] = useState(\"left\");\n const [transitionsEnabled, setTransitionsEnabled] = useState(false);\n const nonce = useRef(0);\n const onClose = useCallback(() => setSide(), [setSide]);\n\n useEffect(() => {\n setQueue((q) => {\n if (!state.open || !state.Component) return [];\n return q.concat([{ ...state, key: nonce.current++ }]);\n });\n }, [state]);\n\n useEffect(() => {\n let timeout: NodeJS.Timeout;\n\n if (queue.length > 1) {\n const [, ...rest] = queue;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore mismatch between nodejs and dom types\n timeout = setTimeout(() => {\n setQueue(rest);\n setDirection(\"left\");\n }, 0);\n }\n\n return () => {\n if (timeout) clearTimeout(timeout);\n };\n }, [queue]);\n\n const wrappedOnBack = useCallback(() => {\n setDirection(\"right\");\n const onBack = state?.props?.onBack;\n onBack && onBack();\n }, [state?.props]);\n\n return (\n <Drawer\n {...props}\n isOpen={!!state.open}\n onClose={onClose}\n onBack={state?.props?.onBack ? wrappedOnBack : undefined}\n setTransitionsEnabled={setTransitionsEnabled}\n hideNavigation={false}\n >\n <TransitionGroup enter={transitionsEnabled} exit={transitionsEnabled} component={null}>\n {queue.map(({ Component, props, key }) => (\n <TransitionSlide key={key} direction={direction}>\n {Component && <Component {...props} />}\n </TransitionSlide>\n ))}\n </TransitionGroup>\n </Drawer>\n );\n};\n\nexport default SideWrapper;\n"],
4
+ "sourcesContent": ["import React, { useRef, useCallback, useEffect, useState } from \"react\";\nimport { TransitionGroup } from \"react-transition-group\";\nimport Drawer from \"../Drawer\";\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport { useSide } from \"./Provider\";\n\nexport interface SideProps {\n onBack?: () => void;\n}\n\nexport const SideWrapper = (props: SideProps): JSX.Element => {\n // Nb Note that it's not a real queue and we need to handle where we go from each _slide_\n const { state, setSide } = useSide();\n const [queue, setQueue] = useState<\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Array<{ Component: React.ComponentType | null | undefined; props?: any; key: number }>\n >([]);\n const [direction, setDirection] = useState(\"left\");\n const [transitionsEnabled, setTransitionsEnabled] = useState(false);\n const nonce = useRef(0);\n const onClose = useCallback(() => setSide(), [setSide]);\n\n useEffect(() => {\n setQueue((q) => {\n if (!state.open || !state.Component) return [];\n return q.concat([{ ...state, key: nonce.current++ }]);\n });\n }, [state]);\n\n useEffect(() => {\n let timeout: number;\n\n if (queue.length > 1) {\n const [, ...rest] = queue;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore mismatch between nodejs and dom types\n timeout = setTimeout(() => {\n setQueue(rest);\n setDirection(\"left\");\n }, 0);\n }\n\n return () => {\n if (timeout) clearTimeout(timeout);\n };\n }, [queue]);\n\n const wrappedOnBack = useCallback(() => {\n setDirection(\"right\");\n const onBack = state?.props?.onBack;\n onBack && onBack();\n }, [state?.props]);\n\n return (\n <Drawer\n {...props}\n isOpen={!!state.open}\n onClose={onClose}\n onBack={state?.props?.onBack ? wrappedOnBack : undefined}\n setTransitionsEnabled={setTransitionsEnabled}\n hideNavigation={false}\n >\n <TransitionGroup enter={transitionsEnabled} exit={transitionsEnabled} component={null}>\n {queue.map(({ Component, props, key }) => (\n <TransitionSlide key={key} direction={direction}>\n {Component && <Component {...props} />}\n </TransitionSlide>\n ))}\n </TransitionGroup>\n </Drawer>\n );\n};\n\nexport default SideWrapper;\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgE;AAChE,oCAAgC;AAChC,oBAAmB;AACnB,6BAA4B;AAC5B,sBAAwB;AAMjB,MAAM,cAAc,CAAC,UAAkC;AAE5D,QAAM,EAAE,OAAO,YAAY;AAC3B,QAAM,CAAC,OAAO,YAAY,2BAGxB;AACF,QAAM,CAAC,WAAW,gBAAgB,2BAAS;AAC3C,QAAM,CAAC,oBAAoB,yBAAyB,2BAAS;AAC7D,QAAM,QAAQ,yBAAO;AACrB,QAAM,UAAU,8BAAY,MAAM,WAAW,CAAC;AAE9C,8BAAU,MAAM;AACd,aAAS,CAAC,MAAM;AACd,UAAI,CAAC,MAAM,QAAQ,CAAC,MAAM;AAAW,eAAO;AAC5C,aAAO,EAAE,OAAO,CAAC,KAAK,OAAO,KAAK,MAAM;AAAA;AAAA,KAEzC,CAAC;AAEJ,8BAAU,MAAM;AACd,QAAI;AAEJ,QAAI,MAAM,SAAS,GAAG;AACpB,YAAM,CAAC,KAAK,QAAQ;AAGpB,gBAAU,WAAW,MAAM;AACzB,iBAAS;AACT,qBAAa;AAAA,SACZ;AAAA;AAGL,WAAO,MAAM;AACX,UAAI;AAAS,qBAAa;AAAA;AAAA,KAE3B,CAAC;AAEJ,QAAM,gBAAgB,8BAAY,MAAM;AACtC,iBAAa;AACb,UAAM,SAAS,OAAO,OAAO;AAC7B,cAAU;AAAA,KACT,CAAC,OAAO;AAEX,SACE,mDAAC,uBAAD;AAAA,OACM;AAAA,IACJ,QAAQ,CAAC,CAAC,MAAM;AAAA,IAChB;AAAA,IACA,QAAQ,OAAO,OAAO,SAAS,gBAAgB;AAAA,IAC/C;AAAA,IACA,gBAAgB;AAAA,KAEhB,mDAAC,+CAAD;AAAA,IAAiB,OAAO;AAAA,IAAoB,MAAM;AAAA,IAAoB,WAAW;AAAA,KAC9E,MAAM,IAAI,CAAC,EAAE,WAAW,eAAO,UAC9B,mDAAC,gCAAD;AAAA,IAAiB;AAAA,IAAU;AAAA,KACxB,aAAa,mDAAC,WAAD;AAAA,OAAe;AAAA;AAAA;AAQzC,IAAO,eAAQ;",
6
6
  "names": []
7
7
  }
package/lib/components/Table/index.d.ts CHANGED
@@ -14,11 +14,11 @@ export declare const ExtraRowContainer: import("styled-components").StyledCompon
14
14
  export declare type RowContainerProps = {
15
15
  rowIndex: number;
16
16
  };
17
- export declare const RowContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
17
+ export declare const RowContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
18
18
  columnGap?: string | number | undefined;
19
19
  rowGap?: string | number | undefined;
20
20
  color?: string | undefined;
21
- } & RowContainerProps, "overflow" | "p" | "color" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
21
+ } & RowContainerProps, "overflow" | "p" | "color" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
22
22
  interface CommonProps<T> {
23
23
  /** Table data */
24
24
  data: T[];
@@ -56,11 +56,11 @@ export declare namespace Table {
56
56
  var ExtraRowContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
57
57
  gridColumn: string;
58
58
  } & GridColumnProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "gridColumn">;
59
- var RowContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
59
+ var RowContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
60
60
  columnGap?: string | number | undefined;
61
61
  rowGap?: string | number | undefined;
62
62
  color?: string | undefined;
63
- } & RowContainerProps, "overflow" | "p" | "color" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
63
+ } & RowContainerProps, "overflow" | "p" | "color" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
64
64
  }
65
65
  declare const memoTable: typeof Table;
66
66
  export default memoTable;
package/lib/components/cta/Button/index.d.ts CHANGED
@@ -35,7 +35,7 @@ declare const ButtonWithRef: {
35
35
  Unstyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
36
36
  Expand: React.ForwardRefExoticComponent<Pick<ButtonProps & {
37
37
  onToggle?: ((arg0: boolean) => void) | undefined;
38
- }, "overflow" | "p" | "style" | "key" | "color" | "children" | "onClick" | "variant" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "fontSize" | "opacity" | "order" | "disabled" | "onToggle" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "Icon" | "iconSize" | "ff" | "outline" | "iconPosition" | "iconButton" | "iconName"> & React.RefAttributes<HTMLButtonElement>>;
38
+ }, "overflow" | "p" | "style" | "key" | "color" | "children" | "onClick" | "variant" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontSize" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "outline" | "padding" | "disabled" | "onToggle" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY" | "Icon" | "iconSize" | "ff" | "iconPosition" | "iconButton" | "iconName"> & React.RefAttributes<HTMLButtonElement>>;
39
39
  };
40
40
  export declare type ButtonExpandProps = React.PropsWithChildren<ButtonProps & {
41
41
  onToggle?: (arg0: boolean) => void;
package/lib/components/cta/Link/index.d.ts CHANGED
@@ -39,7 +39,7 @@ export declare type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
39
39
  export declare const DEFAULT_ICON_POSITION = "right";
40
40
  export declare const DEFAULT_SIZE = "medium";
41
41
  export declare const DEFAULT_TYPE = "main";
42
- export declare const Base: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, React.AnchorHTMLAttributes<HTMLAnchorElement> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
42
+ export declare const Base: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, React.AnchorHTMLAttributes<HTMLAnchorElement> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
43
43
  columnGap?: string | number | undefined;
44
44
  rowGap?: string | number | undefined;
45
45
  color?: string | undefined;
@@ -58,7 +58,7 @@ export declare const Base: import("styled-components").StyledComponent<"a", impo
58
58
  /**
59
59
  * Affect the font variant & icon size
60
60
  */
61
- size?: "small" | "large" | "medium" | undefined;
61
+ size?: "small" | "medium" | "large" | undefined;
62
62
  /**
63
63
  * Color of the link, overrides colors defined by the `type` prop
64
64
  */
package/lib/components/form/BaseInput/index.d.ts CHANGED
@@ -41,22 +41,22 @@ export declare const BaseInput: import("styled-components").StyledComponent<"inp
41
41
  } & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
42
42
  export declare const InputErrorContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps, keyof import("../../asorted/Text").TextProps>;
43
43
  export declare const InputWarningContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps, keyof import("../../asorted/Text").TextProps>;
44
- export declare const InputRenderLeftContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
44
+ export declare const InputRenderLeftContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
45
45
  columnGap?: string | number | undefined;
46
46
  rowGap?: string | number | undefined;
47
47
  color?: string | undefined;
48
48
  } & {
49
49
  alignItems: string;
50
50
  pl: string;
51
- }, "overflow" | "p" | "color" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
52
- export declare const InputRenderRightContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
51
+ }, "overflow" | "p" | "color" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
52
+ export declare const InputRenderRightContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
53
53
  columnGap?: string | number | undefined;
54
54
  rowGap?: string | number | undefined;
55
55
  color?: string | undefined;
56
56
  } & {
57
57
  alignItems: string;
58
58
  pr: string;
59
- }, "overflow" | "p" | "color" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
59
+ }, "overflow" | "p" | "color" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
60
60
  export declare const ClearableButtonUnstyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
61
61
  declare function Input<T = ValueType>(props: InputProps<T>, ref?: React.ForwardedRef<HTMLInputElement>): JSX.Element;
62
62
  declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
@@ -66,15 +66,13 @@ declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
66
66
  renderLeft?: React.ReactNode | ((props: InputProps<T>) => React.ReactNode);
67
67
  renderRight?: React.ReactNode | ((props: InputProps<T>) => React.ReactNode);
68
68
  unwrapped?: boolean | undefined;
69
- containerProps?: (({
69
+ containerProps?: ({
70
70
  [x: string]: any;
71
71
  [x: number]: any;
72
72
  [x: symbol]: any;
73
73
  } & {
74
74
  theme?: import("styled-components").DefaultTheme | undefined;
75
- } & ({} | {
76
- children?: React.ReactNode;
77
- })) & {
75
+ } & {
78
76
  as?: string | React.ComponentType<any> | undefined;
79
77
  forwardedAs?: string | React.ComponentType<any> | undefined;
80
78
  }) | undefined;
package/lib/components/form/LegendInput/index.d.ts CHANGED
@@ -10,15 +10,13 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
10
10
  renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
11
11
  renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
12
12
  unwrapped?: boolean | undefined;
13
- containerProps?: (({
13
+ containerProps?: ({
14
14
  [x: string]: any;
15
15
  [x: number]: any;
16
16
  [x: symbol]: any;
17
17
  } & {
18
18
  theme?: import("styled-components").DefaultTheme | undefined;
19
- } & ({} | {
20
- children?: React.ReactNode;
21
- })) & {
19
+ } & {
22
20
  as?: string | React.ComponentType<any> | undefined;
23
21
  forwardedAs?: string | React.ComponentType<any> | undefined;
24
22
  }) | undefined;
package/lib/components/form/NumberInput/index.d.ts CHANGED
@@ -7,15 +7,13 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
7
7
  renderLeft?: React.ReactNode | ((props: InputProps<number | undefined>) => React.ReactNode);
8
8
  renderRight?: React.ReactNode | ((props: InputProps<number | undefined>) => React.ReactNode);
9
9
  unwrapped?: boolean | undefined;
10
- containerProps?: (({
10
+ containerProps?: ({
11
11
  [x: string]: any;
12
12
  [x: number]: any;
13
13
  [x: symbol]: any;
14
14
  } & {
15
15
  theme?: import("styled-components").DefaultTheme | undefined;
16
- } & ({} | {
17
- children?: React.ReactNode;
18
- })) & {
16
+ } & {
19
17
  as?: string | React.ComponentType<any> | undefined;
20
18
  forwardedAs?: string | React.ComponentType<any> | undefined;
21
19
  }) | undefined;
package/lib/components/form/QrCodeInput/index.d.ts CHANGED
@@ -7,15 +7,13 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
7
7
  renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
8
8
  renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
9
9
  unwrapped?: boolean | undefined;
10
- containerProps?: (({
10
+ containerProps?: ({
11
11
  [x: string]: any;
12
12
  [x: number]: any;
13
13
  [x: symbol]: any;
14
14
  } & {
15
15
  theme?: import("styled-components").DefaultTheme | undefined;
16
- } & ({} | {
17
- children?: React.ReactNode;
18
- })) & {
16
+ } & {
19
17
  as?: string | React.ComponentType<any> | undefined;
20
18
  forwardedAs?: string | React.ComponentType<any> | undefined;
21
19
  }) | undefined;
package/lib/components/form/QuantityInput/index.d.ts CHANGED
@@ -7,15 +7,13 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
7
7
  renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
8
8
  renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
9
9
  unwrapped?: boolean | undefined;
10
- containerProps?: (({
10
+ containerProps?: ({
11
11
  [x: string]: any;
12
12
  [x: number]: any;
13
13
  [x: symbol]: any;
14
14
  } & {
15
15
  theme?: import("styled-components").DefaultTheme | undefined;
16
- } & ({} | {
17
- children?: React.ReactNode;
18
- })) & {
16
+ } & {
19
17
  as?: string | React.ComponentType<any> | undefined;
20
18
  forwardedAs?: string | React.ComponentType<any> | undefined;
21
19
  }) | undefined;
package/lib/components/form/SearchInput/index.d.ts CHANGED
@@ -7,15 +7,13 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
7
7
  renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
8
8
  renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
9
9
  unwrapped?: boolean | undefined;
10
- containerProps?: (({
10
+ containerProps?: ({
11
11
  [x: string]: any;
12
12
  [x: number]: any;
13
13
  [x: symbol]: any;
14
14
  } & {
15
15
  theme?: import("styled-components").DefaultTheme | undefined;
16
- } & ({} | {
17
- children?: React.ReactNode;
18
- })) & {
16
+ } & {
19
17
  as?: string | React.ComponentType<any> | undefined;
20
18
  forwardedAs?: string | React.ComponentType<any> | undefined;
21
19
  }) | undefined;
package/lib/components/layout/Box/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { BaseStyledProps } from "../../styled";
2
2
  export declare type BoxProps = BaseStyledProps;
3
- declare const Box: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
3
+ declare const Box: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
4
4
  columnGap?: string | number | undefined;
5
5
  rowGap?: string | number | undefined;
6
6
  color?: string | undefined;
package/lib/components/layout/Flex/index.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { BaseStyledProps } from "../../styled";
2
2
  export declare type FlexBoxProps = BaseStyledProps;
3
- declare const FlexBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
3
+ declare const FlexBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
4
4
  columnGap?: string | number | undefined;
5
5
  rowGap?: string | number | undefined;
6
6
  color?: string | undefined;
7
- }, "overflow" | "p" | "color" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
7
+ }, "overflow" | "p" | "color" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
8
8
  export default FlexBox;
package/lib/components/layout/Popin/index.d.ts CHANGED
@@ -13,7 +13,7 @@ export declare type PopinHeaderProps = BaseStyledProps & {
13
13
  declare const PopinWrapper: {
14
14
  ({ children, menuPortalTarget, ...popinProps }: PopinProps): React.ReactElement;
15
15
  Header: ({ children, onClose, onBack, ...props }: PopinHeaderProps) => JSX.Element;
16
- Body: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
16
+ Body: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
17
17
  columnGap?: string | number | undefined;
18
18
  rowGap?: string | number | undefined;
19
19
  color?: string | undefined;
@@ -22,13 +22,13 @@ declare const PopinWrapper: {
22
22
  flexDirection: string;
23
23
  flex: number;
24
24
  overflow: string;
25
- }, "overflow" | "p" | "color" | "as" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
26
- Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
25
+ }, "overflow" | "p" | "color" | "as" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
26
+ Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
27
27
  columnGap?: string | number | undefined;
28
28
  rowGap?: string | number | undefined;
29
29
  color?: string | undefined;
30
30
  } & {
31
31
  as: string;
32
- }, "overflow" | "p" | "color" | "as" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
32
+ }, "overflow" | "p" | "color" | "as" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
33
33
  };
34
34
  export default PopinWrapper;
package/lib/components/loaders/InfiniteLoader/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { SizeProps } from "styled-system";
3
- declare const Loader: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
3
+ declare const Loader: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
4
4
  export declare type Props = React.ComponentProps<typeof Loader> & {
5
5
  color?: string;
6
6
  };
package/lib/components/navigation/Aside/index.d.ts CHANGED
@@ -6,10 +6,10 @@ export declare type Props = React.PropsWithChildren<{
6
6
  }> & React.ComponentProps<typeof Wrapper>;
7
7
  interface ExtraWrapperProps extends ColorProps, LayoutProps, TypographyProps {
8
8
  }
9
- declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
9
+ declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
10
10
  columnGap?: string | number | undefined;
11
11
  rowGap?: string | number | undefined;
12
12
  color?: string | undefined;
13
- } & ExtraWrapperProps, "overflow" | "p" | "color" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
13
+ } & ExtraWrapperProps, "overflow" | "p" | "color" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
14
14
  export default function Aside({ header, footer, children, ...props }: Props): JSX.Element;
15
15
  export {};
package/lib/components/navigation/progress/Stepper/index.d.ts CHANGED
@@ -52,7 +52,7 @@ export declare type StepProps = {
52
52
  export declare const Item: {
53
53
  Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
54
54
  mx: string;
55
- } & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "mx">;
55
+ } & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "mx">;
56
56
  Spacer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
57
57
  Current: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
58
58
  backgroundColor: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/react-ui",
3
- "version": "0.7.5-monorepo.3",
3
+ "version": "0.7.6-nightly.0",
4
4
  "description": "Ledger Live - Desktop UI",
5
5
  "author": "Ledger Live Team <team-live@ledger.fr>",
6
6
  "repository": "https://github.com/LedgerHQ/ui",
@@ -34,8 +34,8 @@
34
34
  ],
35
35
  "dependencies": {
36
36
  "@floating-ui/react-dom": "^0.4.0",
37
- "@ledgerhq/icons-ui": "^0.2.4-monorepo.3",
38
- "@ledgerhq/ui-shared": "^0.1.6-monorepo.3",
37
+ "@ledgerhq/icons-ui": "^0.2.5-nightly.0",
38
+ "@ledgerhq/ui-shared": "^0.1.7-nightly.0",
39
39
  "@tippyjs/react": "^4.2.6",
40
40
  "@types/color": "^3.0.2",
41
41
  "@types/react": "~17.0.37",
@@ -61,14 +61,19 @@
61
61
  "styled-components": "^5.3.3"
62
62
  },
63
63
  "devDependencies": {
64
+ "@babel/core": "7",
64
65
  "@storybook/addon-actions": "^6.3.6",
65
66
  "@storybook/addon-essentials": "^6.3.6",
66
67
  "@storybook/addon-links": "^6.3.6",
67
68
  "@storybook/react": "^6.3.6",
68
69
  "@svgr/core": "^5.5.0",
70
+ "@svgr/plugin-svgo": "*",
71
+ "@types/hoist-non-react-statics": "^3.3.1",
69
72
  "@types/react-is": "^17.0.3",
70
73
  "@typescript-eslint/eslint-plugin": "5.3.1",
71
- "@typescript-eslint/parser": "^5.12.1",
74
+ "@typescript-eslint/parser": "^5.22.0",
75
+ "babel-loader": "^8.0.0",
76
+ "csstype": "^3.0.11",
72
77
  "esbuild": "^0.13.13",
73
78
  "eslint": "8.2.0",
74
79
  "eslint-config-prettier": "^8.3.0",
@@ -83,23 +88,18 @@
83
88
  "styled-components": "^5.3.3",
84
89
  "tiny-glob": "^0.2.9",
85
90
  "typescript": "^4.3.5",
86
- "@babel/core": "7",
87
- "@svgr/plugin-svgo": "*",
88
- "babel-loader": "^8.0.0",
89
91
  "webpack": "*"
90
92
  },
91
93
  "scripts": {
92
94
  "storybook": "start-storybook -p 6006 -s ./src",
93
- "build-storybook": "npm run build:icons && npm run build:storybook",
94
95
  "build": "tsc -p tsconfig.prod.json && node scripts/transpile && node scripts/postBuild",
95
- "watch": "tsc --watch",
96
- "build:icons": "node -e \"process.env['VERCEL_BUILD'] ? process.exit(1) : process.exit(0)\" || (cd ../icons && npm run build)",
96
+ "prebuild:storybook": "pnpm -F ui-shared -F icons-ui build",
97
97
  "build:storybook": "build-storybook -s ./src",
98
+ "watch": "tsc --watch",
98
99
  "clean": "rimraf lib",
99
100
  "lint": "eslint src --ext .js,.jsx,.ts,.tsx --cache",
100
- "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix --cache",
101
+ "lint:fix": "pnpm lint --fix",
101
102
  "typecheck": "tsc --p . --noEmit",
102
103
  "test": "pnpm -w -F ui test:react"
103
- },
104
- "readme": "# `@ledgerhq/react-ui`\n\n[![build](https://github.com/LedgerHQ/ui/actions/workflows/react.yml/badge.svg)](https://github.com/LedgerHQ/ui/actions/workflows/react.yml)\n[![npm](https://img.shields.io/npm/v/@ledgerhq/react-ui)](https://www.npmjs.com/package/@ledgerhq/react-ui)\n[![storybook](https://img.shields.io/badge/Storybook-📚-61DBFB)](https://ledger-live-ui-react.vercel.app)\n\n### Design and interface resources for React\n\n#### This package contains [React](https://reactjs.org/) components and styles built on top of our design system and used internally at [Ledger](https://www.ledger.com/).\n\n## Reference\n\n**[🔗 Storybook](https://ledger-live-ui-react.vercel.app/)**\n\n## Installation\n\n### Package\n\n```sh\nnpm i @ledgerhq/react-ui\n```\n\n### Peer dependencies\n\nThis library uses [styled components](https://styled-components.com/) heavily and relies on it being installed separately (to avoid package duplication).\n\n```sh\nnpm i styled-components\n```\n\nAnd (obviously) if React packages are not already installed:\n\n```sh\nnpm i react react-dom\n```\n\n## Usage\n\n### Provider\n\nBefore using the library components, the style provider must be imported and rendered once to provide the components with the right context.\n\n```tsx\nimport { StyleProvider } from \"@ledgerhq/react-ui\";\n\nfunction Root({ children }) {\n // Selected theme palette can be either \"dark\" or \"light\".\n return <StyleProvider selectedPalette=\"light\">{children}</StyleProvider>;\n}\n```\n\n### Components\n\nImport the components from `@ledgerhq/react-ui`.\n\n```tsx\nimport { Text, Flex, Logos } from \"@ledgerhq/react-ui\";\n\nfunction Hello() {\n return (\n <Flex flexDirection=\"column\" alignItems=\"center\" rowGap={12} p={12}>\n <Text color=\"neutral.c100\">\n <Logos.LedgerLiveRegular />\n </Text>\n <Text variant=\"h1\">Hello, world!</Text>\n </Flex>\n );\n}\n```\n\n### Fonts (optional but recommended)\n\nLedger fonts can be either imported or added manually to your project.\n\nAfter picking a method add the `fontsPath` property to the `StyleProvider` component to automatically generate\n`@font-face` blocks and register the `Inter` and `Alpha` font families.\n\n```tsx\n// Create a global css font style that will import the required fonts based on the fontsPath prefix.\n<StyleProvider fontsPath=\"assets/fonts\">\n```\n\n#### Import\n\nUsing the import requires you to use a bundler to export and save the files to the target folder.\n\n```js\nimport \"@ledgerhq/react-ui/assets/fonts\";\n```\n\nWith webpack 5 the rule below will process the font files and save them in the `src/assets/fonts` folder.\n\n```js\n{\n test: /\\.woff2/,\n type: \"asset/resource\",\n generator: {\n filename: \"assets/fonts/[name].woff2\",\n },\n},\n```\n\n#### Scoped Imports\n\nIf you are using a loader that saves the fonts with custom names (for instance when using `create-react-app`), you can use the `fontMappings` prop to map the font names.\n\n```js\n// These imports return the path to the public folder where the loader saves the fonts during the build.\nimport HMAlphaMono from \"@ledgerhq/react-ui/assets/fonts/HMAlphaMono-Medium.woff2\";\nimport InterBold from \"@ledgerhq/react-ui/assets/fonts/Inter-Bold.woff2\";\nimport InterExtraBold from \"@ledgerhq/react-ui/assets/fonts/Inter-ExtraBold.woff2\";\nimport InterExtraLight from \"@ledgerhq/react-ui/assets/fonts/Inter-ExtraLight-BETA.woff2\";\nimport InterLight from \"@ledgerhq/react-ui/assets/fonts/Inter-Light-BETA.woff2\";\nimport InterMedium from \"@ledgerhq/react-ui/assets/fonts/Inter-Medium.woff2\";\nimport InterRegular from \"@ledgerhq/react-ui/assets/fonts/Inter-Regular.woff2\";\nimport InterSemiBold from \"@ledgerhq/react-ui/assets/fonts/Inter-SemiBold.woff2\";\n\n// Map the font names with the file path.\nconst fontMap = {\n \"HMAlphaMono-Medium\": HMAlphaMono,\n \"Inter-Bold\": InterBold,\n \"Inter-ExtraBold\": InterExtraBold,\n \"Inter-ExtraLight-BETA\": InterExtraLight,\n \"Inter-Light-BETA\": InterLight,\n \"Inter-Medium\": InterMedium,\n \"Inter-Regular\": InterRegular,\n \"Inter-SemiBold\": InterSemiBold,\n};\n\n// The substring call is used to make the path relative (removes the prepending /).\nconst fontMappings = (name) => fontMap[name].substring(1);\n\n/* … */\n\n<StyleProvider fontPath=\"path/to/fonts\" fontMappings={fontMappings}>\n```\n\n#### Manually\n\nThe `.woff2` font files are located in the `src/assets/fonts` folder.\nYou can host them yourself, use a CDN (see below) or process them with a bundler by importing them.\n\nThe important thing is to register fonts by adding `@font-face` blocks for the `Inter` and `Alpha` font families.\n\nFor instance using the `unpkg.com` CDN:\n\n```css\n@font-face {\n font-family: \"Alpha\";\n src: url(\"https://unpkg.com/@ledgerhq/react-ui/assets/fonts/HMAlphaMono-Medium.woff2\") format(\"woff2\");\n font-weight: 100;\n font-style: normal;\n}\n```\n\n## Minimal Working Example\n\n[🌍 Hosted here.](https://codesandbox.io/s/ledger-live-react-ui-forked-1tvm7?file=/src/App.js)\n\n_Assuming dependencies, webpack and babel (or equivalents) are installed and configured._\n\n```tsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"@ledgerhq/react-ui/assets/fonts\"; // all fonts are consumed by the bundler and outputted to /assets\nimport { StyleProvider, Text, Logos, Flex, Switch } from \"@ledgerhq/react-ui\";\n\nfunction Root() {\n const [palette, setPalette] = React.useState(\"light\");\n const isLight = palette === \"light\";\n\n return (\n <StyleProvider fontsPath=\"assets\" selectedPalette={palette}>\n <Flex flexDirection=\"column\" alignItems=\"center\" rowGap={12} p={12}>\n <Text color=\"neutral.c100\">\n <Logos.LedgerLiveRegular />\n </Text>\n <Text variant=\"h1\">Hello, world!</Text>\n <Switch\n name=\"select-theme\"\n checked={isLight}\n onChange={() => setPalette(() => (isLight ? \"dark\" : \"light\"))}\n />\n </Flex>\n </StyleProvider>\n );\n}\n\nReactDOM.render(<Root />, document.getElementById(\"react-root\"));\n```\n\n<img width=\"300\" alt=\"exapmple\" src=\"https://user-images.githubusercontent.com/86958797/137143696-6dffdb16-83fa-4a4e-9bd0-a76fde4f82be.gif\" />\n\n### Contributing\n\nCheck the [contributing guide here](https://github.com/LedgerHQ/ui/blob/main/packages/react/CONTRIBUTING.md).\n"
104
+ }
105
105
  }