@grantbii/design-system 1.13.9 → 1.13.11
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/core/archive/Badges.d.ts +1 -1
- package/core/archive/Badges.js +2 -2
- package/core/archive/Badges.js.map +1 -1
- package/core/archive/LinkButton.d.ts +1 -1
- package/core/archive/LinkButton.js +1 -1
- package/core/archive/LinkButton.js.map +1 -1
- package/core/archive/LocationIcon.js +1 -1
- package/core/archive/LocationIcon.js.map +1 -1
- package/core/archive/RadioButtons.d.ts +1 -1
- package/core/archive/RadioButtons.js +1 -1
- package/core/archive/RadioButtons.js.map +1 -1
- package/core/archive/YesNoOptions.js +1 -1
- package/core/archive/YesNoOptions.js.map +1 -1
- package/core/atoms/BrandLogo.js +1 -1
- package/core/atoms/BrandLogo.js.map +1 -1
- package/core/{foundations/colors.js → atoms/Color.js} +1 -1
- package/core/atoms/Color.js.map +1 -0
- package/core/atoms/Loader.js +2 -0
- package/core/atoms/Loader.js.map +1 -0
- package/core/atoms/Overlay.js +1 -1
- package/core/atoms/Overlay.js.map +1 -1
- package/core/{foundations/responsive.js → atoms/Responsive.js} +1 -1
- package/core/atoms/Responsive.js.map +1 -0
- package/core/{foundations/flags.js → atoms/RichIcon.js} +1 -1
- package/core/atoms/RichIcon.js.map +1 -0
- package/core/{foundations/icons.js → atoms/SystemIcon.js} +1 -1
- package/core/atoms/SystemIcon.js.map +1 -0
- package/core/{foundations/typography.d.ts → atoms/Typography.d.ts} +1 -1
- package/core/{foundations/typography.js → atoms/Typography.js} +1 -1
- package/core/atoms/Typography.js.map +1 -0
- package/core/atoms/index.d.ts +6 -6
- package/core/atoms/index.js +6 -6
- package/core/atoms/index.js.map +1 -1
- package/core/global/GlobalStyle.js +1 -1
- package/core/global/GlobalStyle.js.map +1 -1
- package/core/integrations/fragments.js +2 -2
- package/core/integrations/fragments.js.map +1 -1
- package/core/integrations/mappings.d.ts +1 -1
- package/core/integrations/mappings.js.map +1 -1
- package/core/{atoms → molecules}/Badge.d.ts +1 -1
- package/core/{atoms → molecules}/Badge.js +1 -1
- package/core/molecules/Badge.js.map +1 -0
- package/core/{atoms → molecules}/Button.d.ts +1 -1
- package/core/{atoms → molecules}/Button.js +1 -1
- package/core/molecules/Button.js.map +1 -0
- package/core/molecules/Checkbox.js.map +1 -0
- package/core/{atoms → molecules}/Input.d.ts +1 -1
- package/core/{atoms → molecules}/Input.js +2 -1
- package/core/molecules/Input.js.map +1 -0
- package/core/molecules/PageLoader.js +1 -1
- package/core/molecules/PageLoader.js.map +1 -1
- package/core/{atoms → molecules}/RadioButton.d.ts +1 -1
- package/core/molecules/RadioButton.js.map +1 -0
- package/core/{atoms → molecules}/Textarea.js +1 -1
- package/core/molecules/Textarea.js.map +1 -0
- package/core/molecules/index.d.ts +6 -0
- package/core/molecules/index.js +6 -0
- package/core/molecules/index.js.map +1 -1
- package/core/organisms/Dropdown.d.ts +1 -1
- package/core/organisms/Dropdown.js +2 -1
- package/core/organisms/Dropdown.js.map +1 -1
- package/core/organisms/FileDrop.js +2 -2
- package/core/organisms/FileDrop.js.map +1 -1
- package/core/organisms/GrantMatch/ActiveQueryFiles.js +2 -2
- package/core/organisms/GrantMatch/ActiveQueryFiles.js.map +1 -1
- package/core/organisms/GrantMatch/GrantMatchModal.js +2 -2
- package/core/organisms/GrantMatch/GrantMatchModal.js.map +1 -1
- package/core/organisms/GrantMatch/SearchBar.js +1 -1
- package/core/organisms/GrantMatch/SearchBar.js.map +1 -1
- package/core/organisms/Modal.js +3 -3
- package/core/organisms/Modal.js.map +1 -1
- package/core/shared.d.ts +1 -1
- package/core/shared.js +1 -1
- package/core/shared.js.map +1 -1
- package/core/templates/ErrorFallback.js +2 -2
- package/core/templates/ErrorFallback.js.map +1 -1
- package/core/types.js.map +1 -0
- package/index.d.ts +1 -1
- package/index.js +0 -1
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/stories/molecules/{Multiline.stories.js → Textarea.stories.js} +2 -2
- package/stories/molecules/Textarea.stories.js.map +1 -0
- package/tsconfig.tsbuildinfo +1 -1
- package/core/atoms/Badge.js.map +0 -1
- package/core/atoms/Button.js.map +0 -1
- package/core/atoms/Checkbox.js.map +0 -1
- package/core/atoms/Input.js.map +0 -1
- package/core/atoms/RadioButton.js.map +0 -1
- package/core/atoms/Textarea.js.map +0 -1
- package/core/foundations/colors.js.map +0 -1
- package/core/foundations/flags.js.map +0 -1
- package/core/foundations/icons.js.map +0 -1
- package/core/foundations/index.d.ts +0 -7
- package/core/foundations/index.js +0 -7
- package/core/foundations/index.js.map +0 -1
- package/core/foundations/loaders.js +0 -2
- package/core/foundations/loaders.js.map +0 -1
- package/core/foundations/responsive.js.map +0 -1
- package/core/foundations/types.js.map +0 -1
- package/core/foundations/typography.js.map +0 -1
- package/stories/molecules/Multiline.stories.js.map +0 -1
- /package/core/{foundations/colors.d.ts → atoms/Color.d.ts} +0 -0
- /package/core/{foundations/loaders.d.ts → atoms/Loader.d.ts} +0 -0
- /package/core/{foundations/responsive.d.ts → atoms/Responsive.d.ts} +0 -0
- /package/core/{foundations/flags.d.ts → atoms/RichIcon.d.ts} +0 -0
- /package/core/{foundations/icons.d.ts → atoms/SystemIcon.d.ts} +0 -0
- /package/core/{atoms → molecules}/Checkbox.d.ts +0 -0
- /package/core/{atoms → molecules}/Checkbox.js +0 -0
- /package/core/{atoms → molecules}/RadioButton.js +0 -0
- /package/core/{atoms → molecules}/Textarea.d.ts +0 -0
- /package/core/{foundations/types.d.ts → types.d.ts} +0 -0
- /package/core/{foundations/types.js → types.js} +0 -0
- /package/stories/molecules/{Multiline.stories.d.ts → Textarea.stories.d.ts} +0 -0
package/core/archive/Badges.d.ts
CHANGED
package/core/archive/Badges.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { createElement as _createElement } from "react";
|
|
3
3
|
import styled, { css } from "styled-components";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { Responsive } from "../atoms";
|
|
5
|
+
import Badge, {} from "../molecules/Badge";
|
|
6
6
|
const Badges = ({ allBadgeProps, scrollable, vertical }) => (_jsx(BaseBadges, { "$scrollable": scrollable, "$vertical": vertical, children: allBadgeProps.map((badgeProps, index) => (_createElement(Badge, { ...badgeProps, key: `badge-${index}` }))) }));
|
|
7
7
|
export default Badges;
|
|
8
8
|
const BaseBadges = styled.div `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badges.js","sourceRoot":"","sources":["../../../core/archive/Badges.tsx"],"names":[],"mappings":";;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Badges.js","sourceRoot":"","sources":["../../../core/archive/Badges.tsx"],"names":[],"mappings":";;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,KAAK,EAAE,EAAmB,MAAM,oBAAoB,CAAC;AAQ5D,MAAM,MAAM,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAe,EAAE,EAAE,CAAC,CACvE,KAAC,UAAU,mBAAc,UAAU,eAAa,QAAQ,YACrD,aAAa,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACxC,eAAC,KAAK,OAAK,UAAU,EAAE,GAAG,EAAE,SAAS,KAAK,EAAE,GAAI,CACjD,CAAC,GACS,CACd,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAgD;;oBAEzD,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;SACpE,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;;IAE3D,CAAC,EAAE,WAAW,GAAG,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAC/C,SAAS,CAAC,WAAW,EAAE,SAAS,CAAC;CACpC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,UAAmB,EAAE,QAAiB,EAAW,EAAE;IACpE,IAAI,QAAQ,IAAI,UAAU,EAAE,CAAC;QAC3B,OAAO,qBAAqB,CAAC;IAC/B,CAAC;SAAM,IAAI,QAAQ,EAAE,CAAC;QACpB,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,IAAI,UAAU,EAAE,CAAC;QACtB,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,CAAC;QACN,OAAO,yBAAyB,CAAC;IACnC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;oBAIb,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;qBAKlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;CAIvD,CAAC;AAEF,MAAM,uBAAuB,GAAG,GAAG,CAAA,EAAE,CAAC;AAEtC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;CAUlC,CAAC;AAEF,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;CAGpC,CAAC","sourcesContent":["import styled, { css, type RuleSet } from \"styled-components\";\nimport { Responsive } from \"../atoms\";\nimport Badge, { type BadgeProps } from \"../molecules/Badge\";\n\ntype BadgesProps = {\n allBadgeProps: BadgeProps[];\n scrollable?: boolean;\n vertical?: boolean;\n};\n\nconst Badges = ({ allBadgeProps, scrollable, vertical }: BadgesProps) => (\n <BaseBadges $scrollable={scrollable} $vertical={vertical}>\n {allBadgeProps.map((badgeProps, index) => (\n <Badge {...badgeProps} key={`badge-${index}`} />\n ))}\n </BaseBadges>\n);\n\nexport default Badges;\n\nconst BaseBadges = styled.div<{ $scrollable?: boolean; $vertical?: boolean }>`\n display: flex;\n flex-direction: ${({ $vertical = false }) => ($vertical ? \"column\" : \"row\")};\n gap: ${({ $vertical = false }) => ($vertical ? \"4px\" : \"8px\")};\n\n ${({ $scrollable = false, $vertical = false }) =>\n deriveCSS($scrollable, $vertical)}\n`;\n\nconst deriveCSS = (scrollable: boolean, vertical: boolean): RuleSet => {\n if (vertical && scrollable) {\n return ScrollableVerticalCSS;\n } else if (vertical) {\n return UnscrollableVerticalCSS;\n } else if (scrollable) {\n return ScrollableHorizontalCSS;\n } else {\n return UnscrollableHorizontalCSS;\n }\n};\n\nconst ScrollableVerticalCSS = css`\n overflow-y: auto;\n\n /* show 3 badges max */\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n /* 3.5 * 27px (badge height) + 2 * 4px (gap) = 89 */\n height: 103px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n /* 3.5 * 30px (badge height) + 2 * 4px (gap) = 113 */\n height: 113px;\n }\n`;\n\nconst UnscrollableVerticalCSS = css``;\n\nconst ScrollableHorizontalCSS = css`\n flex-wrap: nowrap;\n overflow-x: auto;\n\n /* hide scrollbar but still allow for scrolling */\n -ms-overflow-style: none;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n`;\n\nconst UnscrollableHorizontalCSS = css`\n flex-wrap: wrap;\n overflow-x: visible;\n`;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Link from "next/link";
|
|
3
|
-
import { Icons } from "../
|
|
3
|
+
import { Icons } from "../atoms";
|
|
4
4
|
import { BaseButton } from "../shared";
|
|
5
5
|
/**
|
|
6
6
|
* A link that looks like a button
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../core/archive/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAQ7B,OAAO,EAAE,KAAK,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../core/archive/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAQ7B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAmBvC;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,QAAQ,EACjB,GAAG,SAAS,EACI,EAAE,EAAE;IACpB,MAAM,YAAY,GAAG;QACnB,KAAK;QACL,QAAQ;QACR,SAAS;QACT,SAAS;QACT,eAAe;QACf,WAAW;QACX,KAAK;QACL,KAAK;KACN,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,KAAC,OAAO,OAAK,YAAY,GAAI,CAC9B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OAAK,SAAS,EAAE,MAAM,EAAE,MAAM,YACjC,KAAC,OAAO,OAAK,YAAY,GAAI,GACxB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC;AAa1B,MAAM,OAAO,GAAG,CAAC,EACf,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,GACQ,EAAE,EAAE,CAAC,CAClB,MAAC,UAAU,kBACG,SAAS,sBACH,eAAe,kBACnB,WAAW,YACjB,KAAK,YACL,KAAK,aAEZ,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,EACvD,KAAK,EACL,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC/C,CACd,CAAC","sourcesContent":["import Link from \"next/link\";\nimport type {\n AnchorHTMLAttributes,\n ComponentType,\n DetailedHTMLProps,\n HTMLAttributeAnchorTarget,\n ReactNode,\n} from \"react\";\nimport { Icons } from \"../atoms\";\nimport { BaseButton } from \"../shared\";\n\ntype LinkButtonProps = {\n label: ReactNode;\n href: string;\n disabled?: boolean;\n target?: HTMLAttributeAnchorTarget;\n LeftIcon?: ComponentType<Icons.IconProps>;\n RightIcon?: ComponentType<Icons.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n borderColor?: string;\n color?: string;\n width?: string;\n} & DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n>;\n\n/**\n * A link that looks like a button\n */\nconst LinkButton = ({\n label,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n borderColor,\n color,\n width,\n disabled,\n target = \"_blank\",\n ...linkProps\n}: LinkButtonProps) => {\n const contentProps = {\n label,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n borderColor,\n color,\n width,\n };\n\n return disabled ? (\n <Content {...contentProps} />\n ) : (\n <Link {...linkProps} target={target}>\n <Content {...contentProps} />\n </Link>\n );\n};\n\nexport default LinkButton;\n\ntype ContentProps = {\n label: ReactNode;\n LeftIcon?: ComponentType<Icons.IconProps>;\n RightIcon?: ComponentType<Icons.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n borderColor?: string;\n color?: string;\n width?: string;\n};\n\nconst Content = ({\n label,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n borderColor,\n color,\n width,\n}: ContentProps) => (\n <BaseButton\n $underline={underline}\n $backgroundColor={backgroundColor}\n $borderColor={borderColor}\n $color={color}\n $width={width}\n >\n {LeftIcon ? <LeftIcon color={color} size={20} /> : <></>}\n {label}\n {RightIcon ? <RightIcon color={color} size={20} /> : <></>}\n </BaseButton>\n);\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Location } from "@grantbii/ui-core/location/enums";
|
|
3
|
-
import { Flags, Icons } from "../
|
|
3
|
+
import { Flags, Icons } from "../atoms";
|
|
4
4
|
const LocationIcon = ({ location, width }) => {
|
|
5
5
|
if (location === Location.OTHERS || location === Location.UNKNOWN) {
|
|
6
6
|
return _jsx(Icons.GlobeIcon, { size: width });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LocationIcon.js","sourceRoot":"","sources":["../../../core/archive/LocationIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"LocationIcon.js","sourceRoot":"","sources":["../../../core/archive/LocationIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAOxC,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAqB,EAAe,EAAE;IAC3E,IAAI,QAAQ,KAAK,QAAQ,CAAC,MAAM,IAAI,QAAQ,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;QAClE,OAAO,KAAC,KAAK,CAAC,SAAS,IAAC,IAAI,EAAE,KAAK,GAAI,CAAC;IAC1C,CAAC;SAAM,CAAC;QACN,MAAM,IAAI,GAAG,iBAAiB,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;QACrD,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IAChC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,iBAAiB,GAEnB;IACF,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE;IAC9B,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE;IAC9B,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE;IAC7B,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,EAAE;IAChC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE;IAC1B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE;IAC1B,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE;IACnC,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,EAAE;IAClC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE;IAC3B,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE;CAC7B,CAAC","sourcesContent":["import { Location } from \"@grantbii/ui-core/location/enums\";\nimport type { JSX } from \"react\";\nimport { Flags, Icons } from \"../atoms\";\n\ntype LocationIconProps = {\n location: Location;\n width?: string | number;\n};\n\nconst LocationIcon = ({ location, width }: LocationIconProps): JSX.Element => {\n if (location === Location.OTHERS || location === Location.UNKNOWN) {\n return <Icons.GlobeIcon size={width} />;\n } else {\n const Flag = LOCATION_FLAG_MAP[location] ?? Flags.EU;\n return <Flag width={width} />;\n }\n};\n\nexport default LocationIcon;\n\nconst LOCATION_FLAG_MAP: {\n [location in Location]: Flags.FlagComponent;\n} = {\n [Location.SINGAPORE]: Flags.SG,\n [Location.HONG_KONG]: Flags.HK,\n [Location.MALAYSIA]: Flags.MY,\n [Location.SOUTH_KOREA]: Flags.KR,\n [Location.JAPAN]: Flags.JP,\n [Location.CHINA]: Flags.CN,\n [Location.UNITED_KINGDOM]: Flags.GB,\n [Location.UNITED_STATES]: Flags.US,\n [Location.OTHERS]: Flags.EU,\n [Location.UNKNOWN]: Flags.EU,\n};\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { DetailedHTMLProps, InputHTMLAttributes } from "react";
|
|
2
|
-
import type { Option } from "../
|
|
2
|
+
import type { Option } from "../types";
|
|
3
3
|
export type RadioOption = Option & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
|
|
4
4
|
type RadioButtonProps = {
|
|
5
5
|
name?: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { createElement as _createElement } from "react";
|
|
3
3
|
import styled from "styled-components";
|
|
4
|
-
import { RadioButton } from "../
|
|
4
|
+
import { RadioButton } from "../molecules";
|
|
5
5
|
const RadioButtons = ({ name, options }) => (_jsx(RadioGroup, { children: options.map(({ id, value, ...props }) => (_createElement(RadioButton, { ...props, key: `${name}-${value}`, id: id ? id : value, value: value, name: name }))) }));
|
|
6
6
|
export default RadioButtons;
|
|
7
7
|
const RadioGroup = styled.div `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../core/archive/RadioButtons.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../core/archive/RadioButtons.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAW3C,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CAC5D,KAAC,UAAU,cACR,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACxC,eAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,IAAI,IAAI,KAAK,EAAE,EACvB,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EACnB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,GACV,CACH,CAAC,GACS,CACd,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO5B,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { RadioButton } from \"../molecules\";\nimport type { Option } from \"../types\";\n\nexport type RadioOption = Option &\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\ntype RadioButtonProps = {\n name?: string;\n options: RadioOption[];\n};\n\nconst RadioButtons = ({ name, options }: RadioButtonProps) => (\n <RadioGroup>\n {options.map(({ id, value, ...props }) => (\n <RadioButton\n {...props}\n key={`${name}-${value}`}\n id={id ? id : value} // assume mutually exclusive values\n value={value}\n name={name}\n />\n ))}\n </RadioGroup>\n);\n\nexport default RadioButtons;\n\nconst RadioGroup = styled.div`\n display: flex;\n align-items: center;\n gap: 12px;\n\n white-space: nowrap;\n flex-wrap: wrap;\n`;\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { LogicValue } from "@grantbii/ui-core/grant/enums";
|
|
3
3
|
import styled from "styled-components";
|
|
4
|
-
import { RadioButton } from "../
|
|
4
|
+
import { RadioButton } from "../molecules";
|
|
5
5
|
const YesNoOptions = ({ name, yesProps, noProps, unsureProps, }) => (_jsxs(RadioGroup, { children: [_jsx(RadioButton, { ...yesProps, label: LogicValue.YES, value: LogicValue.YES, name: name }), _jsx(RadioButton, { ...noProps, label: LogicValue.NO, value: LogicValue.NO, name: name }), unsureProps ? (_jsx(RadioButton, { ...unsureProps, label: LogicValue.UNSURE, value: LogicValue.UNSURE, name: name })) : (_jsx(_Fragment, {}))] }));
|
|
6
6
|
export default YesNoOptions;
|
|
7
7
|
const RadioGroup = styled.div `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YesNoOptions.js","sourceRoot":"","sources":["../../../core/archive/YesNoOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"YesNoOptions.js","sourceRoot":"","sources":["../../../core/archive/YesNoOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAkB3C,MAAM,YAAY,GAAG,CAAC,EACpB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,GACO,EAAE,EAAE,CAAC,CACvB,MAAC,UAAU,eACT,KAAC,WAAW,OACN,QAAQ,EACZ,KAAK,EAAE,UAAU,CAAC,GAAG,EACrB,KAAK,EAAE,UAAU,CAAC,GAAG,EACrB,IAAI,EAAE,IAAI,GACV,EACF,KAAC,WAAW,OACN,OAAO,EACX,KAAK,EAAE,UAAU,CAAC,EAAE,EACpB,KAAK,EAAE,UAAU,CAAC,EAAE,EACpB,IAAI,EAAE,IAAI,GACV,EACD,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,WAAW,OACN,WAAW,EACf,KAAK,EAAE,UAAU,CAAC,MAAM,EACxB,KAAK,EAAE,UAAU,CAAC,MAAM,EACxB,IAAI,EAAE,IAAI,GACV,CACH,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACU,CACd,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG5B,CAAC","sourcesContent":["import { LogicValue } from \"@grantbii/ui-core/grant/enums\";\nimport type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { RadioButton } from \"../molecules\";\n\ntype YesNoOptionsProps = {\n name: string;\n yesProps: DetailedHTMLProps<\n InputHTMLAttributes<HTMLInputElement>,\n HTMLInputElement\n >;\n noProps: DetailedHTMLProps<\n InputHTMLAttributes<HTMLInputElement>,\n HTMLInputElement\n >;\n unsureProps?: DetailedHTMLProps<\n InputHTMLAttributes<HTMLInputElement>,\n HTMLInputElement\n >;\n};\n\nconst YesNoOptions = ({\n name,\n yesProps,\n noProps,\n unsureProps,\n}: YesNoOptionsProps) => (\n <RadioGroup>\n <RadioButton\n {...yesProps}\n label={LogicValue.YES}\n value={LogicValue.YES}\n name={name}\n />\n <RadioButton\n {...noProps}\n label={LogicValue.NO}\n value={LogicValue.NO}\n name={name}\n />\n {unsureProps ? (\n <RadioButton\n {...unsureProps}\n label={LogicValue.UNSURE}\n value={LogicValue.UNSURE}\n name={name}\n />\n ) : (\n <></>\n )}\n </RadioGroup>\n);\n\nexport default YesNoOptions;\n\nconst RadioGroup = styled.div`\n display: flex;\n gap: 12px;\n`;\n"]}
|
package/core/atoms/BrandLogo.js
CHANGED
|
@@ -3,7 +3,7 @@ import Image from "next/image";
|
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
import darkLogo from "../assets/logos/brand_logo-dark.webp";
|
|
5
5
|
import lightLogo from "../assets/logos/brand_logo-light.webp";
|
|
6
|
-
import { Responsive } from "../
|
|
6
|
+
import { Responsive } from "../atoms";
|
|
7
7
|
const BrandLogo = ({ isDarkTheme = true, alt = "Grantbii", }) => (_jsx(BrandImage, { src: isDarkTheme ? darkLogo : lightLogo, width: 250, height: 80, alt: alt, priority: true }));
|
|
8
8
|
export default BrandLogo;
|
|
9
9
|
const BrandImage = styled(Image) `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BrandLogo.js","sourceRoot":"","sources":["../../../core/atoms/BrandLogo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAC5D,OAAO,SAAS,MAAM,uCAAuC,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"BrandLogo.js","sourceRoot":"","sources":["../../../core/atoms/BrandLogo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAC5D,OAAO,SAAS,MAAM,uCAAuC,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAOtC,MAAM,SAAS,GAAG,CAAC,EACjB,WAAW,GAAG,IAAI,EAClB,GAAG,GAAG,UAAU,GACD,EAAE,EAAE,CAAC,CACpB,KAAC,UAAU,IACT,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACvC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,EAAE,EACV,GAAG,EAAE,GAAG,EACR,QAAQ,SACR,CACH,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACZ,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;qBAKlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;CAIvD,CAAC","sourcesContent":["import Image from \"next/image\";\nimport styled from \"styled-components\";\nimport darkLogo from \"../assets/logos/brand_logo-dark.webp\";\nimport lightLogo from \"../assets/logos/brand_logo-light.webp\";\nimport { Responsive } from \"../atoms\";\n\ntype BrandLogoProps = {\n isDarkTheme?: boolean;\n alt?: string;\n};\n\nconst BrandLogo = ({\n isDarkTheme = true,\n alt = \"Grantbii\",\n}: BrandLogoProps) => (\n <BrandImage\n src={isDarkTheme ? darkLogo : lightLogo}\n width={250}\n height={80}\n alt={alt}\n priority\n />\n);\n\nexport default BrandLogo;\n\nconst BrandImage = styled(Image)`\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n width: 125px;\n height: 40px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n width: 150px;\n height: 48px;\n }\n`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Color.js","sourceRoot":"","sources":["../../../core/atoms/Color.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,YAAY,EAAE,SAAS;IACvB,cAAc,EAAE,SAAS;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,4DAA4D;IAC5D,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,8CAA8C;IAC9C,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,kDAAkD;IAClD,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,qCAAqC;IACrC,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,OAAO,EAAE,WAAW;CACrB,CAAC","sourcesContent":["export const main = {\n grantbiiBlue: \"#16538A\",\n grantbiiOrange: \"#EBA338\",\n};\n\nexport const base = {\n black: \"#232022\",\n white: \"#FFFFFF\",\n};\n\nexport const neutral = {\n grey1: \"#999999\",\n grey2: \"#CCCCCC\",\n grey3: \"#EEEEEE\",\n grey4: \"#FAFAFA\",\n};\n\nexport const accent = {\n // usually includes dangerous, wrong or rejected information\n red1: \"#C02318\",\n red2: \"#F88E86\",\n red3: \"#FFE9E7\",\n // usually indicates warning, progressing, etc\n yellow1: \"#EDAB03\",\n yellow2: \"#F4CC68\",\n yellow3: \"#FFF9E8\",\n // usually indicates success, correct, passed, etc\n green1: \"#08A45E\",\n green2: \"#6BC89E\",\n green3: \"#EBFFF6\",\n green4: \"#F5FFFA\",\n // usually indicates info, no emotion\n blue1: \"#1878E4\",\n blue2: \"#74AEEF\",\n blue3: \"#ECF5FF\",\n};\n\nexport const typography = {\n blackHigh: \"#1A1A1A\",\n blackMedium: \"#666666\",\n blackLow: \"#B2B2B2\",\n whiteHigh: \"#FFFFFF\",\n whiteMedium: \"#F5F5F5\",\n whiteLow: \"#E5E5E5\",\n};\n\nexport const semantic = {\n overlay: \"#13131366\",\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../../core/atoms/Loader.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC","sourcesContent":["export * from \"react-spinners\";\n"]}
|
package/core/atoms/Overlay.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../core/atoms/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../core/atoms/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAA8B;;;;qBAInC,CAAC,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE,EAAE,CAChD,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;iBACvB,CAAC,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE,EAAE,CAC5C,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;;;;;;;;;;sBAUlB,MAAM,CAAC,QAAQ,CAAC,OAAO;CAC5C,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Colors } from \"../atoms\";\n\nconst Overlay = styled.div<{ $centerContent?: boolean }>`\n display: flex;\n flex-direction: column;\n\n justify-content: ${({ $centerContent = false }) =>\n $centerContent ? \"center\" : \"normal\"};\n align-items: ${({ $centerContent = false }) =>\n $centerContent ? \"center\" : \"normal\"};\n\n z-index: 9999;\n position: fixed;\n top: 0px;\n left: 0px;\n\n width: 100vw;\n height: 100vh;\n\n background-color: ${Colors.semantic.overlay};\n`;\n\nexport default Overlay;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Responsive.js","sourceRoot":"","sources":["../../../core/atoms/Responsive.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,QAAQ;CACjB,CAAC","sourcesContent":["export const WIDTH_BREAKPOINTS = {\n laptop: \"1024px\",\n};\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from "country-flag-icons/react/3x2";
|
|
2
|
-
//# sourceMappingURL=
|
|
2
|
+
//# sourceMappingURL=RichIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RichIcon.js","sourceRoot":"","sources":["../../../core/atoms/RichIcon.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC","sourcesContent":["export * from \"country-flag-icons/react/3x2\";\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from "@phosphor-icons/react";
|
|
2
|
-
//# sourceMappingURL=
|
|
2
|
+
//# sourceMappingURL=SystemIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SystemIcon.js","sourceRoot":"","sources":["../../../core/atoms/SystemIcon.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC","sourcesContent":["export * from \"@phosphor-icons/react\";\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,gBAAgB,GAAc;IACzC,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAc;IAC1C,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAc;IAC7C,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAc;IACxC,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAc;IAC1C,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC","sourcesContent":["import type { ScreenSize } from \"../types\";\n\ntype FontSizes = { [screenSize in ScreenSize]: string };\n\nexport const TITLE_FONT_SIZES: FontSizes = {\n small: \"22px\",\n large: \"24px\",\n};\n\nexport const HEADER_FONT_SIZES: FontSizes = {\n small: \"20px\",\n large: \"22px\",\n};\n\nexport const SUBHEADER_FONT_SIZES: FontSizes = {\n small: \"18px\",\n large: \"20px\",\n};\n\nexport const BODY_FONT_SIZES: FontSizes = {\n small: \"14px\",\n large: \"16px\",\n};\n\nexport const HELPER_FONT_SIZES: FontSizes = {\n small: \"12px\",\n large: \"14px\",\n};\n"]}
|
package/core/atoms/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export { default as Badge, type BadgeProps } from "./Badge";
|
|
2
1
|
export { default as BrandLogo } from "./BrandLogo";
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export { default as Input } from "./Input";
|
|
2
|
+
export * as Colors from "./Color";
|
|
3
|
+
export * as Loaders from "./Loader";
|
|
6
4
|
export { default as Overlay } from "./Overlay";
|
|
7
|
-
export
|
|
8
|
-
export
|
|
5
|
+
export * as Responsive from "./Responsive";
|
|
6
|
+
export * as Flags from "./RichIcon";
|
|
7
|
+
export * as Icons from "./SystemIcon";
|
|
8
|
+
export * as Typography from "./Typography";
|
package/core/atoms/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export { default as Badge } from "./Badge";
|
|
2
1
|
export { default as BrandLogo } from "./BrandLogo";
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export { default as Input } from "./Input";
|
|
2
|
+
export * as Colors from "./Color";
|
|
3
|
+
export * as Loaders from "./Loader";
|
|
6
4
|
export { default as Overlay } from "./Overlay";
|
|
7
|
-
export
|
|
8
|
-
export
|
|
5
|
+
export * as Responsive from "./Responsive";
|
|
6
|
+
export * as Flags from "./RichIcon";
|
|
7
|
+
export * as Icons from "./SystemIcon";
|
|
8
|
+
export * as Typography from "./Typography";
|
|
9
9
|
//# sourceMappingURL=index.js.map
|
package/core/atoms/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,KAAK,MAAM,MAAM,SAAS,CAAC;AAClC,OAAO,KAAK,OAAO,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC","sourcesContent":["export { default as BrandLogo } from \"./BrandLogo\";\nexport * as Colors from \"./Color\";\nexport * as Loaders from \"./Loader\";\nexport { default as Overlay } from \"./Overlay\";\nexport * as Responsive from \"./Responsive\";\nexport * as Flags from \"./RichIcon\";\nexport * as Icons from \"./SystemIcon\";\nexport * as Typography from \"./Typography\";\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../../core/global/GlobalStyle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,KAAK,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../../core/global/GlobalStyle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAC;AAEzC,MAAM,WAAW,GAAG,iBAAiB,CAAA;;;;;;;aAOxB,MAAM,CAAC,UAAU,CAAC,SAAS;kBACtB,MAAM,CAAC,IAAI,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDlC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { createGlobalStyle } from \"styled-components\";\nimport \"../assets/fonts/satoshi/css/satoshi.css\";\nimport * as Colors from \"../atoms/Color\";\n\nconst GlobalStyle = createGlobalStyle`\n html,\n body {\n max-width: 100vw;\n }\n\n body {\n color: ${Colors.typography.blackHigh};\n background: ${Colors.base.white};\n font-family: Satoshi;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n button,\n fieldset,\n textarea {\n all: unset;\n }\n\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n button:hover {\n cursor: pointer;\n }\n\n button:disabled {\n cursor: not-allowed;\n }\n\n li {\n list-style-position: inside;\n }\n\n li * {\n vertical-align: middle;\n }\n\n /* number textfield in Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* number textfield in Firefox */\n input[type=\"number\"] {\n -moz-appearance: textfield;\n appearance: textfield;\n }\n`;\n\nexport default GlobalStyle;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from "styled-components";
|
|
2
|
-
import { WIDTH_BREAKPOINTS } from "../
|
|
3
|
-
import { BODY_FONT_SIZES, HEADER_FONT_SIZES, HELPER_FONT_SIZES, SUBHEADER_FONT_SIZES, TITLE_FONT_SIZES, } from "../
|
|
2
|
+
import { WIDTH_BREAKPOINTS } from "../atoms/Responsive";
|
|
3
|
+
import { BODY_FONT_SIZES, HEADER_FONT_SIZES, HELPER_FONT_SIZES, SUBHEADER_FONT_SIZES, TITLE_FONT_SIZES, } from "../atoms/Typography";
|
|
4
4
|
export const SmallScreenOnly = css `
|
|
5
5
|
@media (width < ${WIDTH_BREAKPOINTS.laptop}) {
|
|
6
6
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fragments.js","sourceRoot":"","sources":["../../../core/integrations/fragments.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"fragments.js","sourceRoot":"","sources":["../../../core/integrations/fragments.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;oBACd,iBAAiB,CAAC,MAAM;;;;qBAIvB,iBAAiB,CAAC,MAAM;;;CAG5C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;oBACd,iBAAiB,CAAC,MAAM;;;;qBAIvB,iBAAiB,CAAC,MAAM;;;CAG5C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;oBACZ,iBAAiB,CAAC,MAAM;iBAC3B,gBAAgB,CAAC,KAAK;;;qBAGlB,iBAAiB,CAAC,MAAM;iBAC5B,gBAAgB,CAAC,KAAK;;CAEtC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;oBACb,iBAAiB,CAAC,MAAM;iBAC3B,iBAAiB,CAAC,KAAK;;;qBAGnB,iBAAiB,CAAC,MAAM;iBAC5B,iBAAiB,CAAC,KAAK;;CAEvC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;oBAChB,iBAAiB,CAAC,MAAM;iBAC3B,oBAAoB,CAAC,KAAK;;;qBAGtB,iBAAiB,CAAC,MAAM;iBAC5B,oBAAoB,CAAC,KAAK;;CAE1C,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;oBACX,iBAAiB,CAAC,MAAM;iBAC3B,eAAe,CAAC,KAAK;;;qBAGjB,iBAAiB,CAAC,MAAM;iBAC5B,eAAe,CAAC,KAAK;;CAErC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;oBACb,iBAAiB,CAAC,MAAM;iBAC3B,iBAAiB,CAAC,KAAK;;;qBAGnB,iBAAiB,CAAC,MAAM;iBAC5B,iBAAiB,CAAC,KAAK;;CAEvC,CAAC","sourcesContent":["import { css } from \"styled-components\";\nimport { WIDTH_BREAKPOINTS } from \"../atoms/Responsive\";\nimport {\n BODY_FONT_SIZES,\n HEADER_FONT_SIZES,\n HELPER_FONT_SIZES,\n SUBHEADER_FONT_SIZES,\n TITLE_FONT_SIZES,\n} from \"../atoms/Typography\";\n\nexport const SmallScreenOnly = css`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n display: flex;\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n display: none;\n }\n`;\n\nexport const LargeScreenOnly = css`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n display: none;\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n display: flex;\n }\n`;\n\nexport const TitleFontSize = css`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${TITLE_FONT_SIZES.small};\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${TITLE_FONT_SIZES.large};\n }\n`;\n\nexport const HeaderFontSize = css`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${HEADER_FONT_SIZES.small};\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${HEADER_FONT_SIZES.large};\n }\n`;\n\nexport const SubheaderFontSize = css`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${SUBHEADER_FONT_SIZES.small};\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${SUBHEADER_FONT_SIZES.large};\n }\n`;\n\nexport const BodyFontSize = css`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${BODY_FONT_SIZES.small};\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${BODY_FONT_SIZES.large};\n }\n`;\n\nexport const HelperFontSize = css`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${HELPER_FONT_SIZES.small};\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${HELPER_FONT_SIZES.large};\n }\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mappings.js","sourceRoot":"","sources":["../../../core/integrations/mappings.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,QAAkB,EACR,EAAE,CACZ,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;KACpB,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,OAAO,CAAC;KAC7C,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC","sourcesContent":["import type { BaseEnumType } from \"@grantbii/ui-core/enums\";\nimport type { Option } from \"../
|
|
1
|
+
{"version":3,"file":"mappings.js","sourceRoot":"","sources":["../../../core/integrations/mappings.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,QAAkB,EACR,EAAE,CACZ,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;KACpB,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,OAAO,CAAC;KAC7C,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC","sourcesContent":["import type { BaseEnumType } from \"@grantbii/ui-core/enums\";\nimport type { Option } from \"../types\";\n\nexport const enumToOptions = <EnumType extends BaseEnumType>(\n enumType: EnumType,\n): Option[] =>\n Object.values(enumType)\n .filter((value) => value !== enumType.UNKNOWN)\n .map((value) => ({ label: value, value }));\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { Colors, Icons, Responsive } from "../
|
|
3
|
+
import { Colors, Icons, Responsive } from "../atoms";
|
|
4
4
|
import { HelperFontSize } from "../integrations";
|
|
5
5
|
const Badge = ({ label, Icon, iconSize = 20, iconWeight = "regular", onClick, onClickClose, labelWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { onClick: onClick, "$clickable": !!onClick, "$backgroundColor": backgroundColor, "$color": color, children: [_jsxs(BadgeContent, { "$closeable": !!onClickClose, "$widthPixels": labelWidthPixels, children: [Icon ? (_jsx(IconContainer, { children: _jsx(Icon, { color: color, size: iconSize, weight: iconWeight }) })) : (_jsx(_Fragment, {})), _jsx(BadgeLabel, { children: label })] }), onClickClose ? _jsx(CloseButton, { onClick: onClickClose }) : _jsx(_Fragment, {})] }));
|
|
6
6
|
export default Badge;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/molecules/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAcjD,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,SAAS,EACtB,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,KAAK,GACM,EAAE,EAAE,CAAC,CAChB,MAAC,SAAS,IACR,OAAO,EAAE,OAAO,gBACJ,CAAC,CAAC,OAAO,sBACH,eAAe,YACzB,KAAK,aAEb,MAAC,YAAY,kBAAa,CAAC,CAAC,YAAY,kBAAgB,gBAAgB,aACrE,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,aAAa,cACZ,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,GAAI,GAC5C,CACjB,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,EAED,KAAC,UAAU,cAAE,KAAK,GAAc,IACnB,EAEd,YAAY,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,mBAAK,IACpD,CACb,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAI1B;;;;;;;;;WASS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACzC,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,CAClE,gBAAgB;;oBAEA,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;qBAIlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;YAI5C,CAAC,EAAE,UAAU,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;CACxE,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAG7B;;;;;WAKS,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;eAC/D,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC;CAC7E,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAiC;;;;WAItD,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACjC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACrC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;CACnD,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;IAOzB,cAAc;CACjB,CAAC;AAMF,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CACrD,KAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,YAC7C,KAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GACT,CACnB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;CAKpC,CAAC","sourcesContent":["import type { ComponentType, MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, Icons, Responsive } from \"../atoms\";\nimport { HelperFontSize } from \"../integrations\";\n\nexport type BadgeProps = {\n label: ReactNode;\n Icon?: ComponentType<Icons.IconProps>;\n iconSize?: string | number;\n iconWeight?: Icons.IconWeight;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onClickClose?: MouseEventHandler<HTMLButtonElement>;\n labelWidthPixels?: number;\n backgroundColor?: string;\n color?: string;\n};\n\nconst Badge = ({\n label,\n Icon,\n iconSize = 20,\n iconWeight = \"regular\",\n onClick,\n onClickClose,\n labelWidthPixels,\n backgroundColor,\n color,\n}: BadgeProps) => (\n <BaseBadge\n onClick={onClick}\n $clickable={!!onClick}\n $backgroundColor={backgroundColor}\n $color={color}\n >\n <BadgeContent $closeable={!!onClickClose} $widthPixels={labelWidthPixels}>\n {Icon ? (\n <IconContainer>\n <Icon color={color} size={iconSize} weight={iconWeight} />\n </IconContainer>\n ) : (\n <></>\n )}\n\n <BadgeLabel>{label}</BadgeLabel>\n </BadgeContent>\n\n {onClickClose ? <CloseButton onClick={onClickClose} /> : <></>}\n </BaseBadge>\n);\n\nexport default Badge;\n\nconst BaseBadge = styled.div<{\n $clickable?: boolean;\n $backgroundColor?: string;\n $color?: string;\n}>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n\n padding: 5px 15px;\n border-radius: 120px;\n\n color: ${({ $color = Colors.typography.blackHigh }) => $color};\n background-color: ${({ $backgroundColor = Colors.neutral.grey3 }) =>\n $backgroundColor};\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n min-height: 27px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n min-height: 30px;\n }\n\n cursor: ${({ $clickable = false }) => ($clickable ? \"pointer\" : \"auto\")};\n`;\n\nconst BadgeContent = styled.div<{\n $closeable: boolean;\n $widthPixels?: number;\n}>`\n display: flex;\n align-items: center;\n gap: 10px;\n\n width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : \"auto\")};\n max-width: ${({ $closeable }) => ($closeable ? \"calc(100% - 20px)\" : \"auto\")};\n`;\n\nconst IconContainer = styled.div<{ $iconSize?: string | number }>`\n display: flex;\n flex-direction: column;\n\n width: ${({ $iconSize = \"auto\" }) => $iconSize};\n min-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n max-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n`;\n\nconst BadgeLabel = styled.div`\n overflow-x: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n font-weight: 500;\n\n ${HelperFontSize}\n`;\n\ntype CloseButtonProps = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst CloseButton = ({ onClick }: CloseButtonProps) => (\n <BaseCloseButton type=\"button\" onClick={onClick}>\n <Icons.XIcon size={12} />\n </BaseCloseButton>\n);\n\nconst BaseCloseButton = styled.button`\n display: flex;\n flex-direction: column;\n\n min-width: 12px;\n`;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { Icons } from "../
|
|
3
|
+
import { Icons } from "../atoms";
|
|
4
4
|
import { BaseButton as ButtonContent } from "../shared";
|
|
5
5
|
const Button = ({ label, LeftIcon, RightIcon, underline, backgroundColor, borderColor, color, width, type = "button", ...buttonProps }) => (_jsx(BaseButton, { ...buttonProps, type: type, "$width": width, children: _jsxs(ButtonContent, { "$underline": underline, "$backgroundColor": backgroundColor, "$borderColor": borderColor, "$color": color, "$width": width, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), label, RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }) }));
|
|
6
6
|
export default Button;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,WAAW,CAAC;AAgBxD,MAAM,MAAM,GAAG,CAAC,EACd,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,GAAG,WAAW,EACF,EAAE,EAAE,CAAC,CACjB,KAAC,UAAU,OAAK,WAAW,EAAE,IAAI,EAAE,IAAI,YAAU,KAAK,YACpD,MAAC,aAAa,kBACA,SAAS,sBACH,eAAe,kBACnB,WAAW,YACjB,KAAK,YACL,KAAK,aAEZ,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,EACvD,KAAK,EACL,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC5C,GACL,CACd,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAqB;WAC1C,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;CACzC,CAAC","sourcesContent":["import type { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../atoms\";\nimport { BaseButton as ButtonContent } from \"../shared\";\n\ntype ButtonProps = {\n label: ReactNode;\n LeftIcon?: Icons.Icon;\n RightIcon?: Icons.Icon;\n underline?: boolean;\n backgroundColor?: string;\n borderColor?: string;\n color?: string;\n width?: string;\n} & DetailedHTMLProps<\n ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n>;\n\nconst Button = ({\n label,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n borderColor,\n color,\n width,\n type = \"button\",\n ...buttonProps\n}: ButtonProps) => (\n <BaseButton {...buttonProps} type={type} $width={width}>\n <ButtonContent\n $underline={underline}\n $backgroundColor={backgroundColor}\n $borderColor={borderColor}\n $color={color}\n $width={width}\n >\n {LeftIcon ? <LeftIcon color={color} size={20} /> : <></>}\n {label}\n {RightIcon ? <RightIcon color={color} size={20} /> : <></>}\n </ButtonContent>\n </BaseButton>\n);\n\nexport default Button;\n\nconst BaseButton = styled.button<{ $width?: string }>`\n width: ${({ $width = \"auto\" }) => $width};\n`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../core/molecules/Checkbox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAQ1C,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,GAAG,aAAa,EACF,EAAE,EAAE,CAAC,CACnB,MAAC,aAAa,eACX,KAAK,IAAI,WAAW,CAAC,CAAC,CAAC,KAAC,aAAa,IAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,mBAAK,EACvE,mBAAW,aAAa,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAC,UAAU,GAAG,EACjE,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAC,aAAa,IAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC1D,CACjB,CAAC;AAEF,eAAe,QAAQ,CAAC;AAOxB,MAAM,aAAa,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAsB,EAAE,EAAE,CAAC,CAC3D,gBAAO,OAAO,EAAE,GAAG,EAAE,WAAW,YAAG,KAAK,GAAS,CAClD,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes, ReactNode } from \"react\";\nimport { LabelledInput } from \"../shared\";\n\ntype CheckboxProps = {\n id: string;\n label: ReactNode;\n labelBefore?: boolean;\n} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\nconst Checkbox = ({\n id,\n label,\n labelBefore = false,\n ...checkboxProps\n}: CheckboxProps) => (\n <LabelledInput>\n {label && labelBefore ? <CheckboxLabel id={id} label={label} /> : <></>}\n <input {...checkboxProps} id={`${id}-checkbox`} type=\"checkbox\" />\n {label && !labelBefore ? <CheckboxLabel id={id} label={label} /> : <></>}\n </LabelledInput>\n);\n\nexport default Checkbox;\n\ntype CheckboxLabelProps = {\n id: string;\n label: ReactNode;\n};\n\nconst CheckboxLabel = ({ id, label }: CheckboxLabelProps) => (\n <label htmlFor={`${id}-checkbox`}>{label}</label>\n);\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { DetailedHTMLProps, InputHTMLAttributes } from "react";
|
|
2
|
-
import { type Option } from "../foundations";
|
|
3
2
|
import { type InputValidationProps } from "../shared";
|
|
3
|
+
import { type Option } from "../types";
|
|
4
4
|
type InputProps = {
|
|
5
5
|
datalistId?: string;
|
|
6
6
|
datalistOptions?: Option[];
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { Colors } from "../
|
|
3
|
+
import { Colors } from "../atoms";
|
|
4
4
|
import { InputValidation } from "../shared";
|
|
5
|
+
import {} from "../types";
|
|
5
6
|
const Input = ({ datalistOptions, datalistId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(BaseInput, { ...inputProps, list: datalistId }), datalistId && datalistOptions ? (_jsx(Datalist, { id: datalistId, options: datalistOptions })) : (_jsx(_Fragment, {}))] }));
|
|
6
7
|
export default Input;
|
|
7
8
|
const BaseInput = styled.input `
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../core/molecules/Input.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAA6B,MAAM,WAAW,CAAC;AACvE,OAAO,EAAe,MAAM,UAAU,CAAC;AAQvC,MAAM,KAAK,GAAG,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,UAAU,EAAc,EAAE,EAAE,CAAC,CAC5E,8BACE,KAAC,SAAS,OAAK,UAAU,EAAE,IAAI,EAAE,UAAU,GAAI,EAE9C,UAAU,IAAI,eAAe,CAAC,CAAC,CAAC,CAC/B,KAAC,QAAQ,IAAC,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,GAAI,CACvD,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACA,CACJ,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAsB;;sBAE9B,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC;AAOF,MAAM,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,OAAO,EAAiB,EAAE,EAAE,CAAC,CACnD,mBAAU,EAAE,EAAE,EAAE,YACb,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,GACO,CACZ,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../atoms\";\nimport { InputValidation, type InputValidationProps } from \"../shared\";\nimport { type Option } from \"../types\";\n\ntype InputProps = {\n datalistId?: string;\n datalistOptions?: Option[];\n} & InputValidationProps &\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\nconst Input = ({ datalistOptions, datalistId, ...inputProps }: InputProps) => (\n <>\n <BaseInput {...inputProps} list={datalistId} />\n\n {datalistId && datalistOptions ? (\n <Datalist id={datalistId} options={datalistOptions} />\n ) : (\n <></>\n )}\n </>\n);\n\nexport default Input;\n\nconst BaseInput = styled.input<InputValidationProps>`\n padding: 12px 16px;\n background-color: ${Colors.base.white};\n border-radius: 8px;\n\n ${InputValidation}\n`;\n\ntype DatalistProps = {\n id: string;\n options: Option[];\n};\n\nconst Datalist = ({ id, options }: DatalistProps) => (\n <datalist id={id}>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </datalist>\n);\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { MoonLoader, PacmanLoader } from "react-spinners";
|
|
3
3
|
import styled from "styled-components";
|
|
4
|
-
import { Colors } from "../
|
|
4
|
+
import { Colors } from "../atoms";
|
|
5
5
|
import { HelperFontSize } from "../integrations";
|
|
6
6
|
/**
|
|
7
7
|
* The animation to show when loading the whole page
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageLoader.js","sourceRoot":"","sources":["../../../core/molecules/PageLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"PageLoader.js","sourceRoot":"","sources":["../../../core/molecules/PageLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAQjD;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,GAAG,EACH,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAC3B,IAAI,EACJ,GAAG,WAAW,EACE,EAAE,EAAE,CAAC,CACrB,MAAC,UAAU,eACR,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACxE,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACtE,EAEA,WAAW,IAAI,GAAG,CAAC,CAAC,CAAC,CACpB,MAAC,IAAI,eACF,WAAW,CAAC,CAAC,CAAC,KAAC,WAAW,cAAE,WAAW,GAAe,CAAC,CAAC,CAAC,mBAAK,EAC9D,GAAG,CAAC,CAAC,CAAC,KAAC,GAAG,cAAE,GAAG,GAAO,CAAC,CAAC,CAAC,mBAAK,IAC1B,CACR,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACU,CACd,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS5B,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKtB,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAA;;CAE3B,CAAC;AAEF,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAA;WACT,MAAM,CAAC,UAAU,CAAC,WAAW;;IAEpC,cAAc;CACjB,CAAC","sourcesContent":["import { MoonLoader, PacmanLoader } from \"react-spinners\";\nimport type { LoaderSizeMarginProps } from \"react-spinners/helpers/props\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../atoms\";\nimport { HelperFontSize } from \"../integrations\";\n\ntype PageLoaderProps = {\n pacman?: boolean;\n loadingText?: string;\n tip?: string;\n} & LoaderSizeMarginProps;\n\n/**\n * The animation to show when loading the whole page\n */\nconst PageLoader = ({\n loadingText,\n tip,\n pacman = false,\n color = Colors.accent.blue1,\n size,\n ...restOfProps\n}: PageLoaderProps) => (\n <Background>\n {pacman ? (\n <PacmanLoader color={color} size={size ? size : 20} {...restOfProps} />\n ) : (\n <MoonLoader color={color} size={size ? size : 32} {...restOfProps} />\n )}\n\n {loadingText || tip ? (\n <Text>\n {loadingText ? <LoadingText>{loadingText}</LoadingText> : <></>}\n {tip ? <Tip>{tip}</Tip> : <></>}\n </Text>\n ) : (\n <></>\n )}\n </Background>\n);\n\nexport default PageLoader;\n\nconst Background = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 20px;\n\n width: 100%;\n height: 100%;\n`;\n\nconst Text = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n`;\n\nconst LoadingText = styled.p`\n font-weight: 500;\n`;\n\nconst Tip = styled.p`\n color: ${Colors.typography.blackMedium};\n\n ${HelperFontSize}\n`;\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { DetailedHTMLProps, InputHTMLAttributes } from "react";
|
|
2
|
-
import type { Option } from "../
|
|
2
|
+
import type { Option } from "../types";
|
|
3
3
|
type RadioButtonProps = Option & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
|
|
4
4
|
declare const RadioButton: ({ id, label, ...radioButtonProps }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export default RadioButton;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../core/molecules/RadioButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAK1C,MAAM,WAAW,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,gBAAgB,EAAoB,EAAE,EAAE,CAAC,CAC5E,MAAC,aAAa,eACZ,mBAAW,gBAAgB,EAAE,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAC,OAAO,GAAG,EACtE,gBAAO,OAAO,EAAE,GAAG,EAAE,eAAe,YAAG,KAAK,GAAS,IACvC,CACjB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport type { Option } from \"../types\";\nimport { LabelledInput } from \"../shared\";\n\ntype RadioButtonProps = Option &\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\nconst RadioButton = ({ id, label, ...radioButtonProps }: RadioButtonProps) => (\n <LabelledInput>\n <input {...radioButtonProps} id={`${id}-radio-button`} type=\"radio\" />\n <label htmlFor={`${id}-radio-button`}>{label}</label>\n </LabelledInput>\n);\n\nexport default RadioButton;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../core/molecules/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAA6B,MAAM,WAAW,CAAC;AAIvE,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAe;YACnC,CAAC,EAAE,aAAa,GAAG,GAAG,EAAE,EAAE,EAAE,CAAC,aAAa;;;sBAGhC,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Colors } from \"../atoms\";\nimport { InputValidation, type InputValidationProps } from \"../shared\";\n\ntype TextareaProps = { $heightPixels?: number } & InputValidationProps;\n\nconst Textarea = styled.textarea<TextareaProps>`\n height: ${({ $heightPixels = 100 }) => $heightPixels}px;\n\n padding: 12px 16px;\n background-color: ${Colors.base.white};\n border-radius: 8px;\n\n ${InputValidation}\n`;\n\nexport default Textarea;\n"]}
|
|
@@ -1 +1,7 @@
|
|
|
1
|
+
export { default as Badge, type BadgeProps } from "./Badge";
|
|
2
|
+
export { default as Button } from "./Button";
|
|
3
|
+
export { default as Checkbox } from "./Checkbox";
|
|
4
|
+
export { default as Input } from "./Input";
|
|
1
5
|
export { default as PageLoader } from "./PageLoader";
|
|
6
|
+
export { default as RadioButton } from "./RadioButton";
|
|
7
|
+
export { default as Textarea } from "./Textarea";
|
package/core/molecules/index.js
CHANGED
|
@@ -1,2 +1,8 @@
|
|
|
1
|
+
export { default as Badge } from "./Badge";
|
|
2
|
+
export { default as Button } from "./Button";
|
|
3
|
+
export { default as Checkbox } from "./Checkbox";
|
|
4
|
+
export { default as Input } from "./Input";
|
|
1
5
|
export { default as PageLoader } from "./PageLoader";
|
|
6
|
+
export { default as RadioButton } from "./RadioButton";
|
|
7
|
+
export { default as Textarea } from "./Textarea";
|
|
2
8
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default as PageLoader } from \"./PageLoader\";\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAmB,MAAM,SAAS,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default as Badge, type BadgeProps } from \"./Badge\";\nexport { default as Button } from \"./Button\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Input } from \"./Input\";\nexport { default as PageLoader } from \"./PageLoader\";\nexport { default as RadioButton } from \"./RadioButton\";\nexport { default as Textarea } from \"./Textarea\";\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { Colors } from "../
|
|
3
|
+
import { Colors } from "../atoms";
|
|
4
4
|
import { InputValidation } from "../shared";
|
|
5
|
+
import {} from "../types";
|
|
5
6
|
const Dropdown = ({ options, defaultLabel, ...selectProps }) => (_jsxs(Select, { ...selectProps, children: [_jsx("option", { hidden: true, disabled: true, value: "", children: defaultLabel ? defaultLabel : "-" }), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }));
|
|
6
7
|
export default Dropdown;
|
|
7
8
|
const Select = styled.select `
|