@punch-in/buffet-modern 3.3.11

package/build/esm/components/TimeList/index.js

@@ -0,0 +1,13 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/**
+ *
+ * TimeList
+ *
+ */
+
+import styled from 'styled-components';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+var TimeList = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 0;\n  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  border: 1px solid transparent;\n  border-bottom-left-radius: ", ";\n  border-bottom-right-radius: ", ";\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  transition: height 0.2s ease-out, visibility 0.2s ease-out,\n    border-color 0.2s ease-out;\n  visibility: hidden;\n\n  ::-webkit-scrollbar {\n    width: 0;\n  }\n  overflow: -moz-scrollbars-none;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &.displayed {\n    height: ", ";\n    visibility: visible;\n    border-color: ", ";\n  }\n\n  li {\n    position: relative;\n\n    input {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      opacity: 0;\n      z-index: 1;\n      cursor: pointer;\n\n      &:checked + label,\n      &:hover + label {\n        background-color: ", ";\n      }\n    }\n\n    label {\n      display: block;\n      position: relative;\n      z-index: 0;\n      width: 100%;\n      height: 100%;\n      padding: ", "px 0 ", "px\n        calc(", " + ", ");\n      font-size: 1.3rem;\n      line-height: 30px;\n      margin-bottom: 0;\n    }\n  }\n"])), sizes.fontWeight.bold, sizes.input.fontSize, colors.greyIconColor, sizes.borderRadiusSm, sizes.borderRadiusSm, sizes.timepicker.list.height, colors.lightGrey, colors.greyIconBkgd, sizes.margin * 0.4, sizes.margin * 0.2, sizes.input.height, sizes.input.padding);
+export default TimeList;

package/build/esm/components/TimePicker/index.js

@@ -0,0 +1,20 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/**
+ *
+ * TimePicker
+ *
+ */
+
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+var TimePicker = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", ";\n  padding: 0 ", ";\n  padding-left: calc(", " + ", ");\n  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-weight: ", ";\n  font-size: ", ";\n  cursor: pointer;\n  outline: 0;\n  border: 1px solid ", ";\n  border-radius: ", ";\n  color: ", ";\n  background-color: transparent;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &::-webkit-input-placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    color: ", ";\n  }\n"])), sizes.input.height, sizes.input.padding, sizes.input.height, sizes.input.padding, sizes.fontWeight.regular, sizes.input.fontSize, colors.lightGrey, sizes.borderRadius, colors.blueTxt, colors.greyPlaceholder, colors.greyPlaceholder, colors.blueBorder, colors.blueFocusRing, colors.brightGrey);
+TimePicker.defaultProps = {
+  type: 'text'
+};
+TimePicker.propTypes = {
+  type: PropTypes.string
+};
+export default TimePicker;

package/build/esm/components/TimePickerWrapper/index.js

