@splunk/react-ui 4.12.1 → 4.14.0

package/.storybook-visual/config/snapshotResolver.js

@@ -0,0 +1,29 @@
+/* eslint-disable */
+const path = require('path');
+
+const family = process.env.STORYBOOK_THEME_FAMILY.toString();
+const browser = process.env.STORYBOOK_TEST_BROWSER.toString();
+
+module.exports = {
+    testPathForConsistencyCheck: `src/__test__/example.test.tsx`,
+
+    /** resolves from test to snapshot path */
+    resolveSnapshotPath: (testPath, snapshotExtension) => {
+        const testSourcePath = testPath.replace('.tsx', `.${browser}.${family}`);
+        // Get directory of test source file
+        const testDirectory = path.dirname(testSourcePath);
+        // Get file name of test source file
+        const testFilename = path.basename(testSourcePath);
+        return `${testDirectory}/__snapshots__/${testFilename}${snapshotExtension}`;
+    },
+
+    /** resolves from snapshot to test path */
+    resolveTestPath: (snapshotFilePath, snapshotExtension) => {
+        const testSourceFile = snapshotFilePath
+            .replace('__test__/__snapshots__', '__test__')
+            .replace(`.${browser}.${family}`, '.tsx')
+            .slice(0, -snapshotExtension.length);
+
+        return `${testSourceFile}`;
+    },
+};

package/.storybook-visual/main.js

@@ -0,0 +1,22 @@
+/* eslint-env node */
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const webpackMerge = require('webpack-merge');
+const webpackTestConfig = require('../webpack.test.config.js');
+
+module.exports = {
+    // visualRegression tests will only test *.stories and *.example files
+    stories: [
+        '../src/**/stories/*.stories.@(js|jsx|ts|tsx)',
+        '../src/**/stories/*.examples.@(js|jsx|ts|tsx)',
+    ],
+    addons: ['@splunk/themes/storybook-addon-splunk-themes'],
+    typescript: {
+        check: false,
+        checkOptions: {},
+        reactDocgen: false,
+    },
+    webpackFinal: (config) => {
+        return webpackMerge(webpackTestConfig, config);
+    },
+};

package/.storybook-visual/preview.jsx

@@ -0,0 +1,31 @@
+/* eslint-disable */
+import React from 'react';
+
+import {
+    parameters as infraParameters,
+    decorators as infraDecorators,
+} from '../../../infra/storybook/preview';
+
+const splunkThemes = process.env.STORYBOOK_THEME_FAMILY
+    ? {
+          family: process.env.STORYBOOK_THEME_FAMILY,
+          colorScheme: process.env.STORYBOOK_THEME_COLOR_SCHEME,
+          density: process.env.STORYBOOK_THEME_DENSITY,
+      }
+    : undefined;
+
+const parameters = {
+    ...infraParameters,
+    splunkThemes,
+};
+
+const decorators = [
+    ...infraDecorators,
+    (Story) => (
+        <div id="storybook-test-wrapper">
+            <Story />
+        </div>
+    ),
+];
+
+export { parameters, decorators };

package/.storybook-visual/scripts/test.sh

