@bookjane2/bookjane-design-library 8.3.0 → 8.3.2

package/lib/components/BKJTypography/BKJTypography.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { IBKJTypographyProps } from './BKJTypography.types.js';
-export declare const BKJTypography: FC<IBKJTypographyProps>;
+export declare const BKJTypography: ({ variant, element, as: asProp, children, ...rest }: IBKJTypographyProps) => JSX.Element;
 //# sourceMappingURL=BKJTypography.d.ts.map

package/lib/components/BKJTypography/BKJTypography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BKJTypography.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,mBAAmB,CAOjD,CAAC"}
+{"version":3,"file":"BKJTypography.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,eAAO,MAAM,aAAa,GAAI,qDAM3B,mBAAmB,gBAOrB,CAAC"}

package/lib/components/BKJTypography/BKJTypography.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { typographyComponents } from './BKJTypography.styled.js';
-export const BKJTypography = ({ variant = 'Body', element = 'span', children, }) => {
-    const Component = typographyComponents[element];
-    return _jsx(Component, { "$variant": variant, children: children });
+import { StyledTypography } from './BKJTypography.styled.js';
+export const BKJTypography = ({ variant = 'Body', element = 'span', as: asProp, children, ...rest }) => {
+    const resolvedAs = asProp || element;
+    return (_jsx(StyledTypography, { as: resolvedAs, "$variant": variant, ...rest, children: children }));
 };
 //# sourceMappingURL=BKJTypography.js.map

package/lib/components/BKJTypography/BKJTypography.js.map

@@ -1 +1 @@
-{"version":3,"file":"BKJTypography.js","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,CAAC,MAAM,aAAa,GAA4B,CAAC,EACrD,OAAO,GAAG,MAAM,EAChB,OAAO,GAAG,MAAM,EAChB,QAAQ,GACT,EAAe,EAAE;IAChB,MAAM,SAAS,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAChD,OAAO,KAAC,SAAS,gBAAW,OAAO,YAAG,QAAQ,GAAa,CAAC;AAC9D,CAAC,CAAC"}
+{"version":3,"file":"BKJTypography.js","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG1D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,GAAG,MAAM,EAChB,OAAO,GAAG,MAAM,EAChB,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,GAAG,IAAI,EACa,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,MAAM,IAAI,OAAO,CAAC;IACrC,OAAO,CACL,KAAC,gBAAgB,IAAC,EAAE,EAAE,UAAU,cAAY,OAAO,KAAM,IAAI,YAC1D,QAAQ,GACQ,CACpB,CAAC;AACJ,CAAC,CAAC"}

package/lib/components/BKJTypography/BKJTypography.stories.d.ts

@@ -1,7 +1,8 @@
+import { StoryFn } from '@storybook/react';
 import { IBKJTypographyProps } from './BKJTypography.types.js';
 declare const _default: {
     title: string;
-    component: import("react").FC<IBKJTypographyProps>;
+    component: ({ variant, element, as: asProp, children, ...rest }: IBKJTypographyProps) => JSX.Element;
     argTypes: {
         variant: {
             name: string;
@@ -11,6 +12,10 @@ declare const _default: {
             name: string;
             options: string[];
         };
+        as: {
+            name: string;
+            options: string[];
+        };
         children: {
             name: string;
             type: string;
@@ -19,4 +24,5 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, IBKJTypographyProps>;
+export declare const HeadingHierarchy: StoryFn;
 //# sourceMappingURL=BKJTypography.stories.d.ts.map

package/lib/components/BKJTypography/BKJTypography.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BKJTypography.stories.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;;;;;;;;;;;;;;;;;;AAE5D,wBA6BE;AAIF,eAAO,MAAM,OAAO,+GAAoB,CAAC"}
+{"version":3,"file":"BKJTypography.stories.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;;;;;;;;;;;;;;;;;;;;;;AAE5D,wBA6CE;AAIF,eAAO,MAAM,OAAO,+GAAoB,CAAC;AAMzC,eAAO,MAAM,gBAAgB,EAAE,OAqB9B,CAAC"}

package/lib/components/BKJTypography/BKJTypography.stories.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BKJTypography } from './index.js';
 export default {
     title: 'Basic Elements/BKJTypography',
@@ -24,6 +24,22 @@ export default {
             name: 'Element',
             options: ['h1', 'h2', 'h3', 'h4', 'span', 'b', 'p'],
         },
+        as: {
+            name: 'As (Semantic Element)',
+            options: [
+                'h1',
+                'h2',
+                'h3',
+                'h4',
+                'h5',
+                'h6',
+                'p',
+                'span',
+                'label',
+                'legend',
+                'caption',
+            ],
+        },
         children: {
             name: 'Text',
             type: 'string',
@@ -35,4 +51,8 @@ export const Default = Template.bind({});
 Default.args = {
     children: 'Lorem ipsum',
 };
+export const HeadingHierarchy = () => (_jsxs("div", { children: [_jsx(BKJTypography, { as: "h1", variant: "H1", children: "Heading Level 1 (h1)" }), _jsx(BKJTypography, { as: "h2", variant: "H2", children: "Heading Level 2 (h2)" }), _jsx(BKJTypography, { as: "h3", variant: "H3", children: "Heading Level 3 (h3)" }), _jsx(BKJTypography, { as: "h4", variant: "H4", children: "Heading Level 4 (h4)" }), _jsx(BKJTypography, { as: "h5", variant: "Bold", children: "Heading Level 5 (h5)" }), _jsx(BKJTypography, { as: "h6", variant: "CaptionBold", children: "Heading Level 6 (h6)" })] }));
+HeadingHierarchy.parameters = {
+    controls: { disable: true },
+};
 //# sourceMappingURL=BKJTypography.stories.js.map

package/lib/components/BKJTypography/BKJTypography.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"BKJTypography.stories.js","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAGlC,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE;gBACP,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,MAAM;gBACN,eAAe;gBACf,MAAM;gBACN,SAAS;gBACT,aAAa;gBACb,QAAQ;gBACR,UAAU;aACX;SACF;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;SACpD;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,QAAQ;SACf;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAiC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,aAAa,OAAK,IAAI,GAAI,CAAC;AAErF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,aAAa;CACxB,CAAC"}
+{"version":3,"file":"BKJTypography.stories.js","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAGlC,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE;gBACP,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,MAAM;gBACN,eAAe;gBACf,MAAM;gBACN,SAAS;gBACT,aAAa;gBACb,QAAQ;gBACR,UAAU;aACX;SACF;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;SACpD;QACD,EAAE,EAAE;YACF,IAAI,EAAE,uBAAuB;YAC7B,OAAO,EAAE;gBACP,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,GAAG;gBACH,MAAM;gBACN,OAAO;gBACP,QAAQ;gBACR,SAAS;aACV;SACF;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,QAAQ;SACf;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAiC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,aAAa,OAAK,IAAI,GAAI,CAAC;AAErF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,aAAa;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAY,GAAG,EAAE,CAAC,CAC7C,0BACE,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,qCAEnB,EAChB,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,qCAEnB,EAChB,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,qCAEnB,EAChB,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,qCAEnB,EAChB,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,qCAErB,EAChB,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,aAAa,qCAE5B,IACZ,CACP,CAAC;AAEF,gBAAgB,CAAC,UAAU,GAAG;IAC5B,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;CAC5B,CAAC"}

package/lib/components/BKJTypography/BKJTypography.styled.d.ts

@@ -1,11 +1,3 @@
-import { IBKJTypographyStyledElement } from './BKJTypography.types.js';
-export declare const typographyComponents: {
-    h1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, IBKJTypographyStyledElement>> & string;
-    h2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, IBKJTypographyStyledElement>> & string;
-    h3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, IBKJTypographyStyledElement>> & string;
-    h4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, IBKJTypographyStyledElement>> & string;
-    span: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IBKJTypographyStyledElement>> & string;
-    b: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, IBKJTypographyStyledElement>> & string;
-    p: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, IBKJTypographyStyledElement>> & string;
-};
+import { IStyledTypographyProps } from './BKJTypography.types.js';
+export declare const StyledTypography: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IStyledTypographyProps>> & string;
 //# sourceMappingURL=BKJTypography.styled.d.ts.map

package/lib/components/BKJTypography/BKJTypography.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BKJTypography.styled.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.styled.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAEpE,eAAO,MAAM,oBAAoB;;;;;;;;CAsBhC,CAAC"}
+{"version":3,"file":"BKJTypography.styled.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.styled.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,eAAO,MAAM,gBAAgB,6PAK5B,CAAC"}

package/lib/components/BKJTypography/BKJTypography.styled.js

@@ -1,25 +1,8 @@
 import styled from 'styled-components';
-export const typographyComponents = {
-    h1: styled.h1 `
-    ${({ theme, $variant }) => theme.typography[$variant]};
-  `,
-    h2: styled.h2 `
-    ${({ theme, $variant }) => theme.typography[$variant]};
-  `,
-    h3: styled.h3 `
-    ${({ theme, $variant }) => theme.typography[$variant]};
-  `,
-    h4: styled.h4 `
-    ${({ theme, $variant }) => theme.typography[$variant]};
-  `,
-    span: styled.span `
-    ${({ theme, $variant }) => theme.typography[$variant]};
-  `,
-    b: styled.b `
-    ${({ theme, $variant }) => theme.typography[$variant]};
-  `,
-    p: styled.p `
-    ${({ theme, $variant }) => theme.typography[$variant]};
-  `,
-};
+export const StyledTypography = styled.span `
+  margin: 0;
+  padding: 0;
+  border: 0;
+  ${({ theme, $variant }) => theme.typography[$variant]};
+`;
 //# sourceMappingURL=BKJTypography.styled.js.map

package/lib/components/BKJTypography/BKJTypography.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"BKJTypography.styled.js","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC,EAAE,CAA6B;MACtC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;GACtD;IACD,EAAE,EAAE,MAAM,CAAC,EAAE,CAA6B;MACtC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;GACtD;IACD,EAAE,EAAE,MAAM,CAAC,EAAE,CAA6B;MACtC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;GACtD;IACD,EAAE,EAAE,MAAM,CAAC,EAAE,CAA6B;MACtC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;GACtD;IACD,IAAI,EAAE,MAAM,CAAC,IAAI,CAA6B;MAC1C,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;GACtD;IACD,CAAC,EAAE,MAAM,CAAC,CAAC,CAA6B;MACpC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;GACtD;IACD,CAAC,EAAE,MAAM,CAAC,CAAC,CAA6B;MACpC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;GACtD;CACF,CAAC"}
+{"version":3,"file":"BKJTypography.styled.js","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAwB;;;;IAI/D,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;CACtD,CAAC"}

package/lib/components/BKJTypography/BKJTypography.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=BKJTypography.test.d.ts.map

package/lib/components/BKJTypography/BKJTypography.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BKJTypography.test.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.test.tsx"],"names":[],"mappings":""}

package/lib/components/BKJTypography/BKJTypography.test.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { BKJTypography } from './BKJTypography.js';
+import { BKJThemeProvider } from '../../providers/BKJThemeProvider/index.js';
+expect.extend(toHaveNoViolations);
+const renderWithTheme = (component) => {
+    return render(_jsx(BKJThemeProvider, { children: component }));
+};
+describe('US1: Semantic heading rendering', () => {
+    it('renders as h1 when as="h1" is passed', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { as: "h1", variant: "H1", children: "Heading 1" }));
+        expect(getByRole('heading', { level: 1 })).toBeInTheDocument();
+    });
+    it('renders as h2 when as="h2" is passed', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { as: "h2", variant: "H2", children: "Heading 2" }));
+        expect(getByRole('heading', { level: 2 })).toBeInTheDocument();
+    });
+    it('renders as h3 when as="h3" is passed', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { as: "h3", variant: "H3", children: "Heading 3" }));
+        expect(getByRole('heading', { level: 3 })).toBeInTheDocument();
+    });
+    it('renders as h4 when as="h4" is passed', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { as: "h4", variant: "H4", children: "Heading 4" }));
+        expect(getByRole('heading', { level: 4 })).toBeInTheDocument();
+    });
+    it('renders as h5 when as="h5" is passed', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { as: "h5", variant: "Body", children: "Heading 5" }));
+        expect(getByRole('heading', { level: 5 })).toBeInTheDocument();
+    });
+    it('renders as h6 when as="h6" is passed', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { as: "h6", variant: "Caption", children: "Heading 6" }));
+        expect(getByRole('heading', { level: 6 })).toBeInTheDocument();
+    });
+    it('has no accessibility violations for heading hierarchy', async () => {
+        const { container } = renderWithTheme(_jsxs("main", { children: [_jsx(BKJTypography, { as: "h1", variant: "H1", children: "Main Title" }), _jsx(BKJTypography, { as: "h2", variant: "H2", children: "Section" }), _jsx(BKJTypography, { as: "h3", variant: "H3", children: "Subsection" }), _jsx(BKJTypography, { as: "h4", variant: "H4", children: "Detail" }), _jsx(BKJTypography, { as: "h5", variant: "Body", children: "Sub-detail" }), _jsx(BKJTypography, { as: "h6", variant: "Caption", children: "Fine print" })] }));
+        const results = await axe(container);
+        expect(results).toHaveNoViolations();
+    });
+});
+describe('US2: Backward-compatible default behavior', () => {
+    it('renders as span by default when no as or element prop is provided', () => {
+        const { getByText } = renderWithTheme(_jsx(BKJTypography, { children: "Default text" }));
+        expect(getByText('Default text').tagName).toBe('SPAN');
+    });
+    it('renders correct element when element prop is used without as', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { element: "h1", variant: "H1", children: "Element heading" }));
+        expect(getByRole('heading', { level: 1 })).toBeInTheDocument();
+    });
+    it('renders as p when element="p" is used without as', () => {
+        const { getByText } = renderWithTheme(_jsx(BKJTypography, { element: "p", children: "Paragraph via element" }));
+        expect(getByText('Paragraph via element').tagName).toBe('P');
+    });
+    it('renders as b when element="b" is used without as', () => {
+        const { getByText } = renderWithTheme(_jsx(BKJTypography, { element: "b", variant: "Bold", children: "Bold via element" }));
+        expect(getByText('Bold via element').tagName).toBe('B');
+    });
+    it('as prop takes precedence over element when both provided', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { as: "h2", element: "h3", variant: "H2", children: "Precedence test" }));
+        expect(getByRole('heading', { level: 2 })).toBeInTheDocument();
+    });
+});
+describe('US3: Non-heading semantic elements', () => {
+    it('renders as p when as="p" is passed', () => {
+        const { getByText } = renderWithTheme(_jsx(BKJTypography, { as: "p", children: "Paragraph text" }));
+        expect(getByText('Paragraph text').tagName).toBe('P');
+    });
+    it('renders as label when as="label" is passed', () => {
+        const { getByText } = renderWithTheme(_jsx(BKJTypography, { as: "label", children: "Label text" }));
+        expect(getByText('Label text').tagName).toBe('LABEL');
+    });
+    it('renders as legend when as="legend" is passed', () => {
+        const { getByText } = renderWithTheme(_jsx("fieldset", { children: _jsx(BKJTypography, { as: "legend", children: "Legend text" }) }));
+        expect(getByText('Legend text').tagName).toBe('LEGEND');
+    });
+    it('renders as caption when as="caption" is passed', () => {
+        const { getByText } = renderWithTheme(_jsxs("table", { children: [_jsx(BKJTypography, { as: "caption", children: "Caption text" }), _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { children: "data" }) }) })] }));
+        expect(getByText('Caption text').tagName).toBe('CAPTION');
+    });
+    it('forwards htmlFor attribute when as="label"', () => {
+        const { getByText } = renderWithTheme(_jsx(BKJTypography, { as: "label", htmlFor: "email-input", children: "Email" }));
+        expect(getByText('Email')).toHaveAttribute('for', 'email-input');
+    });
+    it('renders as span when as="span" is explicitly passed', () => {
+        const { getByText } = renderWithTheme(_jsx(BKJTypography, { as: "span", children: "Explicit span" }));
+        expect(getByText('Explicit span').tagName).toBe('SPAN');
+    });
+});
+//# sourceMappingURL=BKJTypography.test.js.map

