@google-psat/design-system 0.9.0-1

package/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "rules": {
+    "no-console": "off"
+  },
+  "ignorePatterns": ["dist/**", "dist-types/**"]
+}

package/README.md

@@ -0,0 +1,4 @@
+# Common
+
+## Description
+A package for presentational components that are being used in multiple packages

package/dist/components/bulletList/index.jsx

@@ -0,0 +1,51 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+const i18n_1 = require("@google-psat/i18n");
+/**
+ * Internal dependencies.
+ */
+const listRow_1 = __importDefault(require("./listRow"));
+const BulletList = ({ rows, heading }) => {
+    return (<>
+      {heading && (<>
+          <h2 className="text-xs font-bold uppercase text-darkest-gray dark:text-bright-gray">
+            {heading}
+          </h2>
+          <hr className="border-0 border-b border-hex-gray dark:border-quartz"/>
+        </>)}
+      <div className="space-y-4">
+        {rows.length === 0 ? (<p className="text-darkest-gray dark:text-bright-gray">
+            {i18n_1.I18n.getMessage('noNews')}
+          </p>) : (<>
+            {rows.map((rowItem) => {
+                var _a;
+                return (<listRow_1.default row={rowItem} key={(_a = rowItem === null || rowItem === void 0 ? void 0 : rowItem.key) !== null && _a !== void 0 ? _a : rowItem.title}/>);
+            })}
+          </>)}
+      </div>
+    </>);
+};
+exports.default = BulletList;
+//# sourceMappingURL=index.jsx.map

package/dist/components/bulletList/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/bulletList/index.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;;;;AAEH;;GAEG;AACH,kDAA0B;AAC1B,4CAAyC;AAEzC;;GAEG;AACH,wDAAgC;AAOhC,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAmB,EAAE,EAAE;IACxD,OAAO,CACL,EACE;MAAA,CAAC,OAAO,IAAI,CACV,EACE;UAAA,CAAC,EAAE,CAAC,SAAS,CAAC,qEAAqE,CACjF;YAAA,CAAC,OAAO,CACV;UAAA,EAAE,EAAE,CACJ;UAAA,CAAC,EAAE,CAAC,SAAS,CAAC,sDAAsD,EACtE;QAAA,GAAG,CACJ,CACD;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,WAAW,CACxB;QAAA,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACnB,CAAC,CAAC,CAAC,SAAS,CAAC,yCAAyC,CACpD;YAAA,CAAC,WAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAC5B;UAAA,EAAE,CAAC,CAAC,CACL,CAAC,CAAC,CAAC,CACF,EACE;YAAA,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;;gBAAC,OAAA,CACrB,CAAC,iBAAO,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,mCAAI,OAAO,CAAC,KAAK,CAAC,EAAG,CAC9D,CAAA;aAAA,CAAC,CACJ;UAAA,GAAG,CACJ,CACH;MAAA,EAAE,GAAG,CACP;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC"}

package/dist/components/bulletList/listRow.jsx

@@ -0,0 +1,41 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+/**
+ * Internal dependencies.
+ */
+const icons_1 = require("../../icons");
+const ListRow = ({ row }) => {
+    var _a;
+    return (<div className="flex gap-4 items-baseline" key={(_a = row === null || row === void 0 ? void 0 : row.key) !== null && _a !== void 0 ? _a : row.title}>
+      <span>
+        <icons_1.Ellipse />
+      </span>
+      {(row === null || row === void 0 ? void 0 : row.link) ? (<a title={row.link} href={row.link} target="_blank" rel="noreferrer" className="text-sm text-bright-navy-blue dark:text-jordy-blue font-medium leading-6">
+          {row.title}
+        </a>) : (<p className="text-sm font-medium leading-6">{row.title}</p>)}
+    </div>);
+};
+exports.default = ListRow;
+//# sourceMappingURL=listRow.jsx.map