@@ -0,0 +1,108 @@
+#!/bin/bash
+
+family="prisma"
+colorScheme="dark"
+density="comfortable"
+browser="chromium"
+component=""
+maxWorkers="100%"
+a11y="false"
+skipBuild="false"
+
+if ! options=$(getopt -o tfcd -l theme,family,color,component,density,browser,all,updateSnapshot,maxWorkers,a11y,skipBuild $*)
+then
+    exit 1
+fi
+
+set -- $options
+
+while [ $# -gt 0 ]
+do
+    case $1 in
+    -t|--theme) themeArg=$2 ;;
+    -f|--family) familyArg=$2 ;;
+    -c|--color) colorSchemeArg=$2 ;;
+    -ct|--component) componentArg=$2 ;;
+    -d|--density) densityArg=$2 ;;
+    -a|--all) all='true' ;;
+    -u|--updateSnapshot) updateSnapshot='--updateSnapshot' ;;
+    -a|--a11y) a11y='true' ;;
+    -u|--maxWorkers) maxWorkers=$2 ;;
+    -ssb|--skipBuild) skipBuild='true' ;;
+    esac
+    shift
+done
+
+
+
+if [[ "$themeArg" == "enterprise" ]]; then
+    family="enterprise"
+    colorScheme="light"
+    density="comfortable"
+fi
+
+if [[ "$themeArg" == "prisma" ]]; then
+    family="prisma"
+    colorScheme="dark"
+    density="comfortable"
+fi
+
+if [[ -n "$familyArg" ]]; then
+    family="$familyArg"
+fi
+
+if [[ -n "$colorSchemeArg" ]]; then
+    colorScheme="$colorSchemeArg"
+fi
+
+if [[ -n "$densityArg" ]]; then
+    density="$densityArg"
+fi
+
+if [[ -n "$browserArg" ]]; then
+    browser="$browserArg"
+fi
+
+export STORYBOOK_THEME_FAMILY=$family
+export STORYBOOK_THEME_COLOR_SCHEME=$colorScheme
+export STORYBOOK_THEME_DENSITY=$density
+export STORYBOOK_TEST_BROWSER=$browser
+export STORYBOOK_TEST_A11Y=$a11y
+
+if [[ -n "$componentArg" ]]; then
+    export STORYBOOK_TEST_COMPONENT=$componentArg
+fi 
+
+if [[ $all == "true" ]]; then
+    if [[ $skipBuild == 'false' ]]; then 
+        yarn build-storybook -c .storybook-visual --output-dir storybook-static-visual
+    else 
+        echo "--skipBuild should not be used with --all. This will create invalid snapshots!"
+        exit 1;
+    fi
+    yarn build-storybook -c .storybook-visual --output-dir storybook-static-visual
+    http-server storybook-static-visual --port 6007 & wait-on tcp:6007
+    yarn cache clean && yarn test-storybook  -c .storybook-visual ${updateSnapshot} --maxWorkers=${maxWorkers} --browsers chromium --url http://localhost:6007
+    
+    export STORYBOOK_TEST_BROWSER=firefox
+    yarn cache clean && yarn test-storybook  -c .storybook-visual ${updateSnapshot} --maxWorkers=${maxWorkers} --browsers firefox --url http://localhost:6007
+    lsof -ti tcp:6007 | xargs kill
+    
+    export STORYBOOK_THEME_FAMILY=enterprise STORYBOOK_THEME_COLOR_SCHEME=light STORYBOOK_TEST_BROWSER=chromium
+    yarn build-storybook -c .storybook-visual --output-dir storybook-static-visual
+    http-server storybook-static-visual --port 6007 & wait-on tcp:6007
+    yarn cache clean && yarn test-storybook -c .storybook-visual ${updateSnapshot} --maxWorkers=${maxWorkers} --browsers chromium --url http://localhost:6007
+    
+    export STORYBOOK_TEST_BROWSER=firefox
+    yarn cache clean && yarn test-storybook -c .storybook-visual ${updateSnapshot} --maxWorkers=${maxWorkers} --browsers firefox --url http://localhost:6007
+    lsof -ti tcp:6007 | xargs kill
+else
+    if [[ $skipBuild == 'false' ]]; then
+        echo "BUILDING"
+        yarn build-storybook -c .storybook-visual --output-dir storybook-static-visual
+    else 
+        echo "Skipping storybook-static-visual build (${STORYBOOK_THEME_FAMILY}, ${STORYBOOK_THEME_COLOR_SCHEME})..."
+    fi
+    
+    http-server storybook-static-visual --port 6007 & wait-on tcp:6007 && yarn cache clean && yarn test-storybook  "${updateSnapshot}" --maxWorkers=${maxWorkers} --browsers $browser --url http://localhost:6007 ; lsof -ti tcp:6007 | xargs kill
+fi