package/lib/components/BKJTypography/BKJTypography.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BKJTypography.test.js","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.test.tsx"],"names":[],"mappings":"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"}

package/lib/components/BKJTypography/BKJTypography.types.d.ts

@@ -1,13 +1,16 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { Interpolation } from 'styled-components';
-export interface IBKJTypographyStyledElement {
+export interface IStyledTypographyProps {
     $variant: BKJTypographyVariantType;
 }
-export interface IBKJTypographyProps {
-    variant: BKJTypographyVariantType;
-    element: BKJTypographyElementType;
+export interface IBKJTypographyProps extends HTMLAttributes<HTMLElement> {
+    variant?: BKJTypographyVariantType;
+    element?: BKJTypographyElementType;
+    as?: BKJTypographyAsType;
     children: ReactNode;
+    [key: string]: unknown;
 }
+export type BKJTypographyAsType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'legend' | 'caption';
 export interface IBKJThemeTypography {
     H1: Interpolation<any>;
     H2: Interpolation<any>;

package/lib/components/BKJTypography/BKJTypography.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BKJTypography.types.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,wBAAwB,CAAC;CACpC;AACD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,wBAAwB,CAAC;IAClC,OAAO,EAAE,wBAAwB,CAAC;IAClC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAClC,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACzB,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC5B,WAAW,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAChC,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC3B,QAAQ,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CAC9B;AAED,MAAM,MAAM,wBAAwB,GAChC,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,eAAe,GACf,MAAM,GACN,SAAS,GACT,aAAa,GACb,QAAQ,GACR,UAAU,CAAC;AACf,MAAM,MAAM,wBAAwB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,CAAC"}
+{"version":3,"file":"BKJTypography.types.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,wBAAwB,CAAC;CACpC;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACtE,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,EAAE,CAAC,EAAE,mBAAmB,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,mBAAmB,GAC3B,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,GAAG,GACH,MAAM,GACN,OAAO,GACP,QAAQ,GACR,SAAS,CAAC;AAEd,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAClC,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACzB,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC5B,WAAW,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAChC,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC3B,QAAQ,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CAC9B;AAED,MAAM,MAAM,wBAAwB,GAChC,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,eAAe,GACf,MAAM,GACN,SAAS,GACT,aAAa,GACb,QAAQ,GACR,UAAU,CAAC;AACf,MAAM,MAAM,wBAAwB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,CAAC"}

package/lib/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,3 @@
+import { IVisuallyHiddenProps } from './VisuallyHidden.types.js';
+export declare const VisuallyHidden: ({ focusable, ...rest }: IVisuallyHiddenProps) => JSX.Element;
+//# sourceMappingURL=VisuallyHidden.d.ts.map

package/lib/components/VisuallyHidden/VisuallyHidden.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,eAAO,MAAM,cAAc,GAAI,wBAAgC,oBAAoB,gBAElF,CAAC"}

package/lib/components/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledVisuallyHidden } from './VisuallyHidden.styled.js';
+export const VisuallyHidden = ({ focusable = false, ...rest }) => {
+    return _jsx(StyledVisuallyHidden, { "$focusable": focusable, ...rest });
+};
+//# sourceMappingURL=VisuallyHidden.js.map

package/lib/components/VisuallyHidden/VisuallyHidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.js","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAG/D,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,IAAI,EAAwB,EAAE,EAAE;IACrF,OAAO,KAAC,oBAAoB,kBAAa,SAAS,KAAM,IAAI,GAAI,CAAC;AACnE,CAAC,CAAC"}

package/lib/components/VisuallyHidden/VisuallyHidden.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: ({ focusable, ...rest }: import("./VisuallyHidden.types.js").IVisuallyHiddenProps) => JSX.Element;
+};
+export default _default;
+export declare const Default: StoryFn;
+export declare const AsHeading: StoryFn;
+export declare const AsLabel: StoryFn;
+export declare const SkipLink: StoryFn;
+//# sourceMappingURL=VisuallyHidden.stories.d.ts.map

package/lib/components/VisuallyHidden/VisuallyHidden.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.stories.d.ts","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;;;;;AAI3C,wBAGE;AAEF,eAAO,MAAM,OAAO,EAAE,OAarB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,OAiBvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,OAarB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,OAgBtB,CAAC"}

package/lib/components/VisuallyHidden/VisuallyHidden.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VisuallyHidden } from './VisuallyHidden.js';
+import { BKJTheme, BKJThemeProvider } from '../../providers/BKJThemeProvider/index.js';
+export default {
+    title: 'Utilities/VisuallyHidden',
+    component: VisuallyHidden,
+};
+export const Default = () => (_jsx(BKJThemeProvider, { theme: BKJTheme, children: _jsxs("div", { children: [_jsx("p", { children: "The button below contains visually hidden text that screen readers will announce. Inspect the DOM to see the hidden content." }), _jsxs("button", { type: "button", children: [_jsx("span", { "aria-hidden": "true", children: "\u2715" }), _jsx(VisuallyHidden, { children: "Close dialog" })] })] }) }));
+export const AsHeading = () => (_jsx(BKJThemeProvider, { theme: BKJTheme, children: _jsxs("div", { children: [_jsxs("p", { children: ["The section below has a visually hidden heading (", `<h2>`, ") that provides structure for screen readers. Inspect the DOM to see it."] }), _jsxs("section", { "aria-labelledby": "filter-heading", children: [_jsx(VisuallyHidden, { as: "h2", id: "filter-heading", children: "Filter options" }), _jsxs("label", { children: ["Search: ", _jsx("input", { type: "text", placeholder: "Type to filter..." })] })] })] }) }));
+export const AsLabel = () => (_jsx(BKJThemeProvider, { theme: BKJTheme, children: _jsxs("div", { children: [_jsx("p", { children: "The input below has a visually hidden label. Screen readers will announce the label when the input receives focus." }), _jsx(VisuallyHidden, { as: "label", htmlFor: "search-input", children: "Search the site" }), _jsx("input", { id: "search-input", type: "text", placeholder: "Search..." })] }) }));
+export const SkipLink = () => (_jsx(BKJThemeProvider, { theme: BKJTheme, children: _jsxs("div", { children: [_jsx("p", { children: "Press Tab to reveal the skip navigation link below." }), _jsx(VisuallyHidden, { as: "a", href: "#main-content", focusable: true, children: "Skip to main content" }), _jsxs("nav", { children: [_jsx("a", { href: "#home", children: "Home" }), " | ", _jsx("a", { href: "#about", children: "About" }), " | ", _jsx("a", { href: "#contact", children: "Contact" })] }), _jsxs("main", { id: "main-content", children: [_jsx("h1", { children: "Main Content" }), _jsx("p", { children: "This is the main content area. The skip link jumps directly here." })] })] }) }));
+//# sourceMappingURL=VisuallyHidden.stories.js.map