@@ -0,0 +1,13 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/**
+ *
+ * TimePickerWrapper
+ *
+ */
+
+import styled from 'styled-components';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+var TimePickerWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-width: 95px;\n  position: relative;\n  background-color: ", ";\n  border-radius: ", ";\n\n  span {\n    z-index: 0;\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n\n  input {\n    position: relative;\n    z-index: 1;\n\n    &:focus + span {\n      background-color: ", ";\n\n      &:before {\n        color: ", ";\n      }\n    }\n\n    &:focus {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n  }\n\n  ul {\n    position: absolute;\n    background-color: transparent;\n    border-top: 1px solid transparent;\n    top: calc(", " - ", "px);\n    left: 0;\n    z-index: 99;\n    pointer-events: all;\n\n    &.displayed {\n      background-color: ", ";\n      border-top: 1px solid ", ";\n    }\n  }\n"])), colors.white, sizes.borderRadius, sizes.borderRadius, sizes.borderRadius, colors.blueIconBkgd, colors.blueIconTxt, sizes.input.height, sizes.margin * 0.1, colors.white, colors.blueBorder);
+export default TimePickerWrapper;

package/build/esm/components/Toggle/index.js

@@ -0,0 +1,25 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/**
+ *
+ * Toggle
+ *
+ */
+
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+var Toggle = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: ", ";\n  margin: 0;\n  opacity: 0;\n\n  & + span {\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    color: ", ";\n    background: ", ";\n    font-weight: ", ";\n    transition: background-color 0.2s ease, color 0.2s ease;\n\n    & + span {\n      border-top-right-radius: ", ";\n      border-bottom-right-radius: ", ";\n      color: ", ";\n      background: ", ";\n      font-weight: ", ";\n      transition: background-color 0.2s ease, color 0.2s ease;\n    }\n  }\n\n  &:not(:checked):not(:indeterminate) + span {\n    background-color: ", ";\n    color: ", ";\n    font-weight: ", ";\n  }\n\n  &:checked + span {\n    & + span {\n      background-color: ", ";\n      color: ", ";\n      font-weight: ", ";\n    }\n  }\n\n  &:disabled {\n    &:not(:checked):not(:indeterminate) + span {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: inset -1px 1px 3px rgba(0, 0, 0, 0.08);\n    }\n\n    &:checked + span {\n      & + span {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.08);\n      }\n    }\n  }\n"])), function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, sizes.borderRadiusSm, sizes.borderRadiusSm, colors.greyToggle, colors.white, sizes.fontWeight.bold, sizes.borderRadiusSm, sizes.borderRadiusSm, colors.greyToggle, colors.white, sizes.fontWeight.bold, colors.darkOrange, colors.white, sizes.fontWeight.black, colors.blue, colors.white, sizes.fontWeight.black, colors.greyIconBkgd, colors.brightGrey, colors.greyIconBkgd, colors.brightGrey);
+Toggle.defaultProps = {
+  disabled: false,
+  type: 'checkbox'
+};
+Toggle.propTypes = {
+  disabled: PropTypes.bool,
+  type: PropTypes.string
+};
+export default Toggle;

package/build/esm/components/ToggleWrapper/index.js

@@ -0,0 +1,13 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/**
+ *
+ * ToggleWrapper
+ *
+ */
+
+import styled from 'styled-components';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+var ToggleWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: fit-content;\n  height: 34px;\n  border: 1px solid ", ";\n  border-radius: ", ";\n\n  label {\n    display: inline-block;\n    width: fit-content;\n    height: 100%;\n    position: relative;\n    text-align: center;\n    color: ", ";\n  }\n\n  span {\n    display: inline-block;\n    width: 53px;\n    height: 100%;\n    line-height: 32px;\n    letter-spacing: 0.1rem;\n  }\n"])), colors.lightGrey, sizes.borderRadiusSm, colors.blueTxt);
+export default ToggleWrapper;

package/build/esm/components/Tooltip/index.js

@@ -0,0 +1,28 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/* stylelint-disable declaration-no-important */
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ReactTooltip from 'react-tooltip';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+var Tooltip = styled(ReactTooltip).attrs(function (_ref) {
+  var place = _ref.place,
+    delayShow = _ref.delayShow;
+  return {
+    effect: 'solid',
+    place: place,
+    delayShow: delayShow,
+    arrowColor: 'transparent',
+    backgroundColor: colors.blueTxt
+  };
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0.5rem 0.75rem !important;\n  opacity: 1 !important;\n  border-radius: ", " !important;\n  max-width: 400px;\n  max-height: 400px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), sizes.borderRadius);
+Tooltip.defaultProps = {
+  delayShow: 500,
+  place: 'bottom'
+};
+Tooltip.propTypes = {
+  delayShow: PropTypes.number,
+  place: PropTypes.string
+};
+export default Tooltip;

package/build/esm/index.js

@@ -0,0 +1,46 @@
+export { default as Button } from './components/Button';
+export { default as Card } from './components/Card';
+export { default as Checkbox } from './components/Checkbox';
+export { default as CheckboxWrapper } from './components/CheckboxWrapper';
+export { default as CustomRow } from './components/CustomRow';
+export { default as DatePicker } from './components/DatePicker';
+export { default as Description } from './components/Description';
+export { default as Enumeration } from './components/Enumeration';
+export { default as EnumerationWrapper } from './components/EnumerationWrapper';
+export { default as ErrorMessage } from './components/ErrorMessage';
+export { default as Fonts } from './components/Fonts';
+export { default as GlobalStyle } from './components/GlobalStyle';
+export { default as Icon } from './components/Icon';
+export { default as IconText } from './components/IconText';
+export { default as IconWrapper } from './components/IconWrapper';
+export { default as InputNumber } from './components/InputNumber';
+export { default as InputText } from './components/InputText';
+export { default as InputWrapper } from './components/InputWrapper';
+export { default as Header } from './components/Header';
+export { default as HeaderActions } from './components/HeaderActions';
+export { default as HeaderTitle } from './components/HeaderTitle';
+export { default as Label } from './components/Label';
+export { default as Links } from './components/Links';
+export { default as List } from './components/List';
+export { default as ListHeader } from './components/ListHeader';
+export { default as ListRow } from './components/ListRow';
+export { default as ListSubtitle } from './components/ListSubtitle';
+export { default as ListTitle } from './components/ListTitle';
+export { default as LoadingBar } from './components/LoadingBar';
+export { default as LoadingIndicator } from './components/LoadingIndicator';
+export { default as Option } from './components/Option';
+export { default as Paging } from './components/Paging';
+export { default as Select } from './components/Select';
+export { default as Tab } from './components/Tab';
+export { default as Table } from './components/Table';
+export { default as TableRowEmpty } from './components/TableRowEmpty';
+export { default as Textarea } from './components/Textarea';
+export { default as TimeList } from './components/TimeList';
+export { default as TimePicker } from './components/TimePicker';
+export { default as TimePickerWrapper } from './components/TimePickerWrapper';
+export { default as Toggle } from './components/Toggle';
+export { default as ToggleWrapper } from './components/ToggleWrapper';
+export { default as Tooltip } from './components/Tooltip';
+export { default as colors } from './assets/styles/colors';
+export { default as mixins } from './assets/styles/mixins';
+export { default as sizes } from './assets/styles/sizes';

package/build/index.js

@@ -0,0 +1,8 @@
+
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./bundle.production.js");
+} else {
+  module.exports = require("./bundle.development.js");
+}

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@punch-in/buffet-modern",
+  "version": "3.3.11",
+  "description": "Buffetjs Styles - The styling solution of Buffetjs",
+  "main": "build",
+  "module": "build/esm/index.js",
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "prebuild": "rimraf build",
+    "build": "npm run build:development && npm run build:production && npm run build:esm && npm run create:index",
+    "build:analyze": "cross-env NODE_ENV=production webpack-cli --json > build/stats.production.json && webpack-bundle-analyzer build/stats.production.json",
+    "build:development": "cross-env NODE_ENV=development webpack-cli",
+    "build:esm": "cross-env BABEL_ENV=esm babel ./src --out-dir ./build/esm --ignore \"**/*.test.js\" --ignore \"**/test.js\"  && node ./deployAssets.js",
+    "build:production": "cross-env NODE_ENV=production webpack-cli",
+    "build:watch": "npm run create:index && cross-env NODE_ENV=development webpack-cli -w",
+    "build:watch:esm": "node ./deployAssets.js && cross-env BABEL_ENV=esm babel ./src --out-dir ./build/esm --ignore \"**/*.test.js\" --ignore \"**/test.js\"  --watch",
+    "create:index": "node ./createBuildIndex.js",
+    "test": "npm run test:lint && npm run test:style && npm run test:jest",
+    "test:jest": "jest --runInBand --no-cache --config=jest.config.js",
+    "test:jest:update": "jest --runInBand --no-cache --config=jest.config.js -u",
+    "test:lint": "eslint .",
+    "test:lint:quiet": "eslint . --quiet",
+    "test:style": "stylelint src/components/**/*.js",
+    "test:style:quiet": "stylelint src/components/**/*.js --quiet",
+    "test:prettier": "echo \"Error: no test specified\" && exit 1",
+    "coverage:unit": "jest --coverage",
+    "lint:fix": "eslint . --fix",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "styled-components",
+    "buffetjs",
+    "react",
+    "styles"
+  ],
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.12.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.22",
+    "@fortawesome/free-regular-svg-icons": "^5.10.2",
+    "@fortawesome/free-solid-svg-icons": "^5.10.2",
+    "@fortawesome/react-fontawesome": "^0.1.4",
+    "prop-types": "^15.7.2",
+    "react-dates": "^21.1.0",
+    "react-tooltip": "^4.2.11"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.1.5",
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-bind": "^7.0.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.1.6",
+    "@babel/polyfill": "^7.0.0",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/react": "^9.4.0",
+    "@testing-library/react-hooks": "^3.2.1",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-module-resolver": "3.0.0",
+    "bundlesize": "^0.17.0",
+    "cross-env": "^5.1.4",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.5.0",
+    "eslint": "^7.5.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-import-resolver-lerna": "^1.1.0",
+    "eslint-import-resolver-webpack": "^0.12.2",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jest": "^23.19.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.20.5",
+    "file-loader": "^6.0.0",
+    "fs-extra": "^9.0.1",
+    "jest": "^26.1.0",
+    "jest-styled-components": "^7.0.2",
+    "mini-css-extract-plugin": "^0.4.0",
+    "react-test-renderer": "^16.13.1",
+    "rimraf": "^3.0.2",
+    "stylelint": "^13.6.1",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.10.0",
+    "url-loader": "^1.0.1",
+    "webpack": "~4.44.0",
+    "webpack-bundle-analyzer": "^3.8.0",
+    "webpack-cli": "~3.3.12"
+  },
+  "peerDependencies": {
+    "react": "^16.9.0",
+    "styled-components": "^5.0.0"
+  },
+  "author": "Strapi Team",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/strapi/buffet"
+  },
+  "gitHead": "63c6c13e0fd7feed8e0ea89f751b68b02ef767ea"
+}