package/.storybook-visual/test-runner.js

@@ -0,0 +1,108 @@
+/* eslint-disable */
+const { toMatchImageSnapshot } = require('jest-image-snapshot');
+const { injectAxe, checkA11y, getViolations } = require('axe-playwright');
+const { getStoryContext } = require('@storybook/test-runner');
+const { createHtmlReport } = require('axe-html-reporter');
+
+const customA11yViolationsDir = `${process.cwd()}/test-reports/a11y/${
+    process.env.STORYBOOK_TEST_BROWSER
+}-${process.env.STORYBOOK_THEME_FAMILY}/a11y-violations/`;
+
+const customDiffDir = `${process.cwd()}/test-reports/visual/${process.env.STORYBOOK_TEST_BROWSER}-${
+    process.env.STORYBOOK_THEME_FAMILY
+}/image_snapshot_diff/`;
+
+const customReceivedDir = `${process.cwd()}/test-reports/visual/${
+    process.env.STORYBOOK_TEST_BROWSER
+}-${process.env.STORYBOOK_THEME_FAMILY}/image_snapshot_received/`;
+
+module.exports = {
+    setup() {
+        expect.extend({ toMatchImageSnapshot });
+    },
+    async preRender(page) {
+        jest.retryTimes(2);
+        if (process.env.STORYBOOK_TEST_A11Y == 'true') {
+            await injectAxe(page);
+        }
+    },
+    async postRender(page, context) {
+        // check for theme compatibility first, if it isn't compatible, exit test
+        const storyContext = await getStoryContext(page, context);
+        if (
+            storyContext.parameters?.themeSupport?.family !== undefined &&
+            storyContext.parameters?.themeSupport?.family !== process.env.STORYBOOK_THEME_FAMILY
+        ) {
+            return;
+        }
+
+        // check if should skip taking a snapshot for this story
+        if (storyContext.parameters?.skipSnapshot) {
+            return;
+        }
+
+        let componentName = context.title.split('/')[1];
+        componentName = componentName === 'ThemedIcon' ? 'icons' : componentName;
+
+        if (process.env.STORYBOOK_TEST_A11Y == 'false') {
+            const customSnapshotsDir = `${process.cwd()}/src/${componentName}/stories/__images__/${
+                process.env.STORYBOOK_TEST_BROWSER
+            }/${process.env.STORYBOOK_THEME_FAMILY}`;
+
+            if (
+                componentName === 'Modal' ||
+                componentName === 'Popover' ||
+                componentName === 'Tooltip' ||
+                componentName === 'Color' ||
+                componentName === 'Progress'
+            ) {
+                await new Promise((r) => setTimeout(r, 3000));
+            } else {
+                await new Promise((r) => setTimeout(r, 0));
+            }
+
+            const image = await page.screenshot({ animations: 'disabled' });
+
+            expect(image).toMatchImageSnapshot({
+                customSnapshotsDir,
+                customDiffDir,
+                customSnapshotIdentifier: context.id,
+                storeReceivedOnFailure: true,
+                customReceivedDir,
+            });
+
+            // const accessibilityTree = await page.accessibility.snapshot();
+            // expect(accessibilityTree).toMatchSnapshot();
+        } else {
+            // Run only if specified
+            const violations = await getViolations(page, '#storybook-test-wrapper', {
+                runOnly: {
+                    type: 'tag',
+                    values: ['wcag2a'],
+                },
+            });
+
+            await new Promise((resolve, reject) => {
+                if (violations.length > 0) {
+                    createHtmlReport(
+                        {
+                            results: {
+                                violations: violations,
+                            },
+                            options: {
+                                outputDirPath: customA11yViolationsDir + '/' + componentName,
+                                reportFileName: `${context.id}-violations.html`,
+                            },
+                        },
+                        (err) => {
+                            if (err) reject(err);
+                        }
+                    );
+                }
+                resolve();
+            });
+
+            await checkA11y(page, '#storybook-test-wrapper');
+        }
+    },
+};

