@grantbii/design-system 1.23.6 → 1.24.1

package/core/atoms/BrandLogo.d.ts

@@ -1,6 +1,13 @@
+type ColorVariant = "full" | "reversed";
 type BrandLogoProps = {
-    isDarkTheme?: boolean;
+    colorVariant?: ColorVariant;
+    isLogomark?: boolean;
+    smallScreenWidth?: string;
+    smallScreenHeight?: string;
+    bigScreenWidth?: string;
+    bigScreenHeight?: string;
+    borderRadius?: string;
     alt?: string;
 };
-declare const BrandLogo: ({ isDarkTheme, alt, }: BrandLogoProps) => import("react/jsx-runtime").JSX.Element;
+declare const BrandLogo: ({ colorVariant, isLogomark, smallScreenWidth, smallScreenHeight, bigScreenWidth, bigScreenHeight, borderRadius, alt, }: BrandLogoProps) => import("react/jsx-runtime").JSX.Element;
 export default BrandLogo;

package/core/atoms/BrandLogo.js

@@ -1,20 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Image from "next/image";
 import styled from "styled-components";
-import darkLogo from "../assets/logos/brand_logo-dark.webp";
-import lightLogo from "../assets/logos/brand_logo-light.webp";
+import fullColorLogo from "../assets/logos/brand_logo-full_color.webp";
+import reversedColorLogo from "../assets/logos/brand_logo-reversed_color.webp";
+import fullColorLogomark from "../assets/logos/brand_logomark-full_color.webp";
+import reversedColorLogomark from "../assets/logos/brand_logomark-reversed_color.webp";
 import * as Responsive from "../atoms/Responsive";
-const BrandLogo = ({ isDarkTheme = true, alt = "Grantbii", }) => (_jsx(BrandImage, { src: isDarkTheme ? darkLogo : lightLogo, width: 250, height: 80, alt: alt, priority: true }));
+const BrandLogo = ({ colorVariant = "full", isLogomark = false, smallScreenWidth = "125px", smallScreenHeight = "40px", bigScreenWidth = "150px", bigScreenHeight = "48px", borderRadius = "0px", alt = "Grantbii", }) => {
+    const src = isLogomark
+        ? variantToLogomarkSrc(colorVariant)
+        : variantToLogoSrc(colorVariant);
+    const imageProps = {
+        src,
+        alt,
+        priority: true,
+        width: ORIGINAL_WIDTH,
+        height: ORIGINAL_HEIGHT,
+        $smallScreenWidth: smallScreenWidth,
+        $smallScreenHeight: smallScreenHeight,
+        $bigScreenWidth: bigScreenWidth,
+        $bigScreenHeight: bigScreenHeight,
+        $borderRadius: borderRadius,
+        $isLogomark: isLogomark,
+    };
+    return _jsx(BrandImage, { ...imageProps });
+};
 export default BrandLogo;
+const ORIGINAL_WIDTH = 250;
+const ORIGINAL_HEIGHT = 80;
+const variantToLogomarkSrc = (colorVariant) => colorVariant === "full" ? fullColorLogomark : reversedColorLogomark;
+const variantToLogoSrc = (colorVariant) => colorVariant === "full" ? fullColorLogo : reversedColorLogo;
 const BrandImage = styled(Image) `
+  display: block;
+  border-radius: ${(props) => props.$borderRadius};
+
   @media (width < ${Responsive.widthBreakpoint.laptop}) {
-    width: 125px;
-    height: 40px;
+    width: ${(props) => props.$isLogomark ? props.$smallScreenHeight : props.$smallScreenWidth};
+    height: ${(props) => props.$smallScreenHeight};
   }
 
   @media (width >= ${Responsive.widthBreakpoint.laptop}) {
-    width: 150px;
-    height: 48px;
+    width: ${(props) => props.$isLogomark ? props.$bigScreenHeight : props.$bigScreenWidth};
+    height: ${(props) => props.$bigScreenHeight};
   }
 `;
 //# sourceMappingURL=BrandLogo.js.map

package/core/atoms/BrandLogo.js.map