package/src/assets/icons/icon_select.svg

@@ -0,0 +1 @@
+<svg width="23" height="32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M.018 0h20a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2h-20V0z" fill="#FAFAFB"/><g fill-rule="nonzero" fill="#B3B5B9"><path d="M14.018 18.375a.36.36 0 0 1-.112.264l-2.625 2.625a.36.36 0 0 1-.263.111.36.36 0 0 1-.264-.111l-2.625-2.625a.36.36 0 0 1-.111-.264.36.36 0 0 1 .111-.264.36.36 0 0 1 .264-.111h5.25a.36.36 0 0 1 .263.111.36.36 0 0 1 .112.264zM8.018 15a.36.36 0 0 1 .111-.264l2.625-2.625a.36.36 0 0 1 .264-.111.36.36 0 0 1 .263.111l2.625 2.625a.36.36 0 0 1 .112.264.36.36 0 0 1-.112.264.36.36 0 0 1-.263.111h-5.25a.36.36 0 0 1-.264-.111.36.36 0 0 1-.111-.264z"/></g></g></svg>

package/src/assets/icons/icon_trash.svg

@@ -0,0 +1 @@
+<svg width="11" height="12" xmlns="http://www.w3.org/2000/svg"><path d="M4 9.75v-5.5a.243.243 0 0 0-.07-.18.243.243 0 0 0-.18-.07h-.5a.243.243 0 0 0-.18.07.243.243 0 0 0-.07.18v5.5c0 .073.023.133.07.18.047.047.107.07.18.07h.5a.243.243 0 0 0 .18-.07.243.243 0 0 0 .07-.18zm2 0v-5.5a.243.243 0 0 0-.07-.18.243.243 0 0 0-.18-.07h-.5a.243.243 0 0 0-.18.07.243.243 0 0 0-.07.18v5.5c0 .073.023.133.07.18.047.047.107.07.18.07h.5a.243.243 0 0 0 .18-.07.243.243 0 0 0 .07-.18zm2 0v-5.5a.243.243 0 0 0-.07-.18.243.243 0 0 0-.18-.07h-.5a.243.243 0 0 0-.18.07.243.243 0 0 0-.07.18v5.5c0 .073.023.133.07.18.047.047.107.07.18.07h.5a.243.243 0 0 0 .18-.07.243.243 0 0 0 .07-.18zM3.75 2h3.5l-.375-.914A.22.22 0 0 0 6.742 1H4.266a.22.22 0 0 0-.133.086L3.75 2zm7.25.25v.5a.243.243 0 0 1-.07.18.243.243 0 0 1-.18.07H10v7.406c0 .433-.122.806-.367 1.121-.245.315-.54.473-.883.473h-6.5c-.344 0-.638-.152-.883-.457C1.122 11.238 1 10.87 1 10.438V3H.25a.243.243 0 0 1-.18-.07.243.243 0 0 1-.07-.18v-.5c0-.073.023-.133.07-.18A.243.243 0 0 1 .25 2h2.414L3.211.695c.078-.192.219-.356.422-.492C3.836.068 4.042 0 4.25 0h2.5c.208 0 .414.068.617.203.203.136.344.3.422.492L8.336 2h2.414c.073 0 .133.023.18.07.047.047.07.107.07.18z" fill="#F23508" fill-rule="nonzero"/></svg>