package/Accordion.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 128);
+/******/ 	return __webpack_require__(__webpack_require__.s = 133);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 128:
+/***/ 133:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -124,7 +124,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/CollapsiblePanel"
-var CollapsiblePanel_ = __webpack_require__(83);
+var CollapsiblePanel_ = __webpack_require__(86);
 var CollapsiblePanel_default = /*#__PURE__*/__webpack_require__.n(CollapsiblePanel_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -415,7 +415,7 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 83:
+/***/ 86:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/CollapsiblePanel");

package/Anchor.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 147);
+/******/ 	return __webpack_require__(__webpack_require__.s = 153);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 147:
+/***/ 153:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/Animation.js

@@ -82,12 +82,12 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 175);
+/******/ 	return __webpack_require__(__webpack_require__.s = 182);
 /******/ })
 /************************************************************************/
 /******/ ({
 
-/***/ 175:
+/***/ 182:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -99,10 +99,10 @@ __webpack_require__.d(__webpack_exports__, "Spring", function() { return /* reex
 __webpack_require__.d(__webpack_exports__, "Transition", function() { return /* reexport */ Transition; });
 
 // EXTERNAL MODULE: external "react-spring"
-var external_react_spring_ = __webpack_require__(18);
+var external_react_spring_ = __webpack_require__(21);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/AnimationToggle"
-var AnimationToggle_ = __webpack_require__(36);
+var AnimationToggle_ = __webpack_require__(38);
 
 // CONCATENATED MODULE: ./src/Animation/Animation.tsx
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -151,14 +151,14 @@ function Transition(_ref2) {
 
 /***/ }),
 
-/***/ 18:
+/***/ 21:
 /***/ (function(module, exports) {
 
 module.exports = require("react-spring");
 
 /***/ }),
 
-/***/ 36:
+/***/ 38:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/AnimationToggle");

package/AnimationToggle.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 129);
+/******/ 	return __webpack_require__(__webpack_require__.s = 134);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -94,7 +94,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 129:
+/***/ 134:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/Box.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 148);
+/******/ 	return __webpack_require__(__webpack_require__.s = 154);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 148:
+/***/ 154:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/Button.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 135);
+/******/ 	return __webpack_require__(__webpack_require__.s = 140);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 135:
+/***/ 140:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -132,10 +132,10 @@ var Dropdown_ = __webpack_require__(20);
 var style_ = __webpack_require__(32);
 
 // EXTERNAL MODULE: ./src/icons/CaretDown.tsx
-var CaretDown = __webpack_require__(38);
+var CaretDown = __webpack_require__(40);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/External"
-var External_ = __webpack_require__(58);
+var External_ = __webpack_require__(61);
 var External_default = /*#__PURE__*/__webpack_require__.n(External_);
 
 // EXTERNAL MODULE: ./src/icons/ThemedIcon.tsx
@@ -174,7 +174,7 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ButtonSimple"
-var ButtonSimple_ = __webpack_require__(46);
+var ButtonSimple_ = __webpack_require__(48);
 var ButtonSimple_default = /*#__PURE__*/__webpack_require__.n(ButtonSimple_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -543,14 +543,21 @@ module.exports = require("@splunk/ui-utils/style");
 
 /***/ }),
 
-/***/ 38:
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash");
+
+/***/ }),
+
+/***/ 40:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CaretDown; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(39);
+/* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(41);
 /* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -581,21 +588,14 @@ function CaretDown(props) {
 
 /***/ }),
 
-/***/ 39:
+/***/ 41:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Caret");
 
 /***/ }),
 