@@ -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,KAAK,UAAU,MAAM,qBAAqB,CAAC;AAOlD,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,eAAe,CAAC,MAAM;;;;;qBAKhC,UAAU,CAAC,eAAe,CAAC,MAAM;;;;CAIrD,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 * as Responsive from \"../atoms/Responsive\";\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.widthBreakpoint.laptop}) {\n    width: 125px;\n    height: 40px;\n  }\n\n  @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n    width: 150px;\n    height: 48px;\n  }\n`;\n"]}
+{"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,aAAa,MAAM,4CAA4C,CAAC;AACvE,OAAO,iBAAiB,MAAM,gDAAgD,CAAC;AAC/E,OAAO,iBAAiB,MAAM,gDAAgD,CAAC;AAC/E,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AACvF,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAC;AAelD,MAAM,SAAS,GAAG,CAAC,EACjB,YAAY,GAAG,MAAM,EACrB,UAAU,GAAG,KAAK,EAClB,gBAAgB,GAAG,OAAO,EAC1B,iBAAiB,GAAG,MAAM,EAC1B,cAAc,GAAG,OAAO,EACxB,eAAe,GAAG,MAAM,EACxB,YAAY,GAAG,KAAK,EACpB,GAAG,GAAG,UAAU,GACD,EAAE,EAAE;IACnB,MAAM,GAAG,GAAG,UAAU;QACpB,CAAC,CAAC,oBAAoB,CAAC,YAAY,CAAC;QACpC,CAAC,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAEnC,MAAM,UAAU,GAAG;QACjB,GAAG;QACH,GAAG;QACH,QAAQ,EAAE,IAAI;QACd,KAAK,EAAE,cAAc;QACrB,MAAM,EAAE,eAAe;QACvB,iBAAiB,EAAE,gBAAgB;QACnC,kBAAkB,EAAE,iBAAiB;QACrC,eAAe,EAAE,cAAc;QAC/B,gBAAgB,EAAE,eAAe;QACjC,aAAa,EAAE,YAAY;QAC3B,WAAW,EAAE,UAAU;KACxB,CAAC;IAEF,OAAO,KAAC,UAAU,OAAK,UAAU,GAAI,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,MAAM,cAAc,GAAG,GAAG,CAAC;AAC3B,MAAM,eAAe,GAAG,EAAE,CAAC;AAE3B,MAAM,oBAAoB,GAAG,CAAC,YAA0B,EAAE,EAAE,CAC1D,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,qBAAqB,CAAC;AAEtE,MAAM,gBAAgB,GAAG,CAAC,YAA0B,EAAE,EAAE,CACtD,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC;AAW9D,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAiB;;mBAE9B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa;;oBAE7B,UAAU,CAAC,eAAe,CAAC,MAAM;aACxC,CAAC,KAAK,EAAE,EAAE,CACjB,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAK,CAAC,iBAAiB;cAC9D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,kBAAkB;;;qBAG5B,UAAU,CAAC,eAAe,CAAC,MAAM;aACzC,CAAC,KAAK,EAAE,EAAE,CACjB,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe;cAC1D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,gBAAgB;;CAE9C,CAAC","sourcesContent":["import Image from \"next/image\";\nimport styled from \"styled-components\";\nimport fullColorLogo from \"../assets/logos/brand_logo-full_color.webp\";\nimport reversedColorLogo from \"../assets/logos/brand_logo-reversed_color.webp\";\nimport fullColorLogomark from \"../assets/logos/brand_logomark-full_color.webp\";\nimport reversedColorLogomark from \"../assets/logos/brand_logomark-reversed_color.webp\";\nimport * as Responsive from \"../atoms/Responsive\";\n\ntype ColorVariant = \"full\" | \"reversed\";\n\ntype BrandLogoProps = {\n  colorVariant?: ColorVariant;\n  isLogomark?: boolean;\n  smallScreenWidth?: string;\n  smallScreenHeight?: string;\n  bigScreenWidth?: string;\n  bigScreenHeight?: string;\n  borderRadius?: string;\n  alt?: string;\n};\n\nconst BrandLogo = ({\n  colorVariant = \"full\",\n  isLogomark = false,\n  smallScreenWidth = \"125px\",\n  smallScreenHeight = \"40px\",\n  bigScreenWidth = \"150px\",\n  bigScreenHeight = \"48px\",\n  borderRadius = \"0px\",\n  alt = \"Grantbii\",\n}: BrandLogoProps) => {\n  const src = isLogomark\n    ? variantToLogomarkSrc(colorVariant)\n    : variantToLogoSrc(colorVariant);\n\n  const imageProps = {\n    src,\n    alt,\n    priority: true,\n    width: ORIGINAL_WIDTH,\n    height: ORIGINAL_HEIGHT,\n    $smallScreenWidth: smallScreenWidth,\n    $smallScreenHeight: smallScreenHeight,\n    $bigScreenWidth: bigScreenWidth,\n    $bigScreenHeight: bigScreenHeight,\n    $borderRadius: borderRadius,\n    $isLogomark: isLogomark,\n  };\n\n  return <BrandImage {...imageProps} />;\n};\n\nexport default BrandLogo;\n\nconst ORIGINAL_WIDTH = 250;\nconst ORIGINAL_HEIGHT = 80;\n\nconst variantToLogomarkSrc = (colorVariant: ColorVariant) =>\n  colorVariant === \"full\" ? fullColorLogomark : reversedColorLogomark;\n\nconst variantToLogoSrc = (colorVariant: ColorVariant) =>\n  colorVariant === \"full\" ? fullColorLogo : reversedColorLogo;\n\ntype BrandImageProps = {\n  $isLogomark: boolean;\n  $smallScreenWidth: string;\n  $smallScreenHeight: string;\n  $bigScreenWidth: string;\n  $bigScreenHeight: string;\n  $borderRadius: string;\n};\n\nconst BrandImage = styled(Image)<BrandImageProps>`\n  display: block;\n  border-radius: ${(props) => props.$borderRadius};\n\n  @media (width < ${Responsive.widthBreakpoint.laptop}) {\n    width: ${(props) =>\n      props.$isLogomark ? props.$smallScreenHeight : props.$smallScreenWidth};\n    height: ${(props) => props.$smallScreenHeight};\n  }\n\n  @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n    width: ${(props) =>\n      props.$isLogomark ? props.$bigScreenHeight : props.$bigScreenWidth};\n    height: ${(props) => props.$bigScreenHeight};\n  }\n`;\n"]}