package/src/assets/styles/colors.js

@@ -0,0 +1,92 @@
+/**
+ * Modern design token palette
+ * WCAG AA compliant contrast ratios where applicable
+ */
+const colors = {
+  // Primary palette
+  blue: '#007EFF',
+  darkBlue: '#1C5DE7',
+  mediumBlue: '#005EEA',
+  lightBlue: '#0097F6',
+  blueTxt: '#32324D',
+  blueGradient: 'linear-gradient(135deg, #306ded 0%, #4598f7 100%)',
+  orangeGradient: 'linear-gradient(135deg, #F65A1D 0%, #F68E0E 100%)',
+
+  // Neutrals
+  brightGrey: '#8E8EA9',
+  lightGrey: '#DCDCE4',
+  lightGreyAlpha: 'rgba(0, 0, 0, 0.08)',
+  black: '#000000',
+  white: '#ffffff',
+
+  // Semantic colors
+  orange: '#F64D0A',
+  darkOrange: '#E54B09',
+  orangeBorder: 'rgba(246, 77, 10, 0.25)',
+  orangeBkgd: 'rgba(246, 77, 10, 0.12)',
+  green: '#328048',
+
+  // Input-specific
+  greyPlaceholder: '#8E8EA9',
+  greyIconBkgd: '#F6F6F9',
+  greyIconColor: '#A5A5BA',
+  blueBorder: '#0C75AF',
+  blueFocusRing: 'rgba(0, 126, 255, 0.25)',
+  greyToggle: '#C0C0CF',
+
+  // Table
+  greyHeader: '#F6F6F9',
+  greySubtitle: '#6B6B7B',
+  greyHover: '#FAFAFC',
+  greySeparator: '#EAEAEF',
+
+  // Timepicker
+  blueIconTxt: '#0C75AF',
+  blueIconBkgd: '#E8F4FC',
+
+  // Tabs
+  greyTabBkgd: '#F0F0F5',
+  blueTabBorder: '#1C5DE7',
+  greyLink: '#F6F6F9',
+
+  // Button variants
+  button: {
+    primary: {
+      borderColor: '#007EFF',
+      color: '#ffffff',
+      backgroundColor: '#007EFF',
+      hoverBg: '#0066D6',
+    },
+    secondary: {
+      borderColor: '#007EFF',
+      color: '#007EFF',
+      backgroundColor: '#ffffff',
+      hoverBg: '#F0F7FF',
+    },
+    cancel: {
+      borderColor: '#8E8EA9',
+      color: '#6B6B7B',
+      backgroundColor: 'transparent',
+      hoverBg: 'rgba(142, 142, 169, 0.08)',
+    },
+    delete: {
+      borderColor: '#F64D0A',
+      color: '#ffffff',
+      backgroundColor: '#F64D0A',
+      hoverBg: '#E54B09',
+    },
+    success: {
+      borderColor: '#328048',
+      color: '#ffffff',
+      backgroundColor: '#328048',
+      hoverBg: '#2B6B3D',
+    },
+    disabled: {
+      borderColor: '#E9EAEB',
+      color: '#A5A5BA',
+      backgroundColor: '#E9EAEB',
+    },
+  },
+};
+
+export default colors;