-/***/ 4:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash");
-
-/***/ }),
-
-/***/ 46:
+/***/ 48:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ButtonSimple");
@@ -609,13 +609,6 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 58:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/External");
-
-/***/ }),
-
 /***/ 6:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -641,6 +634,13 @@ function SVG(props) {
 
 /***/ }),
 
+/***/ 61:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/External");
+
+/***/ }),
+
 /***/ 7:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 

package/ButtonGroup.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 149);
+/******/ 	return __webpack_require__(__webpack_require__.s = 155);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 149:
+/***/ 155:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/ButtonSimple.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 130);
+/******/ 	return __webpack_require__(__webpack_require__.s = 135);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 130:
+/***/ 135:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -147,7 +147,7 @@ var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 // CONCATENATED MODULE: ./src/ButtonSimple/prismaStyles.ts
 
 
-var common = Object(external_styled_components_["css"])(["", " cursor:pointer;position:relative;&:focus,&:hover{z-index:3;}"], themes_["mixins"].reset('block'));
+var common = Object(external_styled_components_["css"])(["", " cursor:pointer;position:relative;border-radius:", ";&:focus,&:hover{z-index:3;}"], themes_["mixins"].reset('block'), themes_["variables"].borderRadius);
 /* Setting border-radius to 0.1px creates a rounded shadow, */
 
 var appendPrepend = Object(external_styled_components_["css"])(["", " ", ""], function (_ref) {
@@ -158,9 +158,9 @@ var appendPrepend = Object(external_styled_components_["css"])(["", " ", ""], fu
   return $prepend && Object(external_styled_components_["css"])(["border-top-left-radius:0.1px;border-bottom-left-radius:0.1px;"]);
 });
 var prismaTransparent = Object(external_styled_components_["css"])(["", " ", " ", " &:not([disabled]){color:", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";", "}", " ", " &:active{background-color:", ";transition:none;}&:focus{background-color:", ";", " &:active{background-color:", ";}}}&[disabled]{border-color:", ";color:", ";cursor:not-allowed;", "}"], common, Object(themes_["pickVariant"])('$variant', {
-  prismaSecondary: Object(external_styled_components_["css"])(["border-radius:calc(", " / 2);font-weight:", ";"], themes_["variables"].inputHeight, themes_["variables"].fontWeightSemiBold),
-  prismaDefault: Object(external_styled_components_["css"])(["border:1px solid ", ";border-radius:calc(", " / 2);font-weight:", ";"], themes_["variables"].interactiveColorBorder, themes_["variables"].inputHeight, themes_["variables"].fontWeightSemiBold),
-  prismaToggle: Object(external_styled_components_["css"])(["border:1px solid ", ";border-radius:", ";font-weight:normal;"], themes_["variables"].interactiveColorBorder, themes_["variables"].borderRadius)
+  prismaSecondary: Object(external_styled_components_["css"])(["font-weight:", ";"], themes_["variables"].fontWeightSemiBold),
+  prismaDefault: Object(external_styled_components_["css"])(["border:1px solid ", ";font-weight:", ";"], themes_["variables"].interactiveColorBorder, themes_["variables"].fontWeightSemiBold),
+  prismaToggle: Object(external_styled_components_["css"])(["border:1px solid ", ";font-weight:normal;"], themes_["variables"].interactiveColorBorder)
 }), appendPrepend, themes_["variables"].contentColorActive, themes_["variables"].interactiveColorOverlayHover, themes_["variables"].interactiveColorBorderHover, Object(themes_["pickVariant"])('$variant', {
   prismaSecondary: Object(external_styled_components_["css"])(["box-shadow:", ";"], themes_["variables"].hoverShadow),
   prismaDefault: Object(external_styled_components_["css"])(["box-shadow:", ";"], themes_["variables"].hoverShadow)
@@ -181,7 +181,7 @@ var prismaTransparent = Object(external_styled_components_["css"])(["", " ", " "
 var disabledFillStyles = Object(external_styled_components_["css"])(["&[disabled]{border-color:", ";color:", ";background-color:", ";cursor:not-allowed;", "}"], themes_["variables"].interactiveColorBorderDisabled, themes_["variables"].contentColorDisabled, themes_["variables"].interactiveColorBackgroundDisabled, function ($selected) {
   return $selected && Object(external_styled_components_["css"])(["background-color:", ";"], themes_["mixins"].overlayColors(themes_["variables"].interactiveColorBackgroundDisabled, themes_["variables"].interactiveColorOverlaySelected));
 });
-var prismaFilled = Object(external_styled_components_["css"])(["", " font-weight:", ";border-radius:20px;", " &:not([disabled]){color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;background-color:", ";&:hover,&:focus{background-color:", ";}&:hover{box-shadow:", ";}&:focus{box-shadow:", ";}&:active{background-color:", ";transition:none;}}", ""], common, themes_["variables"].fontWeightSemiBold, appendPrepend, themes_["variables"].contentColorInverted, Object(themes_["pickVariant"])('$selected', {
+var prismaFilled = Object(external_styled_components_["css"])(["", " font-weight:", ";border-radius:", ";", " &:not([disabled]){color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;background-color:", ";&:hover,&:focus{background-color:", ";}&:hover{box-shadow:", ";}&:focus{box-shadow:", ";}&:active{background-color:", ";transition:none;}}", ""], common, themes_["variables"].fontWeightSemiBold, themes_["variables"].borderRadius, appendPrepend, themes_["variables"].contentColorInverted, Object(themes_["pickVariant"])('$selected', {
   "false": Object(themes_["pickVariant"])('$variant', {
     prismaPrimary: themes_["variables"].interactiveColorPrimary,
     prismaDestructive: themes_["variables"].accentColorNegative

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 Change Log
 ============
+4.14.0 - November 1, 2022
+----------
+New Features:
+* New `Divider` component for separating components with horizontal or vertical rules (SUI-4080).
+* Added `inputOnly` prop to `Date` (SUI-3809).
+* Added a `renderChildrenWhenCollapsed` prop to `CollapsiblePanel` and `TransitionOpen` which defaults to `false` (SUI-4321).
+* Added a `divider` prop to `Modal` to show dividers between header, body and footer. The value defaults to `both` (SUI-3443).
+
+Bug Fixes:
+* `Date`'s dropdown menu is now keyboard accessible (SUI-3809).
+* `Text` now allows the `role` to be set externally.
+* `ControlGroup` will no longer hide its `Tooltip` on toggle click (SUI-5116).
+* Server side rendering support is now added for `ScrollContainerContext` and `Table` (SUI-5115).
+* `Card`'s `title` and `subtitle` now wrap/truncate correctly when `actionPrimary` or `actionsSecondary` are present (SUI-5096).
+* `Modal` shows dividers by default for the Prisma theme to match the Splunk Design System (SUI-3443).
+
+4.13.0 - October 5, 2022
+----------
+New Features:
+* New `SplitButton` component (SUI-2760).
+
+Bug Fixes:
+* `Button`s visual design now matches the Splunk Design System (SUI-3072).
+* `Table` now displays the full drag handle when using `headType="fixed"` and `HeadDropdownCell` (chore).
+* `Text`'s and `TextArea`'s adornment color now match the Splunk Design System (SUI-5076).
+* Improved `Menu` keyboard navigation performance with large data sets.
+* `Multiselect` with `compact` will no longer affect disabled items with "Select All" and "Clear All" (SUI-5060).
+
+Deprecations:
+* The `placeholder` prop in the `Text`, `TextArea`, and `Number` components has been deprecated and will be removed in the next major release (SUI-5055, SUI-5095).
+    * `placeholder` text presents a number of visual and cognitive issues and best to avoid using it.
+    * The HTML `placeholder` attribute is still supported.
+    * The `placeholder` attribute should not replace a label.
 
 4.12.1 - September 20, 2022
 ----------