package/core/molecules/Checkbox.d.ts

@@ -1,6 +1,5 @@
 import type { DetailedHTMLProps, InputHTMLAttributes, ReactNode } from "react";
 type CheckboxProps = {
-    id: string;
     label: ReactNode;
     labelBefore?: boolean;
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

package/core/molecules/Checkbox.js

@@ -7,5 +7,10 @@ export default Checkbox;
 const BaseCheckbox = styled.input `
   accent-color: ${Color.brand.grantbiiBlue};
 `;
-const CheckboxLabel = ({ id, label }) => (_jsx("label", { htmlFor: `${id}-checkbox`, children: label }));
+const CheckboxLabel = ({ id, label }) => (_jsx(BaseCheckboxLabel, { htmlFor: `${id ?? label}-checkbox`, children: label }));
+const BaseCheckboxLabel = styled.label `
+  &:hover {
+    cursor: pointer;
+  }
+`;
 //# sourceMappingURL=Checkbox.js.map

package/core/molecules/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../core/molecules/Checkbox.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,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,KAAC,YAAY,OAAK,aAAa,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAC,UAAU,GAAG,EACxE,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;AAExB,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAA;kBACf,KAAK,CAAC,KAAK,CAAC,YAAY;CACzC,CAAC;AAOF,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 styled from \"styled-components\";\nimport { Color } from \"../atoms\";\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    <BaseCheckbox {...checkboxProps} id={`${id}-checkbox`} type=\"checkbox\" />\n    {label && !labelBefore ? <CheckboxLabel id={id} label={label} /> : <></>}\n  </LabelledInput>\n);\n\nexport default Checkbox;\n\nconst BaseCheckbox = styled.input`\n  accent-color: ${Color.brand.grantbiiBlue};\n`;\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"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../core/molecules/Checkbox.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAO1C,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,KAAC,YAAY,OAAK,aAAa,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAC,UAAU,GAAG,EACxE,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;AAExB,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAA;kBACf,KAAK,CAAC,KAAK,CAAC,YAAY;CACzC,CAAC;AAOF,MAAM,aAAa,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAsB,EAAE,EAAE,CAAC,CAC3D,KAAC,iBAAiB,IAAC,OAAO,EAAE,GAAG,EAAE,IAAI,KAAK,WAAW,YAClD,KAAK,GACY,CACrB,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAA;;;;CAIrC,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Color } from \"../atoms\";\nimport { LabelledInput } from \"../shared\";\n\ntype CheckboxProps = {\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    <BaseCheckbox {...checkboxProps} id={`${id}-checkbox`} type=\"checkbox\" />\n    {label && !labelBefore ? <CheckboxLabel id={id} label={label} /> : <></>}\n  </LabelledInput>\n);\n\nexport default Checkbox;\n\nconst BaseCheckbox = styled.input`\n  accent-color: ${Color.brand.grantbiiBlue};\n`;\n\ntype CheckboxLabelProps = {\n  id?: string;\n  label: ReactNode;\n};\n\nconst CheckboxLabel = ({ id, label }: CheckboxLabelProps) => (\n  <BaseCheckboxLabel htmlFor={`${id ?? label}-checkbox`}>\n    {label}\n  </BaseCheckboxLabel>\n);\n\nconst BaseCheckboxLabel = styled.label`\n  &:hover {\n    cursor: pointer;\n  }\n`;\n"]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@grantbii/design-system",
   "author": "Grantbii",
   "license": "UNLICENSED",
