@sproutsocial/racine 14.1.1 → 14.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 14.2.0
+
+### Minor Changes
+
+- 16a0ef29: - Add team sprout icon variations
+
+### Patch Changes
+
+- 1c647238: Change `form.border.base` theme color to `neutral.600` to provide a color contrast ratio of 3:1 on all form elements
+- 8a0d5ba6: Update usage examples across the design system to remove placeholder text by default. Additionally, improve the color contrast of placeholder text and differentiate it from text values with italics.
+
 ## 14.1.1
 
 ### Patch Changes

package/__flow__/EnumIconNames.flow.js

@@ -1,2 +1,2 @@
 // @flow
-export type EnumIconNames = "active-listener" | "add-item" | "add-keyword" | "add-team-member" | "add-variable" | "address-card-outline" | "address-card-solid" | "adobe-experience-manager" | "ads" | "advocacy-outline" | "advocacy" | "android" | "apple" | "approval-indicator-outline" | "approval-indicator" | "archive" | "arrow-down-line" | "arrow-down" | "arrow-left-line" | "arrow-left" | "arrow-right-line" | "arrow-right" | "arrow-up-line" | "arrow-up" | "arrows" | "asset-library-outline" | "asset-library" | "assign" | "atom" | "audio" | "back-to-top" | "bambu-icon-outline" | "bambu-icon" | "barcode" | "basketball" | "bell-outline" | "bigcommerce" | "bitly" | "bold" | "book" | "bookmark" | "bot" | "browser" | "business" | "calendar-outline" | "calendar" | "camera-outline" | "camera-story" | "camera" | "campaign" | "canva" | "carousel" | "cart-plus-outline" | "cart-plus" | "check" | "chevron-down-filled" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up-down-filled" | "chevron-up-filled" | "chevron-up" | "circle-check-outline" | "circle-check" | "circle" | "circle+" | "circles" | "circlex" | "click-to-view" | "clicks" | "clipboard-outline" | "clipboard" | "clock" | "closed-captioning" | "cloud" | "code" | "columns" | "comment-ai-outline" | "comment-ai" | "comment-alt-outline" | "comment-alt" | "comment-lines-alt-outline" | "comment" | "compact-density" | "compact-indicator" | "comparison" | "competitor" | "compose" | "content-suggestions" | "credit-card" | "crop" | "crown" | "dashboard" | "deconstructed-negative-sentiment" | "deconstructed-neutral-sentiment" | "deconstructed-positive-sentiment" | "discovery" | "dislike-outline" | "dislike" | "dm-link-outline" | "dm-link" | "dotdotdot" | "download" | "drafts-outline" | "drafts" | "dropbox" | "duplicate-outline" | "duplicate" | "emoji-outline" | "emoji" | "empty-image" | "engagement-per-post" | "engagements" | "error" | "exchange-alt" | "expanded-indicator" | "export" | "extended-circles" | "external-link-alt" | "external-link" | "extreme-negative-sentiment" | "eye-outline" | "eye-slash-outline" | "eye-slash" | "eye" | "facebook-audience-network" | "facebook-branded-content-outline" | "facebook-branded-content" | "facebook-groups" | "facebook" | "fb-reactions-angry" | "fb-reactions-haha" | "fb-reactions-like" | "fb-reactions-love" | "fb-reactions-sad" | "fb-reactions-wow" | "feedly" | "feeds" | "female" | "file-chart-line" | "file-edit" | "file-times-solid" | "filter" | "flag-outline" | "flag" | "flat-negative-sentiment-outline" | "flat-negative-sentiment" | "flat-neutral-sentiment-outline" | "flat-neutral-sentiment" | "flat-positive-sentiment-outline" | "flat-positive-sentiment" | "folder-open" | "folder" | "follow-outline" | "follow" | "follower-increase" | "following" | "font" | "full-access" | "gear" | "gears" | "github" | "glassdoor" | "glasses" | "globe" | "google-analytics-color" | "google-business-messages" | "google-drive" | "google-my-business" | "grip" | "h1" | "h2" | "h3" | "h4" | "hamburger" | "hashtag" | "headset" | "heart-outline" | "heart" | "heartbeat" | "help-alt" | "help" | "hiking" | "history" | "home" | "hourglass" | "hubspot" | "image-caption" | "image" | "images" | "impressions-per-post" | "impressions" | "inactive-listener" | "inbox-action" | "inbox-views" | "inbox" | "indicator" | "industry" | "info" | "instagram" | "internal-activity-outline" | "internal-activity" | "italic" | "key" | "keyboard" | "laptop-phone" | "large-density" | "lift" | "like-outline" | "like" | "link" | "linkedin-audience-network" | "linkedin" | "list-ol" | "listening" | "lists" | "location-outline" | "location" | "lock" | "magic-wand" | "male" | "marketo" | "mention" | "message-preview-outline" | "message-preview" | "message" | "messages-outline" | "messages" | "messenger" | "metric-table" | "microsoft-dynamics" | "minus" | "mobile" | "monitor" | "moon" | "negative-sentiment" | "neutral-positive-sentiment" | "neutral-sentiment" | "new-trend" | "newspaper" | "no-access" | "notepad" | "notifications-publishing-outline" | "notifications-publishing" | "notifications" | "offline" | "online" | "paid-promotion-outline" | "paid-promotion" | "paid" | "paint" | "palette" | "paperclip" | "pause" | "pencil-outline" | "pencil" | "person" | "phone" | "pinterest-boards-outline" | "pinterest-boards" | "pinterest" | "play-circle" | "play" | "plug" | "plus" | "positive-sentiment" | "power-up-outline" | "power-up" | "profile-connect" | "profile-disconnect" | "publishing-outline" | "publishing" | "puzzle-piece" | "qr-code" | "queue" | "recommendation" | "reddit-alien" | "reddit" | "reels-outline" | "reels" | "referrals" | "refresh" | "rejected" | "reply-outline" | "reply" | "reporting-period" | "reporting" | "reports-home" | "reports" | "retweet" | "route" | "rss" | "sales" | "salesforce-cloud" | "salesforce" | "save-assets" | "saved-messages" | "saved-reply-outline" | "saved-reply" | "search" | "send-again-outline" | "send-again" | "sent-message-outline" | "sent-message" | "share" | "shopify" | "shopping-bag-outline" | "shopping-bag" | "show-navigation" | "slack" | "small-density" | "smiley" | "some-access" | "sparkles" | "spike-alert" | "star-half-alt-solid" | "star-of-life" | "star-outline" | "star" | "sticky-note-outline" | "sticky-note" | "stories" | "story" | "suggestions" | "sun" | "tag-outline" | "tag" | "targeting-outline" | "targeting" | "tasks-check" | "tasks-outline" | "tasks" | "team-conversation-outline" | "team-conversation" | "team" | "text-asset" | "text" | "tiktok" | "times" | "tools" | "trash-can-outline" | "trash-can" | "trend-down" | "trend-neutral" | "trend-up" | "trends" | "triangle-black" | "triangle" | "tripadvisor-circle-outline" | "tripadvisor-circle" | "tripadvisor" | "trophy-outline" | "tumblr" | "twitter-audience-network" | "twitter" | "underline" | "unfollow-outline" | "unfollow" | "unlink" | "unlock" | "upload" | "user-circle" | "users" | "verified" | "video-camera-story" | "video-camera" | "vip" | "weight" | "whatsapp" | "window-maximize" | "window-minimize" | "window-regular" | "window-restore" | "woocommerce" | "x" | "yelp-full-star" | "yelp-half-star" | "yelp" | "youtube" | "zendesk";
+export type EnumIconNames = "active-listener" | "add-item" | "add-keyword" | "add-team-member" | "add-variable" | "address-card-outline" | "address-card-solid" | "adobe-experience-manager" | "ads" | "advocacy-outline" | "advocacy" | "android" | "apple" | "approval-indicator-outline" | "approval-indicator" | "archive" | "arrow-down-line" | "arrow-down" | "arrow-left-line" | "arrow-left" | "arrow-right-line" | "arrow-right" | "arrow-up-line" | "arrow-up" | "arrows" | "asset-library-outline" | "asset-library" | "assign" | "atom" | "audio" | "back-to-top" | "bambu-icon-outline" | "bambu-icon" | "barcode" | "basketball" | "bell-outline" | "bigcommerce" | "bitly" | "bold" | "book" | "bookmark" | "bot" | "browser" | "business" | "calendar-outline" | "calendar" | "camera-outline" | "camera-story" | "camera" | "campaign" | "canva" | "carousel" | "cart-plus-outline" | "cart-plus" | "check" | "chevron-down-filled" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up-down-filled" | "chevron-up-filled" | "chevron-up" | "circle-check-outline" | "circle-check" | "circle" | "circle+" | "circles" | "circlex" | "click-to-view" | "clicks" | "clipboard-outline" | "clipboard" | "clock" | "closed-captioning" | "cloud" | "code" | "columns" | "comment-ai-outline" | "comment-ai" | "comment-alt-outline" | "comment-alt" | "comment-lines-alt-outline" | "comment" | "compact-density" | "compact-indicator" | "comparison" | "competitor" | "compose" | "content-suggestions" | "credit-card" | "crop" | "crown" | "dashboard" | "deconstructed-negative-sentiment" | "deconstructed-neutral-sentiment" | "deconstructed-positive-sentiment" | "discovery" | "dislike-outline" | "dislike" | "dm-link-outline" | "dm-link" | "dotdotdot" | "download" | "drafts-outline" | "drafts" | "dropbox" | "duplicate-outline" | "duplicate" | "emoji-outline" | "emoji" | "empty-image" | "engagement-per-post" | "engagements" | "error" | "exchange-alt" | "expanded-indicator" | "export" | "extended-circles" | "external-link-alt" | "external-link" | "extreme-negative-sentiment" | "eye-outline" | "eye-slash-outline" | "eye-slash" | "eye" | "facebook-audience-network" | "facebook-branded-content-outline" | "facebook-branded-content" | "facebook-groups" | "facebook" | "fb-reactions-angry" | "fb-reactions-haha" | "fb-reactions-like" | "fb-reactions-love" | "fb-reactions-sad" | "fb-reactions-wow" | "feedly" | "feeds" | "female" | "file-chart-line" | "file-edit" | "file-times-solid" | "filter" | "flag-outline" | "flag" | "flat-negative-sentiment-outline" | "flat-negative-sentiment" | "flat-neutral-sentiment-outline" | "flat-neutral-sentiment" | "flat-positive-sentiment-outline" | "flat-positive-sentiment" | "folder-open" | "folder" | "follow-outline" | "follow" | "follower-increase" | "following" | "font" | "full-access" | "gear" | "gears" | "github" | "glassdoor" | "glasses" | "globe" | "google-analytics-color" | "google-business-messages" | "google-drive" | "google-my-business" | "grip" | "h1" | "h2" | "h3" | "h4" | "hamburger" | "hashtag" | "headset" | "heart-outline" | "heart" | "heartbeat" | "help-alt" | "help" | "hiking" | "history" | "home" | "hourglass" | "hubspot" | "image-caption" | "image" | "images" | "impressions-per-post" | "impressions" | "inactive-listener" | "inbox-action" | "inbox-views" | "inbox" | "indicator" | "industry" | "info" | "instagram" | "internal-activity-outline" | "internal-activity" | "italic" | "key" | "keyboard" | "laptop-phone" | "large-density" | "lift" | "like-outline" | "like" | "link" | "linkedin-audience-network" | "linkedin" | "list-ol" | "listening" | "lists" | "location-outline" | "location" | "lock" | "magic-wand" | "male" | "marketo" | "mention" | "message-preview-outline" | "message-preview" | "message" | "messages-outline" | "messages" | "messenger" | "metric-table" | "microsoft-dynamics" | "minus" | "mobile" | "monitor" | "moon" | "negative-sentiment" | "neutral-positive-sentiment" | "neutral-sentiment" | "new-trend" | "newspaper" | "no-access" | "notepad" | "notifications-publishing-outline" | "notifications-publishing" | "notifications" | "offline" | "online" | "paid-promotion-outline" | "paid-promotion" | "paid" | "paint" | "palette" | "paperclip" | "pause" | "pencil-outline" | "pencil" | "person" | "phone" | "pinterest-boards-outline" | "pinterest-boards" | "pinterest" | "play-circle" | "play" | "plug" | "plus" | "positive-sentiment" | "power-up-outline" | "power-up" | "profile-connect" | "profile-disconnect" | "publishing-outline" | "publishing" | "puzzle-piece" | "qr-code" | "queue" | "recommendation" | "reddit-alien" | "reddit" | "reels-outline" | "reels" | "referrals" | "refresh" | "rejected" | "reply-outline" | "reply" | "reporting-period" | "reporting" | "reports-home" | "reports" | "retweet" | "route" | "rss" | "sales" | "salesforce-cloud" | "salesforce" | "save-assets" | "saved-messages" | "saved-reply-outline" | "saved-reply" | "search" | "send-again-outline" | "send-again" | "sent-message-outline" | "sent-message" | "share" | "shopify" | "shopping-bag-outline" | "shopping-bag" | "show-navigation" | "slack" | "small-density" | "smiley" | "some-access" | "sparkles" | "spike-alert" | "star-half-alt-solid" | "star-of-life" | "star-outline" | "star" | "sticky-note-outline" | "sticky-note" | "stories" | "story" | "suggestions" | "sun" | "tag-outline" | "tag" | "targeting-outline" | "targeting" | "tasks-check" | "tasks-outline" | "tasks" | "team-conversation-outline" | "team-conversation" | "team-sprout-outline" | "team-sprout" | "team" | "text-asset" | "text" | "tiktok" | "times" | "tools" | "trash-can-outline" | "trash-can" | "trend-down" | "trend-neutral" | "trend-up" | "trends" | "triangle-black" | "triangle" | "tripadvisor-circle-outline" | "tripadvisor-circle" | "tripadvisor" | "trophy-outline" | "tumblr" | "twitter-audience-network" | "twitter" | "underline" | "unfollow-outline" | "unfollow" | "unlink" | "unlock" | "upload" | "user-circle" | "users" | "verified" | "video-camera-story" | "video-camera" | "vip" | "weight" | "whatsapp" | "window-maximize" | "window-minimize" | "window-regular" | "window-restore" | "woocommerce" | "x" | "yelp-full-star" | "yelp-half-star" | "yelp" | "youtube" | "zendesk";