package/src/assets/styles/mixins.js

@@ -0,0 +1,45 @@
+import colors from './colors';
+
+/**
+ * Reusable style mixins
+ * Fix: use `color` parameter instead of `colors` object in shadow/overlay
+ */
+export const mixins = (color = colors.lightGreyAlpha) => ({
+  bbox:
+    'box-sizing: border-box;\n' +
+    '-moz-box-sizing: border-box;\n' +
+    '-webkit-box-sizing: border-box;',
+  bshadow:
+    `-webkit-box-shadow: inset 0 0 30px ${color};\n` +
+    `-moz-box-shadow: inset 0 0 30px ${color};\n` +
+    `box-shadow: inset 0 0 30px ${color};`,
+  overlay:
+    `-webkit-box-shadow: inset 0 0 3px 1px ${color};\n` +
+    `-moz-box-shadow: inset 0 0 3px 1px ${color};\n` +
+    `box-shadow: inset 0 0 3px 1px ${color};`,
+});
+
+/**
+ * Reduced motion - respect user preference for accessibility
+ */
+export const reducedMotion = `
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+`;
+
+/**
+ * Focus visible ring - accessible focus indicator
+ */
+export const focusRing = (color = colors.blueFocusRing) => `
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px ${color};
+  }
+`;
+
+export default mixins;

