@metamask-previews/design-system-react 0.4.0-preview.6197867 → 0.5.0-preview.00974dd
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.
- package/CHANGELOG.md +19 -1
- package/dist/components/AvatarBase/AvatarBase.cjs +1 -1
- package/dist/components/AvatarBase/AvatarBase.cjs.map +1 -1
- package/dist/components/AvatarBase/AvatarBase.mjs +1 -1
- package/dist/components/AvatarBase/AvatarBase.mjs.map +1 -1
- package/dist/components/Box/Box.cjs +4 -2
- package/dist/components/Box/Box.cjs.map +1 -1
- package/dist/components/Box/Box.d.cts.map +1 -1
- package/dist/components/Box/Box.d.mts.map +1 -1
- package/dist/components/Box/Box.mjs +4 -2
- package/dist/components/Box/Box.mjs.map +1 -1
- package/dist/components/Box/Box.types.cjs.map +1 -1
- package/dist/components/Box/Box.types.d.cts +7 -0
- package/dist/components/Box/Box.types.d.cts.map +1 -1
- package/dist/components/Box/Box.types.d.mts +7 -0
- package/dist/components/Box/Box.types.d.mts.map +1 -1
- package/dist/components/Box/Box.types.mjs.map +1 -1
- package/dist/components/ButtonHero/ButtonHero.cjs +45 -0
- package/dist/components/ButtonHero/ButtonHero.cjs.map +1 -0
- package/dist/components/ButtonHero/ButtonHero.d.cts +3 -0
- package/dist/components/ButtonHero/ButtonHero.d.cts.map +1 -0
- package/dist/components/ButtonHero/ButtonHero.d.mts +3 -0
- package/dist/components/ButtonHero/ButtonHero.d.mts.map +1 -0
- package/dist/components/ButtonHero/ButtonHero.mjs +26 -0
- package/dist/components/ButtonHero/ButtonHero.mjs.map +1 -0
- package/dist/{types/make-props-optional.cjs → components/ButtonHero/ButtonHero.types.cjs} +1 -1
- package/dist/components/ButtonHero/ButtonHero.types.cjs.map +1 -0
- package/dist/components/ButtonHero/ButtonHero.types.d.cts +3 -0
- package/dist/components/ButtonHero/ButtonHero.types.d.cts.map +1 -0
- package/dist/components/ButtonHero/ButtonHero.types.d.mts +3 -0
- package/dist/components/ButtonHero/ButtonHero.types.d.mts.map +1 -0
- package/dist/components/ButtonHero/ButtonHero.types.mjs +2 -0
- package/dist/components/ButtonHero/ButtonHero.types.mjs.map +1 -0
- package/dist/components/ButtonHero/index.cjs +8 -0
- package/dist/components/ButtonHero/index.cjs.map +1 -0
- package/dist/components/ButtonHero/index.d.cts +4 -0
- package/dist/components/ButtonHero/index.d.cts.map +1 -0
- package/dist/components/ButtonHero/index.d.mts +4 -0
- package/dist/components/ButtonHero/index.d.mts.map +1 -0
- package/dist/components/ButtonHero/index.mjs +3 -0
- package/dist/components/ButtonHero/index.mjs.map +1 -0
- package/dist/components/Text/Text.types.cjs.map +1 -1
- package/dist/components/Text/Text.types.d.cts +1 -1
- package/dist/components/Text/Text.types.d.mts +1 -1
- package/dist/components/Text/Text.types.mjs.map +1 -1
- package/dist/components/index.cjs +4 -1
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +2 -0
- package/dist/components/index.d.cts.map +1 -1
- package/dist/components/index.d.mts +2 -0
- package/dist/components/index.d.mts.map +1 -1
- package/dist/components/index.mjs +1 -0
- package/dist/components/index.mjs.map +1 -1
- package/dist/types/index.cjs +3 -3
- package/dist/types/index.cjs.map +1 -1
- package/dist/types/index.d.cts +2 -1
- package/dist/types/index.d.cts.map +1 -1
- package/dist/types/index.d.mts +2 -1
- package/dist/types/index.d.mts.map +1 -1
- package/dist/types/index.mjs +2 -1
- package/dist/types/index.mjs.map +1 -1
- package/package.json +11 -15
- package/dist/types/make-props-optional.cjs.map +0 -1
- package/dist/types/make-props-optional.d.cts +0 -4
- package/dist/types/make-props-optional.d.cts.map +0 -1
- package/dist/types/make-props-optional.d.mts +0 -4
- package/dist/types/make-props-optional.d.mts.map +0 -1
- package/dist/types/make-props-optional.mjs +0 -2
- package/dist/types/make-props-optional.mjs.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.5.0]
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- Added `asChild` functionality to Box component ([#834](https://github.com/MetaMask/metamask-design-system/pull/834))
|
|
15
|
+
|
|
16
|
+
## [0.4.1]
|
|
17
|
+
|
|
18
|
+
### Fixed
|
|
19
|
+
|
|
20
|
+
- Removed unnecessary peer dependencies ([#828](https://github.com/MetaMask/metamask-design-system/pull/828))
|
|
21
|
+
- Bump @metamask/utils from 11.7.0 to 11.8.0 ([#827](https://github.com/MetaMask/metamask-design-system/pull/827))
|
|
22
|
+
- Bump npm and yarn dependencies ([#829](https://github.com/MetaMask/metamask-design-system/pull/829))
|
|
23
|
+
- Bump vite from 5.4.19 to 5.4.20 ([#826](https://github.com/MetaMask/metamask-design-system/pull/826))
|
|
24
|
+
|
|
10
25
|
## [0.4.0]
|
|
11
26
|
|
|
12
27
|
### Added
|
|
@@ -15,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
15
30
|
|
|
16
31
|
### Fixed
|
|
17
32
|
|
|
33
|
+
- Fixed Avatar components shrinking in flex layouts ([#825](https://github.com/MetaMask/metamask-design-system/pull/825))
|
|
18
34
|
- Jazzicon, Blockies and Maskicon icon generation for CAIP-10 addresses ([#816](https://github.com/MetaMask/metamask-design-system/pull/816))
|
|
19
35
|
|
|
20
36
|
## [0.3.1]
|
|
@@ -79,7 +95,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
79
95
|
- Full TypeScript support with type definitions and enums
|
|
80
96
|
- Tailwind CSS integration with design token support
|
|
81
97
|
|
|
82
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.
|
|
98
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.5.0...HEAD
|
|
99
|
+
[0.5.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.4.1...@metamask/design-system-react@0.5.0
|
|
100
|
+
[0.4.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.4.0...@metamask/design-system-react@0.4.1
|
|
83
101
|
[0.4.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.3.1...@metamask/design-system-react@0.4.0
|
|
84
102
|
[0.3.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.3.0...@metamask/design-system-react@0.3.1
|
|
85
103
|
[0.3.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.2.0...@metamask/design-system-react@0.3.0
|
|
@@ -34,7 +34,7 @@ exports.AvatarBase = (0, react_1.forwardRef)(({ children, fallbackText, fallback
|
|
|
34
34
|
const Component = asChild ? react_slot_1.Slot : 'div';
|
|
35
35
|
const mergedClassName = (0, tw_merge_1.twMerge)(
|
|
36
36
|
// Base styles
|
|
37
|
-
'inline-flex
|
|
37
|
+
'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section', shape === types_1.AvatarBaseShape.Circle
|
|
38
38
|
? 'rounded-full'
|
|
39
39
|
: AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],
|
|
40
40
|
// Size
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qDAA4C;AAC5C,+CAA0C;AAE1C,iDAA8D;AAC9D,uDAA+C;AAC/C,4CAAmE;AAEnE,qEAKgC;AAGnB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,GAAG,uBAAe,CAAC,MAAM,EAC9B,OAAO,EACP,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,
|
|
1
|
+
{"version":3,"file":"AvatarBase.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qDAA4C;AAC5C,+CAA0C;AAE1C,iDAA8D;AAC9D,uDAA+C;AAC/C,4CAAmE;AAEnE,qEAKgC;AAGnB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,GAAG,uBAAe,CAAC,MAAM,EAC9B,OAAO,EACP,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,6EAA6E,EAC7E,KAAK,KAAK,uBAAe,CAAC,MAAM;QAC9B,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,sEAA+C,CAAC,IAAI,CAAC;IACzD,OAAO;IACP,SAAS;QACP,CAAC,CAAC,qEAA8C,CAAC,IAAI,CAAC;QACtD,CAAC,CAAC,2DAAoC,CAAC,IAAI,CAAC;IAC9C,SAAS;IACT,SAAS,IAAI,wDAAiC,CAAC,IAAI,CAAC;IACpD,iBAAiB;IACjB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,IACrE,YAAY,CAAC,CAAC,CAAC,CACd,8BAAC,WAAI,IACH,OAAO,EAAE,kBAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,iBAAU,CAAC,MAAM,EAC7B,KAAK,EAAE,gBAAS,CAAC,SAAS,EAC1B,OAAO,QACP,SAAS,EAAC,WAAW,KACjB,iBAAiB;QAGrB,4CAAO,YAAY,CAAQ,CACtB,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, FontWeight, TextVariant, TextColor } from '../Text';\n\nimport {\n TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = forwardRef<HTMLDivElement, AvatarBaseProps>(\n (\n {\n children,\n fallbackText,\n fallbackTextProps,\n className,\n size = AvatarBaseSize.Md,\n shape = AvatarBaseShape.Circle,\n asChild,\n style,\n hasBorder = false,\n ...props\n },\n ref,\n ) => {\n const Component = asChild ? Slot : 'div';\n\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section',\n shape === AvatarBaseShape.Circle\n ? 'rounded-full'\n : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],\n // Size\n hasBorder\n ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]\n : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size],\n // Border\n hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size],\n // Custom classes\n className,\n );\n\n return (\n <Component ref={ref} className={mergedClassName} style={style} {...props}>\n {fallbackText ? (\n <Text\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n color={TextColor.TextMuted}\n asChild\n className=\"uppercase\"\n {...fallbackTextProps}\n >\n {/* asChild prop renders Text component as a span, it does not create an additional element */}\n <span>{fallbackText}</span>\n </Text>\n ) : (\n children\n )}\n </Component>\n );\n },\n);\n\nAvatarBase.displayName = 'AvatarBase';\n"]}
|
|
@@ -15,7 +15,7 @@ export const AvatarBase = forwardRef(({ children, fallbackText, fallbackTextProp
|
|
|
15
15
|
const Component = asChild ? Slot : 'div';
|
|
16
16
|
const mergedClassName = twMerge(
|
|
17
17
|
// Base styles
|
|
18
|
-
'inline-flex
|
|
18
|
+
'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section', shape === AvatarBaseShape.Circle
|
|
19
19
|
? 'rounded-full'
|
|
20
20
|
: TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],
|
|
21
21
|
// Size
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,6BAA6B;AAC5C,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AAC9D,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,0BAAgB;AAEnE,OAAO,EACL,oCAAoC,EACpC,8CAA8C,EAC9C,+CAA+C,EAC/C,iCAAiC,EAClC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,GAAG,eAAe,CAAC,MAAM,EAC9B,OAAO,EACP,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,
|
|
1
|
+
{"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,6BAA6B;AAC5C,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AAC9D,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,0BAAgB;AAEnE,OAAO,EACL,oCAAoC,EACpC,8CAA8C,EAC9C,+CAA+C,EAC/C,iCAAiC,EAClC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,GAAG,eAAe,CAAC,MAAM,EAC9B,OAAO,EACP,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,6EAA6E,EAC7E,KAAK,KAAK,eAAe,CAAC,MAAM;QAC9B,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,+CAA+C,CAAC,IAAI,CAAC;IACzD,OAAO;IACP,SAAS;QACP,CAAC,CAAC,8CAA8C,CAAC,IAAI,CAAC;QACtD,CAAC,CAAC,oCAAoC,CAAC,IAAI,CAAC;IAC9C,SAAS;IACT,SAAS,IAAI,iCAAiC,CAAC,IAAI,CAAC;IACpD,iBAAiB;IACjB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,IACrE,YAAY,CAAC,CAAC,CAAC,CACd,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,UAAU,CAAC,MAAM,EAC7B,KAAK,EAAE,SAAS,CAAC,SAAS,EAC1B,OAAO,QACP,SAAS,EAAC,WAAW,KACjB,iBAAiB;QAGrB,kCAAO,YAAY,CAAQ,CACtB,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, FontWeight, TextVariant, TextColor } from '../Text';\n\nimport {\n TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = forwardRef<HTMLDivElement, AvatarBaseProps>(\n (\n {\n children,\n fallbackText,\n fallbackTextProps,\n className,\n size = AvatarBaseSize.Md,\n shape = AvatarBaseShape.Circle,\n asChild,\n style,\n hasBorder = false,\n ...props\n },\n ref,\n ) => {\n const Component = asChild ? Slot : 'div';\n\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section',\n shape === AvatarBaseShape.Circle\n ? 'rounded-full'\n : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],\n // Size\n hasBorder\n ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]\n : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size],\n // Border\n hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size],\n // Custom classes\n className,\n );\n\n return (\n <Component ref={ref} className={mergedClassName} style={style} {...props}>\n {fallbackText ? (\n <Text\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n color={TextColor.TextMuted}\n asChild\n className=\"uppercase\"\n {...fallbackTextProps}\n >\n {/* asChild prop renders Text component as a span, it does not create an additional element */}\n <span>{fallbackText}</span>\n </Text>\n ) : (\n children\n )}\n </Component>\n );\n },\n);\n\nAvatarBase.displayName = 'AvatarBase';\n"]}
|
|
@@ -24,10 +24,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.Box = void 0;
|
|
27
|
+
const react_slot_1 = require("@radix-ui/react-slot");
|
|
27
28
|
const react_1 = __importStar(require("react"));
|
|
28
29
|
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
29
30
|
const Box_constants_1 = require("./Box.constants.cjs");
|
|
30
|
-
exports.Box = (0, react_1.forwardRef)(({ flexDirection, flexWrap, gap, alignItems, justifyContent, margin, marginTop, marginRight, marginBottom, marginLeft, marginHorizontal, marginVertical, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingHorizontal, paddingVertical, borderWidth, borderColor, backgroundColor, className = '', style, children, ...props }, ref) => {
|
|
31
|
+
exports.Box = (0, react_1.forwardRef)(({ flexDirection, flexWrap, gap, alignItems, justifyContent, margin, marginTop, marginRight, marginBottom, marginLeft, marginHorizontal, marginVertical, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingHorizontal, paddingVertical, borderWidth, borderColor, backgroundColor, className = '', style, asChild, children, ...props }, ref) => {
|
|
32
|
+
const Component = asChild ? react_slot_1.Slot : 'div';
|
|
31
33
|
const mergedClassName = (0, tw_merge_1.twMerge)(flexDirection ? 'flex' : '', flexDirection, flexWrap, gap !== undefined ? Box_constants_1.TWCLASSMAP_BOX_GAP[gap] : '', alignItems, justifyContent, margin !== undefined ? Box_constants_1.TWCLASSMAP_BOX_MARGIN[margin] : '', marginTop !== undefined ? Box_constants_1.TWCLASSMAP_BOX_MARGIN_TOP[marginTop] : '', marginRight !== undefined ? Box_constants_1.TWCLASSMAP_BOX_MARGIN_RIGHT[marginRight] : '', marginBottom !== undefined
|
|
32
34
|
? Box_constants_1.TWCLASSMAP_BOX_MARGIN_BOTTOM[marginBottom]
|
|
33
35
|
: '', marginLeft !== undefined ? Box_constants_1.TWCLASSMAP_BOX_MARGIN_LEFT[marginLeft] : '', marginHorizontal !== undefined
|
|
@@ -43,7 +45,7 @@ exports.Box = (0, react_1.forwardRef)(({ flexDirection, flexWrap, gap, alignItem
|
|
|
43
45
|
: '', paddingVertical !== undefined
|
|
44
46
|
? Box_constants_1.TWCLASSMAP_BOX_PADDING_VERTICAL[paddingVertical]
|
|
45
47
|
: '', borderWidth !== undefined ? Box_constants_1.TWCLASSMAP_BOX_BORDER_WIDTH[borderWidth] : '', borderColor, backgroundColor, className);
|
|
46
|
-
return (react_1.default.createElement(
|
|
48
|
+
return (react_1.default.createElement(Component, { ref: ref, className: mergedClassName, style: style, ...props }, children));
|
|
47
49
|
});
|
|
48
50
|
exports.Box.displayName = 'Box';
|
|
49
51
|
//# sourceMappingURL=Box.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.cjs","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,uDAA+C;AAE/C,uDAiByB;AAGZ,QAAA,GAAG,GAAG,IAAA,kBAAU,EAC3B,CACE,EACE,aAAa,EACb,QAAQ,EACR,GAAG,EACH,UAAU,EACV,cAAc,EACd,MAAM,EACN,SAAS,EACT,WAAW,EACX,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,OAAO,EACP,UAAU,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,WAAW,EACX,eAAe,EACf,SAAS,GAAG,EAAE,EACd,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACC,EACX,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAC3B,aAAa,EACb,QAAQ,EACR,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,kCAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,EAChD,UAAU,EACV,cAAc,EACd,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,qCAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,EACzD,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,yCAAyB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,EACnE,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,2CAA2B,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,EACzE,YAAY,KAAK,SAAS;QACxB,CAAC,CAAC,4CAA4B,CAAC,YAAY,CAAC;QAC5C,CAAC,CAAC,EAAE,EACN,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,0CAA0B,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,EACtE,gBAAgB,KAAK,SAAS;QAC5B,CAAC,CAAC,gDAAgC,CAAC,gBAAgB,CAAC;QACpD,CAAC,CAAC,EAAE,EACN,cAAc,KAAK,SAAS;QAC1B,CAAC,CAAC,8CAA8B,CAAC,cAAc,CAAC;QAChD,CAAC,CAAC,EAAE,EACN,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,sCAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAC5D,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,0CAA0B,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,EACtE,YAAY,KAAK,SAAS;QACxB,CAAC,CAAC,4CAA4B,CAAC,YAAY,CAAC;QAC5C,CAAC,CAAC,EAAE,EACN,aAAa,KAAK,SAAS;QACzB,CAAC,CAAC,6CAA6B,CAAC,aAAa,CAAC;QAC9C,CAAC,CAAC,EAAE,EACN,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,2CAA2B,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,EACzE,iBAAiB,KAAK,SAAS;QAC7B,CAAC,CAAC,iDAAiC,CAAC,iBAAiB,CAAC;QACtD,CAAC,CAAC,EAAE,EACN,eAAe,KAAK,SAAS;QAC3B,CAAC,CAAC,+CAA+B,CAAC,eAAe,CAAC;QAClD,CAAC,CAAC,EAAE,EACN,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,2CAA2B,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,EACzE,WAAW,EACX,eAAe,EACf,SAAS,CACV,CAAC;IAEF,OAAO,CACL,
|
|
1
|
+
{"version":3,"file":"Box.cjs","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\n\nimport {\n TWCLASSMAP_BOX_GAP,\n TWCLASSMAP_BOX_MARGIN,\n TWCLASSMAP_BOX_MARGIN_TOP,\n TWCLASSMAP_BOX_MARGIN_RIGHT,\n TWCLASSMAP_BOX_MARGIN_BOTTOM,\n TWCLASSMAP_BOX_MARGIN_LEFT,\n TWCLASSMAP_BOX_MARGIN_HORIZONTAL,\n TWCLASSMAP_BOX_MARGIN_VERTICAL,\n TWCLASSMAP_BOX_PADDING,\n TWCLASSMAP_BOX_PADDING_TOP,\n TWCLASSMAP_BOX_PADDING_RIGHT,\n TWCLASSMAP_BOX_PADDING_BOTTOM,\n TWCLASSMAP_BOX_PADDING_LEFT,\n TWCLASSMAP_BOX_PADDING_HORIZONTAL,\n TWCLASSMAP_BOX_PADDING_VERTICAL,\n TWCLASSMAP_BOX_BORDER_WIDTH,\n} from './Box.constants';\nimport type { BoxProps } from './Box.types';\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n (\n {\n flexDirection,\n flexWrap,\n gap,\n alignItems,\n justifyContent,\n margin,\n marginTop,\n marginRight,\n marginBottom,\n marginLeft,\n marginHorizontal,\n marginVertical,\n padding,\n paddingTop,\n paddingRight,\n paddingBottom,\n paddingLeft,\n paddingHorizontal,\n paddingVertical,\n borderWidth,\n borderColor,\n backgroundColor,\n className = '',\n style,\n asChild,\n children,\n ...props\n }: BoxProps,\n ref,\n ) => {\n const Component = asChild ? Slot : 'div';\n\n const mergedClassName = twMerge(\n flexDirection ? 'flex' : '',\n flexDirection,\n flexWrap,\n gap !== undefined ? TWCLASSMAP_BOX_GAP[gap] : '',\n alignItems,\n justifyContent,\n margin !== undefined ? TWCLASSMAP_BOX_MARGIN[margin] : '',\n marginTop !== undefined ? TWCLASSMAP_BOX_MARGIN_TOP[marginTop] : '',\n marginRight !== undefined ? TWCLASSMAP_BOX_MARGIN_RIGHT[marginRight] : '',\n marginBottom !== undefined\n ? TWCLASSMAP_BOX_MARGIN_BOTTOM[marginBottom]\n : '',\n marginLeft !== undefined ? TWCLASSMAP_BOX_MARGIN_LEFT[marginLeft] : '',\n marginHorizontal !== undefined\n ? TWCLASSMAP_BOX_MARGIN_HORIZONTAL[marginHorizontal]\n : '',\n marginVertical !== undefined\n ? TWCLASSMAP_BOX_MARGIN_VERTICAL[marginVertical]\n : '',\n padding !== undefined ? TWCLASSMAP_BOX_PADDING[padding] : '',\n paddingTop !== undefined ? TWCLASSMAP_BOX_PADDING_TOP[paddingTop] : '',\n paddingRight !== undefined\n ? TWCLASSMAP_BOX_PADDING_RIGHT[paddingRight]\n : '',\n paddingBottom !== undefined\n ? TWCLASSMAP_BOX_PADDING_BOTTOM[paddingBottom]\n : '',\n paddingLeft !== undefined ? TWCLASSMAP_BOX_PADDING_LEFT[paddingLeft] : '',\n paddingHorizontal !== undefined\n ? TWCLASSMAP_BOX_PADDING_HORIZONTAL[paddingHorizontal]\n : '',\n paddingVertical !== undefined\n ? TWCLASSMAP_BOX_PADDING_VERTICAL[paddingVertical]\n : '',\n borderWidth !== undefined ? TWCLASSMAP_BOX_BORDER_WIDTH[borderWidth] : '',\n borderColor,\n backgroundColor,\n className,\n );\n\n return (\n <Component ref={ref} className={mergedClassName} style={style} {...props}>\n {children}\n </Component>\n );\n },\n);\n\nBox.displayName = 'Box';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.d.cts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Box.d.cts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAsB1C,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAoB;AAE5C,eAAO,MAAM,GAAG,8FAkFf,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.d.mts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Box.d.mts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAsB1C,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAoB;AAE5C,eAAO,MAAM,GAAG,8FAkFf,CAAC"}
|
|
@@ -4,11 +4,13 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
7
8
|
import $React, { forwardRef } from "react";
|
|
8
9
|
const React = $importDefault($React);
|
|
9
10
|
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
10
11
|
import { TWCLASSMAP_BOX_GAP, TWCLASSMAP_BOX_MARGIN, TWCLASSMAP_BOX_MARGIN_TOP, TWCLASSMAP_BOX_MARGIN_RIGHT, TWCLASSMAP_BOX_MARGIN_BOTTOM, TWCLASSMAP_BOX_MARGIN_LEFT, TWCLASSMAP_BOX_MARGIN_HORIZONTAL, TWCLASSMAP_BOX_MARGIN_VERTICAL, TWCLASSMAP_BOX_PADDING, TWCLASSMAP_BOX_PADDING_TOP, TWCLASSMAP_BOX_PADDING_RIGHT, TWCLASSMAP_BOX_PADDING_BOTTOM, TWCLASSMAP_BOX_PADDING_LEFT, TWCLASSMAP_BOX_PADDING_HORIZONTAL, TWCLASSMAP_BOX_PADDING_VERTICAL, TWCLASSMAP_BOX_BORDER_WIDTH } from "./Box.constants.mjs";
|
|
11
|
-
export const Box = forwardRef(({ flexDirection, flexWrap, gap, alignItems, justifyContent, margin, marginTop, marginRight, marginBottom, marginLeft, marginHorizontal, marginVertical, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingHorizontal, paddingVertical, borderWidth, borderColor, backgroundColor, className = '', style, children, ...props }, ref) => {
|
|
12
|
+
export const Box = forwardRef(({ flexDirection, flexWrap, gap, alignItems, justifyContent, margin, marginTop, marginRight, marginBottom, marginLeft, marginHorizontal, marginVertical, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingHorizontal, paddingVertical, borderWidth, borderColor, backgroundColor, className = '', style, asChild, children, ...props }, ref) => {
|
|
13
|
+
const Component = asChild ? Slot : 'div';
|
|
12
14
|
const mergedClassName = twMerge(flexDirection ? 'flex' : '', flexDirection, flexWrap, gap !== undefined ? TWCLASSMAP_BOX_GAP[gap] : '', alignItems, justifyContent, margin !== undefined ? TWCLASSMAP_BOX_MARGIN[margin] : '', marginTop !== undefined ? TWCLASSMAP_BOX_MARGIN_TOP[marginTop] : '', marginRight !== undefined ? TWCLASSMAP_BOX_MARGIN_RIGHT[marginRight] : '', marginBottom !== undefined
|
|
13
15
|
? TWCLASSMAP_BOX_MARGIN_BOTTOM[marginBottom]
|
|
14
16
|
: '', marginLeft !== undefined ? TWCLASSMAP_BOX_MARGIN_LEFT[marginLeft] : '', marginHorizontal !== undefined
|
|
@@ -24,7 +26,7 @@ export const Box = forwardRef(({ flexDirection, flexWrap, gap, alignItems, justi
|
|
|
24
26
|
: '', paddingVertical !== undefined
|
|
25
27
|
? TWCLASSMAP_BOX_PADDING_VERTICAL[paddingVertical]
|
|
26
28
|
: '', borderWidth !== undefined ? TWCLASSMAP_BOX_BORDER_WIDTH[borderWidth] : '', borderColor, backgroundColor, className);
|
|
27
|
-
return (React.createElement(
|
|
29
|
+
return (React.createElement(Component, { ref: ref, className: mergedClassName, style: style, ...props }, children));
|
|
28
30
|
});
|
|
29
31
|
Box.displayName = 'Box';
|
|
30
32
|
//# sourceMappingURL=Box.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.mjs","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Box.mjs","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\n\nimport {\n TWCLASSMAP_BOX_GAP,\n TWCLASSMAP_BOX_MARGIN,\n TWCLASSMAP_BOX_MARGIN_TOP,\n TWCLASSMAP_BOX_MARGIN_RIGHT,\n TWCLASSMAP_BOX_MARGIN_BOTTOM,\n TWCLASSMAP_BOX_MARGIN_LEFT,\n TWCLASSMAP_BOX_MARGIN_HORIZONTAL,\n TWCLASSMAP_BOX_MARGIN_VERTICAL,\n TWCLASSMAP_BOX_PADDING,\n TWCLASSMAP_BOX_PADDING_TOP,\n TWCLASSMAP_BOX_PADDING_RIGHT,\n TWCLASSMAP_BOX_PADDING_BOTTOM,\n TWCLASSMAP_BOX_PADDING_LEFT,\n TWCLASSMAP_BOX_PADDING_HORIZONTAL,\n TWCLASSMAP_BOX_PADDING_VERTICAL,\n TWCLASSMAP_BOX_BORDER_WIDTH,\n} from './Box.constants';\nimport type { BoxProps } from './Box.types';\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n (\n {\n flexDirection,\n flexWrap,\n gap,\n alignItems,\n justifyContent,\n margin,\n marginTop,\n marginRight,\n marginBottom,\n marginLeft,\n marginHorizontal,\n marginVertical,\n padding,\n paddingTop,\n paddingRight,\n paddingBottom,\n paddingLeft,\n paddingHorizontal,\n paddingVertical,\n borderWidth,\n borderColor,\n backgroundColor,\n className = '',\n style,\n asChild,\n children,\n ...props\n }: BoxProps,\n ref,\n ) => {\n const Component = asChild ? Slot : 'div';\n\n const mergedClassName = twMerge(\n flexDirection ? 'flex' : '',\n flexDirection,\n flexWrap,\n gap !== undefined ? TWCLASSMAP_BOX_GAP[gap] : '',\n alignItems,\n justifyContent,\n margin !== undefined ? TWCLASSMAP_BOX_MARGIN[margin] : '',\n marginTop !== undefined ? TWCLASSMAP_BOX_MARGIN_TOP[marginTop] : '',\n marginRight !== undefined ? TWCLASSMAP_BOX_MARGIN_RIGHT[marginRight] : '',\n marginBottom !== undefined\n ? TWCLASSMAP_BOX_MARGIN_BOTTOM[marginBottom]\n : '',\n marginLeft !== undefined ? TWCLASSMAP_BOX_MARGIN_LEFT[marginLeft] : '',\n marginHorizontal !== undefined\n ? TWCLASSMAP_BOX_MARGIN_HORIZONTAL[marginHorizontal]\n : '',\n marginVertical !== undefined\n ? TWCLASSMAP_BOX_MARGIN_VERTICAL[marginVertical]\n : '',\n padding !== undefined ? TWCLASSMAP_BOX_PADDING[padding] : '',\n paddingTop !== undefined ? TWCLASSMAP_BOX_PADDING_TOP[paddingTop] : '',\n paddingRight !== undefined\n ? TWCLASSMAP_BOX_PADDING_RIGHT[paddingRight]\n : '',\n paddingBottom !== undefined\n ? TWCLASSMAP_BOX_PADDING_BOTTOM[paddingBottom]\n : '',\n paddingLeft !== undefined ? TWCLASSMAP_BOX_PADDING_LEFT[paddingLeft] : '',\n paddingHorizontal !== undefined\n ? TWCLASSMAP_BOX_PADDING_HORIZONTAL[paddingHorizontal]\n : '',\n paddingVertical !== undefined\n ? TWCLASSMAP_BOX_PADDING_VERTICAL[paddingVertical]\n : '',\n borderWidth !== undefined ? TWCLASSMAP_BOX_BORDER_WIDTH[borderWidth] : '',\n borderColor,\n backgroundColor,\n className,\n );\n\n return (\n <Component ref={ref} className={mergedClassName} style={style} {...props}>\n {children}\n </Component>\n );\n },\n);\n\nBox.displayName = 'Box';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.types.cjs","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type {\n BoxFlexDirection,\n BoxFlexWrap,\n BoxSpacing,\n BoxBorderWidth,\n BoxAlignItems,\n BoxJustifyContent,\n BoxBackgroundColor,\n BoxBorderColor,\n} from '../../types';\n\nexport type BoxProps = ComponentProps<'div'> & {\n /**\n * The flex-direction style of the component.\n */\n flexDirection?: BoxFlexDirection;\n /**\n * The flex-wrap style of the component.\n */\n flexWrap?: BoxFlexWrap;\n /**\n * The gap between the component's children.\n * Use 0-12 for a gap of 0px-48px.\n */\n gap?: BoxSpacing;\n /**\n * The align-items style of the component.\n */\n alignItems?: BoxAlignItems;\n /**\n * The justify-content style of the component.\n */\n justifyContent?: BoxJustifyContent;\n /**\n * The margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n margin?: BoxSpacing;\n /**\n * The top margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginTop?: BoxSpacing;\n /**\n * The right margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginRight?: BoxSpacing;\n /**\n * The bottom margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginBottom?: BoxSpacing;\n /**\n * The left margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginLeft?: BoxSpacing;\n /**\n * The horizontal margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginHorizontal?: BoxSpacing;\n /**\n * The vertical margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginVertical?: BoxSpacing;\n /**\n * The padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n padding?: BoxSpacing;\n /**\n * The top padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingTop?: BoxSpacing;\n /**\n * The right padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingRight?: BoxSpacing;\n /**\n * The bottom padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingBottom?: BoxSpacing;\n /**\n * The left padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingLeft?: BoxSpacing;\n /**\n * The horizontal padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingHorizontal?: BoxSpacing;\n /**\n * The vertical padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingVertical?: BoxSpacing;\n /**\n * The border width of the component.\n * Use 0, 1, 2, 4, or 8 for border width of 0px, 1px, 2px, 4px, or 8px.\n */\n borderWidth?: BoxBorderWidth;\n /**\n * The border color of the component.\n */\n borderColor?: BoxBorderColor;\n /**\n * The background color of the component.\n */\n backgroundColor?: BoxBackgroundColor;\n /**\n * Optional prop for additional CSS classes to be applied to the Box component.\n */\n className?: string;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"Box.types.cjs","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type {\n BoxFlexDirection,\n BoxFlexWrap,\n BoxSpacing,\n BoxBorderWidth,\n BoxAlignItems,\n BoxJustifyContent,\n BoxBackgroundColor,\n BoxBorderColor,\n} from '../../types';\n\nexport type BoxProps = ComponentProps<'div'> & {\n /**\n * The flex-direction style of the component.\n */\n flexDirection?: BoxFlexDirection;\n /**\n * The flex-wrap style of the component.\n */\n flexWrap?: BoxFlexWrap;\n /**\n * The gap between the component's children.\n * Use 0-12 for a gap of 0px-48px.\n */\n gap?: BoxSpacing;\n /**\n * The align-items style of the component.\n */\n alignItems?: BoxAlignItems;\n /**\n * The justify-content style of the component.\n */\n justifyContent?: BoxJustifyContent;\n /**\n * The margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n margin?: BoxSpacing;\n /**\n * The top margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginTop?: BoxSpacing;\n /**\n * The right margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginRight?: BoxSpacing;\n /**\n * The bottom margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginBottom?: BoxSpacing;\n /**\n * The left margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginLeft?: BoxSpacing;\n /**\n * The horizontal margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginHorizontal?: BoxSpacing;\n /**\n * The vertical margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginVertical?: BoxSpacing;\n /**\n * The padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n padding?: BoxSpacing;\n /**\n * The top padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingTop?: BoxSpacing;\n /**\n * The right padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingRight?: BoxSpacing;\n /**\n * The bottom padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingBottom?: BoxSpacing;\n /**\n * The left padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingLeft?: BoxSpacing;\n /**\n * The horizontal padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingHorizontal?: BoxSpacing;\n /**\n * The vertical padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingVertical?: BoxSpacing;\n /**\n * The border width of the component.\n * Use 0, 1, 2, 4, or 8 for border width of 0px, 1px, 2px, 4px, or 8px.\n */\n borderWidth?: BoxBorderWidth;\n /**\n * The border color of the component.\n */\n borderColor?: BoxBorderColor;\n /**\n * The background color of the component.\n */\n backgroundColor?: BoxBackgroundColor;\n /**\n * Optional prop for additional CSS classes to be applied to the Box component.\n */\n className?: string;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a div element\n *\n * @default false\n */\n asChild?: boolean;\n};\n"]}
|
|
@@ -109,5 +109,12 @@ export type BoxProps = ComponentProps<'div'> & {
|
|
|
109
109
|
* Optional prop for additional CSS classes to be applied to the Box component.
|
|
110
110
|
*/
|
|
111
111
|
className?: string;
|
|
112
|
+
/**
|
|
113
|
+
* Optional boolean that determines if the component should merge its props onto its immediate child
|
|
114
|
+
* instead of rendering a div element
|
|
115
|
+
*
|
|
116
|
+
* @default false
|
|
117
|
+
*/
|
|
118
|
+
asChild?: boolean;
|
|
112
119
|
};
|
|
113
120
|
//# sourceMappingURL=Box.types.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.types.d.cts","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACf,8BAAoB;AAErB,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;;OAGG;IACH,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Box.types.d.cts","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACf,8BAAoB;AAErB,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;;OAGG;IACH,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
|
|
@@ -109,5 +109,12 @@ export type BoxProps = ComponentProps<'div'> & {
|
|
|
109
109
|
* Optional prop for additional CSS classes to be applied to the Box component.
|
|
110
110
|
*/
|
|
111
111
|
className?: string;
|
|
112
|
+
/**
|
|
113
|
+
* Optional boolean that determines if the component should merge its props onto its immediate child
|
|
114
|
+
* instead of rendering a div element
|
|
115
|
+
*
|
|
116
|
+
* @default false
|
|
117
|
+
*/
|
|
118
|
+
asChild?: boolean;
|
|
112
119
|
};
|
|
113
120
|
//# sourceMappingURL=Box.types.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.types.d.mts","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACf,8BAAoB;AAErB,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;;OAGG;IACH,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Box.types.d.mts","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACf,8BAAoB;AAErB,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;;OAGG;IACH,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.types.mjs","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type {\n BoxFlexDirection,\n BoxFlexWrap,\n BoxSpacing,\n BoxBorderWidth,\n BoxAlignItems,\n BoxJustifyContent,\n BoxBackgroundColor,\n BoxBorderColor,\n} from '../../types';\n\nexport type BoxProps = ComponentProps<'div'> & {\n /**\n * The flex-direction style of the component.\n */\n flexDirection?: BoxFlexDirection;\n /**\n * The flex-wrap style of the component.\n */\n flexWrap?: BoxFlexWrap;\n /**\n * The gap between the component's children.\n * Use 0-12 for a gap of 0px-48px.\n */\n gap?: BoxSpacing;\n /**\n * The align-items style of the component.\n */\n alignItems?: BoxAlignItems;\n /**\n * The justify-content style of the component.\n */\n justifyContent?: BoxJustifyContent;\n /**\n * The margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n margin?: BoxSpacing;\n /**\n * The top margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginTop?: BoxSpacing;\n /**\n * The right margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginRight?: BoxSpacing;\n /**\n * The bottom margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginBottom?: BoxSpacing;\n /**\n * The left margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginLeft?: BoxSpacing;\n /**\n * The horizontal margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginHorizontal?: BoxSpacing;\n /**\n * The vertical margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginVertical?: BoxSpacing;\n /**\n * The padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n padding?: BoxSpacing;\n /**\n * The top padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingTop?: BoxSpacing;\n /**\n * The right padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingRight?: BoxSpacing;\n /**\n * The bottom padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingBottom?: BoxSpacing;\n /**\n * The left padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingLeft?: BoxSpacing;\n /**\n * The horizontal padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingHorizontal?: BoxSpacing;\n /**\n * The vertical padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingVertical?: BoxSpacing;\n /**\n * The border width of the component.\n * Use 0, 1, 2, 4, or 8 for border width of 0px, 1px, 2px, 4px, or 8px.\n */\n borderWidth?: BoxBorderWidth;\n /**\n * The border color of the component.\n */\n borderColor?: BoxBorderColor;\n /**\n * The background color of the component.\n */\n backgroundColor?: BoxBackgroundColor;\n /**\n * Optional prop for additional CSS classes to be applied to the Box component.\n */\n className?: string;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"Box.types.mjs","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type {\n BoxFlexDirection,\n BoxFlexWrap,\n BoxSpacing,\n BoxBorderWidth,\n BoxAlignItems,\n BoxJustifyContent,\n BoxBackgroundColor,\n BoxBorderColor,\n} from '../../types';\n\nexport type BoxProps = ComponentProps<'div'> & {\n /**\n * The flex-direction style of the component.\n */\n flexDirection?: BoxFlexDirection;\n /**\n * The flex-wrap style of the component.\n */\n flexWrap?: BoxFlexWrap;\n /**\n * The gap between the component's children.\n * Use 0-12 for a gap of 0px-48px.\n */\n gap?: BoxSpacing;\n /**\n * The align-items style of the component.\n */\n alignItems?: BoxAlignItems;\n /**\n * The justify-content style of the component.\n */\n justifyContent?: BoxJustifyContent;\n /**\n * The margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n margin?: BoxSpacing;\n /**\n * The top margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginTop?: BoxSpacing;\n /**\n * The right margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginRight?: BoxSpacing;\n /**\n * The bottom margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginBottom?: BoxSpacing;\n /**\n * The left margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginLeft?: BoxSpacing;\n /**\n * The horizontal margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginHorizontal?: BoxSpacing;\n /**\n * The vertical margin of the component.\n * Use 0-12 for margin of 0px-48px.\n */\n marginVertical?: BoxSpacing;\n /**\n * The padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n padding?: BoxSpacing;\n /**\n * The top padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingTop?: BoxSpacing;\n /**\n * The right padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingRight?: BoxSpacing;\n /**\n * The bottom padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingBottom?: BoxSpacing;\n /**\n * The left padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingLeft?: BoxSpacing;\n /**\n * The horizontal padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingHorizontal?: BoxSpacing;\n /**\n * The vertical padding of the component.\n * Use 0-12 for padding of 0px-48px.\n */\n paddingVertical?: BoxSpacing;\n /**\n * The border width of the component.\n * Use 0, 1, 2, 4, or 8 for border width of 0px, 1px, 2px, 4px, or 8px.\n */\n borderWidth?: BoxBorderWidth;\n /**\n * The border color of the component.\n */\n borderColor?: BoxBorderColor;\n /**\n * The background color of the component.\n */\n backgroundColor?: BoxBackgroundColor;\n /**\n * Optional prop for additional CSS classes to be applied to the Box component.\n */\n className?: string;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a div element\n *\n * @default false\n */\n asChild?: boolean;\n};\n"]}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
exports.ButtonHero = void 0;
|
|
27
|
+
const react_1 = __importStar(require("react"));
|
|
28
|
+
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
29
|
+
const ButtonBase_1 = require("../ButtonBase/index.cjs");
|
|
30
|
+
exports.ButtonHero = (0, react_1.forwardRef)(({ className, isDisabled, isLoading, ...props }, ref) => {
|
|
31
|
+
const isInteractive = !(isDisabled || isLoading);
|
|
32
|
+
const mergedClassName = (0, tw_merge_1.twMerge)(
|
|
33
|
+
// Base hero styles - locked to light theme primary colors
|
|
34
|
+
'bg-primary-default text-primary-inverse',
|
|
35
|
+
// Loading state
|
|
36
|
+
isLoading && 'bg-primary-default-pressed',
|
|
37
|
+
// Hover/Active states - only applied when interactive
|
|
38
|
+
isInteractive && [
|
|
39
|
+
'hover:bg-primary-default-hover',
|
|
40
|
+
'active:bg-primary-default-pressed',
|
|
41
|
+
], 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', className);
|
|
42
|
+
return (react_1.default.createElement(ButtonBase_1.ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, isLoading: isLoading, "data-theme": "light", ...props }));
|
|
43
|
+
});
|
|
44
|
+
exports.ButtonHero.displayName = 'ButtonHero';
|
|
45
|
+
//# sourceMappingURL=ButtonHero.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonHero.cjs","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,uDAA+C;AAC/C,wDAA2C;AAI9B,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACtD,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,0DAA0D;IAC1D,yCAAyC;IACzC,gBAAgB;IAChB,SAAS,IAAI,4BAA4B;IACzC,sDAAsD;IACtD,aAAa,IAAI;QACf,gCAAgC;QAChC,mCAAmC;KACpC,EACD,oHAAoH,EACpH,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,gBACT,OAAO,KACd,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonBase } from '../ButtonBase';\n\nimport type { ButtonHeroProps } from './ButtonHero.types';\n\nexport const ButtonHero = forwardRef<HTMLButtonElement, ButtonHeroProps>(\n ({ className, isDisabled, isLoading, ...props }, ref) => {\n const isInteractive = !(isDisabled || isLoading);\n\n const mergedClassName = twMerge(\n // Base hero styles - locked to light theme primary colors\n 'bg-primary-default text-primary-inverse',\n // Loading state\n isLoading && 'bg-primary-default-pressed',\n // Hover/Active states - only applied when interactive\n isInteractive && [\n 'hover:bg-primary-default-hover',\n 'active:bg-primary-default-pressed',\n ],\n 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n data-theme=\"light\"\n {...props}\n />\n );\n },\n);\n\nButtonHero.displayName = 'ButtonHero';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonHero.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAO1C,eAAO,MAAM,UAAU,gIA6BtB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonHero.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAO1C,eAAO,MAAM,UAAU,gIA6BtB,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
function $importDefault(module) {
|
|
2
|
+
if (module?.__esModule) {
|
|
3
|
+
return module.default;
|
|
4
|
+
}
|
|
5
|
+
return module;
|
|
6
|
+
}
|
|
7
|
+
import $React, { forwardRef } from "react";
|
|
8
|
+
const React = $importDefault($React);
|
|
9
|
+
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
10
|
+
import { ButtonBase } from "../ButtonBase/index.mjs";
|
|
11
|
+
export const ButtonHero = forwardRef(({ className, isDisabled, isLoading, ...props }, ref) => {
|
|
12
|
+
const isInteractive = !(isDisabled || isLoading);
|
|
13
|
+
const mergedClassName = twMerge(
|
|
14
|
+
// Base hero styles - locked to light theme primary colors
|
|
15
|
+
'bg-primary-default text-primary-inverse',
|
|
16
|
+
// Loading state
|
|
17
|
+
isLoading && 'bg-primary-default-pressed',
|
|
18
|
+
// Hover/Active states - only applied when interactive
|
|
19
|
+
isInteractive && [
|
|
20
|
+
'hover:bg-primary-default-hover',
|
|
21
|
+
'active:bg-primary-default-pressed',
|
|
22
|
+
], 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', className);
|
|
23
|
+
return (React.createElement(ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, isLoading: isLoading, "data-theme": "light", ...props }));
|
|
24
|
+
});
|
|
25
|
+
ButtonHero.displayName = 'ButtonHero';
|
|
26
|
+
//# sourceMappingURL=ButtonHero.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonHero.mjs","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACtD,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,0DAA0D;IAC1D,yCAAyC;IACzC,gBAAgB;IAChB,SAAS,IAAI,4BAA4B;IACzC,sDAAsD;IACtD,aAAa,IAAI;QACf,gCAAgC;QAChC,mCAAmC;KACpC,EACD,oHAAoH,EACpH,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,gBACT,OAAO,KACd,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonBase } from '../ButtonBase';\n\nimport type { ButtonHeroProps } from './ButtonHero.types';\n\nexport const ButtonHero = forwardRef<HTMLButtonElement, ButtonHeroProps>(\n ({ className, isDisabled, isLoading, ...props }, ref) => {\n const isInteractive = !(isDisabled || isLoading);\n\n const mergedClassName = twMerge(\n // Base hero styles - locked to light theme primary colors\n 'bg-primary-default text-primary-inverse',\n // Loading state\n isLoading && 'bg-primary-default-pressed',\n // Hover/Active states - only applied when interactive\n isInteractive && [\n 'hover:bg-primary-default-hover',\n 'active:bg-primary-default-pressed',\n ],\n 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n data-theme=\"light\"\n {...props}\n />\n );\n },\n);\n\nButtonHero.displayName = 'ButtonHero';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonHero.types.cjs","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonBaseProps } from '../ButtonBase';\n\nexport type ButtonHeroProps = ButtonBaseProps;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonHero.types.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonHero.types.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonHero.types.mjs","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonBaseProps } from '../ButtonBase';\n\nexport type ButtonHeroProps = ButtonBaseProps;\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ButtonHeroSize = exports.ButtonHero = void 0;
|
|
4
|
+
var ButtonHero_1 = require("./ButtonHero.cjs");
|
|
5
|
+
Object.defineProperty(exports, "ButtonHero", { enumerable: true, get: function () { return ButtonHero_1.ButtonHero; } });
|
|
6
|
+
var types_1 = require("../../types/index.cjs");
|
|
7
|
+
Object.defineProperty(exports, "ButtonHeroSize", { enumerable: true, get: function () { return types_1.ButtonHeroSize; } });
|
|
8
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonHero/index.ts"],"names":[],"mappings":";;;AAAA,+CAA0C;AAAjC,wGAAA,UAAU,OAAA;AAEnB,+CAA6C;AAApC,uGAAA,cAAc,OAAA","sourcesContent":["export { ButtonHero } from './ButtonHero';\nexport type { ButtonHeroProps } from './ButtonHero.types';\nexport { ButtonHeroSize } from '../../types';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B;AAC1D,OAAO,EAAE,cAAc,EAAE,8BAAoB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B;AAC1D,OAAO,EAAE,cAAc,EAAE,8BAAoB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAE1C,OAAO,EAAE,cAAc,EAAE,8BAAoB","sourcesContent":["export { ButtonHero } from './ButtonHero';\nexport type { ButtonHeroProps } from './ButtonHero.types';\nexport { ButtonHeroSize } from '../../types';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.types.cjs","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n FontFamily,\n FontStyle,\n FontWeight,\n OverflowWrap,\n TextAlign,\n TextVariant,\n TextTransform,\n TextColor,\n} from '../../types';\n\nexport type TextProps = {\n /**\n * Optional prop for inline styles\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to change the font size of the component. The Text component uses responsive font sizes.\n * Different variants map to specific HTML elements by default.\n *\n * @default TextVariant.BodyMd\n */\n variant?: TextVariant;\n /**\n * The text content or elements to be rendered within the component.\n */\n children: React.ReactNode;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to control the font weight of the text.\n * Regular: 400\n * Medium: 500\n * Bold:
|
|
1
|
+
{"version":3,"file":"Text.types.cjs","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n FontFamily,\n FontStyle,\n FontWeight,\n OverflowWrap,\n TextAlign,\n TextVariant,\n TextTransform,\n TextColor,\n} from '../../types';\n\nexport type TextProps = {\n /**\n * Optional prop for inline styles\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to change the font size of the component. The Text component uses responsive font sizes.\n * Different variants map to specific HTML elements by default.\n *\n * @default TextVariant.BodyMd\n */\n variant?: TextVariant;\n /**\n * The text content or elements to be rendered within the component.\n */\n children: React.ReactNode;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to control the font weight of the text.\n * Regular: 400\n * Medium: 500\n * Bold: 600\n */\n fontWeight?: FontWeight;\n /**\n * Optional prop to adjust the font family.\n * Default: Geist\n * Accent: MM Sans\n * Hero: MM Poly\n */\n fontFamily?: FontFamily;\n /**\n * Optional prop to control the font style of the text.\n * Options: Normal, Italic\n */\n fontStyle?: FontStyle;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional prop that when true, adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop that sets the color of the text using predefined theme colors.\n *\n * @default TextColor.TextDefault\n */\n color?: TextColor;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.types.mjs","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n FontFamily,\n FontStyle,\n FontWeight,\n OverflowWrap,\n TextAlign,\n TextVariant,\n TextTransform,\n TextColor,\n} from '../../types';\n\nexport type TextProps = {\n /**\n * Optional prop for inline styles\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to change the font size of the component. The Text component uses responsive font sizes.\n * Different variants map to specific HTML elements by default.\n *\n * @default TextVariant.BodyMd\n */\n variant?: TextVariant;\n /**\n * The text content or elements to be rendered within the component.\n */\n children: React.ReactNode;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to control the font weight of the text.\n * Regular: 400\n * Medium: 500\n * Bold:
|
|
1
|
+
{"version":3,"file":"Text.types.mjs","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n FontFamily,\n FontStyle,\n FontWeight,\n OverflowWrap,\n TextAlign,\n TextVariant,\n TextTransform,\n TextColor,\n} from '../../types';\n\nexport type TextProps = {\n /**\n * Optional prop for inline styles\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to change the font size of the component. The Text component uses responsive font sizes.\n * Different variants map to specific HTML elements by default.\n *\n * @default TextVariant.BodyMd\n */\n variant?: TextVariant;\n /**\n * The text content or elements to be rendered within the component.\n */\n children: React.ReactNode;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to control the font weight of the text.\n * Regular: 400\n * Medium: 500\n * Bold: 600\n */\n fontWeight?: FontWeight;\n /**\n * Optional prop to adjust the font family.\n * Default: Geist\n * Accent: MM Sans\n * Hero: MM Poly\n */\n fontFamily?: FontFamily;\n /**\n * Optional prop to control the font style of the text.\n * Options: Normal, Italic\n */\n fontStyle?: FontStyle;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional prop that when true, adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop that sets the color of the text using predefined theme colors.\n *\n * @default TextColor.TextDefault\n */\n color?: TextColor;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n};\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Maskicon = exports.Jazzicon = exports.IconColor = exports.IconSize = exports.IconName = exports.Icon = exports.Checkbox = exports.ButtonIconSize = exports.ButtonIcon = exports.ButtonBaseSize = exports.ButtonBase = exports.ButtonVariant = exports.ButtonSize = exports.Button = exports.Box = exports.BoxBorderColor = exports.BoxBackgroundColor = exports.BoxJustifyContent = exports.BoxAlignItems = exports.BoxFlexWrap = exports.BoxFlexDirection = exports.Blockies = exports.BadgeWrapperPositionAnchorShape = exports.BadgeWrapperPosition = exports.BadgeWrapper = exports.BadgeStatusSize = exports.BadgeStatusStatus = exports.BadgeStatus = exports.BadgeNetwork = exports.BadgeIcon = exports.BadgeCountSize = exports.BadgeCount = exports.AvatarTokenSize = exports.AvatarToken = exports.AvatarNetworkSize = exports.AvatarNetwork = exports.AvatarIconSeverity = exports.AvatarIconSize = exports.AvatarIcon = exports.AvatarGroupVariant = exports.AvatarGroupSize = exports.AvatarGroup = exports.AvatarFaviconSize = exports.AvatarFavicon = exports.AvatarBaseShape = exports.AvatarBaseSize = exports.AvatarBase = exports.AvatarAccountVariant = exports.AvatarAccountSize = exports.AvatarAccount = void 0;
|
|
4
|
-
exports.TextButtonSize = exports.TextButton = exports.OverflowWrap = exports.TextTransform = exports.FontStyle = exports.FontFamily = exports.FontWeight = exports.TextAlign = exports.TextColor = exports.TextVariant = exports.Text = void 0;
|
|
4
|
+
exports.ButtonHeroSize = exports.ButtonHero = exports.TextButtonSize = exports.TextButton = exports.OverflowWrap = exports.TextTransform = exports.FontStyle = exports.FontFamily = exports.FontWeight = exports.TextAlign = exports.TextColor = exports.TextVariant = exports.Text = void 0;
|
|
5
5
|
var AvatarAccount_1 = require("./AvatarAccount/index.cjs");
|
|
6
6
|
Object.defineProperty(exports, "AvatarAccount", { enumerable: true, get: function () { return AvatarAccount_1.AvatarAccount; } });
|
|
7
7
|
Object.defineProperty(exports, "AvatarAccountSize", { enumerable: true, get: function () { return AvatarAccount_1.AvatarAccountSize; } });
|
|
@@ -92,4 +92,7 @@ Object.defineProperty(exports, "OverflowWrap", { enumerable: true, get: function
|
|
|
92
92
|
var TextButton_1 = require("./TextButton/index.cjs");
|
|
93
93
|
Object.defineProperty(exports, "TextButton", { enumerable: true, get: function () { return TextButton_1.TextButton; } });
|
|
94
94
|
Object.defineProperty(exports, "TextButtonSize", { enumerable: true, get: function () { return TextButton_1.TextButtonSize; } });
|
|
95
|
+
var ButtonHero_1 = require("./ButtonHero/index.cjs");
|
|
96
|
+
Object.defineProperty(exports, "ButtonHero", { enumerable: true, get: function () { return ButtonHero_1.ButtonHero; } });
|
|
97
|
+
Object.defineProperty(exports, "ButtonHeroSize", { enumerable: true, get: function () { return ButtonHero_1.ButtonHeroSize; } });
|
|
95
98
|
//# sourceMappingURL=index.cjs.map
|