package/__flow__/IconViewBoxes.js

@@ -333,6 +333,8 @@ module.exports = {
   "tasks": "0 0 12 16",
   "team-conversation-outline": "0 0 16 18",
   "team-conversation": "0 0 16 18",
+  "team-sprout-outline": "0 0 18 18",
+  "team-sprout": "0 0 18 18",
   "team": "0 0 18 16",
   "text-asset": "0 0 16 16",
   "text": "0 0 8 16",

package/commonjs/Checkbox/styles.js

@@ -133,7 +133,7 @@ var CheckboxContainer = _styledComponents.default.span.withConfig({
   displayName: "styles__CheckboxContainer",
   componentId: "sc-1hcgibh-6"
 })(function (props) {
-  return (0, _styledComponents.css)(["display:inline-flex;align-items:center;box-sizing:border-box;position:relative;transition:all ", " ", ";@supports (-webkit-appearance:none){&:before{content:url('data:image/svg+xml;utf8,", "');opacity:", ";position:absolute;width:", ";height:", ";text-align:center;transform:translateY(1px);line-height:1;margin:auto;pointer-events:none;transition:", " ", ";}&:hover:before{opacity:", ";}", " input[type='checkbox']{box-sizing:border-box;appearance:none;margin:0;padding:0;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:all ", " ", ";cursor:", ";flex-shrink:0;&:not(:checked){", "}&:checked{border-color:", ";background-color:", ";}", " &:focus{", "}}}", ""], props.theme.duration.fast, props.theme.easing.ease_in, (0, _server.renderToStaticMarkup)(getIcon(props.indeterminate ? 'indeterminate' : 'check', props.checked ? props.theme.colors.form.background.base : props.theme.colors.form.border.base)), props.checked ? 1 : 0, props.theme.space[400], props.theme.space[400], props.theme.duration.fast, props.theme.easing.ease_inout, props.disabled && !props.checked ? 0 : 1, props.disabled && (0, _styledComponents.css)(["opacity:0.4;"]), props.theme.space[400], props.theme.space[400], props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.theme.duration.fast, props.theme.easing.ease_in, props.disabled ? 'not-allowed' : 'pointer', !props.indeterminate && (0, _styledComponents.css)(["border-color:", " !important;background-color:", ";"], props.theme.colors.neutral[300], props.theme.colors.form.background.base), props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.indeterminate && props.checked && (0, _styledComponents.css)(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.form.border.selected, props.theme.colors.form.background.selected), _mixins.focusRing, _systemProps.COMMON);
+  return (0, _styledComponents.css)(["display:inline-flex;align-items:center;box-sizing:border-box;position:relative;transition:all ", " ", ";@supports (-webkit-appearance:none){&:before{content:url('data:image/svg+xml;utf8,", "');opacity:", ";position:absolute;width:", ";height:", ";text-align:center;transform:translateY(1px);line-height:1;margin:auto;pointer-events:none;transition:", " ", ";}&:hover:before{opacity:", ";}", " input[type='checkbox']{box-sizing:border-box;appearance:none;margin:0;padding:0;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:all ", " ", ";cursor:", ";flex-shrink:0;&:not(:checked){", "}&:checked{border-color:", ";background-color:", ";}", " &:focus{", "}}}", ""], props.theme.duration.fast, props.theme.easing.ease_in, (0, _server.renderToStaticMarkup)(getIcon(props.indeterminate ? 'indeterminate' : 'check', props.checked ? props.theme.colors.form.background.base : props.theme.colors.form.border.base)), props.checked ? 1 : 0, props.theme.space[400], props.theme.space[400], props.theme.duration.fast, props.theme.easing.ease_inout, props.disabled && !props.checked ? 0 : 1, props.disabled && (0, _styledComponents.css)(["opacity:0.4;"]), props.theme.space[400], props.theme.space[400], props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.theme.duration.fast, props.theme.easing.ease_in, props.disabled ? 'not-allowed' : 'pointer', !props.indeterminate && (0, _styledComponents.css)(["border-color:", " !important;background-color:", ";"], props.theme.colors.form.border.base, props.theme.colors.form.background.base), props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.indeterminate && props.checked && (0, _styledComponents.css)(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.form.border.selected, props.theme.colors.form.background.selected), _mixins.focusRing, _systemProps.COMMON);
 });
 exports.CheckboxContainer = CheckboxContainer;
 var _default = Container;

package/commonjs/Icon/Icon.js

@@ -85,6 +85,24 @@ var IconToggle = function IconToggle(_ref2) {
   }));
 };
 IconToggle.displayName = 'Icon.Toggle';
