@westpac/ui 0.30.0 → 0.31.0

package/dist/components/icon/components/child-care-icon.js

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
-export function ChildCareIcon({ look ='filled' , 'aria-label': ariaLabel = 'Child Care' , copyrightYear ='2024' , ...props }) {
+export function ChildCareIcon({ look ='filled' , 'aria-label': ariaLabel = 'Child Care' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear

package/dist/components/icon/components/child-icon.js

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React from 'react';
 import { Icon } from '../icon.component.js';
-export function ChildIcon({ 'aria-label': ariaLabel = 'Child' , copyrightYear ='2024' , ...props }) {
+export function ChildIcon({ 'aria-label': ariaLabel = 'Child' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear

package/dist/components/icon/components/piggy-bank-icon.d.ts

@@ -0,0 +1,2 @@
+import { type IconProps } from '../icon.types.js';
+export declare function PiggyBankIcon({ look, 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/components/piggy-bank-icon.js

@@ -0,0 +1,35 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React, { Fragment } from 'react';
+import { Icon } from '../icon.component.js';
+export function PiggyBankIcon({ look ='filled' , 'aria-label': ariaLabel = 'Piggy Bank' , copyrightYear ='2023' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), look === 'filled' ? React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M.99 15.975A101.66 101.66 0 0 0 3 24h6v-3h4v3h5.6l2.01-7.92L24 14.97V6.5h-2.61l-2.73-2.63c.04-.24.095-.475.165-.705.07-.23.145-.455.225-.675.04-.1.075-.21.105-.33a1.736 1.736 0 0 0-.48-1.635A1.736 1.736 0 0 0 17.4 0c-.96 0-1.855.21-2.685.63A6.098 6.098 0 0 0 12.6 2.4h-6c-1.84 0-3.4.64-4.68 1.92C.64 5.6 0 7.16 0 9c0 2.136.42 4.19.845 6.264l.145.711ZM6 7a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Zm12.5 3.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z",
+        clipRule: "evenodd"
+    }) : React.createElement(Fragment, null, React.createElement("g", {
+        fill: "currentColor"
+    }, React.createElement("path", {
+        d: "M18.5 10.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM7 6a1 1 0 0 0 0 2h5a1 1 0 1 0 0-2H7Z"
+    }), React.createElement("path", {
+        fillRule: "evenodd",
+        d: "M12.6 2.4h-6c-1.84 0-3.4.64-4.68 1.92C.64 5.6 0 7.16 0 9c0 2.136.42 4.19.845 6.264l.145.711A101.66 101.66 0 0 0 3 24h6v-3h4v3h5.6l2.01-7.92L24 14.97V6.5h-2.61l-2.73-2.63c.04-.24.095-.475.165-.705.07-.23.145-.455.225-.675.04-.1.075-.21.105-.33a1.736 1.736 0 0 0-.48-1.635A1.736 1.736 0 0 0 17.4 0c-.96 0-1.855.21-2.685.63A6.098 6.098 0 0 0 12.6 2.4ZM22 8.5h-1.417l-4.069-3.92.173-1.039c.054-.324.129-.644.225-.958.058-.193.12-.384.186-.573a3.808 3.808 0 0 0-1.48.405 4.1 4.1 0 0 0-1.428 1.198l-.6.787H6.6c-1.32 0-2.368.436-3.266 1.334C2.436 6.632 2 7.681 2 9c0 1.921.378 3.772.808 5.877l.142.702A99.66 99.66 0 0 0 4.507 22H7v-3h8v3h2.044l1.898-7.478L22 13.52V8.5Z",
+        clipRule: "evenodd"
+    }))));
+}

package/dist/components/icon/components/x-icon.js

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
-export function XIcon({ look ='filled' , 'aria-label': ariaLabel = 'X' , copyrightYear ='2024' , ...props }) {
+export function XIcon({ look ='filled' , 'aria-label': ariaLabel = 'X' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear

package/dist/components/icon/index.d.ts

@@ -41,6 +41,8 @@ export { CardlessCashIcon } from './components/cardless-cash-icon.js';
 export { CartIcon } from './components/cart-icon.js';
 export { ChatIcon } from './components/chat-icon.js';
 export { CheckIcon } from './components/check-icon.js';
+export { ChildCareIcon } from './components/child-care-icon.js';
+export { ChildIcon } from './components/child-icon.js';
 export { CircleIcon } from './components/circle-icon.js';
 export { ClearIcon } from './components/clear-icon.js';
 export { ClockIcon } from './components/clock-icon.js';
@@ -164,6 +166,7 @@ export { PercentIcon } from './components/percent-icon.js';
 export { PersonIcon } from './components/person-icon.js';
 export { PhoneIcon } from './components/phone-icon.js';
 export { PieChartIcon } from './components/pie-chart-icon.js';
+export { PiggyBankIcon } from './components/piggy-bank-icon.js';
 export { PizzaIcon } from './components/pizza-icon.js';
 export { PlaneIcon } from './components/plane-icon.js';
 export { PlayCircleIcon } from './components/play-circle-icon.js';
@@ -236,6 +239,7 @@ export { WindowsNewIcon } from './components/windows-new-icon.js';
 export { WineGlassIcon } from './components/wine-glass-icon.js';
 export { WordFileIcon } from './components/word-file-icon.js';
 export { WriteIcon } from './components/write-icon.js';
+export { XIcon } from './components/x-icon.js';
 export { YammerIcon } from './components/yammer-icon.js';
 export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';

package/dist/components/icon/index.js

@@ -41,6 +41,8 @@ export { CardlessCashIcon } from './components/cardless-cash-icon.js';
 export { CartIcon } from './components/cart-icon.js';
 export { ChatIcon } from './components/chat-icon.js';
 export { CheckIcon } from './components/check-icon.js';
+export { ChildCareIcon } from './components/child-care-icon.js';
+export { ChildIcon } from './components/child-icon.js';
 export { CircleIcon } from './components/circle-icon.js';
 export { ClearIcon } from './components/clear-icon.js';
 export { ClockIcon } from './components/clock-icon.js';
@@ -164,6 +166,7 @@ export { PercentIcon } from './components/percent-icon.js';
 export { PersonIcon } from './components/person-icon.js';
 export { PhoneIcon } from './components/phone-icon.js';
 export { PieChartIcon } from './components/pie-chart-icon.js';
+export { PiggyBankIcon } from './components/piggy-bank-icon.js';
 export { PizzaIcon } from './components/pizza-icon.js';
 export { PlaneIcon } from './components/plane-icon.js';
 export { PlayCircleIcon } from './components/play-circle-icon.js';
@@ -236,6 +239,7 @@ export { WindowsNewIcon } from './components/windows-new-icon.js';
 export { WineGlassIcon } from './components/wine-glass-icon.js';
 export { WordFileIcon } from './components/word-file-icon.js';
 export { WriteIcon } from './components/write-icon.js';
+export { XIcon } from './components/x-icon.js';
 export { YammerIcon } from './components/yammer-icon.js';
 export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';

package/dist/components/symbol/components/symbols/x-mark-inverse-symbol.d.ts

@@ -0,0 +1,2 @@
+import { type SymbolProps } from '../../symbol.types.js';
+export declare const XMarkInverseSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/x-mark-inverse-symbol.js

@@ -0,0 +1,27 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+export const XMarkInverseSymbol = ({ 'aria-label': ariaLabel = 'X' , copyrightYear ='' , viewBoxWidth =32 , viewBoxHeight =32 , className , ...props })=>React.createElement(Symbol, _extends({
+        className: clsx('h-[32px] w-[32px]', className),
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        viewBoxWidth: viewBoxWidth,
+        viewBoxHeight: viewBoxHeight
+    }, props), React.createElement("path", {
+        fill: "#fff",
+        d: "M44.635 32.455 72.555 0H65.94L41.696 28.18 22.333 0H0l29.28 42.614L0 76.648h6.617l25.601-29.76 20.449 29.76H75L44.634 32.455h.001ZM35.573 42.99l-2.967-4.243L9.001 4.98h10.162l19.05 27.25 2.967 4.243 24.762 35.42H55.78L35.573 42.99v-.002Z"
+    }));

package/dist/components/symbol/components/symbols/x-mark-symbol.d.ts

@@ -0,0 +1,2 @@
+import { type SymbolProps } from '../../symbol.types.js';
+export declare const XMarkSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/x-mark-symbol.js

@@ -0,0 +1,27 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+export const XMarkSymbol = ({ 'aria-label': ariaLabel = 'X' , copyrightYear ='' , viewBoxWidth =32 , viewBoxHeight =32 , className , ...props })=>React.createElement(Symbol, _extends({
+        className: clsx('h-[32px] w-[32px]', className),
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        viewBoxWidth: viewBoxWidth,
+        viewBoxHeight: viewBoxHeight
+    }, props), React.createElement("path", {
+        fill: "#000",
+        d: "M44.635 32.455 72.555 0H65.94L41.696 28.18 22.333 0H0l29.28 42.614L0 76.648h6.617l25.601-29.76 20.449 29.76H75L44.634 32.455h.001ZM35.573 42.99l-2.967-4.243L9.001 4.98h10.162l19.05 27.25 2.967 4.243 24.762 35.42H55.78L35.573 42.99v-.002Z"
+    }));

package/dist/components/symbol/components/symbols/x-symbol.d.ts

@@ -0,0 +1,2 @@
+import { type SymbolProps } from '../../symbol.types.js';
+export declare const XSymbol: ({ "aria-label": ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/symbol/components/symbols/x-symbol.js

@@ -0,0 +1,38 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+export const XSymbol = ({ 'aria-label': ariaLabel = 'X' , copyrightYear ='' , viewBoxWidth =32 , viewBoxHeight =32 , className , ...props })=>React.createElement(Symbol, _extends({
+        className: clsx('h-[32px] w-[32px]', className),
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        viewBoxWidth: viewBoxWidth,
+        viewBoxHeight: viewBoxHeight
+    }, props), React.createElement("g", {
+        "clip-path": "url(#clip0_1842_16)"
+    }, React.createElement("path", {
+        d: "M30 0H2C0.89543 0 0 0.89543 0 2V30C0 31.1046 0.89543 32 2 32H30C31.1046 32 32 31.1046 32 30V2C32 0.89543 31.1046 0 30 0Z",
+        fill: "black"
+    }), React.createElement("path", {
+        d: "M18.093 14.1624L26.283 4H24.3422L17.2308 12.8238L11.551 4H5L13.589 17.3432L5 28H6.94088L14.4507 18.6817L20.449 28H27L18.0925 14.1624H18.093ZM15.4347 17.4608L14.5644 16.1321L7.6402 5.55962H10.6213L16.2092 14.0919L17.0795 15.4206L24.3431 26.5113H21.3621L15.4347 17.4613V17.4608Z",
+        fill: "white"
+    })), React.createElement("defs", null, React.createElement("clipPath", {
+        id: "clip0_1842_16"
+    }, React.createElement("rect", {
+        width: "32",
+        height: "32",
+        fill: "white"
+    }))));

package/dist/components/symbol/index.d.ts

@@ -51,6 +51,9 @@ export { WBGInternalLogo } from './components/logos/wbg-internal-logo.js';
 export { WBGLogo } from './components/logos/wbg-logo.js';
 export { WBGMultibrandLargeLogo } from './components/logos/wbg-multibrand-large-logo.js';
 export { WBGMultibrandSmallLogo } from './components/logos/wbg-multibrand-small-logo.js';
+export { XSymbol } from './components/symbols/x-symbol.js';
+export { XMarkSymbol } from './components/symbols/x-mark-symbol.js';
+export { XMarkInverseSymbol } from './components/symbols/x-mark-inverse-symbol.js';
 export { YammerSymbol } from './components/symbols/yammer-symbol.js';
 export { YouTubeSymbol } from './components/symbols/youtube-symbol.js';
 export { type SymbolProps } from './symbol.types.js';

package/dist/components/symbol/index.js

@@ -51,5 +51,8 @@ export { WBGInternalLogo } from './components/logos/wbg-internal-logo.js';
 export { WBGLogo } from './components/logos/wbg-logo.js';
 export { WBGMultibrandLargeLogo } from './components/logos/wbg-multibrand-large-logo.js';
 export { WBGMultibrandSmallLogo } from './components/logos/wbg-multibrand-small-logo.js';
+export { XSymbol } from './components/symbols/x-symbol.js';
+export { XMarkSymbol } from './components/symbols/x-mark-symbol.js';
+export { XMarkInverseSymbol } from './components/symbols/x-mark-inverse-symbol.js';
 export { YammerSymbol } from './components/symbols/yammer-symbol.js';
 export { YouTubeSymbol } from './components/symbols/youtube-symbol.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -257,9 +257,9 @@
     "typescript": "^5.5.4",
     "vite": "^5.2.12",
     "vitest": "^0.30.1",
+    "@westpac/ts-config": "~0.0.0",
     "@westpac/eslint-config": "~0.4.0",
-    "@westpac/test-config": "~0.0.0",
-    "@westpac/ts-config": "~0.0.0"
+    "@westpac/test-config": "~0.0.0"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",

package/src/components/icon/components/child-care-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function ChildCareIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Child Care',
-  copyrightYear = '2024',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/child-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function ChildIcon({ 'aria-label': ariaLabel = 'Child', copyrightYear = '2024', ...props }: IconProps) {
+export function ChildIcon({ 'aria-label': ariaLabel = 'Child', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path

package/src/components/icon/components/piggy-bank-icon.tsx

@@ -0,0 +1,35 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function PiggyBankIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Piggy Bank',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M.99 15.975A101.66 101.66 0 0 0 3 24h6v-3h4v3h5.6l2.01-7.92L24 14.97V6.5h-2.61l-2.73-2.63c.04-.24.095-.475.165-.705.07-.23.145-.455.225-.675.04-.1.075-.21.105-.33a1.736 1.736 0 0 0-.48-1.635A1.736 1.736 0 0 0 17.4 0c-.96 0-1.855.21-2.685.63A6.098 6.098 0 0 0 12.6 2.4h-6c-1.84 0-3.4.64-4.68 1.92C.64 5.6 0 7.16 0 9c0 2.136.42 4.19.845 6.264l.145.711ZM6 7a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Zm12.5 3.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z"
+          clipRule="evenodd"
+        />
+      ) : (
+        <Fragment>
+          <g fill="currentColor">
+            <path d="M18.5 10.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM7 6a1 1 0 0 0 0 2h5a1 1 0 1 0 0-2H7Z" />
+            <path
+              fillRule="evenodd"
+              d="M12.6 2.4h-6c-1.84 0-3.4.64-4.68 1.92C.64 5.6 0 7.16 0 9c0 2.136.42 4.19.845 6.264l.145.711A101.66 101.66 0 0 0 3 24h6v-3h4v3h5.6l2.01-7.92L24 14.97V6.5h-2.61l-2.73-2.63c.04-.24.095-.475.165-.705.07-.23.145-.455.225-.675.04-.1.075-.21.105-.33a1.736 1.736 0 0 0-.48-1.635A1.736 1.736 0 0 0 17.4 0c-.96 0-1.855.21-2.685.63A6.098 6.098 0 0 0 12.6 2.4ZM22 8.5h-1.417l-4.069-3.92.173-1.039c.054-.324.129-.644.225-.958.058-.193.12-.384.186-.573a3.808 3.808 0 0 0-1.48.405 4.1 4.1 0 0 0-1.428 1.198l-.6.787H6.6c-1.32 0-2.368.436-3.266 1.334C2.436 6.632 2 7.681 2 9c0 1.921.378 3.772.808 5.877l.142.702A99.66 99.66 0 0 0 4.507 22H7v-3h8v3h2.044l1.898-7.478L22 13.52V8.5Z"
+              clipRule="evenodd"
+            />
+          </g>
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/x-icon.tsx

@@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function XIcon({ look = 'filled', 'aria-label': ariaLabel = 'X', copyrightYear = '2024', ...props }: IconProps) {
+export function XIcon({ look = 'filled', 'aria-label': ariaLabel = 'X', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       {look === 'filled' ? (

package/src/components/icon/index.ts

@@ -41,6 +41,8 @@ export { CardlessCashIcon } from './components/cardless-cash-icon.js';
 export { CartIcon } from './components/cart-icon.js';
 export { ChatIcon } from './components/chat-icon.js';
 export { CheckIcon } from './components/check-icon.js';
+export { ChildCareIcon } from './components/child-care-icon.js';
+export { ChildIcon } from './components/child-icon.js';
 export { CircleIcon } from './components/circle-icon.js';
 export { ClearIcon } from './components/clear-icon.js';
 export { ClockIcon } from './components/clock-icon.js';
@@ -164,6 +166,7 @@ export { PercentIcon } from './components/percent-icon.js';
 export { PersonIcon } from './components/person-icon.js';
 export { PhoneIcon } from './components/phone-icon.js';
 export { PieChartIcon } from './components/pie-chart-icon.js';
+export { PiggyBankIcon } from './components/piggy-bank-icon.js';
 export { PizzaIcon } from './components/pizza-icon.js';
 export { PlaneIcon } from './components/plane-icon.js';
 export { PlayCircleIcon } from './components/play-circle-icon.js';
@@ -236,6 +239,7 @@ export { WindowsNewIcon } from './components/windows-new-icon.js';
 export { WineGlassIcon } from './components/wine-glass-icon.js';
 export { WordFileIcon } from './components/word-file-icon.js';
 export { WriteIcon } from './components/write-icon.js';
+export { XIcon } from './components/x-icon.js';
 export { YammerIcon } from './components/yammer-icon.js';
 export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';

package/src/components/symbol/components/symbols/x-mark-inverse-symbol.tsx

@@ -0,0 +1,28 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const XMarkInverseSymbol = ({
+  'aria-label': ariaLabel = 'X',
+  copyrightYear = '',
+  viewBoxWidth = 32,
+  viewBoxHeight = 32,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[32px] w-[32px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <path
+      fill="#fff"
+      d="M44.635 32.455 72.555 0H65.94L41.696 28.18 22.333 0H0l29.28 42.614L0 76.648h6.617l25.601-29.76 20.449 29.76H75L44.634 32.455h.001ZM35.573 42.99l-2.967-4.243L9.001 4.98h10.162l19.05 27.25 2.967 4.243 24.762 35.42H55.78L35.573 42.99v-.002Z"
+    />
+  </Symbol>
+);

package/src/components/symbol/components/symbols/x-mark-symbol.tsx

@@ -0,0 +1,28 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const XMarkSymbol = ({
+  'aria-label': ariaLabel = 'X',
+  copyrightYear = '',
+  viewBoxWidth = 32,
+  viewBoxHeight = 32,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[32px] w-[32px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <path
+      fill="#000"
+      d="M44.635 32.455 72.555 0H65.94L41.696 28.18 22.333 0H0l29.28 42.614L0 76.648h6.617l25.601-29.76 20.449 29.76H75L44.634 32.455h.001ZM35.573 42.99l-2.967-4.243L9.001 4.98h10.162l19.05 27.25 2.967 4.243 24.762 35.42H55.78L35.573 42.99v-.002Z"
+    />
+  </Symbol>
+);

package/src/components/symbol/components/symbols/x-symbol.tsx

@@ -0,0 +1,39 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const XSymbol = ({
+  'aria-label': ariaLabel = 'X',
+  copyrightYear = '',
+  viewBoxWidth = 32,
+  viewBoxHeight = 32,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[32px] w-[32px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g clip-path="url(#clip0_1842_16)">
+      <path
+        d="M30 0H2C0.89543 0 0 0.89543 0 2V30C0 31.1046 0.89543 32 2 32H30C31.1046 32 32 31.1046 32 30V2C32 0.89543 31.1046 0 30 0Z"
+        fill="black"
+      />
+      <path
+        d="M18.093 14.1624L26.283 4H24.3422L17.2308 12.8238L11.551 4H5L13.589 17.3432L5 28H6.94088L14.4507 18.6817L20.449 28H27L18.0925 14.1624H18.093ZM15.4347 17.4608L14.5644 16.1321L7.6402 5.55962H10.6213L16.2092 14.0919L17.0795 15.4206L24.3431 26.5113H21.3621L15.4347 17.4613V17.4608Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1842_16">
+        <rect width="32" height="32" fill="white" />
+      </clipPath>
+    </defs>
+  </Symbol>
+);

package/src/components/symbol/index.ts

@@ -51,6 +51,9 @@ export { WBGInternalLogo } from './components/logos/wbg-internal-logo.js';
 export { WBGLogo } from './components/logos/wbg-logo.js';
 export { WBGMultibrandLargeLogo } from './components/logos/wbg-multibrand-large-logo.js';
 export { WBGMultibrandSmallLogo } from './components/logos/wbg-multibrand-small-logo.js';
+export { XSymbol } from './components/symbols/x-symbol.js';
+export { XMarkSymbol } from './components/symbols/x-mark-symbol.js';
+export { XMarkInverseSymbol } from './components/symbols/x-mark-inverse-symbol.js';
 export { YammerSymbol } from './components/symbols/yammer-symbol.js';
 export { YouTubeSymbol } from './components/symbols/youtube-symbol.js';