package/lib/components/VisuallyHidden/VisuallyHidden.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.stories.js","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAE9E,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,cAAc;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAY,GAAG,EAAE,CAAC,CACpC,KAAC,gBAAgB,IAAC,KAAK,EAAE,QAAQ,YAC/B,0BACE,uJAGI,EACJ,kBAAQ,IAAI,EAAC,QAAQ,aACnB,8BAAkB,MAAM,uBAAgB,EACxC,KAAC,cAAc,+BAA8B,IACtC,IACL,GACW,CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAY,GAAG,EAAE,CAAC,CACtC,KAAC,gBAAgB,IAAC,KAAK,EAAE,QAAQ,YAC/B,0BACE,6EACoD,MAAM,gFAEtD,EACJ,sCAAyB,gBAAgB,aACvC,KAAC,cAAc,IAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,gBAAgB,+BAE1B,EACjB,wCACU,gBAAO,IAAI,EAAC,MAAM,EAAC,WAAW,EAAC,mBAAmB,GAAG,IACvD,IACA,IACN,GACW,CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAY,GAAG,EAAE,CAAC,CACpC,KAAC,gBAAgB,IAAC,KAAK,EAAE,QAAQ,YAC/B,0BACE,6IAGI,EACJ,KAAC,cAAc,IAAC,EAAE,EAAC,OAAO,EAAC,OAAO,EAAC,cAAc,gCAEhC,EACjB,gBAAO,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,EAAC,WAAW,EAAC,WAAW,GAAG,IAC3D,GACW,CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAY,GAAG,EAAE,CAAC,CACrC,KAAC,gBAAgB,IAAC,KAAK,EAAE,QAAQ,YAC/B,0BACE,8EAA0D,EAC1D,KAAC,cAAc,IAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,eAAe,EAAC,SAAS,2CAEpC,EACjB,0BACE,YAAG,IAAI,EAAC,OAAO,qBAAS,SAAG,YAAG,IAAI,EAAC,QAAQ,sBAAU,SAAG,YAAG,IAAI,EAAC,UAAU,wBAAY,IAClF,EACN,gBAAM,EAAE,EAAC,cAAc,aACrB,wCAAqB,EACrB,4FAAwE,IACnE,IACH,GACW,CACpB,CAAC"}