package/dist/components/bulletList/listRow.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"listRow.jsx","sourceRoot":"","sources":["../../../src/components/bulletList/listRow.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;;;;AAEH;;GAEG;AACH,kDAA0B;AAE1B;;GAEG;AACH,uCAAsC;AAMtC,MAAM,OAAO,GAAG,CAAC,EAAE,GAAG,EAAS,EAAE,EAAE;;IACjC,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,2BAA2B,CAAC,GAAG,CAAC,CAAC,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,GAAG,mCAAI,GAAG,CAAC,KAAK,CAAC,CACpE;MAAA,CAAC,IAAI,CACH;QAAA,CAAC,eAAO,CAAC,AAAD,EACV;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,EAAC,CAAC,CAAC,CACX,CAAC,CAAC,CACA,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAChB,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CACf,MAAM,CAAC,QAAQ,CACf,GAAG,CAAC,YAAY,CAChB,SAAS,CAAC,0EAA0E,CAEpF;UAAA,CAAC,GAAG,CAAC,KAAK,CACZ;QAAA,EAAE,CAAC,CAAC,CACL,CAAC,CAAC,CAAC,CACF,CAAC,CAAC,CAAC,SAAS,CAAC,+BAA+B,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAC7D,CACH;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,OAAO,CAAC"}

package/dist/components/button/index.jsx

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const Button = ({ title = '', text, name = 'button', onClick = undefined, type = 'button', variant = 'primary', extraClasses = '', disabled = false, }) => {
+    return (<button title={title} data-test-id="button" type={type} name={name} disabled={disabled} onClick={onClick ? onClick : undefined} className={(0, classnames_1.default)(extraClasses, 'rounded flex items-center text-center py-1 px-2 font-medium', {
+            'py-0.5 px-1.5 text-xs bg-sapphire dark:bg-baby-blue-eyes text-white dark:text-raisin-black': variant === 'small',
+            'rounded-xs md:py-3.5 md:px-9 xxs:max-sm:p-2 xs:max-md:py-4 sm:max-md:px-2 bg-smurf-blue dark:bg-google-blue text-white dark:text-raisin-black': variant === 'large',
+            'bg-sapphire dark:bg-baby-blue-eyes text-white dark:text-raisin-black': variant === 'primary',
+            'bg-transparent text-raisin-black dark:text-bright-gray active:opacity-60': variant === 'secondary',
+            'text-white dark:text-white bg-red-500': variant === 'danger',
+        }, {
+            'opacity-70 cursor-default': disabled,
+            'hover:bg-tufts-blue dark:hover:bg-pale-cornflower-blue': !disabled && (variant === 'small' || variant === 'primary'),
+            'hover:bg-beteleguese dark:hover:bg-bright-navy-blue': !disabled && variant === 'large',
+            'hover:opacity-80': !disabled && variant === 'secondary',
+            'hover:bg-red-600': !disabled && variant === 'danger',
+        })}>
+      {text}
+    </button>);
+};
+exports.default = Button;
+//# sourceMappingURL=index.jsx.map

package/dist/components/button/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":";;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,4DAAoC;AACpC,kDAA0B;AAa1B,MAAM,MAAM,GAAG,CAAC,EACd,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,EACnB,YAAY,GAAG,EAAE,EACjB,QAAQ,GAAG,KAAK,GACJ,EAAE,EAAE;IAChB,OAAO,CACL,CAAC,MAAM,CACL,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,YAAY,CAAC,QAAQ,CACrB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CACvC,SAAS,CAAC,CAAC,IAAA,oBAAU,EACnB,YAAY,EACZ,6DAA6D,EAC7D;YACE,4FAA4F,EAC1F,OAAO,KAAK,OAAO;YACrB,+IAA+I,EAC7I,OAAO,KAAK,OAAO;YACrB,sEAAsE,EACpE,OAAO,KAAK,SAAS;YACvB,0EAA0E,EACxE,OAAO,KAAK,WAAW;YACzB,uCAAuC,EAAE,OAAO,KAAK,QAAQ;SAC9D,EACD;YACE,2BAA2B,EAAE,QAAQ;YACrC,wDAAwD,EACtD,CAAC,QAAQ,IAAI,CAAC,OAAO,KAAK,OAAO,IAAI,OAAO,KAAK,SAAS,CAAC;YAC7D,qDAAqD,EACnD,CAAC,QAAQ,IAAI,OAAO,KAAK,OAAO;YAClC,kBAAkB,EAAE,CAAC,QAAQ,IAAI,OAAO,KAAK,WAAW;YACxD,kBAAkB,EAAE,CAAC,QAAQ,IAAI,OAAO,KAAK,QAAQ;SACtD,CACF,CAAC,CAEF;MAAA,CAAC,IAAI,CACP;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,MAAM,CAAC"}