package/src/assets/styles/sizes.js

@@ -0,0 +1,87 @@
+/**
+ * Modern design tokens - spacing, typography, breakpoints
+ * Uses 4px baseline grid for consistent spacing
+ */
+const sizes = {
+  // Breakpoints
+  tablet: '768px',
+  desktop: '1024px',
+  wide: '1280px',
+
+  // Spacing (4px baseline)
+  margin: 10,
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    xxl: 32,
+  },
+
+  // Border radius
+  borderRadius: '6px',
+  borderRadiusSm: '4px',
+  borderRadiusLg: '8px',
+
+  // Button
+  button: {
+    height: {
+      small: '28px',
+      large: '34px',
+    },
+    padding: {
+      bottom: '2px',
+      leftRight: '16px',
+    },
+    minWidth: '140px',
+  },
+
+  // Input
+  input: {
+    height: '3.4rem',
+    padding: '1rem',
+    fontSize: '1.4rem',
+  },
+
+  // Checkbox
+  checkbox: {
+    height: '16px',
+    width: '16px',
+  },
+
+  // Textarea
+  textarea: {
+    padding: '0.75rem',
+  },
+
+  // Timepicker
+  timepicker: {
+    list: {
+      height: '144px',
+    },
+  },
+
+  // Table
+  table: {
+    header: {
+      height: '40px',
+    },
+    row: {
+      height: '56px',
+    },
+    deleteRow: {
+      height: '40px',
+    },
+  },
+
+  // Typography
+  fontWeight: {
+    regular: 400,
+    semiBold: 500,
+    bold: 600,
+    black: 700,
+  },
+};
+
+export default sizes;

package/src/components/Button/PrefixIcon.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+import sizes from '../../assets/styles/sizes';
+import Icon from '../Icon';
+
+const PrefixIcon = styled(Icon)`
+  margin-right: ${sizes.margin}px;
+  font-size: 0.94em;
+`;
+
+export default PrefixIcon;