+/**
+ * **Accessibility note:** It is best practice to wrap `<Icon.Toggle />` in a button. The button must include `aria-label` and `aria-pressed` in order for a screen reader to properly communicate the icon's state. See example below.
+ *
+ * @example
+ * const [toggleState, setToggleState] = useState(false);
+ * <Button  // Wrap Icon.Toggle with Button
+ *  appearance='pill'
+ *  aria-label='like' // required for accessibility
+ *  aria-pressed={toggleState} // required for accessibility
+ *  onClick={() => setToggleState(!toggleState)}
+ * >
+ *  <Icon.Toggle
+ *    activeName="like"
+ *    inactiveName="like-outline"
+ *    isActive={toggleState}
+ *   />
+ * </Button>
+ */
 Icon.Toggle = IconToggle;
 var _default = Icon;
 exports.default = _default;

package/commonjs/IconViewBoxes.js

@@ -335,6 +335,8 @@ module.exports = {
   "tasks": "0 0 12 16",
   "team-conversation-outline": "0 0 16 18",
   "team-conversation": "0 0 16 18",
+  "team-sprout-outline": "0 0 18 18",
+  "team-sprout": "0 0 18 18",
   "team": "0 0 18 16",
   "text-asset": "0 0 16 16",
   "text": "0 0 8 16",

package/commonjs/Input/styles.js

@@ -13,7 +13,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-4stdun-0"
-})(["box-sizing:border-box;position:relative;input{box-sizing:border-box;width:100%;border:1px solid transparent;border-radius:", ";background-color:", ";color:", ";outline:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";font-weight:", ";appearance:none;margin:0;padding:", ";font-size:", ";line-height:", ";&::-ms-clear{display:none;}&::-webkit-search-cancel-button{appearance:none;}&:focus{", "}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}&::placeholder{color:", ";}", " ", "}", " ", " ", " ", " ", ""], function (props) {
+})(["box-sizing:border-box;position:relative;input{box-sizing:border-box;width:100%;border:1px solid transparent;border-radius:", ";background-color:", ";color:", ";outline:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";font-weight:", ";appearance:none;margin:0;padding:", ";font-size:", ";line-height:", ";&::-ms-clear{display:none;}&::-webkit-search-cancel-button{appearance:none;}&:focus{", "}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}&::placeholder{color:", ";font-style:italic;}", " ", "}", " ", " ", " ", " ", ""], function (props) {
   return props.theme.radii[500];
 }, function (props) {
   return props.theme.colors.form.background.base;

package/commonjs/Textarea/styles.js

@@ -13,7 +13,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-12lw4hd-0"
-})(["box-sizing:border-box;position:relative;textarea{box-sizing:border-box;display:block;width:100%;padding:", ";border:1px solid ", ";border-radius:", ";background-color:", ";color:", ";outline:none;resize:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";", " font-weight:", ";appearance:none;&:focus{", "}&:placeholder{color:", ";}", " ", " ", "}", " ", " ", ""], function (props) {
+})(["box-sizing:border-box;position:relative;textarea{box-sizing:border-box;display:block;width:100%;padding:", ";border:1px solid ", ";border-radius:", ";background-color:", ";color:", ";outline:none;resize:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";", " font-weight:", ";appearance:none;&:focus{", "}&::placeholder{color:", ";font-style:italic;}", " ", " ", "}", " ", " ", ""], function (props) {
   return props.theme.space[300];
 }, function (props) {
   return props.theme.colors.form.border.base;

package/commonjs/TokenInput/styles.js

@@ -13,7 +13,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-18dw7or-0"
-})(["box-sizing:border-box;position:relative;display:flex;flex-wrap:wrap;align-items:center;align-content:center;cursor:text;width:100%;border:1px solid ", ";border-radius:", ";margin:0;padding:", ";padding-top:", ";background-color:", ";color:", ";transition:border-color ", " ", ",box-shadow ", " ", ";", ";font-family:", ";font-weight:", ";appearance:none;button{margin:", " ", " 0 0;}input{", ";outline:none;border:none;flex:1;padding:0;padding-top:", ";margin:", " ", " ", " 0;color:", ";background-color:", ";min-height:20px;&::-webkit-search-cancel-button{appearance:none;}&:focus{box-shadow:none;}&::-ms-clear{display:none;}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}", "}&:placeholder{color:", ";}", " ", " ", " ", " ", " ", " ", ""], function (props) {
+})(["box-sizing:border-box;position:relative;display:flex;flex-wrap:wrap;align-items:center;align-content:center;cursor:text;width:100%;border:1px solid ", ";border-radius:", ";margin:0;padding:", ";padding-top:", ";background-color:", ";color:", ";transition:border-color ", " ", ",box-shadow ", " ", ";", ";font-family:", ";font-weight:", ";appearance:none;button{margin:", " ", " 0 0;}input{", ";outline:none;border:none;flex:1;padding:0;padding-top:", ";margin:", " ", " ", " 0;color:", ";background-color:", ";min-height:20px;&::-webkit-search-cancel-button{appearance:none;}&:focus{box-shadow:none;}&::-ms-clear{display:none;}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}&::placeholder{color:", ";font-style:italic;}", "}", " ", " ", " ", " ", " ", " ", ""], function (props) {
   return props.theme.colors.form.border.base;
 }, function (props) {
   return props.theme.radii[500];
@@ -57,10 +57,10 @@ var Container = _styledComponents.default.div.withConfig({
   return props.theme.colors.text.body;
 }, function (props) {
   return props.theme.colors.form.background.base;
-}, function (props) {
-  return props.disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;"]);
 }, function (props) {
   return props.theme.colors.form.placeholder.base;
+}, function (props) {
+  return props.disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;"]);
 }, function (props) {
   return props.hasBeforeElement && (0, _styledComponents.css)(["padding-left:40px;"]);
 }, function (props) {

package/commonjs/themes/light/theme.js

@@ -209,13 +209,13 @@ var colors = _objectSpread(_objectSpread({
       selected: _seedsColor.default.COLOR_NEUTRAL_800
     },
     border: {
-      base: _seedsColor.default.COLOR_NEUTRAL_400,
+      base: _seedsColor.default.COLOR_NEUTRAL_600,
       error: _decorativePalettes.red.highlight,
       warning: _decorativePalettes.yellow.highlight,
       selected: _seedsColor.default.COLOR_NEUTRAL_800
     },
     placeholder: {
-      base: _seedsColor.default.COLOR_NEUTRAL_600
+      base: _seedsColor.default.COLOR_NEUTRAL_700
     }
   },
   listItem: {