package/dist/components/button/stories/Button.stories.jsx

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+/**
+ * Internal dependencies.
+ */
+const __1 = __importDefault(require(".."));
+const meta = {
+    title: 'DesignSystem/Button',
+    component: __1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        text: 'Analyze this tab',
+        onClick: () => undefined,
+    },
+};
+//# sourceMappingURL=Button.stories.jsx.map

package/dist/components/button/stories/Button.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.jsx","sourceRoot":"","sources":["../../../../src/components/button/stories/Button.stories.tsx"],"names":[],"mappings":";;;;;;AAoBA;;GAEG;AACH,2CAAwB;AAExB,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,WAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,kBAAe,IAAI,CAAC;AAEP,QAAA,OAAO,GAA0B;IAC5C,IAAI,EAAE;QACJ,IAAI,EAAE,kBAAkB;QACxB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS;KACzB;CACF,CAAC"}

package/dist/components/circle/circleEmpty.jsx

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+/**
+ * Internal dependencies
+ */
+const colors_1 = require("../../theme/colors");
+const CircleEmpty = ({ color = colors_1.COLOR_MAP.mediumGray.color, }) => (<div className="w-2.5 h-2.5 flex-shrink-0 rounded-full border-2 border-solid" style={{ borderColor: color }}/>);
+exports.default = CircleEmpty;
+//# sourceMappingURL=circleEmpty.jsx.map

package/dist/components/circle/circleEmpty.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"circleEmpty.jsx","sourceRoot":"","sources":["../../../src/components/circle/circleEmpty.tsx"],"names":[],"mappings":";;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,kDAA0B;AAC1B;;GAEG;AACH,+CAA+C;AAM/C,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,GAAG,kBAAS,CAAC,UAAU,CAAC,KAAK,GACjB,EAAE,EAAE,CAAC,CACtB,CAAC,GAAG,CACF,SAAS,CAAC,8DAA8D,CACxE,KAAK,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,EAC9B,CACH,CAAC;AAEF,kBAAe,WAAW,CAAC"}

package/dist/components/circle/index.jsx

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+const Circle = ({ color }) => (<div className="w-2.5 flex-shrink-0 h-2.5 rounded-full flex items-center justify-center" style={{ backgroundColor: color }}/>);
+exports.default = Circle;
+//# sourceMappingURL=index.jsx.map

package/dist/components/circle/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/circle/index.tsx"],"names":[],"mappings":";;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,kDAA0B;AAM1B,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAe,EAAE,EAAE,CAAC,CACzC,CAAC,GAAG,CACF,SAAS,CAAC,yEAAyE,CACnF,KAAK,CAAC,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,CAAC,EAClC,CACH,CAAC;AAEF,kBAAe,MAAM,CAAC"}

package/dist/components/circle/stories/circle.stories.jsx

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+/**
+ * Internal dependencies
+ */
+const colors_1 = require("../../../theme/colors");
+/**
+ * Internal dependencies.
+ */
+const __1 = __importDefault(require(".."));
+const meta = {
+    title: 'DesignSystem/Circle',
+    component: __1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        color: colors_1.COLOR_MAP.functional.color,
+    },
+};
+//# sourceMappingURL=circle.stories.jsx.map

package/dist/components/circle/stories/circle.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle.stories.jsx","sourceRoot":"","sources":["../../../../src/components/circle/stories/circle.stories.tsx"],"names":[],"mappings":";;;;;;AAmBA;;GAEG;AACH,kDAAkD;AAElD;;GAEG;AACH,2CAAwB;AAExB,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,WAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,kBAAe,IAAI,CAAC;AAEP,QAAA,OAAO,GAA0B;IAC5C,IAAI,EAAE;QACJ,KAAK,EAAE,kBAAS,CAAC,UAAU,CAAC,KAAK;KAClC;CACF,CAAC"}