package/lib/components/VisuallyHidden/VisuallyHidden.styled.d.ts

@@ -0,0 +1,3 @@
+import { IStyledVisuallyHiddenProps } from './VisuallyHidden.types.js';
+export declare const StyledVisuallyHidden: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IStyledVisuallyHiddenProps>> & string;
+//# sourceMappingURL=VisuallyHidden.styled.d.ts.map

package/lib/components/VisuallyHidden/VisuallyHidden.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.styled.d.ts","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.styled.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAEpE,eAAO,MAAM,oBAAoB,iQAyBhC,CAAC"}

package/lib/components/VisuallyHidden/VisuallyHidden.styled.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+export const StyledVisuallyHidden = styled.span `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+
+  ${({ $focusable }) => $focusable &&
+    `
+    &:focus,
+    &:focus-within {
+      position: static;
+      width: auto;
+      height: auto;
+      margin: 0;
+      overflow: visible;
+      clip: auto;
+      white-space: normal;
+    }
+  `}
+`;
+//# sourceMappingURL=VisuallyHidden.styled.js.map

package/lib/components/VisuallyHidden/VisuallyHidden.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.styled.js","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAA4B;;;;;;;;;;;IAWvE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CACnB,UAAU;IACV;;;;;;;;;;;GAWD;CACF,CAAC"}