-  "version": "1.23.6",
+  "version": "1.24.1",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@phosphor-icons/react": "2.1.10",
-    "country-flag-icons": "1.6.16",
+    "country-flag-icons": "1.6.17",
     "react-dropzone": "15.0.0",
     "react-spinners": "0.17.0"
   },
@@ -35,11 +35,11 @@
   "devDependencies": {
     "@chromatic-com/storybook": "5.1.2",
     "@grantbii/ui-core": "1.8.5",
-    "@storybook/addon-a11y": "10.3.5",
-    "@storybook/addon-docs": "10.3.5",
-    "@storybook/addon-onboarding": "10.3.5",
-    "@storybook/addon-vitest": "10.3.5",
-    "@storybook/nextjs-vite": "10.3.5",
+    "@storybook/addon-a11y": "10.3.6",
+    "@storybook/addon-docs": "10.3.6",
+    "@storybook/addon-onboarding": "10.3.6",
+    "@storybook/addon-vitest": "10.3.6",
+    "@storybook/nextjs-vite": "10.3.6",
     "@types/node": "22.19.17",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
@@ -49,7 +49,7 @@
     "eslint": "9.39.4",
     "eslint-config-next": "16.2.4",
     "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-storybook": "10.3.5",
+    "eslint-plugin-storybook": "10.3.6",
     "husky": "9.1.7",
     "lint-staged": "16.4.0",
     "next": "16.2.4",
@@ -57,7 +57,7 @@
     "prettier": "3.8.3",
     "react": "19.2.5",
     "react-dom": "19.2.5",
-    "storybook": "10.3.5",
+    "storybook": "10.3.6",
     "styled-components": "6.4.1",
     "typescript": "6.0.3",
     "vitest": "4.1.5"

package/stories/atoms/BrandLogo.stories.d.ts

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 declare const meta: Meta<typeof BrandLogo>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const Light: Story;
-export declare const Dark: Story;
+export declare const FullColor: Story;
+export declare const ReversedColor: Story;
+export declare const FullColorLogomark: Story;
+export declare const ReversedColorLogomark: Story;

package/stories/atoms/BrandLogo.stories.js

@@ -5,17 +5,28 @@ const meta = {
     tags: ["autodocs"],
 };
 export default meta;
-export const Default = {
-    args: {},
+export const FullColor = {
+    args: {
+        colorVariant: "full",
+        isLogomark: false,
+    },
+};
+export const ReversedColor = {
+    args: {
+        colorVariant: "reversed",
+        isLogomark: false,
+    },
 };
-export const Light = {
+export const FullColorLogomark = {
     args: {
-        isDarkTheme: false,
+        colorVariant: "full",
+        isLogomark: true,
     },
 };
-export const Dark = {
+export const ReversedColorLogomark = {
     args: {
-        isDarkTheme: true,
+        colorVariant: "reversed",
+        isLogomark: true,
     },
 };
 //# sourceMappingURL=BrandLogo.stories.js.map

package/stories/atoms/BrandLogo.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrandLogo.stories.js","sourceRoot":"","sources":["../../../stories/atoms/BrandLogo.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAGhC,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,WAAW,EAAE,IAAI;KAClB;CACF,CAAC","sourcesContent":["import { BrandLogo } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof BrandLogo> = {\n  title: \"Atoms/Brand Logo\",\n  component: BrandLogo,\n  tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const Light: Story = {\n  args: {\n    isDarkTheme: false,\n  },\n};\n\nexport const Dark: Story = {\n  args: {\n    isDarkTheme: true,\n  },\n};\n"]}
+{"version":3,"file":"BrandLogo.stories.js","sourceRoot":"","sources":["../../../stories/atoms/BrandLogo.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAGhC,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,YAAY,EAAE,MAAM;QACpB,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE;QACJ,YAAY,EAAE,MAAM;QACpB,UAAU,EAAE,IAAI;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAU;IAC1C,IAAI,EAAE;QACJ,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,IAAI;KACjB;CACF,CAAC","sourcesContent":["import { BrandLogo } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof BrandLogo> = {\n  title: \"Atoms/Brand Logo\",\n  component: BrandLogo,\n  tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const FullColor: Story = {\n  args: {\n    colorVariant: \"full\",\n    isLogomark: false,\n  },\n};\n\nexport const ReversedColor: Story = {\n  args: {\n    colorVariant: \"reversed\",\n    isLogomark: false,\n  },\n};\n\nexport const FullColorLogomark: Story = {\n  args: {\n    colorVariant: \"full\",\n    isLogomark: true,\n  },\n};\n\nexport const ReversedColorLogomark: Story = {\n  args: {\n    colorVariant: \"reversed\",\n    isLogomark: true,\n  },\n};\n"]}