package/dist/components/circle/stories/circleEmpty.stories.jsx

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+/**
+ * Internal dependencies.
+ */
+const circleEmpty_1 = __importDefault(require("../circleEmpty"));
+const meta = {
+    title: 'DesignSystem/CircleEmpty',
+    component: circleEmpty_1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Primary = {};
+//# sourceMappingURL=circleEmpty.stories.jsx.map

package/dist/components/circle/stories/circleEmpty.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"circleEmpty.stories.jsx","sourceRoot":"","sources":["../../../../src/components/circle/stories/circleEmpty.stories.tsx"],"names":[],"mappings":";;;;;;AAoBA;;GAEG;AACH,iEAAyC;AAEzC,MAAM,IAAI,GAA6B;IACrC,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,qBAAW;IACtB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,kBAAe,IAAI,CAAC;AAEP,QAAA,OAAO,GAA0B,EAAE,CAAC"}

package/dist/components/circlePieChart/emptyCirclePieChart.jsx

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+const victory_1 = require("victory");
+/**
+ * Internal dependencies
+ */
+const colors_1 = require("../../theme/colors");
+const EmptyCirclePieChart = () => {
+    return (<div className="w-full h-full relative">
+      <victory_1.VictoryPie padding={0} innerRadius={0} colorScale={[colors_1.COLOR_MAP.brightGray.color]} data={[{ x: '', y: 100 }]}/>
+      <p className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center opacity-40 text-2xl leading-4'">
+        0
+      </p>
+    </div>);
+};
+exports.default = EmptyCirclePieChart;
+//# sourceMappingURL=emptyCirclePieChart.jsx.map

package/dist/components/circlePieChart/emptyCirclePieChart.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"emptyCirclePieChart.jsx","sourceRoot":"","sources":["../../../src/components/circlePieChart/emptyCirclePieChart.tsx"],"names":[],"mappings":";;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,kDAA0B;AAC1B,qCAAqC;AACrC;;GAEG;AACH,+CAA+C;AAE/C,MAAM,mBAAmB,GAAG,GAAG,EAAE;IAC/B,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,wBAAwB,CACrC;MAAA,CAAC,oBAAU,CACT,OAAO,CAAC,CAAC,CAAC,CAAC,CACX,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,UAAU,CAAC,CAAC,CAAC,kBAAS,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CACzC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAE5B;MAAA,CAAC,CAAC,CAAC,SAAS,CAAC,wGAAwG,CACnH;;MACF,EAAE,CAAC,CACL;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC"}

package/dist/components/circlePieChart/index.jsx

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_COUNT = void 0;
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+const victory_1 = require("victory");
+const classnames_1 = __importDefault(require("classnames"));
+/**
+ * Internal dependencies.
+ */
+const emptyCirclePieChart_1 = __importDefault(require("./emptyCirclePieChart"));
+exports.MAX_COUNT = 999;
+const CirclePieChart = ({ centerCount, data, title, centerTitleExtraClasses = '', pieChartExtraClasses = '', }) => {
+    const centerTitleClasses = centerCount <= exports.MAX_COUNT ? 'text-2xl' : 'text-l';
+    return (<div className="w-full h-full flex flex-col items-center justify-start">
+      <div className="inline-block align-bottom w-16">
+        {centerCount <= 0 ? (<emptyCirclePieChart_1.default />) : (<div className={`w-full h-full relative ${pieChartExtraClasses}`}>
+            <victory_1.VictoryPie padding={0} innerRadius={175} animate={{ duration: 400 }} data={data.map(({ count }) => ({ x: '', y: count }))} labels={() => ''} colorScale={data.map(({ color }) => color)}/>
+            <p className={(0, classnames_1.default)('absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-regular dark:text-bright-gray', centerTitleClasses, centerTitleExtraClasses)}>
+              {centerCount <= exports.MAX_COUNT ? centerCount : exports.MAX_COUNT + '+'}
+            </p>
+          </div>)}
+      </div>
+      {title && (<div className="flex items-center justify-center gap-1 mt-2 relative">
+          <p className="text-xs text-center font-semibold leading-relaxed dark:text-bright-gray">
+            {title}
+          </p>
+        </div>)}
+    </div>);
+};
+exports.default = CirclePieChart;
+//# sourceMappingURL=index.jsx.map