package/lib/components/VisuallyHidden/VisuallyHidden.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=VisuallyHidden.test.d.ts.map

package/lib/components/VisuallyHidden/VisuallyHidden.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.test.d.ts","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.test.tsx"],"names":[],"mappings":""}

package/lib/components/VisuallyHidden/VisuallyHidden.test.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, fireEvent } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { VisuallyHidden } from './VisuallyHidden.js';
+import { BKJThemeProvider } from '../../providers/BKJThemeProvider/index.js';
+expect.extend(toHaveNoViolations);
+const renderWithTheme = (component) => {
+    return render(_jsx(BKJThemeProvider, { children: component }));
+};
+describe('VisuallyHidden', () => {
+    describe('US1: Screen reader content', () => {
+        it('renders children text in the DOM', () => {
+            const { getByText } = renderWithTheme(_jsx(VisuallyHidden, { children: "Hidden label" }));
+            expect(getByText('Hidden label')).toBeInTheDocument();
+        });
+        it('applies visually hidden CSS styles', () => {
+            const { getByText } = renderWithTheme(_jsx(VisuallyHidden, { children: "Hidden label" }));
+            const element = getByText('Hidden label');
+            const styles = window.getComputedStyle(element);
+            expect(styles.position).toBe('absolute');
+            expect(styles.width).toBe('1px');
+            expect(styles.height).toBe('1px');
+            expect(styles.overflow).toBe('hidden');
+        });
+        it('renders without errors when no children are provided', () => {
+            const { container } = renderWithTheme(_jsx(VisuallyHidden, { children: undefined }));
+            expect(container.firstChild).toBeInTheDocument();
+        });
+    });
+    describe('US2: Polymorphic element rendering', () => {
+        it('renders as a span by default', () => {
+            const { getByText } = renderWithTheme(_jsx(VisuallyHidden, { children: "Default element" }));
+            // span has no implicit ARIA role, so we use the DOM element check
+            expect(getByText('Default element').tagName).toBe('SPAN');
+        });
+        it('renders as a div when as="div" is passed', () => {
+            const { getByText } = renderWithTheme(_jsx(VisuallyHidden, { as: "div", children: "Div element" }));
+            expect(getByText('Div element').tagName).toBe('DIV');
+        });
+        it('renders as an h2 when as="h2" is passed', () => {
+            const { getByRole } = renderWithTheme(_jsx(VisuallyHidden, { as: "h2", children: "Section heading" }));
+            expect(getByRole('heading', { level: 2 })).toBeInTheDocument();
+        });
+        it('forwards HTML attributes to the rendered element', () => {
+            const { getByText } = renderWithTheme(_jsx(VisuallyHidden, { id: "sr-label", className: "custom-class", children: "Attributed element" }));
+            const element = getByText('Attributed element');
+            expect(element).toHaveAttribute('id', 'sr-label');
+            expect(element).toHaveClass('custom-class');
+        });
+    });
+    describe('US3: Focusable skip links', () => {
+        it('does not change styles when focused and focusable is false', () => {
+            const { getByText } = renderWithTheme(_jsx(VisuallyHidden, { children: "Not focusable" }));
+            const element = getByText('Not focusable');
+            fireEvent.focus(element);
+            const styles = window.getComputedStyle(element);
+            expect(styles.position).toBe('absolute');
+            expect(styles.width).toBe('1px');
+            expect(styles.height).toBe('1px');
+        });
+        it('renders without error when focusable is true', () => {
+            const { getByText } = renderWithTheme(_jsx(VisuallyHidden, { as: "a", focusable: true, children: "Skip to content" }));
+            expect(getByText('Skip to content')).toBeInTheDocument();
+        });
+        it('applies hidden styles in default state when focusable is true', () => {
+            const { getByText } = renderWithTheme(_jsx(VisuallyHidden, { as: "a", focusable: true, children: "Skip to content" }));
+            const element = getByText('Skip to content');
+            const styles = window.getComputedStyle(element);
+            expect(styles.position).toBe('absolute');
+            expect(styles.width).toBe('1px');
+        });
+        it('can receive focus when focusable is true', () => {
+            const handleFocus = jest.fn();
+            const { getByText } = renderWithTheme(_jsx(VisuallyHidden, { as: "a", href: "#main", focusable: true, onFocus: handleFocus, children: "Skip to main content" }));
+            const element = getByText('Skip to main content');
+            fireEvent.focus(element);
+            expect(handleFocus).toHaveBeenCalledTimes(1);
+        });
+    });
+    describe('Accessibility', () => {
+        it('has no accessibility violations', async () => {
+            const { container } = renderWithTheme(_jsxs("button", { type: "button", children: [_jsx("span", { "aria-hidden": "true", children: "X" }), _jsx(VisuallyHidden, { children: "Close" })] }));
+            const results = await axe(container);
+            expect(results).toHaveNoViolations();
+        });
+    });
+});
+//# sourceMappingURL=VisuallyHidden.test.js.map