package/dist/components/circlePieChart/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/circlePieChart/index.tsx"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,kDAA0B;AAC1B,qCAAqC;AACrC,4DAAoC;AAEpC;;GAEG;AACH,gFAAwD;AAY3C,QAAA,SAAS,GAAG,GAAG,CAAC;AAE7B,MAAM,cAAc,GAAG,CAAC,EACtB,WAAW,EACX,IAAI,EACJ,KAAK,EACL,uBAAuB,GAAG,EAAE,EAC5B,oBAAoB,GAAG,EAAE,GACL,EAAE,EAAE;IACxB,MAAM,kBAAkB,GAAG,WAAW,IAAI,iBAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE5E,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,wDAAwD,CACrE;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,gCAAgC,CAC7C;QAAA,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC,CAAC,CAClB,CAAC,6BAAmB,CAAC,AAAD,EAAG,CACxB,CAAC,CAAC,CAAC,CACF,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,0BAA0B,oBAAoB,EAAE,CAAC,CAC/D;YAAA,CAAC,oBAAU,CACT,OAAO,CAAC,CAAC,CAAC,CAAC,CACX,WAAW,CAAC,CAAC,GAAG,CAAC,CACjB,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAC3B,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CACrD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CACjB,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAE7C;YAAA,CAAC,CAAC,CACA,SAAS,CAAC,CAAC,IAAA,oBAAU,EACnB,gGAAgG,EAChG,kBAAkB,EAClB,uBAAuB,CACxB,CAAC,CAEF;cAAA,CAAC,WAAW,IAAI,iBAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAS,GAAG,GAAG,CAC3D;YAAA,EAAE,CAAC,CACL;UAAA,EAAE,GAAG,CAAC,CACP,CACH;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,KAAK,IAAI,CACR,CAAC,GAAG,CAAC,SAAS,CAAC,sDAAsD,CACnE;UAAA,CAAC,CAAC,CAAC,SAAS,CAAC,yEAAyE,CACpF;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,CAAC,CACL;QAAA,EAAE,GAAG,CAAC,CACP,CACH;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,cAAc,CAAC"}

package/dist/components/circlePieChart/stories/circlePieChart.stories.jsx

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wide = exports.Primary = void 0;
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+/**
+ * Internal dependencies.
+ */
+const __1 = __importDefault(require(".."));
+const colors_1 = require("../../../theme/colors");
+const meta = {
+    title: 'DesignSystem/CirclePieChart',
+    component: __1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        centerCount: 39,
+        title: '1st party cookies',
+        data: [
+            {
+                count: 5,
+                color: colors_1.COLOR_MAP.functional.color,
+            },
+            {
+                count: 4,
+                color: colors_1.COLOR_MAP.marketing.color,
+            },
+            {
+                count: 0,
+                color: colors_1.COLOR_MAP.analytics.color,
+            },
+            {
+                count: 9,
+                color: colors_1.COLOR_MAP.uncategorized.color,
+            },
+        ],
+    },
+    render: (args) => (<div className="w-16">
+      <__1.default {...args}/>
+    </div>),
+};
+exports.Wide = {
+    args: {
+        centerCount: 39,
+        title: '1st party cookies',
+        data: [
+            {
+                count: 5,
+                color: colors_1.COLOR_MAP.functional.color,
+            },
+            {
+                count: 4,
+                color: colors_1.COLOR_MAP.marketing.color,
+            },
+            {
+                count: 0,
+                color: colors_1.COLOR_MAP.analytics.color,
+            },
+            {
+                count: 9,
+                color: colors_1.COLOR_MAP.uncategorized.color,
+            },
+        ],
+    },
+    render: (args) => (<div className="w-28 text-center">
+      <__1.default {...args}/>
+    </div>),
+};
+//# sourceMappingURL=circlePieChart.stories.jsx.map