package/lib/components/VisuallyHidden/VisuallyHidden.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.test.js","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.test.tsx"],"names":[],"mappings":"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"}

package/lib/components/VisuallyHidden/VisuallyHidden.types.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, ElementType, ReactNode } from 'react';
+export interface IVisuallyHiddenProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    as?: ElementType;
+    focusable?: boolean;
+    [key: string]: unknown;
+}
+export interface IStyledVisuallyHiddenProps {
+    $focusable?: boolean;
+}
+//# sourceMappingURL=VisuallyHidden.types.d.ts.map

package/lib/components/VisuallyHidden/VisuallyHidden.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.types.d.ts","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/D,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACvE,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,0BAA0B;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/lib/components/VisuallyHidden/VisuallyHidden.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=VisuallyHidden.types.js.map

package/lib/components/VisuallyHidden/VisuallyHidden.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.types.js","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.types.ts"],"names":[],"mappings":""}

package/lib/components/VisuallyHidden/index.d.ts

@@ -0,0 +1,2 @@
+export * from './VisuallyHidden.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/VisuallyHidden/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/lib/components/VisuallyHidden/index.js

@@ -0,0 +1,2 @@
+export * from './VisuallyHidden.js';
+//# sourceMappingURL=index.js.map

package/lib/components/VisuallyHidden/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/lib/components/index.d.ts