package/dist/components/circlePieChart/stories/circlePieChart.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"circlePieChart.stories.jsx","sourceRoot":"","sources":["../../../../src/components/circlePieChart/stories/circlePieChart.stories.tsx"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,kDAA0B;AAG1B;;GAEG;AACH,2CAAgC;AAChC,kDAAkD;AAElD,MAAM,IAAI,GAAgC;IACxC,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,WAAc;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,kBAAe,IAAI,CAAC;AAEP,QAAA,OAAO,GAA0B;IAC5C,IAAI,EAAE;QACJ,WAAW,EAAE,EAAE;QACf,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE;YACJ;gBACE,KAAK,EAAE,CAAC;gBACR,KAAK,EAAE,kBAAS,CAAC,UAAU,CAAC,KAAK;aAClC;YACD;gBACE,KAAK,EAAE,CAAC;gBACR,KAAK,EAAE,kBAAS,CAAC,SAAS,CAAC,KAAK;aACjC;YACD;gBACE,KAAK,EAAE,CAAC;gBACR,KAAK,EAAE,kBAAS,CAAC,SAAS,CAAC,KAAK;aACjC;YACD;gBACE,KAAK,EAAE,CAAC;gBACR,KAAK,EAAE,kBAAS,CAAC,aAAa,CAAC,KAAK;aACrC;SACF;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,CACnB;MAAA,CAAC,WAAc,CAAC,IAAI,IAAI,CAAC,EAC3B;IAAA,EAAE,GAAG,CAAC,CACP;CACF,CAAC;AAEW,QAAA,IAAI,GAA0B;IACzC,IAAI,EAAE;QACJ,WAAW,EAAE,EAAE;QACf,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE;YACJ;gBACE,KAAK,EAAE,CAAC;gBACR,KAAK,EAAE,kBAAS,CAAC,UAAU,CAAC,KAAK;aAClC;YACD;gBACE,KAAK,EAAE,CAAC;gBACR,KAAK,EAAE,kBAAS,CAAC,SAAS,CAAC,KAAK;aACjC;YACD;gBACE,KAAK,EAAE,CAAC;gBACR,KAAK,EAAE,kBAAS,CAAC,SAAS,CAAC,KAAK;aACjC;YACD;gBACE,KAAK,EAAE,CAAC;gBACR,KAAK,EAAE,kBAAS,CAAC,aAAa,CAAC,KAAK;aACrC;SACF;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,CAAC,GAAG,CAAC,SAAS,CAAC,kBAAkB,CAC/B;MAAA,CAAC,WAAc,CAAC,IAAI,IAAI,CAAC,EAC3B;IAAA,EAAE,GAAG,CAAC,CACP;CACF,CAAC"}

package/dist/components/circlePieChart/stories/emptyCirclePieChart.stories.jsx

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wide = exports.Primary = void 0;
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+/**
+ * Internal dependencies.
+ */
+const emptyCirclePieChart_1 = __importDefault(require("../emptyCirclePieChart"));
+const meta = {
+    title: 'DesignSystem/CirclePieChart/EmptyCirclePieChart',
+    component: emptyCirclePieChart_1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Primary = {
+    render: (args) => (<div className="w-16 text-center">
+      <emptyCirclePieChart_1.default {...args}/>
+    </div>),
+    args: {},
+};
+exports.Wide = {
+    render: (args) => (<div className="w-28 text-center">
+      <emptyCirclePieChart_1.default {...args}/>
+    </div>),
+    args: {},
+};
+//# sourceMappingURL=emptyCirclePieChart.stories.jsx.map

package/dist/components/circlePieChart/stories/emptyCirclePieChart.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"emptyCirclePieChart.stories.jsx","sourceRoot":"","sources":["../../../../src/components/circlePieChart/stories/emptyCirclePieChart.stories.tsx"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,kDAA0B;AAG1B;;GAEG;AACH,iFAAyD;AAEzD,MAAM,IAAI,GAAqC;IAC7C,KAAK,EAAE,iDAAiD;IACxD,SAAS,EAAE,6BAAmB;IAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,kBAAe,IAAI,CAAC;AAEP,QAAA,OAAO,GAA0B;IAC5C,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,CAAC,GAAG,CAAC,SAAS,CAAC,kBAAkB,CAC/B;MAAA,CAAC,6BAAmB,CAAC,IAAI,IAAI,CAAC,EAChC;IAAA,EAAE,GAAG,CAAC,CACP;IACD,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,IAAI,GAA0B;IACzC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,CAAC,GAAG,CAAC,SAAS,CAAC,kBAAkB,CAC/B;MAAA,CAAC,6BAAmB,CAAC,IAAI,IAAI,CAAC,EAChC;IAAA,EAAE,GAAG,CAAC,CACP;IACD,IAAI,EAAE,EAAE;CACT,CAAC"}