@@ -44,4 +44,5 @@ export * from './BKJDropdownMenu/index.js';
 export * from './MobileBKJDropdownMenu/index.js';
 export * from './BKJPillDropdown/index.js';
 export * from './BKJTimeInput/index.js';
+export * from './VisuallyHidden/index.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/lib/components/index.js

@@ -44,4 +44,5 @@ export * from './BKJDropdownMenu/index.js';
 export * from './MobileBKJDropdownMenu/index.js';
 export * from './BKJPillDropdown/index.js';
 export * from './BKJTimeInput/index.js';
+export * from './VisuallyHidden/index.js';
 //# sourceMappingURL=index.js.map

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bookjane2/bookjane-design-library",
-  "version": "8.3.0",
+  "version": "8.3.2",
   "main": "./lib/index.js",
   "typings": "./lib/index.d.ts",
   "engines": {
@@ -64,6 +64,7 @@
     "@types/google-map-react": "2.1.10",
     "@types/google.maps": "3.58.1",
     "@types/jest": "26.0.23",
+    "@types/jest-axe": "^3.5.9",
     "@types/lodash": "4.17.20",
     "@types/node": "20.17.0",
     "@types/react": "17.0.8",
@@ -79,7 +80,9 @@
     "eslint": "9.37.0",
     "husky": "6.0.0",
     "jest": "29.7.0",
+    "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "29.7.0",
+    "jest-util": "^29.7.0",
     "lint-staged": "11.0.0",
     "prettier": "2.3.0",
     "react": "17.0.2",